fix(compiler-core): correctly handle ts type assertions in expressions (#13397)

similar to #13395

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index 5a94de5a68b9b859bf955fcb7dcaff46e03f45c4..8907962d81bcc5c05c6220e8a1d499739cf0fedc 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -14,6 +14,16 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
 }"
 `;
 
+exports[`compiler: expression transform > expression with type 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: _ctx.handleClick
+  }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
 exports[`compiler: expression transform > should allow leak of var declarations in for loop 1`] = `
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 

diff --git a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
index 2f1e6eb64122c29ed7408c345dccb70322e6b9ff..47627ffa8d7c257be141ac21300b7e81216175a0 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -754,4 +754,12 @@ describe('compiler: expression transform', () => {
       expect(code).toMatch(`_ctx.bar`)
     })
   })
+
+  test('expression with type', () => {
+    const { code } = compile(
+      `<div @click="(<number>handleClick as any)"></div>`,
+    )
+    expect(code).toMatch(`onClick: _ctx.handleClick`)
+    expect(code).toMatchSnapshot()
+  })
 })

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 9ae8897e674866e821dc75d56d608fd5a0ec29cb..be4b09bb67d32d25568d3deb22f871401e02a620 100644 (file)
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -18,6 +18,7 @@ import {
   createSimpleExpression,
 } from '../ast'
 import {
+  TS_NODE_TYPES,
   isInDestructureAssignment,
   isInNewExpression,
   isStaticProperty,
@@ -347,15 +348,18 @@ export function processExpression(
   // an ExpressionNode has the `.children` property, it will be used instead of
   // `.content`.
   const children: CompoundExpressionNode['children'] = []
+  const isTSNode = TS_NODE_TYPES.includes(ast.type)
   ids.sort((a, b) => a.start - b.start)
   ids.forEach((id, i) => {
     // range is offset by -1 due to the wrapping parens when parsed
     const start = id.start - 1
     const end = id.end - 1
     const last = ids[i - 1]
-    const leadingText = rawExp.slice(last ? last.end - 1 : 0, start)
-    if (leadingText.length || id.prefix) {
-      children.push(leadingText + (id.prefix || ``))
+    if (!(isTSNode && i === 0)) {
+      const leadingText = rawExp.slice(last ? last.end - 1 : 0, start)
+      if (leadingText.length || id.prefix) {
+        children.push(leadingText + (id.prefix || ``))
+      }
     }
     const source = rawExp.slice(start, end)
     children.push(
@@ -372,7 +376,7 @@ export function processExpression(
           : ConstantTypes.NOT_CONSTANT,
       ),
     )
-    if (i === ids.length - 1 && end < rawExp.length) {
+    if (i === ids.length - 1 && end < rawExp.length && !isTSNode) {
       children.push(rawExp.slice(end))
     }
   })