Alpine: AlpineJS components not reinitalised after Morphdom

[acetinick]

I am using Stimulus Reflex, which is a Rails library similar to LiveView to create reactive screens by replacing the DOM over websockets using Morphdom library.

For all components that are contained within the HTML injected by SR, the components are not getting picked up by AlpineJS for initialisation.

Stimulus Reflex provides an afterReflex javascript callback, and I am putting this line as referenced in https://github.com/alpinejs/alpine/issues/282 without success.

afterReflex(element, reflex) {
        Alpine.discoverUninitializedComponents(function(el){ Alpine.initializeComponent(el) })
    }

Any ideas of what I am missing here that I could add to the afterReflex() method to help pick up dynamically inserted components?

---

UPDATE:

Issue is related to morphdom which is what Stimulus Reflex uses under the covers to replace HTML over websockets.

Here is a codepen to replace the issue just with Alpine JS and morphdom
https://codepen.io/acetinic/pen/mdELYZW

[SimoTod]

I've never used stimulus reflex so I don't know what gets passed into the callback but it look like you called the parameter element and inside the callback you use el which doesn't exist. Try to change el to element

[acetinick]

Yea the element parameter is the element that triggered the reflex, so not related to the new componenets that we trying to reinitialise.

I have managed to fix this by putting this in morphdom's onBeforeElUpdated event method, but its a bit messy. Is there another way to reinitialse Alpine components without modifying morphdom's onBeforeElUpdated method?

if (fromEl.__x) { window.Alpine.clone(fromEl.__x, toEl) }

[SimoTod]

Sorry, I've just woken up and I didn't read the code of your first question properly. Looking at their documentation it should work (you need the second snippet to keep the states of components that were already initialised).
Maybe put a console log in the first snippet and check that:

• it's called
• it can access the Alpine object

Also, if you manually trigger Alpine.discoverEtcEtc from the console, does it work or do you get errors?

[acetinick]

Well in this method, I add the following code and I get no console output, not sure why.

This method correctly picks up all controllers and outputs each into console

[HugoDF]

Hey @acetinick have you managed to get to the bottom of this issue?

Any more info you can provide us?

[acetinick]

Hi @HugoDF ,

I have managed to replicate the issue here in a code pen https://codepen.io/acetinic/pen/mdELYZW

You can see in example that after clicking the 'morph' button, it replaces the content with a similar AlpineJS controller, but it doesn't intialise properly until you press the "ACTION" button.

The issue is directly related to using morphdom together with AlpineJS, and the content that gets replaced by morphdom. I have updated the title, and description to be more specific.