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