AlpineJS components not reinitalised after reflex

[acetinick]

Bug Report

Describe the bug

HTML inserted from Reflexes are not initialised by AlpineJS (https://github.com/alpinejs/alpine)

There is a solution already worked out with LiveView and discussed here: https://github.com/phoenixframework/phoenix_live_view/issues/809#issuecomment-632366710

It appears that there was a fix implemented inside LiveView to help with this usecase.

Owner of AlpineJS might be able to help us out with this. Discussion with AlpineJS team opened up here: https://github.com/alpinejs/alpine/discussions/823

Similar issues have been discussed with AlpineJS here https://github.com/alpinejs/alpine/issues/282

To Reproduce

Update any AlpineJS component within the Reflex, and it will not reinitalise after morph is completed.

Expected behavior

AlpineJS components should be re-initialized.

Versions

StimulusReflex

• Gem: 3.3
• Node package: 3.3

External tools

• AlpineJS: 2.7
• Ruby: 2.6.6
• Rails: 6.0.3

Browser

• Browser Chrome

[acetinick]

FYI I tried putting

Alpine.discoverUninitializedComponents(function(el){ Alpine.initializeComponent(el) })

in the afterReflex() callback, without success (

@excid3 , I saw that this was a solution you provided in an issue in the AlpineJS project. Have you come across this issue with SR and AlpineJS ?

[marcoroth]

Hey @acetinick. I'm not quite sure how we should support frameworks like AlpineJS since it doesn't really fit into the StimulusReflex ecosystem.

But this aside, I can confirm that the issue exists. I've built a MVCE here to reproduce this issue: marcoroth/alpine_reflex.

[excid3]

Hmm, I would expect that to work in the afterReflex callback just like on turbolinks:load.

I did see they've started a Turbolinks adapter that seems to be more in-depth and might be something to modify for SR. https://github.com/SimoTod/alpine-turbolinks-adapter

[cabgfx]

While I can't speak to Alpine specifically, I suspect this issue is related to an issue I had with StimulusJS controllers not re-connecting. The problem was with how morphdom only updates what's changed in the DOM, which wasn't clear to me from the start. In my case, the fix was as simple as setting [data-reflex-permanent] plus a unique [id] on my controller element. That leaves the element untouched by SR, and thus the controller (component) doesn't have to reconnect, since it's already alive and kicking.

Hope that helps, and if not, ignore me — I just noticed the issue browsing by, and figured it sounded vaguely similar 😅

(Also of interest might be this docs draft on the topic by @RolandStuder, from a thread on the SR discord today.)

[leastbad]

Hey @acetinick, how are you feeling about this issue? It seems like there's been some good discussion and work done, but it's not clear to me if there's something we would need to change at the library level to help facilitate the use of Alpine.

Could you summarize and advise on whether this issue is still, in fact, an issue? If not, we should close it.

[acetinick]

hi @leastbad , believe this is an issue specific to CableReady (morphdom) and AlpineJS. Think its better to close it here, and I'll investigate more how CableReady is using morphdom to see if can narrow down issue in more detail. Will raise a new one once I have more information