fix(): fix non-relevant nodes been removed when re-rendering nested :if

Author: weareoutman

cypress/e2e/control-nodes.spec.js

@@ -263,5 +263,29 @@ for (const port of Cypress.env("ports")) {
 
       cy.get("@console.error").should("not.be.called");
     });
+
+    it("should handle nested :if rerender", () => {
+      cy.visit(`${origin}/e2e/nested-if`, {
+        onBeforeLoad(win) {
+          cy.spy(win.console, "error").as("console.error");
+        },
+      });
+
+      cy.expectMainContents([
+        "Click 1Click 2Second button is not clicked",
+        "This should always be shown",
+      ]);
+
+      cy.contains("Click 1").click();
+      cy.expectMainContents([
+        "Click 1Click 2Second button is not clicked",
+        "This should always be shown",
+      ]);
+
+      cy.contains("Click 2").click();
+      cy.expectMainContents(["Click 1Click 2", "This should always be shown"]);
+
+      cy.get("@console.error").should("not.be.called");
+    });
   });
 }

mock-micro-apps/e2e/storyboard.yaml

@@ -1040,3 +1040,60 @@ routes:
   #       - path: '${APP.homepage}/initial-rerender/apps/:group?'
   #         exact: true
   #         bricks: []
+
+- path: '${APP.homepage}/nested-if'
+  context:
+  - name: value
+    value: null
+  - name: alwaysFalsy
+    value: <% !!CTX.value %>
+    track: true
+  - name: secondButtonClicked
+    value: false
+  bricks:
+  - brick: div
+    iid: 1
+    children:
+    - brick: p
+      iid: 2
+      children:
+      - brick: button
+        iid: 3
+        properties:
+          textContent: Click 1
+        events:
+          click:
+          - action: context.replace
+            args:
+            - value
+            - false
+      - brick: button
+        iid: 4
+        properties:
+          textContent: Click 2
+        events:
+          click:
+          - action: context.replace
+            args:
+            - secondButtonClicked
+            - true
+    - brick: :if
+      iid: 5
+      dataSource: <%= !CTX.secondButtonClicked %>
+      children:
+      - brick: p
+        iid: 6
+        properties:
+          textContent: Second button is not clicked
+      - brick: :if
+        iid: 7
+        dataSource: <%= CTX.alwaysFalsy %>
+        children:
+        - brick: p
+          iid: 8
+          properties:
+            textContent: This should never be shown
+  - brick: p
+    iid: 9
+    properties:
+      textContent: This should always be shown

packages/runtime/src/internal/Renderer.ts

@@ -587,6 +587,7 @@ async function legacyRenderBrick(
 
       rawOutput!.node ??= {
         tag: RenderTag.PLACEHOLDER,
+        iid: brickConf.iid,
         return: returnNode,
         tracking,
       };

packages/runtime/src/internal/RendererContext.ts

@@ -160,6 +160,13 @@ export class RendererContext {
       }
     >
   >;
+  #reversedMemoized?: WeakMap<
+    RenderChildNode,
+    Array<{
+      returnNode: RenderNode;
+      memKey: string;
+    }>
+  >;
 
   #initialMenuRequestNode?: MenuRequestNode;
   #memoizedMenuRequestNodeMap?: WeakMap<
@@ -404,22 +411,47 @@ export class RendererContext {
       this.#memoized.set(returnNode, mem);
     }
 
+    const last = getLastNode(node);
+    const lastNormal = getLastNormalNode(node);
+    const lastPortal = getLastPortalNode(node);
+
+    this.#reverseMemoize(returnNode, memKey, last);
+
     mem.set(memKey, {
       node,
-      last: getLastNode(node),
-      lastNormal: getLastNormalNode(node),
-      lastPortal: getLastPortalNode(node),
+      last,
+      lastNormal,
+      lastPortal,
     });
   }
 
+  #reverseMemoize(
+    returnNode: RenderReturnNode,
+    memKey: string,
+    last: RenderChildNode | undefined
+  ) {
+    if (last) {
+      if (!this.#reversedMemoized) {
+        this.#reversedMemoized = new WeakMap();
+      }
+      let list = this.#reversedMemoized.get(last);
+      if (!list) {
+        this.#reversedMemoized.set(last, (list = []));
+      }
+      list.push({
+        returnNode,
+        memKey,
+      });
+    }
+  }
+
   reRender(
     slotId: string | undefined,
     keyPath: number[],
     node: RenderChildNode | undefined,
     returnNode: RenderReturnNode
   ) {
     const memKey = [slotId ?? "", ...keyPath].join(".");
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const memoized = this.#memoized!.get(returnNode)!.get(memKey)!;
     const {
       node: prevNode,
@@ -460,6 +492,23 @@ export class RendererContext {
     memoized.lastNormal = getLastNormalNode(node);
     memoized.lastPortal = getLastPortalNode(node);
 
+    if (prevLast) {
+      const prevList = this.#reversedMemoized?.get(prevLast);
+      for (const item of prevList ?? []) {
+        const mem = this.#memoized!.get(item.returnNode)!.get(item.memKey);
+        if (mem) {
+          mem.last = last;
+
+          if (mem.lastNormal === prevLast && memoized.lastNormal === last) {
+            mem.lastNormal = last;
+          }
+        }
+      }
+      this.#reversedMemoized?.delete(prevLast);
+    }
+
+    this.#reverseMemoize(returnNode, memKey, last);
+
     // Figure out the unchanged prev sibling and next sibling
     let prevSibling: RenderChildNode | undefined;
     let current = returnNode.child;
@@ -565,6 +614,7 @@ export class RendererContext {
       this.#mediaListener = undefined;
     }
     this.#memoized = undefined;
+    this.#reversedMemoized = undefined;
     this.#arbitraryLifeCycle.clear();
     this.#incrementalRenderStates.clear();
     this.#memoizedMenuRequestNodeMap = undefined;

packages/runtime/src/internal/interfaces.ts

@@ -68,6 +68,7 @@ export interface RenderPlaceholder extends BaseRenderNode {
   tag: RenderTag.PLACEHOLDER;
   return: RenderReturnNode;
   tracking?: boolean;
+  iid?: string;
 }
 
 export interface BaseRenderNode {