Merge pull request #4743 from easyops-cn/steve/v3-control-node-bug

Steve/v3-control-node-bug

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,90 @@ 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
+
+- path: '${APP.homepage}/debug'
+  context:
+  - name: debug
+    value: false
+  bricks:
+  - brick: button
+    properties:
+      textContent: Toggle Debug
+    events:
+      click:
+      - action: context.replace
+        args:
+        - debug
+        - <% !CTX.debug %>
+  - brick: e2e.list-by-use-brick
+    properties:
+      data: [1, 2]
+      useBrick:
+      - brick: div
+        children:
+        - brick: div
+          portal: true
+          children:
+          - brick: :if
+            dataSource: <%= CTX.debug %>
+            children:
+            - brick: p
+              properties:
+                textContent: '<% `Debug: ${DATA}` %>'

packages/brick-container/scripts/start.js

@@ -28,6 +28,7 @@ const server = new WebpackDevServer(
     hot: true,
     client: {
       overlay: false,
+      logging: "warn",
     },
     devMiddleware: {
       publicPath: baseHref,

packages/react-runtime/src/ReactUseBrick.tsx

@@ -76,12 +76,10 @@ let ReactUseBrick = function ReactUseBrick({
     (element: HTMLElement | null) => {
       if (element) {
         mountResult.current = __secret_internals.mountUseBrick(
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           renderResult!,
           element
         );
       } else {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         __secret_internals.unmountUseBrick(renderResult!, mountResult.current!);
         mountResult.current = undefined;
       }
@@ -102,7 +100,7 @@ let ReactUseBrick = function ReactUseBrick({
     return null;
   }
 
-  const WebComponent = tagName as any;
+  const WebComponent = tagName as "div";
   return <WebComponent key={renderKey} ref={_refCallback} />;
 };