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

Author: zhiyuanzmj

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)

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')
+  })
 })

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}`

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, '_')