feat(compile-core): handle falsy dynamic args for v-on and v-bind (#2393)

fix #2388

packages/compiler-core/__tests__/transforms/vBind.spec.ts

@@ -71,7 +71,7 @@ describe('compiler: transform v-bind', () => {
     const props = (node.codegenNode as VNodeCall).props as ObjectExpression
     expect(props.properties[0]).toMatchObject({
       key: {
-        content: `id`,
+        content: `id || ""`,
         isStatic: false
       },
       value: {
@@ -130,7 +130,7 @@ describe('compiler: transform v-bind', () => {
     const props = (node.codegenNode as VNodeCall).props as ObjectExpression
     expect(props.properties[0]).toMatchObject({
       key: {
-        content: `_${helperNameMap[CAMELIZE]}(foo)`,
+        content: `_${helperNameMap[CAMELIZE]}(foo || "")`,
         isStatic: false
       },
       value: {
@@ -149,10 +149,12 @@ describe('compiler: transform v-bind', () => {
       key: {
         children: [
           `_${helperNameMap[CAMELIZE]}(`,
+          `(`,
           { content: `_ctx.foo` },
           `(`,
           { content: `_ctx.bar` },
           `)`,
+          `) || ""`,
           `)`
         ]
       },

packages/compiler-core/__tests__/transforms/vOn.spec.ts

@@ -1,14 +1,14 @@
 import {
   baseParse as parse,
-  transform,
-  ElementNode,
-  ObjectExpression,
   CompilerOptions,
+  ElementNode,
   ErrorCodes,
-  NodeTypes,
+  TO_HANDLER_KEY,
-  VNodeCall,
   helperNameMap,
-  CAPITALIZE
+  NodeTypes,
+  ObjectExpression,
+  transform,
+  VNodeCall
 } from '../../src'
 import { transformOn } from '../../src/transforms/vOn'
 import { transformElement } from '../../src/transforms/transformElement'
@@ -76,7 +76,7 @@ describe('compiler: transform v-on', () => {
           key: {
             type: NodeTypes.COMPOUND_EXPRESSION,
             children: [
-              `"on" + _${helperNameMap[CAPITALIZE]}(`,
+              `_${helperNameMap[TO_HANDLER_KEY]}(`,
               { content: `event` },
               `)`
             ]
@@ -101,7 +101,7 @@ describe('compiler: transform v-on', () => {
           key: {
             type: NodeTypes.COMPOUND_EXPRESSION,
             children: [
-              `"on" + _${helperNameMap[CAPITALIZE]}(`,
+              `_${helperNameMap[TO_HANDLER_KEY]}(`,
               { content: `_ctx.event` },
               `)`
             ]
@@ -126,7 +126,7 @@ describe('compiler: transform v-on', () => {
           key: {
             type: NodeTypes.COMPOUND_EXPRESSION,
             children: [
-              `"on" + _${helperNameMap[CAPITALIZE]}(`,
+              `_${helperNameMap[TO_HANDLER_KEY]}(`,
               { content: `_ctx.event` },
               `(`,
               { content: `_ctx.foo` },

packages/compiler-core/src/runtimeHelpers.ts

@@ -23,6 +23,7 @@ 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 TO_HANDLER_KEY = Symbol(__DEV__ ? `toHandlerKey` : ``)
 export const SET_BLOCK_TRACKING = Symbol(__DEV__ ? `setBlockTracking` : ``)
 export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
 export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
@@ -56,6 +57,7 @@ export const helperNameMap: any = {
   [TO_HANDLERS]: `toHandlers`,
   [CAMELIZE]: `camelize`,
   [CAPITALIZE]: `capitalize`,
+  [TO_HANDLER_KEY]: `toHandlerKey`,
   [SET_BLOCK_TRACKING]: `setBlockTracking`,
   [PUSH_SCOPE_ID]: `pushScopeId`,
   [POP_SCOPE_ID]: `popScopeId`,

packages/compiler-core/src/transforms/vBind.ts

@@ -10,6 +10,14 @@ import { CAMELIZE } from '../runtimeHelpers'
 export const transformBind: DirectiveTransform = (dir, node, context) => {
   const { exp, modifiers, loc } = dir
   const arg = dir.arg!
+
+  if (arg.type !== NodeTypes.SIMPLE_EXPRESSION) {
+    arg.children.unshift(`(`)
+    arg.children.push(`) || ""`)
+  } else if (!arg.isStatic) {
+    arg.content = `${arg.content} || ""`
+  }
+
   // .prop is no longer necessary due to new patch behavior
   // .sync is replaced by v-model:arg
   if (modifiers.includes('camel')) {

packages/compiler-core/src/transforms/vOn.ts

@@ -1,20 +1,20 @@
 import { DirectiveTransform, DirectiveTransformResult } from '../transform'
 import {
-  DirectiveNode,
+  createCompoundExpression,
   createObjectProperty,
   createSimpleExpression,
+  DirectiveNode,
+  ElementTypes,
   ExpressionNode,
   NodeTypes,
-  createCompoundExpression,
+  SimpleExpressionNode
-  SimpleExpressionNode,
-  ElementTypes
 } from '../ast'
-import { capitalize, camelize } from '@vue/shared'
+import { camelize, toHandlerKey } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import { isMemberExpression, hasScopeRef } from '../utils'
+import { hasScopeRef, isMemberExpression } from '../utils'
-import { CAPITALIZE } from '../runtimeHelpers'
+import { TO_HANDLER_KEY } from '../runtimeHelpers'
 
 const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^\s*function(?:\s+[\w$]+)?\s*\(/
 
@@ -43,11 +43,15 @@ export const transformOn: DirectiveTransform = (
     if (arg.isStatic) {
       const rawName = arg.content
       // for all event listeners, auto convert it to camelCase. See issue #2249
-      const normalizedName = capitalize(camelize(rawName))
+      eventName = createSimpleExpression(
-      eventName = createSimpleExpression(`on${normalizedName}`, true, arg.loc)
+        toHandlerKey(camelize(rawName)),
+        true,
+        arg.loc
+      )
     } else {
+      // #2388
       eventName = createCompoundExpression([
-        `"on" + ${context.helperString(CAPITALIZE)}(`,
+        `${context.helperString(TO_HANDLER_KEY)}(`,
         arg,
         `)`
       ])
@@ -55,7 +59,7 @@ export const transformOn: DirectiveTransform = (
   } else {
     // already a compound expression.
     eventName = arg
-    eventName.children.unshift(`"on" + ${context.helperString(CAPITALIZE)}(`)
+    eventName.children.unshift(`${context.helperString(TO_HANDLER_KEY)}(`)
     eventName.children.push(`)`)
   }
 

packages/compiler-dom/__tests__/transforms/vOn.spec.ts

@@ -1,16 +1,16 @@
 import {
   baseParse as parse,
-  transform,
   CompilerOptions,
   ElementNode,
-  ObjectExpression,
+  TO_HANDLER_KEY,
-  NodeTypes,
-  VNodeCall,
   helperNameMap,
-  CAPITALIZE
+  NodeTypes,
+  ObjectExpression,
+  transform,
+  VNodeCall
 } from '@vue/compiler-core'
 import { transformOn } from '../../src/transforms/vOn'
-import { V_ON_WITH_MODIFIERS, V_ON_WITH_KEYS } from '../../src/runtimeHelpers'
+import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../../src/runtimeHelpers'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
 import { transformExpression } from '../../../compiler-core/src/transforms/transformExpression'
 import { genFlagText } from '../../../compiler-core/__tests__/testUtils'
@@ -195,14 +195,14 @@ describe('compiler-dom: transform v-on', () => {
     const {
       props: [prop2]
     } = parseWithVOn(`<div @[event].right="test"/>`)
-    // ("on" + (event)).toLowerCase() === "onclick" ? "onContextmenu" : ("on" + (event))
+    // (_toHandlerKey(event)).toLowerCase() === "onclick" ? "onContextmenu" : (_toHandlerKey(event))
     expect(prop2.key).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
       children: [
         `(`,
         {
           children: [
-            `"on" + _${helperNameMap[CAPITALIZE]}(`,
+            `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
             `)`
           ]
@@ -210,7 +210,7 @@ describe('compiler-dom: transform v-on', () => {
         `) === "onClick" ? "onContextmenu" : (`,
         {
           children: [
-            `"on" + _${helperNameMap[CAPITALIZE]}(`,
+            `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
             `)`
           ]
@@ -233,14 +233,14 @@ describe('compiler-dom: transform v-on', () => {
     const {
       props: [prop2]
     } = parseWithVOn(`<div @[event].middle="test"/>`)
-    // ("on" + (event)).toLowerCase() === "onclick" ? "onMouseup" : ("on" + (event))
+    // (_eventNaming(event)).toLowerCase() === "onclick" ? "onMouseup" : (_eventNaming(event))
     expect(prop2.key).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
       children: [
         `(`,
         {
           children: [
-            `"on" + _${helperNameMap[CAPITALIZE]}(`,
+            `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
             `)`
           ]
@@ -248,7 +248,7 @@ describe('compiler-dom: transform v-on', () => {
         `) === "onClick" ? "onMouseup" : (`,
         {
           children: [
-            `"on" + _${helperNameMap[CAPITALIZE]}(`,
+            `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
             `)`
           ]

packages/compiler-ssr/__tests__/ssrElement.spec.ts

@@ -161,7 +161,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
         "\`<div\${
-            _ssrRenderAttrs({ [_ctx.key]: _ctx.value })
+            _ssrRenderAttrs({ [_ctx.key || \\"\\"]: _ctx.value })
           }></div>\`"
       `)
 
@@ -170,7 +170,7 @@ describe('ssr: element', () => {
         "\`<div\${
             _ssrRenderAttrs({
               class: \\"foo\\",
-              [_ctx.key]: _ctx.value
+              [_ctx.key || \\"\\"]: _ctx.value
             })
           }></div>\`"
       `)
@@ -180,7 +180,7 @@ describe('ssr: element', () => {
         "\`<div\${
             _ssrRenderAttrs({
               id: _ctx.id,
-              [_ctx.key]: _ctx.value
+              [_ctx.key || \\"\\"]: _ctx.value
             })
           }></div>\`"
       `)
@@ -212,7 +212,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
         "\`<div\${
-            _ssrRenderAttrs(_mergeProps({ [_ctx.key]: _ctx.id }, _ctx.obj))
+            _ssrRenderAttrs(_mergeProps({ [_ctx.key || \\"\\"]: _ctx.id }, _ctx.obj))
           }></div>\`"
       `)
 

packages/runtime-core/src/apiLifecycle.ts

@@ -1,15 +1,15 @@
 import {
   ComponentInternalInstance,
-  LifecycleHooks,
   currentInstance,
-  setCurrentInstance,
+  isInSSRComponentSetup,
-  isInSSRComponentSetup
+  LifecycleHooks,
+  setCurrentInstance
 } from './component'
 import { ComponentPublicInstance } from './componentPublicInstance'
 import { callWithAsyncErrorHandling, ErrorTypeStrings } from './errorHandling'
 import { warn } from './warning'
-import { capitalize } from '@vue/shared'
+import { toHandlerKey } from '@vue/shared'
-import { pauseTracking, resetTracking, DebuggerEvent } from '@vue/reactivity'
+import { DebuggerEvent, pauseTracking, resetTracking } from '@vue/reactivity'
 
 export { onActivated, onDeactivated } from './components/KeepAlive'
 
@@ -49,9 +49,7 @@ export function injectHook(
     }
     return wrappedHook
   } else if (__DEV__) {
-    const apiName = `on${capitalize(
+    const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ''))
-      ErrorTypeStrings[type].replace(/ hook$/, '')
-    )}`
     warn(
       `${apiName} is called when there is no active component instance to be ` +
         `associated with. ` +

packages/runtime-core/src/componentEmits.ts

@@ -1,13 +1,13 @@
 import {
-  isArray,
+  camelize,
-  isOn,
-  hasOwn,
   EMPTY_OBJ,
-  capitalize,
+  toHandlerKey,
-  hyphenate,
-  isFunction,
   extend,
-  camelize
+  hasOwn,
+  hyphenate,
+  isArray,
+  isFunction,
+  isOn
 } from '@vue/shared'
 import {
   ComponentInternalInstance,
@@ -56,10 +56,10 @@ export function emit(
     } = instance
     if (emitsOptions) {
       if (!(event in emitsOptions)) {
-        if (!propsOptions || !(`on` + capitalize(event) in propsOptions)) {
+        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
           warn(
             `Component emitted event "${event}" but it is neither declared in ` +
-              `the emits option nor as an "on${capitalize(event)}" prop.`
+              `the emits option nor as an "${toHandlerKey(event)}" prop.`
           )
         }
       } else {
@@ -82,7 +82,7 @@ export function emit(
 
   if (__DEV__) {
     const lowerCaseEvent = event.toLowerCase()
-    if (lowerCaseEvent !== event && props[`on` + capitalize(lowerCaseEvent)]) {
+    if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
       warn(
         `Event "${lowerCaseEvent}" is emitted in component ` +
           `${formatComponentName(
@@ -97,12 +97,12 @@ export function emit(
   }
 
   // convert handler name to camelCase. See issue #2249
-  let handlerName = `on${capitalize(camelize(event))}`
+  let handlerName = toHandlerKey(camelize(event))
   let handler = props[handlerName]
   // for v-model update:xxx events, also trigger kebab-case equivalent
   // for props passed via kebab-case
   if (!handler && event.startsWith('update:')) {
-    handlerName = `on${capitalize(hyphenate(event))}`
+    handlerName = toHandlerKey(hyphenate(event))
     handler = props[handlerName]
   }
   if (!handler) {

packages/runtime-core/src/helpers/toHandlers.ts

@@ -1,4 +1,4 @@
-import { isObject, capitalize } from '@vue/shared'
+import { toHandlerKey, isObject } from '@vue/shared'
 import { warn } from '../warning'
 
 /**
@@ -12,7 +12,7 @@ export function toHandlers(obj: Record<string, any>): Record<string, any> {
     return ret
   }
   for (const key in obj) {
-    ret[`on${capitalize(key)}`] = obj[key]
+    ret[toHandlerKey(key)] = obj[key]
   }
   return ret
 }

packages/runtime-core/src/index.ts

@@ -240,7 +240,12 @@ export {
   createCommentVNode,
   createStaticVNode
 } from './vnode'
-export { toDisplayString, camelize, capitalize } from '@vue/shared'
+export {
+  toDisplayString,
+  camelize,
+  capitalize,
+  toHandlerKey
+} from '@vue/shared'
 
 // For test-utils
 export { transformVNodeArgs } from './vnode'

packages/runtime-core/src/renderer.ts

@@ -1070,6 +1070,7 @@ function baseCreateRenderer(
   ) => {
     if (oldProps !== newProps) {
       for (const key in newProps) {
+        // empty string is not valid prop
         if (isReservedProp(key)) continue
         const next = newProps[key]
         const prev = oldProps[key]

packages/runtime-core/src/vnode.ts

@@ -644,7 +644,7 @@ export function mergeProps(...args: (Data & VNodeProps)[]) {
             ? [].concat(existing as any, toMerge[key] as any)
             : incoming
         }
-      } else {
+      } else if (key !== '') {
         ret[key] = toMerge[key]
       }
     }

packages/server-renderer/src/helpers/ssrRenderAttrs.ts

@@ -10,7 +10,8 @@ import {
   makeMap
 } from '@vue/shared'
 
-const shouldIgnoreProp = makeMap(`key,ref,innerHTML,textContent`)
+// leading comma for empty string ""
+const shouldIgnoreProp = makeMap(`,key,ref,innerHTML,textContent`)
 
 export function ssrRenderAttrs(
   props: Record<string, unknown>,

packages/shared/src/index.ts

@@ -94,7 +94,8 @@ export const isIntegerKey = (key: unknown) =>
   '' + parseInt(key, 10) === key
 
 export const isReservedProp = /*#__PURE__*/ makeMap(
-  'key,ref,' +
+  // the leading comma is intentional so empty string "" is also included
+  ',key,ref,' +
     'onVnodeBeforeMount,onVnodeMounted,' +
     'onVnodeBeforeUpdate,onVnodeUpdated,' +
     'onVnodeBeforeUnmount,onVnodeUnmounted'
@@ -122,19 +123,22 @@ const hyphenateRE = /\B([A-Z])/g
 /**
  * @private
  */
-export const hyphenate = cacheStringFunction(
+export const hyphenate = cacheStringFunction((str: string) =>
-  (str: string): string => {
+  str.replace(hyphenateRE, '-$1').toLowerCase()
-    return str.replace(hyphenateRE, '-$1').toLowerCase()
-  }
 )
 
 /**
  * @private
  */
 export const capitalize = cacheStringFunction(
-  (str: string): string => {
+  (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
-    return str.charAt(0).toUpperCase() + str.slice(1)
+)
-  }
+
+/**
+ * @private
+ */
+export const toHandlerKey = cacheStringFunction(
+  (str: string) => (str ? `on${capitalize(str)}` : ``)
 )
 
 // compare whether a value has changed, accounting for NaN.