@alloy-js/core 0.23.0-dev.0 → 0.23.0-dev.10

package/test/components/append-file.test.tsx

@@ -3,7 +3,6 @@ import { tmpdir } from "os";
 import { join } from "path";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { AppendFile, AppendRegion } from "../../src/components/AppendFile.jsx";
-import { render, renderAsync } from "../../src/render.js";
 import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 
@@ -34,6 +33,7 @@ describe("AppendFile", () => {
 
     await expect(result).toRenderToAsync("Initial content\nNew content");
   });
+
   it("should append content to end of file when no sigils present with no explicit append region", async () => {
     // Create initial file content
     writeFileSync(testFilePath, "Initial content", "utf-8");
@@ -148,30 +148,35 @@ describe("AppendFile", () => {
     await expect(result).toRenderToAsync("Content\ndefault region");
   });
 
-  it("should throw error when region is missing corresponding AppendRegion", async () => {
+  it("should emit diagnostic when region is missing corresponding AppendRegion", async () => {
     writeFileSync(testFilePath, "content", "utf-8");
 
-    expect(() =>
-      render(
-        <AppendFile path={testFilePath} regions={["missing"]}>
-          <AppendRegion id="append">content</AppendRegion>
-        </AppendFile>,
-      ),
-    ).toThrow(
-      'Region "missing" specified but no corresponding AppendRegion child found',
-    );
+    await expect(
+      <AppendFile path={testFilePath} regions={["missing"]}>
+        <AppendRegion id="append">content</AppendRegion>
+      </AppendFile>,
+    ).toHaveDiagnosticsAsync([
+      {
+        message:
+          'Region "missing" specified but no corresponding AppendRegion child found',
+        severity: "error",
+      },
+    ]);
   });
 
-  it("should throw error when AppendRegion has neither children nor content", async () => {
+  it("should emit diagnostic when AppendRegion has neither children nor content", async () => {
     writeFileSync(testFilePath, "content", "utf-8");
 
-    expect(() =>
-      render(
-        <AppendFile path={testFilePath}>
-          <AppendRegion id="append" />
-        </AppendFile>,
-      ),
-    ).toThrow('AppendRegion "append" must have either children or content');
+    await expect(
+      <AppendFile path={testFilePath}>
+        <AppendRegion id="append" />
+      </AppendFile>,
+    ).toHaveDiagnosticsAsync([
+      {
+        message: 'AppendRegion "append" must have either children or content',
+        severity: "error",
+      },
+    ]);
   });
 
   it("should throw error when region has missing start sigil", async () => {
@@ -196,7 +201,7 @@ describe("AppendFile", () => {
     `);
   });
 
-  it("should throw error when region has missing end sigil", async () => {
+  it("should emit diagnostic when region has missing end sigil", async () => {
     const contentWithOnlyStart = d`
       Content
       <!-- alloy-incomplete-start -->
@@ -204,15 +209,17 @@ describe("AppendFile", () => {
 
     writeFileSync(testFilePath, contentWithOnlyStart, "utf-8");
 
-    await expect(async () =>
-      renderAsync(
-        <AppendFile path={testFilePath} regions={["incomplete"]}>
-          <AppendRegion id="incomplete">content</AppendRegion>
-        </AppendFile>,
-      ),
-    ).rejects.toThrow(
-      'Region "incomplete" has start sigil but no corresponding end sigil',
-    );
+    await expect(
+      <AppendFile path={testFilePath} regions={["incomplete"]}>
+        <AppendRegion id="incomplete">content</AppendRegion>
+      </AppendFile>,
+    ).toHaveDiagnosticsAsync([
+      {
+        message:
+          'Region "incomplete" has start sigil but no corresponding end sigil',
+        severity: "error",
+      },
+    ]);
   });
 
   it("should handle complex nested content", async () => {

package/test/components/template-file.test.tsx

@@ -6,7 +6,6 @@ import {
   TemplateFile,
   TemplateVariable,
 } from "../../src/components/TemplateFile.jsx";
-import { renderAsync } from "../../src/render.js";
 import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 
@@ -82,21 +81,22 @@ describe("TemplateFile", () => {
     await expect(result).toRenderToAsync("Hello Bob!");
   });
 
-  it("should throw error for missing template variables", async () => {
+  it("should emit diagnostic for missing template variables", async () => {
     const templatePath = join(tmpdir(), "test-missing-var-template.txt");
     const templateContent = "Hello {{ name }}! Your age is {{ age }}.";
     writeFileSync(templatePath, templateContent);
 
     await expect(
-      async () =>
-        await renderAsync(
-          <TemplateFile src={templatePath} path="output.txt">
-            <TemplateVariable name="name" value="Charlie" />
-          </TemplateFile>,
-        ),
-    ).rejects.toThrow(
-      'Template variable "age" not found in TemplateVariable children',
-    );
+      <TemplateFile src={templatePath} path="output.txt">
+        <TemplateVariable name="name" value="Charlie" />
+      </TemplateFile>,
+    ).toHaveDiagnosticsAsync([
+      {
+        message:
+          'Template variable "age" not found in TemplateVariable children',
+        severity: "error",
+      },
+    ]);
   });
 
   it("should handle template with no variables", async () => {

package/test/lazy-isempty.test.tsx

@@ -0,0 +1,106 @@
+import { ref } from "@vue/reactivity";
+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", () => {
+  it("context starts without isEmpty ref allocated", () => {
+    let ctx: Context | null = null;
+
+    function Capture() {
+      ctx = getContext()!;
+      return "content";
+    }
+
+    renderTree(<Capture />);
+
+    // The isEmpty ref should NOT be allocated unless someone observes it.
+    expect(ctx).not.toBeNull();
+    expect(ctx!.isEmpty).toBeUndefined();
+    expect(ctx!._lastEmpty).toBe(false);
+  });
+
+  it("ensureIsEmpty lazily allocates the isEmpty ref", () => {
+    let ctx: Context | null = null;
+
+    function Capture() {
+      ctx = getContext()!;
+      return "content";
+    }
+
+    renderTree(<Capture />);
+
+    expect(ctx!.isEmpty).toBeUndefined();
+    const isEmptyRef = ensureIsEmpty(ctx!);
+    expect(ctx!.isEmpty).toBeDefined();
+    expect(isEmptyRef).toBe(ctx!.isEmpty);
+  });
+
+  it("_lastEmpty is true for empty component, false for non-empty", () => {
+    let emptyCtx: Context | null = null;
+    let fullCtx: Context | null = null;
+
+    function EmptyCapture() {
+      emptyCtx = getContext()!;
+      return false;
+    }
+
+    function FullCapture() {
+      fullCtx = getContext()!;
+      return "has content";
+    }
+
+    renderTree(
+      <>
+        <EmptyCapture />
+        <FullCapture />
+      </>,
+    );
+
+    expect(emptyCtx!._lastEmpty).toBe(true);
+    expect(fullCtx!._lastEmpty).toBe(false);
+  });
+
+  it("ContentSlot triggers ensureIsEmpty and tracks reactively", () => {
+    const ContentSlot = createContentSlot();
+    const showContent = ref(false);
+
+    const tree = renderTree(
+      <>
+        {ContentSlot.isEmpty && "empty"}
+        <ContentSlot>
+          <Show when={showContent.value}>content</Show>
+        </ContentSlot>
+      </>,
+    );
+
+    expect(printTree(tree)).toBe("empty");
+
+    showContent.value = true;
+    expect(printTree(tree)).toBe("content");
+  });
+
+  it("propagates empty state up through parent contexts", () => {
+    const OuterSlot = createContentSlot();
+    const showContent = ref(false);
+
+    const tree = renderTree(
+      <>
+        {OuterSlot.isEmpty && "outer-empty"}
+        <OuterSlot>
+          <Show when={showContent.value}>content</Show>
+        </OuterSlot>
+      </>,
+    );
+
+    // Outer should be empty initially.
+    expect(printTree(tree)).toBe("outer-empty");
+
+    // Show content — outer should become non-empty.
+    showContent.value = true;
+    expect(printTree(tree)).toBe("content");
+  });
+});

package/test/reactive-union-set-disposers.test.tsx

@@ -0,0 +1,112 @@
+import { reactive } from "@vue/reactivity";
+import { describe, expect, it } from "vitest";
+import { ReactiveUnionSet } from "../src/reactive-union-set.js";
+import { effect } from "../src/reactivity.js";
+import { flushJobs } from "../src/scheduler.js";
+
+describe("ReactiveUnionSet: per-item disposers via addSubset", () => {
+  it("calls onDelete when item is removed from subset", () => {
+    const parentSet = new ReactiveUnionSet<string>();
+    const subset = reactive(new Set<string>());
+    const deleted: string[] = [];
+
+    parentSet.addSubset(subset, {
+      onDelete(value) {
+        deleted.push(value);
+      },
+    });
+
+    subset.add("a");
+    subset.add("b");
+    flushJobs();
+    expect(parentSet.has("a")).toBe(true);
+    expect(parentSet.has("b")).toBe(true);
+
+    subset.delete("a");
+    flushJobs();
+    expect(parentSet.has("a")).toBe(false);
+    expect(deleted).toContain("a");
+  });
+
+  it("calls onDelete for all items when subset is cleared", () => {
+    const parentSet = new ReactiveUnionSet<string>();
+    const subset = reactive(new Set<string>());
+    const deleted: string[] = [];
+
+    parentSet.addSubset(subset, {
+      onDelete(value) {
+        deleted.push(value);
+      },
+    });
+
+    subset.add("a");
+    subset.add("b");
+    subset.add("c");
+    flushJobs();
+    expect(parentSet.size).toBe(3);
+
+    subset.clear();
+    flushJobs();
+    expect(parentSet.size).toBe(0);
+    expect(deleted.sort()).toEqual(["a", "b", "c"]);
+  });
+
+  it("disposes root scopes created by onAdd when item is removed", () => {
+    const parentSet = new ReactiveUnionSet<string>();
+    const subset = reactive(new Set<string>());
+    let disposeCount = 0;
+
+    // Use the constructor-level onAdd so items are still added to the set,
+    // plus per-subset onAdd with root scope tracking.
+    parentSet.addSubset(subset, {
+      onAdd(value) {
+        // The onAdd in addSubset wraps in root() internally.
+        // Side-effects created here are cleaned up when the item is removed.
+        effect(() => {
+          void value; // track nothing real, just proving the effect exists
+        });
+        return value;
+      },
+      onDelete() {
+        disposeCount++;
+      },
+    });
+
+    subset.add("x");
+    flushJobs();
+
+    // Remove item — root scope (and its effects) should be disposed.
+    subset.delete("x");
+    flushJobs();
+    expect(disposeCount).toBe(1);
+  });
+
+  it("re-adding after delete triggers fresh onAdd", () => {
+    const parentSet = new ReactiveUnionSet<string>();
+    const subset = reactive(new Set<string>());
+    let addCount = 0;
+    const deleted: string[] = [];
+
+    parentSet.addSubset(subset, {
+      onAdd(value) {
+        addCount++;
+        return value;
+      },
+      onDelete(value) {
+        deleted.push(value);
+      },
+    });
+
+    subset.add("a");
+    flushJobs();
+    expect(addCount).toBe(1);
+
+    subset.delete("a");
+    flushJobs();
+    expect(deleted).toEqual(["a"]);
+
+    subset.add("a");
+    flushJobs();
+    expect(addCount).toBe(2);
+  });
+});

package/test/reactivity/shallow-reactive.test.tsx

@@ -0,0 +1,56 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  getReactiveCreationLocation,
+  shallowReactive,
+} from "../../src/reactivity.js";
+
+describe("shallowReactive creation location", () => {
+  let origDebug: string | undefined;
+
+  beforeEach(() => {
+    origDebug = process.env.ALLOY_DEBUG;
+    process.env.ALLOY_DEBUG = "1";
+  });
+
+  afterEach(() => {
+    if (origDebug === undefined) {
+      delete process.env.ALLOY_DEBUG;
+    } else {
+      process.env.ALLOY_DEBUG = origDebug;
+    }
+  });
+
+  it("stores creation location keyed by raw target when debug enabled", () => {
+    const raw = { x: 1 };
+    shallowReactive(raw);
+
+    const location = getReactiveCreationLocation(raw);
+    // When ALLOY_DEBUG is set, captureSourceLocation should return something.
+    expect(location).toBeDefined();
+  });
+
+  it("does not store location when debug is disabled", () => {
+    delete process.env.ALLOY_DEBUG;
+    const raw = { y: 2 };
+    shallowReactive(raw);
+
+    const location = getReactiveCreationLocation(raw);
+    expect(location).toBeUndefined();
+  });
+
+  it("location is keyed by raw target, not proxy", () => {
+    const raw = { z: 3 };
+    const proxy = shallowReactive(raw);
+
+    // Proxy and raw are different objects.
+    expect(proxy).not.toBe(raw);
+
+    // Location should be on the raw target.
+    const location = getReactiveCreationLocation(raw);
+    expect(location).toBeDefined();
+
+    // The proxy itself should NOT have a location stored (WeakMap keyed by raw).
+    // Note: Vue may unwrap the proxy to raw internally, but our code explicitly
+    // stores on `target` (the raw object passed to shallowReactive).
+  });
+});

package/test/rendering/basic.test.tsx

@@ -166,3 +166,7 @@ it("keeps spaces between expressions", () => {
     </>,
   ).toRenderTo("a str str getStr getStr c");
 });
+
+it("renders numbers", () => {
+  expect(<>200</>).toRenderTo("200");
+});

package/test/rendering/print-render-stack.test.tsx

@@ -0,0 +1,244 @@
+import {
+  Output,
+  SourceDirectory,
+  SourceFile,
+  renderAsync,
+} from "@alloy-js/core";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import WebSocket from "ws";
+import { createNamedContext } from "../../src/context.js";
+import {
+  enableDevtools,
+  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 {
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "");
+}
+
+// Helper to check if any console.error call contains a string (after stripping ANSI codes)
+function expectErrorContaining(
+  spy: ReturnType<typeof vi.spyOn>,
+  substring: string,
+) {
+  const calls = spy.mock.calls.map((call) => stripAnsi(String(call[0])));
+  expect(calls.some((msg) => msg.includes(substring))).toBe(true);
+}
+
+describe("printRenderStack", () => {
+  let socket: WebSocket | undefined;
+
+  beforeEach(async () => {
+    const server = await enableDevtools({ port: 0 });
+    socket = new WebSocket(`ws://127.0.0.1:${server.port}`);
+    await new Promise<void>((resolve, reject) => {
+      socket?.once("open", resolve);
+      socket?.once("error", reject);
+    });
+  });
+
+  afterEach(async () => {
+    if (socket) {
+      socket.close();
+      socket = undefined;
+    }
+    await resetDevtoolsServerForTests();
+
+    // Clear render stack to prevent state leakage between tests
+    clearRenderStack();
+  });
+
+  it("prints the current file when an error occurs", async () => {
+    const consoleErrorSpy = vi.spyOn(console, "error");
+
+    function ThrowingComponent() {
+      throw new Error("Test error");
+    }
+
+    function ParentComponent() {
+      return <ThrowingComponent />;
+    }
+
+    await expect(
+      renderAsync(
+        <Output>
+          <SourceFile path="test.ts" filetype="typescript">
+            <ParentComponent />
+          </SourceFile>
+        </Output>,
+      ),
+    ).rejects.toThrow("Test error");
+
+    // Check that console.error was called with file path
+    expectErrorContaining(consoleErrorSpy, "Error rendering in file test.ts");
+    expectErrorContaining(consoleErrorSpy, "ParentComponent");
+    expectErrorContaining(consoleErrorSpy, "ThrowingComponent");
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("prints joined path from nested directories", async () => {
+    const consoleErrorSpy = vi.spyOn(console, "error");
+
+    function ThrowingComponent() {
+      throw new Error("Nested error");
+    }
+
+    await expect(
+      renderAsync(
+        <Output>
+          <SourceDirectory path="dir1">
+            <SourceDirectory path="dir2">
+              <SourceFile path="test.ts" filetype="typescript">
+                <ThrowingComponent />
+              </SourceFile>
+            </SourceDirectory>
+          </SourceDirectory>
+        </Output>,
+      ),
+    ).rejects.toThrow("Nested error");
+
+    // Should show the joined path of all directories
+    expectErrorContaining(
+      consoleErrorSpy,
+      "Error rendering in file dir1/dir2/test.ts",
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("works when no file context is present", async () => {
+    const consoleErrorSpy = vi.spyOn(console, "error");
+
+    function ThrowingComponent() {
+      throw new Error("No file context error");
+    }
+
+    // Track the number of calls before our test
+    const callsBefore = consoleErrorSpy.mock.calls.length;
+
+    await expect(
+      renderAsync(
+        <Output>
+          <ThrowingComponent />
+        </Output>,
+      ),
+    ).rejects.toThrow("No file context error");
+
+    // Get only the calls from THIS test (after callsBefore)
+    const callsFromThisTest = consoleErrorSpy.mock.calls.slice(callsBefore);
+    const messagesFromThisTest = callsFromThisTest.map((call: any) =>
+      stripAnsi(String(call[0])),
+    );
+
+    // Output component creates a SourceDirectory with path "./"
+    // The error message should be "Error rendering in file ./"
+    expect(
+      messagesFromThisTest.some(
+        (msg: string) => msg && msg.includes("Error rendering in file ./"),
+      ),
+    ).toBe(true);
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("includes component stack with props", async () => {
+    const consoleErrorSpy = vi.spyOn(console, "error");
+
+    function ThrowingComponent(props: { message: string; count: number }) {
+      throw new Error("Component error");
+    }
+
+    function WrapperComponent(props: { value: string }) {
+      return <ThrowingComponent message={props.value} count={42} />;
+    }
+
+    await expect(
+      renderAsync(
+        <Output>
+          <SourceFile path="props-test.ts" filetype="typescript">
+            <WrapperComponent value="test" />
+          </SourceFile>
+        </Output>,
+      ),
+    ).rejects.toThrow("Component error");
+
+    expectErrorContaining(
+      consoleErrorSpy,
+      "Error rendering in file props-test.ts",
+    );
+    expectErrorContaining(consoleErrorSpy, "WrapperComponent");
+    expectErrorContaining(consoleErrorSpy, 'value: "test"');
+    expectErrorContaining(consoleErrorSpy, "ThrowingComponent");
+    expectErrorContaining(consoleErrorSpy, 'message: "test", count: 42');
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("prints 'Error rendering:' when no file or directory context is present", async () => {
+    const consoleErrorSpy = vi.spyOn(console, "error");
+
+    function ThrowingComponent() {
+      throw new Error("No context error");
+    }
+
+    // Track the number of calls before our test
+    const callsBefore = consoleErrorSpy.mock.calls.length;
+
+    // Don't use Output wrapper to avoid SourceDirectory context
+    await expect(renderAsync(<ThrowingComponent />)).rejects.toThrow();
+
+    // Get only the calls from THIS test (after callsBefore)
+    const callsFromThisTest = consoleErrorSpy.mock.calls.slice(callsBefore);
+    const messagesFromThisTest = callsFromThisTest.map((call: any) =>
+      stripAnsi(String(call[0])),
+    );
+
+    // Should have "Error rendering:" without file path
+    expect(
+      messagesFromThisTest.some(
+        (msg: string) => msg && msg.includes("Error rendering:"),
+      ),
+    ).toBe(true);
+    // Should NOT have any message with "in file"
+    expect(
+      messagesFromThisTest.some(
+        (msg: string) => msg && msg.includes("in file"),
+      ),
+    ).toBe(false);
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("shows context name for named context providers", async () => {
+    const consoleErrorSpy = vi.spyOn(console, "error");
+
+    const MyContext = createNamedContext<string>("MyContext");
+
+    function ThrowingComponent() {
+      throw new Error("Context error");
+    }
+
+    await expect(
+      renderAsync(
+        <Output>
+          <SourceFile path="context-test.ts" filetype="typescript">
+            <MyContext.Provider value="test-value">
+              <ThrowingComponent />
+            </MyContext.Provider>
+          </SourceFile>
+        </Output>,
+      ),
+    ).rejects.toThrow("Context error");
+
+    // Check that the named context provider is shown as a separate component
+    expectErrorContaining(consoleErrorSpy, "at MyContext");
+    expectErrorContaining(consoleErrorSpy, 'value: "test-value"');
+
+    consoleErrorSpy.mockRestore();
+  });
+});