fix(): dispose abstract nodes

Author: weareoutman

packages/runtime/src/internal/Renderer.ts

@@ -347,6 +347,7 @@ async function legacyRenderBrick(
       returnNode,
       {
         brick: ":if",
+        iid: brickConf.iid,
         dataSource: brickIf,
         // `permissionsPreCheck` maybe required before computing `if`.
         permissionsPreCheck,
@@ -463,11 +464,12 @@ async function legacyRenderBrick(
         (slots[slot] as SlotConfOfBricks)?.bricks;
 
       const output = getEmptyRenderOutput();
-      const controlNode: RenderAbstract = {
+      const abstractNode: RenderAbstract = {
         tag: RenderTag.ABSTRACT,
         return: returnNode,
+        iid: brickConf.iid,
       };
-      output.node = controlNode;
+      output.node = abstractNode;
 
       if (!Array.isArray(bricks)) {
         return output;
@@ -481,7 +483,7 @@ async function legacyRenderBrick(
             break;
           }
           childrenOutput = await renderForEach(
-            controlNode,
+            abstractNode,
             computedDataSource,
             bricks,
             runtimeContext,
@@ -497,7 +499,7 @@ async function legacyRenderBrick(
         case ":if":
         case ":switch": {
           childrenOutput = await renderBricks(
-            controlNode,
+            abstractNode,
             bricks,
             runtimeContext,
             rendererContext,
@@ -511,7 +513,7 @@ async function legacyRenderBrick(
       }
 
       if (childrenOutput) {
-        controlNode.child = childrenOutput.node;
+        abstractNode.child = childrenOutput.node;
         mergeRenderOutput(output, { ...childrenOutput, node: undefined });
       }
 
@@ -641,7 +643,7 @@ async function legacyRenderBrick(
         trailing: true,
       });
       const runtimeBrick =
-        returnNode.tag === RenderTag.BRICK ? returnNode : null;
+        returnNode.tag === RenderTag.ROOT ? null : returnNode;
       const disposes = runtimeBrick ? (runtimeBrick.disposes ??= []) : [];
       if (contextNames) {
         for (const contextName of contextNames) {
@@ -899,11 +901,11 @@ async function legacyRenderBrick(
         }
 
         let lastOutput = getEmptyRenderOutput();
-        const controlNode: RenderAbstract = {
+        const abstractNode: RenderAbstract = {
           tag: RenderTag.ABSTRACT,
           return: brick,
         };
-        lastOutput.node = controlNode;
+        lastOutput.node = abstractNode;
 
         const parentRoute = parentRoutes[parentRoutes.length - 1] as
           | RouteConfOfBricks
@@ -1034,7 +1036,7 @@ async function legacyRenderBrick(
         }
 
         const routesOutput = await renderRoutes(
-          controlNode,
+          abstractNode,
           slotConf.routes,
           childRuntimeContext,
           rendererContext,
@@ -1045,7 +1047,7 @@ async function legacyRenderBrick(
           initialTracker
         );
 
-        controlNode.child = routesOutput.node;
+        abstractNode.child = routesOutput.node;
         mergeRenderOutput(output, { ...routesOutput, node: undefined });
         appendMenuRequestNode(
           menuRequestReturnNode,

packages/runtime/src/internal/RendererContext.ts

@@ -15,6 +15,7 @@ import { getReadOnlyProxy } from "./proxyFactories.js";
 import { Media, mediaEventTarget } from "./mediaQuery.js";
 import type {
   MenuRequestNode,
+  RenderAbstract,
   RenderBrick,
   RenderChildNode,
   RenderNode,
@@ -359,6 +360,12 @@ export class RendererContext {
     }
   }
 
+  #unmountAbstracts(abstracts: Set<RenderAbstract>) {
+    for (const item of abstracts) {
+      item.disposes?.forEach((dispose) => dispose());
+    }
+  }
+
   #initializeRerenderBricks(bricks: Set<RenderBrick>): void {
     const mountEvent = new CustomEvent("mount");
     for (const { brick, handlers } of this.#memoizedLifeCycle.onMount) {
@@ -429,9 +436,11 @@ export class RendererContext {
       current = current.sibling;
     }
 
-    // Unmount previous bricks, including their descendants
-    const removeBricks = getContainedBricks(oldNode);
+    // Unmount previous brick and abstract nodes, including their descendants
+    const [removeBricks, removeAbstracts] =
+      getContainedBrickAndAbstractNodes(oldNode);
     this.#unmountBricks(removeBricks);
+    this.#unmountAbstracts(removeAbstracts);
 
     mountTree(renderRoot);
 
@@ -443,6 +452,11 @@ export class RendererContext {
     }
     node.sibling = oldNode.sibling;
 
+    // Clean up old node
+    delete oldNode.child;
+    delete oldNode.sibling;
+    delete (oldNode as Partial<RenderChildNode>).return;
+
     // Resume `return`
     current = node;
     while (current) {
@@ -486,7 +500,7 @@ export class RendererContext {
       portal.insertBefore(portalFragment, insertPortalBeforeChild);
     }
 
-    const newBricks = getContainedBricks(node);
+    const [newBricks] = getContainedBrickAndAbstractNodes(node);
     this.#initializeRerenderBricks(newBricks);
   }
 
@@ -768,12 +782,17 @@ function findNextSiblingNode(
   }
 }
 
-function getContainedBricks(node: RenderChildNode) {
-  const range = new Set<RenderBrick>();
+function getContainedBrickAndAbstractNodes(
+  node: RenderChildNode
+): [bricks: Set<RenderBrick>, abstracts: Set<RenderAbstract>] {
+  const bricks = new Set<RenderBrick>();
+  const abstracts = new Set<RenderAbstract>();
   let current: RenderNode | undefined = node;
   while (current) {
     if (current.tag === RenderTag.BRICK) {
-      range.add(current);
+      bricks.add(current);
+    } else if (current.tag === RenderTag.ABSTRACT) {
+      abstracts.add(current);
     }
     if (current.child) {
       current = current.child;
@@ -787,7 +806,7 @@ function getContainedBricks(node: RenderChildNode) {
       while (currentReturn) {
         if (currentReturn === node) {
           // End the loop when encounter the original node.
-          return range;
+          return [bricks, abstracts];
         }
         if (currentReturn.sibling) {
           break;
@@ -797,13 +816,19 @@ function getContainedBricks(node: RenderChildNode) {
       current = currentReturn?.sibling;
     }
   }
-  return range;
+  return [bricks, abstracts];
 }
 
 function getEntityReturnNode(node: RenderReturnNode): RenderRoot | RenderBrick {
   let current = node;
   while (current.tag === RenderTag.ABSTRACT) {
     current = current.return;
+    // istanbul ignore next
+    if (!current) {
+      throw new Error(
+        "Cannot find render root node. This is a bug of Brick Next, please report it."
+      );
+    }
   }
   return current;
 }

packages/runtime/src/internal/interfaces.ts

@@ -66,6 +66,8 @@ export interface RenderBrick extends BaseRenderNode, RuntimeBrick {
 export interface RenderAbstract extends BaseRenderNode {
   tag: RenderTag.ABSTRACT;
   return: RenderReturnNode;
+  iid?: string;
+  disposes?: (() => void)[];
 }
 
 export interface BaseRenderNode {