I like the idea of using a local js helper library like alpinejs when working with Liveview. I find it very useful for simple things like menu open/close where higher latency might be a tad too noticeable when solved in Liveview. What’s particularly nice is that I keep the ability to “liveview update” content inside an element opened via alpine.
Conveniently, support for libraries like alpinejs was added in Liveview a little while ago, documented here. To get to the relevant subsection, one needs to search for the paragraph that contains “onBeforeElUpdated”.
Unfortunately, there seems to be a security concern in alpine that makes me shy away from it at the moment. Hoping there will be a solution from the alpine team in the not too distant future, though
In the meantime, my options seem to be:
Use liveview JS hooks with phx-update=“ignore” for these situations. Works ok, but I lose the ability to “liveview update” content inside ignored elements.
Use liveview JS hooks without phx-update=“ignore” but using the “updated” callback to rescue an open menu after a Liveview update closed it. Am in the process of experimenting with this, the “updated” callback is relatively easy to understand.
Use the onBeforeElUpdated callback mentioned above like alpine does. Unfortunately, I can’t quite figure out how to use that, and was wondering if anybody might have an example? I’m looking at the morphdom docs at the moment, but it’s slow going…