Merge d2d2e3d08d into 5f8314cb7f

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

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler-dom: transform v-on > should wrap both for dynamic key event w/ event modifiers 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { toHandlerKey: _toHandlerKey, withDynamicEventModifiers: _withDynamicEventModifiers, createElementVNode: _createElementVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock(_Fragment, null, [
+      _createElementVNode("div", { [_withDynamicEventModifiers(_toHandlerKey(e), "Once")]: test }, null, 16 /* FULL_PROPS */),
+      _createElementVNode("div", { [_withDynamicEventModifiers(_toHandlerKey(e), "Passive")]: test }, null, 16 /* FULL_PROPS */),
+      _createElementVNode("div", { [_withDynamicEventModifiers(_toHandlerKey(e), "Capture")]: test }, null, 16 /* FULL_PROPS */)
+    ], 64 /* STABLE_FRAGMENT */))
+  }
+}"
+`;

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

@@ -6,6 +6,7 @@ import {
   type ObjectExpression,
   TO_HANDLER_KEY,
   type VNodeCall,
+  generate,
   helperNameMap,
   baseParse as parse,
   transform,
@@ -168,6 +169,14 @@ describe('compiler-dom: transform v-on', () => {
     })
   })
 
+  it('should wrap both for dynamic key event w/ event modifiers', () => {
+    const { root: ast } = parseWithVOn(
+      `<div @[e].once="test"/><div @[e].passive="test"/><div @[e].capture="test"/>`,
+    )
+
+    expect(generate(ast).code).toMatchSnapshot()
+  })
+
   it('should not wrap normal guard if there is only keys guard', () => {
     const {
       props: [prop],

packages/compiler-dom/src/runtimeHelpers.ts

@@ -18,6 +18,9 @@ export const V_ON_WITH_MODIFIERS: unique symbol = Symbol(
 export const V_ON_WITH_KEYS: unique symbol = Symbol(
   __DEV__ ? `vOnKeysGuard` : ``,
 )
+export const V_ON_WITH_DYNAMIC_EVENT_MODIFIERS: unique symbol = Symbol(
+  __DEV__ ? `vOnDynamicEventModifiers` : ``,
+)
 
 export const V_SHOW: unique symbol = Symbol(__DEV__ ? `vShow` : ``)
 
@@ -34,6 +37,7 @@ registerRuntimeHelpers({
   [V_MODEL_DYNAMIC]: `vModelDynamic`,
   [V_ON_WITH_MODIFIERS]: `withModifiers`,
   [V_ON_WITH_KEYS]: `withKeys`,
+  [V_ON_WITH_DYNAMIC_EVENT_MODIFIERS]: `withDynamicEventModifiers`,
   [V_SHOW]: `vShow`,
   [TRANSITION]: `Transition`,
   [TRANSITION_GROUP]: `TransitionGroup`,

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

@@ -14,7 +14,11 @@ import {
   createSimpleExpression,
   isStaticExp,
 } from '@vue/compiler-core'
-import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../runtimeHelpers'
+import {
+  V_ON_WITH_DYNAMIC_EVENT_MODIFIERS,
+  V_ON_WITH_KEYS,
+  V_ON_WITH_MODIFIERS,
+} from '../runtimeHelpers'
 import { capitalize, makeMap } from '@vue/shared'
 
 const isEventOptionModifier = /*@__PURE__*/ makeMap(`passive,once,capture`)
@@ -144,7 +148,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(V_ON_WITH_DYNAMIC_EVENT_MODIFIERS)}(`,
+            key,
+            `, "${modifierPostfix}")`,
+          ])
     }
 
     return {

packages/runtime-dom/src/directives/vOn.ts

@@ -160,4 +160,15 @@ export const withKeys = <T extends (event: KeyboardEvent) => any>(
   )
 }
 
+/**
+ * @private
+ */
+export function withDynamicEventModifiers(
+  eventName: string,
+  modifierPostfix: string,
+): string {
+  if (eventName != null && eventName !== '') return eventName + modifierPostfix
+  return ''
+}
+
 export type VOnDirective = Directive<any, any, VOnModifiers>

packages/runtime-dom/src/index.ts

@@ -280,7 +280,11 @@ export {
   vModelSelect,
   vModelDynamic,
 } from './directives/vModel'
-export { withModifiers, withKeys } from './directives/vOn'
+export {
+  withModifiers,
+  withKeys,
+  withDynamicEventModifiers,
+} from './directives/vOn'
 export { vShow } from './directives/vShow'
 
 import { initVModelForSSR } from './directives/vModel'