wip: tweaks

Author: edison1105

packages/runtime-vapor/src/block.ts

@@ -149,13 +149,10 @@ 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 pausedScopes = (block as DynamicFragment).pausedScopes
-      if (pausedScopes) {
-        for (let i = 0; i < pausedScopes.length; i++) {
-          pausedScopes[i].stop()
-        }
-        pausedScopes.length = 0
+      const scopes = (block as DynamicFragment).keptAliveScopes
+      if (scopes) {
+        scopes.forEach(scope => scope.stop())
+        scopes.clear()
       }
     }
   }

packages/runtime-vapor/src/fragment.ts

@@ -73,7 +73,8 @@ export class DynamicFragment extends VaporFragment {
   current?: BlockFn
   fallback?: BlockFn
   anchorLabel?: string
-  pausedScopes?: EffectScope[]
+  inKeepAlive?: boolean
+  keptAliveScopes?: Map<any, EffectScope>
 
   constructor(anchorLabel?: string) {
     super([])
@@ -97,14 +98,13 @@ export class DynamicFragment extends VaporFragment {
     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 (isKeepAlive(instance)) {
+      if (this.inKeepAlive) {
         ;(instance as KeepAliveInstance).processFragment(this)
-        // Pause the scope and store it for later cleanup
-        this.scope.pause()
-        ;(this.pausedScopes || (this.pausedScopes = [])).push(this.scope)
+        if (!this.keptAliveScopes) this.keptAliveScopes = new Map()
+        this.keptAliveScopes.set(this.current, this.scope)
       } else {
         this.scope.stop()
       }
@@ -160,9 +160,21 @@ export class DynamicFragment extends VaporFragment {
     parent: ParentNode | null,
   ) {
     if (render) {
-      this.scope = new EffectScope()
+      // For KeepAlive, try to reuse the keepAlive scope for this key
+      const scope =
+        this.inKeepAlive && this.keptAliveScopes
+          ? this.keptAliveScopes.get(this.current)
+          : undefined
+      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 (isKeepAlive(instance)) {
+      if (this.inKeepAlive) {
         ;(instance as KeepAliveInstance).cacheFragment(this)
       }
       if (transition) {