From: zhiyuanzmj <260480378@qq.com>
Date: Fri, 18 Jul 2025 07:03:36 +0000 (+0800)
Subject: fix(compiler-vapor): handle special characters in cached variable names (#13626)
X-Git-Tag: v3.6.0-alpha.2~7
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a5e106d96eb17d73c8673e826393c910d5594a2f;p=thirdparty%2Fvuejs%2Fcore.git

fix(compiler-vapor): handle special characters in cached variable names (#13626)
---

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 dd00e55267..e7a2b30e69 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("<div></div>", true)
diff --git a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
index aca88c791b..963f46ad2a 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(
+      `<Foo @update:model="() => {}" @update-model="() => {}" />`,
+    )
+
+    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 10705a2c79..fb76abaa50 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 aa7edf658f..c70d4a5661 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, '_')