Liveview Handling multiple phx-hook on same DOM node

seb3s · March 27, 2020, 11:43am

Hello,
I sometimes need to attach multiple phx-hook on same DOM node when using liveview. I don’t think this is currently supported.
What would be the best way to handle this ?
Thanks,
Sébastien.

sfusato · March 27, 2020, 12:33pm

I usually add the phx-hook on an inner/outer node (might need to create one if none are available).

chrismccord · March 27, 2020, 1:11pm

this is not supported today, but you you can delegate from a single hook out to your others

aywen · March 11, 2021, 1:34pm

That is an interesting idea. How would you do that?

dorgan · March 11, 2021, 2:46pm

I recently wrote a helper for that:

gist.github.com

https://gist.github.com/doorgan/b05bff1772b9ed43a5fcf4b7fbab2f38#file-live_element-js

app.js

// ...

import { define, LiveElement } from "./live_element";

define("foo", {
  mounted() {
    console.log("MOUNTED:", this.el);
  },
});

This file has been truncated. show original

example.html.leex

<%= LiveElement.live_element("button", id: "foo", data_live_hooks: "foo", data_live_event_click: "live_element_click") do %>
  Click me!
<% end %>

live.ex

# ...
def handle_event("live_element_click", _, socket) do
  IO.inspect("Click received from LiveElement")
  {:noreply, socket}
end
# ...

There are more than three files. show original

My motivation was that I wanted to handle custom events from my web components and also play with the idea of lazy loading hooks to reduce the main bundle size(this last part isnt in the gist)

derpycoder · July 1, 2023, 7:59am

We want some of that lazy-loaded hooks, please.