feat: Refactor KeepAlive to manage fragment scope and caching via new FragmentHooks on DynamicFragment.

Author: edison1105

packages/runtime-vapor/src/block.ts

@@ -160,11 +160,6 @@ export function remove(block: Block, parent?: ParentNode): void {
     if (block.anchor) remove(block.anchor, parent)
     if ((block as DynamicFragment).scope) {
       ;(block as DynamicFragment).scope!.stop()
-      const scopes = (block as DynamicFragment).keptAliveScopes
-      if (scopes) {
-        scopes.forEach(scope => scope.stop())
-        scopes.clear()
-      }
     }
   }
 }

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

@@ -29,8 +29,10 @@ import { createElement } from '../dom/node'
 import {
   type DynamicFragment,
   type VaporFragment,
+  isDynamicFragment,
   isFragment,
 } from '../fragment'
+import type { EffectScope } from '@vue/reactivity'
 
 export interface KeepAliveInstance extends VaporComponentInstance {
   activate: (
@@ -44,8 +46,6 @@ export interface KeepAliveInstance extends VaporComponentInstance {
     comp: VaporComponent,
   ) => VaporComponentInstance | VaporFragment | undefined
   getStorageContainer: () => ParentNode
-  processFragment: (fragment: DynamicFragment) => void
-  cacheFragment: (fragment: DynamicFragment) => void
 }
 
 type CacheKey = VaporComponent | VNode['type']
@@ -69,6 +69,7 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
     const cache: Cache = new Map()
     const keys: Keys = new Set()
     const storageContainer = createElement('div')
+    const keptAliveScopes = new Map<any, EffectScope>()
     let current: VaporComponentInstance | VaporFragment | undefined
 
     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
@@ -163,6 +164,8 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
 
         remove(cached, storageContainer)
       })
+      keptAliveScopes.forEach(scope => scope.stop())
+      keptAliveScopes.clear()
     })
 
     keepAliveInstance.getStorageContainer = () => storageContainer
@@ -177,7 +180,7 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
       innerCacheBlock(instance.type, instance)
     }
 
-    keepAliveInstance.processFragment = (frag: DynamicFragment) => {
+    const processFragment = (frag: DynamicFragment) => {
       const innerBlock = getInnerBlock(frag.nodes)
       if (!innerBlock) return
 
@@ -199,7 +202,7 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
       }
     }
 
