fix(v-on): capitalize dynamic event names

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

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

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'

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)

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
     ? ''