diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts index 4af9ef74e..9528e91de 100644 --- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts +++ b/packages/runtime-vapor/__tests__/componentSlots.spec.ts @@ -796,7 +796,7 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
fallback
') + expect(root.innerHTML).toBe('
fallback
') }) test('vdom slot > vapor forwarded slot(with fallback) > vapor slot', async () => { @@ -820,7 +820,7 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
forwarded fallback
') + expect(root.innerHTML).toBe('
forwarded fallback
') }) test('vdom slot > vapor forwarded slot > vdom slot', async () => { @@ -1083,11 +1083,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
fallback
') + expect(root.innerHTML).toBe('
fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vapor forwarded slot (multiple) > vdom forwarded slot(with fallback) > vdom slot', async () => { @@ -1116,12 +1116,12 @@ describe('component: slots', () => { show.value = false await nextTick() expect(root.innerHTML).toBe( - '
vdom fallback
', + '
vdom fallback
', ) show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vdom forwarded slot > vapor slot', async () => { @@ -1168,11 +1168,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
fallback
') + expect(root.innerHTML).toBe('
fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vdom forwarded slot (multiple) > vapor forwarded slot > vdom slot', async () => { @@ -1197,11 +1197,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
fallback
') + expect(root.innerHTML).toBe('
fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vdom forwarded slot (multiple) > vapor forwarded slot(with fallback) > vdom slot', async () => { @@ -1229,11 +1229,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
vapor fallback
') + expect(root.innerHTML).toBe('
vapor fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vapor forwarded slot > vapor forwarded slot > vdom slot', async () => { @@ -1257,11 +1257,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
fallback
') + expect(root.innerHTML).toBe('
fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot > vdom slot', async () => { @@ -1286,11 +1286,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
vapor1 fallback
') + expect(root.innerHTML).toBe('
vapor1 fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vapor forwarded slot > vapor forwarded slot(with fallback) > vdom slot', async () => { @@ -1317,11 +1317,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
vapor2 fallback
') + expect(root.innerHTML).toBe('
vapor2 fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vapor forwarded slot > vapor forwarded slot > vapor slot', async () => { @@ -1344,11 +1344,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
fallback
') + expect(root.innerHTML).toBe('
fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot(with fallback) > vdom slot', async () => { @@ -1376,11 +1376,11 @@ describe('component: slots', () => { show.value = false await nextTick() - expect(root.innerHTML).toBe('
vapor1 fallback
') + expect(root.innerHTML).toBe('
vapor1 fallback
') show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot(with fallback) > vapor slot', async () => { @@ -1409,12 +1409,12 @@ describe('component: slots', () => { show.value = false await nextTick() expect(root.innerHTML).toBe( - '
vapor1 fallback
', + '
vapor1 fallback
', ) show.value = true await nextTick() - expect(root.innerHTML).toBe('bar') + expect(root.innerHTML).toBe('bar') }) test('vdom slot > vdom forwarded slot(with fallback) > vdom forwarded slot(with fallback) > vapor slot', async () => { diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts index b2d0ca04b..93c88f9c0 100644 --- a/packages/runtime-vapor/src/block.ts +++ b/packages/runtime-vapor/src/block.ts @@ -124,6 +124,10 @@ export function insert( insert(b, parent, anchor) } } else { + if (block.anchor) { + insert(block.anchor, parent, anchor) + anchor = block.anchor + } // fragment if (block.insert) { // TODO handle hydration for vdom interop @@ -131,7 +135,6 @@ export function insert( } else { insert(block.nodes, parent, anchor) } - if (block.anchor) insert(block.anchor, parent, anchor) } } diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts index a6b115f74..9b73e15b8 100644 --- a/packages/runtime-vapor/src/vdomInterop.ts +++ b/packages/runtime-vapor/src/vdomInterop.ts @@ -102,16 +102,10 @@ const vaporInteropImpl: Omit< slot(n1: VNode, n2: VNode, container, anchor) { if (!n1) { // mount - const selfAnchor = (n2.el = n2.anchor = createTextNode()) - insert(selfAnchor, container, anchor) + let selfAnchor: Node | undefined const { slot, fallback } = n2.vs! const propsRef = (n2.vs!.ref = shallowRef(n2.props)) const slotBlock = slot(new Proxy(propsRef, vaporSlotPropsProxyHandler)) - // TODO fallback for slot with v-if content - // fallback is a vnode slot function here, and slotBlock, if a DynamicFragment, - // expects a Vapor BlockFn as fallback - // fallback - // forwarded vdom slot without its own fallback, use the fallback provided by // the slot outlet if (slotBlock instanceof DynamicFragment) { @@ -121,11 +115,15 @@ const vaporInteropImpl: Omit< ensureVDOMSlotFallback(nodes, fallback) nodes = nodes.nodes } + // use fragment's anchor when possible + selfAnchor = slotBlock.anchor } else if (isFragment(slotBlock)) { ensureVDOMSlotFallback(slotBlock, fallback) + selfAnchor = slotBlock.anchor! } - // TODO use fragment's anchor as selfAnchor? + if (!selfAnchor) selfAnchor = createTextNode() + insert((n2.el = n2.anchor = selfAnchor), container, anchor) insert((n2.vb = slotBlock), container, selfAnchor) } else { // update