Don't re-apply x-cloak to live elements during morph (#4922)

Morph seeds each incoming element with Alpine.cloneNode() before patching
attributes. x-cloak only removes itself in a microtask, so the incoming
element still has x-cloak when attributes are patched, and it gets copied
back onto the already-initialized live element. The element is then
display: none until the microtask runs, so anything measuring it in that
window (e.g. a MutationObserver callback) reads 0px.

Strip x-cloak synchronously while cloning, like wire:cloak's interceptor
already does. The cloned element is detached, so there's nothing to hide.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: calebporzio

packages/alpinejs/src/directives/x-cloak.js

@@ -1,4 +1,11 @@
 import { directive, prefix } from '../directives'
 import { mutateDom } from '../mutation'
+import { isCloning } from '../clone'
 
-directive('cloak', el => queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix('cloak')))))
+directive('cloak', el => {
+    // When morph seeds incoming HTML, strip x-cloak right away so it
+    // isn't patched back onto the live element, hiding it mid-morph...
+    if (isCloning) return el.removeAttribute(prefix('cloak'))
+
+    queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix('cloak'))))
+})

tests/cypress/integration/plugins/morph.spec.js

@@ -1,4 +1,4 @@
-import { haveAttribute, haveFocus, haveLength, haveText, haveValue, haveHtml, html, test } from '../../utils'
+import { haveAttribute, haveFocus, haveLength, haveText, haveValue, haveHtml, html, notHaveAttribute, test } from '../../utils'
 
 test('can morph components and preserve Alpine state',
     [html`
@@ -1358,3 +1358,32 @@ test('wont run x-data init() method twice when morph patches a node to add x-dat
         cy.wrap(window).its('timesInitRan').should('equal', 1)
     },
 )
+
+test('morphing does not re-apply x-cloak to an already initialized element',
+    [html`
+        <style>[x-cloak] { display: none; }</style>
+
+        <div x-data>
+            <p x-cloak>foo</p>
+        </div>
+    `],
+    ({ get }, reload, window, document) => {
+        get('p').should(notHaveAttribute('x-cloak'))
+
+        get('div').then(([el]) => {
+            let toHtml = el.outerHTML.replace('<p>', '<p x-cloak>')
+
+            window.heightsDuringMorph = []
+
+            new MutationObserver(() => {
+                window.heightsDuringMorph.push(el.querySelector('p').offsetHeight)
+            }).observe(el, { subtree: true, childList: true, attributes: true, characterData: true })
+
+            window.Alpine.morph(el, toHtml.replace('foo', 'bar'))
+        })
+
+        get('p').should(haveText('bar'))
+        get('p').should(notHaveAttribute('x-cloak'))
+        cy.window().its('heightsDuringMorph').should('have.length.greaterThan', 0).and('not.include', 0)
+    },
+)