From: daiwei Date: Tue, 22 Jul 2025 02:31:16 +0000 (+0800) Subject: chore: tweaks X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e28b96bea872fe06f9b6cb0a121403063fa1eccb;p=thirdparty%2Fvuejs%2Fcore.git chore: tweaks --- diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts index f54137724c..608a0ff556 100644 --- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts +++ b/packages/runtime-vapor/__tests__/componentSlots.spec.ts @@ -561,5 +561,64 @@ describe('component: slots', () => { await nextTick() expect(html()).toBe('fallback') }) + + test('render fallback with nested v-if ', async () => { + const Child = { + setup() { + return createSlot('default', null, () => + document.createTextNode('fallback'), + ) + }, + } + + const outerShow = ref(false) + const innerShow = ref(false) + + const { html } = define({ + setup() { + return createComponent(Child, null, { + default: () => { + return createIf( + () => outerShow.value, + () => { + return createIf( + () => innerShow.value, + () => { + return document.createTextNode('content') + }, + ) + }, + ) + }, + }) + }, + }).render() + + expect(html()).toBe('fallback') + + outerShow.value = true + await nextTick() + expect(html()).toBe('fallback') + + innerShow.value = true + await nextTick() + expect(html()).toBe('content') + + innerShow.value = false + await nextTick() + expect(html()).toBe('fallback') + + outerShow.value = false + await nextTick() + expect(html()).toBe('fallback') + + outerShow.value = true + await nextTick() + expect(html()).toBe('fallback') + + innerShow.value = true + await nextTick() + expect(html()).toBe('content') + }) }) }) diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts index 50a453dc48..2a78048f8b 100644 --- a/packages/runtime-vapor/src/block.ts +++ b/packages/runtime-vapor/src/block.ts @@ -67,10 +67,9 @@ export class DynamicFragment extends VaporFragment { if (this.fallback && !isValidBlock(this.nodes)) { parent && remove(this.nodes, parent) - // if current nodes is a DynamicFragment, call its update with the fallback - // to handle nested dynamic fragment - if (this.nodes instanceof DynamicFragment) { - this.nodes.update(this.fallback) + // handle nested dynamic fragment + if (isFragment(this.nodes)) { + renderFallback(this.nodes, this.fallback, key) } else { this.nodes = (this.scope || (this.scope = new EffectScope())).run(this.fallback) || @@ -83,6 +82,22 @@ export class DynamicFragment extends VaporFragment { } } +function renderFallback( + fragment: VaporFragment, + fallback: BlockFn, + key: any, +): void { + if (fragment instanceof DynamicFragment) { + const nodes = fragment.nodes + if (isFragment(nodes)) { + renderFallback(nodes, fallback, key) + } else { + if (!fragment.fallback) fragment.fallback = fallback + fragment.update(fragment.fallback, key) + } + } +} + export function isFragment(val: NonNullable): val is VaporFragment { return val instanceof VaporFragment }