Merge pull request #4538 from easyops-cn/steve/v3-fix-rerender

Steve/v3-fix-rerender
easyops-cn · Oct 30, 2024 · 6e6758f · 6e6758f
2 parents 4d4bc39 + 4e8953f
commit 6e6758f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 27 deletions.
diff --git a/packages/monaco-contributions/yaml.js b/packages/monaco-contributions/yaml.js
@@ -19,13 +19,6 @@ export const conf = {
     { open: '"', close: '"' },
     { open: "'", close: "'" },
   ],
-  surroundingPairs: [
-    { open: "{", close: "}" },
-    { open: "[", close: "]" },
-    { open: "(", close: ")" },
-    { open: '"', close: '"' },
-    { open: "'", close: "'" },
-  ],
   folding: {
     offSide: true,
   },
@@ -312,9 +305,10 @@ export const language = {
       [
         /(<%[~=]?)/,
         {
-          token: "white",
+          token: "delimiter",
           next: "@expressionEmbedded",
           nextEmbedded: "text/javascript",
+          bracket: "@open",
         },
       ],
       [

diff --git a/packages/runtime/src/internal/CustomTemplates/setupTemplateProxy.ts b/packages/runtime/src/internal/CustomTemplates/setupTemplateProxy.ts
@@ -58,7 +58,7 @@ export function setupTemplateProxy(
 
     if (slotProxies && slotted) {
       throw new Error(
-        `Can not have proxied slot ref when the parent has a slot element child, check your template "${hostBrick.type}" and ref "${ref}"`
+        `Can not have proxied slot ref when the ref target has a slot element child, check your template "${hostBrick.type}" and ref "${ref}"`
       );
     }
 

diff --git a/packages/runtime/src/internal/Renderer.spec.ts b/packages/runtime/src/internal/Renderer.spec.ts
@@ -3447,7 +3447,7 @@ describe("renderBrick for tpl", () => {
         {}
       )
     ).rejects.toMatchInlineSnapshot(
-      `[Error: Can not have proxied slot ref when the parent has a slot element child, check your template "my.tpl-m" and ref "main"]`
+      `[Error: Can not have proxied slot ref when the ref target has a slot element child, check your template "my.tpl-m" and ref "main"]`
     );
   });
 });

diff --git a/packages/runtime/src/internal/Renderer.ts b/packages/runtime/src/internal/Renderer.ts
@@ -503,10 +503,26 @@ async function legacyRenderBrick(
       }
     };
 
-    const renderControlNode = async (
-      runtimeContext: RuntimeContext,
-      type: "initial" | "rerender"
-    ) => {
+    type RenderControlNodeOptions =
+      | {
+          type: "initial";
+          runtimeContext: RuntimeContext;
+          tplStateStoreScope?: undefined;
+          formStateStoreScope?: undefined;
+        }
+      | {
+          type: "rerender";
+          runtimeContext: RuntimeContext;
+          tplStateStoreScope: DataStore<"STATE">[];
+          formStateStoreScope: DataStore<"FORM_STATE">[];
+        };
+
+    const renderControlNode = async ({
+      type,
+      runtimeContext,
+      tplStateStoreScope,
+      formStateStoreScope,
+    }: RenderControlNodeOptions) => {
       let changedAfterInitial = false;
       const tracker: InitialTracker = {
         disposes: [],
@@ -531,6 +547,16 @@ async function legacyRenderBrick(
           tracker,
           uninitialized && type === "initial"
         );
+
+        // Changes may happen during `postAsyncRender`.
+        if (!changedAfterInitial && type === "rerender") {
+          const scopedStores = [...tplStateStoreScope, ...formStateStoreScope];
+          await postAsyncRender(rawOutput, runtimeContext, [
+            runtimeContext.ctxStore,
+            ...scopedStores,
+          ]);
+        }
+
         tracker.disposes.forEach((dispose) => dispose());
         tracker.disposes.length = 0;
         uninitialized = false;
@@ -549,7 +575,10 @@ async function legacyRenderBrick(
       return rawOutput!;
     };
 
-    const controlledOutput = await renderControlNode(runtimeContext, "initial");
+    const controlledOutput = await renderControlNode({
+      type: "initial",
+      runtimeContext,
+    });
 
     const { onMount, onUnmount } = brickConf.lifeCycle ?? {};
 
@@ -561,17 +590,12 @@ async function legacyRenderBrick(
         const [scopedRuntimeContext, tplStateStoreScope, formStateStoreScope] =
           createScopedRuntimeContext(runtimeContext);
 
-        const reControlledOutput = await renderControlNode(
-          scopedRuntimeContext,
-          "rerender"
-        );
-
-        const scopedStores = [...tplStateStoreScope, ...formStateStoreScope];
-        await postAsyncRender(
-          reControlledOutput,
-          scopedRuntimeContext,
-          scopedStores
-        );
+        const reControlledOutput = await renderControlNode({
+          type: "rerender",
+          runtimeContext: scopedRuntimeContext,
+          tplStateStoreScope,
+          formStateStoreScope,
+        });
 
         // Ignore stale renders
         if (renderId === currentRenderId) {
@@ -596,7 +620,7 @@ async function legacyRenderBrick(
             )(new CustomEvent("mount", { detail: { rerender: true } }));
           }
 
-          for (const store of scopedStores) {
+          for (const store of [...tplStateStoreScope, ...formStateStoreScope]) {
             store.mountAsyncData();
           }
         }

diff --git a/packages/runtime/src/internal/secret_internals.spec.ts b/packages/runtime/src/internal/secret_internals.spec.ts
@@ -267,6 +267,9 @@ describe("useBrick", () => {
   });
 
   test("tpl", async () => {
+    mockInternalApiGetRuntimeContext.mockReturnValue({
+      ctxStore: new DataStore("CTX"),
+    } as RuntimeContext);
     consoleInfo.mockReturnValue();
     customTemplates.define("my.tpl-a", {
       state: [
@@ -472,6 +475,7 @@ describe("useBrick", () => {
     unmountUseBrick(renderResult, mountResult);
 
     consoleInfo.mockReset();
+    mockInternalApiGetRuntimeContext.mockReturnValue(undefined);
   });
 
   test("root as portal", async () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3447,7 +3447,7 @@ describe("renderBrick for tpl", () => { @@
             {}
           )
         ).rejects.toMatchInlineSnapshot(
-          `[Error: Can not have proxied slot ref when the parent has a slot element child, check your template "my.tpl-m" and ref "main"]`
+          `[Error: Can not have proxied slot ref when the ref target has a slot element child, check your template "my.tpl-m" and ref "main"]`
         );
       });
     });
@@ Expand Down @@