Using LiveView with AlpineJS

Hi, I came back to say that I did the inclusion of Alpine in a slightly different manner. I’m using Alpine 3.2.1 and the snipped showed in the post helped, but didn’t solved all the problems I was having. So I’m leaving my snippet for anyone who comes across the same problem and can’t solve using the post:

Edit: I also should mention that maybe I have something wrong in my code that forces me to do things this way. I’m a beginner at Elixir/Phoenix, so if something looks off about this code or the approach, please, correct me

// FIRST IMPORT THE ALPINE MODULE AS YOU ARE USED TO
import Alpine from 'alpinejs';
// I'VE ALSO ATTACHED IT TO THE WINDOW OBJECT
window.Alpine = Alpine;

let liveSocket = new LiveSocket("/live", Socket, {
    dom: {
        onBeforeElUpdated(from, to) {
            if (from.__x) {
                window.Alpine.clone(from.__x, to);
            }
            
            if (from._x_dataStack) {
                window.Alpine.clone(from, to);
                // I HAD TO INITIALIZE THE TREE EVERYTIME IT UPDATES. 
                // I WAS FACING "Alpine is not defined" ERROR WHEN I DIDN'T
                window.Alpine.initTree(to)
            }
        }
    },
    params: { _csrf_token: csrfToken },
})
...
// DON'T FORGET TO START ALPINE AND DON'T PUT THIS SNIPPET
// INSIDE THE onBeforeElUpdate HOOK. 
// I KNOW THAT SEEMS IRRELEVANT, BUT IT COULD CAUSE A MASSIVE MEMORY LEAK
// BECAUSE IT WILL DUPLICATE ALL LISTENERS EVERYTIME THE VIEW UPDATES
Alpine.start()

Thank you for the help!

I see…
Yeah, I was inserting the plugin the old way. That should do it

Thank you!

Is there any documentation (besides the sources) that explains this? I used Alpine with liveview some times now and I’d like to understand the magic that’s going on here.

If you are using the latest version of Alpine.js (v3), you will need to make some changes in how you set it up.

Alessandro Di Maria has a short guide on the changes you need to make in this article: Update LiveView for Alpine.js 101 - DEV Community.

Hi, this has been asked a while ago, but, even though I followed your guide, my live view pages still have no interactivity through Alpine. I mean, Alpine is not even being loaded when I look at the window object.

Do you know if the newer phoenix versions have problems with Alpine ?

The npm moves in mysterious ways.

However I would still be interested in an explanation why this was needed for me (and doesn’t seem needed for most people?). Maybe this is something that needs to be mentioned in the AlpineJS readme?

I finally managed to find a solution on the Hotwire discuss.

I prepended this require to app.js:

import "regenerator-runtime/runtime"

And now it’s working.

Yes, all of the above is correct. Except I’m on node v10.24.1 and Elixir 1.5.8.

so you did this?

assets$ git diff HEAD js/app.js
 import "../css/app.css"
+import Alpine from "alpinejs";
 ...
-let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken } })
+let liveSocket = new LiveSocket("/live", Socket, {
+   params: { _csrf_token: csrfToken },
+   dom: {
+   	onBeforeElUpdated(from, to) {
+       	if (from.__x) {
+           	Alpine.clone(from.__x, to);
+            }
+       },
+   },
+}
+)

When I did this I had trouble with latest node, so I downgraded to node 14.
With latest phoenix (not really, 1.5.7 actually), node 14 and AlpineJS 2.8.1 (2.82 should not make a difference) it just works (under ubuntu 20.4). All I got to do is

assets$ npm install alpinejs

And the patch above.
Obviously you have to start from a working phx.new