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

package/test/reactivity/cleanup.test.tsx

@@ -1,7 +1,6 @@
 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";
 
@@ -60,7 +59,7 @@ describe("element cleanup", () => {
     }
     const el = ref<unknown>(<Component />);
     const template = <>{el}</>;
-    renderTree(template);
+    expect(template).toRenderTo("hi!");
     el.value = "";
     flushJobs();
     expect(cleanedUp).toBe(true);
@@ -88,7 +87,7 @@ describe("element cleanup", () => {
       </C1>,
     );
     const template = <>{el}</>;
-    renderTree(template);
+    expect(template).toRenderTo("");
     el.value = "";
     flushJobs();
     expect(cleanedUpC1).toBe(true);

package/test/reactivity/ref-rendering.test.tsx

@@ -1,45 +1,45 @@
-import { code, memo, printTree, renderTree } from "@alloy-js/core";
+import { code, memo } from "@alloy-js/core";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 
 it("handles refs in the tree", () => {
   const r = ref(42);
-  const tree = renderTree(<>The number is {r}</>);
+  const tree = <>The number is {r}</>;
 
-  expect(printTree(tree)).toBe("The number is 42");
+  expect(tree).toRenderTo("The number is 42");
   r.value = 12;
-  expect(printTree(tree)).toBe("The number is 12");
+  expect(tree).toRenderTo("The number is 12");
 });
 
 it("handles refs in the tree with code", () => {
   const r = ref(42);
-  const tree = renderTree(code`
+  const tree = code`
     The number is ${r}
-  `);
+  `;
 
-  expect(printTree(tree)).toBe("The number is 42");
+  expect(tree).toRenderTo("The number is 42");
   r.value = 12;
-  expect(printTree(tree)).toBe("The number is 12");
+  expect(tree).toRenderTo("The number is 12");
 });
 
 it("handles memos in the tree", () => {
   const r = ref(42);
   const m = memo(() => r.value + 10);
-  const tree = renderTree(<>The number is {m}</>);
+  const tree = <>The number is {m}</>;
 
-  expect(printTree(tree)).toBe("The number is 52");
+  expect(tree).toRenderTo("The number is 52");
   r.value = 12;
-  expect(printTree(tree)).toBe("The number is 22");
+  expect(tree).toRenderTo("The number is 22");
 });
 
 it("handles memos in the tree with code", () => {
   const r = ref(42);
   const m = memo(() => r.value + 10);
-  const tree = renderTree(code`
+  const tree = code`
     The number is ${m}
-  `);
+  `;
 
-  expect(printTree(tree)).toBe("The number is 52");
+  expect(tree).toRenderTo("The number is 52");
   r.value = 12;
-  expect(printTree(tree)).toBe("The number is 22");
+  expect(tree).toRenderTo("The number is 22");
 });

package/test/reactivity/test.test.tsx

@@ -1,8 +1,8 @@
-import { memo, printTree, renderTree } from "@alloy-js/core";
+import { memo } from "@alloy-js/core";
 import { computed, reactive, ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
+import { flushJobs } from "../../src/scheduler.js";
 import { mapJoin } from "../../src/utils.js";
-import { d } from "../../testing/render.js";
 
 it("splices in new nodes", () => {
   const r = ref(["one"]);
@@ -14,11 +14,11 @@ it("splices in new nodes", () => {
     return <>{mapped.value} done</>;
   }
 
-  const tree = renderTree(<Foo />);
-  expect(printTree(tree)).toEqual("mapped one done");
+  const tree = <Foo />;
+  expect(tree).toRenderTo("mapped one done");
   r.value = [...r.value, "two"];
 
-  expect(printTree(tree)).toEqual("mapped one mapped two done");
+  expect(tree).toRenderTo("mapped one mapped two done");
 });
 
 it("works with a complex case", () => {
@@ -56,20 +56,20 @@ it("works with a complex case", () => {
       `import { ${[...props.types.values()].join(", ")} } from "${props.path}";`;
   }
 
-  const tree = renderTree(<ImportStatements records={importRecords} />);
+  const tree = <ImportStatements records={importRecords} />;
   // the tree is empty.
 
-  expect(printTree(tree)).toEqual("");
+  expect(tree).toRenderTo("");
 
   addImport("./foo.js", "hi");
-  printTree(tree);
-  expect(printTree(tree)).toEqual('import { hi } from "./foo.js";');
+  flushJobs();
+  expect(tree).toRenderTo('import { hi } from "./foo.js";');
 
   addImport("./foo.js", "bye");
-  expect(printTree(tree)).toEqual('import { hi, bye } from "./foo.js";');
+  expect(tree).toRenderTo('import { hi, bye } from "./foo.js";');
 
   addImport("node:assert", "strictEqual");
-  expect(printTree(tree)).toEqual(d`
+  expect(tree).toRenderTo(`
     import { hi, bye } from "./foo.js";
     import { strictEqual } from "node:assert";
   `);
@@ -77,8 +77,8 @@ it("works with a complex case", () => {
 
 it("works with memos of memos", () => {
   const test = ref(1);
-  const tree = renderTree(memo(() => memo(() => test.value)));
-  expect(printTree(tree)).toEqual("1");
+  const tree = memo(() => memo(() => test.value));
+  expect(tree).toRenderTo("1");
   test.value = 2;
-  expect(printTree(tree)).toEqual("2");
+  expect(tree).toRenderTo("2");
 });

package/test/rendering/basic.test.tsx

@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import { Children, RENDERABLE } from "../../src/runtime/component.js";
-import "../../testing/extend-expect.js";
 describe("string nodes", () => {
   it("renders string nodes with substitutions", () => {
     const str = "hi";

package/test/rendering/code.test.tsx

@@ -1,6 +1,5 @@
 import { code } from "@alloy-js/core";
 import { expect, it } from "vitest";
-import "../../testing/extend-expect.js";
 
 it("renders simple strings", () => {
   expect(code`foo`).toRenderTo("foo");

package/test/rendering/formatting.test.tsx

@@ -1,13 +1,5 @@
 import { describe, expect, it } from "vitest";
-import {
-  ContentOutputFile,
-  For,
-  Output,
-  render,
-  SourceFile,
-} from "../../src/index.js";
-import "../../testing/extend-expect.js";
-import { d } from "../../testing/render.js";
+import { For, Output, SourceFile } from "../../src/index.js";
 
 describe("group", () => {
   it("breaks when shouldBreak is passed", () => {
@@ -459,16 +451,16 @@ it("formats based on the output component props", () => {
     </Output>
   );
 
-  const tree = render(template);
-  expect((tree.contents[0] as ContentOutputFile).contents).toEqual(d`
-    1
-    2
-    3
-    4
-    5
-    6
-    
-  `);
+  expect(template).toRenderTo(
+    `
+      1
+      2
+      3
+      4
+      5
+      6
+    `,
+  );
 });
 
 it("formats based on the source file component props", () => {
@@ -482,14 +474,14 @@ it("formats based on the source file component props", () => {
     </Output>
   );
 
-  const tree = render(template);
-  expect((tree.contents[0] as ContentOutputFile).contents).toEqual(d`
-    1
-    2
-    3
-    4
-    5
-    6
-
-  `);
+  expect(template).toRenderTo(
+    `
+      1
+      2
+      3
+      4
+      5
+      6
+    `,
+  );
 });

package/test/rendering/indent.test.tsx

@@ -1,7 +1,6 @@
 // prettier-ignore
 import { Indent } from "@alloy-js/core";
 import { describe, expect, it } from "vitest";
-import "../../testing/extend-expect.js";
 
 describe("Indent component", () => {
   it("indents explicitly indented content on a subsequent line", () => {

package/test/rendering/memoization.test.tsx

@@ -1,14 +1,13 @@
 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";
 
 it("memoizes child components", () => {
   let renderCount = 0;
   function Child() {
     renderCount++;
-    return "hi " + String(Math.random());
+    return "hi";
   }
 
   const doThing = ref();
@@ -25,8 +24,13 @@ it("memoizes child components", () => {
 
   const template = <>{items}</>;
 
-  renderTree(template);
+  expect(template).toRenderTo("hi");
   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/print-render-stack.test.tsx

@@ -12,7 +12,6 @@ import {
   resetDevtoolsServerForTests,
 } from "../../src/devtools/devtools-server.js";
 import { clearRenderStack } from "../../src/render-stack.js";
-import "../../testing/extend-expect.js";
 
 // Strip ANSI escape codes from a string for consistent testing across environments
 function stripAnsi(str: string): string {

package/test/rendering/refkeys.test.tsx

@@ -1,7 +1,6 @@
 import { refkey, Refkey } from "@alloy-js/core";
 import { SourceFile } from "@alloy-js/core/stc";
 import { expect, it } from "vitest";
-import "../../testing/extend-expect.js";
 
 it("is rendered properly in the tree", () => {
   const key = refkey("foo");

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"),
+    );
+  });
+});