kartheek

kartheek

Share your thoughts on html validation in heex

Heex engine validates html. Some level of html validation is needed to avoid tag soup and clean code.

Consider the following snippet:

def div_wrapper_bug(assigns) do
    assigns = assign_if_nil(assigns, :wrapper_class, nil)
    ~H"""
    <%= if @wrapper_class do %>
    <div class={@wrapper_class}> <!-- opening tag -->
    <% end %>
      <%= render_slot(@inner_block) %>
    <%= if @wrapper_class do %>
    </div> <!-- closing tag -->
    <% end %>
    """
  end

As you can see the above snippet will always produce valid html. But compilation will fail with below message:

** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/<YourProject>/form.ex:177:5: missing opening tag for </div>
    (phoenix_live_view 0.17.5) lib/phoenix_live_view/html_engine.ex:227: Phoenix.LiveView.HTMLEngine.pop_tag!/2
    (phoenix_live_view 0.17.5) lib/phoenix_live_view/html_engine.ex:432: Phoenix.LiveView.HTMLEngine.handle_token/2
    (elixir 1.13.0) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_live_view 0.17.5) lib/phoenix_live_view/html_engine.ex:86: Phoenix.LiveView.HTMLEngine.handle_end/1
    (eex 1.13.0) lib/eex/compiler.ex:191: EEx.Compiler.wrap_expr/5
    (eex 1.13.0) lib/eex/compiler.ex:140: EEx.Compiler.generate_buffer/4
    (eex 1.13.0) lib/eex/compiler.ex:82: EEx.Compiler.generate_buffer/4
    (phoenix_live_view 0.17.5) expanding macro: Phoenix.LiveView.Helpers.sigil_H/2
    (<YourProject> 0.1.0) lib/<YourProject>/form.ex:171: Form.div_wrapper_bug/1

The below snippet will compile:

<%= if @wrapper_class do %>
    <div class={@wrapper_class}>
       <%= render_slot(@inner_block) %>
    </div>
<% else %>
    <%= render_slot(@inner_block) %>
<% end %>

The problem with workaround snippet is we will have to duplicate code. render_slot is simplified example - it may be a html block.

I logged a bug on phoenix_live_view - it is closed as not a bug. Missing opening tag error when using `if` and closing tag is not present in same `if` block · Issue #1856 · phoenixframework/phoenix_live_view · GitHub

Discussion is about the heex engine’s html validation:

  • what level of validation is needed - strict or loose, etc?
  • what should be done in scenarios where a valid html is generated and but compiler is not sure 100% ?
  • should it have configurations to treat certain kinds of errors as warnings
  • should there be escape hatch (annotation) to disable validations on a block which produces valid html which is not understood by heex engine.

Please share your thoughts on it.


EDIT:
Jose updates on github issue.

  • The escape hatch exists, you can render the tags dynamically:
<%= raw "<div ...>" %>

<%= raw "</div>" %>
  • what cannot be done is to render the tags statically and conditionally.

Most Liked

LostKobrakai

LostKobrakai

I think this is a good thing as is, because as soon as you introduce backdoors of things the compiler cannot be aware of it’s whole usefulness goes down the drain. If you’re worried about duplicating markup you can just make this optional wrapper thing a function component:

def component_with_optional_wrapper(assigns) do
  ~H"""
  <.optional_wrapper wrapper_class={@wrapper_class}>
    <%# whatever content %>
  </.optional_wrapper>
  """
end

defp optional_wrapper(assigns) do
  ~H"""
  <%= if @wrapper_class do %>
      <div class={@wrapper_class}>
        <%= render_slot(@inner_block) %>
      </div>
  <% else %>
      <%= render_slot(@inner_block) %>
  <% end %>
  """
end

This way the small amout of duplication is nicely contained and reusable.

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

This 100%. The whole point of the feature is to provide guarantees, which means that the compiler needs to be able to know 100% of the time.

The level of analysis required to infer that the given example always works is on a whole other level from simply looking for matching tags, and also immediately fails the moment more complex functions get involved.

Where Next?

Popular in Discussions Top

matthias_toepp
I’d love to hear what people think about Wisp, the new Gleam web framework started by Gleam’s primary creator Louis Pilfold. Gleam, alon...
New
andre1sk
A big advantage to Elixir is all the distributed goodness but for many applications running on multiple nodes having integrated Etcd, Zoo...
New
Jayshua
I recently came across the javascript library htmx. It reminded me a lot of liveview so I thought the community here might be interested....
New
jeramyRR
This is an interesting article to read. Elixir’s performance, like usual, is excellent. However, it seems like the high CPU usage is co...
New
New
Nvim
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New
RudManusachi
What configs will make sense to put to runtime.exs? – A bit of how I configure apps: I have generic configs in config/config.exs, dev...
New
scouten
I’m looking for a host for the server part of a small (personal) side project that I’m working on. It’s currently written in Node.js and ...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
paulanthonywilson
I like Umbrella projects and pretty much always use them for personal Elixir stuff, especially Nerves things. But I don’t think this is ...
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement