From 0ae89253a00f37c07c1bb02baa0ae86109656dad Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Wed, 13 May 2020 10:23:27 +0800 Subject: [PATCH 1/7] refactor(Transition): refactor transition hooks --- .../src/components/BaseTransition.ts | 55 +++++------ .../runtime-dom/src/components/Transition.ts | 91 +++++++++++++++---- 2 files changed, 103 insertions(+), 43 deletions(-) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index 865432ab109..c99b1eeb13b 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -32,17 +32,30 @@ export interface BaseTransitionProps { // Hooks. Using camel case for easier usage in render functions & JSX. // In templates these can be written as @before-enter="xxx" as prop names // are camelized. - onBeforeEnter?: (el: HostElement) => void - onEnter?: (el: HostElement, done: () => void) => void - onAfterEnter?: (el: HostElement) => void - onEnterCancelled?: (el: HostElement) => void + onBeforeEnter?: TransitionOtherHook + onEnter?: TransitionActiveHook + onAfterEnter?: TransitionOtherHook + onEnterCancelled?: TransitionOtherHook // leave - onBeforeLeave?: (el: HostElement) => void - onLeave?: (el: HostElement, done: () => void) => void - onAfterLeave?: (el: HostElement) => void - onLeaveCancelled?: (el: HostElement) => void // only fired in persisted mode + onBeforeLeave?: TransitionOtherHook + onLeave?: TransitionActiveHook + onAfterLeave?: TransitionOtherHook + onLeaveCancelled?: TransitionOtherHook // only fired in persisted mode + // appear + onBeforeAppear?: TransitionOtherHook + onAppear?: TransitionActiveHook + onAfterAppear?: TransitionOtherHook + onAppearCancelled?: TransitionOtherHook } +export type TransitionActiveHook = ( + el: HostElement, + done: () => void +) => void | undefined +export type TransitionOtherHook = ( + el: HostElement +) => void | undefined + export interface TransitionHooks { persisted: boolean beforeEnter(el: RendererElement): void @@ -57,8 +70,8 @@ export interface TransitionHooks { delayedLeave?(): void } -type TransitionHookCaller = ( - hook: ((el: any) => void) | undefined, +export type TransitionHookCaller = ( + hook?: TransitionOtherHook | TransitionActiveHook, args?: any[] ) => void @@ -260,16 +273,6 @@ export function resolveTransitionHooks( const key = String(vnode.key) const leavingVNodesCache = getLeavingNodesForType(state, vnode) - const callHook: TransitionHookCaller = (hook, args) => { - hook && - callWithAsyncErrorHandling( - hook, - instance, - ErrorCodes.TRANSITION_HOOK, - args - ) - } - const hooks: TransitionHooks = { persisted, beforeEnter(el: TransitionElement) { @@ -290,7 +293,7 @@ export function resolveTransitionHooks( // force early removal (not cancelled) leavingVNode.el!._leaveCb() } - callHook(onBeforeEnter, [el]) + onBeforeEnter && onBeforeEnter(el) }, enter(el: TransitionElement) { @@ -302,9 +305,9 @@ export function resolveTransitionHooks( if (called) return called = true if (cancelled) { - callHook(onEnterCancelled, [el]) + onEnterCancelled && onEnterCancelled(el) } else { - callHook(onAfterEnter, [el]) + onAfterEnter && onAfterEnter(el) } if (hooks.delayedLeave) { hooks.delayedLeave() @@ -326,16 +329,16 @@ export function resolveTransitionHooks( if (state.isUnmounting) { return remove() } - callHook(onBeforeLeave, [el]) + onBeforeLeave && onBeforeLeave(el) let called = false const afterLeave = (el._leaveCb = (cancelled?) => { if (called) return called = true remove() if (cancelled) { - callHook(onLeaveCancelled, [el]) + onLeaveCancelled && onLeaveCancelled(el) } else { - callHook(onAfterLeave, [el]) + onAfterLeave && onAfterLeave(el) } el._leaveCb = undefined if (leavingVNodesCache[key] === vnode) { diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index c2d52dc0201..c01b80db5f5 100644 --- a/packages/runtime-dom/src/components/Transition.ts +++ b/packages/runtime-dom/src/components/Transition.ts @@ -9,6 +9,11 @@ import { } from '@vue/runtime-core' import { isObject } from '@vue/shared' import { ErrorCodes } from 'packages/runtime-core/src/errorHandling' +import { + TransitionActiveHook, + TransitionHookCaller, + TransitionOtherHook +} from '@vue/runtime-core/src/components/BaseTransition' const TRANSITION = 'transition' const ANIMATION = 'animation' @@ -77,18 +82,45 @@ export function resolveTransitionProps({ return baseProps } - const originEnterClass = [enterFromClass, enterActiveClass, enterToClass] const instance = getCurrentInstance()! const durations = normalizeDuration(duration) const enterDuration = durations && durations[0] const leaveDuration = durations && durations[1] - const { appear, onBeforeEnter, onEnter, onLeave } = baseProps - + let { + appear, + onBeforeEnter, + onAfterEnter, + onBeforeLeave, + onAfterLeave, + onEnter, + onLeave, + onEnterCancelled, + onLeaveCancelled, + onAfterAppear, + onAppear, + onAppearCancelled, + onBeforeAppear + } = baseProps // is appearing + const originEnterClass = [enterFromClass, enterActiveClass, enterToClass] + const originEnterHook: any[] = [ + onBeforeEnter, + onEnter, + onAfterEnter, + onEnterCancelled + ] if (appear && !instance.isMounted) { - enterFromClass = appearFromClass - enterActiveClass = appearActiveClass - enterToClass = appearToClass + ;[enterFromClass, enterActiveClass, enterToClass] = [ + appearFromClass, + appearActiveClass, + appearToClass + ] + ;[onBeforeEnter, onEnter, onBeforeEnter, onEnterCancelled] = [ + onBeforeAppear || onBeforeEnter, + onAppear || onEnter, + onAfterAppear || onAfterEnter, + onAppearCancelled || onEnterCancelled + ] } type Hook = (el: Element, done?: () => void) => void @@ -97,9 +129,15 @@ export function resolveTransitionProps({ removeTransitionClass(el, enterToClass) removeTransitionClass(el, enterActiveClass) done && done() - // reset enter class + // reset enter class and hooks if (appear) { ;[enterFromClass, enterActiveClass, enterToClass] = originEnterClass + ;[ + onBeforeEnter, + onEnter, + onBeforeEnter, + onEnterCancelled + ] = originEnterHook } } @@ -109,23 +147,26 @@ export function resolveTransitionProps({ done && done() } - // only needed for user hooks called in nextFrame - // sync errors are already handled by BaseTransition - function callHookWithErrorHandling(hook: Hook, args: any[]) { - callWithAsyncErrorHandling(hook, instance, ErrorCodes.TRANSITION_HOOK, args) + const callHook: TransitionHookCaller = (hook, args) => { + hook && + callWithAsyncErrorHandling( + hook, + instance, + ErrorCodes.TRANSITION_HOOK, + args + ) } - return { ...baseProps, onBeforeEnter(el) { - onBeforeEnter && onBeforeEnter(el) + callHook(onBeforeEnter, [el]) addTransitionClass(el, enterActiveClass) addTransitionClass(el, enterFromClass) }, onEnter(el, done) { nextFrame(() => { const resolve = () => finishEnter(el, done) - onEnter && callHookWithErrorHandling(onEnter as Hook, [el, resolve]) + callHook(onEnter, [el, resolve]) removeTransitionClass(el, enterFromClass) addTransitionClass(el, enterToClass) if (!(onEnter && onEnter.length > 1)) { @@ -137,12 +178,18 @@ export function resolveTransitionProps({ } }) }, + onAfterEnter(el) { + callHook(onAfterEnter, [el]) + }, + onBeforeLeave(el) { + callHook(onBeforeLeave, [el]) + }, onLeave(el, done) { addTransitionClass(el, leaveActiveClass) addTransitionClass(el, leaveFromClass) nextFrame(() => { const resolve = () => finishLeave(el, done) - onLeave && callHookWithErrorHandling(onLeave as Hook, [el, resolve]) + callHook(onLeave, [el, resolve]) removeTransitionClass(el, leaveFromClass) addTransitionClass(el, leaveToClass) if (!(onLeave && onLeave.length > 1)) { @@ -154,8 +201,18 @@ export function resolveTransitionProps({ } }) }, - onEnterCancelled: finishEnter, - onLeaveCancelled: finishLeave + onAfterLeave(el) { + finishEnter(el) + callHook(onAfterLeave, [el]) + }, + onEnterCancelled(el) { + finishEnter(el) + callHook(onEnterCancelled, [el]) + }, + onLeaveCancelled(el) { + finishLeave(el) + callHook(onLeaveCancelled, [el]) + } } } From 0fee39dfb34d78b4a9803ca100d4238e94b2fea1 Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Wed, 13 May 2020 10:25:18 +0800 Subject: [PATCH 2/7] refactor(Transition): update type --- packages/runtime-core/src/components/BaseTransition.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index c99b1eeb13b..e36b0263ce3 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -51,10 +51,10 @@ export interface BaseTransitionProps { export type TransitionActiveHook = ( el: HostElement, done: () => void -) => void | undefined +) => void export type TransitionOtherHook = ( el: HostElement -) => void | undefined +) => void export interface TransitionHooks { persisted: boolean From 1e1a37f627e5756761c27ea510d5546e5a097ebd Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Wed, 13 May 2020 10:35:17 +0800 Subject: [PATCH 3/7] refactor(Transition): add appear hooks into `BaseTransition` props --- packages/runtime-core/src/components/BaseTransition.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index e36b0263ce3..ef5b8e48ca4 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -126,7 +126,12 @@ const BaseTransitionImpl = { onBeforeLeave: Function, onLeave: Function, onAfterLeave: Function, - onLeaveCancelled: Function + onLeaveCancelled: Function, + // appear + onBeforeAppear: Function, + onAppear: Function, + onAfterAppear: Function, + onAppearCancelled: Function }, setup(props: BaseTransitionProps, { slots }: SetupContext) { From ec6dafa8f6f9dedf553a88a5e5e73a364237abe9 Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Wed, 13 May 2020 10:43:42 +0800 Subject: [PATCH 4/7] fix(Transition): fix test --- .../runtime-core/src/components/BaseTransition.ts | 6 ------ packages/runtime-core/src/index.ts | 7 ++++++- packages/runtime-dom/src/components/Transition.ts | 15 +++++++++------ 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index ef5b8e48ca4..84ac530a24c 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -13,7 +13,6 @@ import { import { warn } from '../warning' import { isKeepAlive } from './KeepAlive' import { toRaw } from '@vue/reactivity' -import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling' import { ShapeFlags } from '@vue/shared' import { onBeforeUnmount, onMounted } from '../apiLifecycle' import { RendererElement } from '../renderer' @@ -70,11 +69,6 @@ export interface TransitionHooks { delayedLeave?(): void } -export type TransitionHookCaller = ( - hook?: TransitionOtherHook | TransitionActiveHook, - args?: any[] -) => void - export type PendingCallback = (cancelled?: boolean) => void export interface TransitionState { diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts index 5f8055520e8..0cc93da09ed 100644 --- a/packages/runtime-core/src/index.ts +++ b/packages/runtime-core/src/index.ts @@ -196,7 +196,12 @@ export { DirectiveArguments } from './directives' export { SuspenseBoundary } from './components/Suspense' -export { TransitionState, TransitionHooks } from './components/BaseTransition' +export { + TransitionState, + TransitionHooks, + TransitionActiveHook, + TransitionOtherHook +} from './components/BaseTransition' export { AsyncComponentOptions, AsyncComponentLoader diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index c01b80db5f5..342d0c84474 100644 --- a/packages/runtime-dom/src/components/Transition.ts +++ b/packages/runtime-dom/src/components/Transition.ts @@ -5,15 +5,13 @@ import { warn, FunctionalComponent, getCurrentInstance, - callWithAsyncErrorHandling + callWithAsyncErrorHandling, + RendererElement, + TransitionActiveHook, + TransitionOtherHook } from '@vue/runtime-core' import { isObject } from '@vue/shared' import { ErrorCodes } from 'packages/runtime-core/src/errorHandling' -import { - TransitionActiveHook, - TransitionHookCaller, - TransitionOtherHook -} from '@vue/runtime-core/src/components/BaseTransition' const TRANSITION = 'transition' const ANIMATION = 'animation' @@ -35,6 +33,11 @@ export interface TransitionProps extends BaseTransitionProps { leaveToClass?: string } +export type TransitionHookCaller = ( + hook?: TransitionOtherHook | TransitionActiveHook, + args?: any[] +) => void + // DOM Transition is a higher-order-component based on the platform-agnostic // base Transition component, with DOM-specific logic. export const Transition: FunctionalComponent = ( From 7eec9b9ac108a793039ae7a1ab55331cfd543198 Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Wed, 13 May 2020 10:46:34 +0800 Subject: [PATCH 5/7] fix(Transition): fix hooks --- packages/runtime-dom/src/components/Transition.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index 342d0c84474..5b82f59be0e 100644 --- a/packages/runtime-dom/src/components/Transition.ts +++ b/packages/runtime-dom/src/components/Transition.ts @@ -205,7 +205,6 @@ export function resolveTransitionProps({ }) }, onAfterLeave(el) { - finishEnter(el) callHook(onAfterLeave, [el]) }, onEnterCancelled(el) { From 6ae5ba095dc2bde073587f6449bfb9ac0f9f9de1 Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Fri, 15 May 2020 19:46:53 +0800 Subject: [PATCH 6/7] fix(Transition): fix hooks --- .../runtime-dom/src/components/Transition.ts | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index 5b82f59be0e..2f249bbe37b 100644 --- a/packages/runtime-dom/src/components/Transition.ts +++ b/packages/runtime-dom/src/components/Transition.ts @@ -79,6 +79,22 @@ export function resolveTransitionProps({ leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to`, + appear, + onBeforeEnter, + onEnter, + onAfterEnter, + onEnterCancelled, + + onBeforeLeave, + onLeave, + onAfterLeave, + + onLeaveCancelled, + onBeforeAppear = onBeforeEnter, + onAppear = onEnter, + onAfterAppear = onAfterEnter, + onAppearCancelled = onEnterCancelled, + ...baseProps }: TransitionProps): BaseTransitionProps { if (!css) { @@ -89,21 +105,7 @@ export function resolveTransitionProps({ const durations = normalizeDuration(duration) const enterDuration = durations && durations[0] const leaveDuration = durations && durations[1] - let { - appear, - onBeforeEnter, - onAfterEnter, - onBeforeLeave, - onAfterLeave, - onEnter, - onLeave, - onEnterCancelled, - onLeaveCancelled, - onAfterAppear, - onAppear, - onAppearCancelled, - onBeforeAppear - } = baseProps + // is appearing const originEnterClass = [enterFromClass, enterActiveClass, enterToClass] const originEnterHook: any[] = [ @@ -119,10 +121,10 @@ export function resolveTransitionProps({ appearToClass ] ;[onBeforeEnter, onEnter, onBeforeEnter, onEnterCancelled] = [ - onBeforeAppear || onBeforeEnter, - onAppear || onEnter, - onAfterAppear || onAfterEnter, - onAppearCancelled || onEnterCancelled + onBeforeAppear, + onAppear, + onAfterAppear, + onAppearCancelled ] } From 03d9cc41557fd16cd7ff0c15702021ed93569e4a Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Fri, 15 May 2020 19:47:38 +0800 Subject: [PATCH 7/7] fix(Transition): format code --- packages/runtime-dom/src/components/Transition.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index 2f249bbe37b..68c9ab5abb5 100644 --- a/packages/runtime-dom/src/components/Transition.ts +++ b/packages/runtime-dom/src/components/Transition.ts @@ -84,17 +84,14 @@ export function resolveTransitionProps({ onEnter, onAfterEnter, onEnterCancelled, - onBeforeLeave, onLeave, onAfterLeave, - onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAfterAppear = onAfterEnter, onAppearCancelled = onEnterCancelled, - ...baseProps }: TransitionProps): BaseTransitionProps { if (!css) {