feat: add directives type support (#863)

Author: xiaoxiangmoe

src/apis/createApp.ts

@@ -1,5 +1,6 @@
 import type Vue from 'vue'
 import { VueConstructor } from 'vue'
+import { Directive } from '../component/directives'
 import { getVueConstructor } from '../runtimeContext'
 import { warn } from '../utils'
 
@@ -9,7 +10,8 @@ export interface App<T = any> {
   use: VueConstructor['use']
   mixin: VueConstructor['mixin']
   component: VueConstructor['component']
-  directive: VueConstructor['directive']
+  directive(name: string): Directive | undefined
+  directive(name: string, directive: Directive): this
   mount: Vue['$mount']
   unmount: Vue['$destroy']
 }
@@ -19,12 +21,19 @@ export function createApp(rootComponent: any, rootProps: any = undefined): App {
 
   let mountedVM: Vue | undefined = undefined
 
-  return {
+  const app: App = {
     config: V.config,
     use: V.use.bind(V),
     mixin: V.mixin.bind(V),
     component: V.component.bind(V),
-    directive: V.directive.bind(V),
+    directive(name: string, dir?: Directive | undefined): any {
+      if (dir) {
+        V.directive(name, dir as any)
+        return app
+      } else {
+        return V.directive(name)
+      }
+    },
     mount: (el, hydrating) => {
       if (!mountedVM) {
         mountedVM = new V({ propsData: rootProps, ...rootComponent })
@@ -51,4 +60,5 @@ export function createApp(rootComponent: any, rootProps: any = undefined): App {
       }
     },
   }
+  return app
 }

src/component/directives.ts

@@ -0,0 +1,29 @@
+import type { VNodeDirective, VNode } from 'vue'
+
+export type DirectiveModifiers = Record<string, boolean>
+
+export interface DirectiveBinding<V> extends Readonly<VNodeDirective> {
+  readonly modifiers: DirectiveModifiers
+  readonly value: V
+  readonly oldValue: V | null
+}
+
+export type DirectiveHook<T = any, Prev = VNode | null, V = any> = (
+  el: T,
+  binding: DirectiveBinding<V>,
+  vnode: VNode,
+  prevVNode: Prev
+) => void
+
+export interface ObjectDirective<T = any, V = any> {
+  bind?: DirectiveHook<T, any, V>
+  inserted?: DirectiveHook<T, any, V>
+  update?: DirectiveHook<T, any, V>
+  componentUpdated?: DirectiveHook<T, any, V>
+  unbind?: DirectiveHook<T, any, V>
+}
+export type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>
+
+export type Directive<T = any, V = any> =
+  | ObjectDirective<T, V>
+  | FunctionDirective<T, V>

src/component/index.ts

@@ -18,3 +18,11 @@ export {
   ExtractPropTypes,
   ExtractDefaultPropTypes,
 } from './componentProps'
+
+export {
+  DirectiveModifiers,
+  DirectiveBinding,
+  DirectiveHook,
+  ObjectDirective,
+  FunctionDirective,
+} from './directives'