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

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

@@ -1,8 +1,6 @@
-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/test-render.js";
 
 it("selects the true branch", () => {
   const template = (
@@ -40,10 +38,10 @@ it("works with reactivity", () => {
       <Match else>odd</Match>
     </Switch>
   );
-  const tree = renderTree(template);
-  expect(printTree(tree)).toBe(`even`);
+  const tree = template;
+  expect(tree).toRenderTo("even");
   count.value++;
-  expect(printTree(tree)).toBe(`odd`);
+  expect(tree).toRenderTo("odd");
   count.value++;
-  expect(printTree(tree)).toBe(`even`);
+  expect(tree).toRenderTo("even");
 });

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

@@ -1,8 +1,6 @@
-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/test-render.js";
 
 it("selects the true branch", () => {
   const template = <Show when={true}>true</Show>;
@@ -16,10 +14,9 @@ it("works with reactivity", () => {
       even
     </Show>
   );
-  const tree = renderTree(template);
-  expect(printTree(tree)).toBe(`even`);
+  expect(template).toRenderTo("even");
   count.value++;
-  expect(printTree(tree)).toBe(`odd`);
+  expect(template).toRenderTo("odd");
   count.value++;
-  expect(printTree(tree)).toBe(`even`);
+  expect(template).toRenderTo("even");
 });

package/test/lazy-isempty.test.tsx

@@ -3,8 +3,6 @@ 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/test-render.js";
-import "../testing/extend-expect.js";
 
 describe("lazy isEmpty", () => {
   it("context starts without isEmpty ref allocated", () => {
@@ -15,7 +13,7 @@ describe("lazy isEmpty", () => {
       return "content";
     }
 
-    renderTree(<Capture />);
+    expect(<Capture />).toRenderTo("content");
 
     // The isEmpty ref should NOT be allocated unless someone observes it.
     expect(ctx).not.toBeNull();
@@ -31,7 +29,7 @@ describe("lazy isEmpty", () => {
       return "content";
     }
 
-    renderTree(<Capture />);
+    expect(<Capture />).toRenderTo("content");
 
     expect(ctx!.isEmpty).toBeUndefined();
     const isEmptyRef = ensureIsEmpty(ctx!);
@@ -53,12 +51,12 @@ describe("lazy isEmpty", () => {
       return "has content";
     }
 
-    renderTree(
+    expect(
       <>
         <EmptyCapture />
         <FullCapture />
       </>,
-    );
+    ).toRenderTo("has content");
 
     expect(emptyCtx!.childrenWithContent).toBe(0);
     expect(fullCtx!.childrenWithContent).toBe(1);
@@ -68,39 +66,39 @@ describe("lazy isEmpty", () => {
     const ContentSlot = createContentSlot();
     const showContent = ref(false);
 
-    const tree = renderTree(
+    const tree = (
       <>
         {ContentSlot.isEmpty && "empty"}
         <ContentSlot>
           <Show when={showContent.value}>content</Show>
         </ContentSlot>
-      </>,
+      </>
     );
 
-    expect(printTree(tree)).toBe("empty");
+    expect(tree).toRenderTo("empty");
 
     showContent.value = true;
-    expect(printTree(tree)).toBe("content");
+    expect(tree).toRenderTo("content");
   });
 
   it("propagates empty state up through parent contexts", () => {
     const OuterSlot = createContentSlot();
     const showContent = ref(false);
 
-    const tree = renderTree(
+    const tree = (
       <>
         {OuterSlot.isEmpty && "outer-empty"}
         <OuterSlot>
           <Show when={showContent.value}>content</Show>
         </OuterSlot>
-      </>,
+      </>
     );
 
     // Outer should be empty initially.
-    expect(printTree(tree)).toBe("outer-empty");
+    expect(tree).toRenderTo("outer-empty");
 
     // Show content — outer should become non-empty.
     showContent.value = true;
-    expect(printTree(tree)).toBe("content");
+    expect(tree).toRenderTo("content");
   });
 });

package/test/name-policy.test.tsx

@@ -1,6 +1,5 @@
 import { createNamePolicy, Output, useNamePolicy } from "@alloy-js/core";
 import { expect, it } from "vitest";
-import "../testing/extend-expect.js";
 
 it("is applied by output", () => {
   const policy = createNamePolicy((name) => {

package/test/reactivity/circular-reactives.test.tsx

@@ -1,8 +1,6 @@
 import { shallowReactive } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { For } from "../../src/index.js";
-import { printTree, renderTree } from "../../src/test-render.js";
-import { d } from "../../testing/render.js";
 
 it("it should work with circular reactives", () => {
   const items: string[] = shallowReactive([]);
@@ -23,9 +21,10 @@ it("it should work with circular reactives", () => {
       </For>
     </>
   );
-  const tree = renderTree(template);
+  const tree = template;
+  expect(tree).toRenderTo("");
   items.push("item start");
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     item start
     item 1
   `);
@@ -43,9 +42,10 @@ it("should work with immediately recursive reactives", () => {
       </For>
     </>
   );
-  const tree = renderTree(template);
+  const tree = template;
+  expect(tree).toRenderTo("");
   items.add("item start");
-  expect(printTree(tree)).toBe(d`
+  expect(tree).toRenderTo(`
     item start
     item 1
   `);

package/test/reactivity/cleanup.test.tsx

@@ -3,7 +3,6 @@ import { describe, expect, it } from "vitest";
 import { effect, memo, onCleanup } from "../../src/reactivity.js";
 import type { Children } from "../../src/runtime/component.js";
 import { flushJobs } from "../../src/scheduler.js";
-import { renderTree } from "../../src/test-render.js";
 
 describe("memo cleanup", () => {
   it("cleans up when memo value is recomputed", () => {
@@ -60,7 +59,7 @@ describe("element cleanup", () => {
     }
     const el = ref<unknown>(<Component />);
     const template = <>{el}</>;
-    renderTree(template);
+    expect(template).toRenderTo("hi!");
     el.value = "";
     flushJobs();
     expect(cleanedUp).toBe(true);
@@ -88,7 +87,7 @@ describe("element cleanup", () => {
       </C1>,
     );
     const template = <>{el}</>;
-    renderTree(template);
+    expect(template).toRenderTo("");
     el.value = "";
     flushJobs();
     expect(cleanedUpC1).toBe(true);

package/test/reactivity/ref-rendering.test.tsx

@@ -1,45 +1,45 @@
-import { code, memo, printTree, renderTree } from "@alloy-js/core";
+import { code, memo } from "@alloy-js/core";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 
 it("handles refs in the tree", () => {
   const r = ref(42);
-  const tree = renderTree(<>The number is {r}</>);
+  const tree = <>The number is {r}</>;
 
-  expect(printTree(tree)).toBe("The number is 42");
+  expect(tree).toRenderTo("The number is 42");
   r.value = 12;
-  expect(printTree(tree)).toBe("The number is 12");
+  expect(tree).toRenderTo("The number is 12");
 });
 
 it("handles refs in the tree with code", () => {
   const r = ref(42);
-  const tree = renderTree(code`
+  const tree = code`
     The number is ${r}
-  `);
+  `;
 
-  expect(printTree(tree)).toBe("The number is 42");
+  expect(tree).toRenderTo("The number is 42");
   r.value = 12;
-  expect(printTree(tree)).toBe("The number is 12");
+  expect(tree).toRenderTo("The number is 12");
 });
 
 it("handles memos in the tree", () => {
   const r = ref(42);
   const m = memo(() => r.value + 10);
-  const tree = renderTree(<>The number is {m}</>);
+  const tree = <>The number is {m}</>;
 
-  expect(printTree(tree)).toBe("The number is 52");
+  expect(tree).toRenderTo("The number is 52");
   r.value = 12;
-  expect(printTree(tree)).toBe("The number is 22");
+  expect(tree).toRenderTo("The number is 22");
 });
 
 it("handles memos in the tree with code", () => {
   const r = ref(42);
   const m = memo(() => r.value + 10);
-  const tree = renderTree(code`
+  const tree = code`
     The number is ${m}
-  `);
+  `;
 
-  expect(printTree(tree)).toBe("The number is 52");
+  expect(tree).toRenderTo("The number is 52");
   r.value = 12;
-  expect(printTree(tree)).toBe("The number is 22");
+  expect(tree).toRenderTo("The number is 22");
 });

package/test/reactivity/test.test.tsx

@@ -1,8 +1,8 @@
-import { memo, printTree, renderTree } from "@alloy-js/core";
+import { memo } from "@alloy-js/core";
 import { computed, reactive, ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
+import { flushJobs } from "../../src/scheduler.js";
 import { mapJoin } from "../../src/utils.js";
-import { d } from "../../testing/render.js";
 
 it("splices in new nodes", () => {
   const r = ref(["one"]);
@@ -14,11 +14,11 @@ it("splices in new nodes", () => {
     return <>{mapped.value} done</>;
   }
 
-  const tree = renderTree(<Foo />);
-  expect(printTree(tree)).toEqual("mapped one done");
+  const tree = <Foo />;
+  expect(tree).toRenderTo("mapped one done");
   r.value = [...r.value, "two"];
 
-  expect(printTree(tree)).toEqual("mapped one mapped two done");
+  expect(tree).toRenderTo("mapped one mapped two done");
 });
 
 it("works with a complex case", () => {
@@ -56,20 +56,20 @@ it("works with a complex case", () => {
       `import { ${[...props.types.values()].join(", ")} } from "${props.path}";`;
   }
 
-  const tree = renderTree(<ImportStatements records={importRecords} />);
+  const tree = <ImportStatements records={importRecords} />;
   // the tree is empty.
 
-  expect(printTree(tree)).toEqual("");
+  expect(tree).toRenderTo("");
 
   addImport("./foo.js", "hi");
-  printTree(tree);
-  expect(printTree(tree)).toEqual('import { hi } from "./foo.js";');
+  flushJobs();
+  expect(tree).toRenderTo('import { hi } from "./foo.js";');
 
   addImport("./foo.js", "bye");
-  expect(printTree(tree)).toEqual('import { hi, bye } from "./foo.js";');
+  expect(tree).toRenderTo('import { hi, bye } from "./foo.js";');
 
   addImport("node:assert", "strictEqual");
-  expect(printTree(tree)).toEqual(d`
+  expect(tree).toRenderTo(`
     import { hi, bye } from "./foo.js";
     import { strictEqual } from "node:assert";
   `);
@@ -77,8 +77,8 @@ it("works with a complex case", () => {
 
 it("works with memos of memos", () => {
   const test = ref(1);
-  const tree = renderTree(memo(() => memo(() => test.value)));
-  expect(printTree(tree)).toEqual("1");
+  const tree = memo(() => memo(() => test.value));
+  expect(tree).toRenderTo("1");
   test.value = 2;
-  expect(printTree(tree)).toEqual("2");
+  expect(tree).toRenderTo("2");
 });

package/test/rendering/basic.test.tsx

@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import { Children, RENDERABLE } from "../../src/runtime/component.js";
-import "../../testing/extend-expect.js";
 describe("string nodes", () => {
   it("renders string nodes with substitutions", () => {
     const str = "hi";

package/test/rendering/code.test.tsx

@@ -1,6 +1,5 @@
 import { code } from "@alloy-js/core";
 import { expect, it } from "vitest";
-import "../../testing/extend-expect.js";
 
 it("renders simple strings", () => {
   expect(code`foo`).toRenderTo("foo");

package/test/rendering/formatting.test.tsx

@@ -1,13 +1,5 @@
 import { describe, expect, it } from "vitest";
-import {
-  ContentOutputFile,
-  For,
-  Output,
-  render,
-  SourceFile,
-} from "../../src/index.js";
-import "../../testing/extend-expect.js";
-import { d } from "../../testing/render.js";
+import { For, Output, SourceFile } from "../../src/index.js";
 
 describe("group", () => {
   it("breaks when shouldBreak is passed", () => {
@@ -459,16 +451,16 @@ it("formats based on the output component props", () => {
     </Output>
   );
 
-  const tree = render(template);
-  expect((tree.contents[0] as ContentOutputFile).contents).toEqual(d`
-    1
-    2
-    3
-    4
-    5
-    6
-    
-  `);
+  expect(template).toRenderTo(
+    `
+      1
+      2
+      3
+      4
+      5
+      6
+    `,
+  );
 });
 
 it("formats based on the source file component props", () => {
@@ -482,14 +474,14 @@ it("formats based on the source file component props", () => {
     </Output>
   );
 
-  const tree = render(template);
-  expect((tree.contents[0] as ContentOutputFile).contents).toEqual(d`
-    1
-    2
-    3
-    4
-    5
-    6
-
-  `);
+  expect(template).toRenderTo(
+    `
+      1
+      2
+      3
+      4
+      5
+      6
+    `,
+  );
 });

package/test/rendering/indent.test.tsx

@@ -1,7 +1,6 @@
 // prettier-ignore
 import { Indent } from "@alloy-js/core";
 import { describe, expect, it } from "vitest";
-import "../../testing/extend-expect.js";
 
 describe("Indent component", () => {
   it("indents explicitly indented content on a subsequent line", () => {

package/test/rendering/memoization.test.tsx

@@ -2,13 +2,12 @@ import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { memo } from "../../src/reactivity.js";
 import { flushJobs } from "../../src/scheduler.js";
-import { renderTree } from "../../src/test-render.js";
 
 it("memoizes child components", () => {
   let renderCount = 0;
   function Child() {
     renderCount++;
-    return "hi " + String(Math.random());
+    return "hi";
   }
 
   const doThing = ref();
@@ -25,7 +24,7 @@ it("memoizes child components", () => {
 
   const template = <>{items}</>;
 
-  renderTree(template);
+  expect(template).toRenderTo("hi");
   doThing.value = true;
   flushJobs();
   // Without element-cache (legacy), each component creator is invoked on

package/test/rendering/print-render-stack.test.tsx

@@ -12,7 +12,6 @@ import {
   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 {

package/test/rendering/refkeys.test.tsx

@@ -1,7 +1,6 @@
 import { refkey, Refkey } from "@alloy-js/core";
 import { SourceFile } from "@alloy-js/core/stc";
 import { expect, it } from "vitest";
-import "../../testing/extend-expect.js";
 
 it("is rendered properly in the tree", () => {
   const key = refkey("foo");

package/test/stc.test.tsx

@@ -1,7 +1,6 @@
 import { stc } from "@alloy-js/core";
 import { hbr, indent, Indent } from "@alloy-js/core/stc";
 import { describe, expect, it } from "vitest";
-import "../testing/extend-expect.js";
 
 it("is applied by output", () => {
   function Foo() {

package/test/utils.test.tsx

@@ -2,9 +2,7 @@ import { computed, ref, triggerRef } from "@vue/reactivity";
 import { describe, expect, it } from "vitest";
 import { Children } from "../src/index.js";
 import { flushJobs } from "../src/scheduler.js";
-import { renderTree } from "../src/test-render.js";
 import { children, join, mapJoin } from "../src/utils.js";
-import "../testing/extend-expect.js";
 
 describe("mapJoin", () => {
   it("can map a map", () => {
@@ -107,7 +105,10 @@ describe("mapJoin", () => {
       },
     );
 
-    renderTree(joined);
+    expect(joined).toRenderTo(`
+      Value: 1
+      Value: 2
+    `);
 
     expect(callCount).toBe(2);
     arr.value.push(3);
@@ -246,34 +247,34 @@ describe("children", () => {
   }
 
   it("resolves a single child", () => {
-    renderTree(<ResolveChildren>1</ResolveChildren>);
+    expect(<ResolveChildren>1</ResolveChildren>).toRenderTo("");
     expect(resolvedChildren).toEqual("1");
   });
 
   it("resolves multiple children", () => {
-    renderTree(<ResolveChildren>1{"2"}3</ResolveChildren>);
+    expect(<ResolveChildren>1{"2"}3</ResolveChildren>).toRenderTo("");
     expect(resolvedChildren).toEqual(["1", "2", "3"]);
   });
 
   it("resolves fragments by default", () => {
-    renderTree(
+    expect(
       <ResolveChildren>
         <>1</>
         <>2</>
         <>3</>
       </ResolveChildren>,
-    );
+    ).toRenderTo("");
     expect(resolvedChildren).toEqual(["1", "2", "3"]);
   });
 
   it("preserves fragments if asked", () => {
-    renderTree(
+    expect(
       <ResolveChildren preserveFragments>
         <>1</>
         <>2</>
         <>3</>
       </ResolveChildren>,
-    );
+    ).toRenderTo("");
     expect(resolvedChildren).toEqual([["1"], ["2"], ["3"]]);
   });
 });

package/test/vitest.setup.ts

@@ -0,0 +1 @@
+import "@alloy-js/core/testing";

package/testing/extend-expect.ts

@@ -1,6 +1,7 @@
 import { Children, Diagnostic } from "@alloy-js/core";
 import "vitest";
 import { expect } from "vitest";
+import { ElementNode } from "../src/render/node.js";
 import { flushJobs, flushJobsAsync } from "../src/scheduler.js";
 import {
   getDiagnosticsForTree,
@@ -9,6 +10,28 @@ import {
 } from "../src/test-render.js";
 import { dedent } from "./render.js";
 
+// Cache rendered trees so the same Children reference reuses its tree across
+// multiple toRenderTo assertions (enables reactive test patterns without
+// explicit renderTree calls).
+const renderedTrees = new WeakMap<object, ElementNode>();
+
+function getOrRenderTree(received: Children): ElementNode {
+  if (received instanceof ElementNode) {
+    return received;
+  }
+  // If received is an object (array/JSX node), check cache
+  if (typeof received === "object" && received !== null) {
+    const cached = renderedTrees.get(received as object);
+    if (cached) {
+      return cached;
+    }
+    const tree = renderTree(received);
+    renderedTrees.set(received as object, tree);
+    return tree;
+  }
+  return renderTree(received);
+}
+
 /**
  * Print options passed to `toRenderTo` / `toRenderToAsync`. These override
  * the per-`SourceFile` print settings for the duration of the assertion,
@@ -47,7 +70,7 @@ expect.extend({
     expectedRaw: string | Record<string, string>,
     renderOptions?: ToRenderToOptions,
   ) {
-    const tree = renderTree(received);
+    const tree = getOrRenderTree(received);
     flushJobs();
     const actual = getFilesFromTree(tree, renderOptions);
 

package/vitest.config.ts

@@ -14,5 +14,8 @@ export default defineConfig({
     jsx: "preserve",
     sourcemap: "both",
   },
+  test: {
+    setupFiles: ["./test/vitest.setup.ts"],
+  },
   plugins: [alloyPlugin()],
 });