@alloy-js/core 0.23.0-dev.1 → 0.23.0-dev.11

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

@@ -1,8 +1,17 @@
-import { Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+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 { renderTree } from "../../src/render.js";
 import "../../testing/extend-expect.js";
 
 // Strip ANSI escape codes from a string for consistent testing across environments
@@ -21,27 +30,29 @@ function expectErrorContaining(
 }
 
 describe("printRenderStack", () => {
-  let originalEnv: string | undefined;
-
-  beforeEach(() => {
-    // Enable debug mode
-    originalEnv = process.env.ALLOY_DEBUG;
-    process.env.ALLOY_DEBUG = "1";
+  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(() => {
-    // Restore environment
-    if (originalEnv === undefined) {
-      delete process.env.ALLOY_DEBUG;
-    } else {
-      process.env.ALLOY_DEBUG = originalEnv;
+  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", () => {
+  it("prints the current file when an error occurs", async () => {
     const consoleErrorSpy = vi.spyOn(console, "error");
 
     function ThrowingComponent() {
@@ -52,15 +63,15 @@ describe("printRenderStack", () => {
       return <ThrowingComponent />;
     }
 
-    expect(() => {
-      renderTree(
+    await expect(
+      renderAsync(
         <Output>
           <SourceFile path="test.ts" filetype="typescript">
             <ParentComponent />
           </SourceFile>
         </Output>,
-      );
-    }).toThrow("Test error");
+      ),
+    ).rejects.toThrow("Test error");
 
     // Check that console.error was called with file path
     expectErrorContaining(consoleErrorSpy, "Error rendering in file test.ts");
@@ -70,15 +81,15 @@ describe("printRenderStack", () => {
     consoleErrorSpy.mockRestore();
   });
 
-  it("prints joined path from nested directories", () => {
+  it("prints joined path from nested directories", async () => {
     const consoleErrorSpy = vi.spyOn(console, "error");
 
     function ThrowingComponent() {
       throw new Error("Nested error");
     }
 
-    expect(() => {
-      renderTree(
+    await expect(
+      renderAsync(
         <Output>
           <SourceDirectory path="dir1">
             <SourceDirectory path="dir2">
@@ -88,8 +99,8 @@ describe("printRenderStack", () => {
             </SourceDirectory>
           </SourceDirectory>
         </Output>,
-      );
-    }).toThrow("Nested error");
+      ),
+    ).rejects.toThrow("Nested error");
 
     // Should show the joined path of all directories
     expectErrorContaining(
@@ -100,7 +111,7 @@ describe("printRenderStack", () => {
     consoleErrorSpy.mockRestore();
   });
 
-  it("works when no file context is present", () => {
+  it("works when no file context is present", async () => {
     const consoleErrorSpy = vi.spyOn(console, "error");
 
     function ThrowingComponent() {
@@ -110,13 +121,13 @@ describe("printRenderStack", () => {
     // Track the number of calls before our test
     const callsBefore = consoleErrorSpy.mock.calls.length;
 
-    expect(() => {
-      renderTree(
+    await expect(
+      renderAsync(
         <Output>
           <ThrowingComponent />
         </Output>,
-      );
-    }).toThrow("No file context error");
+      ),
+    ).rejects.toThrow("No file context error");
 
     // Get only the calls from THIS test (after callsBefore)
     const callsFromThisTest = consoleErrorSpy.mock.calls.slice(callsBefore);
@@ -135,7 +146,7 @@ describe("printRenderStack", () => {
     consoleErrorSpy.mockRestore();
   });
 
-  it("includes component stack with props", () => {
+  it("includes component stack with props", async () => {
     const consoleErrorSpy = vi.spyOn(console, "error");
 
     function ThrowingComponent(props: { message: string; count: number }) {
@@ -146,15 +157,15 @@ describe("printRenderStack", () => {
       return <ThrowingComponent message={props.value} count={42} />;
     }
 
-    expect(() => {
-      renderTree(
+    await expect(
+      renderAsync(
         <Output>
           <SourceFile path="props-test.ts" filetype="typescript">
             <WrapperComponent value="test" />
           </SourceFile>
         </Output>,
-      );
-    }).toThrow("Component error");
+      ),
+    ).rejects.toThrow("Component error");
 
     expectErrorContaining(
       consoleErrorSpy,
@@ -168,7 +179,7 @@ describe("printRenderStack", () => {
     consoleErrorSpy.mockRestore();
   });
 
-  it("prints 'Error rendering:' when no file or directory context is present", () => {
+  it("prints 'Error rendering:' when no file or directory context is present", async () => {
     const consoleErrorSpy = vi.spyOn(console, "error");
 
     function ThrowingComponent() {
@@ -179,9 +190,7 @@ describe("printRenderStack", () => {
     const callsBefore = consoleErrorSpy.mock.calls.length;
 
     // Don't use Output wrapper to avoid SourceDirectory context
-    expect(() => {
-      renderTree(<ThrowingComponent />);
-    }).toThrow();
+    await expect(renderAsync(<ThrowingComponent />)).rejects.toThrow();
 
     // Get only the calls from THIS test (after callsBefore)
     const callsFromThisTest = consoleErrorSpy.mock.calls.slice(callsBefore);
@@ -205,7 +214,7 @@ describe("printRenderStack", () => {
     consoleErrorSpy.mockRestore();
   });
 
-  it("shows context name for named context providers", () => {
+  it("shows context name for named context providers", async () => {
     const consoleErrorSpy = vi.spyOn(console, "error");
 
     const MyContext = createNamedContext<string>("MyContext");
@@ -214,8 +223,8 @@ describe("printRenderStack", () => {
       throw new Error("Context error");
     }
 
-    expect(() => {
-      renderTree(
+    await expect(
+      renderAsync(
         <Output>
           <SourceFile path="context-test.ts" filetype="typescript">
             <MyContext.Provider value="test-value">
@@ -223,8 +232,8 @@ describe("printRenderStack", () => {
             </MyContext.Provider>
           </SourceFile>
         </Output>,
-      );
-    }).toThrow("Context error");
+      ),
+    ).rejects.toThrow("Context error");
 
     // Check that the named context provider is shown as a separate component
     expectErrorContaining(consoleErrorSpy, "at MyContext");