Add hooks to socket after initialization?

StormByte · February 13, 2024, 2:35pm

I have been reading the JS interoperability guide and saw some examples on how to put custom hooks to be fired on some liveview events.

However I came up with the following question: Can a hook be defined into another js file which loads after app.js? This means, when socket is already connected and created so no constructor additions are possible.

sodapopcan · February 13, 2024, 3:57pm

You prrrrrrrobably could by mutating the hooks key but I certainly wouldn’t recommend it even if it works (and you didn’t hear that from me, lol). What are you looking to accomplish? Like, using something from a <script> tag?

StormByte · February 14, 2024, 9:42am

Thanks for answering!

I am trying to define hooks from other parts of the project (or even directly from dependencies), this way I could setup a dependency with its own html.heex (accomplished) and its liveview hooks if applicable (not accomplished, hence this question).

I also thought on generating the app.js file dynamically instead of a static file which might solve this issue, but I would prefer to avoid this approach.

cmo · February 14, 2024, 12:44pm

You can certainly have them in separate files but you have to import them into app.js. I don’t think you’re gonna have much luck adding hooks at runtime. It’s been requested a couple of times before.

github.com/phoenixframework/phoenix_live_view

Added dynamic hook methods to LiveSocket

phoenixframework:main ← C-Sinclair:colocated-hooks

opened 08:19AM - 20 Jul 23 UTC

C-Sinclair

+35 -1

This PR adds 2 new methods to the JS client's `LiveSocket` - `addHook` T…his allows for dynamically adding new hooks to the LiveSocket, after initialisation. - `removeHook` This allows for removal of hooks dynamically ## The Why I've been experimenting with co-locating JS hooks with the Liveviews which call them (so outside of the traditional `/assets` folder) This means that hooks are not known at first render and initialisation of the `LiveSocket` These methods therefore are needed to provide a way of lazily adding/removing hooks at runtime! ## An example using this In my toy project https://github.com/C-Sinclair/hook_beast, you'll see the `addHook` function in action ([this line specifically](https://github.com/C-Sinclair/hook_beast/blob/67a492c053413f16ecaeb602d93baf87e26f22b4/lib/hook_beast.ex#L17))

github.com/phoenixframework/phoenix_live_view

phx-hook does not run in elements dynamically added to the DOM

opened 07:33PM - 28 Mar 23 UTC

closed 07:03PM - 12 May 23 UTC

viniciusmuller

### Environment * Elixir version (elixir -v): `Elixir 1.14.3 (compiled with E…rlang/OTP 25)` * Phoenix version (mix deps): `1.7.2` * Phoenix LiveView version (mix deps): `0.18.18` * Operating system: `Linux debian 5.10.0-21-amd64 #1 SMP Debian 5.10.162-1 (2023-01-21) x86_64 GNU/Linux` * Browsers you attempted to reproduce this bug on (the more the merrier): Firefox, Chrome * Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes ### Actual behavior Currently, when an element is dinamically added to the DOM and it has a `phx-hook` attribute, the hook is ignored and not run. An example use case where this behavior is useful is implementing the Portal component in the [swish](https://github.com/thiagomajesk/swish) component library, which allows an user to mirror an element as a child of another DOM element (such as body), making it easy to create overlaid components, such as dialogs, modals and toasts. #### Steps to Reproduce ```js // Simple "Hello" hook in app.js let Hooks = {} Hooks.Hello = { mounted() { console.log("Mounted!") } } ``` ```heex <%# HTML Template %> <button id="clone" class="bg-teal-400 rounded p-1"> Clone </button> <template id="temp"> <div id="hook" phx-hook="Hello"></div> </template> <div id="hook-2" phx-hook="Hello"></div> <script> document.querySelector("#clone").addEventListener("click", e => { let template = document.querySelector("#temp") let clone = template.content.cloneNode(true).firstElementChild; document.body.appendChild(clone); }) </script> ``` One can see that after clicking the clone button, an element containing a `phx-hook` attribute is *mounted* into the DOM but the hook does not run. ### Expected behavior After mounting an element that has a `phx-hook` attribute into the DOM, the hook should be executed. It is also interesting to note that other *phx* attributes, such as `phx-click` continue to work on the dynamically mounted element, whereas `phx-hook` doesn´t.

sodapopcan · February 14, 2024, 12:47pm

Ah yes, this is a known limitation. I don’t follow the dev mailing list closely but I think we should be getting a solution to this at some point. As it stands, any lib that includes JS hooks always has a step in the docs to import and splay them in, as per @cmo’s answer.

cmo · February 14, 2024, 12:55pm

Surface has colocated hooks which it compiles into a single js file that you include. If you’re happy to write a compiler (or copy theirs) then this is an option.

The mailing list is just ads for weapons these days, ya gotta subscribe to the GitHub notifications (and be happy to delete 20 emails everyday).

sodapopcan · February 14, 2024, 1:02pm

lol, fair!

And yes, Surface has it so that is always an option. I honestly don’t love Surface so I never think to mention it. Or rather, I should say that I much prefer heex and very much appreciate the trailblazing Surface has done.

StormByte · February 14, 2024, 7:35pm

The first PR seems a lot interesting! It is a pitty that it got closed by Chris

I think that for now it is better to generate tje app.js dynamically from a controller that will gather and include all hooks rather than add them later dynamically by manually patching.

Thanks to all for your responses!

Add hooks to socket *after* initialization?

Add hooks to socket after initialization?