fix(compiler-vapor): properly cache variable used in object shorthand

Author: edison1105

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

@@ -1,5 +1,20 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`cache multiple access > cache variable used in both property shorthand and normal binding 1`] = `
+"import { setStyle as _setStyle, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => {
+    const _color = _ctx.color
+    _setStyle(n0, {color: _color})
+    _setProp(n0, "id", _color)
+  })
+  return n0
+}"
+`;
+
 exports[`cache multiple access > dynamic key bindings with expressions 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)
@@ -40,7 +55,7 @@ export function render(_ctx) {
     const _foo = _ctx.foo
     const _bar = _ctx.bar
     const _foo_bar_baz = _foo[_bar(_ctx.baz)]
-    
+
     _setProp(n0, "id", _foo_bar_baz)
     _setProp(n1, "id", _foo_bar_baz)
     _setProp(n2, "id", _bar() + _foo)
@@ -60,6 +75,17 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`cache multiple access > not cache variable only used in property shorthand 1`] = `
+"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => _setStyle(n0, {color: _ctx.color}))
+  return n0
+}"
+`;
+
 exports[`cache multiple access > object property chain access 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
@@ -70,7 +96,7 @@ export function render(_ctx) {
   _renderEffect(() => {
     const _obj = _ctx.obj
     const _obj_foo_baz_obj_bar = _obj['foo']['baz'] + _obj.bar
-    
+
     _setProp(n0, "id", _obj_foo_baz_obj_bar)
     _setProp(n1, "id", _obj_foo_baz_obj_bar)
   })
@@ -89,7 +115,7 @@ export function render(_ctx) {
   _renderEffect(() => {
     const _foo = _ctx.foo
     const _foo_bar = _foo + _ctx.bar
-    
+
     _setProp(n0, "id", _foo_bar)
     _setProp(n1, "id", _foo_bar)
     _setProp(n2, "id", _foo + _foo_bar)
@@ -107,7 +133,7 @@ export function render(_ctx) {
   const n1 = t0()
   _renderEffect(() => {
     const _foo_bar = _ctx.foo + _ctx.bar
-    
+
     _setProp(n0, "id", _foo_bar)
     _setProp(n1, "id", _foo_bar)
   })
@@ -140,7 +166,7 @@ export function render(_ctx) {
   const n1 = t0()
   _renderEffect(() => {
     const _foo = _ctx.foo
-    
+
     _setClass(n0, _foo)
     _setClass(n1, _foo)
   })
@@ -461,12 +487,12 @@ export function render(_ctx) {
     _setAttr(n0, "form", _ctx.form)
     _setAttr(n1, "list", _ctx.list)
     _setAttr(n2, "type", _ctx.type)
-    
+
     _setAttr(n3, "width", _width)
     _setAttr(n4, "width", _width)
     _setAttr(n5, "width", _width)
     _setAttr(n6, "width", _width)
-    
+
     _setAttr(n3, "height", _height)
     _setAttr(n4, "height", _height)
     _setAttr(n5, "height", _height)

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

@@ -785,6 +785,23 @@ describe('cache multiple access', () => {
     expect(code).contains('_setProp(n0, "id", _obj[1][_ctx.baz] + _obj.bar)')
   })
 
+  test('cache variable used in both property shorthand and normal binding', () => {
+    const { code } = compileWithVBind(`
+        <div :style="{color}" :id="color"/>
+      `)
+    expect(code).matchSnapshot()
+    expect(code).contains('const _color = _ctx.color')
+    expect(code).contains('_setStyle(n0, {color: _color})')
+  })
+
+  test('not cache variable only used in property shorthand', () => {
+    const { code } = compileWithVBind(`
+        <div :style="{color}" />
+      `)
+    expect(code).matchSnapshot()
+    expect(code).not.contains('const _color = _ctx.color')
+  })
+
   test('not cache variable and member expression with the same name', () => {
     const { code } = compileWithVBind(`
         <div :id="bar + obj.bar"></div>

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

@@ -131,7 +131,11 @@ function genIdentifier(
   if (idMap && idMap.length) {
     const replacement = idMap[0]
     if (isString(replacement)) {
-      return [[replacement, NewlineType.None, loc]]
+      if (parent && parent.type === 'ObjectProperty' && parent.shorthand) {
+        return [[`${name}: ${replacement}`, NewlineType.None, loc]]
+      } else {
+        return [[replacement, NewlineType.None, loc]]
+      }
     } else {
       // replacement is an expression - process it again
       return genExpression(replacement, context, assignment)
@@ -292,7 +296,7 @@ function analyzeExpressions(expressions: SimpleExpressionNode[]) {
     }
 
     walk(exp.ast, {
-      enter(currentNode: Node) {
+      enter(currentNode: Node, parent: Node | null) {
         if (currentNode.type === 'MemberExpression') {
           const memberExp = extractMemberExpression(
             currentNode,
@@ -304,6 +308,15 @@ function analyzeExpressions(expressions: SimpleExpressionNode[]) {
           return this.skip()
         }
 
+        if (
+          parent &&
+          parent.type === 'ObjectProperty' &&
+          parent.shorthand &&
+          parent.key === currentNode
+        ) {
+          return this.skip()
+        }
+
         if (currentNode.type === 'Identifier') {
           registerVariable(currentNode.name, exp, true)
         }