Alpine.js and Phoenix LiveView hooks: both needed?

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().

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>