Skip to content

Commit 37cee48

Browse files
edison1105edison1105
committed
chore: small tweaks
1 parent 63111cb commit 37cee48

File tree

3 files changed

+42
-47
lines changed

3 files changed

+42
-47
lines changed

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

Lines changed: 24 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1588,8 +1588,7 @@ describe('Vapor Mode hydration', () => {
15881588
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
15891589
`
15901590
"
1591-
<!--[--><span>a</span><span>b</span><span>c</span><!--]-->
1592-
"
1591+
<!--[--><span>a</span><span>b</span><span>c</span><!--for-->"
15931592
`,
15941593
)
15951594

@@ -1598,8 +1597,7 @@ describe('Vapor Mode hydration', () => {
15981597
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
15991598
`
16001599
"
1601-
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
1602-
"
1600+
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for-->"
16031601
`,
16041602
)
16051603
})
@@ -1621,8 +1619,7 @@ describe('Vapor Mode hydration', () => {
16211619
`
16221620
"
16231621
<!--[--><div>
1624-
<!--[--><span>a</span><span>b</span><span>c</span><!--]-->
1625-
</div><div>3</div><!--]-->
1622+
<!--[--><span>a</span><span>b</span><span>c</span><!--for--></div><div>3</div><!--]-->
16261623
"
16271624
`,
16281625
)
@@ -1633,8 +1630,7 @@ describe('Vapor Mode hydration', () => {
16331630
`
16341631
"
16351632
<!--[--><div>
1636-
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
1637-
</div><div>4</div><!--]-->
1633+
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for--></div><div>4</div><!--]-->
16381634
"
16391635
`,
16401636
)
@@ -1655,8 +1651,7 @@ describe('Vapor Mode hydration', () => {
16551651
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
16561652
`
16571653
"<div><span></span>
1658-
<!--[--><span>a</span><span>b</span><span>c</span><!--]-->
1659-
<span></span></div>"
1654+
<!--[--><span>a</span><span>b</span><span>c</span><!--for--><span></span></div>"
16601655
`,
16611656
)
16621657

@@ -1665,8 +1660,7 @@ describe('Vapor Mode hydration', () => {
16651660
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
16661661
`
16671662
"<div><span></span>
1668-
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
1669-
<span></span></div>"
1663+
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for--><span></span></div>"
16701664
`,
16711665
)
16721666

@@ -1675,8 +1669,7 @@ describe('Vapor Mode hydration', () => {
16751669
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
16761670
`
16771671
"<div><span></span>
1678-
<!--[--><span>b</span><span>c</span><span>d</span><!--]-->
1679-
<span></span></div>"
1672+
<!--[--><span>b</span><span>c</span><span>d</span><!--for--><span></span></div>"
16801673
`,
16811674
)
16821675
})
@@ -1697,9 +1690,8 @@ describe('Vapor Mode hydration', () => {
16971690
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
16981691
`
16991692
"<div><span></span>
1700-
<!--[--><span>a</span><span>b</span><span>c</span><!--]-->
1701-
<!--[--><span>a</span><span>b</span><span>c</span><!--]-->
1702-
<span></span></div>"
1693+
<!--[--><span>a</span><span>b</span><span>c</span><!--for-->
1694+
<!--[--><span>a</span><span>b</span><span>c</span><!--for--><span></span></div>"
17031695
`,
17041696
)
17051697

@@ -1708,9 +1700,8 @@ describe('Vapor Mode hydration', () => {
17081700
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
17091701
`
17101702
"<div><span></span>
1711-
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
1712-
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
1713-
<span></span></div>"
1703+
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for-->
1704+
<!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for--><span></span></div>"
17141705
`,
17151706
)
17161707

@@ -1719,9 +1710,8 @@ describe('Vapor Mode hydration', () => {
17191710
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
17201711
`
17211712
"<div><span></span>
1722-
<!--[--><span>c</span><span>d</span><!--]-->
1723-
<!--[--><span>c</span><span>d</span><!--]-->
1724-
<span></span></div>"
1713+
<!--[--><span>c</span><span>d</span><!--for-->
1714+
<!--[--><span>c</span><span>d</span><!--for--><span></span></div>"
17251715
`,
17261716
)
17271717
})
@@ -1742,8 +1732,7 @@ describe('Vapor Mode hydration', () => {
17421732
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
17431733
`
17441734
"<div>
1745-
<!--[--><div>comp</div><div>comp</div><div>comp</div><!--]-->
1746-
</div>"
1735+
<!--[--><div>comp</div><div>comp</div><div>comp</div><!--for--></div>"
17471736
`,
17481737
)
17491738

@@ -1752,8 +1741,7 @@ describe('Vapor Mode hydration', () => {
17521741
expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
17531742
`
17541743
"<div>
1755-
<!--[--><div>comp</div><div>comp</div><div>comp</div><div>comp</div><!--]-->
1756-
</div>"
1744+
<!--[--><div>comp</div><div>comp</div><div>comp</div><div>comp</div><!--for--></div>"
17571745
`,
17581746
)
17591747
})
@@ -1778,8 +1766,7 @@ describe('Vapor Mode hydration', () => {
17781766
<!--[-->
17791767
<!--[--><span>a</span><!--]-->
17801768
<!--[--><span>b</span><!--]-->
1781-
<!--[--><span>c</span><!--]-->
1782-
<!--]-->
1769+
<!--[--><span>c</span><!--for--><!--]-->
17831770
</div>"
17841771
`,
17851772
)
@@ -1792,8 +1779,7 @@ describe('Vapor Mode hydration', () => {
17921779
<!--[-->
17931780
<!--[--><span>a</span><!--]-->
17941781
<!--[--><span>b</span><!--]-->
1795-
<!--[--><span>c</span><span>d</span><!--slot--><!--]-->
1796-
<!--]-->
1782+
<!--[--><span>c</span><span>d</span><!--slot--><!--for--><!--]-->
17971783
</div>"
17981784
`,
17991785
)
@@ -1817,8 +1803,7 @@ describe('Vapor Mode hydration', () => {
18171803
<!--[-->
18181804
<!--[--><div>foo</div>-bar-<!--]-->
18191805
<!--[--><div>foo</div>-bar-<!--]-->
1820-
<!--[--><div>foo</div>-bar-<!--]-->
1821-
<!--]-->
1806+
<!--[--><div>foo</div>-bar-<!--for--><!--]-->
18221807
</div>"
18231808
`,
18241809
)
@@ -1831,8 +1816,7 @@ describe('Vapor Mode hydration', () => {
18311816
<!--[-->
18321817
<!--[--><div>foo</div>-bar-<!--]-->
18331818
<!--[--><div>foo</div>-bar-<!--]-->
1834-
<!--[--><div>foo</div>-bar-<div>foo</div>-bar-<!--]-->
1835-
<!--]-->
1819+
<!--[--><div>foo</div>-bar-<div>foo</div>-bar-<!--for--><!--]-->
18361820
</div>"
18371821
`,
18381822
)
@@ -1970,8 +1954,7 @@ describe('Vapor Mode hydration', () => {
19701954
`
19711955
"
19721956
<!--[-->
1973-
<!--[--><span>a</span><span>b</span><span>c</span><!--]-->
1974-
<!--]-->
1957+
<!--[--><span>a</span><span>b</span><span>c</span><!--for--><!--]-->
19751958
"
19761959
`,
19771960
)
@@ -2403,10 +2386,9 @@ describe('Vapor Mode hydration', () => {
24032386
`
24042387
"
24052388
<!--[-->
2406-
<!--[--><div>a</div><div>b</div><div>c</div><!--]-->
2389+
<!--[--><div>a</div><div>b</div><div>c</div><!--for-->
24072390
<!--[--><span>foo</span><!--]-->
2408-
<!--[--><div>a</div><div>b</div><div>c</div><!--]-->
2409-
<!--]-->
2391+
<!--[--><div>a</div><div>b</div><div>c</div><!--for--><!--]-->
24102392
"
24112393
`,
24122394
)
@@ -2417,10 +2399,9 @@ describe('Vapor Mode hydration', () => {
24172399
`
24182400
"
24192401
<!--[-->
2420-
<!--[--><div>a</div><div>b</div><div>c</div><div>d</div><!--]-->
2402+
<!--[--><div>a</div><div>b</div><div>c</div><div>d</div><!--for-->
24212403
<!--[--><span>foo</span><!--]-->
2422-
<!--[--><div>a</div><div>b</div><div>c</div><div>d</div><!--]-->
2423-
<!--]-->
2404+
<!--[--><div>a</div><div>b</div><div>c</div><div>d</div><!--for--><!--]-->
24242405
"
24252406
`,
24262407
)

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,9 +131,11 @@ export const createFor = (
131131

132132
if (isHydrating) {
133133
parentAnchor = locateFragmentEndAnchor()!
134-
// TODO: special handling vFor not render as a fragment. (inside Transition/TransitionGroup)
135-
if (__DEV__ && !parentAnchor) {
136-
throw new Error(`v-for fragment anchor node was not found.`)
134+
if (__DEV__) {
135+
if (!parentAnchor) {
136+
throw new Error(`v-for fragment anchor node was not found.`)
137+
}
138+
;(parentAnchor as Comment).data = 'for'
137139
}
138140
}
139141
} else {

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { child, createComment, createTextNode } from './dom/node'
99
import { EffectScope, setActiveSub } from '@vue/reactivity'
1010
import {
1111
advanceHydrationNode,
12+
currentHydrationNode,
13+
isComment,
1214
isHydrating,
1315
locateFragmentEndAnchor,
1416
locateHydrationNode,
@@ -106,8 +108,18 @@ export class DynamicFragment extends VaporFragment {
106108
}
107109
}
108110

109-
// reuse the vdom fragment end anchor for slots
110111
if (this.anchorLabel === 'slot') {
112+
// reuse the empty comment node for empty slot
113+
// e.g. `<slot v-if="false"></slot>`
114+
if (isEmpty && isComment(currentHydrationNode!, '')) {
115+
this.anchor = currentHydrationNode!
116+
if (__DEV__) {
117+
;(this.anchor as Comment).data = this.anchorLabel!
118+
}
119+
return
120+
}
121+
122+
// reuse the vdom fragment end anchor for slots
111123
this.anchor = locateFragmentEndAnchor()!
112124
if (!this.anchor) {
113125
throw new Error('Failed to locate slot anchor')

0 commit comments

Comments
 (0)