Skip to content

Commit 1dd74e2

Browse files
johnsoncodehkjohnsoncodehk
authored
feat(vapor): generate more efficient runtime code for specific interpolation patterns (#13278)
1 parent 5a528aa commit 1dd74e2

File tree

9 files changed

+569
-25
lines changed

9 files changed

+569
-25
lines changed

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,21 @@ export function render(_ctx) {
4747
}"
4848
`;
4949

50+
exports[`compiler: v-for > key only binding pattern 1`] = `
51+
"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
52+
const t0 = _template("<tr> </tr>", true)
53+
54+
export function render(_ctx) {
55+
const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
56+
const n2 = t0()
57+
const x2 = _child(n2)
58+
_setText(x2, _toDisplayString(_for_item0.value.id + _for_item0.value.id))
59+
return n2
60+
}, (row) => (row.id))
61+
return n0
62+
}"
63+
`;
64+
5065
exports[`compiler: v-for > multi effect 1`] = `
5166
"import { setProp as _setProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
5267
const t0 = _template("<div></div>", true)
@@ -130,6 +145,75 @@ export function render(_ctx) {
130145
}"
131146
`;
132147

148+
exports[`compiler: v-for > selector pattern 1`] = `
149+
"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
150+
const t0 = _template("<tr> </tr>", true)
151+
152+
export function render(_ctx) {
153+
const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
154+
const n2 = t0()
155+
const x2 = _child(n2)
156+
_selector0_0(() => {
157+
_setText(x2, _toDisplayString(_ctx.selected === _for_item0.value.id ? 'danger' : ''))
158+
})
159+
return n2
160+
}, (row) => (row.id))
161+
const _selector0_0 = n0.useSelector(() => _ctx.selected)
162+
return n0
163+
}"
164+
`;
165+
166+
exports[`compiler: v-for > selector pattern 2`] = `
167+
"import { setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
168+
const t0 = _template("<tr></tr>", true)
169+
170+
export function render(_ctx) {
171+
const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
172+
const n2 = t0()
173+
_selector0_0(() => {
174+
_setClass(n2, _ctx.selected === _for_item0.value.id ? 'danger' : '')
175+
})
176+
return n2
177+
}, (row) => (row.id))
178+
const _selector0_0 = n0.useSelector(() => _ctx.selected)
179+
return n0
180+
}"
181+
`;
182+
183+
exports[`compiler: v-for > selector pattern 3`] = `
184+
"import { setClass as _setClass, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
185+
const t0 = _template("<tr></tr>", true)
186+
187+
export function render(_ctx) {
188+
const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
189+
const n2 = t0()
190+
_renderEffect(() => {
191+
const _row = _for_item0.value
192+
_setClass(n2, _row.label === _row.id ? 'danger' : '')
193+
})
194+
return n2
195+
}, (row) => (row.id))
196+
return n0
197+
}"
198+
`;
199+
200+
exports[`compiler: v-for > selector pattern 4`] = `
201+
"import { setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
202+
const t0 = _template("<tr></tr>", true)
203+
204+
export function render(_ctx) {
205+
const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
206+
const n2 = t0()
207+
_selector0_0(() => {
208+
_setClass(n2, { danger: _for_item0.value.id === _ctx.selected })
209+
})
210+
return n2
211+
}, (row) => (row.id))
212+
const _selector0_0 = n0.useSelector(() => _ctx.selected)
213+
return n0
214+
}"
215+
`;
216+
133217
exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
134218
"import { getDefaultValue as _getDefaultValue, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
135219
const t0 = _template("<div> </div>", true)

‎packages/compiler-vapor/__tests__/transforms/vFor.spec.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,73 @@ describe('compiler: v-for', () => {
6767
).lengthOf(1)
6868
})
6969

70+
test('key only binding pattern', () => {
71+
expect(
72+
compileWithVFor(
73+
`
74+
<tr
75+
v-for="row of rows"
76+
:key="row.id"
77+
>
78+
{{ row.id + row.id }}
79+
</tr>
80+
`,
81+
).code,
82+
).matchSnapshot()
83+
})
84+
85+
test('selector pattern', () => {
86+
expect(
87+
compileWithVFor(
88+
`
89+
<tr
90+
v-for="row of rows"
91+
:key="row.id"
92+
>
93+
{{ selected === row.id ? 'danger' : '' }}
94+
</tr>
95+
`,
96+
).code,
97+
).matchSnapshot()
98+
99+
expect(
100+
compileWithVFor(
101+
`
102+
<tr
103+
v-for="row of rows"
104+
:key="row.id"
105+
:class="selected === row.id ? 'danger' : ''"
106+
></tr>
107+
`,
108+
).code,
109+
).matchSnapshot()
110+
111+
// Should not be optimized because row.label is not from parent scope
112+
expect(
113+
compileWithVFor(
114+
`
115+
<tr
116+
v-for="row of rows"
117+
:key="row.id"
118+
:class="row.label === row.id ? 'danger' : ''"
119+
></tr>
120+
`,
121+
).code,
122+
).matchSnapshot()
123+
124+
expect(
125+
compileWithVFor(
126+
`
127+
<tr
128+
v-for="row of rows"
129+
:key="row.id"
130+
:class="{ danger: row.id === selected }"
131+
></tr>
132+
`,
133+
).code,
134+
).matchSnapshot()
135+
})
136+
70137
test('multi effect', () => {
71138
const { code } = compileWithVFor(
72139
`<div v-for="(item, index) of items" :item="item" :index="index" />`,

‎packages/compiler-vapor/src/generators/block.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,13 @@ export function genBlock(
1919
context: CodegenContext,
2020
args: CodeFragment[] = [],
2121
root?: boolean,
22-
customReturns?: (returns: CodeFragment[]) => CodeFragment[],
2322
): CodeFragment[] {
2423
return [
2524
'(',
2625
...args,
2726
') => {',
2827
INDENT_START,
29-
...genBlockContent(oper, context, root, customReturns),
28+
...genBlockContent(oper, context, root),
3029
INDENT_END,
3130
NEWLINE,
3231
'}',
@@ -37,7 +36,7 @@ export function genBlockContent(
3736
block: BlockIRNode,
3837
context: CodegenContext,
3938
root?: boolean,
40-
customReturns?: (returns: CodeFragment[]) => CodeFragment[],
39+
genEffectsExtraFrag?: () => CodeFragment[],
4140
): CodeFragment[] {
4241
const [frag, push] = buildCodeFragment()
4342
const { dynamic, effect, operation, returns } = block
@@ -70,7 +69,7 @@ export function genBlockContent(
7069
}
7170

7271
push(...genOperations(operation, context))
73-
push(...genEffects(effect, context))
72+
push(...genEffects(effect, context, genEffectsExtraFrag))
7473

7574
push(NEWLINE, `return `)
7675

@@ -79,7 +78,7 @@ export function genBlockContent(
7978
returnNodes.length > 1
8079
? genMulti(DELIMITERS_ARRAY, ...returnNodes)
8180
: [returnNodes[0] || 'null']
82-
push(...(customReturns ? customReturns(returnsCode) : returnsCode))
81+
push(...returnsCode)
8382

8483
resetBlock()
8584
return frag

‎packages/compiler-vapor/src/generators/expression.ts‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,7 @@ function canPrefix(name: string) {
233233
type DeclarationResult = {
234234
ids: Record<string, string>
235235
frag: CodeFragment[]
236+
varNames: string[]
236237
}
237238
type DeclarationValue = {
238239
name: string
@@ -246,6 +247,7 @@ type DeclarationValue = {
246247
export function processExpressions(
247248
context: CodegenContext,
248249
expressions: SimpleExpressionNode[],
250+
shouldDeclare: boolean,
249251
): DeclarationResult {
250252
// analyze variables
251253
const {
@@ -277,7 +279,11 @@ export function processExpressions(
277279
expToVariableMap,
278280
)
279281

280-
return genDeclarations([...varDeclarations, ...expDeclarations], context)
282+
return genDeclarations(
283+
[...varDeclarations, ...expDeclarations],
284+
context,
285+
shouldDeclare,
286+
)
281287
}
282288

283289
function analyzeExpressions(expressions: SimpleExpressionNode[]) {
@@ -592,31 +598,41 @@ function processRepeatedExpressions(
592598
function genDeclarations(
593599
declarations: DeclarationValue[],
594600
context: CodegenContext,
601+
shouldDeclare: boolean,
595602
): DeclarationResult {
596603
const [frag, push] = buildCodeFragment()
597604
const ids: Record<string, string> = Object.create(null)
605+
const varNames = new Set<string>()
598606

599607
// process identifiers first as expressions may rely on them
600608
declarations.forEach(({ name, isIdentifier, value }) => {
601609
if (isIdentifier) {
602610
const varName = (ids[name] = `_${name}`)
603-
push(`const ${varName} = `, ...genExpression(value, context), NEWLINE)
611+
varNames.add(varName)
612+
if (shouldDeclare) {
613+
push(`const `)
614+
}
615+
push(`${varName} = `, ...genExpression(value, context), NEWLINE)
604616
}
605617
})
606618

607619
// process expressions
608620
declarations.forEach(({ name, isIdentifier, value }) => {
609621
if (!isIdentifier) {
610622
const varName = (ids[name] = `_${name}`)
623+
varNames.add(varName)
624+
if (shouldDeclare) {
625+
push(`const `)
626+
}
611627
push(
612-
`const ${varName} = `,
628+
`${varName} = `,
613629
...context.withId(() => genExpression(value, context), ids),
614630
NEWLINE,
615631
)
616632
}
617633
})
618634

619-
return { ids, frag }
635+
return { ids, frag, varNames: [...varNames] }
620636
}
621637

622638
function escapeRegExp(string: string) {

0 commit comments

Comments
 (0)