fix(compiler-sfc): fix template expression assignment codegen for script setup let...

fix #3625

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 4ebfbbe761307b5e8d6041c5561383cf034676c2..71e4b76cb18f6d64b9e16f26e902f77e91ac6b7e 100644 (file)
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -143,14 +143,14 @@ export function processExpression(
           // let is a local non-ref value, and we need to replicate the
           // right hand side value.
           // x = y --> isRef(x) ? x.value = y : x = y
-          const rVal = (parent as AssignmentExpression).right
+          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)
           )
           return `${context.helperString(IS_REF)}(${raw})${
             context.isTS ? ` //@ts-ignore\n` : ``
-          } ? ${raw}.value = ${rExpString} : ${raw}`
+          } ? ${raw}.value ${operator} ${rExpString} : ${raw}`
         } else if (isUpdateArg) {
           // make id replace parent in the code range so the raw update operator
           // is removed

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 9887d8943d2f7d7675a8fec06354205eb5b61321..cb8e5ed28054942ea33924b6328c2831e6cf24fe 100644 (file)
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -361,6 +361,7 @@ export default {
         const count = ref(0)
         const maybe = foo()
         let lett = 1
+        let v = ref(1)
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createBlock(_Fragment, null, [
@@ -372,6 +373,12 @@ return (_ctx, _cache) => {
     }),
     _createVNode(\\"div\\", {
       onClick: _cache[3] || (_cache[3] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
+    }),
+    _createVNode(\\"div\\", {
+      onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value += 1 : v += 1))
+    }),
+    _createVNode(\\"div\\", {
+      onClick: _cache[5] || (_cache[5] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
     })
   ], 64 /* STABLE_FRAGMENT */))
 }

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index de578dd90fd6014cc41fc3768efebdc1c3203062..54832fcb7d742135a4411b7b4220a0aa81fa1f20 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -300,11 +300,14 @@ const myEmit = defineEmit(['foo', 'bar'])
         const count = ref(0)
         const maybe = foo()
         let lett = 1
+        let v = ref(1)
         </script>
         <template>
           <div @click="count = 1"/>
           <div @click="maybe = count"/>
           <div @click="lett = count"/>
+          <div @click="v += 1"/>
+          <div @click="v -= 1"/>
         </template>
         `,
         { inlineTemplate: true }
@@ -317,6 +320,8 @@ const myEmit = defineEmit(['foo', 'bar'])
       expect(content).toMatch(
         `_isRef(lett) ? lett.value = count.value : lett = count.value`
       )
+      expect(content).toMatch(`_isRef(v) ? v.value += 1 : v += 1`)
+      expect(content).toMatch(`_isRef(v) ? v.value -= 1 : v -= 1`)
       assertCode(content)
     })