@alloy-js/core 0.24.0-dev.1 → 0.24.0-dev.6

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,7 +1,7 @@
 import { shallowReactive } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { For } from "../../src/index.js";
-import { printTree, renderTree } from "../../src/render.js";
+import { printTree, renderTree } from "../../src/test-render.js";
 import { d } from "../../testing/render.js";
 
 it("it should work with circular reactives", () => {

package/test/reactivity/cleanup.test.tsx

@@ -1,9 +1,9 @@
 import { ref } from "@vue/reactivity";
 import { describe, expect, it } from "vitest";
 import { effect, memo, onCleanup } from "../../src/reactivity.js";
-import { renderTree } from "../../src/render.js";
 import type { Children } from "../../src/runtime/component.js";
 import { flushJobs } from "../../src/scheduler.js";
+import { renderTree } from "../../src/test-render.js";
 
 describe("memo cleanup", () => {
   it("cleans up when memo value is recomputed", () => {

package/test/rendering/memoization.test.tsx

@@ -1,8 +1,8 @@
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { memo } from "../../src/reactivity.js";
-import { renderTree } from "../../src/render.js";
 import { flushJobs } from "../../src/scheduler.js";
+import { renderTree } from "../../src/test-render.js";
 
 it("memoizes child components", () => {
   let renderCount = 0;
@@ -28,5 +28,10 @@ it("memoizes child components", () => {
   renderTree(template);
   doThing.value = true;
   flushJobs();
+  // Without element-cache (legacy), each component creator is invoked on
+  // every reactive re-evaluation, except when the same ComponentCreator
+  // instance reappears at a slot — reconcileArray keeps the existing
+  // subtree intact. child1 is invoked once initially and reused on the
+  // memo re-fire; child2 is invoked once when added.
   expect(renderCount).toBe(2);
 });

package/test/rendering/render-output-diagnostics.test.tsx

@@ -0,0 +1,120 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  emitDiagnostic,
+  Output,
+  render,
+  renderAsync,
+  SourceFile,
+} from "../../src/index.js";
+import { sourceFilesForTree } from "../../src/render-output.js";
+import { getDiagnosticsForTree, renderTree } from "../../src/test-render.js";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+function DiagnosticComponent() {
+  emitDiagnostic({
+    severity: "warning",
+    message: "component warning",
+  });
+
+  return null;
+}
+
+function AsyncDiagnosticComponent() {
+  emitDiagnostic({
+    severity: "warning",
+    message: "async component warning",
+  });
+
+  return null;
+}
+
+describe("render output diagnostics", () => {
+  it("records missing Output diagnostics on rendered trees", () => {
+    const tree = renderTree("orphan text");
+
+    expect(sourceFilesForTree(tree)).toEqual({
+      kind: "directory",
+      path: "",
+      contents: [],
+    });
+    expect(getDiagnosticsForTree(tree)).toEqual([
+      expect.objectContaining({
+        severity: "error",
+        message: expect.stringContaining("No root directory found"),
+      }),
+    ]);
+  });
+
+  it("reports component diagnostics from render", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(
+      <Output>
+        <DiagnosticComponent />
+      </Output>,
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("component warning"),
+    );
+  });
+
+  it("reports component diagnostics from renderAsync", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    await renderAsync(
+      <Output>
+        <AsyncDiagnosticComponent />
+      </Output>,
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("async component warning"),
+    );
+  });
+
+  it("reports missing Output diagnostics from render", () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    expect(render("orphan text")).toEqual({
+      kind: "directory",
+      path: "",
+      contents: [],
+    });
+    expect(errorSpy).toHaveBeenCalledWith(
+      expect.stringContaining("No root directory found"),
+    );
+  });
+
+  it("reports missing Output diagnostics from renderAsync", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    await expect(renderAsync("orphan text")).resolves.toEqual({
+      kind: "directory",
+      path: "",
+      contents: [],
+    });
+    expect(errorSpy).toHaveBeenCalledWith(
+      expect.stringContaining("No root directory found"),
+    );
+  });
+
+  it("reports output traversal errors through diagnostics", () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    expect(() =>
+      render(
+        <SourceFile path="orphan.txt" filetype="text/plain">
+          orphan
+        </SourceFile>,
+      ),
+    ).toThrow("Source file doesn't have parent directory");
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      expect.stringContaining("Source file doesn't have parent directory"),
+    );
+  });
+});