Our website uses cookies.
Reject AllAllow all

This website stores cookies on your computer. The data is used to collect information about how you interact with our website and allow us to remember you. We use this information to improve and customize your browsing experience and for analytics and metrics about our visitors both on this website and other media.

Cookie PolicyPrivacy Notice
Tech Blog
>
Engineering

Quick migration from LEEx to HEEx

Kacper Latuszewski
Backend Developer

Student and Software Engineer working in a spare time. In love with Elixir for almost 3 years.

Related Insights:
Damian Kasperski
Testing Strategy of Flutter Application
Engineering
Artur Kasza
How to become Junior Elixir Developer with no Elixir knowledge?
Engineering
Tomasz Lewandowski
Introduction to asynchronous programming in Unity
Engineering
Hire your team!
Do you need people who can do what you're reading about and more?

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"""

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

    <%= String.upcase(@title) %>
    
"""

HTML attributes interpolation

  1. String atrributes

    • LEEx
    • HEEx

  2. Boolean attributes

    • LEEx
     />
    • HEEx

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
     />
    • Allowed
    
    <%= @title %>

  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: