Merge pull request #4797 from easyops-cn/steve/v3-isolated-templates

Steve/v3-isolated-templates

Author: weareoutman

packages/runtime/src/CustomTemplates.spec.ts

@@ -102,14 +102,18 @@ describe("customTemplates", () => {
       runtimeContext,
     };
     (refA.element as any).propA = "a2";
-    const methodM = ((refA.element as any).methodM = jest.fn(() => "M"));
+    const methodM = ((refA.element as any).methodM = jest.fn(
+      (_v?: unknown) => "M"
+    ));
     const refB: RuntimeBrick = {
       type: "div",
       element: document.createElement("div"),
       runtimeContext,
     };
     (refB.element as any).propC = "b2";
-    const methodL = ((refB.element as any).methodL = jest.fn(() => "L"));
+    const methodL = ((refB.element as any).methodL = jest.fn(
+      (_v?: unknown) => "L"
+    ));
     const hostBrick: RuntimeBrick = {
       type: "tpl-proxy",
       tplHostMetadata: {
@@ -322,5 +326,9 @@ describe("customTemplates", () => {
     const tpl = document.createElement("tpl-existed") as RuntimeBrickElement;
     expect(tpl.$$typeof).toBe(undefined);
     expect(tpl.constructor).toBe(TplExistedElement);
+
+    // No effect for non-isolated registry
+    customTemplates.clearIsolatedRegistry();
+    expect(customTemplates.get("tpl-existed")).toBeDefined();
   });
 });

packages/runtime/src/createRoot.spec.ts

@@ -3,7 +3,6 @@ import { unstable_createRoot } from "./createRoot.js";
 import { applyTheme } from "./themeAndMode.js";
 
 initializeI18n();
-const consoleError = jest.spyOn(console, "error");
 jest.mock("./themeAndMode.js");
 window.scrollTo = jest.fn();
 
@@ -200,6 +199,7 @@ describe("preview", () => {
   });
 
   test("unknown bricks", async () => {
+    const consoleError = jest.spyOn(console, "error");
     consoleError.mockReturnValue();
     const root = unstable_createRoot(container, { unknownBricks: "silent" });
 
@@ -230,6 +230,7 @@ describe("preview", () => {
     root.unmount();
     expect(container.innerHTML).toBe("");
     expect(portal.innerHTML).toBe("");
+    consoleError.mockRestore();
   });
 
   test("fail", async () => {
@@ -351,6 +352,8 @@ describe("preview", () => {
   });
 
   test("templates in scope fragment", async () => {
+    const consoleWarn = jest.spyOn(console, "warn");
+    consoleWarn.mockReturnValue();
     const root = unstable_createRoot(container);
 
     await root.render(
@@ -380,10 +383,43 @@ describe("preview", () => {
     expect(tpl?.tagName.toLowerCase()).toBe("isolated-tpl-a");
     expect(tpl?.innerHTML).toBe("<p>Template A</p>");
 
+    expect(consoleWarn).toHaveBeenCalledTimes(0);
+
+    // Redefine the same template.
+    await root.render(
+      [
+        {
+          brick: "isolated-tpl-a",
+        },
+      ],
+      {
+        templates: [
+          {
+            name: "isolated-tpl-a",
+            bricks: [
+              {
+                brick: "p",
+                properties: {
+                  textContent: "Template A Updated",
+                },
+              },
+            ],
+          },
+        ],
+      }
+    );
+    expect(container.firstElementChild?.innerHTML).toBe(
+      "<p>Template A Updated</p>"
+    );
+    expect(consoleWarn).toHaveBeenCalledTimes(1);
+
     root.unmount();
+    consoleWarn.mockRestore();
   });
 
   test("using unknown templates in scope fragment", async () => {
+    const consoleError = jest.spyOn(console, "error");
+    consoleError.mockReturnValue();
     const root = unstable_createRoot(container);
 
     await root.render([
@@ -397,5 +433,6 @@ describe("preview", () => {
     expect(tpl?.innerHTML).toBe("");
 
     root.unmount();
+    consoleError.mockRestore();
   });
 });

packages/theme/src/elevo.css

@@ -11,7 +11,6 @@
   --elevo-component-backdrop-filter: blur(33px);
 
   --elevo-input-background: rgba(255, 255, 255, 0.8);
-  --elevo-input-box-shadow: inset 0px -1px 3px 0px
-    rgba(var(--elevo-color-brand-rgb-channel), 0.5);
+  --elevo-input-box-shadow: none;
   --elevo-placeholder-color: rgba(0, 10, 26, 0.26);
 }