refactor(v-on): avoid empty modifier guard with only key modifier

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

@@ -103,4 +103,17 @@ describe('compiler-dom: transform v-on', () => {
       }
     })
   })
+
+  it('should not wrap normal guard if there is only keys guard', () => {
+    const [prop] = parseVOnProperties(`<div @keyup.enter="test"/>`, {
+      prefixIdentifiers: true
+    })
+    expect(prop).toMatchObject({
+      type: NodeTypes.JS_PROPERTY,
+      value: {
+        callee: V_ON_KEYS_GUARD,
+        arguments: [{ content: '_ctx.test' }, '["enter"]']
+      }
+    })
+  })
 })

packages/compiler-dom/src/runtimeHelpers.ts

@@ -15,6 +15,6 @@ registerRuntimeHelpers({
   [V_MODEL_TEXT]: `vModelText`,
   [V_MODEL_SELECT]: `vModelSelect`,
   [V_MODEL_DYNAMIC]: `vModelDynamic`,
-  [V_ON_MODIFIERS_GUARD]: `vOnModifiersGuard`,
-  [V_ON_KEYS_GUARD]: `vOnKeysGuard`
+  [V_ON_MODIFIERS_GUARD]: `withModifiers`,
+  [V_ON_KEYS_GUARD]: `withKeys`
 })

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

@@ -5,9 +5,7 @@ import {
   createCallExpression,
   createObjectExpression,
   createSimpleExpression,
-  NodeTypes,
-  CallExpression,
-  ObjectExpression
+  NodeTypes
 } from '@vue/compiler-core'
 import { V_ON_MODIFIERS_GUARD, V_ON_KEYS_GUARD } from '../runtimeHelpers'
 import { makeMap } from '@vue/shared'
@@ -31,12 +29,22 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
   const baseResult = baseTransform(dir, node, context)
   if (!modifiers.length) return baseResult
 
-  const { key, value } = baseResult.props[0]
+  let { key, value: handlerExp } = baseResult.props[0]
+
+  // modifiers for addEventListener() options, e.g. .passive & .capture
+  const eventOptionModifiers = modifiers.filter(isEventOptionModifier)
+  // modifiers that needs runtime guards
   const runtimeModifiers = modifiers.filter(m => !isEventOptionModifier(m))
-  let handler = createCallExpression(context.helper(V_ON_MODIFIERS_GUARD), [
-    value,
-    JSON.stringify(runtimeModifiers.filter(isNonKeyModifier))
-  ])
+
+  // built-in modifiers that are not keys
+  const nonKeyModifiers = runtimeModifiers.filter(isNonKeyModifier)
+  if (nonKeyModifiers.length) {
+    handlerExp = createCallExpression(context.helper(V_ON_MODIFIERS_GUARD), [
+      handlerExp,
+      JSON.stringify(nonKeyModifiers)
+    ])
+  }
+
   const keyModifiers = runtimeModifiers.filter(m => !isNonKeyModifier(m))
   if (
     keyModifiers.length &&
@@ -45,18 +53,15 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
       !key.isStatic ||
       isKeyboardEvent(key.content))
   ) {
-    handler = createCallExpression(context.helper(V_ON_KEYS_GUARD), [
-      handler,
+    handlerExp = createCallExpression(context.helper(V_ON_KEYS_GUARD), [
+      handlerExp,
       JSON.stringify(keyModifiers)
     ])
   }
 
-  let returnExp: CallExpression | ObjectExpression = handler
-
-  const eventOptionModifiers = modifiers.filter(isEventOptionModifier)
   if (eventOptionModifiers.length) {
-    returnExp = createObjectExpression([
-      createObjectProperty('handler', handler),
+    handlerExp = createObjectExpression([
+      createObjectProperty('handler', handlerExp),
       createObjectProperty(
         'options',
         createObjectExpression(
@@ -74,7 +79,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
   }
 
   return {
-    props: [createObjectProperty(key, returnExp)],
+    props: [createObjectProperty(key, handlerExp)],
     needRuntime: false
   }
 }