fix(v-on): capitalize dynamic event names

diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index 8577622410a771527e7c71b8e4c884a6e7d311bf..e791cb6493a0ea0ddb7fe7e0a0d05c72b4a451f6 100644 (file)
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -22,6 +22,7 @@ export const TO_DISPLAY_STRING = Symbol(__DEV__ ? `toDisplayString` : ``)
 export const MERGE_PROPS = Symbol(__DEV__ ? `mergeProps` : ``)
 export const TO_HANDLERS = Symbol(__DEV__ ? `toHandlers` : ``)
 export const CAMELIZE = Symbol(__DEV__ ? `camelize` : ``)
+export const CAPITALIZE = Symbol(__DEV__ ? `capitalize` : ``)
 export const SET_BLOCK_TRACKING = Symbol(__DEV__ ? `setBlockTracking` : ``)
 export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
 export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
@@ -54,6 +55,7 @@ export const helperNameMap: any = {
   [MERGE_PROPS]: `mergeProps`,
   [TO_HANDLERS]: `toHandlers`,
   [CAMELIZE]: `camelize`,
+  [CAPITALIZE]: `capitalize`,
   [SET_BLOCK_TRACKING]: `setBlockTracking`,
   [PUSH_SCOPE_ID]: `pushScopeId`,
   [POP_SCOPE_ID]: `popScopeId`,

diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index cffe9b664496c35dd66c3249be9579b57627e14b..c577d52d4cf2891749bb993c536297ac057fc9ea 100644 (file)
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -14,6 +14,7 @@ import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
 import { isMemberExpression, hasScopeRef } from '../utils'
+import { CAPITALIZE } from '../runtimeHelpers'
 
 const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function(?:\s+[\w$]+)?\s*\(/
 
@@ -47,12 +48,16 @@ export const transformOn: DirectiveTransform = (
         : capitalize(rawName)
       eventName = createSimpleExpression(`on${normalizedName}`, true, arg.loc)
     } else {
-      eventName = createCompoundExpression([`"on" + (`, arg, `)`])
+      eventName = createCompoundExpression([
+        `"on" + ${context.helperString(CAPITALIZE)}(`,
+        arg,
+        `)`
+      ])
     }
   } else {
     // already a compound expression.
     eventName = arg
-    eventName.children.unshift(`"on" + (`)
+    eventName.children.unshift(`"on" + ${context.helperString(CAPITALIZE)}(`)
     eventName.children.push(`)`)
   }
 

diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 7ba5142f0107fc3331c24ca2fa5ce6bc9058da3c..c8f52ada7a06ab788c5ec5b92d2481fe23944536 100644 (file)
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -225,19 +225,7 @@ export {
   createCommentVNode,
   createStaticVNode
 } from './vnode'
-
-// a bit of ceremony to mark these internal only here because we need to include
-// them in @vue/shared's typings
-import { toDisplayString, camelize } from '@vue/shared'
-/**
- * @private
- */
-const _toDisplayString = toDisplayString
-/**
- * @private
- */
-const _camelize = camelize
-export { _toDisplayString as toDisplayString, _camelize as camelize }
+export { toDisplayString, camelize, capitalize } from '@vue/shared'
 
 // For test-utils
 export { transformVNodeArgs } from './vnode'

diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 91c173459fc7d50c63c16848d182167f394dfdaa..0119f11591f3e497cc56ccfd4f5c2eb0446ab54a 100644 (file)
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -94,6 +94,9 @@ const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
 }
 
 const camelizeRE = /-(\w)/g
+/**
+ * @private
+ */
 export const camelize = cacheStringFunction(
   (str: string): string => {
     return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
@@ -101,12 +104,18 @@ export const camelize = cacheStringFunction(
 )
 
 const hyphenateRE = /\B([A-Z])/g
+/**
+ * @private
+ */
 export const hyphenate = cacheStringFunction(
   (str: string): string => {
     return str.replace(hyphenateRE, '-$1').toLowerCase()
   }
 )
 
+/**
+ * @private
+ */
 export const capitalize = cacheStringFunction(
   (str: string): string => {
     return str.charAt(0).toUpperCase() + str.slice(1)

diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts
index bd19cdd07790f7646b119ac329a5f1832209e4d4..2c9b6ab48c751e793ef24658cfa8e72b74de61f0 100644 (file)
--- a/packages/shared/src/toDisplayString.ts
+++ b/packages/shared/src/toDisplayString.ts
@@ -1,6 +1,9 @@
 import { isArray, isObject, isPlainObject } from './index'
 
-// For converting {{ interpolation }} values to displayed strings.
+/**
+ * For converting {{ interpolation }} values to displayed strings.
+ * @private
+ */
 export const toDisplayString = (val: unknown): string => {
   return val == null
     ? ''