diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap index 8423cb2ed55..52c47030a80 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap @@ -145,7 +145,7 @@ _delegateEvents("click") export function render(_ctx, $props, $emit, $attrs, $slots) { const n0 = t0() - n0.$evtclick = e => _ctx.handleClick(e) + n0.$evtclick = e => (_ctx.foo[_ctx.handleClick] as any)(e) return n0 }" `; diff --git a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts index 414ea0e298b..3402f577f06 100644 --- a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts @@ -685,7 +685,7 @@ describe('v-on', () => { test('expression with type', () => { const { code } = compileWithVOn( - `
`, + `
`, { bindingMetadata: { handleClick: BindingTypes.SETUP_CONST, @@ -693,7 +693,9 @@ describe('v-on', () => { }, ) expect(code).matchSnapshot() - expect(code).include('n0.$evtclick = e => _ctx.handleClick(e)') + expect(code).include( + 'n0.$evtclick = e => (_ctx.foo[_ctx.handleClick] as any)(e)', + ) }) test('component event with special characters', () => { diff --git a/packages/compiler-vapor/src/generators/event.ts b/packages/compiler-vapor/src/generators/event.ts index cfb47b61184..076d9435706 100644 --- a/packages/compiler-vapor/src/generators/event.ts +++ b/packages/compiler-vapor/src/generators/event.ts @@ -1,6 +1,7 @@ import { BindingTypes, type SimpleExpressionNode, + TS_NODE_TYPES, isFnExpression, isMemberExpression, } from '@vue/compiler-dom' @@ -126,7 +127,14 @@ export function genEventHandler( // non constant, wrap with invocation as `e => foo.bar(e)` // when passing as component handler, access is always dynamic so we // can skip this - handlerExp = [`e => `, ...handlerExp, `(e)`] + const isTSNode = value.ast && TS_NODE_TYPES.includes(value.ast.type) + handlerExp = [ + `e => `, + isTSNode ? '(' : '', + ...handlerExp, + isTSNode ? ')' : '', + `(e)`, + ] } } else if (isFnExpression(value, context.options)) { // Fn expression: @click="e => foo(e)" diff --git a/packages/compiler-vapor/src/generators/expression.ts b/packages/compiler-vapor/src/generators/expression.ts index c70d4a56613..2faaa13ff5d 100644 --- a/packages/compiler-vapor/src/generators/expression.ts +++ b/packages/compiler-vapor/src/generators/expression.ts @@ -10,7 +10,6 @@ import { NewlineType, type SimpleExpressionNode, type SourceLocation, - TS_NODE_TYPES, advancePositionWithClone, createSimpleExpression, isInDestructureAssignment, @@ -64,7 +63,6 @@ export function genExpression( let hasMemberExpression = false if (ids.length) { const [frag, push] = buildCodeFragment() - const isTSNode = ast && TS_NODE_TYPES.includes(ast.type) ids .sort((a, b) => a.start! - b.start!) .forEach((id, i) => { @@ -73,11 +71,8 @@ export function genExpression( const end = id.end! - 1 const last = ids[i - 1] - if (!(isTSNode && i === 0)) { - const leadingText = content.slice(last ? last.end! - 1 : 0, start) - if (leadingText.length) push([leadingText, NewlineType.Unknown]) - } - + const leadingText = content.slice(last ? last.end! - 1 : 0, start) + if (leadingText.length) push([leadingText, NewlineType.Unknown]) const source = content.slice(start, end) const parentStack = parentStackMap.get(id)! const parent = parentStack[parentStack.length - 1] @@ -103,7 +98,7 @@ export function genExpression( ), ) - if (i === ids.length - 1 && end < content.length && !isTSNode) { + if (i === ids.length - 1 && end < content.length) { push([content.slice(end), NewlineType.Unknown]) } })