fix: handle nullish dynamic event name with a modifier

Author: linzhe141

packages/compiler-core/src/runtimeHelpers.ts

@@ -63,6 +63,9 @@ export const CAPITALIZE: unique symbol = Symbol(__DEV__ ? `capitalize` : ``)
 export const TO_HANDLER_KEY: unique symbol = Symbol(
   __DEV__ ? `toHandlerKey` : ``,
 )
+export const CHECK_DYNAMIC_EVENT: unique symbol = Symbol(
+  __DEV__ ? `checkDynamicEvent` : ``,
+)
 export const SET_BLOCK_TRACKING: unique symbol = Symbol(
   __DEV__ ? `setBlockTracking` : ``,
 )
@@ -115,6 +118,7 @@ export const helperNameMap: Record<symbol, string> = {
   [CAMELIZE]: `camelize`,
   [CAPITALIZE]: `capitalize`,
   [TO_HANDLER_KEY]: `toHandlerKey`,
+  [CHECK_DYNAMIC_EVENT]: `checkDynamicEvent`,
   [SET_BLOCK_TRACKING]: `setBlockTracking`,
   [PUSH_SCOPE_ID]: `pushScopeId`,
   [POP_SCOPE_ID]: `popScopeId`,

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

@@ -1,4 +1,5 @@
 import {
+  CHECK_DYNAMIC_EVENT,
   CompilerDeprecationTypes,
   type DirectiveTransform,
   type ExpressionNode,
@@ -144,7 +145,11 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
       const modifierPostfix = eventOptionModifiers.map(capitalize).join('')
       key = isStaticExp(key)
         ? createSimpleExpression(`${key.content}${modifierPostfix}`, true)
-        : createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`])
+        : createCompoundExpression([
+            `${context.helperString(CHECK_DYNAMIC_EVENT)}(`,
+            key,
+            `,"${modifierPostfix}")`,
+          ])
     }
 
     return {

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

@@ -23,3 +23,11 @@ export function toHandlers(
   }
   return ret
 }
+
+export function checkDynamicEvent(
+  eventName: string,
+  modifierPostfix: string,
+): string {
+  if (eventName != null && eventName !== '') return eventName + modifierPostfix
+  return ''
+}

packages/runtime-core/src/index.ts

@@ -358,7 +358,7 @@ export {
   withScopeId,
 } from './componentRenderContext'
 export { renderList } from './helpers/renderList'
-export { toHandlers } from './helpers/toHandlers'
+export { toHandlers, checkDynamicEvent } from './helpers/toHandlers'
 export { renderSlot } from './helpers/renderSlot'
 export { createSlots } from './helpers/createSlots'
 export { withMemo, isMemoSame } from './helpers/withMemo'