feature #1126 [LiveComponent] Fix morphing issues with an Alpine.js component, close #984 (Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

[LiveComponent] Fix morphing issues with an Alpine.js component, close #984

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Tickets       | Fix #984 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a short README for your feature/bugfix. This will help people
understand your PR and can be used as a start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - Never break backward compatibility (see https://symfony.com/bc).
 - Features and deprecations must be submitted against branch main.
-->

This PR is a proposal for #984.
As I encountered the same issue than `@richardhj` when using Alpine.js with a LiveComponent, and I wanted to fix it ASAP.

I've added some checks and errors messages in order to help the dev if needed.

Commits
-------

52a5ddb [LiveComponent] Fix morphing issues with an Alpine.js component, close #984

Author: weaverryan

src/LiveComponent/assets/dist/live_controller.js

@@ -1216,6 +1216,15 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
                 return true;
             }
             if (fromEl instanceof HTMLElement && toEl instanceof HTMLElement) {
+                if (typeof fromEl.__x !== 'undefined') {
+                    if (!window.Alpine) {
+                        throw new Error('Unable to access Alpine.js though the global window.Alpine variable. Please make sure Alpine.js is loaded before Symfony UX LiveComponent.');
+                    }
+                    if (typeof window.Alpine.morph !== 'function') {
+                        throw new Error('Unable to access Alpine.js morph function. Please make sure the Alpine.js Morph plugin is installed and loaded, see https://alpinejs.dev/plugins/morph for more information.');
+                    }
+                    window.Alpine.morph(fromEl.__x, toEl);
+                }
                 if (childComponentMap.has(fromEl)) {
                     const childComponent = childComponentMap.get(fromEl);
                     childComponent.updateFromNewElementFromParentRender(toEl);

src/LiveComponent/assets/src/morphdom.ts

@@ -42,6 +42,25 @@ export function executeMorphdom(
 
             // skip special checking if this is, for example, an SVG
             if (fromEl instanceof HTMLElement && toEl instanceof HTMLElement) {
+                // We assume fromEl is an Alpine component if it has `__x` property.
+                // If it's the case, then we should morph `fromEl` to `ToEl` (thanks to https://alpinejs.dev/plugins/morph)
+                // in order to keep the component state and UI in sync.
+                if (typeof fromEl.__x !== 'undefined') {
+                    if (!window.Alpine) {
+                        throw new Error(
+                            'Unable to access Alpine.js though the global window.Alpine variable. Please make sure Alpine.js is loaded before Symfony UX LiveComponent.'
+                        );
+                    }
+
+                    if (typeof window.Alpine.morph !== 'function') {
+                        throw new Error(
+                            'Unable to access Alpine.js morph function. Please make sure the Alpine.js Morph plugin is installed and loaded, see https://alpinejs.dev/plugins/morph for more information.'
+                        );
+                    }
+
+                    window.Alpine.morph(fromEl.__x, toEl);
+                }
+
                 if (childComponentMap.has(fromEl)) {
                     const childComponent = childComponentMap.get(fromEl) as Component;