refactor: adjust event options handling to be JSX friendly

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

@@ -77,13 +77,13 @@ describe('compiler-dom: transform v-on', () => {
   it('should support multiple modifiers and event options w/ prefixIdentifiers: true', () => {
     const {
       props: [prop]
-    } = parseWithVOn(`<div @click.stop.capture.passive="test"/>`, {
+    } = parseWithVOn(`<div @click.stop.capture.once="test"/>`, {
       prefixIdentifiers: true
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       key: {
-        content: `onClick.capture.passive`
+        content: `onClickCaptureOnce`
       },
       value: {
         callee: V_ON_WITH_MODIFIERS,
@@ -101,7 +101,7 @@ describe('compiler-dom: transform v-on', () => {
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       key: {
-        content: `onKeydown.capture`
+        content: `onKeydownCapture`
       },
       value: {
         callee: V_ON_WITH_KEYS,
@@ -274,7 +274,7 @@ describe('compiler-dom: transform v-on', () => {
     )
     expect(prop).toMatchObject({
       key: {
-        content: `onKeyup.capture`
+        content: `onKeyupCapture`
       },
       value: {
         type: NodeTypes.JS_CACHE_EXPRESSION,

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

@@ -11,7 +11,7 @@ import {
   isStaticExp
 } from '@vue/compiler-core'
 import { V_ON_WITH_MODIFIERS, V_ON_WITH_KEYS } from '../runtimeHelpers'
-import { makeMap } from '@vue/shared'
+import { makeMap, capitalize } from '@vue/shared'
 
 const isEventOptionModifier = /*#__PURE__*/ makeMap(`passive,once,capture`)
 const isNonKeyModifier = /*#__PURE__*/ makeMap(
@@ -38,7 +38,8 @@ const resolveModifiers = (key: ExpressionNode, modifiers: string[]) => {
     const modifier = modifiers[i]
 
     if (isEventOptionModifier(modifier)) {
-      // eventOptionModifiers: modifiers for addEventListener() options, e.g. .passive & .capture
+      // eventOptionModifiers: modifiers for addEventListener() options,
+      // e.g. .passive & .capture
       eventOptionModifiers.push(modifier)
     } else {
       // runtimeModifiers: modifiers that needs runtime guards
@@ -125,16 +126,10 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
     }
 
     if (eventOptionModifiers.length) {
+      const modifierPostfix = eventOptionModifiers.map(capitalize).join('')
       key = isStaticExp(key)
-        ? createSimpleExpression(
-            `${key.content}.${eventOptionModifiers.join(`.`)}`,
-            true
-          )
-        : createCompoundExpression([
-            `(`,
-            key,
-            `) + ".${eventOptionModifiers.join(`.`)}"`
-          ])
+        ? createSimpleExpression(`${key.content}${modifierPostfix}`, true)
+        : createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`])
     }
 
     return {