wip: handle props update

packages/runtime-vapor/src/apiCreateFor.ts

@@ -22,7 +22,7 @@ import { currentInstance, isVaporComponent } from './component'
 import type { DynamicSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
 import { VaporVForFlags } from '../../shared/src/vaporFlags'
-import { applyTransitionEnterHooks } from './components/Transition'
+import { applyTransitionHooks } from './components/Transition'
 
 class ForBlock extends VaporFragment {
   scope: EffectScope | undefined
@@ -318,7 +318,7 @@ export const createFor = (
 
     // apply transition for new nodes
     if (frag.$transition) {
-      applyTransitionEnterHooks(block.nodes, frag.$transition)
+      applyTransitionHooks(block.nodes, frag.$transition)
     }
 
     if (parent) insert(block.nodes, parent, anchor)

packages/runtime-vapor/src/block.ts

@@ -16,7 +16,7 @@ import {
   performTransitionLeave,
 } from '@vue/runtime-dom'
 import {
-  applyTransitionEnterHooks,
+  applyTransitionHooks,
   applyTransitionLeaveHooks,
 } from './components/Transition'
 
@@ -85,7 +85,7 @@ export class DynamicFragment extends VaporFragment {
         this.scope = new EffectScope()
         this.nodes = this.scope.run(render) || []
         if (transition) {
-          this.$transition = applyTransitionEnterHooks(this.nodes, transition)
+          this.$transition = applyTransitionHooks(this.nodes, transition)
         }
         if (parent) insert(this.nodes, parent, this.anchor)
       } else {

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

@@ -43,16 +43,23 @@ export const VaporTransition: FunctionalComponent<TransitionProps> =
     let resolvedProps
     renderEffect(() => {
       resolvedProps = resolveTransitionProps(props)
+      // only update props for Fragment block, for later reusing
       if (isFragment(children) && children.$transition) {
         children.$transition.props = resolvedProps
+      } else {
+        // replace existing transition hooks
+        const child = findTransitionBlock(children)
+        if (child && child.$transition) {
+          child.$transition.props = resolvedProps
+          applyTransitionHooks(child, child.$transition)
+        }
       }
     })
 
-    const hooks = {
+    applyTransitionHooks(children, {
       state: useTransitionState(),
       props: resolvedProps!,
-    } as VaporTransitionHooks
+    } as VaporTransitionHooks)
-    applyTransitionEnterHooks(children, hooks)
 
     return children
   })
@@ -122,7 +129,7 @@ export function resolveTransitionHooks(
   return hooks
 }
 
-export function applyTransitionEnterHooks(
+export function applyTransitionHooks(
   block: Block,
   hooks: VaporTransitionHooks,
 ): VaporTransitionHooks {
@@ -130,20 +137,20 @@ export function applyTransitionEnterHooks(
   if (!child) return hooks
 
   const { props, state, delayedLeave } = hooks
-  let enterHooks = resolveTransitionHooks(
+  let resolvedHooks = resolveTransitionHooks(
     child,
     props,
     state,
     currentInstance!,
-    hooks => (enterHooks = hooks as VaporTransitionHooks),
+    hooks => (resolvedHooks = hooks as VaporTransitionHooks),
   )
-  enterHooks.delayedLeave = delayedLeave
+  resolvedHooks.delayedLeave = delayedLeave
-  setTransitionHooks(child, enterHooks)
+  setTransitionHooks(child, resolvedHooks)
   if (isFragment(block)) {
     // also set transition hooks on fragment for reusing during it's updating
-    setTransitionHooksToFragment(block, enterHooks)
+    setTransitionHooksToFragment(block, resolvedHooks)
   }
-  return enterHooks
+  return resolvedHooks
 }
 
 export function applyTransitionLeaveHooks(