root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 10 Packages Projects Releases Wiki Activity

chore: use fragment's anchor as insertion point
ci / test (push) Has been cancelled Details
ci / continuous-release (push) Has been cancelled Details

This commit is contained in:
daiwei 2025-06-13 14:55:06 +08:00
parent f4f038873f
commit 4435a2eca5
3 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/runtime-vapor/__tests__/componentSlots.spec.ts
View File

@ -796,7 +796,7 @@ describe('component: slots', () => {
show.value = false
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
})
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('<!--slot--><div>forwarded fallback</div>')
expect(root.innerHTML).toBe('<div>forwarded fallback</div><!--slot-->')
})
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('<!--slot--><!--slot--><div>fallback</div>')
expect(root.innerHTML).toBe('<div>fallback</div><!--slot--><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
})
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(
'<!--slot--><!--slot--><div>vdom fallback</div>',
'<div>vdom fallback</div><!--slot--><!--slot-->',
)
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
})
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('<!--slot--><div>fallback</div>')
expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
})
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('<!--slot--><div>fallback</div>')
expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
})
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('<!--slot--><div>vapor fallback</div>')
expect(root.innerHTML).toBe('<div>vapor fallback</div><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
})
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('<!--slot--><div>fallback</div>')
expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
})
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('<!--slot--><div>vapor1 fallback</div>')
expect(root.innerHTML).toBe('<div>vapor1 fallback</div><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
})
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('<!--slot--><div>vapor2 fallback</div>')
expect(root.innerHTML).toBe('<div>vapor2 fallback</div><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
})
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('<!--slot--><!--slot--><div>fallback</div>')
expect(root.innerHTML).toBe('<div>fallback</div><!--slot--><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
})
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('<!--slot--><div>vapor1 fallback</div>')
expect(root.innerHTML).toBe('<div>vapor1 fallback</div><!--slot-->')
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
})
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(
'<!--slot--><!--slot--><div>vapor1 fallback</div>',
'<div>vapor1 fallback</div><!--slot--><!--slot-->',
)
show.value = true
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
})
test('vdom slot > vdom forwarded slot(with fallback) > vdom forwarded slot(with fallback) > vapor slot', async () => {

5
packages/runtime-vapor/src/block.ts
View File

@ -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)
}
}

14
packages/runtime-vapor/src/vdomInterop.ts
View File

@ -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