When using more complex nested components, especially with live_components, AlpineJS can stop working after updates.
This issue is also documented here:
Source
All available documentation instructs you to integrate Alpinejs in the app.js within the onBeforeElUpdated hook like this.
// assets/js/app.js
let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken},
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to)
}
}
}
})
This doesn’t factor in that LV updates can be nested html elements!
Solution
You need to clone the Alpine data not only on the root element but also in all child elements .
Here is our solution.
// assets/ts/liveview.ts
const cloneAlpineJSData: (from: HTMLElement, to: HTMLElement) => void = (from, to) => {
if (!window.Alpine || !from || !to) return
for (let index = 0; index < to.children.length; index++) {
const from2 = from.children[index]
const to2 = to.children[index]
if (from2 instanceof HTMLElement && to2 instanceof HTMLElement) {
cloneAlpineJSData(from2, to2)
}
}
if (from._x_dataStack) window.Alpine.clone(from, to)
// Set `x-persist="type,style.height,style.minHeight"` to prevent these attributes from being overrided by an LV update
persistAttributes(from, to, from.getAttribute('x-persist'))
}
[...]
const liveSocket = new LiveSocket('/live', Socket, {
hooks,
params: { _csrf_token: csrfToken },
dom: {
onBeforeElUpdated(from, to) {
cloneAlpineJSData(from, to)
return true
}
}
})
Note: persistAttributes is an another helper which, persist certain attributes which are updated by Alpinejs. For example we have a <textarea> that changes style.height and style.minHeight depending on the entered data.
Hmm, I’m seeing some unexpected behavior when I switched from the non-recursive to this suggested recursive integration. It seems to be breaking reactivity within a LiveComponent when nesting AlpineJS components.
To illustrate, the following with the recursive integration works as expected and both the button and span’s text accurately reflect the boolean state of editMode in the parent x-data as it is toggled/updated by clicking the button.
But by introducing an x-data declaration to the span, the span suddenly loses reactivity and the span text remains unchanged at false even when the parent state successfully updates as evidenced by the continued reactivity of the button text.
And if I switch back to the non-recursive integration, the span regains reactivity and the span text begins reacting again to the parent state. Still investigating, but any ideas what’s going on?
A month later, I must say if you run into this issue like this, you probably fell too much in love with Alpinejs (I did) and you will have more and more issues and poor performance for complex and bigger elements.
We ported now everything over to LiveView.JS, added all the missing functionality (push_js, hooks, eventListeners and so on) our self and ditched Alpinejs completely.