Skip to content

Commit 69162d3

Browse files
edison1105edison1105
committed
fix: codegen
1 parent c3cb610 commit 69162d3

File tree

7 files changed

+155
-141
lines changed

7 files changed

+155
-141
lines changed

‎packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap

+16-16
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ exports[`compiler: v-skip > transform > nested v-skip 1`] = `
1919
2020
return function render(_ctx, _cache) {
2121
with (_ctx) {
22-
const { createCommentVNode: _createCommentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode, Fragment: _Fragment } = _Vue
22+
const { createCommentVNode: _createCommentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, Fragment: _Fragment } = _Vue
2323
2424
return (_ctx.ok)
2525
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
@@ -95,12 +95,12 @@ exports[`compiler: v-skip > transform > on component with dynamic slot 1`] = `
9595
9696
return function render(_ctx, _cache) {
9797
with (_ctx) {
98-
const { withCtx: _withCtx, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
98+
const { withCtx: _withCtx, toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
9999
100100
const _component_Comp = _resolveComponent("Comp")
101101
102102
return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, {
103-
[_ctx.foo]: _withCtx(() => ["foo"]),
103+
[_ctx.foo]: _withCtx(() => [_toDisplayString(_ctx.foo)]),
104104
_: 2 /* DYNAMIC */
105105
}, 1024 /* DYNAMIC_SLOTS */))
106106
}
@@ -112,20 +112,20 @@ exports[`compiler: v-skip > transform > on component with implicit default slot
112112
113113
return function render(_ctx, _cache) {
114114
with (_ctx) {
115-
const { withCtx: _withCtx, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, createBlock: _createBlock } = _Vue
115+
const { withCtx: _withCtx, toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, createBlock: _createBlock } = _Vue
116116
117117
const _component_Comp = _resolveComponent("Comp")
118118
119119
return (_ctx.ok)
120120
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
121121
(_ctx.yes)
122-
? (_openBlock(), _createElementBlock("span", { key: 0 }, "default"))
122+
? (_openBlock(), _createElementBlock("span", { key: 0 }, _toDisplayString(_ctx.default), 1 /* TEXT */))
123123
: _createCommentVNode("v-if", true)
124124
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
125125
: (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
126126
default: _withCtx(() => [
127127
(_ctx.yes)
128-
? (_openBlock(), _createElementBlock("span", { key: 0 }, "default"))
128+
? (_openBlock(), _createElementBlock("span", { key: 0 }, _toDisplayString(_ctx.default), 1 /* TEXT */))
129129
: _createCommentVNode("v-if", true)
130130
]),
131131
_: 1 /* STABLE */
@@ -139,7 +139,7 @@ exports[`compiler: v-skip > transform > on component with multiple implicit defa
139139
140140
return function render(_ctx, _cache) {
141141
with (_ctx) {
142-
const { withCtx: _withCtx, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
142+
const { withCtx: _withCtx, createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
143143
144144
const _component_Comp = _resolveComponent("Comp")
145145
@@ -149,7 +149,7 @@ return function render(_ctx, _cache) {
149149
_createElementVNode("div")
150150
], 64 /* STABLE_FRAGMENT */))
151151
: (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
152-
foo: _withCtx(() => ["foo"]),
152+
foo: _withCtx(() => [_toDisplayString(_ctx.foo)]),
153153
default: _withCtx(() => [
154154
_createElementVNode("span"),
155155
_createElementVNode("div")
@@ -185,15 +185,15 @@ exports[`compiler: v-skip > transform > on component with name default slot + v-
185185
186186
return function render(_ctx, _cache) {
187187
with (_ctx) {
188-
const { withCtx: _withCtx, createSlots: _createSlots, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
188+
const { withCtx: _withCtx, createSlots: _createSlots, toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
189189
190190
const _component_Comp = _resolveComponent("Comp")
191191
192192
return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, _createSlots({ _: 2 /* DYNAMIC */ }, [
193193
(_ctx.yes)
194194
? {
195195
name: "default",
196-
fn: _withCtx(() => ["default"]),
196+
fn: _withCtx(() => [_toDisplayString(_ctx.default)]),
197197
key: "0"
198198
}
199199
: undefined
@@ -325,7 +325,7 @@ exports[`compiler: v-skip > transform > with component children 1`] = `
325325
326326
return function render(_ctx, _cache) {
327327
with (_ctx) {
328-
const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createElementBlock: _createElementBlock } = _Vue
328+
const { resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock, createElementBlock: _createElementBlock } = _Vue
329329
330330
const _component_Comp = _resolveComponent("Comp")
331331
@@ -343,7 +343,7 @@ exports[`compiler: v-skip > transform > with element children 1`] = `
343343
344344
return function render(_ctx, _cache) {
345345
with (_ctx) {
346-
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
346+
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
347347
348348
return (_ctx.ok)
349349
? (_openBlock(), _createElementBlock("span", { key: 0 }))
@@ -381,11 +381,11 @@ exports[`compiler: v-skip > transform > with text children 1`] = `
381381
382382
return function render(_ctx, _cache) {
383383
with (_ctx) {
384-
const { Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
384+
const { toDisplayString: _toDisplayString, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
385385
386386
return (_ctx.ok)
387-
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
388-
: (_openBlock(), _createElementBlock("div", { key: 1 }, "foo"))
387+
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [_toDisplayString(_ctx.foo)], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
388+
: (_openBlock(), _createElementBlock("div", { key: 1 }, _toDisplayString(_ctx.foo), 1 /* TEXT */))
389389
}
390390
}"
391391
`;
@@ -395,7 +395,7 @@ exports[`compiler: v-skip > transform > with v-memo 1`] = `
395395
396396
return function render(_ctx, _cache) {
397397
with (_ctx) {
398-
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, withMemo: _withMemo } = _Vue
398+
const { openBlock: _openBlock, createElementBlock: _createElementBlock, withMemo: _withMemo } = _Vue
399399
400400
return (_ctx.ok)
401401
? (_openBlock(), _createElementBlock("span", { key: 0 }))

‎packages/compiler-core/__tests__/transforms/vSkip.spec.ts

+11-8
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,20 @@ describe('compiler: v-skip', () => {
7070

7171
test('with text children', () => {
7272
const { root, node } = parseWithSkipTransform(
73-
`<div v-skip="ok">foo</div>`,
73+
`<div v-skip="ok">{{foo}}</div>`,
7474
) as { root: RootNode; node: SkipNode }
7575
expect(node.type).toBe(NodeTypes.SKIP)
7676
expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
7777
expect((node.consequent as IfBranchNode).children.length).toBe(1)
7878
expect((node.consequent as IfBranchNode).children[0].type).toBe(
79-
NodeTypes.TEXT,
79+
NodeTypes.INTERPOLATION,
8080
)
8181
expect(
82-
((node.consequent as IfBranchNode).children[0] as any).content,
83-
).toBe(`foo`)
82+
(
83+
((node.consequent as IfBranchNode).children[0] as any)
84+
.content as SimpleExpressionNode
85+
).content,
86+
).toBe(`_ctx.foo`)
8487
expect(node.alternate.children.length).toBe(1)
8588
expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
8689
expect((node.alternate.children[0] as ElementNode).tag).toBe(`div`)
@@ -341,7 +344,7 @@ describe('compiler: v-skip', () => {
341344
const { root, node } = parseWithSkipTransform(
342345
`<Comp v-skip="ok">
343346
<span/>
344-
<template #foo>foo</template>
347+
<template #foo>{{foo}}</template>
345348
<div/>
346349
</Comp>`,
347350
) as { root: RootNode; node: SkipNode }
@@ -371,7 +374,7 @@ describe('compiler: v-skip', () => {
371374
test('on component with name default slot + v-if', () => {
372375
const { root, node } = parseWithSkipTransform(
373376
`<Comp v-skip="ok">
374-
<template v-if="yes" #default>default</template>
377+
<template v-if="yes" #default>{{default}}</template>
375378
</Comp>`,
376379
) as { root: RootNode; node: ComponentNode }
377380
expect(node.type).toBe(NodeTypes.ELEMENT)
@@ -390,7 +393,7 @@ describe('compiler: v-skip', () => {
390393
test('on component with implicit default slot + v-if', () => {
391394
const { root, node } = parseWithSkipTransform(
392395
`<Comp v-skip="ok">
393-
<span v-if="yes">default</span>
396+
<span v-if="yes">{{default}}</span>
394397
</Comp>`,
395398
) as { root: RootNode; node: SkipNode }
396399
expect(node.type).toBe(NodeTypes.SKIP)
@@ -401,7 +404,7 @@ describe('compiler: v-skip', () => {
401404
test('on component with dynamic slot', () => {
402405
const { root, node } = parseWithSkipTransform(
403406
`<Comp v-skip="ok">
404-
<template #[foo]>foo</template>
407+
<template #[foo]>{{foo}}</template>
405408
</Comp>`,
406409
) as { root: RootNode; node: ComponentNode }
407410
expect(node.type).toBe(NodeTypes.ELEMENT)

‎packages/compiler-core/src/transform.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -467,9 +467,15 @@ export function traverseNode(
467467
}
468468
break
469469
case NodeTypes.SKIP:
470-
const { consequent } = node
471-
if (consequent.type === NodeTypes.IF_BRANCH)
472-
traverseNode(consequent, context)
470+
// in non-SSR mode, `alternate` already includes `consequent` content,
471+
// so no need to traverse `consequent` node
472+
// during `inSSR` transform, we need to traverse both since we use the cloned nodes,
473+
// see `createBranchNode` in `vSkip.ts`
474+
if (context.inSSR) {
475+
const { consequent } = node
476+
if (consequent.type === NodeTypes.IF_BRANCH)
477+
traverseNode(consequent, context)
478+
}
473479
traverseNode(node.alternate, context)
474480
break
475481
case NodeTypes.IF_BRANCH:

‎packages/compiler-core/src/transforms/vSkip.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,7 @@ export function processSkip(
132132
if (!hasDynamicSlots) {
133133
if (defaultSlot) {
134134
processAsSkipNode = true
135-
// using the cloned node for ssr VNode-based slot
136-
children = context.inSSR ? clone(defaultSlot) : defaultSlot
135+
children = defaultSlot
137136
} else {
138137
context.onError(
139138
createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
@@ -147,7 +146,7 @@ export function processSkip(
147146
// if children is empty, create comment node
148147
const consequent =
149148
children.length !== 0
150-
? createBranchNode(node, node.loc, children)
149+
? createBranchNode(context, node, node.loc, children)
151150
: createCallExpression(context.helper(CREATE_COMMENT), [
152151
__DEV__ ? '"v-skip"' : '""',
153152
'true',
@@ -158,7 +157,7 @@ export function processSkip(
158157
loc: cloneLoc(node.loc),
159158
test: dir.exp,
160159
consequent,
161-
alternate: createBranchNode(node, node.loc, [node]),
160+
alternate: createBranchNode(context, node, node.loc, [node]),
162161
newline: true,
163162
codegenNode: undefined,
164163
}
@@ -189,6 +188,7 @@ function resolveDefaultSlot(node: ComponentNode, context: TransformContext) {
189188
}
190189

191190
function createBranchNode(
191+
context: TransformContext,
192192
node: ElementNode,
193193
loc: SourceLocation,
194194
children: TemplateChildNode[],
@@ -197,7 +197,8 @@ function createBranchNode(
197197
type: NodeTypes.IF_BRANCH,
198198
loc,
199199
condition: undefined,
200-
children,
200+
// using cloned node during `inSSR` transform
201+
children: context.inSSR ? clone(children) : children,
201202
userKey: findProp(node, `key`),
202203
}
203204
}

‎packages/compiler-core/src/transforms/vSlot.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -413,13 +413,8 @@ function hasForwardedSlots(children: TemplateChildNode[]): boolean {
413413
if (hasForwardedSlots(child.branches)) return true
414414
break
415415
case NodeTypes.SKIP:
416-
const { consequent } = child
417-
if (
418-
(consequent.type === NodeTypes.IF_BRANCH &&
419-
hasForwardedSlots(consequent.children)) ||
420-
hasForwardedSlots(child.alternate.children)
421-
)
422-
return true
416+
// only check `alternate` branch since it contains the `consequent` node
417+
if (hasForwardedSlots(child.alternate.children)) return true
423418
break
424419
case NodeTypes.IF_BRANCH:
425420
case NodeTypes.FOR:

‎packages/compiler-core/src/utils.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -529,11 +529,9 @@ export function hasScopeRef(
529529
case NodeTypes.IF:
530530
return node.branches.some(b => hasScopeRef(b, ids))
531531
case NodeTypes.SKIP:
532-
const { consequent } = node
533532
return (
534533
hasScopeRef(node.test, ids) ||
535-
(consequent.type === NodeTypes.IF_BRANCH &&
536-
consequent.children.some(c => hasScopeRef(c, ids))) ||
534+
// only check `alternate` branch since it contains the `consequent` node
537535
node.alternate.children.some(c => hasScopeRef(c, ids))
538536
)
539537
case NodeTypes.IF_BRANCH:

0 commit comments

Comments
 (0)