chore: add vOn directive as global

Author: pikax

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

@@ -1,31 +1,39 @@
 import { hyphenate } from '@vue/shared'
-
-const systemModifiers = ['ctrl', 'shift', 'alt', 'meta']
+import { Directive } from 'test-dts'
 
 type KeyedEvent = KeyboardEvent | MouseEvent | TouchEvent
 
-const modifierGuards: Record<
-  string,
-  (e: Event, modifiers: string[]) => void | boolean
-> = {
-  stop: e => e.stopPropagation(),
-  prevent: e => e.preventDefault(),
-  self: e => e.target !== e.currentTarget,
-  ctrl: e => !(e as KeyedEvent).ctrlKey,
-  shift: e => !(e as KeyedEvent).shiftKey,
-  alt: e => !(e as KeyedEvent).altKey,
-  meta: e => !(e as KeyedEvent).metaKey,
-  left: e => 'button' in e && (e as MouseEvent).button !== 0,
-  middle: e => 'button' in e && (e as MouseEvent).button !== 1,
-  right: e => 'button' in e && (e as MouseEvent).button !== 2,
-  exact: (e, modifiers) =>
+type SystemModifiers = 'ctrl' | 'shift' | 'alt' | 'meta'
+type CompatModifiers = keyof typeof keyNames
+
+export type VOnModifiers = SystemModifiers | ModifierGuards | CompatModifiers
+
+const systemModifiers: Array<SystemModifiers> = ['ctrl', 'shift', 'alt', 'meta']
+
+const modifierGuards = {
+  stop: (e: Event) => e.stopPropagation(),
+  prevent: (e: Event) => e.preventDefault(),
+  self: (e: Event) => e.target !== e.currentTarget,
+  ctrl: (e: Event) => !(e as KeyedEvent).ctrlKey,
+  shift: (e: Event) => !(e as KeyedEvent).shiftKey,
+  alt: (e: Event) => !(e as KeyedEvent).altKey,
+  meta: (e: Event) => !(e as KeyedEvent).metaKey,
+  left: (e: Event) => 'button' in e && (e as MouseEvent).button !== 0,
+  middle: (e: Event) => 'button' in e && (e as MouseEvent).button !== 1,
+  right: (e: Event) => 'button' in e && (e as MouseEvent).button !== 2,
+  exact: (e: Event, modifiers: string[]) =>
     systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m))
 }
 
+type ModifierGuards = keyof typeof modifierGuards
+
 /**
  * @private
  */
-export const withModifiers = (fn: Function, modifiers: string[]) => {
+export const withModifiers = (
+  fn: Function,
+  modifiers: Array<ModifierGuards | SystemModifiers>
+) => {
   return (event: Event, ...args: unknown[]) => {
     for (let i = 0; i < modifiers.length; i++) {
       const guard = modifierGuards[modifiers[i]]
@@ -37,7 +45,7 @@ export const withModifiers = (fn: Function, modifiers: string[]) => {
 
 // Kept for 2.x compat.
 // Note: IE11 compat for `spacebar` and `del` is removed for now.
-const keyNames: Record<string, string | string[]> = {
+const keyNames = {
   esc: 'escape',
   space: ' ',
   up: 'arrow-up',
@@ -56,10 +64,14 @@ export const withKeys = (fn: Function, modifiers: string[]) => {
     const eventKey = hyphenate(event.key)
     if (
       // None of the provided key modifiers match the current event key
-      !modifiers.some(k => k === eventKey || keyNames[k] === eventKey)
+      !modifiers.some(
+        k => k === eventKey || keyNames[k as CompatModifiers] === eventKey
+      )
     ) {
       return
     }
     return fn(event)
   }
 }
+
+export type VOnDirective = Directive<any, any, Modifiers>

packages/runtime-dom/src/index.ts

@@ -18,6 +18,7 @@ import { isFunction, isString, isHTMLTag, isSVGTag, extend } from '@vue/shared'
 import { TransitionProps } from './components/Transition'
 import { TransitionGroupProps } from './components/TransitionGroup'
 import { vShow } from './directives/vShow'
+import { VOnDirective } from './directives/vOn'
 
 declare module '@vue/reactivity' {
   export interface RefUnwrapBailTypes {
@@ -35,6 +36,7 @@ declare module '@vue/runtime-core' {
 
   interface GlobalDirectives {
     vShow: typeof vShow
+    vOn: VOnDirective
   }
 }