Alpine.js and Phoenix LiveView hooks: both needed?

Hearing that it now works seemlessly with LiveView, I recently added alpine.js to a project in order to handle some dynamic UI state. It worked great, and I moved some related code out of a LiveView hook into the new alpine template in order to keep it simple/organized. While doing so I had the idea that pretty much everything in the hooks could be moved to alpine functions, with the exception of pushEvent calls.

Anybody else using alpine and LV together have thoughts about the proper role for hooks? I there a way to call pushEvent outside the Hooks context?

1 Like

I wrote an article on using LiveView with Alpine.js.

Even with Alpine.js, hooks are useful for handling LiveView lifecycle events and are required to use the new push_event functionality introduced in 0.14. Also, if I have a big chunk of JavaScript code, I would rather put it in a hook function than in my HTML and then call it from Alpine.js code.

You can’t call pushEvent directly from Alpine.js code, but you can proxy through a hook. Since hooks are regular JavaScript objects, you can register the proxy hook on window and then call pushEvent through that.

Here is an example from the article:

Hooks.PushEvent = {
  mounted() {
    window.pushEventHook = this
  }
}
<div id="counter"
     phx-hook="PushEvent"
     x-data="{}">
  <h1>The count is: <span><%= @count %></span></h1>
  <button @click="pushEventHook.pushEvent('decrement', {})">
    Decrement
  </button>
  <button @click="pushEventHook.pushEventTo('#counter', 'increment', {})">
    Increment
  </button>
</div>

That said, I find creating a general PushEvent proxy hook to be somewhat crude. Typically I will create more purposeful functions on my hooks that call pushEvent as part of their implementation. So in the above example, I would create increment and decrement functions on a CounterHook, registered on window as counter, then call them with counter.increment() and counter.decrement().

11 Likes

Thanks, your article looks like it has a lot of useful information.

Attaching the hook to the window is, as you say, a bit crude, but it certainly seems like a crucial tool when using Alpine, especially if the alternative is dropping in script tags where ever you have even slightly complex UX logic.

On the other hand, I wonder though, if there is that much logic required for a component, maybe something more fully featured like Vue would be a better fit than Alpine in such a case. But I don’t really see myself trying to use LiveView, Alpine, and Vue all in a single project. Just thinking out loud…

I know it has been a while since this discussion, but I think the Phoenix.LiveView.JS API provides a good way to push events from JS.

<button 
  class="btn" 
  @click.prevent="liveSocket.execJS($el, $el.dataset.decrement)" 
  data-decrement={JS.push("decrement", target: @myself)}>-</button>
1 Like