feat(): createRoot supports useChildren

Author: weareoutman

etc/runtime.api.md

@@ -118,6 +118,7 @@ export interface CreateRootOptions {
     // (undocumented)
     portal?: HTMLElement;
     scope?: "page" | "fragment";
+    supportsUseChildren?: boolean;
     unknownBricks?: "silent" | "throw";
     unsafe_penetrate?: boolean;
 }
@@ -586,7 +587,7 @@ const symbolForRootRuntimeContext: unique symbol;
 function unmountUseBrick({ rendererContext }: RenderUseBrickResult, mountResult: MountUseBrickResult): void;
 
 // @public (undocumented)
-export function unstable_createRoot(container: HTMLElement | DocumentFragment, { portal: _portal, scope, unknownBricks, unsafe_penetrate, }?: CreateRootOptions): {
+export function unstable_createRoot(container: HTMLElement | DocumentFragment, { portal: _portal, scope, unknownBricks, supportsUseChildren, unsafe_penetrate, }?: CreateRootOptions): {
     render(brick: BrickConf | BrickConf[], { theme, uiVersion, language, context, functions, templates, i18n: i18nData, url, app, }?: RenderOptions): Promise<void>;
     unmount(): void;
 };

packages/preview/package.json

@@ -22,19 +22,15 @@
   },
   "scripts": {
     "start": "cross-env NODE_ENV='development' build-next-bricks --watch",
-    "build": "cross-env NODE_ENV='production' build-next-bricks",
-    "test": "cross-env NODE_ENV='test' test-next",
-    "test:ci": "cross-env NODE_ENV='test' CI=true test-next"
+    "build": "cross-env NODE_ENV='production' build-next-bricks"
   },
   "devDependencies": {
     "@next-core/build-next-bricks": "^1.23.13",
     "@next-core/http": "^1.2.13",
     "@next-core/loader": "^1.6.16",
     "@next-core/runtime": "^1.62.3",
-    "@next-core/test-next": "^2.0.0",
     "@next-core/theme": "^1.5.4",
     "@next-core/types": "^1.15.0",
-    "@next-core/utils": "^1.7.36",
     "html-webpack-plugin": "^5.6.3",
     "js-yaml": "^3.14.1"
   }

packages/preview/src/bootstrap.ts

@@ -26,7 +26,6 @@ import type {
   PreviewWindow,
 } from "../types.d.ts";
 import { get } from "lodash";
-import { replaceUseChildren } from "./replaceUseChildren.js";
 // Chrome supports `Element.prototype.replaceChildren` since version 86
 import "../../brick-container/src/replaceChildren.js";
 
@@ -92,6 +91,7 @@ const root = unstable_createRoot(container, {
   portal,
   scope: "page",
   unknownBricks: "silent",
+  supportsUseChildren: true,
 });
 
 const bootstrap = http
@@ -225,7 +225,6 @@ async function render(
             | BrickConf[])
         : null;
       const bricks = [].concat(parsed ?? []);
-      replaceUseChildren(bricks);
       if (styleText) {
         bricks.push({
           brick: "style",
@@ -244,14 +243,6 @@ async function render(
       ) as CustomTemplate[];
       const parsedI18n = loadYaml(i18nData) as MetaI18n;
 
-      if (Array.isArray(parsedTemplates)) {
-        for (const template of parsedTemplates) {
-          if (Array.isArray(template.bricks)) {
-            replaceUseChildren(template.bricks);
-          }
-        }
-      }
-
       await bootstrap;
       await root.render(bricks, {
         theme: theme === "light" ? theme : "dark-v2",

packages/runtime/src/createRoot.spec.ts

@@ -7,6 +7,11 @@ const consoleError = jest.spyOn(console, "error");
 jest.mock("./themeAndMode.js");
 window.scrollTo = jest.fn();
 
+class MyBrick extends HTMLElement {
+  useBrick: unknown;
+}
+customElements.define("my-brick", MyBrick);
+
 describe("preview", () => {
   const container = document.createElement("div");
   const portal = document.createElement("div");
@@ -250,4 +255,67 @@ describe("preview", () => {
     expect(container.innerHTML).toBe("");
     expect(portal.innerHTML).toBe("");
   });
+
+  test("use children", async () => {
+    const root = unstable_createRoot(container, {
+      supportsUseChildren: true,
+    });
+
+    await root.render([
+      {
+        brick: "my-brick",
+        properties: {
+          useChildren: "[items]",
+        },
+        children: [
+          {
+            brick: "div",
+            slot: "[items]",
+            properties: {
+              textContent: "Hello Use Children",
+            },
+          },
+        ],
+      },
+    ]);
+
+    expect(container.innerHTML).toBe("<my-brick></my-brick>");
+    expect((container.firstElementChild as MyBrick).useBrick).toMatchObject({
+      brick: "div",
+      properties: {
+        textContent: "Hello Use Children",
+      },
+    });
+
+    root.unmount();
+  });
+
+  test("use children without supports", async () => {
+    const root = unstable_createRoot(container);
+
+    await root.render([
+      {
+        brick: "my-brick",
+        properties: {
+          useChildren: "[items]",
+        },
+        children: [
+          {
+            brick: "div",
+            slot: "[items]",
+            properties: {
+              textContent: "Hello Use Children",
+            },
+          },
+        ],
+      },
+    ]);
+
+    expect(container.innerHTML).toBe(
+      '<my-brick><div slot="[items]">Hello Use Children</div></my-brick>'
+    );
+    expect((container.firstElementChild as MyBrick).useBrick).toBe(undefined);
+
+    root.unmount();
+  });
 });

packages/runtime/src/createRoot.ts

@@ -9,6 +9,7 @@ import type {
   StoryboardFunction,
 } from "@next-core/types";
 import { i18n } from "@next-core/i18n";
+import { replaceUseChildren } from "@next-core/utils/storyboard";
 import { uniqueId } from "lodash";
 import {
   RenderOutput,
@@ -44,6 +45,11 @@ export interface CreateRootOptions {
    */
   unknownBricks?: "silent" | "throw";
 
+  /**
+   * Whether the root supports `useChildren`.
+   */
+  supportsUseChildren?: boolean;
+
   /**
    * Set unsafe_penetrate to true to allow accessing global variables
    * from an isolated root.
@@ -71,6 +77,7 @@ export function unstable_createRoot(
     portal: _portal,
     scope = "fragment",
     unknownBricks,
+    supportsUseChildren,
     unsafe_penetrate,
   }: CreateRootOptions = {}
 ) {
@@ -114,6 +121,16 @@ export function unstable_createRoot(
       }
       const bricks = ([] as BrickConf[]).concat(brick);
 
+      if (supportsUseChildren) {
+        replaceUseChildren(bricks);
+
+        for (const template of templates ?? []) {
+          if (Array.isArray(template.bricks)) {
+            replaceUseChildren(template.bricks);
+          }
+        }
+      }
+
       const previousRendererContext = rendererContext;
       const renderId = uniqueId("render-id-");
       rendererContext = new RendererContext(scope, { unknownBricks, renderId });

packages/utils/src/storyboard/index.ts

@@ -1,6 +1,7 @@
 export * from "./expressions/index.js";
 export * from "./functions/index.js";
 export * from "./permissions.js";
+export * from "./replaceUseChildren.js";
 import { createProviderClass, unwrapProvider } from "@next-core/utils/general";
 export {
   /** @deprecated import it from "@next-core/utils/general" instead */