@alloy-js/core 0.23.0-dev.1 → 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

@@ -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");

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