[LiveComponent] Fix morphing for Alpine.js v3

[Kobo-one]

Q	A
Bug fix?	yes
New feature?	no
Issues	/
License	MIT

This PR fixes live component compatibility for Alpine v3.

Currently, the live component controller already implements the Alpine morph plugin. This works fine for Alpine v2, but since v3, the __x property is no longer used by Alpine. Instead, we can check for _x_dataStack.

Also, the morph plugin no longer requires the __x property; the DOM element should be used instead.

I made sure the changes support both Alpine v2 and v3.

Original implementation and issue:

• [Live] Access on Morphdom's onBeforeElUpdated callback - Alpine.JS compatibility #984
• [LiveComponent] Fix morphing issues with an Alpine.js component, close #984 #1126

[Kocal]

LGTM

[smnandre]

Thank you @Kobo-one

[Kocal]

Hey, I tried your patch locally on my app (the one I've used when working on #1126), but I'm having an issue.

Below you will find a video of my app and some interaction with a dropdown which contains a LiveComponent inside.
I already use Alpine 3 and it works as I expect things to work, but when I test your patch, then the LiveCompoent disappears:

Enregistrement.de.l.ecran.2024-10-15.a.13.08.00.mov

Is there a bug somewhere, or is it the good behavior but I did something wrong in my app?

Thanks!

[Kobo-one]

Hi,

My current test setup uses a reversed logic; an alpine element inside of a LiveComponent. The morph is necessary to keep the alpine state when a LiveComponent re-renders with DOM changes.

But as your video shows there might be an issue with LiveComponents inside an Alpine element. Oddly enough I also tested this and did not see any weird behaviour. Both with an alpine component surrounding a LiveComponent as well as sharing the same DOM element.

Could you share more details about how your setup is structured in Twig?

That said, this shows the PR has a breaking change and it should not be merged (yet).