Skip to content

Commit 11d2fb2

Browse files
yyx990803yyx990803
committed
refactor(fragments): remove visible anchors for fragments
1 parent 4397528 commit 11d2fb2

19 files changed

+95
-192
lines changed

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -219,11 +219,11 @@ describe('ssr: components', () => {
219219
foo: ({ list }, _push, _parent, _scopeId) => {
220220
if (_push) {
221221
if (_ctx.ok) {
222-
_push(\`<div\${_scopeId}><!---->\`)
222+
_push(\`<div\${_scopeId}>\`)
223223
_ssrRenderList(list, (i) => {
224224
_push(\`<span\${_scopeId}></span>\`)
225225
})
226-
_push(\`<!----></div>\`)
226+
_push(\`</div>\`)
227227
} else {
228228
_push(\`<!---->\`)
229229
}
@@ -242,11 +242,11 @@ describe('ssr: components', () => {
242242
bar: ({ ok }, _push, _parent, _scopeId) => {
243243
if (_push) {
244244
if (ok) {
245-
_push(\`<div\${_scopeId}><!---->\`)
245+
_push(\`<div\${_scopeId}>\`)
246246
_ssrRenderList(_ctx.list, (i) => {
247247
_push(\`<span\${_scopeId}></span>\`)
248248
})
249-
_push(\`<!----></div>\`)
249+
_push(\`</div>\`)
250250
} else {
251251
_push(\`<!---->\`)
252252
}
@@ -283,7 +283,7 @@ describe('ssr: components', () => {
283283
.toMatchInlineSnapshot(`
284284
"
285285
return function ssrRender(_ctx, _push, _parent) {
286-
_push(\`<!----><div></div><!---->\`)
286+
_push(\`<div></div>\`)
287287
}"
288288
`)
289289

@@ -305,7 +305,7 @@ describe('ssr: components', () => {
305305
.toMatchInlineSnapshot(`
306306
"
307307
return function ssrRender(_ctx, _push, _parent) {
308-
_push(\`<!----><div></div><!---->\`)
308+
_push(\`<div></div>\`)
309309
}"
310310
`)
311311
})

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

+5-19
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ describe('ssr: v-for', () => {
66
"const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
77
88
return function ssrRender(_ctx, _push, _parent) {
9-
_push(\`<!---->\`)
109
_ssrRenderList(_ctx.list, (i) => {
1110
_push(\`<div></div>\`)
1211
})
13-
_push(\`<!---->\`)
1412
}"
1513
`)
1614
})
@@ -21,11 +19,9 @@ describe('ssr: v-for', () => {
2119
"const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
2220
2321
return function ssrRender(_ctx, _push, _parent) {
24-
_push(\`<!---->\`)
2522
_ssrRenderList(_ctx.list, (i) => {
2623
_push(\`<div>foo<span>bar</span></div>\`)
2724
})
28-
_push(\`<!---->\`)
2925
}"
3026
`)
3127
})
@@ -41,19 +37,17 @@ describe('ssr: v-for', () => {
4137
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
4238
4339
return function ssrRender(_ctx, _push, _parent) {
44-
_push(\`<!---->\`)
4540
_ssrRenderList(_ctx.list, (row, i) => {
46-
_push(\`<div><!---->\`)
41+
_push(\`<div>\`)
4742
_ssrRenderList(row, (j) => {
4843
_push(\`<div>\${
4944
_ssrInterpolate(i)
5045
},\${
5146
_ssrInterpolate(j)
5247
}</div>\`)
5348
})
54-
_push(\`<!----></div>\`)
49+
_push(\`</div>\`)
5550
})
56-
_push(\`<!---->\`)
5751
}"
5852
`)
5953
})
@@ -64,11 +58,9 @@ describe('ssr: v-for', () => {
6458
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
6559
6660
return function ssrRender(_ctx, _push, _parent) {
67-
_push(\`<!---->\`)
6861
_ssrRenderList(_ctx.list, (i) => {
69-
_push(\`<!---->\${_ssrInterpolate(i)}<!---->\`)
62+
_push(\`\${_ssrInterpolate(i)}\`)
7063
})
71-
_push(\`<!---->\`)
7264
}"
7365
`)
7466
})
@@ -81,11 +73,9 @@ describe('ssr: v-for', () => {
8173
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
8274
8375
return function ssrRender(_ctx, _push, _parent) {
84-
_push(\`<!---->\`)
8576
_ssrRenderList(_ctx.list, (i) => {
8677
_push(\`<span>\${_ssrInterpolate(i)}</span>\`)
8778
})
88-
_push(\`<!---->\`)
8979
}"
9080
`)
9181
})
@@ -99,15 +89,13 @@ describe('ssr: v-for', () => {
9989
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
10090
10191
return function ssrRender(_ctx, _push, _parent) {
102-
_push(\`<!---->\`)
10392
_ssrRenderList(_ctx.list, (i) => {
104-
_push(\`<!----><span>\${
93+
_push(\`<span>\${
10594
_ssrInterpolate(i)
10695
}</span><span>\${
10796
_ssrInterpolate(i + 1)
108-
}</span><!---->\`)
97+
}</span>\`)
10998
})
110-
_push(\`<!---->\`)
11199
}"
112100
`)
113101
})
@@ -123,11 +111,9 @@ describe('ssr: v-for', () => {
123111
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
124112
125113
return function ssrRender(_ctx, _push, _parent) {
126-
_push(\`<!---->\`)
127114
_ssrRenderList(_ctx.list, ({ foo }, index) => {
128115
_push(\`<div>\${_ssrInterpolate(foo + _ctx.bar + index)}</div>\`)
129116
})
130-
_push(\`<!---->\`)
131117
}"
132118
`)
133119
})

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

+3-5
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ describe('ssr: v-if', () => {
8080
"
8181
return function ssrRender(_ctx, _push, _parent) {
8282
if (_ctx.foo) {
83-
_push(\`<!---->hello<!---->\`)
83+
_push(\`hello\`)
8484
} else {
8585
_push(\`<!---->\`)
8686
}
@@ -110,7 +110,7 @@ describe('ssr: v-if', () => {
110110
"
111111
return function ssrRender(_ctx, _push, _parent) {
112112
if (_ctx.foo) {
113-
_push(\`<!----><div>hi</div><div>ho</div><!---->\`)
113+
_push(\`<div>hi</div><div>ho</div>\`)
114114
} else {
115115
_push(\`<!---->\`)
116116
}
@@ -126,11 +126,9 @@ describe('ssr: v-if', () => {
126126
127127
return function ssrRender(_ctx, _push, _parent) {
128128
if (_ctx.foo) {
129-
_push(\`<!---->\`)
130129
_ssrRenderList(_ctx.list, (i) => {
131130
_push(\`<div></div>\`)
132131
})
133-
_push(\`<!---->\`)
134132
} else {
135133
_push(\`<!---->\`)
136134
}
@@ -147,7 +145,7 @@ describe('ssr: v-if', () => {
147145
"
148146
return function ssrRender(_ctx, _push, _parent) {
149147
if (_ctx.foo) {
150-
_push(\`<!----><div>hi</div><div>ho</div><!---->\`)
148+
_push(\`<div>hi</div><div>ho</div>\`)
151149
} else {
152150
_push(\`<div></div>\`)
153151
}

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

+3-14
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
ElementTypes,
1010
createBlockStatement,
1111
CompilerOptions,
12-
isText,
1312
IfStatement,
1413
CallExpression
1514
} from '@vue/compiler-dom'
@@ -29,9 +28,7 @@ import { ssrProcessElement } from './transforms/ssrTransformElement'
2928

3029
export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
3130
const context = createSSRTransformContext(ast, options)
32-
const isFragment =
33-
ast.children.length > 1 && ast.children.some(c => !isText(c))
34-
processChildren(ast.children, context, isFragment)
31+
processChildren(ast.children, context)
3532
ast.codegenNode = createBlockStatement(context.body)
3633

3734
// Finalize helpers.
@@ -107,12 +104,8 @@ function createChildContext(
107104

108105
export function processChildren(
109106
children: TemplateChildNode[],
110-
context: SSRTransformContext,
111-
asFragment = false
107+
context: SSRTransformContext
112108
) {
113-
if (asFragment) {
114-
context.pushStringPart(`<!---->`)
115-
}
116109
for (let i = 0; i < children.length; i++) {
117110
const child = children[i]
118111
if (child.type === NodeTypes.ELEMENT) {
@@ -135,18 +128,14 @@ export function processChildren(
135128
ssrProcessFor(child, context)
136129
}
137130
}
138-
if (asFragment) {
139-
context.pushStringPart(`<!---->`)
140-
}
141131
}
142132

143133
export function processChildrenAsStatement(
144134
children: TemplateChildNode[],
145135
parentContext: SSRTransformContext,
146-
asFragment = false,
147136
withSlotScopeId = parentContext.withSlotScopeId
148137
): BlockStatement {
149138
const childContext = createChildContext(parentContext, withSlotScopeId)
150-
processChildren(children, childContext, asFragment)
139+
processChildren(children, childContext)
151140
return createBlockStatement(childContext.body)
152141
}

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

+1-8
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ import {
1212
FunctionExpression,
1313
TemplateChildNode,
1414
PORTAL,
15-
SUSPENSE,
16-
TRANSITION_GROUP,
1715
createIfStatement,
1816
createSimpleExpression,
1917
getBaseTransformPreset,
@@ -135,14 +133,10 @@ export function ssrProcessComponent(
135133
// this is a built-in component that fell-through.
136134
// just render its children.
137135
const component = componentTypeMap.get(node)!
138-
139136
if (component === PORTAL) {
140137
return ssrProcessPortal(node, context)
141138
}
142-
143-
const needFragmentWrapper =
144-
component === SUSPENSE || component === TRANSITION_GROUP
145-
processChildren(node.children, context, needFragmentWrapper)
139+
processChildren(node.children, context)
146140
} else {
147141
// finish up slot function expressions from the 1st pass.
148142
const wipEntries = wipMap.get(node) || []
@@ -157,7 +151,6 @@ export function ssrProcessComponent(
157151
processChildrenAsStatement(
158152
children,
159153
context,
160-
false,
161154
true /* withSlotScopeId */
162155
),
163156
vnodeBranch

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

+2-13
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import {
44
processFor,
55
createCallExpression,
66
createFunctionExpression,
7-
createForLoopParams,
8-
NodeTypes
7+
createForLoopParams
98
} from '@vue/compiler-dom'
109
import {
1110
SSRTransformContext,
@@ -22,24 +21,14 @@ export const ssrTransformFor = createStructuralDirectiveTransform(
2221
// This is called during the 2nd transform pass to construct the SSR-sepcific
2322
// codegen nodes.
2423
export function ssrProcessFor(node: ForNode, context: SSRTransformContext) {
25-
const needFragmentWrapper =
26-
node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT
2724
const renderLoop = createFunctionExpression(
2825
createForLoopParams(node.parseResult)
2926
)
30-
renderLoop.body = processChildrenAsStatement(
31-
node.children,
32-
context,
33-
needFragmentWrapper
34-
)
35-
36-
// v-for always renders a fragment
37-
context.pushStringPart(`<!---->`)
27+
renderLoop.body = processChildrenAsStatement(node.children, context)
3828
context.pushStatement(
3929
createCallExpression(context.helper(SSR_RENDER_LIST), [
4030
node.source,
4131
renderLoop
4232
])
4333
)
44-
context.pushStringPart(`<!---->`)
4534
}

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

+6-18
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ import {
44
IfNode,
55
createIfStatement,
66
createBlockStatement,
7-
createCallExpression,
8-
IfBranchNode,
9-
BlockStatement,
10-
NodeTypes
7+
createCallExpression
118
} from '@vue/compiler-dom'
129
import {
1310
SSRTransformContext,
@@ -26,14 +23,17 @@ export function ssrProcessIf(node: IfNode, context: SSRTransformContext) {
2623
const [rootBranch] = node.branches
2724
const ifStatement = createIfStatement(
2825
rootBranch.condition!,
29-
processIfBranch(rootBranch, context)
26+
processChildrenAsStatement(rootBranch.children, context)
3027
)
3128
context.pushStatement(ifStatement)
3229

3330
let currentIf = ifStatement
3431
for (let i = 1; i < node.branches.length; i++) {
3532
const branch = node.branches[i]
36-
const branchBlockStatement = processIfBranch(branch, context)
33+
const branchBlockStatement = processChildrenAsStatement(
34+
branch.children,
35+
context
36+
)
3737
if (branch.condition) {
3838
// else-if
3939
currentIf = currentIf.alternate = createIfStatement(
@@ -52,15 +52,3 @@ export function ssrProcessIf(node: IfNode, context: SSRTransformContext) {
5252
])
5353
}
5454
}
55-
56-
function processIfBranch(
57-
branch: IfBranchNode,
58-
context: SSRTransformContext
59-
): BlockStatement {
60-
const { children } = branch
61-
const needFragmentWrapper =
62-
(children.length !== 1 || children[0].type !== NodeTypes.ELEMENT) &&
63-
// optimize away nested fragments when the only child is a ForNode
64-
!(children.length === 1 && children[0].type === NodeTypes.FOR)
65-
return processChildrenAsStatement(children, context, needFragmentWrapper)
66-
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ describe('api: options', () => {
281281
}
282282
} as any
283283

284-
expect(renderToString(h(Root))).toBe(`<!---->1112<!---->`)
284+
expect(renderToString(h(Root))).toBe(`1112`)
285285
})
286286

287287
test('lifecycle', async () => {

0 commit comments

Comments
 (0)