Fix x-if

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

@@ -1,9 +1,8 @@
 import { evaluateLater } from '../evaluator'
+import { addScopeToNode } from "../scope"
 import { directive } from '../directives'
-import {initTree} from "../lifecycle";
-import {addScopeToNode} from "../scope";
-import {reactive} from "../reactivity";
-import {mutateDom} from "../mutation";
+import { initTree } from "../lifecycle"
+import { mutateDom } from "../mutation"
 
 directive('if', (el, { modifiers, expression }, { effect, cleanup }) => {
     let evaluate = evaluateLater(el, expression)
@@ -13,13 +12,11 @@ directive('if', (el, { modifiers, expression }, { effect, cleanup }) => {
 
         let clone = el.content.cloneNode(true).firstElementChild
 
-        addScopeToNode(clone, reactive(modifiers), el)
+        addScopeToNode(clone, {}, el)
 
         initTree(clone)
 
-        mutateDom(() => {
-            el.after(clone)
-        });
+        mutateDom(() => el.after(clone))
 
         el._x_currentIfEl = clone
 

tests/cypress/integration/directives/x-if.spec.js

@@ -1,4 +1,4 @@
-import { beVisible, html, notBeVisible, notHaveAttribute, test } from '../../utils'
+import { beVisible, haveText, html, notBeVisible, test } from '../../utils'
 
 test('x-if',
     html`
@@ -18,3 +18,21 @@ test('x-if',
         get('h1').should(notBeVisible())
     }
 )
+
+test('x-if inside x-for allows nested directives',
+    html`
+        <div x-data="{items: [{id: 1, label: '1'}]}">
+
+            <template x-for="item in items" :key="item.id">
+                <div>
+                    <template x-if="item.label">
+                        <span x-text="item.label"></span>
+                    </template>
+                </div>
+            </template>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('1'))
+    }
+)