chore(runtime-vapor): improve tree-shaking with transition hooks registry

packages/runtime-vapor/src/apiCreateFor.ts

@@ -17,7 +17,13 @@ import {
   createTextNode,
   updateLastLogicalChild,
 } from './dom/node'
-import { type Block, findBlockNode, insert, remove } from './block'
+import {
+  type Block,
+  applyTransitionHooks,
+  findBlockNode,
+  insert,
+  remove,
+} from './block'
 import { warn } from '@vue/runtime-dom'
 import { currentInstance, isVaporComponent } from './component'
 import type { DynamicSlot } from './componentSlots'
@@ -31,7 +37,6 @@ import {
   locateHydrationNode,
   setCurrentHydrationNode,
 } from './dom/hydration'
-import { applyTransitionHooks } from './components/Transition'
 import { ForFragment, VaporFragment } from './fragment'
 import {
   insertionAnchor,

packages/runtime-vapor/src/block.ts

@@ -371,3 +371,42 @@ export function setComponentScopeId(instance: VaporComponentInstance): void {
     setScopeId(instance.block, scopeIds)
   }
 }
+
+// Transition hooks registry for tree-shaking
+// These are registered by Transition component when it's used
+type ApplyTransitionHooksFn = (
+  block: Block,
+  hooks: VaporTransitionHooks,
+) => VaporTransitionHooks
+type ApplyTransitionLeaveHooksFn = (
+  block: Block,
+  enterHooks: VaporTransitionHooks,
+  afterLeaveCb: () => void,
+) => void
+
+let _applyTransitionHooks: ApplyTransitionHooksFn | undefined
+let _applyTransitionLeaveHooks: ApplyTransitionLeaveHooksFn | undefined
+
+export function registerTransitionHooks(
+  applyHooks: ApplyTransitionHooksFn,
+  applyLeaveHooks: ApplyTransitionLeaveHooksFn,
+): void {
+  _applyTransitionHooks = applyHooks
+  _applyTransitionLeaveHooks = applyLeaveHooks
+}
+
+export function applyTransitionHooks(
+  block: Block,
+  hooks: VaporTransitionHooks,
+): VaporTransitionHooks {
+  return _applyTransitionHooks ? _applyTransitionHooks(block, hooks) : hooks
+}
+
+export function applyTransitionLeaveHooks(
+  block: Block,
+  enterHooks: VaporTransitionHooks,
+  afterLeaveCb: () => void,
+): void {
+  _applyTransitionLeaveHooks &&
+    _applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb)
+}

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

@@ -11,7 +11,13 @@ import {
   resolveTeleportTarget,
   warn,
 } from '@vue/runtime-dom'
-import { type Block, type BlockFn, insert, remove } from '../block'
+import {
+  type Block,
+  type BlockFn,
+  applyTransitionHooks,
+  insert,
+  remove,
+} from '../block'
 import { createComment, createTextNode, querySelector } from '../dom/node'
 import {
   type LooseRawProps,
@@ -31,7 +37,6 @@ import {
   runWithoutHydration,
   setCurrentHydrationNode,
 } from '../dom/hydration'
-import { applyTransitionHooks } from './Transition'
 
 export const VaporTeleportImpl = {
   name: 'VaporTeleport',

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

@@ -19,7 +19,12 @@ import {
   useTransitionState,
   warn,
 } from '@vue/runtime-dom'
-import type { Block, TransitionBlock, VaporTransitionHooks } from '../block'
+import {
+  type Block,
+  type TransitionBlock,
+  type VaporTransitionHooks,
+  registerTransitionHooks,
+} from '../block'
 import {
   type FunctionalVaporComponent,
   type VaporComponentInstance,
@@ -36,6 +41,17 @@ import {
 
 const displayName = 'VaporTransition'
 
+let registered = false
+export const ensureTransitionHooksRegistered = (): void => {
+  if (!registered) {
+    registered = true
+    registerTransitionHooks(
+      applyTransitionHooksImpl,
+      applyTransitionLeaveHooksImpl,
+    )
+  }
+}
+
 const decorate = (t: typeof VaporTransition) => {
   t.displayName = displayName
   t.props = TransitionPropsValidators
@@ -45,6 +61,9 @@ const decorate = (t: typeof VaporTransition) => {
 
 export const VaporTransition: FunctionalVaporComponent<TransitionProps> =
   /*@__PURE__*/ decorate((props, { slots }) => {
+    // Register transition hooks on first use
+    ensureTransitionHooksRegistered()
+
     // wrapped <transition appear>
     let resetDisplay: Function | undefined
     if (
@@ -82,7 +101,7 @@ export const VaporTransition: FunctionalVaporComponent<TransitionProps> =
     let resolvedProps: BaseTransitionProps<Element>
     renderEffect(() => (resolvedProps = resolveTransitionProps(props)))
 
-    const hooks = applyTransitionHooks(children, {
+    const hooks = applyTransitionHooksImpl(children, {
       state: useTransitionState(),
       // use proxy to keep props reference stable
       props: new Proxy({} as BaseTransitionProps<Element>, {
@@ -169,7 +188,7 @@ export function resolveTransitionHooks(
   return hooks
 }
 
-export function applyTransitionHooks(
+function applyTransitionHooksImpl(
   block: Block,
   hooks: VaporTransitionHooks,
 ): VaporTransitionHooks {
@@ -210,7 +229,7 @@ export function applyTransitionHooks(
   return resolvedHooks
 }
 
-export function applyTransitionLeaveHooks(
+function applyTransitionLeaveHooksImpl(
   block: Block,
   enterHooks: VaporTransitionHooks,
   afterLeaveCb: () => void,

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

@@ -23,6 +23,7 @@ import {
 } from '../block'
 import { renderEffect } from '../renderEffect'
 import {
+  ensureTransitionHooksRegistered,
   resolveTransitionHooks,
   setTransitionHooks,
   setTransitionHooksOnFragment,
@@ -55,6 +56,9 @@ export const VaporTransitionGroup: ObjectVaporComponent =
     }),
 
     setup(props: TransitionGroupProps, { slots }) {
+      // Register transition hooks on first use
+      ensureTransitionHooksRegistered()
+
       const instance = currentInstance as VaporComponentInstance
       const state = useTransitionState()
 

packages/runtime-vapor/src/fragment.ts

@@ -5,6 +5,8 @@ import {
   type BlockFn,
   type TransitionOptions,
   type VaporTransitionHooks,
+  applyTransitionHooks,
+  applyTransitionLeaveHooks,
   findBlockNode,
   insert,
   isValidBlock,
@@ -21,10 +23,6 @@ import {
 } from '@vue/runtime-dom'
 import { type VaporComponentInstance, applyFallthroughProps } from './component'
 import type { NodeRef } from './apiTemplateRef'
-import {
-  applyTransitionHooks,
-  applyTransitionLeaveHooks,
-} from './components/Transition'
 import {
   currentHydrationNode,
   isComment,