From b48b2cc90ce601b0333e90c5d03e7afb44364a6f Mon Sep 17 00:00:00 2001 From: yangxiuxiu1115 <1974364190@qq.com> Date: Wed, 7 Aug 2024 01:58:17 +0800 Subject: [PATCH 1/5] feat: add testcase --- .../__tests__/componentSlots.spec.ts | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts index 987130820..154367cbd 100644 --- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts +++ b/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('

fallback

') }) + + test('should work with createIf', async () => { + const show = ref(true) + const spyConditionFn = vi.fn(() => show.value) + const t0 = template('

show

') + const t1 = template('

hide

') + + const Child = defineComponent(() => { + const t0 = template('

') + 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('

show

') + show.value = false + await nextTick() + expect(host.innerHTML).toBe('

hide

') + }) }) }) From 269eb5a6c1630d1839b5d2c18f2314c73a507794 Mon Sep 17 00:00:00 2001 From: yangxiuxiu1115 <1974364190@qq.com> Date: Wed, 7 Aug 2024 01:59:47 +0800 Subject: [PATCH 2/5] fix(runtime-vapor): supports the use of slots with v-if --- packages/reactivity/src/effectScope.ts | 6 +++--- packages/runtime-vapor/__tests__/dom/prop.spec.ts | 5 ----- packages/runtime-vapor/src/component.ts | 2 ++ 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/reactivity/src/effectScope.ts b/packages/reactivity/src/effectScope.ts index 26e02fc9f..1375795db 100644 --- a/packages/reactivity/src/effectScope.ts +++ b/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) { diff --git a/packages/runtime-vapor/__tests__/dom/prop.spec.ts b/packages/runtime-vapor/__tests__/dom/prop.spec.ts index ab5a3d4e6..ae2f791ef 100644 --- a/packages/runtime-vapor/__tests__/dom/prop.spec.ts +++ b/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 } diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts index 4c4b02a52..348d65eb5 100644 --- a/packages/runtime-vapor/src/component.ts +++ b/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 } } From e61f1883f64ae7e6463261f8a7d12fde552b5933 Mon Sep 17 00:00:00 2001 From: yangxiuxiu1115 <1974364190@qq.com> Date: Thu, 8 Aug 2024 22:52:46 +0800 Subject: [PATCH 3/5] adjust --- packages/runtime-vapor/src/componentSlots.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts index d0f5e3573..7a18a6975 100644 --- a/packages/runtime-vapor/src/componentSlots.ts +++ b/packages/runtime-vapor/src/componentSlots.ts @@ -94,11 +94,14 @@ export function initSlots( function withCtx(fn: Slot): Slot { return (...args: any[]) => { - const reset = setCurrentInstance(instance.parent!) + const parentInstance = instance.parent! + const reset = setCurrentInstance(parentInstance) + parentInstance.scope.on() try { return fn(...(args as any)) } finally { reset() + parentInstance.scope.off() } } } From b2abdfb93e34bf82f71c1e058f5985681c5ac7ab Mon Sep 17 00:00:00 2001 From: yangxiuxiu1115 <1974364190@qq.com> Date: Thu, 8 Aug 2024 23:01:20 +0800 Subject: [PATCH 4/5] test --- packages/runtime-vapor/__tests__/dom/prop.spec.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/runtime-vapor/__tests__/dom/prop.spec.ts b/packages/runtime-vapor/__tests__/dom/prop.spec.ts index ae2f791ef..3d15509cb 100644 --- a/packages/runtime-vapor/__tests__/dom/prop.spec.ts +++ b/packages/runtime-vapor/__tests__/dom/prop.spec.ts @@ -14,12 +14,17 @@ 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.push(prev) + instance.scope.off() reset() removeComponentInstance = NOOP } From 323cc49aa832b782b6ccfc715f95fb61e68e2e85 Mon Sep 17 00:00:00 2001 From: yangxiuxiu1115 <1974364190@qq.com> Date: Thu, 8 Aug 2024 23:03:38 +0800 Subject: [PATCH 5/5] delete --- packages/runtime-vapor/src/component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts index 348d65eb5..4c4b02a52 100644 --- a/packages/runtime-vapor/src/component.ts +++ b/packages/runtime-vapor/src/component.ts @@ -246,9 +246,7 @@ export const getCurrentInstance: () => ComponentInternalInstance | null = () => export const setCurrentInstance = (instance: ComponentInternalInstance) => { const prev = currentInstance currentInstance = instance - instance.scope.on() return () => { - instance.scope.off() currentInstance = prev } }