Skip to content

Commit 7ff6b0f

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

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
@@ -148,6 +148,32 @@ export function render(_ctx) {
148148
}"
149149
`;
150150

151+
exports[`cache multiple access > variable only used in object shorthand 1`] = `
152+
"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
153+
const t0 = _template("<div></div>", true)
154+
155+
export function render(_ctx) {
156+
const n0 = t0()
157+
_renderEffect(() => _setStyle(n0, {color: _ctx.color}))
158+
return n0
159+
}"
160+
`;
161+
162+
exports[`cache multiple access > variable used in both object shorthand and normal binding 1`] = `
163+
"import { setStyle as _setStyle, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
164+
const t0 = _template("<div></div>", true)
165+
166+
export function render(_ctx) {
167+
const n0 = t0()
168+
_renderEffect(() => {
169+
const _color = _ctx.color
170+
_setStyle(n0, {color: _color})
171+
_setProp(n0, "id", _color)
172+
})
173+
return n0
174+
}"
175+
`;
176+
151177
exports[`compiler v-bind > .attr modifier 1`] = `
152178
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
153179
const t0 = _template("<div></div>", true)

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('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('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)