perf(runtime-vapor): tree-shake transition operations from non-transition bundles

Author: edison1105

packages/runtime-vapor/src/block.ts

@@ -12,15 +12,14 @@ import {
   type TransitionHooks,
   type TransitionProps,
   type TransitionState,
-  performTransitionEnter,
-  performTransitionLeave,
 } from '@vue/runtime-dom'
 import {
   type DynamicFragment,
   type VaporFragment,
   isFragment,
 } from './fragment'
 import { isTeleportFragment } from './components/Teleport'
+import { runTransitionEnter, runTransitionLeave } from './transition'
 
 export interface VaporTransitionHooks extends TransitionHooks {
   state: TransitionState
@@ -105,9 +104,9 @@ export function insert(
         (block as TransitionBlock).$transition &&
         !(block as TransitionBlock).$transition!.disabled
       ) {
-        performTransitionEnter(
+        runTransitionEnter(
           block,
-          (block as TransitionBlock).$transition as TransitionHooks,
+          (block as TransitionBlock).$transition as VaporTransitionHooks,
           () => parent.insertBefore(block, anchor as Node),
           parentSuspense,
         )
@@ -157,17 +156,17 @@ export function move(
       moveType !== MoveType.REORDER
     ) {
       if (moveType === MoveType.ENTER) {
-        performTransitionEnter(
+        runTransitionEnter(
           block,
-          (block as TransitionBlock).$transition as TransitionHooks,
+          (block as TransitionBlock).$transition as VaporTransitionHooks,
           () => parent.insertBefore(block, anchor as Node),
           parentSuspense,
           true,
         )
       } else {
-        performTransitionLeave(
+        runTransitionLeave(
           block,
-          (block as TransitionBlock).$transition as TransitionHooks,
+          (block as TransitionBlock).$transition as VaporTransitionHooks,
           () => {
             // if the component is unmounted after leave finish, remove the block
             // to avoid retaining a detached node.
@@ -241,9 +240,9 @@ export function prepend(parent: ParentNode, ...blocks: Block[]): void {
 export function remove(block: Block, parent?: ParentNode): void {
   if (block instanceof Node) {
     if ((block as TransitionBlock).$transition && block instanceof Element) {
-      performTransitionLeave(
+      runTransitionLeave(
         block,
-        (block as TransitionBlock).$transition as TransitionHooks,
+        (block as TransitionBlock).$transition as VaporTransitionHooks,
         () => parent && parent.removeChild(block),
       )
     } else {

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

@@ -17,6 +17,8 @@ import {
   isTemplateNode,
   leaveCbKey,
   onBeforeMount,
+  performTransitionEnter,
+  performTransitionLeave,
   queuePostFlushCb,
   resolveTransitionProps,
   useTransitionState,
@@ -66,6 +68,8 @@ export const ensureTransitionHooksRegistered = (): void => {
     registerTransitionHooks(
       applyTransitionHooksImpl,
       applyTransitionLeaveHooksImpl,
+      performTransitionEnter,
+      performTransitionLeave,
     )
   }
 }

packages/runtime-vapor/src/transition.ts

@@ -12,16 +12,36 @@ type ApplyTransitionLeaveHooksFn = (
   enterHooks: VaporTransitionHooks,
   afterLeaveCb: () => void,
 ) => void
+type RunTransitionEnterFn = (
+  el: Element,
+  hooks: VaporTransitionHooks,
+  insert: () => void,
+  parentSuspense?: any,
+  force?: boolean,
+) => void
+type RunTransitionLeaveFn = (
+  el: Element,
+  hooks: VaporTransitionHooks,
+  remove: () => void,
+  isElement?: boolean,
+  force?: boolean,
+) => void
 
 let _applyTransitionHooks: ApplyTransitionHooksFn | undefined
 let _applyTransitionLeaveHooks: ApplyTransitionLeaveHooksFn | undefined
+let _runTransitionEnter: RunTransitionEnterFn | undefined
+let _runTransitionLeave: RunTransitionLeaveFn | undefined
 
 export function registerTransitionHooks(
   applyHooks: ApplyTransitionHooksFn,
   applyLeaveHooks: ApplyTransitionLeaveHooksFn,
+  runEnter: RunTransitionEnterFn,
+  runLeave: RunTransitionLeaveFn,
 ): void {
   _applyTransitionHooks = applyHooks
   _applyTransitionLeaveHooks = applyLeaveHooks
+  _runTransitionEnter = runEnter
+  _runTransitionLeave = runLeave
 }
 
 export function applyTransitionHooks(
@@ -39,3 +59,31 @@ export function applyTransitionLeaveHooks(
   _applyTransitionLeaveHooks &&
     _applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb)
 }
+
+export function runTransitionEnter(
+  el: Element,
+  hooks: VaporTransitionHooks,
+  insert: () => void,
+  parentSuspense?: any,
+  force?: boolean,
+): void {
+  if (_runTransitionEnter) {
+    _runTransitionEnter(el, hooks, insert, parentSuspense, force)
+  } else {
+    insert()
+  }
+}
+
+export function runTransitionLeave(
+  el: Element,
+  hooks: VaporTransitionHooks,
+  remove: () => void,
+  isElement?: boolean,
+  force?: boolean,
+): void {
+  if (_runTransitionLeave) {
+    _runTransitionLeave(el, hooks, remove, isElement, force)
+  } else {
+    remove()
+  }
+}

packages/runtime-vapor/src/vdomInterop.ts

@@ -111,6 +111,7 @@ import {
 } from './fragment'
 import type { NodeRef } from './apiTemplateRef'
 import {
+  ensureTransitionHooksRegistered,
   getVNodeKey,
   setTransitionHooks as setVaporTransitionHooks,
 } from './components/Transition'
@@ -201,6 +202,7 @@ const vaporInteropImpl: Omit<
       instance.shapeFlag = vnode.shapeFlag
 
     if (vnode.transition) {
+      ensureTransitionHooksRegistered()
       setVaporTransitionHooks(
         instance,
         vnode.transition as VaporTransitionHooks,
@@ -434,6 +436,7 @@ const vaporInteropImpl: Omit<
   },
 
   setTransitionHooks(component, hooks) {
+    ensureTransitionHooksRegistered()
     setVaporTransitionHooks(component as any, hooks as VaporTransitionHooks)
   },