Version 3 breaks compatibility with Phoenix Live View

[nshafer]

I just started looking at using Alpine.js with Phoenix Live View today, and immediately hit some issues. I was following the guides out there, including https://dockyard.com/blog/2020/12/21/optimizing-user-experience-with-liveview written by the author of Live View and who added support for Alpine.js to LV in phoenixframework/phoenix_live_view#809. After digging into it I identified that 2.8.2 works fine, but 3.0.6 and later seems to break. I have duplicated the issue in a brand new bare-bones phoenix project.

I configured LV to call Alpine.clone as instructed:

import Alpine from 'alpinejs'
Alpine.start()

let liveSocket = new LiveSocket("/live", Socket, {
    params: { _csrf_token: csrfToken },
    dom: {
        onBeforeElUpdated(from, to){
            if (from.__x) { Alpine.clone(from.__x, to) }
        }
    }
})

And wrote a simple test as:

<div class="row">
  <div class="column">
    <div class="phx-hero">
      <h2>Live view counter</h2>
      <h3><%= @count %></h4>
      <button phx-click="increment">Increment</button>
    </div>
  </div>
  <div class="column">
    <div class="phx-hero" x-data="{ counter: 0}">
      <h2>Alpine.js counter</h2>
      <h3 x-text="counter"></h3>
      <button @click="counter++">Increment</button>
    </div>
  </div>
</div>

However, it appears that whenever LV updates the DOM, it is clobbering Alpine and not cloning the before state of the dom. I downgraded to version 2.8.2, and it works as expected:

lv_a_expected.mp4

This is what happens if I upgrade it to the next release, 3.0.6:

lv_a_3bug.mp4

And that behavior stays the same with the latest version, 3.2.0.

So it seems that for some reason the dom is not being cloned properly when LV updates?

This test is available at https://github.com/nshafer/a3test. The JS is in assets/js/app.js and the template is in lib/a3test_web/live/page_live.html.leex. Everything else is standard with a phoenix project created with mix phx.new --live --no-ecto a3test plus all of the dependencies in package.json were updated (webpack 5 mostly) since webpack 4 didn't seem to like alpine.js 3 either.

This might be related to #1647.

Phoenix: 1.5.9 (latest)
Phoenix Live View: 0.15.7 (latest)

Thanks,
Nate

[seb3s]

Hello,
according to this thread
https://elixirforum.com/t/alpine-js-v3-support-for-liveview/40465
you should update the dom setting with

dom: { 
  onBeforeElUpdated(from, to) { 
    if (from._x_dataStack) { window.Alpine.clone(from, to) }}}

Cheers,
Sébastien.

[nshafer]

That did indeed fix it, thank you! I should have checked the elixir forum specifically instead of relying on google. I'm thinking a page on alpinejs.dev with specific instructions on how to integrate with popular frameworks (livewire, liveview, etc) that is a source of truth would be helpful. I could contribute Phoenix Live View specific instructions if such a page is created.