wip: save

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

@@ -88,7 +88,7 @@ export interface TransitionState {
   isUnmounting: boolean
   // Track pending leave callbacks for children of the same key.
   // This is used to force remove leaving a child when a new copy is entering.
-  leavingVNodes: Map<any, Record<string, any>>
+  leavingNodes: Map<any, Record<string, any>>
 }
 
 export interface TransitionElement {
@@ -104,7 +104,7 @@ export function useTransitionState(): TransitionState {
     isMounted: false,
     isLeaving: false,
     isUnmounting: false,
-    leavingVNodes: new Map(),
+    leavingNodes: new Map(),
   }
   onMounted(() => {
     state.isMounted = true
@@ -310,11 +310,11 @@ function getLeavingNodesForType(
   state: TransitionState,
   vnode: VNode,
 ): Record<string, VNode> {
-  const { leavingVNodes } = state
+  const { leavingNodes } = state
-  let leavingVNodesCache = leavingVNodes.get(vnode.type)!
+  let leavingVNodesCache = leavingNodes.get(vnode.type)!
   if (!leavingVNodesCache) {
     leavingVNodesCache = Object.create(null)
-    leavingVNodes.set(vnode.type, leavingVNodesCache)
+    leavingNodes.set(vnode.type, leavingVNodesCache)
   }
   return leavingVNodesCache
 }

packages/runtime-vapor/src/block.ts

@@ -29,8 +29,8 @@ export type Block = (
   TransitionBlock
 
 export interface VaporTransitionHooks extends TransitionHooks {
-  state?: TransitionState
+  state: TransitionState
-  props?: TransitionProps
+  props: TransitionProps
 }
 
 export type TransitionBlock = {
@@ -74,16 +74,14 @@ export class DynamicFragment extends VaporFragment {
     pauseTracking()
     const parent = this.anchor.parentNode
 
+    const transition = this.transition
     const renderBranch = () => {
       if (render) {
-        const transition = this.transition
         this.scope = new EffectScope()
         this.nodes = this.scope.run(render) || []
         if (transition) {
           this.transitionChild = applyTransitionEnterHooks(
             this.nodes,
-            transition.state!,
-            transition.props!,
             transition,
           )
         }
@@ -97,15 +95,9 @@ export class DynamicFragment extends VaporFragment {
     // teardown previous branch
     if (this.scope) {
       this.scope.stop()
-      const mode = this.transition && this.transition.mode
+      const mode = transition && transition.mode
       if (mode) {
-        applyTransitionLeaveHooks(
+        applyTransitionLeaveHooks(this.nodes, transition, renderBranch)
-          this.nodes,
-          this.transition!.state!,
-          this.transition!.props!,
-          renderBranch,
-          this.transition,
-        )
         parent && remove(this.nodes, parent)
         if (mode === 'out-in') {
           resetTracking()

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

@@ -35,40 +35,35 @@ export const vaporTransitionImpl: VaporTransitionInterface = {
       warn(`invalid <transition> mode: ${mode}`)
     }
 
-    applyTransitionEnterHooks(
+    applyTransitionEnterHooks(children, {
-      children,
+      state: useTransitionState(),
-      useTransitionState(),
       props,
-      undefined,
+    } as VaporTransitionHooks)
-      false,
-    )
 
     return children
   },
 }
 
 const getTransitionHooksContext = (
-  key: string,
+  key: String,
-  block: Block,
   props: TransitionProps,
   state: TransitionState,
   instance: GenericComponentInstance,
   postClone: ((hooks: TransitionHooks) => void) | undefined,
 ) => {
+  const { leavingNodes } = state
   const context: TransitionHooksContext = {
     setLeavingNodeCache: el => {
-      const leavingNodeCache = getLeavingNodesForBlock(state, block)
+      leavingNodes.set(key, el)
-      leavingNodeCache[key] = el
     },
     unsetLeavingNodeCache: el => {
-      const leavingNodeCache = getLeavingNodesForBlock(state, block)
+      const leavingNode = leavingNodes.get(key)
-      if (leavingNodeCache[key] === el) {
+      if (leavingNode === el) {
-        delete leavingNodeCache[key]
+        leavingNodes.delete(key)
       }
     },
     earlyRemove: () => {
-      const leavingNodeCache = getLeavingNodesForBlock(state, block)
+      const leavingNode = leavingNodes.get(key)
-      const leavingNode = leavingNodeCache[key]
       if (leavingNode && (leavingNode as TransitionElement)[leaveCbKey]) {
         // force early removal (not cancelled)
         ;(leavingNode as TransitionElement)[leaveCbKey]!()
@@ -96,39 +91,24 @@ function resolveTransitionHooks(
   instance: GenericComponentInstance,
   postClone?: (hooks: TransitionHooks) => void,
 ): VaporTransitionHooks {
-  const key = String(block.key)
   const context = getTransitionHooksContext(
-    key,
+    String(block.key),
-    block,
     props,
     state,
     instance,
     postClone,
   )
-  const hooks: VaporTransitionHooks = baseResolveTransitionHooks(
+  const hooks = baseResolveTransitionHooks(
     context,
     props,
     state,
     instance,
-  )
+  ) as VaporTransitionHooks
   hooks.state = state
   hooks.props = props
   return hooks
 }
 
-function getLeavingNodesForBlock(
-  state: TransitionState,
-  block: Block,
-): Record<string, Block> {
-  const { leavingVNodes } = state
-  let leavingNodesCache = leavingVNodes.get(block)!
-  if (!leavingNodesCache) {
-    leavingNodesCache = Object.create(null)
-    leavingVNodes.set(block, leavingNodesCache)
-  }
-  return leavingNodesCache
-}
-
 function setTransitionHooks(block: Block, hooks: VaporTransitionHooks) {
   if (!isFragment(block)) {
     block.transition = hooks
@@ -137,28 +117,20 @@ function setTransitionHooks(block: Block, hooks: VaporTransitionHooks) {
 
 export function applyTransitionEnterHooks(
   block: Block,
-  state: TransitionState,
+  hooks: VaporTransitionHooks,
-  props: TransitionProps,
-  enterHooks?: VaporTransitionHooks,
-  clone: boolean = true,
 ): Block | undefined {
   const child = findElementChild(block)
   if (child) {
-    if (!enterHooks) {
+    const { props, state, delayedLeave } = hooks
-      enterHooks = resolveTransitionHooks(
+    let enterHooks = resolveTransitionHooks(
-        child,
-        props,
-        state,
-        currentInstance!,
-        hooks => (enterHooks = hooks),
-      )
-    }
-
-    setTransitionHooks(
       child,
-      clone ? enterHooks.clone(child as any) : enterHooks,
+      props,
+      state,
+      currentInstance!,
+      hooks => (enterHooks = hooks as VaporTransitionHooks),
     )
-
+    enterHooks.delayedLeave = delayedLeave
+    setTransitionHooks(child, enterHooks)
     if (isFragment(block)) {
       block.transitionChild = child
     }
@@ -168,15 +140,14 @@ export function applyTransitionEnterHooks(
 
 export function applyTransitionLeaveHooks(
   block: Block,
-  state: TransitionState,
+  enterHooks: VaporTransitionHooks,
-  props: TransitionProps,
   afterLeaveCb: () => void,
-  enterHooks: TransitionHooks,
 ): void {
   const leavingBlock = findElementChild(block)
   if (!leavingBlock) return undefined
 
-  let leavingHooks = resolveTransitionHooks(
+  const { props, state } = enterHooks
+  const leavingHooks = resolveTransitionHooks(
     leavingBlock,
     props,
     state,
@@ -198,8 +169,7 @@ export function applyTransitionLeaveHooks(
       earlyRemove,
       delayedLeave,
     ) => {
-      const leavingNodeCache = getLeavingNodesForBlock(state, leavingBlock)
+      state.leavingNodes.set(String(leavingBlock.key), leavingBlock)
-      leavingNodeCache[String(leavingBlock.key)] = leavingBlock
       // early removal callback
       block[leaveCbKey] = () => {
         earlyRemove()