Skip to content

Commit 3048b7a

Browse files
committed
fix(compiler-vapor): properly cache variable used in object shorthand
1 parent 99d70dd commit 3048b7a

File tree

3 files changed

+58
-2
lines changed

3 files changed

+58
-2
lines changed

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

+26
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
exports[`cache multiple access > cache variable used in both object shorthand and normal binding 1`] = `
4+
"import { setStyle as _setStyle, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
5+
const t0 = _template("<div></div>", true)
6+
7+
export function render(_ctx) {
8+
const n0 = t0()
9+
_renderEffect(() => {
10+
const _color = _ctx.color
11+
_setStyle(n0, {color: _color})
12+
_setProp(n0, "id", _color)
13+
})
14+
return n0
15+
}"
16+
`;
17+
318
exports[`cache multiple access > dynamic key bindings with expressions 1`] = `
419
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
520
const t0 = _template("<div></div>", true)
@@ -60,6 +75,17 @@ export function render(_ctx) {
6075
}"
6176
`;
6277

78+
exports[`cache multiple access > not cache variable only used in object shorthand 1`] = `
79+
"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
80+
const t0 = _template("<div></div>", true)
81+
82+
export function render(_ctx) {
83+
const n0 = t0()
84+
_renderEffect(() => _setStyle(n0, {color: _ctx.color}))
85+
return n0
86+
}"
87+
`;
88+
6389
exports[`cache multiple access > object property chain access 1`] = `
6490
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
6591
const t0 = _template("<div></div>")

packages/compiler-vapor/__tests__/transforms/vBind.spec.ts

+17
Original file line numberDiff line numberDiff line change
@@ -785,6 +785,23 @@ describe('cache multiple access', () => {
785785
expect(code).contains('_setProp(n0, "id", _obj[1][_ctx.baz] + _obj.bar)')
786786
})
787787

788+
test('cache variable used in both object shorthand and normal binding', () => {
789+
const { code } = compileWithVBind(`
790+
<div :style="{color}" :id="color"/>
791+
`)
792+
expect(code).matchSnapshot()
793+
expect(code).contains('const _color = _ctx.color')
794+
expect(code).contains('_setStyle(n0, {color: _color})')
795+
})
796+
797+
test('not cache variable only used in object shorthand', () => {
798+
const { code } = compileWithVBind(`
799+
<div :style="{color}" />
800+
`)
801+
expect(code).matchSnapshot()
802+
expect(code).not.contains('const _color = _ctx.color')
803+
})
804+
788805
test('not cache variable and member expression with the same name', () => {
789806
const { code } = compileWithVBind(`
790807
<div :id="bar + obj.bar"></div>

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

+15-2
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,11 @@ function genIdentifier(
131131
if (idMap && idMap.length) {
132132
const replacement = idMap[0]
133133
if (isString(replacement)) {
134-
return [[replacement, NewlineType.None, loc]]
134+
if (parent && parent.type === 'ObjectProperty' && parent.shorthand) {
135+
return [[`${name}: ${replacement}`, NewlineType.None, loc]]
136+
} else {
137+
return [[replacement, NewlineType.None, loc]]
138+
}
135139
} else {
136140
// replacement is an expression - process it again
137141
return genExpression(replacement, context, assignment)
@@ -292,7 +296,7 @@ function analyzeExpressions(expressions: SimpleExpressionNode[]) {
292296
}
293297

294298
walk(exp.ast, {
295-
enter(currentNode: Node) {
299+
enter(currentNode: Node, parent: Node | null) {
296300
if (currentNode.type === 'MemberExpression') {
297301
const memberExp = extractMemberExpression(
298302
currentNode,
@@ -304,6 +308,15 @@ function analyzeExpressions(expressions: SimpleExpressionNode[]) {
304308
return this.skip()
305309
}
306310

311+
if (
312+
parent &&
313+
parent.type === 'ObjectProperty' &&
314+
parent.shorthand &&
315+
parent.key === currentNode
316+
) {
317+
return this.skip()
318+
}
319+
307320
if (currentNode.type === 'Identifier') {
308321
registerVariable(currentNode.name, exp, true)
309322
}

0 commit comments

Comments
 (0)