feat: release design system engine, studio and component contracts

packages/block-editor/test/canvas.test.ts

@@ -2,18 +2,28 @@ import { expect, test } from "bun:test";
 import { readFileSync } from "node:fs";
 import { Window } from "happy-dom";
 
-const code = new Bun.Transpiler({ loader: "ts" }).transformSync(readFileSync(new URL("../src/canvas.ts", import.meta.url), "utf8"))
-  .replace(/^import .*;\s*$/gm, "").replace("export function mountBlockCanvas", "function mountBlockCanvas");
+const code = new Bun.Transpiler({ loader: "ts" })
+  .transformSync(readFileSync(new URL("../src/canvas.ts", import.meta.url), "utf8"))
+  .replace(/^import .*;\s*$/gm, "")
+  .replace("export function mountBlockCanvas", "function mountBlockCanvas");
 
 test("canvas annotates exact node locations and cleans editor decorations without changing content", () => {
   const window = new Window();
   const root = window.document.body;
-  root.innerHTML = '<table data-block-id="root"><tbody><tr><td data-block-id="column" draggable="true"><table></table></td></tr></tbody></table>';
+  root.innerHTML =
+    '<table data-block-id="root"><tbody><tr><td data-block-id="column" draggable="true"><table></table></td></tr></tbody></table>';
   const original = root.innerHTML;
-  const tree = { id: "root", type: "layout.email-document", slots: { content: [{ id: "column", type: "layout.column", slots: { content: [] } }] } };
+  const tree = {
+    id: "root",
+    type: "layout.email-document",
+    slots: { content: [{ id: "column", type: "layout.column", slots: { content: [] } }] },
+  };
   const before = JSON.stringify(tree);
   let destroyed = 0;
-  const mount = new Function("mountBlockEditor", code + ";return mountBlockCanvas;")(() => ({ destroy: () => destroyed++, refresh() {} }));
+  const mount = new Function("mountBlockEditor", code + ";return mountBlockCanvas;")(() => ({
+    destroy: () => destroyed++,
+    refresh() {},
+  }));
   const mounted = mount(root, tree, {});
   const column = root.querySelector('[data-block-id="column"]')!;
   expect(column.getAttribute("data-block-parent")).toBe("root");
@@ -21,7 +31,8 @@ test("canvas annotates exact node locations and cleans editor decorations withou
   expect(column.getAttribute("draggable")).toBe("false");
   expect(root.querySelectorAll("[data-block-handle]")).toHaveLength(1);
   const handle = root.querySelector("[data-block-handle]")!;
-  let clicks = 0, pointers = 0;
+  let clicks = 0,
+    pointers = 0;
   column.addEventListener("click", () => clicks++);
   column.addEventListener("dblclick", () => clicks++);
   column.addEventListener("pointerdown", () => pointers++);
@@ -30,9 +41,12 @@ test("canvas annotates exact node locations and cleans editor decorations withou
   handle.dispatchEvent(new window.PointerEvent("pointerdown", { bubbles: true }));
   expect(clicks).toBe(0);
   expect(pointers).toBe(1);
-  expect(root.querySelector("[data-block-slot-target]")?.getAttribute("data-block-parent")).toBe("column");
+  expect(root.querySelector("[data-block-slot-target]")?.getAttribute("data-block-parent")).toBe(
+    "column",
+  );
   expect(JSON.stringify(tree)).toBe(before);
-  mounted.destroy(); mounted.destroy();
+  mounted.destroy();
+  mounted.destroy();
   expect(destroyed).toBe(1);
   expect(root.innerHTML).toBe(original);
 });
@@ -41,7 +55,15 @@ test("failed canvas mounting rolls back annotations", () => {
   const root = new Window().document.body;
   root.innerHTML = '<div data-block-id="root"><div data-block-id="child">Content</div></div>';
   const before = root.innerHTML;
-  const mount = new Function("mountBlockEditor", code + ";return mountBlockCanvas;")(() => { throw new Error("backend unavailable"); });
-  expect(() => mount(root, { id: "root", type: "root", slots: { content: [{ id: "child", type: "text", slots: {} }] } }, {})).toThrow("backend unavailable");
+  const mount = new Function("mountBlockEditor", code + ";return mountBlockCanvas;")(() => {
+    throw new Error("backend unavailable");
+  });
+  expect(() =>
+    mount(
+      root,
+      { id: "root", type: "root", slots: { content: [{ id: "child", type: "text", slots: {} }] } },
+      {},
+    ),
+  ).toThrow("backend unavailable");
   expect(root.innerHTML).toBe(before);
 });