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 5a94de5a68b..8907962d81b 100644 --- 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 c92814089ef..66025dd0f01 100644 --- a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts +++ b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts @@ -716,4 +716,12 @@ describe('compiler: expression transform', () => { }) }) }) + + test('expression with type', () => { + const { code } = compile( + `
`, + ) + 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 9ae8897e674..be4b09bb67d 100644 --- 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)) } })