@alloy-js/core 0.24.0-dev.2 → 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/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");
+  });
+});

package/test/output-e2e.test.ts

@@ -0,0 +1,198 @@
+/**
+ * End-to-end test of the entry point: compile JSX through the babel
+ * preset (alloy preset), evaluate against the runtime, and run through
+ * `renderAsync` to produce an `OutputDirectory`.
+ *
+ * Validates:
+ *  - Output → SourceDirectory → SourceFile composition.
+ *  - File contents are produced via Alloy's direct printer.
+ *  - Nested directories accumulate paths correctly.
+ *  - `For` works under the runtime emitting multiple files.
+ */
+
+// @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 { beforeAll, describe, expect, it } from "vitest";
+import type {
+  ContentOutputFile,
+  OutputDirectory,
+} from "../src/output-types.js";
+
+// Prime the runtime + core module imports once. Without this, the first
+// test in the suite pays the full module-init cost of `@alloy-js/core`
+// inside its 5s timeout window, which is flaky on slower machines.
+let runtimeMod: any;
+let coreMod: any;
+beforeAll(async () => {
+  runtimeMod = await import("../src/runtime/index.js");
+  coreMod = await import("../src/index.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;
+}
+
+async function evalCompiled(src: string, exportName: string): Promise<unknown> {
+  const code = compile(src);
+  const runtimeStub = `const __rt = arguments[0]; const __core = arguments[1];`;
+  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) => {
+    const dn = names.replace(/(\w+)\s+as\s+(\w+)/g, "$1: $2");
+    destructures.push(`const {${dn}} = __rt;`);
+    return "";
+  });
+  const coreImportRegex =
+    /import\s*\{\s*([^}]+)\s*\}\s*from\s*"@alloy-js\/core";?/g;
+  body = body.replace(coreImportRegex, (_match, names: string) => {
+    const dn = names.replace(/(\w+)\s+as\s+(\w+)/g, "$1: $2");
+    destructures.push(`const {${dn}} = { ...__core, ...__rt };`);
+    return "";
+  });
+  body = body.replace(
+    /export\s*\{\s*([^}]+)\s*\}\s*;?/g,
+    (_, names: string) => {
+      const list = names.split(",").map((s) => s.trim());
+      return `return { ${list.join(",")} };`;
+    },
+  );
+  body = body.replace(/import\.meta\.url/g, '"test://test.tsx"');
+  const wrapped = `${runtimeStub}\n${destructures.join("\n")}\n${body}`;
+  const fn = new Function(wrapped);
+  return fn(runtimeMod, coreMod)[exportName];
+}
+
+function findFile(
+  dir: OutputDirectory,
+  path: string,
+): ContentOutputFile | undefined {
+  for (const c of dir.contents) {
+    if (c.kind === "file" && "contents" in c && c.path === path) return c;
+    if (c.kind === "directory") {
+      const found = findFile(c, path);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+describe("renderAsync — end-to-end output structure", () => {
+  it("produces a single SourceFile under Output > SourceDirectory", async () => {
+    const src = `
+      import { Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+      const App = () => (
+        <Output>
+          <SourceDirectory path="src">
+            <SourceFile path="hello.txt" filetype="text/plain">
+              <group>hello, world</group>
+            </SourceFile>
+          </SourceDirectory>
+        </Output>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    const { renderAsync } = runtimeMod;
+    // App() returns a ComponentCreator (top-level <Output>); pass the
+    // thunk directly as Children — renderAsync's insert handles it.
+    const out = await renderAsync(App() as any);
+    const f = findFile(out, "src/hello.txt");
+    expect(f).toBeDefined();
+    expect(f!.contents).toBe("hello, world\n");
+    expect(f!.filetype).toBe("text/plain");
+  });
+
+  it("nested SourceDirectory paths accumulate", async () => {
+    const src = `
+      import { Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+      const App = () => (
+        <Output>
+          <SourceDirectory path="src">
+            <SourceDirectory path="lib">
+              <SourceFile path="x.txt" filetype="text/plain">x</SourceFile>
+            </SourceDirectory>
+          </SourceDirectory>
+        </Output>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    const { renderAsync } = runtimeMod;
+    const out = await renderAsync(App() as any);
+    expect(findFile(out, "src/lib/x.txt")?.contents).toBe("x\n");
+  });
+
+  it("For emits multiple files", async () => {
+    const src = `
+      import { For, Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+      const App = (props) => (
+        <Output>
+          <SourceDirectory path="src">
+            <For each={props.specs}>
+              {(spec) => (
+                <SourceFile path={spec.path} filetype="text/plain">
+                  <group>{spec.body}</group>
+                </SourceFile>
+              )}
+            </For>
+          </SourceDirectory>
+        </Output>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as (props: any) => unknown;
+    const { renderAsync } = runtimeMod;
+    const specs = [
+      { path: "a.txt", body: "alpha" },
+      { path: "b.txt", body: "beta" },
+      { path: "c.txt", body: "gamma" },
+    ];
+    const out = await renderAsync(App({ specs }) as any);
+    expect(findFile(out, "src/a.txt")?.contents).toBe("alpha\n");
+    expect(findFile(out, "src/b.txt")?.contents).toBe("beta\n");
+    expect(findFile(out, "src/c.txt")?.contents).toBe("gamma\n");
+  });
+
+  it("direct printer formatting — group breaks at printWidth", async () => {
+    const src = `
+      import { Output, SourceDirectory, SourceFile } from "@alloy-js/core";
+      const App = () => (
+        <Output>
+          <SourceDirectory path=".">
+            <SourceFile path="t.txt" filetype="text/plain">
+              <group>
+                {"["}
+                <indent>
+                  <line />
+                  {"aaaaaaaaaaaaaaaaaaaa,"}
+                  <line />
+                  {"bbbbbbbbbbbbbbbbbbbb"}
+                </indent>
+                <line />
+                {"]"}
+              </group>
+            </SourceFile>
+          </SourceDirectory>
+        </Output>
+      );
+      export { App };
+    `;
+    const App = (await evalCompiled(src, "App")) as () => unknown;
+    const { renderAsync } = runtimeMod;
+    const out = await renderAsync(App() as any, { printWidth: 30 });
+    const f = findFile(out, "t.txt");
+    expect(f!.contents).toBe(
+      "[\n  aaaaaaaaaaaaaaaaaaaa,\n  bbbbbbbbbbbbbbbbbbbb\n]\n",
+    );
+  });
+});

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

@@ -1,7 +1,7 @@
 import { shallowReactive } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { For } from "../../src/index.js";
-import { printTree, renderTree } from "../../src/render.js";
+import { printTree, renderTree } from "../../src/test-render.js";
 import { d } from "../../testing/render.js";
 
 it("it should work with circular reactives", () => {

package/test/reactivity/cleanup.test.tsx

@@ -1,9 +1,9 @@
 import { ref } from "@vue/reactivity";
 import { describe, expect, it } from "vitest";
 import { effect, memo, onCleanup } from "../../src/reactivity.js";
-import { renderTree } from "../../src/render.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", () => {

package/test/rendering/memoization.test.tsx

@@ -1,8 +1,8 @@
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { memo } from "../../src/reactivity.js";
-import { renderTree } from "../../src/render.js";
 import { flushJobs } from "../../src/scheduler.js";
+import { renderTree } from "../../src/test-render.js";
 
 it("memoizes child components", () => {
   let renderCount = 0;
@@ -28,5 +28,10 @@ it("memoizes child components", () => {
   renderTree(template);
   doThing.value = true;
   flushJobs();
+  // Without element-cache (legacy), each component creator is invoked on
+  // every reactive re-evaluation, except when the same ComponentCreator
+  // instance reappears at a slot — reconcileArray keeps the existing
+  // subtree intact. child1 is invoked once initially and reused on the
+  // memo re-fire; child2 is invoked once when added.
   expect(renderCount).toBe(2);
 });