Skip to content

Commit aad75fd

Browse files
edison1105edison1105
committed
wip: refactor
1 parent 34b9a4b commit aad75fd

25 files changed

+783
-728
lines changed

‎packages/compiler-ssr/__tests__/ssrComponent.spec.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ describe('ssr: components', () => {
3939
4040
return function ssrRender(_ctx, _push, _parent, _attrs) {
4141
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent)
42+
_push(\`<!--dynamic-component-->\`)
4243
}"
4344
`)
4445

@@ -49,6 +50,7 @@ describe('ssr: components', () => {
4950
5051
return function ssrRender(_ctx, _push, _parent, _attrs) {
5152
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent)
53+
_push(\`<!--dynamic-component-->\`)
5254
}"
5355
`)
5456
})
@@ -245,7 +247,7 @@ describe('ssr: components', () => {
245247
_push(\`<span\${_scopeId}></span>\`)
246248
})
247249
_push(\`<!--]--></div>\`)
248-
_push(\`<!--$-->\`)
250+
_push(\`<!--if-->\`)
249251
} else {
250252
_push(\`<!---->\`)
251253
}
@@ -269,7 +271,7 @@ describe('ssr: components', () => {
269271
_push(\`<span\${_scopeId}></span>\`)
270272
})
271273
_push(\`<!--]--></div>\`)
272-
_push(\`<!--$-->\`)
274+
_push(\`<!--if-->\`)
273275
} else {
274276
_push(\`<!---->\`)
275277
}
@@ -363,7 +365,7 @@ describe('ssr: components', () => {
363365
_push(\`\`)
364366
if (false) {
365367
_push(\`<div\${_scopeId}></div>\`)
366-
_push(\`<!--$-->\`)
368+
_push(\`<!--if-->\`)
367369
} else {
368370
_push(\`<!---->\`)
369371
}

‎packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('ssr: attrs fallthrough', () => {
2929
_push(\`<!--[-->\`)
3030
if (true) {
3131
_push(\`<div></div>\`)
32-
_push(\`<!--$-->\`)
32+
_push(\`<!--if-->\`)
3333
} else {
3434
_push(\`<!---->\`)
3535
}

‎packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ describe('ssr: inject <style vars>', () => {
7070
const _cssVars = { style: { color: _ctx.color }}
7171
if (_ctx.ok) {
7272
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
73-
_push(\`<!--$-->\`)
73+
_push(\`<!--if-->\`)
7474
} else {
7575
_push(\`<!--[--><div\${
7676
_ssrRenderAttrs(_cssVars)

‎packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ describe('ssr: <slot>', () => {
153153
return function ssrRender(_ctx, _push, _parent, _attrs) {
154154
if (true) {
155155
_ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
156-
_push(\`<!--$-->\`)
156+
_push(\`<!--if-->\`)
157157
} else {
158158
_push(\`<!---->\`)
159159
}

‎packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ describe('transition-group', () => {
5454
})
5555
if (false) {
5656
_push(\`<div></div>\`)
57-
_push(\`<!--$-->\`)
57+
_push(\`<!--if-->\`)
5858
}
5959
_push(\`</ul>\`)
6060
}"
@@ -124,7 +124,7 @@ describe('transition-group', () => {
124124
})
125125
if (_ctx.ok) {
126126
_push(\`<div>ok</div>\`)
127-
_push(\`<!--$-->\`)
127+
_push(\`<!--if-->\`)
128128
}
129129
_push(\`<!--]-->\`)
130130
}"

‎packages/compiler-ssr/__tests__/ssrVIf.spec.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ describe('ssr: v-if', () => {
88
return function ssrRender(_ctx, _push, _parent, _attrs) {
99
if (_ctx.foo) {
1010
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
11-
_push(\`<!--$-->\`)
11+
_push(\`<!--if-->\`)
1212
} else {
1313
_push(\`<!---->\`)
1414
}
@@ -24,7 +24,7 @@ describe('ssr: v-if', () => {
2424
return function ssrRender(_ctx, _push, _parent, _attrs) {
2525
if (_ctx.foo) {
2626
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`)
27-
_push(\`<!--$-->\`)
27+
_push(\`<!--if-->\`)
2828
} else {
2929
_push(\`<!---->\`)
3030
}
@@ -40,7 +40,7 @@ describe('ssr: v-if', () => {
4040
return function ssrRender(_ctx, _push, _parent, _attrs) {
4141
if (_ctx.foo) {
4242
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
43-
_push(\`<!--$-->\`)
43+
_push(\`<!--if-->\`)
4444
} else {
4545
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
4646
}
@@ -56,10 +56,10 @@ describe('ssr: v-if', () => {
5656
return function ssrRender(_ctx, _push, _parent, _attrs) {
5757
if (_ctx.foo) {
5858
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
59-
_push(\`<!--$-->\`)
59+
_push(\`<!--if-->\`)
6060
} else if (_ctx.bar) {
6161
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
62-
_push(\`<!--$-->\`)
62+
_push(\`<!--if-->\`)
6363
} else {
6464
_push(\`<!---->\`)
6565
}
@@ -75,10 +75,10 @@ describe('ssr: v-if', () => {
7575
return function ssrRender(_ctx, _push, _parent, _attrs) {
7676
if (_ctx.foo) {
7777
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
78-
_push(\`<!--$-->\`)
78+
_push(\`<!--if-->\`)
7979
} else if (_ctx.bar) {
8080
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
81-
_push(\`<!--$-->\`)
81+
_push(\`<!--if-->\`)
8282
} else {
8383
_push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`)
8484
}
@@ -93,7 +93,7 @@ describe('ssr: v-if', () => {
9393
return function ssrRender(_ctx, _push, _parent, _attrs) {
9494
if (_ctx.foo) {
9595
_push(\`<!--[-->hello<!--]-->\`)
96-
_push(\`<!--$-->\`)
96+
_push(\`<!--if-->\`)
9797
} else {
9898
_push(\`<!---->\`)
9999
}
@@ -110,7 +110,7 @@ describe('ssr: v-if', () => {
110110
return function ssrRender(_ctx, _push, _parent, _attrs) {
111111
if (_ctx.foo) {
112112
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
113-
_push(\`<!--$-->\`)
113+
_push(\`<!--if-->\`)
114114
} else {
115115
_push(\`<!---->\`)
116116
}
@@ -127,7 +127,7 @@ describe('ssr: v-if', () => {
127127
return function ssrRender(_ctx, _push, _parent, _attrs) {
128128
if (_ctx.foo) {
129129
_push(\`<!--[--><div>hi</div><div>ho</div><!--]-->\`)
130-
_push(\`<!--$-->\`)
130+
_push(\`<!--if-->\`)
131131
} else {
132132
_push(\`<!---->\`)
133133
}
@@ -148,7 +148,7 @@ describe('ssr: v-if', () => {
148148
_push(\`<div></div>\`)
149149
})
150150
_push(\`<!--]-->\`)
151-
_push(\`<!--$-->\`)
151+
_push(\`<!--if-->\`)
152152
} else {
153153
_push(\`<!---->\`)
154154
}
@@ -167,7 +167,7 @@ describe('ssr: v-if', () => {
167167
return function ssrRender(_ctx, _push, _parent, _attrs) {
168168
if (_ctx.foo) {
169169
_push(\`<!--[--><div>hi</div><div>ho</div><!--]-->\`)
170-
_push(\`<!--$-->\`)
170+
_push(\`<!--if-->\`)
171171
} else {
172172
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
173173
}

‎packages/compiler-ssr/__tests__/ssrVModel.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ describe('ssr: v-model', () => {
9191
? _ssrLooseContain(_ctx.model, _ctx.i)
9292
: _ssrLooseEqual(_ctx.model, _ctx.i))) ? " selected" : ""
9393
}></option>\`)
94-
_push(\`<!--$-->\`)
94+
_push(\`<!--if-->\`)
9595
} else {
9696
_push(\`<!---->\`)
9797
}

‎packages/compiler-ssr/src/ssrCodegenTransform.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,12 @@ import {
2121
isText,
2222
processExpression,
2323
} from '@vue/compiler-dom'
24-
import { escapeHtml, isString } from '@vue/shared'
24+
import {
25+
DYNAMIC_END_ANCHOR_LABEL,
26+
DYNAMIC_START_ANCHOR_LABEL,
27+
escapeHtml,
28+
isString,
29+
} from '@vue/shared'
2530
import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
2631
import { ssrProcessIf } from './transforms/ssrVIf'
2732
import { ssrProcessFor } from './transforms/ssrVFor'
@@ -161,7 +166,7 @@ export function processChildren(
161166
asDynamic = false,
162167
): void {
163168
if (asDynamic) {
164-
context.pushStringPart(`<!--[[-->`)
169+
context.pushStringPart(`<!--${DYNAMIC_START_ANCHOR_LABEL}-->`)
165170
}
166171
if (asFragment) {
167172
context.pushStringPart(`<!--[-->`)
@@ -259,7 +264,7 @@ export function processChildren(
259264
context.pushStringPart(`<!--]-->`)
260265
}
261266
if (asDynamic) {
262-
context.pushStringPart(`<!--]]-->`)
267+
context.pushStringPart(`<!--${DYNAMIC_END_ANCHOR_LABEL}-->`)
263268
}
264269
}
265270

‎packages/compiler-ssr/src/transforms/ssrTransformComponent.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,14 @@ import {
5555
ssrProcessTransitionGroup,
5656
ssrTransformTransitionGroup,
5757
} from './ssrTransformTransitionGroup'
58-
import { extend, isArray, isObject, isPlainObject, isSymbol } from '@vue/shared'
58+
import {
59+
DYNAMIC_COMPONENT_ANCHOR_LABEL,
60+
extend,
61+
isArray,
62+
isObject,
63+
isPlainObject,
64+
isSymbol,
65+
} from '@vue/shared'
5966
import { buildSSRProps } from './ssrTransformElement'
6067
import {
6168
ssrProcessTransition,
@@ -264,6 +271,8 @@ export function ssrProcessComponent(
264271
// dynamic component (`resolveDynamicComponent` call)
265272
// the codegen node is a `renderVNode` call
266273
context.pushStatement(node.ssrCodegenNode)
274+
// anchor for dynamic component for vapor hydration
275+
context.pushStringPart(`<!--${DYNAMIC_COMPONENT_ANCHOR_LABEL}-->`)
267276
}
268277
}
269278
}

‎packages/compiler-ssr/src/transforms/ssrVIf.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
type SSRTransformContext,
1515
processChildrenAsStatement,
1616
} from '../ssrCodegenTransform'
17+
import { IF_ANCHOR_LABEL } from '@vue/shared'
1718

1819
// Plugin for the first transform pass, which simply constructs the AST node
1920
export const ssrTransformIf: NodeTransform = createStructuralDirectiveTransform(
@@ -80,7 +81,10 @@ function processIfBranch(
8081
needFragmentWrapper,
8182
)
8283
if (branch.condition) {
83-
statement.body.push(createCallExpression(`_push`, ['`<!--$-->`']))
84+
// v-if/v-else-if anchor for vapor hydration
85+
statement.body.push(
86+
createCallExpression(`_push`, [`\`<!--${IF_ANCHOR_LABEL}-->\``]),
87+
)
8488
}
8589
return statement
8690
}

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -598,14 +598,14 @@ describe('SSR hydration', () => {
598598
const ctx: SSRContext = {}
599599
container.innerHTML = await renderToString(h(App), ctx)
600600
expect(container.innerHTML).toBe(
601-
'<div><!--teleport start--><!--teleport end--><!--$--></div>',
601+
'<div><!--teleport start--><!--teleport end--><!--if--></div>',
602602
)
603603
teleportContainer.innerHTML = ctx.teleports!['#target']
604604

605605
// hydrate
606606
createSSRApp(App).mount(container)
607607
expect(container.innerHTML).toBe(
608-
'<div><!--teleport start--><!--teleport end--><!--$--></div>',
608+
'<div><!--teleport start--><!--teleport end--><!--if--></div>',
609609
)
610610
expect(teleportContainer.innerHTML).toBe(
611611
'<!--teleport start anchor--><span>Teleported Comp1</span><!--teleport anchor-->',
@@ -614,7 +614,7 @@ describe('SSR hydration', () => {
614614

615615
toggle.value = false
616616
await nextTick()
617-
expect(container.innerHTML).toBe('<div><div>Comp2</div><!--$--></div>')
617+
expect(container.innerHTML).toBe('<div><div>Comp2</div><!--if--></div>')
618618
expect(teleportContainer.innerHTML).toBe('')
619619
})
620620

@@ -657,21 +657,21 @@ describe('SSR hydration', () => {
657657
// server render
658658
container.innerHTML = await renderToString(h(App))
659659
expect(container.innerHTML).toBe(
660-
'<div><!--teleport start--><!--teleport end--><!--$--></div>',
660+
'<div><!--teleport start--><!--teleport end--><!--if--></div>',
661661
)
662662
expect(teleportContainer.innerHTML).toBe('')
663663

664664
// hydrate
665665
createSSRApp(App).mount(container)
666666
expect(container.innerHTML).toBe(
667-
'<div><!--teleport start--><!--teleport end--><!--$--></div>',
667+
'<div><!--teleport start--><!--teleport end--><!--if--></div>',
668668
)
669669
expect(teleportContainer.innerHTML).toBe('<span>Teleported Comp1</span>')
670670
expect(`Hydration children mismatch`).toHaveBeenWarned()
671671

672672
toggle.value = false
673673
await nextTick()
674-
expect(container.innerHTML).toBe('<div><div>Comp2</div><!--$--></div>')
674+
expect(container.innerHTML).toBe('<div><div>Comp2</div><!--if--></div>')
675675
expect(teleportContainer.innerHTML).toBe('')
676676
})
677677

‎packages/runtime-core/src/hydration.ts

+4-10
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import {
2525
getEscapedCssVarName,
2626
includeBooleanAttr,
2727
isBooleanAttr,
28+
isDynamicAnchor,
29+
isDynamicFragmentEndAnchor,
2830
isKnownHtmlAttr,
2931
isKnownSvgAttr,
3032
isOn,
@@ -84,14 +86,6 @@ const getContainerType = (
8486
return undefined
8587
}
8688

87-
export function isDynamicAnchor(node: Node): node is Comment {
88-
return isComment(node) && (node.data === '[[' || node.data === ']]')
89-
}
90-
91-
export function isDynamicFragmentEndAnchor(node: Node): node is Comment {
92-
return isComment(node) && node.data === '$'
93-
}
94-
9589
export const isComment = (node: Node): node is Comment =>
9690
node.nodeType === DOMNodeTypes.COMMENT
9791

@@ -130,8 +124,8 @@ export function createHydrationFunctions(
130124
function nextSibling(node: Node) {
131125
let n = next(node)
132126
// skip if:
133-
// - dynamic anchors (`<!--[-->`, `<!--]-->`)
134-
// - dynamic fragment end anchors (`<!--$-->`)
127+
// - dynamic anchors (`<!--[[-->`, `<!--][-->`)
128+
// - dynamic fragment end anchors (e.g. `<!--if-->`, `<!--for-->`)
135129
if (n && (isDynamicAnchor(n) || isDynamicFragmentEndAnchor(n))) {
136130
n = next(n)
137131
}

‎packages/runtime-core/src/index.ts

-4
Original file line numberDiff line numberDiff line change
@@ -557,7 +557,3 @@ export { startMeasure, endMeasure } from './profiling'
557557
* @internal
558558
*/
559559
export { initFeatureFlags } from './featureFlags'
560-
/**
561-
* @internal
562-
*/
563-
export { isDynamicAnchor, isDynamicFragmentEndAnchor } from './hydration'

0 commit comments

Comments
 (0)