symfony
[LiveComponent] Fix morphing for Alpine.js v3
| 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:
- https://github.com/symfony/ux/issues/984
- https://github.com/symfony/ux/pull/1126
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).
I get the same bug. I test the patch from @Kobo-one and it's worked for me.
So, if we use Alpine.js in a live component, it could be buggy actually.
This patch permits to fix that bug creating a bug when using Alpine.js wrapping a live component.
Did you manage it a different way ?
Maybe if you guys could update this PR with a simple test covering the 2 scenarios (alpine wrapping live and vice versa)
(and when i say test, a clean page we can run and test in browsers would do the trick i guess)
What do you think ?
I get the same bug. I test the patch from @Kobo-one and it's worked for me.
So, if we use Alpine.js in a live component, it could be buggy actually.
This patch permits to fix that bug creating a bug when using Alpine.js wrapping a live component.
Did you manage it a different way ?
@RobinDev since you have the same issue, when I wasn't able to reproduce it in https://github.com/symfony/ux/pull/2259#pullrequestreview-2368996095, could you provide use a reproducer please? 🙏🏻
I am closing due to inactivity, feel free to re-open the PR if necessary. Thanks for the contribution!