(Phoenix.LiveView.HTMLTokenizer.ParseError) expected tag name on JS code

[imcvampire]

Code

<%= render ....FragmentView, "title.html", title: "Hex to Text" %>

<div x-data="{ hex: '', text: '' }">
  <label class="relative block">
  <textarea
    class="placeholder:italic placeholder:text-gray-400 block w-full border border-gray-300 rounded my-5 py-2 px-3
    shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
    placeholder="hex value"
    type="text"
    name="hex"
    x-model="hex"
  ></textarea>
  </label>

  <div class="grid grid-cols-3 gap-4">
    <button
      class="col-start-2 relative block my-5 py-2 px-4 rounded-full border-0 text-sm font-semibold bg-violet-50 text-violet-700 hover:bg-violet-100"
      @click="alert(hexToText(hex))"
    >
      Convert
    </button>
  </div>

  <label class="relative block">
  <textarea
    class="placeholder:italic placeholder:text-gray-400 block w-full border border-gray-300 rounded my-5 py-2 px-3
    shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
    placeholder="hex value"
    type="text"
    name="text"
    x-model="text"
  ></textarea>
  </label>

  <script>
    const hexToText = function(str1) {
      const hex = str1.toString();
      let str = '';

      for (let n = 0; n < hex.length; n += 2) {
        str += String.fromCharCode(parseInt(hex.substr(n, 2), 16))
      }
      return str
    }
  </script>

</div>

Expected behaviour

The code should be compiled successfully. The code (both HTML and JS) is correct.

Actual behaviour

The compiler throws an error:

(Phoenix.LiveView.HTMLTokenizer.ParseError) lib/.../templates/conversion/hex_to_text.html.heex:40:26: expected tag name
    (phoenix_live_view 0.16.4) lib/phoenix_live_view/html_tokenizer.ex:137: Phoenix.LiveView.HTMLTokenizer.handle_tag_open/5
    (phoenix_live_view 0.16.4) lib/phoenix_live_view/html_engine.ex:90: Phoenix.LiveView.HTMLEngine.handle_text/3
    (eex 1.13.0) lib/eex/compiler.ex:49: EEx.Compiler.generate_buffer/4
    (phoenix_view 1.0.0) lib/phoenix/template.ex:371: Phoenix.Template.compile/3
    (phoenix_view 1.0.0) lib/phoenix/template.ex:165: anonymous fn/4 in Phoenix.Template."MACRO-__before_compile__"/2
    (elixir 1.13.0) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_view 1.0.0) expanding macro: Phoenix.Template.__before_compile__/1
    lib/.../views/conversion_view.ex:1: ....ConversionView (module)

[josevalim]

This has been fixed in more recent LiveView versions, so please update!

[imcvampire]

@josevalim I believe I'm using the latest version 3.1.0.

[josevalim]

No phoenix_html, phoenix_live_view. It is a LiveView issue :)

[marcandre]

@josevalim We just got hit by this as we are converting our leex templates so we can upgrade to the 0.17 branch.
Our plan was to convert our templates gradually while we use the 0.16 series, and when we are finished upgrade to the 0.17. This bug makes it impossible to do this conversion gradually for our templates that have <script> tags without jumping through hoops though.
Would it be possible to have a release in the 0.16.x series that fixes this, to help the transition?

I'm realizing now that I might have misinterpreted the Changelog? The sentence "LEEx templates (~L sigil or .leex extension) are no longer supported.", does it apply only to "Stateful LiveComponents", and only the them, i.e. LiveViews can still be leex, and anything that isn't called via live_component can remain leex/eex?

[josevalim]

It applies only to Stateful LiveComponents and only the root template. So you can have a LiveComponent with ~H on the root but still calls a function or a regular component that returns ~L.

[marcandre]

Thanks. "only the root template" => right, so that means all LiveView (by which I mean anything that use Phoenix.LiveView).

So, would making a bug fix release for the 0.16.x line be tricky?

[josevalim]

Sorry, I mean "only root templates of LiveComponents". That was an inclusive "and".