@alloy-js/core 0.24.0-dev.2 → 0.24.0-dev.7

package/test/control-flow/for.test.tsx

@@ -1,14 +1,7 @@
-import "@alloy-js/core/testing";
 import { d } from "@alloy-js/core/testing";
 import { describe, expect, it } from "vitest";
 import { For } from "../../src/components/For.jsx";
-import {
-  onCleanup,
-  printTree,
-  reactive,
-  ref,
-  renderTree,
-} from "../../src/index.js";
+import { onCleanup, reactive, ref } from "../../src/index.js";
 import { flushJobs } from "../../src/scheduler.js";
 
 it("works", () => {
@@ -103,14 +96,18 @@ it("doesn't rerender mappers", () => {
   const messages = reactive(["hi", "bye"]);
   let count = 0;
   const template = <For each={messages}>{() => <>item {count++}</>}</For>;
-  const tree = renderTree(template);
+  const tree = <>{template}</>;
+  expect(tree).toRenderTo(`
+    item 0
+    item 1
+  `);
   expect(count).toBe(2);
 
   messages.push("maybe");
   flushJobs();
 
   expect(count).toBe(3);
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     item 0
     item 1
     item 2
@@ -121,13 +118,17 @@ it("doesn't rerender mappers with sets", () => {
   const messages = reactive(new Set(["hi", "bye"]));
   let count = 0;
   const template = <For each={messages}>{() => <>item {count++}</>}</For>;
-  const tree = renderTree(template);
+  const tree = <>{template}</>;
+  expect(tree).toRenderTo(`
+    item 0
+    item 1
+  `);
   expect(count).toBe(2);
 
   messages.add("maybe");
   flushJobs();
   expect(count).toBe(3);
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     item 0
     item 1
     item 2
@@ -144,13 +145,17 @@ it("doesn't rerender mappers with maps", () => {
 
   let count = 0;
   const template = <For each={messages}>{() => <>item {count++}</>}</For>;
-  const tree = renderTree(template);
+  const tree = <>{template}</>;
+  expect(tree).toRenderTo(`
+    item 0
+    item 1
+  `);
   expect(count).toBe(2);
 
   messages.set("maybe", "three");
   flushJobs();
   expect(count).toBe(3);
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     item 0
     item 1
     item 2
@@ -167,7 +172,12 @@ it("doesn't rerender mappers (with splice)", () => {
       }}
     </For>
   );
-  const tree = renderTree(template);
+  const tree = <>{template}</>;
+  expect(tree).toRenderTo(`
+    item 0
+    item 1
+    item 2
+  `);
   expect(count).toBe(3);
   messages.splice(1, 1);
   flushJobs();
@@ -175,7 +185,7 @@ it("doesn't rerender mappers (with splice)", () => {
   // but for now we re-render everything after the splice point.
   expect(count).toBe(4);
 
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     item 0
     item 3
   `);
@@ -196,10 +206,10 @@ it("cleans up things which end up removed (with push)", () => {
 
   const template = <For each={items}>{(item) => <Letter letter={item} />}</For>;
 
-  const tree = renderTree(template);
+  const tree = <>{template}</>;
 
   expect(cleanups).toEqual([]);
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     Letter a
     Letter b
   `);
@@ -207,14 +217,14 @@ it("cleans up things which end up removed (with push)", () => {
   items.pop();
   flushJobs();
   expect(cleanups).toEqual(["b"]);
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     Letter a
   `);
 
   items.pop();
   flushJobs();
   expect(cleanups).toEqual(["b", "a"]);
-  expect(printTree(tree)).toBe("");
+  expect(tree).toRenderTo("");
 });
 
 it("cleans up things which end up removed (with splice)", () => {
@@ -232,10 +242,10 @@ it("cleans up things which end up removed (with splice)", () => {
 
   const template = <For each={items}>{(item) => <Letter letter={item} />}</For>;
 
-  const tree = renderTree(template);
+  const tree = <>{template}</>;
 
   expect(cleanups).toEqual([]);
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     Letter a
     Letter b
     Letter c
@@ -246,7 +256,7 @@ it("cleans up things which end up removed (with splice)", () => {
   // A sufficiently smart mapJoin would be able to handle this case...
   // but for now we re-render everything after the splice point.
   expect(cleanups).toEqual(["b", "c"]);
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     Letter a
     Letter c
   `);
@@ -254,10 +264,8 @@ it("cleans up things which end up removed (with splice)", () => {
 
 it("doesn't render empty content", () => {
   const items = [1, 2, 3];
-  const tree = renderTree(
-    <For each={items}>{(item) => (item > 2 ? item : null)}</For>,
-  );
-  expect(printTree(tree)).toBe(`3`);
+  const tree = <For each={items}>{(item) => (item > 2 ? item : null)}</For>;
+  expect(tree).toRenderTo("3");
 });
 
 it("updates joiners appropriately when items get/lose content", () => {
@@ -267,16 +275,16 @@ it("updates joiners appropriately when items get/lose content", () => {
     { content: ref("hello") },
   ];
 
-  const tree = renderTree(
+  const tree = (
     <For each={items} joiner=", ">
       {(item) => {
         return item.content;
       }}
-    </For>,
+    </For>
   );
 
-  expect(printTree(tree)).toBe(`hello`);
+  expect(tree).toRenderTo("hello");
   items[1].content.value = "hi";
   flushJobs();
-  expect(printTree(tree)).toBe(`hi, hello`);
+  expect(tree).toRenderTo("hi, hello");
 });

package/test/control-flow/match.test.tsx

@@ -1,8 +1,6 @@
-import "@alloy-js/core/testing";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { Match, Switch } from "../../src/components/Switch.jsx";
-import { printTree, renderTree } from "../../src/render.js";
 
 it("selects the true branch", () => {
   const template = (
@@ -40,10 +38,10 @@ it("works with reactivity", () => {
       <Match else>odd</Match>
     </Switch>
   );
-  const tree = renderTree(template);
-  expect(printTree(tree)).toBe(`even`);
+  const tree = template;
+  expect(tree).toRenderTo("even");
   count.value++;
-  expect(printTree(tree)).toBe(`odd`);
+  expect(tree).toRenderTo("odd");
   count.value++;
-  expect(printTree(tree)).toBe(`even`);
+  expect(tree).toRenderTo("even");
 });

package/test/control-flow/show.test.tsx

@@ -1,8 +1,6 @@
-import "@alloy-js/core/testing";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { Show } from "../../src/components/Show.jsx";
-import { printTree, renderTree } from "../../src/render.js";
 
 it("selects the true branch", () => {
   const template = <Show when={true}>true</Show>;
@@ -16,10 +14,9 @@ it("works with reactivity", () => {
       even
     </Show>
   );
-  const tree = renderTree(template);
-  expect(printTree(tree)).toBe(`even`);
+  expect(template).toRenderTo("even");
   count.value++;
-  expect(printTree(tree)).toBe(`odd`);
+  expect(template).toRenderTo("odd");
   count.value++;
-  expect(printTree(tree)).toBe(`even`);
+  expect(template).toRenderTo("even");
 });

package/test/lazy-isempty.test.tsx

@@ -3,10 +3,8 @@ import { describe, expect, it } from "vitest";
 import { Show } from "../src/components/Show.jsx";
 import { createContentSlot } from "../src/content-slot.jsx";
 import { Context, ensureIsEmpty, getContext } from "../src/reactivity.js";
-import { printTree, renderTree } from "../src/render.js";
-import "../testing/extend-expect.js";
 
-describe("lazy isEmpty / _lastEmpty", () => {
+describe("lazy isEmpty", () => {
   it("context starts without isEmpty ref allocated", () => {
     let ctx: Context | null = null;
 
@@ -15,12 +13,12 @@ describe("lazy isEmpty / _lastEmpty", () => {
       return "content";
     }
 
-    renderTree(<Capture />);
+    expect(<Capture />).toRenderTo("content");
 
     // The isEmpty ref should NOT be allocated unless someone observes it.
     expect(ctx).not.toBeNull();
     expect(ctx!.isEmpty).toBeUndefined();
-    expect(ctx!._lastEmpty).toBe(false);
+    expect(ctx!.childrenWithContent).toBe(1);
   });
 
   it("ensureIsEmpty lazily allocates the isEmpty ref", () => {
@@ -31,7 +29,7 @@ describe("lazy isEmpty / _lastEmpty", () => {
       return "content";
     }
 
-    renderTree(<Capture />);
+    expect(<Capture />).toRenderTo("content");
 
     expect(ctx!.isEmpty).toBeUndefined();
     const isEmptyRef = ensureIsEmpty(ctx!);
@@ -39,7 +37,7 @@ describe("lazy isEmpty / _lastEmpty", () => {
     expect(isEmptyRef).toBe(ctx!.isEmpty);
   });
 
-  it("_lastEmpty is true for empty component, false for non-empty", () => {
+  it("tracks content count for empty and non-empty components", () => {
     let emptyCtx: Context | null = null;
     let fullCtx: Context | null = null;
 
@@ -53,54 +51,54 @@ describe("lazy isEmpty / _lastEmpty", () => {
       return "has content";
     }
 
-    renderTree(
+    expect(
       <>
         <EmptyCapture />
         <FullCapture />
       </>,
-    );
+    ).toRenderTo("has content");
 
-    expect(emptyCtx!._lastEmpty).toBe(true);
-    expect(fullCtx!._lastEmpty).toBe(false);
+    expect(emptyCtx!.childrenWithContent).toBe(0);
+    expect(fullCtx!.childrenWithContent).toBe(1);
   });
 
   it("ContentSlot triggers ensureIsEmpty and tracks reactively", () => {
     const ContentSlot = createContentSlot();
     const showContent = ref(false);
 
-    const tree = renderTree(
+    const tree = (
       <>
         {ContentSlot.isEmpty && "empty"}
         <ContentSlot>
           <Show when={showContent.value}>content</Show>
         </ContentSlot>
-      </>,
+      </>
     );
 
-    expect(printTree(tree)).toBe("empty");
+    expect(tree).toRenderTo("empty");
 
     showContent.value = true;
-    expect(printTree(tree)).toBe("content");
+    expect(tree).toRenderTo("content");
   });
 
   it("propagates empty state up through parent contexts", () => {
     const OuterSlot = createContentSlot();
     const showContent = ref(false);
 
-    const tree = renderTree(
+    const tree = (
       <>
         {OuterSlot.isEmpty && "outer-empty"}
         <OuterSlot>
           <Show when={showContent.value}>content</Show>
         </OuterSlot>
-      </>,
+      </>
     );
 
     // Outer should be empty initially.
-    expect(printTree(tree)).toBe("outer-empty");
+    expect(tree).toRenderTo("outer-empty");
 
     // Show content — outer should become non-empty.
     showContent.value = true;
-    expect(printTree(tree)).toBe("content");
+    expect(tree).toRenderTo("content");
   });
 });

package/test/name-policy.test.tsx

@@ -1,6 +1,5 @@
 import { createNamePolicy, Output, useNamePolicy } from "@alloy-js/core";
 import { expect, it } from "vitest";
-import "../testing/extend-expect.js";
 
 it("is applied by output", () => {
   const policy = createNamePolicy((name) => {

package/test/node.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+import {
+  createElement,
+  createFragment,
+  createTextNode,
+} from "../src/render/index.js";
+import { textContent } from "./tree-test-utils.js";
+
+describe("Node tree", () => {
+  it("append/prepend/before/after build linked list correctly", () => {
+    const root = createElement("group");
+    const b = createTextNode("B");
+    const c = createTextNode("C");
+    root.append(b, c);
+    const a = createTextNode("A");
+    root.prepend(a);
+    const d = createTextNode("D");
+    c.after(d);
+    const between = createTextNode("X");
+    c.before(between);
+
+    expect(textContent(root)).toBe("ABXCD");
+    expect(root.firstChild).toBe(a);
+    expect(root.lastChild).toBe(d);
+    expect(a.nextSibling).toBe(b);
+    expect(d.previousSibling).toBe(c);
+  });
+
+  it("replaceWith / remove maintain links", () => {
+    const root = createElement("group");
+    const a = createTextNode("A");
+    const b = createTextNode("B");
+    const c = createTextNode("C");
+    root.append(a, b, c);
+    const x = createTextNode("X");
+    const y = createTextNode("Y");
+    b.replaceWith(x, y);
+    expect(textContent(root)).toBe("AXYC");
+    expect(b.parentNode).toBeNull();
+    a.remove();
+    expect(textContent(root)).toBe("XYC");
+    expect(root.firstChild).toBe(x);
+  });
+
+  it("Fragment splices children on insert and self-empties", () => {
+    const root = createElement("group");
+    const f = createFragment();
+    f.append("hello", " ", "world");
+    expect(f.firstChild).not.toBeNull();
+    root.append(f);
+    expect(f.firstChild).toBeNull();
+    expect(f.parentNode).toBeNull();
+    expect(textContent(root)).toBe("hello world");
+  });
+
+  it("indent element preserves nested text in tree order", () => {
+    const root = createElement("group");
+    const indent = createElement("indent");
+    indent.append("first\nsecond\nthird");
+    root.append("top\n", indent);
+    expect(textContent(root)).toBe("top\nfirst\nsecond\nthird");
+    expect(root.lastChild).toBe(indent);
+  });
+
+  it("moveBefore atomically relocates without disconnecting subtree", () => {
+    const root = createElement("group");
+    const a = createElement("group");
+    const b = createElement("group");
+    a.append("A-content");
+    b.append("B-content");
+    root.append(a, b);
+    expect(textContent(root)).toBe("A-contentB-content");
+    // Move a after b.
+    root.moveBefore(a, null);
+    expect(textContent(root)).toBe("B-contentA-content");
+    // Subtree of `a` is untouched.
+    expect(a.firstChild).not.toBeNull();
+  });
+
+  it("moveBefore is a no-op when already at target position", () => {
+    const root = createElement("group");
+    const a = createTextNode("A");
+    const b = createTextNode("B");
+    root.append(a, b);
+    const aPrev = a.previousSibling;
+    root.moveBefore(a, b);
+    expect(a.previousSibling).toBe(aPrev);
+    expect(textContent(root)).toBe("AB");
+  });
+});

package/test/output-e2e.test.ts

@@ -0,0 +1,198 @@
+/**
+ * End-to-end test of the entry point: compile JSX through the babel
+ * preset (alloy preset), evaluate against the runtime, and run through
+ * `renderAsync` to produce an `OutputDirectory`.
+ *
+ * Validates:
+ *  - Output → SourceDirectory → SourceFile composition.
+ *  - File contents are produced via Alloy's direct printer.
+ *  - Nested directories accumulate paths correctly.
+ *  - `For` works under the runtime emitting multiple files.
+ */
+
+// @ts-expect-error — @babel/core has no bundled types in this workspace
+import { transformSync } from "@babel/core";
+// @ts-expect-error — preset has no types
+import alloyPreset from "@alloy-js/babel-preset";
+// @ts-expect-error — preset-typescript has no types
+import typescriptPreset from "@babel/preset-typescript";
+import { beforeAll, describe, expect, it } from "vitest";
+import type {
+  ContentOutputFile,
+  OutputDirectory,
+} from "../src/output-types.js";
+
+// Prime the runtime + core module imports once. Without this, the first
+// test in the suite pays the full module-init cost of `@alloy-js/core`
+// inside its 5s timeout window, which is flaky on slower machines.
+let runtimeMod: any;
+let coreMod: any;
+beforeAll(async () => {
+  runtimeMod = await import("../src/runtime/index.js");
+  coreMod = await import("../src/index.js");
+});
+
+function compile(src: string): string {
+  const result = transformSync(src, {
+    filename: "test.tsx",
+    presets: [typescriptPreset, [alloyPreset]],
+  });
+  if (!result?.code) throw new Error("compile failed");
+  return result.code;
+}
+
+async function evalCompiled(src: string, exportName: string): Promise<unknown> {
+  const code = compile(src);
+  const runtimeStub = `const __rt = arguments[0]; const __core = arguments[1];`;
+  const importRegex =
+    /import\s*\{\s*([^}]+)\s*\}\s*from\s*"@alloy-js\/core\/jsx-runtime";?/g;
+  const destructures: string[] = [];
+  let body = code.replace(importRegex, (_match, names: string) => {
+    const dn = names.replace(/(\w+)\s+as\s+(\w+)/g, "$1: $2");
+    destructures.push(`const {${dn}} = __rt;`);
+    return "";
+  });
+  const coreImportRegex =
+    /import\s*\{\s*([^}]+)\s*\}\s*from\s*"@alloy-js\/core";?/g;
+  body = body.replace(coreImportRegex, (_match, names: string) => {
+    const dn = names.replace(/(\w+)\s+as\s+(\w+)/g, "$1: $2");
+    destructures.push(`const {${dn}} = { ...__core, ...__rt };`);
+    return "";
+  });
+  body = body.replace(
+    /export\s*\{\s*([^}]+)\s*\}\s*;?/g,
+    (_, names: string) => {
+      const list = names.split(",").map((s) => s.trim());
+      return `return { ${list.join(",")} };`;
+    },
+  );
+  body = body.replace(/import\.meta\.url/g, '"test://test.tsx"');
+  const wrapped = `${runtimeStub}\n${destructures.join("\n")}\n${body}`;
+  const fn = new Function(wrapped);
+  return fn(runtimeMod, coreMod)[exportName];
+}
+
+function findFile(
+  dir: OutputDirectory,
+  path: string,
+): ContentOutputFile | undefined {
+  for (const c of dir.contents) {
+    if (c.kind === "file" && "contents" in c && c.path === path) return c;
+    if (c.kind === "directory") {
+      const found = findFile(c, path);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+describe("renderAsync — end-to-end output structure", () => {
+  it("produces a single SourceFile under Output > SourceDirectory", async () => {
+    const src = `
+      import { Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+      const App = () => (
+        <Output>
+          <SourceDirectory path="src">
+            <SourceFile path="hello.txt" filetype="text/plain">
+              <group>hello, world</group>
+            </SourceFile>
+          </SourceDirectory>
+        </Output>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    const { renderAsync } = runtimeMod;
+    // App() returns a ComponentCreator (top-level <Output>); pass the
+    // thunk directly as Children — renderAsync's insert handles it.
+    const out = await renderAsync(App() as any);
+    const f = findFile(out, "src/hello.txt");
+    expect(f).toBeDefined();
+    expect(f!.contents).toBe("hello, world\n");
+    expect(f!.filetype).toBe("text/plain");
+  });
+
+  it("nested SourceDirectory paths accumulate", async () => {
+    const src = `
+      import { Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+      const App = () => (
+        <Output>
+          <SourceDirectory path="src">
+            <SourceDirectory path="lib">
+              <SourceFile path="x.txt" filetype="text/plain">x</SourceFile>
+            </SourceDirectory>
+          </SourceDirectory>
+        </Output>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    const { renderAsync } = runtimeMod;
+    const out = await renderAsync(App() as any);
+    expect(findFile(out, "src/lib/x.txt")?.contents).toBe("x\n");
+  });
+
+  it("For emits multiple files", async () => {
+    const src = `
+      import { For, Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+      const App = (props) => (
+        <Output>
+          <SourceDirectory path="src">
+            <For each={props.specs}>
+              {(spec) => (
+                <SourceFile path={spec.path} filetype="text/plain">
+                  <group>{spec.body}</group>
+                </SourceFile>
+              )}
+            </For>
+          </SourceDirectory>
+        </Output>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as (props: any) => unknown;
+    const { renderAsync } = runtimeMod;
+    const specs = [
+      { path: "a.txt", body: "alpha" },
+      { path: "b.txt", body: "beta" },
+      { path: "c.txt", body: "gamma" },
+    ];
+    const out = await renderAsync(App({ specs }) as any);
+    expect(findFile(out, "src/a.txt")?.contents).toBe("alpha\n");
+    expect(findFile(out, "src/b.txt")?.contents).toBe("beta\n");
+    expect(findFile(out, "src/c.txt")?.contents).toBe("gamma\n");
+  });
+
+  it("direct printer formatting — group breaks at printWidth", async () => {
+    const src = `
+      import { Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+      const App = () => (
+        <Output>
+          <SourceDirectory path=".">
+            <SourceFile path="t.txt" filetype="text/plain">
+              <group>
+                {"["}
+                <indent>
+                  <line />
+                  {"aaaaaaaaaaaaaaaaaaaa,"}
+                  <line />
+                  {"bbbbbbbbbbbbbbbbbbbb"}
+                </indent>
+                <line />
+                {"]"}
+              </group>
+            </SourceFile>
+          </SourceDirectory>
+        </Output>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    const { renderAsync } = runtimeMod;
+    const out = await renderAsync(App() as any, { printWidth: 30 });
+    const f = findFile(out, "t.txt");
+    expect(f!.contents).toBe(
+      "[\n  aaaaaaaaaaaaaaaaaaaa,\n  bbbbbbbbbbbbbbbbbbbb\n]\n",
+    );
+  });
+});

package/test/reactivity/circular-reactives.test.tsx

@@ -1,8 +1,6 @@
 import { shallowReactive } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { For } from "../../src/index.js";
-import { printTree, renderTree } from "../../src/render.js";
-import { d } from "../../testing/render.js";
 
 it("it should work with circular reactives", () => {
   const items: string[] = shallowReactive([]);
@@ -23,9 +21,10 @@ it("it should work with circular reactives", () => {
       </For>
     </>
   );
-  const tree = renderTree(template);
+  const tree = template;
+  expect(tree).toRenderTo("");
   items.push("item start");
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     item start
     item 1
   `);
@@ -43,9 +42,10 @@ it("should work with immediately recursive reactives", () => {
       </For>
     </>
   );
-  const tree = renderTree(template);
+  const tree = template;
+  expect(tree).toRenderTo("");
   items.add("item start");
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     item start
     item 1
   `);