HEEx <%= within phx-no-curly-interpolation cancels its effect

[rhcarvalho]

Environment

• Elixir version (elixir -v):

Erlang/OTP 27 [erts-15.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit:ns]

Elixir 1.18.1 (compiled with Erlang/OTP 27)

• Phoenix version (mix deps):

• phoenix 1.7.18 (Hex package) (mix)
  locked at 1.7.18 (phoenix) 1797fcc8

• Phoenix LiveView version (mix deps):

• phoenix_live_view 1.0.1 (Hex package) (mix)
  locked at 1.0.1 (phoenix_live_view) c0f517e6

• Operating system: Linux
• Browsers you attempted to reproduce this bug on (the more the merrier): N/A
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: N/A

Actual behavior

I have a LiveView where I need to render some instructions which include a little bit of JavaScript code (as text, not to be executed but to be read/copy-pasted).

I'm using LiveView 1.0.1, and so using phx-no-curly-interpolation to turn off the new curly brace interpolation inside the relevant <pre> tag.

Then, I'm trying to render an assign within that tag, so I use the HEEx/EEx syntax <%= @variable_name %>.

It seems that by writing a template interpolation like that the phx-no-curly-interpolation effect is gone and the compiler tries to interpolate subsequent values in curly braces.

This gives me a compilation error:

  def render(assigns) do
    ~H"""
    <div class="prose">
      <p>Copy and paste this JS code:</p>
      <pre phx-no-curly-interpolation>window.addEventListener('message', event => {
      if (event.origin !== '<%= @domain %>') return;

      const {foo: foo, bar: bar} = event.data;
      console.log(foo, bar);
    });</pre>
    </div>
    """
  end

     error: syntax error before: foo
     │
 107 │             foo: foo, bar: bar
     │             ^
     │

Expected behavior

I expected <pre phx-no-curly-interpolation> to ignore { and } until the matching </pre> tag.

Workaround

After reading the tip in #3554, I realized I can use <%= "{" %>. Notice that the first { is correctly ignored because of phx-no-curly-interpolation, and only the second one need this escaping:

  def render(assigns) do
    ~H"""
    <div class="prose">
      <p>Copy and paste this JS code:</p>
      <pre phx-no-curly-interpolation>window.addEventListener('message', event => {
      if (event.origin !== 'https://<%= @domain %>') return;

      const <%= "{" %>foo: foo, bar: bar} = event.data;
      console.log(foo, bar);
    });</pre>
    </div>
    """
  end