test: test for directives

packages/runtime-core/src/createRenderer.ts

@@ -299,7 +299,7 @@ export function createRenderer(options: RendererOptions) {
     const newProps = n2.props || EMPTY_OBJ
 
     if (newProps.vnodeBeforeUpdate != null) {
-      invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2)
+      invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2, n1)
     }
 
     if (patchFlag) {
@@ -390,7 +390,7 @@ export function createRenderer(options: RendererOptions) {
 
     if (newProps.vnodeUpdated != null) {
       queuePostFlushCb(() => {
-        invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2)
+        invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2, n1)
       })
     }
   }

packages/runtime-core/src/directives.ts

@@ -22,7 +22,7 @@ import {
 } from './component'
 import { callWithAsyncErrorHandling, ErrorTypes } from './errorHandling'
 
-interface DirectiveBinding {
+export interface DirectiveBinding {
   instance: ComponentRenderProxy | null
   value?: any
   oldValue?: any
@@ -30,20 +30,20 @@ interface DirectiveBinding {
   modifiers?: DirectiveModifiers
 }
 
-type DirectiveHook = (
+export type DirectiveHook = (
   el: any,
   binding: DirectiveBinding,
   vnode: VNode,
-  prevVNode: VNode | void
+  prevVNode: VNode | null
 ) => void
 
-interface Directive {
-  beforeMount: DirectiveHook
-  mounted: DirectiveHook
-  beforeUpdate: DirectiveHook
-  updated: DirectiveHook
-  beforeUnmount: DirectiveHook
-  unmounted: DirectiveHook
+export interface Directive {
+  beforeMount?: DirectiveHook
+  mounted?: DirectiveHook
+  beforeUpdate?: DirectiveHook
+  updated?: DirectiveHook
+  beforeUnmount?: DirectiveHook
+  unmounted?: DirectiveHook
 }
 
 type DirectiveModifiers = Record<string, boolean>
@@ -64,11 +64,11 @@ function applyDirective(
     valueCache.set(directive, valueCacheForDir)
   }
   for (const key in directive) {
-    const hook = directive[key as keyof Directive]
+    const hook = directive[key as keyof Directive] as DirectiveHook
     const hookKey = `vnode` + key[0].toUpperCase() + key.slice(1)
-    const vnodeHook = (vnode: VNode, prevVNode?: VNode) => {
+    const vnodeHook = (vnode: VNode, prevVNode: VNode | null) => {
       let oldValue
-      if (prevVNode !== void 0) {
+      if (prevVNode != null) {
         oldValue = valueCacheForDir.get(prevVNode)
         valueCacheForDir.delete(prevVNode)
       }
@@ -93,12 +93,13 @@ function applyDirective(
   }
 }
 
-type DirectiveArguments = [
-  Directive,
-  any,
-  string | undefined,
-  DirectiveModifiers | undefined
-][]
+// Directive, value, argument, modifiers
+type DirectiveArguments = Array<
+  | [Directive]
+  | [Directive, any]
+  | [Directive, any, string]
+  | [Directive, any, string, DirectiveModifiers]
+>
 
 export function applyDirectives(
   vnode: VNode,
@@ -109,7 +110,7 @@ export function applyDirectives(
     vnode = cloneVNode(vnode)
     vnode.props = vnode.props != null ? extend({}, vnode.props) : {}
     for (let i = 0; i < directives.length; i++) {
-      applyDirective(vnode.props, instance, ...directives[i])
+      ;(applyDirective as any)(vnode.props, instance, ...directives[i])
     }
   } else if (__DEV__) {
     warn(`applyDirectives can only be used inside render functions.`)
@@ -125,9 +126,10 @@ export function resolveDirective(name: string): Directive {
 export function invokeDirectiveHook(
   hook: Function | Function[],
   instance: ComponentInstance | null,
-  vnode: VNode
+  vnode: VNode,
+  prevVNode: VNode | null = null
 ) {
-  const args = [vnode]
+  const args = [vnode, prevVNode]
   if (isArray(hook)) {
     for (let i = 0; i < hook.length; i++) {
       callWithAsyncErrorHandling(

packages/runtime-core/src/errorHandling.ts

@@ -104,7 +104,12 @@ export function handleError(
 }
 
 function logError(err: Error, type: AllErrorTypes, contextVNode: VNode | null) {
-  if (__DEV__) {
+  // default behavior is crash in prod & test, recover in dev.
+  // TODO we should probably make this configurable via `createApp`
+  if (
+    __DEV__ &&
+    !(typeof process !== 'undefined' && process.env.NODE_ENV === 'test')
+  ) {
     const info = ErrorTypeStrings[type]
     if (contextVNode) {
       pushWarningContext(contextVNode)

packages/runtime-core/src/index.ts

@@ -45,3 +45,4 @@ export { FunctionalComponent, ComponentInstance } from './component'
 export { RendererOptions } from './createRenderer'
 export { Slot, Slots } from './componentSlots'
 export { PropType, ComponentPropsOptions } from './componentProps'
+export { Directive, DirectiveBinding, DirectiveHook } from './directives'

packages/runtime-core/src/vnode.ts

@@ -186,15 +186,19 @@ export function cloneVNode(vnode: VNode): VNode {
     props: vnode.props,
     key: vnode.key,
     ref: vnode.ref,
-    children: null,
-    component: null,
-    el: null,
-    anchor: null,
-    target: null,
+    children: vnode.children,
+    target: vnode.target,
     shapeFlag: vnode.shapeFlag,
     patchFlag: vnode.patchFlag,
     dynamicProps: vnode.dynamicProps,
-    dynamicChildren: null
+    dynamicChildren: vnode.dynamicChildren,
+
+    // these should be set to null since they should only be present on
+    // mounted VNodes. If they are somehow not null, this means we have
+    // encountered an already-mounted vnode being used again.
+    component: null,
+    el: null,
+    anchor: null
   }
 }
 

packages/runtime-core/src/warning.ts

@@ -23,12 +23,12 @@ export function popWarningContext() {
 export function warn(msg: string, ...args: any[]) {
   // TODO app level warn handler
   console.warn(`[Vue warn]: ${msg}`, ...args)
-  const trace = getComponentTrace()
-  if (!trace.length) {
+  // avoid spamming console during tests
+  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {
     return
   }
-  // avoid spamming test output
-  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {
+  const trace = getComponentTrace()
+  if (!trace.length) {
     return
   }
   if (trace.length > 1 && console.groupCollapsed) {