Powered byAppUnite LogoBlog
mountains-1412683.png

Quick migration from LEEx to HEEx

| 1 min read

mountains-1412683.png

Quick migration from LEEx to HEEx

Since Phoenix LiveView 0.16 has brought new HEEx templates (and LEEx are going to be deprecated), you may come across some issues with migrating it.

Sigil

  1. You need to replace ~L with ~H.

    • LEEx
    ~L"""
<h1><%= String.upcase(@title) %></h1>
"""
    • HEEx
    ~H"""
<h1><%= String.upcase(@title) %></h1>
"""

HTML attributes interpolation

  1. String atrributes

    • LEEx
    <button style="background-color: <%= @theme %>">Click here</button>
<input type="text" value="<%= @name %>" placeholder="Name" />
    • HEEx
    <button style={"background-color: #{@theme}"}>Click here</button>
<input type="text" value={@name} placeholder="Name" />

  2. Boolean attributes

    • LEEx
    <input type="checkbox" <%= if @is_accepted, do: "checked" %> />
    • HEEx
    <input type="checkbox" checked={@is_accepted} />

Syntax coloring:

You should use https://github.com/phoenixframework/vscode-phoenix extension for HEEx templates syntax coloring.

HEEx formatter:

Here you can find code formatter for HEEx templates (alpha stage) - https://github.com/feliperenan/heex_formatter.

Other:

  1. In HEEx <%= %>, <% %> can only be used in HTML content and it’s not allowed to use them in HTML tags.

    • Not allowed
    <input type="checkbox" <%= if @is_accepted, do: "checked" %> />
    • Allowed
    <h1>
    <%= @title %>
</h1>

  2. HEEx requires Elixir ≥ 1.12.0 to provide accurate file:line:column information in error message.

  3. HEEx templates are being validated during the compilation.

Resources: