fix(compiler-vapor): typed expressions should be wrapped in parentheses

Author: zhiyuanzmj

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

@@ -123,6 +123,18 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 }"
 `;
 
+exports[`v-on > expression with type 1`] = `
+"import { delegateEvents as _delegateEvents, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
+_delegateEvents("click")
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+  const n0 = t0()
+  n0.$evtclick = e => (_ctx.handleClick as any)(e)
+  return n0
+}"
+`;
+
 exports[`v-on > function expression w/ prefixIdentifiers: true 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)

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

@@ -682,4 +682,14 @@ describe('v-on', () => {
       '_delegate(n0, "click", _withModifiers(e => _ctx.test(e), ["stop"]))',
     )
   })
+
+  test('expression with type', () => {
+    const { code } = compileWithVOn(`<div @click="handleClick as any"></div>`, {
+      bindingMetadata: {
+        handleClick: BindingTypes.SETUP_CONST,
+      },
+    })
+    expect(code).matchSnapshot()
+    expect(code).include('n0.$evtclick = e => (_ctx.handleClick as any)(e)')
+  })
 })

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

@@ -10,6 +10,7 @@ import {
   NewlineType,
   type SimpleExpressionNode,
   type SourceLocation,
+  TS_NODE_TYPES,
   advancePositionWithClone,
   createSimpleExpression,
   isInDestructureAssignment,
@@ -48,6 +49,7 @@ export function genExpression(
     return genIdentifier(content, context, loc, assignment)
   }
 
+  const shouldWrap = ast && TS_NODE_TYPES.includes(ast.type)
   const ids: Identifier[] = []
   const parentStackMap = new Map<Identifier, Node[]>()
   const parentStack: Node[] = []
@@ -85,6 +87,7 @@ export function genExpression(
             parent.type === 'OptionalMemberExpression')
 
         push(
+          shouldWrap ? '(' : '',
           ...genIdentifier(
             source,
             context,
@@ -103,6 +106,7 @@ export function genExpression(
         if (i === ids.length - 1 && end < content.length) {
           push([content.slice(end), NewlineType.Unknown])
         }
+        push(shouldWrap ? ')' : '')
       })
 
     if (assignment && hasMemberExpression) {