fix(compiler-vapor): improve expression caching for shared member roots (#14132)

Author: edison1105

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

@@ -8,7 +8,7 @@ export function render(_ctx) {
   const n0 = t0()
   _renderEffect(() => {
     const _obj = _ctx.obj
-    _setProp(n0, "id", _obj.foo + _obj.bar)
+    _setProp(n0, "id", _obj!.foo + _obj!.bar)
   })
   return n0
 }"
@@ -238,6 +238,38 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`cache multiple access > shared member root 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  const n1 = t0()
+  _renderEffect(() => {
+    const _foo = _ctx.foo
+    _setProp(n0, "id", _foo.bar)
+    _setProp(n1, "id", _foo.baz)
+  })
+  return [n0, n1]
+}"
+`;
+
+exports[`cache multiple access > shared member root with TSNonNullExpression 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  const n1 = t0()
+  _renderEffect(() => {
+    const _foo = _ctx.foo
+    _setProp(n0, "id", _foo!.bar)
+    _setProp(n1, "id", _foo!.baz)
+  })
+  return [n0, n1]
+}"
+`;
+
 exports[`cache multiple access > variable name substring edge cases 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)

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

@@ -850,7 +850,29 @@ describe('cache multiple access', () => {
     const { code } = compileWithVBind(`<div :id="obj!.foo + obj!.bar"></div>`)
     expect(code).matchSnapshot()
     expect(code).contains('const _obj = _ctx.obj')
-    expect(code).contains('_setProp(n0, "id", _obj.foo + _obj.bar)')
+    expect(code).contains('_setProp(n0, "id", _obj!.foo + _obj!.bar)')
+  })
+
+  test('shared member root', () => {
+    const { code } = compileWithVBind(`
+        <div :id="foo.bar"></div>
+        <div :id="foo.baz"></div>
+      `)
+    expect(code).matchSnapshot()
+    expect(code).contains('const _foo = _ctx.foo')
+    expect(code).contains('_setProp(n0, "id", _foo.bar)')
+    expect(code).contains('_setProp(n1, "id", _foo.baz)')
+  })
+
+  test('shared member root with TSNonNullExpression', () => {
+    const { code } = compileWithVBind(`
+        <div :id="foo!.bar"></div>
+        <div :id="foo!.baz"></div>
+      `)
+    expect(code).matchSnapshot()
+    expect(code).contains('const _foo = _ctx.foo')
+    expect(code).contains('_setProp(n0, "id", _foo!.bar)')
+    expect(code).contains('_setProp(n1, "id", _foo!.baz)')
   })
 
   test('not cache variable only used in property shorthand', () => {

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

@@ -492,10 +492,10 @@ function shouldDeclareVariable(
     }
     return true
   }
-  // if arrays share common elements, no declaration needed
-  // because they will be treat as repeated expressions
+  // if arrays are identical, no declaration needed
+  // because they will be treated as repeated expressions
   // e.g., [[foo,bar],[foo,bar]] -> const foo_bar = _ctx.foo + _ctx.bar
-  if (vars.some(v => v.some(e => first.includes(e)))) {
+  if (vars.every(v => v.every((e, idx) => e === first[idx]))) {
     return false
   }
 
@@ -679,7 +679,7 @@ function extractMemberExpression(
         : `.${extractMemberExpression(exp.property, NOOP)}`
       return `${object}${prop}`
     case 'TSNonNullExpression': // foo!.bar
-      return `${extractMemberExpression(exp.expression, onIdentifier)}!`
+      return `${extractMemberExpression(exp.expression, onIdentifier)}`
     default:
       return ''
   }