fix(compiler-core): generate TS-cast safe assignment code for v-model

fix #4655

packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`compiler: transform v-model compound expression (with prefixIdentifiers
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"input\\", {
     modelValue: _ctx.model[_ctx.index],
-    \\"onUpdate:modelValue\\": $event => (_ctx.model[_ctx.index] = $event)
+    \\"onUpdate:modelValue\\": $event => ((_ctx.model[_ctx.index]) = $event)
   }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
 }"
 `;
@@ -20,7 +20,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"input\\", {
       modelValue: model[index],
-      \\"onUpdate:modelValue\\": $event => (model[index] = $event)
+      \\"onUpdate:modelValue\\": $event => ((model[index]) = $event)
     }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
   }
 }"
@@ -39,11 +39,11 @@ return function render(_ctx, _cache) {
 .
 foo 
 ,
-      \\"onUpdate:modelValue\\": $event => (
+      \\"onUpdate:modelValue\\": $event => ((
  model
 .
 foo 
- = $event)
+) = $event)
     }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
   }
 }"
@@ -55,7 +55,7 @@ exports[`compiler: transform v-model simple expression (with prefixIdentifiers)
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"input\\", {
     modelValue: _ctx.model,
-    \\"onUpdate:modelValue\\": $event => (_ctx.model = $event)
+    \\"onUpdate:modelValue\\": $event => ((_ctx.model) = $event)
   }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
 }"
 `;
@@ -69,7 +69,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"input\\", {
       modelValue: model,
-      \\"onUpdate:modelValue\\": $event => (model = $event)
+      \\"onUpdate:modelValue\\": $event => ((model) = $event)
     }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
   }
 }"
@@ -84,7 +84,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"input\\", {
       value: model,
-      \\"onUpdate:value\\": $event => (model = $event)
+      \\"onUpdate:value\\": $event => ((model) = $event)
     }, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"value\\", \\"onUpdate:value\\"]))
   }
 }"
@@ -96,7 +96,7 @@ exports[`compiler: transform v-model with dynamic argument (with prefixIdentifie
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
     [_ctx.value]: _ctx.model,
-    [\\"onUpdate:\\" + _ctx.value]: $event => (_ctx.model = $event)
+    [\\"onUpdate:\\" + _ctx.value]: $event => ((_ctx.model) = $event)
   }), null, 16 /* FULL_PROPS */))
 }"
 `;
@@ -110,7 +110,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
       [value]: model,
-      [\\"onUpdate:\\" + value]: $event => (model = $event)
+      [\\"onUpdate:\\" + value]: $event => ((model) = $event)
     }), null, 16 /* FULL_PROPS */))
   }
 }"

packages/compiler-core/__tests__/transforms/vModel.spec.ts

@@ -65,12 +65,12 @@ describe('compiler: transform v-model', () => {
       },
       value: {
         children: [
-          '$event => (',
+          '$event => ((',
           {
             content: 'model',
             isStatic: false
           },
-          ' = $event)'
+          ') = $event)'
         ]
       }
     })
@@ -104,12 +104,12 @@ describe('compiler: transform v-model', () => {
       },
       value: {
         children: [
-          '$event => (',
+          '$event => ((',
           {
             content: '_ctx.model',
             isStatic: false
           },
-          ' = $event)'
+          ') = $event)'
         ]
       }
     })
@@ -142,12 +142,12 @@ describe('compiler: transform v-model', () => {
       },
       value: {
         children: [
-          '$event => (',
+          '$event => ((',
           {
             content: '\n model\n.\nfoo \n',
             isStatic: false
           },
-          ' = $event)'
+          ') = $event)'
         ]
       }
     })
@@ -179,12 +179,12 @@ describe('compiler: transform v-model', () => {
       },
       value: {
         children: [
-          '$event => (',
+          '$event => ((',
           {
             content: 'model[index]',
             isStatic: false
           },
-          ' = $event)'
+          ') = $event)'
         ]
       }
     })
@@ -228,7 +228,7 @@ describe('compiler: transform v-model', () => {
       },
       value: {
         children: [
-          '$event => (',
+          '$event => ((',
           {
             children: [
               {
@@ -243,7 +243,7 @@ describe('compiler: transform v-model', () => {
               ']'
             ]
           },
-          ' = $event)'
+          ') = $event)'
         ]
       }
     })
@@ -274,12 +274,12 @@ describe('compiler: transform v-model', () => {
       },
       value: {
         children: [
-          '$event => (',
+          '$event => ((',
           {
             content: 'model',
             isStatic: false
           },
-          ' = $event)'
+          ') = $event)'
         ]
       }
     })
@@ -322,12 +322,12 @@ describe('compiler: transform v-model', () => {
               },
               value: {
                 children: [
-                  '$event => (',
+                  '$event => ((',
                   {
                     content: 'model',
                     isStatic: false
                   },
-                  ' = $event)'
+                  ') = $event)'
                 ]
               }
             }
@@ -376,12 +376,12 @@ describe('compiler: transform v-model', () => {
               },
               value: {
                 children: [
-                  '$event => (',
+                  '$event => ((',
                   {
                     content: '_ctx.model',
                     isStatic: false
                   },
-                  ' = $event)'
+                  ') = $event)'
                 ]
               }
             }

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

@@ -76,9 +76,9 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     if (bindingType === BindingTypes.SETUP_REF) {
       // v-model used on known ref.
       assignmentExp = createCompoundExpression([
-        `${eventArg} => (`,
+        `${eventArg} => ((`,
         createSimpleExpression(rawExp, false, exp.loc),
-        `.value = $event)`
+        `).value = $event)`
       ])
     } else {
       // v-model used on a potentially ref binding in <script setup> inline mode.
@@ -86,16 +86,16 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       const altAssignment =
         bindingType === BindingTypes.SETUP_LET ? `${rawExp} = $event` : `null`
       assignmentExp = createCompoundExpression([
-        `${eventArg} => (${context.helperString(IS_REF)}(${rawExp}) ? `,
+        `${eventArg} => (${context.helperString(IS_REF)}(${rawExp}) ? (`,
         createSimpleExpression(rawExp, false, exp.loc),
-        `.value = $event : ${altAssignment})`
+        `).value = $event : ${altAssignment})`
       ])
     }
   } else {
     assignmentExp = createCompoundExpression([
-      `${eventArg} => (`,
+      `${eventArg} => ((`,
       exp,
-      ` = $event)`
+      `) = $event)`
     ])
   }