feat: release design system engine, studio and component contracts

packages/csr/test/for-loop-locals.test.ts

@@ -90,3 +90,53 @@ test("loop locals survive non-ASCII values", () => {
   const decoded = JSON.parse(Buffer.from(String(raw), "base64").toString("utf8"));
   expect(decoded.row.label).toBe("Ünïcode — 日本語");
 });
+
+test("replaced loop rows release their native effects and stop observing state", () => {
+  const win = mount(
+    `<div id="owner" data-scope="items: [1], value: 0"><p class="row" data-for="item in items" data-wrn-bind-title='["title","{value}"]'>{item}</p></div>`,
+  );
+  const owner = win.document.querySelector("#owner") as any;
+  const removed: any[] = [];
+  for (let i = 1; i <= 20; i++) {
+    const row = win.document.querySelector(".row") as any;
+    removed.push(row);
+    owner.__wrnexusScopeApi.set("items", [i + 1]);
+    owner.__wrnexusScopeApi.set("value", i);
+    expect(win.document.querySelector(".row")!.getAttribute("title")).toBe(String(i));
+    expect(row.getAttribute("title")).toBe(String(i - 1));
+    expect(row.__wrnexusReactiveDisposers?.size ?? 0).toBe(0);
+  }
+  expect(removed.every((row) => !row.isConnected)).toBe(true);
+});
+
+test("removing nested rows disposes their loop markers and descendant effects", () => {
+  const win = mount(
+    `<div id="owner" data-scope="groups: [{items:[1,2]}], value: 0"><section class="group" data-for="group in groups"><p class="row" data-for="item in group.items" data-wrn-bind-title='["title","{value}"]'>{item}</p></section></div>`,
+  );
+  const owner = win.document.querySelector("#owner") as any;
+  const group = win.document.querySelector(".group") as any;
+  const rows = Array.from(group.querySelectorAll(".row")) as any[];
+  owner.__wrnexusScopeApi.set("groups", []);
+  owner.__wrnexusScopeApi.set("value", 4);
+  expect(rows.map((row) => row.getAttribute("title"))).toEqual(["0", "0"]);
+  const walker = win.document.createTreeWalker(group, (win as any).NodeFilter.SHOW_ALL);
+  let node: any = group;
+  do {
+    expect(node.__wrnexusReactiveDisposers?.size ?? 0).toBe(0);
+  } while ((node = walker.nextNode()) !== null);
+});
+
+test("moving a mounted scope keeps its listeners and state alive", async () => {
+  const win = mount(
+    `<div id="owner" data-scope="count: 0"><button data-on-click="count++">Increment</button><span data-text="count"></span></div>`,
+  );
+  const owner = win.document.querySelector("#owner") as any;
+  const button = owner.querySelector("button");
+  button.click();
+  expect(owner.querySelector("span").textContent).toBe("1");
+  win.document.body.appendChild(owner);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  button.click();
+  expect(owner.querySelector("span").textContent).toBe("2");
+  expect(owner.__wrnexusScopeApi.get("count")).toBe(2);
+});