feat: release design system engine, studio and component contracts

packages/dev-server/test/component-composition-runtime.test.ts

@@ -7,6 +7,13 @@ import { resolveI18n } from "@wrnexus/i18n";
 import { createHandlers, type RuntimeDeps } from "../src/runtime.ts";
 
 const roots: string[] = [];
+function conditionalBranches(html: string) {
+  const reference = /data-wrn-if="(@[A-Za-z0-9-]+:[0-9]+)"/.exec(html)?.[1];
+  expect(reference).toBeTruthy();
+  const registry = /data-wrn-controls[^>]*>(.*?)<\/script>/s.exec(html)?.[1];
+  expect(registry).toBeTruthy();
+  return JSON.parse(registry!)[Number(reference!.split(":")[1])];
+}
 afterEach(() => roots.splice(0).forEach((root) => rmSync(root, { recursive: true, force: true })));
 
 test("a component nested in another component's slot keeps its boundary", async () => {
@@ -83,9 +90,7 @@ test("a component in an initially hidden client branch is server-prepared for in
     upgrade: () => false,
   });
   const html = await response!.text();
-  const encoded = /data-wrn-if="([A-Za-z0-9+/=]+)"/.exec(html)?.[1];
-  expect(encoded).toBeTruthy();
-  const branches = JSON.parse(Buffer.from(encoded!, "base64").toString("utf8"));
+  const branches = conditionalBranches(html);
   expect(branches[0].body).toContain('<input value="ready">');
   expect(branches[0].body).not.toContain("data-component=");
 });
@@ -135,8 +140,7 @@ test("typed components in client branches use defaults until reactive props are
   });
   const html = await response!.text();
   expect(observed).toEqual({});
-  const encoded = /data-wrn-if="([A-Za-z0-9+/=]+)"/.exec(html)?.[1];
-  const branches = JSON.parse(Buffer.from(encoded!, "base64").toString("utf8"));
+  const branches = conditionalBranches(html);
   expect(branches[0].body).toContain("<section");
   expect(branches[0].body).toContain("data-wrn-prop-bind-0");
   expect(branches[0].body).not.toContain("data-component=");
@@ -154,16 +158,21 @@ test("SSR carries a parent prop binding onto the rendered child scope", async ()
     "component Child { props { value = 0 } view { <b>{value}</b> } }\n",
   );
   const marker = "[&quot;value&quot;,&quot;{count}&quot;]";
+  const locals = Buffer.from(JSON.stringify({ field: { id: "answer" } })).toString("base64");
+  const childState = Buffer.from(JSON.stringify({ value: 1 })).toString("base64");
   const handlers = createHandlers({
     mode: "development",
     hmr: false,
     router: buildRouter(app),
     loadModule: async (file) =>
       basename(file) === "Child.wrn"
-        ? { render: () => '<div data-scope="value: 1" data-wrn-scope="e30="><b>1</b></div>' }
+        ? {
+            render: () =>
+              `<div data-scope="value: 1" data-wrn-scope="${childState}"><b>1</b></div>`,
+          }
         : {
             default: () =>
-              `<div data-component="Child" value="1" data-wrn-prop-bind-0="${marker}"></div>`,
+              `<div data-component="Child" value="1" data-wrn-prop-bind-0="${marker}" data-wrn-loop-locals="${locals}"></div>`,
           },
     getMiddleware: async () => [],
     assets: { serve: async () => null },
@@ -173,6 +182,17 @@ test("SSR carries a parent prop binding onto the rendered child scope", async ()
   });
   const html = await response!.text();
   expect(html).toContain(`data-wrn-prop-bind-0="${marker}"`);
+  const child = /<div data-scope=""[^>]*>/.exec(html)?.[0];
+  expect(child).toBeTruthy();
+  expect(child).toContain(`data-wrn-prop-bind-0="${marker}"`);
+  const registry = JSON.parse(/data-wrn-controls[^>]*>(.*?)<\/script>/s.exec(html)![1]!);
+  const metadata = (attribute: string) => {
+    const reference = new RegExp(`${attribute}="@[^"]+:([0-9]+)"`).exec(child!)?.[1];
+    expect(reference).toBeDefined();
+    return registry[Number(reference)].value;
+  };
+  expect(metadata("data-wrn-loop-locals")).toEqual({ field: { id: "answer" } });
+  expect(metadata("data-wrn-scope")).toEqual({ value: 1 });
   expect(html).not.toContain('data-component="Child"');
 });