Optimization for new heex templates combined with JS and for loops (caution : this is a HACK)

Hello,
I publish this here because it will probably get lost in github closed issues for a long time and I think it could be useful to others to solve some specific cases.

The problem I faced is that liveview isn’t currently able to optimize the payload associated with the JS commands when used inside a for loop.

Here is a sample template :

<tbody id="hover_event">
  <%= for event <- @events do %>
    <tr phx-click={JS.push("view_details", value: %{delegate: @module})
      |> JS.remove_class("is-selected", to: "#hover_event > tr")
      |> JS.add_class("is-selected") }
      phx-value-id={event.id}>
    <td><%= event.event_dt %></td>
    <td><%= event.event_name %></td>
    <td><%= event.event_data %></td>
  </tr>
  <% end %>
</tbody>

I’ve voluntarily put outside the phx-click attribute the only dynamic param to this click event (which is an id passed as phx-value-id)

Right now, the fully static phx-click rendered attribute is passed for each event of the for loop.

The HACK :
I force the diff engine to optimize it as a static portion by writing this template:

<tr phx-click='[["push",{"event":"view_details","value":{"delegate":"Admin.Sysevent"}}],
    ["remove_class",{"names":["is-selected"],"to":"#hover_event > tr"}],
    ["add_class",{"names":["is-selected"]}]]'
    phx-value-id={event.id}>

which reads quite the same as the original one.
BUT please note that this is unsupported code :wink:
This results in a payload divided by 6 in my use case.

The full issue is here : Optimization for new heex templates combined with JS and for loops · Issue #1744 · phoenixframework/phoenix_live_view · GitHub

Cheers,
Sébastien

3 Likes