diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts index 8577622410a..e791cb6493a 100644 --- 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 cffe9b66449..c577d52d4cf 100644 --- 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 7ba5142f010..c8f52ada7a0 100644 --- 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 91c173459fc..0119f11591f 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -94,6 +94,9 @@ const cacheStringFunction = 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 bd19cdd0779..2c9b6ab48c7 100644 --- 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 ? ''