feat(transition): handle cancel hooks

packages/runtime-core/src/components/Transition.ts

@@ -1,6 +1,5 @@
 import {
   getCurrentInstance,
-  ComponentInternalInstance,
   SetupContext,
   ComponentOptions
 } from '../component'
@@ -30,17 +29,38 @@ export interface TransitionProps {
   onLeaveCancelled?: (el: any) => void
 }
 
+type TransitionHookCaller = (
+  hook: ((el: any) => void) | undefined,
+  args?: any[]
+) => void
+
+interface PendingCallbacks {
+  enter?: (cancelled?: boolean) => void
+  leave?: (cancelled?: boolean) => void
+}
+
 const TransitionImpl = {
   name: `BaseTransition`,
   setup(props: TransitionProps, { slots }: SetupContext) {
     const instance = getCurrentInstance()!
     let isLeaving = false
     let isMounted = false
+    const pendingCallbacks: PendingCallbacks = {}
 
     onMounted(() => {
       isMounted = true
     })
 
+    const callTransitionHook: TransitionHookCaller = (hook, args) => {
+      hook &&
+        callWithAsyncErrorHandling(
+          hook,
+          instance,
+          ErrorCodes.TRANSITION_HOOK,
+          args
+        )
+    }
+
     return () => {
       const children = slots.default && slots.default()
       if (!children || !children.length) {
@@ -72,10 +92,11 @@ const TransitionImpl = {
 
       let delayedLeave: (() => void) | undefined
       const performDelayedLeave = () => delayedLeave && delayedLeave()
-      const transitionData = (child.transition = resolveTransitionData(
+      const transitionHooks = (child.transition = resolveTransitionHooks(
-        instance,
         rawProps,
+        callTransitionHook,
         isMounted,
+        pendingCallbacks,
         performDelayedLeave
       ))
 
@@ -92,18 +113,18 @@ const TransitionImpl = {
       ) {
         // update old tree's hooks in case of dynamic transition
         // need to do this recursively in case of HOCs
-        updateHOCTransitionData(oldChild, transitionData)
+        updateHOCTransitionData(oldChild, transitionHooks)
         // switching between different views
         if (mode === 'out-in') {
           isLeaving = true
           // return placeholder node and queue update when leave finishes
-          transitionData.afterLeave = () => {
+          transitionHooks.afterLeave = () => {
             isLeaving = false
             instance.update()
           }
           return placeholder(child)
         } else if (mode === 'in-out') {
-          transitionData.delayLeave = performLeave => {
+          transitionHooks.delayLeave = performLeave => {
             delayedLeave = performLeave
           }
         }
@@ -139,7 +160,7 @@ export const Transition = (TransitionImpl as any) as {
   }
 }
 
-export interface TransitionData {
+export interface TransitionHooks {
   beforeEnter(el: object): void
   enter(el: object): void
   leave(el: object, remove: () => void): void
@@ -147,8 +168,7 @@ export interface TransitionData {
   delayLeave?(performLeave: () => void): void
 }
 
-function resolveTransitionData(
+function resolveTransitionHooks(
-  instance: ComponentInternalInstance,
   {
     appear,
     onBeforeEnter,
@@ -160,66 +180,59 @@ function resolveTransitionData(
     onAfterLeave,
     onLeaveCancelled
   }: TransitionProps,
+  callHook: TransitionHookCaller,
   isMounted: boolean,
+  pendingCallbacks: PendingCallbacks,
   performDelayedLeave: () => void
-): TransitionData {
+): TransitionHooks {
-  // TODO handle cancel hooks
   return {
     beforeEnter(el) {
       if (!isMounted && !appear) {
         return
       }
-      onBeforeEnter &&
+      if (pendingCallbacks.leave) {
-        callWithAsyncErrorHandling(
+        pendingCallbacks.leave(true /* cancelled */)
-          onBeforeEnter,
+      }
-          instance,
+      callHook(onBeforeEnter, [el])
-          ErrorCodes.TRANSITION_HOOK,
-          [el]
-        )
     },
+
     enter(el) {
       if (!isMounted && !appear) {
         return
       }
-      const done = () => {
+      const afterEnter = (pendingCallbacks.enter = (cancelled?) => {
-        onAfterEnter &&
+        if (cancelled) {
-          callWithAsyncErrorHandling(
+          callHook(onEnterCancelled, [el])
-            onAfterEnter,
+        } else {
-            instance,
+          callHook(onAfterEnter, [el])
-            ErrorCodes.TRANSITION_HOOK,
-            [el]
-          )
           performDelayedLeave()
         }
+        pendingCallbacks.enter = undefined
+      })
       if (onEnter) {
-        onEnter(el, done)
+        onEnter(el, afterEnter)
       } else {
-        done()
+        afterEnter()
       }
     },
+
     leave(el, remove) {
-      onBeforeLeave &&
+      if (pendingCallbacks.enter) {
-        callWithAsyncErrorHandling(
+        pendingCallbacks.enter(true /* cancelled */)
-          onBeforeLeave,
+      }
-          instance,
+      callHook(onBeforeLeave, [el])
-          ErrorCodes.TRANSITION_HOOK,
+      const afterLeave = (pendingCallbacks.leave = (cancelled?) => {
-          [el]
-        )
-      const afterLeave = () =>
-        onAfterLeave &&
-        callWithAsyncErrorHandling(
-          onAfterLeave,
-          instance,
-          ErrorCodes.TRANSITION_HOOK,
-          [el]
-        )
-      if (onLeave) {
-        onLeave(el, () => {
         remove()
-          afterLeave()
+        if (cancelled) {
-        })
+          callHook(onLeaveCancelled, [el])
+        } else {
+          callHook(onAfterLeave, [el])
+        }
+        pendingCallbacks.leave = undefined
+      })
+      if (onLeave) {
+        onLeave(el, afterLeave)
       } else {
-        remove()
         afterLeave()
       }
     }
@@ -238,7 +251,7 @@ function placeholder(vnode: VNode): VNode | undefined {
   }
 }
 
-function updateHOCTransitionData(vnode: VNode, data: TransitionData) {
+function updateHOCTransitionData(vnode: VNode, data: TransitionHooks) {
   if (vnode.shapeFlag & ShapeFlags.COMPONENT) {
     updateHOCTransitionData(vnode.component!.subTree, data)
   } else {

packages/runtime-core/src/vnode.ts

@@ -19,7 +19,7 @@ import { AppContext } from './apiApp'
 import { SuspenseBoundary } from './components/Suspense'
 import { DirectiveBinding } from './directives'
 import { SuspenseImpl } from './components/Suspense'
-import { TransitionData } from './components/Transition'
+import { TransitionHooks } from './components/Transition'
 
 export const Fragment = (Symbol(__DEV__ ? 'Fragment' : undefined) as any) as {
   __isFragment: true
@@ -93,7 +93,7 @@ export interface VNode<HostNode = any, HostElement = any> {
   component: ComponentInternalInstance | null
   suspense: SuspenseBoundary<HostNode, HostElement> | null
   dirs: DirectiveBinding[] | null
-  transition: TransitionData | null
+  transition: TransitionHooks | null
 
   // DOM
   el: HostNode | null