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

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/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();
+  });
+});

package/testing/create-test-wrapper.tsx

@@ -7,7 +7,7 @@ import {
   Output,
   OutputSymbol,
   shallowReactive,
-} from "@alloy-js/core";
+} from "../src/index.js";
 
 export interface TestWrapper {
   Wrapper: (props: { children: Children }) => Children;

package/testing/devtools-utils.ts

@@ -0,0 +1,203 @@
+import WebSocket from "ws";
+
+export interface DevtoolsMessage {
+  type: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Creates a message collector that accumulates messages and provides utilities
+ * for waiting on conditions. Useful for tests with reactive updates.
+ */
+export function createMessageCollector(socket: WebSocket) {
+  let renderBuffer: DevtoolsMessage[] = [];
+  let flushBuffer: DevtoolsMessage[] = [];
+  const completedRenderBatches: DevtoolsMessage[][] = [];
+  const completedFlushBatches: DevtoolsMessage[][] = [];
+  const renderWaiters: Array<{
+    resolve: (messages: DevtoolsMessage[]) => void;
+    reject: (error: Error) => void;
+    timeout: NodeJS.Timeout;
+  }> = [];
+  const flushWaiters: Array<{
+    resolve: (messages: DevtoolsMessage[]) => void;
+    reject: (error: Error) => void;
+    timeout: NodeJS.Timeout;
+  }> = [];
+
+  const resolveBatch = (
+    batch: DevtoolsMessage[],
+    waiters: typeof renderWaiters,
+    completed: DevtoolsMessage[][],
+  ) => {
+    if (waiters.length > 0) {
+      for (const waiter of waiters.splice(0, waiters.length)) {
+        clearTimeout(waiter.timeout);
+        waiter.resolve(batch);
+      }
+    } else {
+      completed.push(batch);
+    }
+  };
+
+  const purgeMessages = (
+    targetBuffer: DevtoolsMessage[],
+    targetCompleted: DevtoolsMessage[][],
+    batch: DevtoolsMessage[],
+  ) => {
+    if (batch.length === 0) {
+      return {
+        buffer: targetBuffer,
+        completed: targetCompleted,
+      };
+    }
+
+    const toRemove = new Set(batch);
+    const buffer = targetBuffer.filter((msg) => !toRemove.has(msg));
+    const completed = targetCompleted
+      .map((messages) => messages.filter((msg) => !toRemove.has(msg)))
+      .filter((messages) => messages.length > 0);
+
+    return { buffer, completed };
+  };
+
+  const onMessage = (data: WebSocket.RawData) => {
+    try {
+      const message = JSON.parse(String(data)) as DevtoolsMessage;
+      renderBuffer.push(message);
+      flushBuffer.push(message);
+
+      if (
+        message.type === "render:complete" ||
+        message.type === "render:error"
+      ) {
+        const batch = renderBuffer;
+        renderBuffer = [];
+        resolveBatch(batch, renderWaiters, completedRenderBatches);
+      }
+
+      if (message.type === "flushJobs:complete") {
+        const batch = flushBuffer;
+        flushBuffer = [];
+        resolveBatch(batch, flushWaiters, completedFlushBatches);
+      }
+    } catch {
+      // ignore invalid messages
+    }
+  };
+
+  socket.on("message", onMessage);
+
+  return {
+    waitForRender(): Promise<DevtoolsMessage[]> {
+      if (completedRenderBatches.length > 0) {
+        const batch = completedRenderBatches.shift()!;
+        const purged = purgeMessages(flushBuffer, completedFlushBatches, batch);
+        flushBuffer = purged.buffer;
+        completedFlushBatches.length = 0;
+        return Promise.resolve(batch);
+      }
+
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          const types = renderBuffer.map((m) => m.type).join(", ");
+          reject(
+            new Error(
+              `Timed out waiting for render completion. Received ${renderBuffer.length} messages${types ? `: ${types}` : "."}`,
+            ),
+          );
+        }, 2000);
+
+        renderWaiters.push({
+          resolve: (messages) => {
+            const purged = purgeMessages(
+              flushBuffer,
+              completedFlushBatches,
+              messages,
+            );
+            flushBuffer = purged.buffer;
+            completedFlushBatches.length = 0;
+            resolve(messages);
+          },
+          reject,
+          timeout,
+        });
+      });
+    },
+    waitForFlush(): Promise<DevtoolsMessage[]> {
+      if (completedFlushBatches.length > 0) {
+        const batch = completedFlushBatches.shift()!;
+        const purged = purgeMessages(
+          renderBuffer,
+          completedRenderBatches,
+          batch,
+        );
+        renderBuffer = purged.buffer;
+        completedRenderBatches.length = 0;
+        completedRenderBatches.push(...purged.completed);
+        return Promise.resolve(batch);
+      }
+
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          const types = flushBuffer.map((m) => m.type).join(", ");
+          reject(
+            new Error(
+              `Timed out waiting for flushJobs:complete. Received ${flushBuffer.length} messages${types ? `: ${types}` : "."}`,
+            ),
+          );
+        }, 2000);
+
+        flushWaiters.push({
+          resolve: (messages) => {
+            const purged = purgeMessages(
+              renderBuffer,
+              completedRenderBatches,
+              messages,
+            );
+            renderBuffer = purged.buffer;
+            completedRenderBatches.length = 0;
+            completedRenderBatches.push(...purged.completed);
+            resolve(messages);
+          },
+          reject,
+          timeout,
+        });
+      });
+    },
+    /**
+     * Stop collecting messages
+     */
+    stop() {
+      socket.off("message", onMessage);
+      for (const waiter of renderWaiters.splice(0, renderWaiters.length)) {
+        clearTimeout(waiter.timeout);
+        waiter.reject(new Error("Collector stopped before render completion."));
+      }
+      for (const waiter of flushWaiters.splice(0, flushWaiters.length)) {
+        clearTimeout(waiter.timeout);
+        waiter.reject(
+          new Error("Collector stopped before flushJobs:complete."),
+        );
+      }
+    },
+  };
+}
+
+/**
+ * Filter messages to only include render tree messages (those starting with "render:")
+ */
+export function filterRenderTreeMessages(
+  messages: DevtoolsMessage[],
+): DevtoolsMessage[] {
+  return messages.filter((m) => m.type.startsWith("render"));
+}
+
+/**
+ * Filter messages to only include effect debug messages (those starting with "effect:")
+ */
+export function filterEffectsMessages(
+  messages: DevtoolsMessage[],
+): DevtoolsMessage[] {
+  return messages.filter((m) => m.type.startsWith("effect:"));
+}