fix(compiler-vapor): handle TSNonNullExpression correctly in expression caching

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
 }"
@@ -254,6 +254,22 @@ export function render(_ctx) {
 }"
 `;
 
+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,7 @@ 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', () => {
@@ -864,6 +864,17 @@ describe('cache multiple access', () => {
     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', () => {
     const { code } = compileWithVBind(`
         <div :style="{color}" />

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

@@ -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 ''
   }