Skip to content

Commit 4435a2e

Browse files
edison1105edison1105
committed
chore: use fragment's anchor as insertion point
1 parent f4f0388 commit 4435a2e

File tree

3 files changed

+34
-33
lines changed

3 files changed

+34
-33
lines changed

‎packages/runtime-vapor/__tests__/componentSlots.spec.ts‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -796,7 +796,7 @@ describe('component: slots', () => {
796796

797797
show.value = false
798798
await nextTick()
799-
expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
799+
expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
800800
})
801801

802802
test('vdom slot > vapor forwarded slot(with fallback) > vapor slot', async () => {
@@ -820,7 +820,7 @@ describe('component: slots', () => {
820820

821821
show.value = false
822822
await nextTick()
823-
expect(root.innerHTML).toBe('<!--slot--><div>forwarded fallback</div>')
823+
expect(root.innerHTML).toBe('<div>forwarded fallback</div><!--slot-->')
824824
})
825825

826826
test('vdom slot > vapor forwarded slot > vdom slot', async () => {
@@ -1083,11 +1083,11 @@ describe('component: slots', () => {
10831083

10841084
show.value = false
10851085
await nextTick()
1086-
expect(root.innerHTML).toBe('<!--slot--><!--slot--><div>fallback</div>')
1086+
expect(root.innerHTML).toBe('<div>fallback</div><!--slot--><!--slot-->')
10871087

10881088
show.value = true
10891089
await nextTick()
1090-
expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
1090+
expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
10911091
})
10921092

10931093
test('vdom slot > vapor forwarded slot (multiple) > vdom forwarded slot(with fallback) > vdom slot', async () => {
@@ -1116,12 +1116,12 @@ describe('component: slots', () => {
11161116
show.value = false
11171117
await nextTick()
11181118
expect(root.innerHTML).toBe(
1119-
'<!--slot--><!--slot--><div>vdom fallback</div>',
1119+
'<div>vdom fallback</div><!--slot--><!--slot-->',
11201120
)
11211121

11221122
show.value = true
11231123
await nextTick()
1124-
expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
1124+
expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
11251125
})
11261126

11271127
test('vdom slot > vdom forwarded slot > vapor slot', async () => {
@@ -1168,11 +1168,11 @@ describe('component: slots', () => {
11681168

11691169
show.value = false
11701170
await nextTick()
1171-
expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
1171+
expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
11721172

11731173
show.value = true
11741174
await nextTick()
1175-
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
1175+
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
11761176
})
11771177

11781178
test('vdom slot > vdom forwarded slot (multiple) > vapor forwarded slot > vdom slot', async () => {
@@ -1197,11 +1197,11 @@ describe('component: slots', () => {
11971197

11981198
show.value = false
11991199
await nextTick()
1200-
expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
1200+
expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
12011201

12021202
show.value = true
12031203
await nextTick()
1204-
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
1204+
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
12051205
})
12061206

12071207
test('vdom slot > vdom forwarded slot (multiple) > vapor forwarded slot(with fallback) > vdom slot', async () => {
@@ -1229,11 +1229,11 @@ describe('component: slots', () => {
12291229

12301230
show.value = false
12311231
await nextTick()
1232-
expect(root.innerHTML).toBe('<!--slot--><div>vapor fallback</div>')
1232+
expect(root.innerHTML).toBe('<div>vapor fallback</div><!--slot-->')
12331233

12341234
show.value = true
12351235
await nextTick()
1236-
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
1236+
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
12371237
})
12381238

12391239
test('vdom slot > vapor forwarded slot > vapor forwarded slot > vdom slot', async () => {
@@ -1257,11 +1257,11 @@ describe('component: slots', () => {
12571257

12581258
show.value = false
12591259
await nextTick()
1260-
expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
1260+
expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
12611261

12621262
show.value = true
12631263
await nextTick()
1264-
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
1264+
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
12651265
})
12661266

12671267
test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot > vdom slot', async () => {
@@ -1286,11 +1286,11 @@ describe('component: slots', () => {
12861286

12871287
show.value = false
12881288
await nextTick()
1289-
expect(root.innerHTML).toBe('<!--slot--><div>vapor1 fallback</div>')
1289+
expect(root.innerHTML).toBe('<div>vapor1 fallback</div><!--slot-->')
12901290

12911291
show.value = true
12921292
await nextTick()
1293-
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
1293+
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
12941294
})
12951295

12961296
test('vdom slot > vapor forwarded slot > vapor forwarded slot(with fallback) > vdom slot', async () => {
@@ -1317,11 +1317,11 @@ describe('component: slots', () => {
13171317

13181318
show.value = false
13191319
await nextTick()
1320-
expect(root.innerHTML).toBe('<!--slot--><div>vapor2 fallback</div>')
1320+
expect(root.innerHTML).toBe('<div>vapor2 fallback</div><!--slot-->')
13211321

13221322
show.value = true
13231323
await nextTick()
1324-
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
1324+
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
13251325
})
13261326

13271327
test('vdom slot > vapor forwarded slot > vapor forwarded slot > vapor slot', async () => {
@@ -1344,11 +1344,11 @@ describe('component: slots', () => {
13441344

13451345
show.value = false
13461346
await nextTick()
1347-
expect(root.innerHTML).toBe('<!--slot--><!--slot--><div>fallback</div>')
1347+
expect(root.innerHTML).toBe('<div>fallback</div><!--slot--><!--slot-->')
13481348

13491349
show.value = true
13501350
await nextTick()
1351-
expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
1351+
expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
13521352
})
13531353

13541354
test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot(with fallback) > vdom slot', async () => {
@@ -1376,11 +1376,11 @@ describe('component: slots', () => {
13761376

13771377
show.value = false
13781378
await nextTick()
1379-
expect(root.innerHTML).toBe('<!--slot--><div>vapor1 fallback</div>')
1379+
expect(root.innerHTML).toBe('<div>vapor1 fallback</div><!--slot-->')
13801380

13811381
show.value = true
13821382
await nextTick()
1383-
expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
1383+
expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
13841384
})
13851385

13861386
test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot(with fallback) > vapor slot', async () => {
@@ -1409,12 +1409,12 @@ describe('component: slots', () => {
14091409
show.value = false
14101410
await nextTick()
14111411
expect(root.innerHTML).toBe(
1412-
'<!--slot--><!--slot--><div>vapor1 fallback</div>',
1412+
'<div>vapor1 fallback</div><!--slot--><!--slot-->',
14131413
)
14141414

14151415
show.value = true
14161416
await nextTick()
1417-
expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
1417+
expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
14181418
})
14191419

14201420
test('vdom slot > vdom forwarded slot(with fallback) > vdom forwarded slot(with fallback) > vapor slot', async () => {

‎packages/runtime-vapor/src/block.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,14 +124,17 @@ export function insert(
124124
insert(b, parent, anchor)
125125
}
126126
} else {
127+
if (block.anchor) {
128+
insert(block.anchor, parent, anchor)
129+
anchor = block.anchor
130+
}
127131
// fragment
128132
if (block.insert) {
129133
// TODO handle hydration for vdom interop
130134
block.insert(parent, anchor)
131135
} else {
132136
insert(block.nodes, parent, anchor)
133137
}
134-
if (block.anchor) insert(block.anchor, parent, anchor)
135138
}
136139
}
137140

‎packages/runtime-vapor/src/vdomInterop.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -102,16 +102,10 @@ const vaporInteropImpl: Omit<
102102
slot(n1: VNode, n2: VNode, container, anchor) {
103103
if (!n1) {
104104
// mount
105-
const selfAnchor = (n2.el = n2.anchor = createTextNode())
106-
insert(selfAnchor, container, anchor)
105+
let selfAnchor: Node | undefined
107106
const { slot, fallback } = n2.vs!
108107
const propsRef = (n2.vs!.ref = shallowRef(n2.props))
109108
const slotBlock = slot(new Proxy(propsRef, vaporSlotPropsProxyHandler))
110-
// TODO fallback for slot with v-if content
111-
// fallback is a vnode slot function here, and slotBlock, if a DynamicFragment,
112-
// expects a Vapor BlockFn as fallback
113-
// fallback
114-
115109
// forwarded vdom slot without its own fallback, use the fallback provided by
116110
// the slot outlet
117111
if (slotBlock instanceof DynamicFragment) {
@@ -121,11 +115,15 @@ const vaporInteropImpl: Omit<
121115
ensureVDOMSlotFallback(nodes, fallback)
122116
nodes = nodes.nodes
123117
}
118+
// use fragment's anchor when possible
119+
selfAnchor = slotBlock.anchor
124120
} else if (isFragment(slotBlock)) {
125121
ensureVDOMSlotFallback(slotBlock, fallback)
122+
selfAnchor = slotBlock.anchor!
126123
}
127124

128-
// TODO use fragment's anchor as selfAnchor?
125+
if (!selfAnchor) selfAnchor = createTextNode()
126+
insert((n2.el = n2.anchor = selfAnchor), container, anchor)
129127
insert((n2.vb = slotBlock), container, selfAnchor)
130128
} else {
131129
// update

0 commit comments

Comments
 (0)