feat: applyDirective

packages/core/src/component.ts

@@ -48,8 +48,8 @@ export interface MountedComponent<D = Data, P = Data> extends Component {
   mounted?(): void
   beforeUpdate?(vnode: VNode): void
   updated?(vnode: VNode): void
-  beforeDestroy?(): void
+  beforeUnmount?(): void
-  destroyed?(): void
+  unmounted?(): void
   errorCaptured?(): (err: Error, type: ErrorTypes) => boolean | void
 
   _updateHandle: Autorun

packages/core/src/createRenderer.ts

@@ -1270,8 +1270,8 @@ export function createRenderer(options: RendererOptions) {
   }
 
   function unmountComponentInstance(instance: MountedComponent) {
-    if (instance.beforeDestroy) {
+    if (instance.beforeUnmount) {
-      instance.beforeDestroy.call(instance.$proxy)
+      instance.beforeUnmount.call(instance.$proxy)
     }
     if (instance.$vnode) {
       unmount(instance.$vnode)
@@ -1279,8 +1279,8 @@ export function createRenderer(options: RendererOptions) {
     stop(instance._updateHandle)
     teardownComponentInstance(instance)
     instance._destroyed = true
-    if (instance.destroyed) {
+    if (instance.unmounted) {
-      instance.destroyed.call(instance.$proxy)
+      instance.unmounted.call(instance.$proxy)
     }
   }
 

packages/core/src/directive.ts

@@ -0,0 +1,58 @@
+import { VNode } from './vdom'
+import { MountedComponent } from './component'
+
+export interface DirectiveBinding {
+  instance: MountedComponent
+  value?: any
+  arg?: string
+  modifiers?: DirectiveModifiers
+}
+
+export type DirectiveHook = (
+  el: any,
+  binding: DirectiveBinding,
+  vnode: VNode,
+  prevVNode: VNode | void
+) => void
+
+export interface Directive {
+  beforeMount: DirectiveHook
+  mounted: DirectiveHook
+  beforeUpdate: DirectiveHook
+  updated: DirectiveHook
+  beforeUnmount: DirectiveHook
+  unmounted: DirectiveHook
+}
+
+type DirectiveModifiers = Record<string, boolean>
+
+export function applyDirective(
+  vnode: VNode,
+  directive: Directive,
+  instance: MountedComponent,
+  value?: any,
+  arg?: string,
+  modifiers?: DirectiveModifiers
+): VNode {
+  const data = vnode.data || (vnode.data = {})
+  for (const key in directive) {
+    const hook = directive[key as keyof Directive]
+    const hookKey = `vnode` + key[0].toUpperCase() + key.slice(1)
+    const vnodeHook = (vnode: VNode, prevVNode?: VNode) => {
+      hook(
+        vnode.el,
+        {
+          instance,
+          value,
+          arg,
+          modifiers
+        },
+        vnode,
+        prevVNode
+      )
+    }
+    const existing = data[hookKey]
+    data[hookKey] = existing ? [].concat(existing, vnodeHook as any) : vnodeHook
+  }
+  return vnode
+}

packages/core/src/index.ts

@@ -15,6 +15,7 @@ export { nextTick } from '@vue/scheduler'
 
 // internal api
 export { createComponentInstance } from './componentUtils'
+export { applyDirective } from './directive'
 
 // flags & types
 export { ComponentClass, FunctionalComponent } from './component'