@alloy-js/core 0.24.0-dev.2 → 0.24.0-dev.7

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/children.test.tsx

@@ -1,4 +1,4 @@
-import { children, Children, printTree, renderTree } from "@alloy-js/core";
+import { children, Children } from "@alloy-js/core";
 import { expect, it } from "vitest";
 
 it("handles a single element", () => {
@@ -6,8 +6,7 @@ it("handles a single element", () => {
     return children(() => props.children);
   }
 
-  const res = renderTree(<Foo>a b c</Foo>);
-  expect(printTree(res)).toBe("a b c");
+  expect(<Foo>a b c</Foo>).toRenderTo("a b c");
 });
 
 it("handles a multiple elements", () => {
@@ -20,12 +19,10 @@ it("handles a multiple elements", () => {
     return "Bar";
   }
 
-  const res = renderTree(
+  expect(
     <Foo>
       <Bar />
       <Bar />
     </Foo>,
-  );
-
-  expect(printTree(res)).toBe(`BarBar`);
+  ).toRenderTo(`BarBar`);
 });

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 "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 
 describe("AppendFile", () => {

package/test/components/block.test.tsx

@@ -1,8 +1,6 @@
 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 "../../testing/extend-expect.js";
 it("renders properly with no children", () => {
   const template = (
     <Block>
@@ -51,16 +49,16 @@ it("renders properly with newline and children", () => {
 
 it("renders properly when content is added reactively", () => {
   const contents = ref("");
-  const tree = renderTree(
+  const tree = (
     <>
       class Foo <Block>{contents}</Block>
-    </>,
+    </>
   );
-  expect(printTree(tree)).toRenderTo(`
+  expect(tree).toRenderTo(`
     class Foo {}
   `);
   contents.value = "x = 12;";
-  expect(printTree(tree)).toRenderTo(`
+  expect(tree).toRenderTo(`
     class Foo {
       x = 12;
     }

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

@@ -4,9 +4,9 @@ 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";
 
 describe("CopyFile", () => {
   let testDir: string;

package/test/components/declaration.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { Output } from "../../src/components/Output.jsx";
-import { Declaration, ref, renderTree, Scope } from "../../src/index.js";
+import { Declaration, ref, Scope } from "../../src/index.js";
 import { flushJobs } from "../../src/scheduler.js";
 import { BasicScope } from "../../src/symbols/basic-scope.js";
 
@@ -17,7 +17,7 @@ it("creates and cleans up a symbol", () => {
     </Output>
   );
 
-  renderTree(template);
+  expect(template).toRenderTo("");
 
   expect(scope.symbols.size).toBe(1);
   doDecl.value = false;

package/test/components/list.test.tsx

@@ -1,14 +1,5 @@
 import { expect, it } from "vitest";
-import {
-  createContentSlot,
-  List,
-  printTree,
-  ref,
-  renderTree,
-  Show,
-} from "../../src/index.js";
-import "../../testing/extend-expect.js";
-import { d } from "../../testing/render.js";
+import { createContentSlot, List, ref, Show } from "../../src/index.js";
 
 it("creates a list with default options", () => {
   const template = (
@@ -73,14 +64,14 @@ it("is useful for statements", () => {
     return "console.log(true)";
   }
   const includeStatement = ref(false);
-  const tree = renderTree(
+  const tree = (
     <List semicolon hardline ender>
       <Statement />
       {includeStatement.value && <Statement />}
       <Statement />
-    </List>,
+    </List>
   );
-  expect(printTree(tree)).toEqual(d`
+  expect(tree).toRenderTo(`
     console.log(true);
     console.log(true);
 
@@ -88,7 +79,7 @@ it("is useful for statements", () => {
 
   includeStatement.value = true;
 
-  expect(printTree(tree)).toEqual(d`
+  expect(tree).toRenderTo(`
     console.log(true);
     console.log(true);
     console.log(true);
@@ -113,37 +104,37 @@ it("It add joiners when items are become non-empty", () => {
   const item2 = ref("");
   const item3 = ref("");
 
-  const tree = renderTree(
+  const tree = (
     <group>
       <List comma line ender=";">
         <>{item1}</>
         <>{item2}</>
         <>{item3}</>
       </List>
-    </group>,
+    </group>
   );
 
-  expect(printTree(tree)).toBe(``);
+  expect(tree).toRenderTo("");
   item1.value = "hi";
-  expect(printTree(tree)).toBe(`hi;`);
+  expect(tree).toRenderTo("hi;");
   item2.value = "there";
-  expect(printTree(tree)).toBe(`hi, there;`);
+  expect(tree).toRenderTo("hi, there;");
   item3.value = "friend";
-  expect(printTree(tree)).toBe(`hi, there, friend;`);
+  expect(tree).toRenderTo("hi, there, friend;");
 
   item1.value = "";
-  expect(printTree(tree)).toBe(`there, friend;`);
+  expect(tree).toRenderTo("there, friend;");
   item3.value = "";
-  expect(printTree(tree)).toBe(`there;`);
+  expect(tree).toRenderTo("there;");
   item2.value = "";
-  expect(printTree(tree)).toBe(``);
+  expect(tree).toRenderTo("");
 });
 
 it("works with show", () => {
   const ContentSlot = createContentSlot();
   const showFirst = ref(false);
   const showSecond = ref(false);
-  const tree = renderTree(
+  const tree = (
     <>
       <ContentSlot.WhenEmpty>Empty list!</ContentSlot.WhenEmpty>
       <ContentSlot>
@@ -152,14 +143,14 @@ it("works with show", () => {
           <Show when={showSecond.value}>Two</Show>
         </List>
       </ContentSlot>
-    </>,
+    </>
   );
-  expect(printTree(tree)).toBe(`Empty list!`);
+  expect(tree).toRenderTo("Empty list!");
   showFirst.value = true;
-  expect(printTree(tree)).toBe(`One`);
+  expect(tree).toRenderTo("One");
   showSecond.value = true;
-  expect(printTree(tree)).toBe(`One, Two`);
+  expect(tree).toRenderTo("One, Two");
   showFirst.value = false;
   showSecond.value = false;
-  expect(printTree(tree)).toBe(`Empty list!`);
+  expect(tree).toRenderTo("Empty list!");
 });

package/test/components/prose.test.tsx

@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import { Prose } from "../../src/components/Prose.jsx";
-import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 
 describe("Prose", () => {

package/test/components/reference-or-content.test.tsx

@@ -13,7 +13,6 @@ import {
   SourceFile,
   useBinder,
 } from "../../src/index.js";
-import { d, renderToString } from "../../testing/render.js";
 
 function TestWrapper(props: { children: Children }) {
   const GetBinder = createTap(() => useBinder());
@@ -47,7 +46,7 @@ describe("render the reference name if a declaration exists", () => {
       </TestWrapper>
     );
 
-    expect(renderToString(template)).toEqual(d`
+    expect(template).toRenderTo(`
       Declare A
       A
     `);
@@ -64,10 +63,10 @@ describe("render the reference name if a declaration exists", () => {
       </TestWrapper>
     );
 
-    expect(renderToString(template)).toEqual(d`
-    A
-    Declare A
-  `);
+    expect(template).toRenderTo(`
+      A
+      Declare A
+    `);
   });
 });
 
@@ -79,7 +78,7 @@ it("render content if there is not declaration attached to symbol", () => {
     </TestWrapper>
   );
 
-  expect(renderToString(template)).toEqual(d`
+  expect(template).toRenderTo(`
     No Reference A
   `);
 });
@@ -97,7 +96,7 @@ it("mixed", () => {
     </TestWrapper>
   );
 
-  expect(renderToString(template)).toEqual(d`
+  expect(template).toRenderTo(`
     Declare A
     A
     No Reference B
@@ -130,7 +129,7 @@ it("resolve ref via source file reference", () => {
     </Output>
   );
 
-  expect(renderToString(template)).toEqual(d`
+  expect(template).toRenderTo(`
     Declare A
     ViaRef.A
   `);

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

@@ -8,13 +8,11 @@ import {
   Output,
   Prose,
   render,
-  renderTree,
   SourceFile,
   useContext,
 } from "@alloy-js/core";
 import { describe, expect, it } from "vitest";
 import { SourceDirectoryContext } from "../../src/context/source-directory.js";
-import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 
 it("tracks its content", () => {
@@ -22,14 +20,16 @@ it("tracks its content", () => {
   function Test() {
     context = useContext(SourceDirectoryContext);
   }
-  const _ = renderTree(
+  expect(
     <Output>
       <Test />
       <SourceFile path="hi.txt" filetype="text">
         hello!
       </SourceFile>
     </Output>,
-  );
+  ).toRenderTo({
+    "hi.txt": "hello!",
+  });
   expect(context!.contents.length).toEqual(1);
 });
 

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

@@ -6,7 +6,6 @@ import {
   TemplateFile,
   TemplateVariable,
 } from "../../src/components/TemplateFile.jsx";
-import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 
 describe("TemplateFile", () => {

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

@@ -3,8 +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 "../../testing/extend-expect.js";
+import { render } from "../../src/render-output.js";
 import { d } from "../../testing/render.js";
 
 describe("UpdateFile", () => {

package/test/components/wrap.test.tsx

@@ -1,8 +1,6 @@
 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 "../../testing/extend-expect.js";
 
 function Wrapper(props: any) {
   return <>[{props.children}]</>;
@@ -33,10 +31,10 @@ it("works reactively", () => {
     </>
   );
 
-  const tree = renderTree(template);
-  expect(printTree(tree)).toEqual(`testing`);
+  const tree = template;
+  expect(tree).toRenderTo("testing");
 
   doWrap.value = true;
 
-  expect(printTree(tree)).toEqual(`testing`);
+  expect(tree).toRenderTo("testing");
 });