fix(compiler-sfc): properly handle assignment expressions with local vars in inline mode

packages/compiler-core/src/transforms/transformExpression.ts

@@ -89,6 +89,8 @@ interface PrefixMeta {
   scopeIds?: Set<string>
 }
 
+type QualifiedId = Identifier & PrefixMeta
+
 // Important: since this function uses Node.js only dependencies, it should
 // always be used with a leading !__BROWSER__ check so that it can be
 // tree-shaken from the browser build.
@@ -99,7 +101,8 @@ export function processExpression(
   // function params
   asParams = false,
   // v-on handler values may contain multiple statements
-  asRawStatements = false
+  asRawStatements = false,
+  localVars: QualifiedId[] = []
 ): ExpressionNode {
   if (__BROWSER__) {
     if (__DEV__) {
@@ -127,7 +130,10 @@ export function processExpression(
       const isDestructureAssignment =
         parent && isInDestructureAssignment(parent, parentStack)
 
-      if (type === BindingTypes.SETUP_CONST) {
+      if (
+        type === BindingTypes.SETUP_CONST ||
+        localVars.find(v => v.name === raw)
+      ) {
         return raw
       } else if (type === BindingTypes.SETUP_REF) {
         return `${raw}.value`
@@ -149,7 +155,13 @@ export function processExpression(
           const { right: rVal, operator } = parent as AssignmentExpression
           const rExp = rawExp.slice(rVal.start! - 1, rVal.end! - 1)
           const rExpString = stringifyExpression(
-            processExpression(createSimpleExpression(rExp, false), context)
+            processExpression(
+              createSimpleExpression(rExp, false),
+              context,
+              false,
+              false,
+              localIds
+            )
           )
           return `${context.helperString(IS_REF)}(${raw})${
             context.isTS ? ` //@ts-ignore\n` : ``
@@ -190,6 +202,7 @@ export function processExpression(
         return `$${type}.${raw}`
       }
     }
+
     // fallback to ctx
     return `_ctx.${raw}`
   }
@@ -245,15 +258,16 @@ export function processExpression(
     return node
   }
 
-  type QualifiedId = Identifier & PrefixMeta
-
   const ids: QualifiedId[] = []
+  const localIds: QualifiedId[] = []
   const parentStack: Node[] = []
   const knownIds: Record<string, number> = Object.create(context.identifiers)
 
   walkIdentifiers(
     ast,
     (node, parent, _, isReferenced, isLocal) => {
+      if (isLocal) localIds.push(node as QualifiedId)
+
       if (isStaticPropertyKey(node, parent!)) {
         return
       }

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -506,7 +506,7 @@ return (_ctx, _push, _parent, _attrs) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode template assignment expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
 
@@ -534,6 +534,12 @@ return (_ctx, _cache) => {
     }),
     _createElementVNode(\\"div\\", {
       onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
+    }),
+    _createElementVNode(\\"div\\", {
+      onClick: _cache[5] || (_cache[5] = () => {
+              let a = '' + _unref(lett)           
+              _isRef(v) ? v.value = a : v = a
+           })
     })
   ], 64 /* STABLE_FRAGMENT */))
 }

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -517,6 +517,10 @@ defineExpose({ foo: 123 })
           <div @click="lett = count"/>
           <div @click="v += 1"/>
           <div @click="v -= 1"/>
+          <div @click="() => {
+              let a = '' + lett           
+              v = a
+           }"/>
         </template>
         `,
         { inlineTemplate: true }
@@ -531,6 +535,7 @@ defineExpose({ foo: 123 })
       )
       expect(content).toMatch(`_isRef(v) ? v.value += 1 : v += 1`)
       expect(content).toMatch(`_isRef(v) ? v.value -= 1 : v -= 1`)
+      expect(content).toMatch(`_isRef(v) ? v.value = a : v = a`)
       assertCode(content)
     })