fix(runtime-vapor): supports the use of slots with v-if

packages/reactivity/src/effectScope.ts

@@ -62,13 +62,13 @@ export class EffectScope {
     }
   }
 
-  prevScope: EffectScope | undefined
+  prevScope: (EffectScope | undefined)[] = []
   /**
    * This should only be called on non-detached scopes
    * @internal
    */
   on() {
-    this.prevScope = activeEffectScope
+    this.prevScope.push(activeEffectScope)
     activeEffectScope = this
   }
 
@@ -77,7 +77,7 @@ export class EffectScope {
    * @internal
    */
   off() {
-    activeEffectScope = this.prevScope
+    activeEffectScope = this.prevScope.pop()
   }
 
   stop(fromParent?: boolean) {

packages/runtime-vapor/__tests__/componentSlots.spec.ts

@@ -3,6 +3,7 @@
 import {
   createComponent,
   createForSlots,
+  createIf,
   createSlot,
   createVaporApp,
   defineComponent,
@@ -672,5 +673,47 @@ describe('component: slots', () => {
 
       expect(host.innerHTML).toBe('<p>fallback<!--slot--></p>')
     })
+
+    test('should work with createIf', async () => {
+      const show = ref(true)
+      const spyConditionFn = vi.fn(() => show.value)
+      const t0 = template('<p>show</p>')
+      const t1 = template('<p>hide</p>')
+
+      const Child = defineComponent(() => {
+        const t0 = template('<p></p>')
+        const n1 = t0()
+        const n2 = createSlot('default')
+        insert(n2, n1 as ParentNode)
+        return n2
+      })
+
+      const { render, host } = define({
+        setup() {
+          return createComponent(Child, null, [
+            {
+              default: () =>
+                createIf(
+                  spyConditionFn,
+                  () => {
+                    const n0 = t0()
+                    return n0
+                  },
+                  () => {
+                    const n1 = t1()
+                    return n1
+                  },
+                ),
+            },
+          ])
+        },
+      })
+      render()
+
+      expect(host.innerHTML).toBe('<p>show</p><!--if-->')
+      show.value = false
+      await nextTick()
+      expect(host.innerHTML).toBe('<p>hide</p><!--if-->')
+    })
   })
 })

packages/runtime-vapor/__tests__/dom/prop.spec.ts

@@ -14,17 +14,12 @@ import {
   setCurrentInstance,
 } from '../../src/component'
 import { getMetadata, recordPropMetadata } from '../../src/componentMetadata'
-import { getCurrentScope } from '@vue/reactivity'
 
 let removeComponentInstance = NOOP
 beforeEach(() => {
   const instance = createComponentInstance((() => {}) as any, {}, null)
   const reset = setCurrentInstance(instance)
-  const prev = getCurrentScope()
-  instance.scope.on()
   removeComponentInstance = () => {
-    instance.scope.prevScope = prev
-    instance.scope.off()
     reset()
     removeComponentInstance = NOOP
   }

packages/runtime-vapor/src/component.ts

@@ -246,7 +246,9 @@ export const getCurrentInstance: () => ComponentInternalInstance | null = () =>
 export const setCurrentInstance = (instance: ComponentInternalInstance) => {
   const prev = currentInstance
   currentInstance = instance
+  instance.scope.on()
   return () => {
+    instance.scope.off()
     currentInstance = prev
   }
 }