feat(): support isolated templates

Author: weareoutman

packages/runtime/src/CustomTemplates.ts

@@ -18,8 +18,13 @@ interface LegacyTplPropProxy extends CustomTemplateProxyBasicProperty {
   refTransform?: unknown;
 }
 
-class CustomTemplateRegistry {
+export class CustomTemplateRegistry {
   readonly #registry = new Map<string, CustomTemplate>();
+  readonly #isolated: boolean | undefined;
+
+  constructor(isolated?: boolean) {
+    this.#isolated = isolated;
+  }
 
   define(tagName: string, constructor: CustomTemplateConstructor): void {
     let registered = this.#registry.has(tagName);
@@ -179,7 +184,6 @@ class CustomTemplateRegistry {
       }
       Object.defineProperty(TplElement.prototype, propName, {
         get(this: RuntimeBrickElement) {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           return this.$$tplStateStore!.getValue(propName);
         },
         set(this: RuntimeBrickElement, value: unknown) {
@@ -194,7 +198,6 @@ class CustomTemplateRegistry {
     for (const [from, to] of validProxyProps) {
       Object.defineProperty(TplElement.prototype, from, {
         get(this: TplElement) {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           const element = this.$$getElementByRef!(to.ref) as unknown as Record<
             string,
             unknown
@@ -218,7 +221,6 @@ class CustomTemplateRegistry {
     for (const [from, to] of proxyMethods) {
       Object.defineProperty(TplElement.prototype, from, {
         value(this: TplElement, ...args: unknown[]) {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           const element = this.$$getElementByRef!(to.ref) as unknown as Record<
             string,
             Function
@@ -235,6 +237,12 @@ class CustomTemplateRegistry {
   get(tagName: string) {
     return this.#registry.get(tagName);
   }
+
+  clearIsolatedRegistry() {
+    if (this.#isolated) {
+      this.#registry.clear();
+    }
+  }
 }
 
 function getExposedStates(state: ContextConf[] | undefined): string[] {

packages/runtime/src/StoryboardFunctionRegistry.ts

@@ -114,7 +114,7 @@ export function StoryboardFunctionRegistryFactory({
   let currentApp: PartialMicroApp | undefined;
 
   function registerStoryboardFunctions(
-    functions: StoryboardFunction[],
+    functions: StoryboardFunction[] | undefined,
     app?: PartialMicroApp
   ): void {
     if (app) {

packages/runtime/src/createRoot.spec.ts

@@ -349,4 +349,53 @@ describe("preview", () => {
 
     root.unmount();
   });
+
+  test("templates in scope fragment", async () => {
+    const root = unstable_createRoot(container);
+
+    await root.render(
+      [
+        {
+          brick: "isolated-tpl-a",
+        },
+      ],
+      {
+        templates: [
+          {
+            name: "isolated-tpl-a",
+            bricks: [
+              {
+                brick: "p",
+                properties: {
+                  textContent: "Template A",
+                },
+              },
+            ],
+          },
+        ],
+      }
+    );
+
+    const tpl = container.firstElementChild;
+    expect(tpl?.tagName.toLowerCase()).toBe("isolated-tpl-a");
+    expect(tpl?.innerHTML).toBe("<p>Template A</p>");
+
+    root.unmount();
+  });
+
+  test("using unknown templates in scope fragment", async () => {
+    const root = unstable_createRoot(container);
+
+    await root.render([
+      {
+        brick: "isolated-tpl-b",
+      },
+    ]);
+
+    const tpl = container.firstElementChild;
+    expect(tpl?.tagName.toLowerCase()).toBe("isolated-tpl-b");
+    expect(tpl?.innerHTML).toBe("");
+
+    root.unmount();
+  });
 });

packages/runtime/src/createRoot.ts

@@ -32,6 +32,10 @@ import {
   isolatedFunctionRegistry,
   registerIsolatedFunctions,
 } from "./internal/compute/IsolatedFunctions.js";
+import {
+  isolatedTemplateRegistryMap,
+  registerIsolatedTemplates,
+} from "./internal/IsolatedTemplates.js";
 
 export interface CreateRootOptions {
   portal?: HTMLElement;
@@ -197,7 +201,8 @@ export function unstable_createRoot(
         // Register functions.
         registerStoryboardFunctions(functions, app);
       } else {
-        registerIsolatedFunctions(isolatedRoot!, functions ?? []);
+        registerIsolatedTemplates(isolatedRoot!, templates);
+        registerIsolatedFunctions(isolatedRoot!, functions);
       }
 
       runtimeContext.ctxStore.define(context, runtimeContext);
@@ -272,6 +277,7 @@ export function unstable_createRoot(
       unmounted = true;
       if (isolatedRoot) {
         isolatedFunctionRegistry.delete(isolatedRoot);
+        isolatedTemplateRegistryMap.delete(isolatedRoot);
       }
       unmountTree(container);
       if (portal) {

packages/runtime/src/index.ts

@@ -1,7 +1,7 @@
 export * from "./auth.js";
 export * from "./CustomEditors.js";
 export * from "./CustomProcessors.js";
-export * from "./CustomTemplates.js";
+export { customTemplates } from "./CustomTemplates.js";
 export * from "./fetchByProvider.js";
 export * from "./getBasePath.js";
 export * from "./getPageInfo.js";

packages/runtime/src/internal/CustomTemplates/expandCustomTemplate.ts

@@ -21,6 +21,7 @@ import { childrenToSlots } from "../Renderer.js";
 import { hooks } from "../Runtime.js";
 import type { RendererContext } from "../RendererContext.js";
 import { replaceSlotWithSlottedBricks } from "./replaceSlotWithSlottedBricks.js";
+import { isolatedTemplateRegistryMap } from "../IsolatedTemplates.js";
 
 export function expandCustomTemplate<T extends BrickConf | UseSingleBrickConf>(
   tplTagName: string,
@@ -52,7 +53,12 @@ export function expandCustomTemplate<T extends BrickConf | UseSingleBrickConf>(
     runtimeContext.tplStateStoreScope.push(tplStateStore);
   }
 
-  const { bricks, proxy, state, contracts } = customTemplates.get(tplTagName)!;
+  const { bricks, proxy, state, contracts } = hostBrick.runtimeContext
+    .isolatedRoot
+    ? isolatedTemplateRegistryMap
+        .get(hostBrick.runtimeContext.isolatedRoot)!
+        .get(tplTagName)!
+    : customTemplates.get(tplTagName)!;
   hooks?.flowApi?.collectWidgetContract(contracts);
   tplStateStore.define(state, runtimeContext, asyncHostPropertyEntries);
 

packages/runtime/src/internal/CustomTemplates/utils.spec.ts

@@ -6,6 +6,7 @@ import {
 } from "./utils.js";
 import { DataStore } from "../data/DataStore.js";
 import { customTemplates } from "../../CustomTemplates.js";
+import type { RuntimeContext } from "../interfaces.js";
 
 const tplStateStoreMap = new Map([
   ["tpl-state-1", new DataStore("STATE", {} as any)],
@@ -72,7 +73,11 @@ describe("getTagNameOfCustomTemplate", () => {
   ])(
     "getTagNameOfCustomTemplate(%j, %j) should return %j",
     (brick, appId, tagName) => {
-      expect(getTagNameOfCustomTemplate(brick, appId)).toEqual(tagName);
+      expect(
+        getTagNameOfCustomTemplate(brick, {
+          app: { id: appId },
+        } as RuntimeContext)
+      ).toEqual(tagName);
     }
   );
 });

packages/runtime/src/internal/CustomTemplates/utils.ts

@@ -1,6 +1,7 @@
 import type { DataStore } from "../data/DataStore.js";
 import type { RuntimeBrickElement, RuntimeContext } from "../interfaces.js";
 import { customTemplates } from "../../CustomTemplates.js";
+import { isolatedTemplateRegistryMap } from "../IsolatedTemplates.js";
 
 type MinimalTplStateStoreContext = Pick<
   RuntimeContext,
@@ -47,11 +48,21 @@ export function getTplHostElement(
 
 export function getTagNameOfCustomTemplate(
   brick: string,
-  appId?: string
+  runtimeContext: Pick<RuntimeContext, "app" | "isolatedRoot">
 ): false | string {
+  if (runtimeContext.isolatedRoot) {
+    const registry = isolatedTemplateRegistryMap.get(
+      runtimeContext.isolatedRoot
+    );
+    if (registry?.get(brick)) {
+      return brick;
+    }
+    return false;
+  }
+
   // When a template is registered by an app, it's namespace maybe missed.
-  if (!brick.includes(".") && brick.startsWith("tpl-") && appId) {
-    const tagName = `${appId}.${brick}`;
+  if (!brick.includes(".") && brick.startsWith("tpl-") && runtimeContext.app) {
+    const tagName = `${runtimeContext.app.id}.${brick}`;
     if (customTemplates.get(tagName)) {
       return tagName;
     }

packages/runtime/src/internal/IsolatedTemplates.ts

@@ -0,0 +1,24 @@
+import type { CustomTemplate } from "@next-core/types";
+import { CustomTemplateRegistry } from "../CustomTemplates.js";
+
+export const isolatedTemplateRegistryMap = new Map<
+  symbol,
+  CustomTemplateRegistry
+>();
+
+export function registerIsolatedTemplates(
+  isolatedRoot: symbol,
+  templates: CustomTemplate[] | undefined
+) {
+  let registry = isolatedTemplateRegistryMap.get(isolatedRoot);
+  if (!registry) {
+    registry = new CustomTemplateRegistry(true);
+    isolatedTemplateRegistryMap.set(isolatedRoot, registry);
+  }
+  registry.clearIsolatedRegistry();
+  if (Array.isArray(templates)) {
+    for (const tpl of templates) {
+      registry.define(tpl.name, tpl);
+    }
+  }
+}

packages/runtime/src/internal/Renderer.ts

@@ -703,10 +703,7 @@ async function legacyRenderBrick(
     );
   }
 
-  const tplTagName = getTagNameOfCustomTemplate(
-    brickName,
-    runtimeContext.app?.id
-  );
+  const tplTagName = getTagNameOfCustomTemplate(brickName, runtimeContext);
 
   if (tplTagName) {
     const tplCount = tplStack.get(tplTagName) ?? 0;