-    keepAliveInstance.cacheFragment = (fragment: DynamicFragment) => {
+    const cacheFragment = (fragment: DynamicFragment) => {
       const innerBlock = getInnerBlock(fragment.nodes)
       if (!innerBlock || !shouldCache(innerBlock)) return
 
@@ -208,7 +211,7 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
       let key: CacheKey
 
       // find vdom interop fragment
-      const frag = findInteropFragment(fragment)
+      const frag = findInteropFragment(fragment.nodes)
       if (frag) {
         frag.vnode!.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
         toCache = frag
@@ -256,6 +259,27 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
       children.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
     } else if (isInteropFragment(children)) {
       children.vnode!.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
+    } else if (isDynamicFragment(children)) {
+      children.hooks = {
+        beforeUpdate(oldKey, newKey) {
+          processFragment(children)
+          const scope = children.scope
+          if (scope) {
+            keptAliveScopes.set(oldKey, scope)
+          }
+        },
+        afterUpdate(newKey, nodes, scope) {
+          cacheFragment(children)
+        },
+        getScope(key) {
+          const scope = keptAliveScopes.get(key)
+          if (scope) {
+            keptAliveScopes.delete(key)
+            return scope
+          }
+        },
+      }
+      cacheFragment(children)
     }
 
     function pruneCache(filter: (name: string) => boolean) {

packages/runtime-vapor/src/fragment.ts

@@ -11,16 +11,12 @@ import {
   remove,
 } from './block'
 import {
-  type GenericComponentInstance,
   type TransitionHooks,
   type VNode,
-  currentInstance,
-  isKeepAlive,
   queuePostFlushCb,
 } from '@vue/runtime-dom'
 import type { VaporComponentInstance } from './component'
 import type { NodeRef } from './apiTemplateRef'
-import type { KeepAliveInstance } from './components/KeepAlive'
 import {
   applyTransitionHooks,
   applyTransitionLeaveHooks,
@@ -33,6 +29,12 @@ import {
   locateHydrationNode,
 } from './dom/hydration'
 
+export interface FragmentHooks {
+  getScope(key: any): EffectScope | undefined
+  beforeUpdate(oldKey: any, newKey: any): void
+  afterUpdate(newKey: any, nodes: Block, scope: EffectScope): void
+}
+
 export class VaporFragment<T extends Block = Block>
   implements TransitionOptions
 {
@@ -73,8 +75,7 @@ export class DynamicFragment extends VaporFragment {
   current?: BlockFn
   fallback?: BlockFn
   anchorLabel?: string
-  inKeepAlive?: boolean
-  keptAliveScopes?: Map<any, EffectScope>
+  hooks?: FragmentHooks
 
   constructor(anchorLabel?: string) {
     super([])
@@ -97,21 +98,17 @@ export class DynamicFragment extends VaporFragment {
     const prevSub = setActiveSub()
     const parent = isHydrating ? null : this.anchor.parentNode
     const transition = this.$transition
-    const instance = currentInstance!
-    this.inKeepAlive = isKeepAlive(instance)
     // teardown previous branch
     if (this.scope) {
-      if (this.inKeepAlive) {
-        ;(instance as KeepAliveInstance).processFragment(this)
-        if (!this.keptAliveScopes) this.keptAliveScopes = new Map()
-        this.keptAliveScopes.set(this.current, this.scope)
+      if (this.hooks) {
+        this.hooks.beforeUpdate(this.current, key)
       } else {
         this.scope.stop()
       }
       const mode = transition && transition.mode
       if (mode) {
         applyTransitionLeaveHooks(this.nodes, transition, () =>
-          this.render(render, instance, transition, parent),
+          this.render(render, transition, parent),
         )
         parent && remove(this.nodes, parent)
         if (mode === 'out-in') {
@@ -123,7 +120,7 @@ export class DynamicFragment extends VaporFragment {
       }
     }
 
-    this.render(render, instance, transition, parent)
+    this.render(render, transition, parent)
 
     if (this.fallback) {
       // set fallback for nested fragments
@@ -155,27 +152,22 @@ export class DynamicFragment extends VaporFragment {
 
   private render(
     render: BlockFn | undefined,
-    instance: GenericComponentInstance,
     transition: VaporTransitionHooks | undefined,
     parent: ParentNode | null,
   ) {
     if (render) {
       // For KeepAlive, try to reuse the keepAlive scope for this key
-      const scope =
-        this.inKeepAlive && this.keptAliveScopes
-          ? this.keptAliveScopes.get(this.current)
-          : undefined
+      const scope = this.hooks && this.hooks.getScope(this.current)
       if (scope) {
         this.scope = scope
-        this.keptAliveScopes!.delete(this.current!)
-        this.scope.resume()
       } else {
         this.scope = new EffectScope()
       }
 
       this.nodes = this.scope.run(render) || []
-      if (this.inKeepAlive) {
-        ;(instance as KeepAliveInstance).cacheFragment(this)
+
+      if (this.hooks) {
+        this.hooks.afterUpdate(this.current, this.nodes, this.scope)
       }
       if (transition) {
         this.$transition = applyTransitionHooks(this.nodes, transition)
@@ -287,3 +279,9 @@ function findInvalidFragment(fragment: VaporFragment): VaporFragment | null {
 export function isFragment(val: NonNullable<unknown>): val is VaporFragment {
   return val instanceof VaporFragment
 }
+
+export function isDynamicFragment(
+  val: NonNullable<unknown>,
+): val is DynamicFragment {
+  return val instanceof DynamicFragment
+}