From b6394e63b80387460a469764c7584399dddfe0a3 Mon Sep 17 00:00:00 2001
From: Simone Todaro <simo.todaro@gmail.com>
Date: Mon, 2 Dec 2024 15:36:45 +0000
Subject: [PATCH] Fix regression on x-ignore when removed (#4458)

* Add failing test

* Fix x-ignore regression
---
 packages/alpinejs/src/lifecycle.js            | 10 ++++----
 .../integration/directives/x-ignore.spec.js   | 24 +++++++++++++++++--
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/alpinejs/src/lifecycle.js b/packages/alpinejs/src/lifecycle.js
index 53d95bded..66b792468 100644
--- a/packages/alpinejs/src/lifecycle.js
+++ b/packages/alpinejs/src/lifecycle.js
@@ -93,17 +93,17 @@ export function initTree(el, walker = walk, intercept = () => {}) {
             // If the element has a marker, it's already been initialized...
             if (el._x_marker) return
 
-            // Add a marker to the element so we can tell if it's been initialized...
-            // This is important so that we can prevent double-initialization of
-            // elements that are moved around on the page.
-            el._x_marker = markerDispenser++
-
             intercept(el, skip)
 
             initInterceptors.forEach(i => i(el, skip))
 
             directives(el, el.attributes).forEach(handle => handle())
 
+            // Add a marker to the element so we can tell if it's been initialized...
+            // This is important so that we can prevent double-initialization of
+            // elements that are moved around on the page.
+            if (!el._x_ignore) el._x_marker = markerDispenser++
+
             el._x_ignore && skip()
         })
     })
diff --git a/tests/cypress/integration/directives/x-ignore.spec.js b/tests/cypress/integration/directives/x-ignore.spec.js
index b69ed6cc1..34c002302 100644
--- a/tests/cypress/integration/directives/x-ignore.spec.js
+++ b/tests/cypress/integration/directives/x-ignore.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, notHaveClasses, notHaveText, test } from '../../utils'
+import { haveClasses, haveText, html, notHaveClasses, notHaveText, test } from '../../utils'
 
 test('x-ignore',
     html`
@@ -8,7 +8,9 @@ test('x-ignore',
             </div>
         </div>
     `,
-    ({ get }) => get('span').should(notHaveText('bar'))
+    ({ get }) => {
+        get('span').should(notHaveText('bar'))
+    }
 )
 
 test('x-ignore.self',
@@ -24,3 +26,21 @@ test('x-ignore.self',
         get('h1').should(notHaveClasses(['bar']))
     }
 )
+
+test('can lazyload a component',
+    html`
+        <div x-data="{ lazyLoad() {$el.querySelector('#lazy').removeAttribute('x-ignore'); Alpine.nextTick(() => Alpine.initTree($el.querySelector('#lazy')))} }">
+            <button @click="lazyLoad">Load</button>
+            <div x-data="{ foo: 'bar' }" id="lazy" x-ignore :class="foo">
+                <span x-text="foo"></span>
+            </div>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(notHaveText('bar'))
+        get('div#lazy').should(notHaveClasses(['bar']))
+        get('button').click()
+        get('span').should(haveText('bar'))
+        get('div#lazy').should(haveClasses(['bar']))
+    }
+)