🐛 Enabled morphing @event handlers

alpinejs · Mar 29, 2023 · 7f249c5 · 7f249c5
1 parent 6142a83
commit 7f249c5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/morph/src/morph.js b/packages/morph/src/morph.js
@@ -123,7 +123,7 @@ export function morph(from, toHtml, options) {
             let value = toAttributes[i].value
 
             if (from.getAttribute(name) !== value) {
-                from.setAttribute(name, value)
+                from.setAttribute(name.replace(/^@/,Alpine.prefixed('on:')), value)
             }
         }
     }

diff --git a/tests/cypress/integration/plugins/morph.spec.js b/tests/cypress/integration/plugins/morph.spec.js
@@ -421,3 +421,23 @@ test('can morph with flat-nested conditional markers',
         get('div:nth-of-type(3) input').should(haveValue('bar'))
     },
 )
+
+// '@event' handlers cannot be assigned directly on the element
+test('can morph @event handlers', [
+    html`
+        <div x-data="{ foo: 'bar' }">
+            <button x-text="foo"></button>
+        </div>
+    `],
+    ({ get, click }, reload, window, document) => {
+        let toHtml = html`
+            <button @click="foo = 'buzz'" x-text="foo"></button>
+        `;
+
+        get('button').should(haveText('bar'));
+
+        get('button').then(([el]) => window.Alpine.morph(el, toHtml));
+        get('button').click();
+        get('button').should(haveText('buzz'));
+    }
+);