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 dd00e552675f58bc4a257d4e27aaee75cf201664..e7a2b30e69cc0655e2c1b19e1016b028fd6aa791 100644 (file)
--- 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 aca88c791b88620fbba1bc91d7ddb99b9e761e61..963f46ad2a3a8a4cdf0fea4924a7f370aa95ed2e 100644 (file)
--- 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 10705a2c79595733a246d47e9bb7aaf6d80fc33f..fb76abaa50571affcbf230be32b9a79d4475e6a2 100644 (file)
--- 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 aa7edf658f5228ae19b14051520423ef96599e1c..c70d4a566135017d89255c5f332440c29c658de5 100644 (file)
--- 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, '_')