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 dd00e552675..e7a2b30e69c 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap @@ -12,6 +12,21 @@ export function render(_ctx) { }" `; +exports[`v-on > component event with special characters 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; + +export function render(_ctx) { + const _component_Foo = _resolveComponent("Foo") + const _on_update_model = () => {} + const _on_update_model1 = () => {} + const n0 = _createComponentWithFallback(_component_Foo, { + "onUpdate:model": () => _on_update_model, + "onUpdate-model": () => _on_update_model1 + }, null, true) + return n0 +}" +`; + exports[`v-on > dynamic arg 1`] = ` "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue'; const t0 = _template("
", true) diff --git a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts index aca88c791b8..963f46ad2a3 100644 --- a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts @@ -695,4 +695,16 @@ describe('v-on', () => { expect(code).matchSnapshot() expect(code).include('n0.$evtclick = e => _ctx.handleClick(e)') }) + + test('component event with special characters', () => { + const { code } = compileWithVOn( + ``, + ) + + expect(code).matchSnapshot() + expect(code).contains('const _on_update_model = () => {}') + expect(code).contains('const _on_update_model1 = () => {}') + expect(code).contains('"onUpdate:model": () => _on_update_model') + expect(code).contains('"onUpdate-model": () => _on_update_model1') + }) }) diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts index 10705a2c795..fb76abaa505 100644 --- a/packages/compiler-vapor/src/generators/component.ts +++ b/packages/compiler-vapor/src/generators/component.ts @@ -26,7 +26,7 @@ import { genCall, genMulti, } from './utils' -import { genExpression } from './expression' +import { genExpression, genVarName } from './expression' import { genPropKey, genPropValue } from './prop' import { type SimpleExpressionNode, @@ -102,6 +102,7 @@ export function genCreateComponent( function getUniqueHandlerName(context: CodegenContext, name: string): string { const { seenInlineHandlerNames } = context + name = genVarName(name) const count = seenInlineHandlerNames[name] || 0 seenInlineHandlerNames[name] = count + 1 return count === 0 ? name : `${name}${count}` diff --git a/packages/compiler-vapor/src/generators/expression.ts b/packages/compiler-vapor/src/generators/expression.ts index aa7edf658f5..c70d4a56613 100644 --- a/packages/compiler-vapor/src/generators/expression.ts +++ b/packages/compiler-vapor/src/generators/expression.ts @@ -647,7 +647,7 @@ function parseExp(context: CodegenContext, content: string): Node { return parseExpression(`(${content})`, options) } -function genVarName(exp: string): string { +export function genVarName(exp: string): string { return `${exp .replace(/[^a-zA-Z0-9]/g, '_') .replace(/_+/g, '_')