@alloy-js/core 0.24.0-dev.1 → 0.24.0-dev.6

package/test/babel-e2e.test.ts

@@ -0,0 +1,224 @@
+/**
+ * End-to-end test: compile real JSX through the Alloy babel preset with
+ * then execute the compiled output against the new runtime.
+ *
+ * Validates that:
+ *  - The preset routes runtime imports to `@alloy-js/core/jsx-runtime`.
+ *  - The compiled output (using `_$createIntrinsic` / `_$createComponent`
+ *    / `_$memo` / `_$mergeProps`) executes correctly under the new
+ *    runtime semantics (component thunks invoked via `runInContext`,
+ *    intrinsics returning AlloyNodes eagerly).
+ */
+
+// @ts-expect-error — @babel/core has no bundled types in this workspace
+import { transformSync } from "@babel/core";
+// @ts-expect-error — preset has no types
+import alloyPreset from "@alloy-js/babel-preset";
+// @ts-expect-error — preset-typescript has no types
+import typescriptPreset from "@babel/preset-typescript";
+import { describe, expect, it } from "vitest";
+import { type AlloyNode } from "../src/render/index.js";
+import { createElement } from "../src/render/node.js";
+import { insert } from "../src/runtime/index.js";
+import { flushJobs } from "../src/scheduler.js";
+import { textContent } from "./tree-test-utils.js";
+
+function compile(src: string): string {
+  const result = transformSync(src, {
+    filename: "test.tsx",
+    presets: [typescriptPreset, [alloyPreset]],
+  });
+  if (!result?.code) throw new Error("compile failed");
+  return result.code;
+}
+
+/**
+ * Build a function that evaluates the compiled module body with our
+ * jsx-runtime exports injected, and returns the named export.
+ */
+async function evalCompiled(src: string, exportName: string): Promise<unknown> {
+  const code = compile(src);
+  // Replace the auto-imports with a destructure from a passed-in runtime.
+  const runtimeStub = `const __rt = arguments[0]; const __core = arguments[1];`;
+  // Strip all `import { ... } from "@alloy-js/core/jsx-runtime";` lines
+  // and replace them with destructuring from __rt.
+  const importRegex =
+    /import\s*\{\s*([^}]+)\s*\}\s*from\s*"@alloy-js\/core\/jsx-runtime";?/g;
+  const destructures: string[] = [];
+  let body = code.replace(importRegex, (_match, names: string) => {
+    // Convert `foo as _$foo` (import alias) → `foo: _$foo` (destructure alias).
+    const destructureNames = names.replace(/(\w+)\s+as\s+(\w+)/g, "$1: $2");
+    destructures.push(`const {${destructureNames}} = __rt;`);
+    return "";
+  });
+  // Bare @alloy-js/core imports (Show, Switch, Match, For, …) come from
+  // the second runtime argument.
+  const coreImportRegex =
+    /import\s*\{\s*([^}]+)\s*\}\s*from\s*"@alloy-js\/core";?/g;
+  body = body.replace(coreImportRegex, (_match, names: string) => {
+    const destructureNames = names.replace(/(\w+)\s+as\s+(\w+)/g, "$1: $2");
+    // Built-ins live in the runtime module; everything
+    // else comes from core. Split the names by what the runtime
+    // re-exports.
+    destructures.push(`const {${destructureNames}} = { ...__core, ...__rt };`);
+    return "";
+  });
+  // The compiled module uses ESM `export { App }`. Convert to a return.
+  body = body.replace(
+    /export\s*\{\s*([^}]+)\s*\}\s*;?/g,
+    (_, names: string) => {
+      const list = names.split(",").map((s) => s.trim());
+      return `return { ${list.join(",")} };`;
+    },
+  );
+  // import.meta.url isn't available; stub it.
+  body = body.replace(/import\.meta\.url/g, '"test://test.tsx"');
+
+  const wrapped = `${runtimeStub}\n${destructures.join("\n")}\n${body}`;
+  const fn = new Function(wrapped);
+  const runtime = await import("../src/runtime/index.js");
+  const core = await import("../src/index.js");
+  return fn(runtime, core)[exportName];
+}
+
+function renderToString(thunk: unknown): string {
+  const parent = createElement("group");
+  insert(parent, thunk);
+  flushJobs();
+  return textContent(parent);
+}
+
+function printNode(node: AlloyNode): string {
+  flushJobs();
+  return textContent(node);
+}
+
+describe("babel preset — end-to-end", () => {
+  it("compiles intrinsics and produces AlloyNode output", async () => {
+    const src = `
+      const App = () => <group>hello, world</group>;
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    // App is a plain function (no createComponent wrapper at the top).
+    const node = App() as AlloyNode;
+    expect(printNode(node)).toBe("hello, world");
+  });
+
+  it("compiles component invocations and threads props correctly", async () => {
+    const src = `
+      const Greet = (props) => <group>hello, {props.name}!</group>;
+      const App = () => <indent><Greet name="world" /></indent>;
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    const node = App() as AlloyNode;
+    expect(printNode(node)).toBe("hello, world!");
+  });
+
+  it("compiles fragments and arrays of children", async () => {
+    const src = `
+      const App = () => <><group>a</group>{"-"}<group>b</group></>;
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    // Top-level fragment: App() returns an array (Children) per plugin
+    // output. Insert into a parent and print.
+    expect(renderToString(App())).toBe("a-b");
+  });
+
+  it("compiles nested components composing through intrinsics", async () => {
+    const src = `
+      const Inner = (props) => <group>[{props.value}]</group>;
+      const Mid = (props) => <indent><Inner value={props.value} /></indent>;
+      const App = () => <group><Mid value="x" /></group>;
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    expect(printNode(App() as AlloyNode)).toBe("[x]");
+  });
+
+  it("Show built-in works with alloy preset", async () => {
+    const src = `
+      import { Show } from "@alloy-js/core";
+      const App = (props) => <group><Show when={props.cond} fallback="no">yes</Show></group>;
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as (props: any) => unknown;
+    expect(printNode(App({ cond: true }) as AlloyNode)).toBe("yes");
+    expect(printNode(App({ cond: false }) as AlloyNode)).toBe("no");
+  });
+
+  it("Switch/Match built-ins work with alloy preset", async () => {
+    const src = `
+      import { Switch, Match } from "@alloy-js/core";
+      const App = (props) => (
+        <group>
+          <Switch>
+            <Match when={props.kind === "a"}>A!</Match>
+            <Match when={props.kind === "b"}>B!</Match>
+            <Match else>other</Match>
+          </Switch>
+        </group>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as (props: any) => unknown;
+    expect(printNode(App({ kind: "a" }) as AlloyNode)).toBe("A!");
+    expect(printNode(App({ kind: "b" }) as AlloyNode)).toBe("B!");
+    expect(printNode(App({ kind: "c" }) as AlloyNode)).toBe("other");
+  });
+
+  it("For built-in works with alloy preset", async () => {
+    const src = `
+      import { For } from "@alloy-js/core";
+      const App = (props) => (
+        <group>
+          <For each={props.items}>{(item) => <group>[{item}]</group>}</For>
+        </group>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as (props: any) => unknown;
+    expect(printNode(App({ items: ["a", "b", "c"] }) as AlloyNode)).toBe(
+      "[a][b][c]",
+    );
+  });
+
+  it("For with joiner with alloy preset", async () => {
+    const src = `
+      import { For } from "@alloy-js/core";
+      const App = (props) => (
+        <group>
+          <For each={props.items} joiner=",">{(item) => <group>{item}</group>}</For>
+        </group>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as (props: any) => unknown;
+    expect(printNode(App({ items: ["x", "y", "z"] }) as AlloyNode)).toBe(
+      "x,y,z",
+    );
+    expect(printNode(App({ items: [] }) as AlloyNode)).toBe("");
+  });
+
+  it("Context.Provider value flows to descendants with alloy preset", async () => {
+    const src = `
+      import { createContext, useContext } from "@alloy-js/core";
+      const Ctx = createContext();
+      const Reader = () => {
+        const v = useContext(Ctx);
+        return <group>v={v}</group>;
+      };
+      const App = () => (
+        <Ctx.Provider value="hello">
+          <group><Reader /></group>
+        </Ctx.Provider>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    // Top-level Component yields a thunk; route through insert into a parent.
+    expect(renderToString(App())).toBe("v=hello");
+  });
+});

package/test/browser-build.test.ts

@@ -1,29 +1,74 @@
 import { existsSync, mkdirSync, rmSync, writeFileSync } from "fs";
-import { join } from "path";
+import { join, resolve } from "path";
 import { build, type Rolldown } from "vite";
 import { afterAll, beforeAll, describe, expect, it } from "vitest";
 
 const tempDir = join(__dirname, ".temp", "browser-build-test");
 const entryFile = join(tempDir, "entry.js");
 
+// Absolute path to the compiled browser entry point.
+const corePkgDir = resolve(__dirname, "..");
+const browserEntry = resolve(corePkgDir, "dist/src/index.browser.js");
+
 /**
  * Bundles `@alloy-js/core` for the browser using Vite and returns
- * the concatenated output code.
+ * the concatenated output code and any warnings emitted during the build.
  *
- * Uses the `browser` export condition from the package exports map,
- * which resolves to the compiled browser entry. This requires the
- * package to be built first (the CI pipeline and `pnpm build` handle
- * this automatically).
+ * Uses a custom resolveId plugin to force the browser entry point,
+ * because vitest's `resolve.conditions: ["source"]` leaks into the
+ * Vite build() call even with `configFile: false`, causing the test
+ * to resolve TypeScript source files instead of compiled dist.
  */
-async function bundleForBrowser(): Promise<string> {
+async function bundleForBrowser(): Promise<{
+  code: string;
+  warnings: string[];
+}> {
+  const warnings: string[] = [];
   const result = await build({
     configFile: false,
     logLevel: "silent",
     resolve: {
       conditions: ["browser", "import"],
+      mainFields: ["browser", "module", "main"],
     },
     // Disable automatic process.env replacement so we can detect leaks
     define: {},
+    plugins: [
+      {
+        name: "force-browser-entry",
+        enforce: "pre",
+        resolveId(source) {
+          // Force @alloy-js/core to resolve to the compiled browser entry,
+          // bypassing vitest's "source" condition that would resolve to TS.
+          if (source === "@alloy-js/core") {
+            return browserEntry;
+          }
+          return null;
+        },
+      },
+      {
+        name: "capture-warnings",
+        enforce: "post",
+        buildStart() {
+          // Hook into Vite's warning channel via rollup options
+        },
+      },
+    ],
+    customLogger: {
+      info() {},
+      error() {},
+      clearScreen() {},
+      hasErrorLogged() {
+        return false;
+      },
+      hasWarned: false,
+      warnOnce(msg: string) {
+        warnings.push(msg);
+      },
+      warn(msg: string) {
+        warnings.push(msg);
+      },
+    },
     build: {
       write: false,
       minify: false,
@@ -41,6 +86,13 @@ async function bundleForBrowser(): Promise<string> {
           // Externalize third-party deps (vue, pathe, picocolors, …)
           return true;
         },
+        onwarn(warning) {
+          warnings.push(
+            typeof warning === "string" ? warning : (
+              (warning.message ?? String(warning))
+            ),
+          );
+        },
       },
     },
   });
@@ -52,7 +104,7 @@ async function bundleForBrowser(): Promise<string> {
   const chunks = output.output.filter(
     (o): o is Rolldown.OutputChunk => o.type === "chunk",
   );
-  return chunks.map((c) => c.code).join("\n");
+  return { code: chunks.map((c) => c.code).join("\n"), warnings };
 }
 
 describe("browser build", () => {
@@ -71,7 +123,10 @@ describe("browser build", () => {
   });
 
   it("should bundle for browser without Node.js polyfills", async () => {
-    const code = await bundleForBrowser();
+    const { code, warnings } = await bundleForBrowser();
+
+    // Sanity check: the bundle should not be empty
+    expect(code.length).toBeGreaterThan(0);
 
     // The browser bundle must not reference the Node.js `process` global.
     // If this fails, a file is using process.env / process.cwd / etc.
@@ -80,5 +135,22 @@ describe("browser build", () => {
 
     // Should not contain static require("node:…") calls
     expect(code).not.toMatch(/require\(\s*["']node:/);
+
+    // Should not contain dynamic import("node:…") calls — these are the
+    // ones esbuild and other browser bundlers reject (e.g. node:sqlite, node:fs).
+    expect(code).not.toMatch(/import\(\s*["']node:/);
+
+    // Vite silently externalizes node:* modules for browser builds via its
+    // built-in rolldown:vite-resolve plugin, which hides the issue from the
+    // code assertions above. Catch those by checking for externalization warnings.
+    const nodeExternalizationWarnings = warnings.filter(
+      (w) =>
+        w.includes("externalized for browser compatibility") ||
+        w.includes("node:"),
+    );
+    expect(
+      nodeExternalizationWarnings,
+      `Node.js modules were externalized for browser compatibility — missing browser shims:\n${nodeExternalizationWarnings.join("\n")}`,
+    ).toEqual([]);
   }, 30_000);
 });

package/test/components/block.test.tsx

@@ -1,7 +1,7 @@
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { Block } from "../../src/components/Block.jsx";
-import { printTree, renderTree } from "../../src/render.js";
+import { printTree, renderTree } from "../../src/test-render.js";
 import "../../testing/extend-expect.js";
 it("renders properly with no children", () => {
   const template = (

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

@@ -4,7 +4,8 @@ import { join } from "path";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { CopyFile } from "../../src/components/CopyFile.jsx";
 import { SourceDirectory } from "../../src/components/SourceDirectory.jsx";
-import { CopyOutputFile, render } from "../../src/render.js";
+import type { CopyOutputFile } from "../../src/output-types.js";
+import { render } from "../../src/render-output.js";
 import { writeOutput } from "../../src/write-output.js";
 import "../../testing/extend-expect.js";
 

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

@@ -3,7 +3,7 @@ import { tmpdir } from "os";
 import { join } from "pathe";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { UpdateFile } from "../../src/components/UpdateFile.jsx";
-import { render } from "../../src/render.js";
+import { render } from "../../src/render-output.js";
 import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 

package/test/components/wrap.test.tsx

@@ -1,7 +1,7 @@
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { Wrap } from "../../src/components/Wrap.jsx";
-import { printTree, renderTree } from "../../src/render.js";
+import { printTree, renderTree } from "../../src/test-render.js";
 import "../../testing/extend-expect.js";
 
 function Wrapper(props: any) {

package/test/control-flow/match.test.tsx

@@ -2,7 +2,7 @@ import "@alloy-js/core/testing";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { Match, Switch } from "../../src/components/Switch.jsx";
-import { printTree, renderTree } from "../../src/render.js";
+import { printTree, renderTree } from "../../src/test-render.js";
 
 it("selects the true branch", () => {
   const template = (

package/test/control-flow/show.test.tsx

@@ -2,7 +2,7 @@ import "@alloy-js/core/testing";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { Show } from "../../src/components/Show.jsx";
-import { printTree, renderTree } from "../../src/render.js";
+import { printTree, renderTree } from "../../src/test-render.js";
 
 it("selects the true branch", () => {
   const template = <Show when={true}>true</Show>;

package/test/lazy-isempty.test.tsx

@@ -3,10 +3,10 @@ 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 { printTree, renderTree } from "../src/test-render.js";
 import "../testing/extend-expect.js";
 
-describe("lazy isEmpty / _lastEmpty", () => {
+describe("lazy isEmpty", () => {
   it("context starts without isEmpty ref allocated", () => {
     let ctx: Context | null = null;
 
@@ -20,7 +20,7 @@ describe("lazy isEmpty / _lastEmpty", () => {
     // The isEmpty ref should NOT be allocated unless someone observes it.
     expect(ctx).not.toBeNull();
     expect(ctx!.isEmpty).toBeUndefined();
-    expect(ctx!._lastEmpty).toBe(false);
+    expect(ctx!.childrenWithContent).toBe(1);
   });
 
   it("ensureIsEmpty lazily allocates the isEmpty ref", () => {
@@ -39,7 +39,7 @@ describe("lazy isEmpty / _lastEmpty", () => {
     expect(isEmptyRef).toBe(ctx!.isEmpty);
   });
 
-  it("_lastEmpty is true for empty component, false for non-empty", () => {
+  it("tracks content count for empty and non-empty components", () => {
     let emptyCtx: Context | null = null;
     let fullCtx: Context | null = null;
 
@@ -60,8 +60,8 @@ describe("lazy isEmpty / _lastEmpty", () => {
       </>,
     );
 
-    expect(emptyCtx!._lastEmpty).toBe(true);
-    expect(fullCtx!._lastEmpty).toBe(false);
+    expect(emptyCtx!.childrenWithContent).toBe(0);
+    expect(fullCtx!.childrenWithContent).toBe(1);
   });
 
   it("ContentSlot triggers ensureIsEmpty and tracks reactively", () => {

package/test/node.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+import {
+  createElement,
+  createFragment,
+  createTextNode,
+} from "../src/render/index.js";
+import { textContent } from "./tree-test-utils.js";
+
+describe("Node tree", () => {
+  it("append/prepend/before/after build linked list correctly", () => {
+    const root = createElement("group");
+    const b = createTextNode("B");
+    const c = createTextNode("C");
+    root.append(b, c);
+    const a = createTextNode("A");
+    root.prepend(a);
+    const d = createTextNode("D");
+    c.after(d);
+    const between = createTextNode("X");
+    c.before(between);
+
+    expect(textContent(root)).toBe("ABXCD");
+    expect(root.firstChild).toBe(a);
+    expect(root.lastChild).toBe(d);
+    expect(a.nextSibling).toBe(b);
+    expect(d.previousSibling).toBe(c);
+  });
+
+  it("replaceWith / remove maintain links", () => {
+    const root = createElement("group");
+    const a = createTextNode("A");
+    const b = createTextNode("B");
+    const c = createTextNode("C");
+    root.append(a, b, c);
+    const x = createTextNode("X");
+    const y = createTextNode("Y");
+    b.replaceWith(x, y);
+    expect(textContent(root)).toBe("AXYC");
+    expect(b.parentNode).toBeNull();
+    a.remove();
+    expect(textContent(root)).toBe("XYC");
+    expect(root.firstChild).toBe(x);
+  });
+
+  it("Fragment splices children on insert and self-empties", () => {
+    const root = createElement("group");
+    const f = createFragment();
+    f.append("hello", " ", "world");
+    expect(f.firstChild).not.toBeNull();
+    root.append(f);
+    expect(f.firstChild).toBeNull();
+    expect(f.parentNode).toBeNull();
+    expect(textContent(root)).toBe("hello world");
+  });
+
+  it("indent element preserves nested text in tree order", () => {
+    const root = createElement("group");
+    const indent = createElement("indent");
+    indent.append("first\nsecond\nthird");
+    root.append("top\n", indent);
+    expect(textContent(root)).toBe("top\nfirst\nsecond\nthird");
+    expect(root.lastChild).toBe(indent);
+  });
+
+  it("moveBefore atomically relocates without disconnecting subtree", () => {
+    const root = createElement("group");
+    const a = createElement("group");
+    const b = createElement("group");
+    a.append("A-content");
+    b.append("B-content");
+    root.append(a, b);
+    expect(textContent(root)).toBe("A-contentB-content");
+    // Move a after b.
+    root.moveBefore(a, null);
+    expect(textContent(root)).toBe("B-contentA-content");
+    // Subtree of `a` is untouched.
+    expect(a.firstChild).not.toBeNull();
+  });
+
+  it("moveBefore is a no-op when already at target position", () => {
+    const root = createElement("group");
+    const a = createTextNode("A");
+    const b = createTextNode("B");
+    root.append(a, b);
+    const aPrev = a.previousSibling;
+    root.moveBefore(a, b);
+    expect(a.previousSibling).toBe(aPrev);
+    expect(textContent(root)).toBe("AB");
+  });
+});