How to replace "direct/simple" sigil_E to new sigil_H to avoid warnings?

Questions / Help
, ,
1

Updating to Elixir 1.13 and got several warnings about sigil_E deprecation:

warning: Phoenix.HTML.sigil_E/2 is deprecated. use the ~H sigil instead

Assuming that not everything is (and will be) LiveView yet, how to correct the simple / direct sigil_E to new implementations (and to avoid warnings)?

...
import Phoenix.HTML, only: [sigil_E: 2, safe_to_string: 1]
...
def my_fun(arg1) do
  safe_html =
    ~E"""
      <div class="<%= arg1.class %>">
        <%= arg1.message %>
      </div>   
    """
    _html =
      safe_html
      |> safe_to_string()
end

This results in:

SAFE_HTML
{:safe, ["<div class=\"myclass\">ALOHA</div>"]}

HTML
"<div class=\"myclass\">ALOHA</div>"

1 Like
2

~H is not LiveView specific, that’s sorta the whole point :slight_smile: So you can go ahead and convert away in all your templates be they LiveView or Phoenix templates. The only thing you have to do (which can be tedious depending on the size of your app) is change all attribute values from <%= foo %> to {foo}.

3

Yes, but how to render back ~H to string like in this example:

  import Phoenix.HTML, only: [sigil_E: 2, safe_to_string: 1]
  use Phoenix.Component

  def test_e(enum \\ %{class: "my_class", message: "test"}) do
    safe_html =
      ~E"""
        <div class="<%= enum.class %>">
          <%= enum.message %>
        </div>
      """
    _html =
      safe_html
      |> safe_to_string()
  end

  def test_h(assigns \\ %{class: "my_class", message: "test"}) do
    safe_html =
      ~H"""
        <div class={@class}>
          <%= @message %>
        </div>
      """
    _html =
      safe_html
      # |> safe_to_string()
  end```

Output for test_h is:

%Phoenix.LiveView.Rendered{
  dynamic: #Function<0.45185133/1 in PeoplexServices.Common.Test.test_h/1>,
  fingerprint: 221383379682150331241601474698321142460,
  root: true,
  static: ["<div class=\"", "\">\n    ", "\n  </div>"]
}

And normaly with test_e is:

"  <div class=\"my_class\">\n    test\n  </div>\n"
4

Oh sorry, I misread.

I did some playing around (first time I made use of Mix.install/1 which was super cool!) and it looks like what you’re looking for is Phoenix.HTML.Safe.to_iodata/1 (see here). And for identical results you’re going to want to call List.to_string/1 on the result.

YouComponent.test_h()
|> Phoenix.HTML.Safe.to_iodata()
|> List.to_string()

EEx and heex work very differently as heex does change tracking.

I am curious as to why you need this, though. Other than having to change how attribute values are passed, changing to heex should just be a matter of just switching up the sigil.

3 Likes
5

In some cases for an API/Javascript for new html as text.

6

Ah, makes sense!

7

For me it was not just replacing ~E with ~H and changing the HTML attribute syntax. I got undefined function assigns/0 each time and had to add assigns = %{} each time even though the ~H snippet did not use any assign. See also "undefined function assigns/0" while trying to use Phoenix.LiveViewTest.rendered_to_string/1 · Issue #1798 · phoenixframework/phoenix_live_view · GitHub

1 Like
8

Ah yes, that is a bit of Phoenix magic that is confusing at first.

It’s not actually true that assigns is unused. ~H is a macro that expects an outer assigns variable to be defined—that’s how the @ variable access works.

As a side note, you don’t need the = %{} part, def render(assigns) will do (well, unless you are using it in a function that isn’t called with the component syntax).

9

Sorry, I read your reply minutes after I woke up and didn’t read properly. I see now you were not asking why and realize you are probably dealing with .heex.html files.

10

This was the approach I took as well on a version bump I’m currently working.

11

In case this is useful for anyone, here is a working example of composing safe HTML text using an ~H block:

defmodule EmailBody do
  import Phoenix.Component, only: [sigil_H: 2]

  def compose(question_of_the_day) do
    assigns = %{
      question: question_of_the_day
    }

    ~H"""
    <div><%= @question %>?</div>
    """
    |> Phoenix.HTML.Safe.to_iodata()
    |> List.to_string()
  end
end

$ iex -S mix
...
iex(20)> "Why did the chicken cross the road (and here is a rogue div: <div>)" |> EmailBody.compose()
"<div>Why did the chicken cross the road (and here is a rogue div: &lt;div&gt;)?</div>"

The rogue <div> in the template parameter is safely escaped in the resulting string.

1 Like