Proper AlpineJS Integration with Liveview

Phoenix Forum Questions / Help
,
1

Problem

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.

8 Likes
2

The solution can be optimized to stop searching, as soon as there was a node with alpinejs - and limit the depth.

const cloneAlpineJSData: (from: HTMLElement, to: HTMLElement, depth: number) => void = (from, to, depth) => {
  if (!window.Alpine || !from || !to || depth > 2) return

  if (from._x_dataStack) return window.Alpine.clone(from, to)

  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, depth++)
    }
  }
}
3

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.

<div x-data="{editMode: false}">
  <button x-on:click="editMode = !editMode" x-text="editMode ? 'Editing' : 'Edit'"></button>
  <span x-text="editMode"></span>
</div>

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.

<div x-data="{editMode: false}">
  <button x-on:click="editMode = !editMode" x-text="editMode ? 'Editing' : 'Edit'"></button>
  <span x-data="{}" x-text="editMode"></span>
</div>

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?

4

Did you use the second version, which stops after finding the first element with Alpinejs?

Alpinejs.clone initializes nested elements, if present at the root.

5

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.

Definitely worth it! Would strongly suggest it.

5 Likes