test(compiler-vapor): reorganize expression caching tests

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

@@ -11,48 +11,6 @@ export function render(_ctx) {
 }"
 `;
 
-exports[`compiler: expression > duplicate expressions 1`] = `
-"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template(" ")
-
-export function render(_ctx) {
-  const n0 = t0()
-  _renderEffect(() => {
-    const _foo_bar = _ctx.foo + _ctx.bar
-    _setText(n0, _toDisplayString(_foo_bar) + " " + _toDisplayString(_foo_bar))
-  })
-  return n0
-}"
-`;
-
-exports[`compiler: expression > duplicate expressions 2`] = `
-"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template(" ")
-
-export function render(_ctx) {
-  const n0 = t0()
-  _renderEffect(() => {
-    const _msg_replace_1_2 = _ctx.msg.replace('1', '2')
-    _setText(n0, _toDisplayString(_msg_replace_1_2) + " " + _toDisplayString(_msg_replace_1_2))
-  })
-  return n0
-}"
-`;
-
-exports[`compiler: expression > duplicate expressions 3`] = `
-"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template(" ")
-
-export function render(_ctx) {
-  const n0 = t0()
-  _renderEffect(() => {
-    const _msg = _ctx.msg
-    _setText(n0, _toDisplayString(_msg.replace('1', '2')) + " " + _toDisplayString(_msg.replace('1', '3')))
-  })
-  return n0
-}"
-`;
-
 exports[`compiler: expression > empty interpolation 1`] = `
 "import { template as _template } from 'vue';
 const t0 = _template(" ")

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

@@ -270,6 +270,38 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`cache multiple access > should cache method call with same arguments 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 _msg_replace_1_2 = _ctx.msg.replace('1', '2')
+    _setProp(n0, "id", _msg_replace_1_2)
+    _setProp(n1, "id", _msg_replace_1_2)
+  })
+  return [n0, n1]
+}"
+`;
+
+exports[`cache multiple access > should not cache method call with different arguments 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 _msg = _ctx.msg
+    _setProp(n0, "id", _msg.replace('1', '2'))
+    _setProp(n1, "id", _msg.replace('1', '3'))
+  })
+  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/expression.spec.ts

@@ -68,28 +68,4 @@ describe('compiler: expression', () => {
 
     expect(code4).toMatchSnapshot()
   })
-
-  test('duplicate expressions', () => {
-    const { code } = compileWithExpression(`
-      {{ foo + bar }}
-      {{ foo + bar }}
-    `)
-    const { code: code2 } = compileWithExpression(`
-      {{ msg.replace('1', '2') }}
-      {{ msg.replace('1', '2') }}
-    `)
-    const { code: code3 } = compileWithExpression(`
-      {{ msg.replace('1', '2') }}
-      {{ msg.replace('1', '3') }}
-    `)
-
-    expect(code).toMatchSnapshot()
-    expect(code).contains(`_foo_bar`)
-
-    expect(code2).toMatchSnapshot()
-    expect(code2).contains(`_msg_replace_1_2`)
-
-    expect(code3).toMatchSnapshot()
-    expect(code3).not.toContain(`_msg_replace`)
-  })
 })

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

@@ -954,4 +954,24 @@ describe('cache multiple access', () => {
     expect(code).matchSnapshot()
     expect(code).not.contains('const _bar = _ctx.bar')
   })
+
+  test('should not cache method call with different arguments', () => {
+    const { code } = compileWithVBind(`
+      <div :id="msg.replace('1', '2')"></div>
+      <div :id="msg.replace('1', '3')"></div>
+    `)
+    expect(code).matchSnapshot()
+    expect(code).contains('const _msg = _ctx.msg')
+    expect(code).not.contains('_ctx.msg.replace')
+  })
+
+  test('should cache method call with same arguments', () => {
+    const { code } = compileWithVBind(`
+      <div :id="msg.replace('1', '2')"></div>
+      <div :id="msg.replace('1', '2')"></div>
+    `)
+    expect(code).matchSnapshot()
+    expect(code).contains(`const _msg_replace_1_2 = _ctx.msg.replace('1', '2')`)
+    expect(code).not.contains('const _msg = _ctx.msg')
+  })
 })

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

@@ -337,10 +337,12 @@ function analyzeExpressions(expressions: SimpleExpressionNode[]) {
             end: id.end!,
           })
         })
-        const grandparent = parentStack[parentStack.length - 2]
-        if (grandparent && isCallExpression(grandparent)) {
+
+        const parentOfMemberExp = parentStack[parentStack.length - 2]
+        if (parentOfMemberExp && isCallExpression(parentOfMemberExp)) {
           return
         }
+
         registerVariable(
           memberExp,
           exp,