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