npm - @alloy-js/core - Versions diffs - 0.5.0 → 0.7.0 - Mend

@alloy-js/core 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/CHANGELOG.md +55 -0
package/babel.config.cjs +4 -1
package/dist/src/binder.d.ts +8 -2
package/dist/src/binder.d.ts.map +1 -1
package/dist/src/binder.js +41 -15
package/dist/src/binder.js.map +1 -1
package/dist/src/code.d.ts +2 -2
package/dist/src/code.d.ts.map +1 -1
package/dist/src/code.js +4 -4
package/dist/src/code.js.map +1 -1
package/dist/src/components/Block.d.ts +25 -0
package/dist/src/components/Block.d.ts.map +1 -0
package/dist/src/components/Block.js +25 -0
package/dist/src/components/Block.js.map +1 -0
package/dist/src/components/Declaration.d.ts.map +1 -1
package/dist/src/components/Declaration.js +4 -0
package/dist/src/components/Declaration.js.map +1 -1
package/dist/src/components/For.d.ts +44 -0
package/dist/src/components/For.d.ts.map +1 -0
package/dist/src/components/For.js +41 -0
package/dist/src/components/For.js.map +1 -0
package/dist/src/components/Indent.d.ts +5 -9
package/dist/src/components/Indent.d.ts.map +1 -1
package/dist/src/components/Indent.js +7 -18
package/dist/src/components/Indent.js.map +1 -1
package/dist/src/components/List.d.ts +38 -0
package/dist/src/components/List.d.ts.map +1 -0
package/dist/src/components/List.js +40 -0
package/dist/src/components/List.js.map +1 -0
package/dist/src/components/MemberDeclaration.d.ts.map +1 -1
package/dist/src/components/MemberDeclaration.js.map +1 -1
package/dist/src/components/MemberName.js +1 -1
package/dist/src/components/MemberName.js.map +1 -1
package/dist/src/components/MemberScope.d.ts.map +1 -1
package/dist/src/components/MemberScope.js.map +1 -1
package/dist/src/components/Name.js +1 -1
package/dist/src/components/Name.js.map +1 -1
package/dist/src/components/Output.d.ts +2 -1
package/dist/src/components/Output.d.ts.map +1 -1
package/dist/src/components/Output.js +9 -1
package/dist/src/components/Output.js.map +1 -1
package/dist/src/components/Scope.d.ts.map +1 -1
package/dist/src/components/Scope.js.map +1 -1
package/dist/src/components/Show.d.ts +8 -0
package/dist/src/components/Show.d.ts.map +1 -0
package/dist/src/components/Show.js +4 -0
package/dist/src/components/Show.js.map +1 -0
package/dist/src/components/SourceDirectory.d.ts.map +1 -1
package/dist/src/components/SourceDirectory.js +1 -0
package/dist/src/components/SourceDirectory.js.map +1 -1
package/dist/src/components/SourceFile.d.ts +2 -6
package/dist/src/components/SourceFile.d.ts.map +1 -1
package/dist/src/components/SourceFile.js +6 -13
package/dist/src/components/SourceFile.js.map +1 -1
package/dist/src/components/StatementList.d.ts +9 -0
package/dist/src/components/StatementList.d.ts.map +1 -0
package/dist/src/components/StatementList.js +17 -0
package/dist/src/components/StatementList.js.map +1 -0
package/dist/src/components/Switch.d.ts +41 -0
package/dist/src/components/Switch.d.ts.map +1 -0
package/dist/src/components/Switch.js +41 -0
package/dist/src/components/Switch.js.map +1 -0
package/dist/src/components/Wrap.d.ts +20 -0
package/dist/src/components/Wrap.d.ts.map +1 -0
package/dist/src/components/Wrap.js +15 -0
package/dist/src/components/Wrap.js.map +1 -0
package/dist/src/components/index.d.ts +8 -1
package/dist/src/components/index.d.ts.map +1 -1
package/dist/src/components/index.js +7 -0
package/dist/src/components/index.js.map +1 -1
package/dist/src/components/stc/index.d.ts +77 -6
package/dist/src/components/stc/index.d.ts.map +1 -1
package/dist/src/components/stc/index.js +17 -1
package/dist/src/components/stc/index.js.map +1 -1
package/dist/src/context/index.d.ts +0 -1
package/dist/src/context/index.d.ts.map +1 -1
package/dist/src/context/index.js +0 -1
package/dist/src/context/index.js.map +1 -1
package/dist/src/context.d.ts.map +1 -1
package/dist/src/context.js +3 -3
package/dist/src/context.js.map +1 -1
package/dist/src/index.browser.d.ts +3 -0
package/dist/src/index.browser.d.ts.map +1 -0
package/dist/src/index.browser.js +3 -0
package/dist/src/index.browser.js.map +1 -0
package/dist/src/index.d.ts +1 -0
package/dist/src/index.d.ts.map +1 -1
package/dist/src/index.js +1 -0
package/dist/src/index.js.map +1 -1
package/dist/src/jsx-runtime.d.ts +139 -8
package/dist/src/jsx-runtime.d.ts.map +1 -1
package/dist/src/jsx-runtime.js +102 -12
package/dist/src/jsx-runtime.js.map +1 -1
package/dist/src/render.d.ts +107 -132
package/dist/src/render.d.ts.map +1 -1
package/dist/src/render.js +281 -177
package/dist/src/render.js.map +1 -1
package/dist/src/stc.d.ts +14 -0
package/dist/src/stc.d.ts.map +1 -0
package/dist/src/stc.js +52 -0
package/dist/src/stc.js.map +1 -0
package/dist/src/utils.d.ts +22 -15
package/dist/src/utils.d.ts.map +1 -1
package/dist/src/utils.js +95 -59
package/dist/src/utils.js.map +1 -1
package/dist/src/write-output.js +3 -3
package/dist/src/write-output.js.map +1 -1
package/dist/test/browser-build.test.d.ts +2 -0
package/dist/test/browser-build.test.d.ts.map +1 -0
package/dist/test/components/block.test.d.ts +2 -0
package/dist/test/components/block.test.d.ts.map +1 -0
package/dist/test/components/declaration.test.d.ts +2 -0
package/dist/test/components/declaration.test.d.ts.map +1 -0
package/dist/test/components/list.test.d.ts +2 -0
package/dist/test/components/list.test.d.ts.map +1 -0
package/dist/test/components/wrap.test.d.ts +2 -0
package/dist/test/components/wrap.test.d.ts.map +1 -0
package/dist/test/control-flow/for.test.d.ts +2 -0
package/dist/test/control-flow/for.test.d.ts.map +1 -0
package/dist/test/control-flow/match.test.d.ts +2 -0
package/dist/test/control-flow/match.test.d.ts.map +1 -0
package/dist/test/control-flow/show.test.d.ts +2 -0
package/dist/test/control-flow/show.test.d.ts.map +1 -0
package/dist/test/reactivity/cleanup.test.d.ts +2 -0
package/dist/test/reactivity/cleanup.test.d.ts.map +1 -0
package/dist/test/reactivity/memo.test.d.ts +2 -0
package/dist/test/reactivity/memo.test.d.ts.map +1 -0
package/dist/test/reactivity/untrack.test.d.ts +2 -0
package/dist/test/reactivity/untrack.test.d.ts.map +1 -0
package/dist/test/rendering/formatting.test.d.ts +2 -0
package/dist/test/rendering/formatting.test.d.ts.map +1 -0
package/dist/test/rendering/memoization.test.d.ts +2 -0
package/dist/test/rendering/memoization.test.d.ts.map +1 -0
package/dist/test/split-props.test.d.ts +2 -0
package/dist/test/split-props.test.d.ts.map +1 -0
package/dist/test/stc.test.d.ts.map +1 -1
package/dist/test/utils.test.d.ts.map +1 -1
package/dist/testing/extend-expect.js +4 -4
package/dist/testing/extend-expect.js.map +1 -1
package/dist/testing/render.d.ts +2 -3
package/dist/testing/render.d.ts.map +1 -1
package/dist/testing/render.js +2 -4
package/dist/testing/render.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +6 -8
package/src/binder.ts +54 -18
package/src/code.ts +17 -12
package/src/components/Block.tsx +44 -0
package/src/components/Declaration.tsx +10 -4
package/src/components/For.tsx +81 -0
package/src/components/Indent.tsx +20 -27
package/src/components/List.tsx +94 -0
package/src/components/MemberDeclaration.tsx +9 -6
package/src/components/MemberScope.tsx +4 -2
package/src/components/Output.tsx +25 -13
package/src/components/Scope.tsx +4 -2
package/src/components/Show.tsx +11 -0
package/src/components/SourceDirectory.tsx +5 -1
package/src/components/SourceFile.tsx +12 -16
package/src/components/StatementList.tsx +16 -0
package/src/components/Switch.tsx +62 -0
package/src/components/Wrap.tsx +29 -0
package/src/components/index.tsx +8 -1
package/src/components/stc/index.ts +18 -1
package/src/context/index.ts +0 -1
package/src/context.ts +2 -3
package/src/index.browser.ts +2 -0
package/src/index.ts +1 -0
package/src/jsx-runtime.ts +245 -23
package/src/render.ts +392 -198
package/src/stc.ts +95 -0
package/src/utils.ts +162 -95
package/src/write-output.ts +3 -3
package/temp/api.json +8407 -3301
package/test/browser-build.test.ts +91 -0
package/test/children.test.tsx +8 -10
package/test/components/block.test.tsx +48 -0
package/test/components/declaration.test.tsx +37 -0
package/test/components/list.test.tsx +91 -0
package/test/components/slot.test.tsx +31 -25
package/test/components/source-file.test.tsx +11 -31
package/test/components/wrap.test.tsx +42 -0
package/test/control-flow/for.test.tsx +194 -0
package/test/control-flow/match.test.tsx +49 -0
package/test/control-flow/show.test.tsx +25 -0
package/test/name-policy.test.tsx +5 -5
package/test/reactivity/cleanup.test.tsx +91 -0
package/test/reactivity/memo.test.tsx +17 -0
package/test/reactivity/ref-rendering.test.tsx +3 -8
package/test/reactivity/test.test.tsx +7 -6
package/test/reactivity/untrack.test.ts +33 -0
package/test/rendering/basic.test.tsx +25 -47
package/test/rendering/code.test.tsx +3 -3
package/test/rendering/formatting.test.tsx +487 -0
package/test/rendering/indent.test.tsx +42 -529
package/test/rendering/memoization.test.tsx +30 -0
package/test/split-props.test.ts +87 -0
package/test/stc.test.tsx +29 -8
package/test/symbols.test.ts +87 -8
package/test/utils.test.tsx +129 -20
package/testing/extend-expect.ts +14 -4
package/testing/render.ts +2 -4
package/testing/vitest.d.ts +6 -1
package/vitest.config.ts +1 -1
package/dist/src/context/indent.d.ts +0 -5
package/dist/src/context/indent.d.ts.map +0 -1
package/dist/src/context/indent.js +0 -8
package/dist/src/context/indent.js.map +0 -1
package/dist/test/rendering/linebreaks.test.d.ts +0 -2
package/dist/test/rendering/linebreaks.test.d.ts.map +0 -1
package/src/context/indent.ts +0 -17
package/test/rendering/linebreaks.test.tsx +0 -72

package/test/browser-build.test.ts ADDED Viewed

@@ -0,0 +1,91 @@
+import { execSync } from "child_process";
+import { existsSync, mkdirSync, rmSync, writeFileSync } from "fs";
+import { join } from "path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+const testDir = join(__dirname, ".temp", "vite-test-project");
+describe("Browser Build Test", () => {
+  beforeAll(() => {
+    // Cleanup previous runs
+    if (existsSync(testDir)) {
+      rmSync(testDir, { recursive: true, force: true });
+    }
+    // Create a temporary Vite project
+    mkdirSync(testDir, { recursive: true });
+    execSync("npm init -y", { cwd: testDir });
+    execSync("npm install vite", { cwd: testDir });
+    execSync("npm install ../../..", { cwd: testDir });
+    // Create a minimal Vite app
+    writeFileSync(
+      join(testDir, "index.js"),
+      `
+        import { writeOutput } from "@alloy-js/core";
+        console.log("Alloy-js core imported successfully!", writeOutput);
+      `,
+    );
+    writeFileSync(
+      join(testDir, "vite.config.js"),
+      `
+        import { defineConfig } from "vite";
+        export default defineConfig({
+          build: {
+            outDir: "dist",
+            target: "esnext",
+          }
+        });
+      `,
+    );
+    // Create an index.html file
+    writeFileSync(
+      join(testDir, "index.html"),
+      `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Vite Test</title>
+      </head>
+      <body>
+        <script type="module" src="/index.js"></script>
+      </body>
+      </html>
+      `,
+    );
+    writeFileSync(
+      join(testDir, "package.json"),
+      JSON.stringify(
+        {
+          type: "module",
+          scripts: {
+            build: "vite build",
+          },
+        },
+        null,
+        2,
+      ),
+    );
+  });
+  it("Vite should build successfully", () => {
+    // Run Vite build process and wait for completion
+    expect(() => {
+      execSync("npm run build", { cwd: testDir, stdio: "inherit" });
+    }).not.toThrow();
+  });
+  afterAll(() => {
+    // Ensure testDir exists before attempting to remove it
+    if (existsSync(testDir)) {
+      rmSync(testDir, { recursive: true, force: true });
+    }
+  });
+});

package/test/children.test.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
-import { children, Children, renderTree } from "@alloy-js/core";
+import { children, Children, printTree, renderTree } from "@alloy-js/core";
 import { expect, it } from "vitest";
-import { d, printTree } from "../testing/render.js";
 it("handles a single element", () => {
   function Foo(props: { children?: Children }) {
@@ -21,13 +20,12 @@ it("handles a multiple elements", () => {
     return "Bar";
   }
-  const res = renderTree(<Foo>
-    <Bar />
-    <Bar />
-  </Foo>);
+  const res = renderTree(
+    <Foo>
+      <Bar />
+      <Bar />
+    </Foo>,
+  );
-  expect(printTree(res)).toBe(d`
-    Bar
-    Bar
-  `);
+  expect(printTree(res)).toBe(`BarBar`);
 });

package/test/components/block.test.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import { expect, it } from "vitest";
+import { Block } from "../../src/components/Block.jsx";
+import "../../testing/extend-expect.js";
+it("renders properly with no children", () => {
+  const template = (
+    <Block>
+      <></>
+    </Block>
+  );
+  expect(template).toRenderTo(`{}`);
+});
+it("renders properly with children", () => {
+  const template = <Block>Contents!!</Block>;
+  expect(template).toRenderTo(`
+    {
+      Contents!!
+    }
+  `);
+});
+it("renders properly with newline and no children", () => {
+  const template = (
+    <>
+      class
+      <Block newline>
+        <></>
+      </Block>
+    </>
+  );
+  expect(template).toRenderTo(`
+    class {}
+  `);
+});
+it("renders properly with newline and no children", () => {
+  const template = (
+    <>
+      class<Block newline>contents!!</Block>
+    </>
+  );
+  expect(template).toRenderTo(`
+    class
+    {
+      contents!!
+    }
+  `);
+});

package/test/components/declaration.test.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import { expect, it } from "vitest";
+import { Output } from "../../src/components/Output.jsx";
+import {
+  Declaration,
+  ref,
+  renderTree,
+  Scope,
+  useBinder,
+} from "../../src/index.js";
+import { createTap } from "../../src/tap.js";
+it("creates and cleans up a symbol", () => {
+  const GetBinder = createTap(() => {
+    return useBinder();
+  });
+  const binderRef = GetBinder.ref;
+  const doDecl = ref(true);
+  const template = (
+    <Output>
+      <GetBinder />
+      <Scope>
+        {doDecl.value ?
+          <Declaration name="foo"></Declaration>
+        : ""}
+      </Scope>
+    </Output>
+  );
+  renderTree(template);
+  const binder = binderRef.value!;
+  const subScope = [...binder.globalScope.children][0];
+  expect(subScope.symbols.size).toBe(1);
+  doDecl.value = false;
+  expect(subScope.symbols.size).toBe(0);
+});

package/test/components/list.test.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+import { expect, it } from "vitest";
+import { List, printTree, ref, renderTree } from "../../src/index.js";
+import "../../testing/extend-expect.js";
+import { d } from "../../testing/render.js";
+it("creates a list with default options", () => {
+  const template = (
+    <group>
+      <List>
+        <>1</>
+        <>2</>
+        <>3</>
+      </List>
+    </group>
+  );
+  expect(template).toRenderTo(`
+    1
+    2
+    3
+  `);
+});
+it("creates a list with some options", () => {
+  expect(
+    <group>
+      <List comma line>
+        <>1</>
+        <>2</>
+        <>3</>
+      </List>
+    </group>,
+  ).toRenderTo(`1, 2, 3`);
+});
+it("creates a list item for substitutions", () => {
+  expect(
+    <group>
+      <List comma line>
+        {1}
+        {2}
+        {3}
+      </List>
+    </group>,
+  ).toRenderTo(`1, 2, 3`);
+});
+it("doesn't create list items for undefined, null, and boolean values", () => {
+  expect(
+    <group>
+      <List comma line>
+        {false}
+        {1}
+        {true}
+        {2}
+        {null}
+        {3}
+        {undefined}
+      </List>
+    </group>,
+  ).toRenderTo(`1, 2, 3`);
+});
+it("is useful for statements", () => {
+  function Statement() {
+    return "console.log(true)";
+  }
+  const includeStatement = ref(false);
+  const tree = renderTree(
+    <List semicolon hardline ender>
+      <Statement />
+      {includeStatement.value && <Statement />}
+      <Statement />
+    </List>,
+  );
+  expect(printTree(tree)).toEqual(d`
+    console.log(true);
+    console.log(true);
+  `);
+  includeStatement.value = true;
+  expect(printTree(tree)).toEqual(d`
+    console.log(true);
+    console.log(true);
+    console.log(true);
+  `);
+});

package/test/components/slot.test.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ it("works with string keys", () => {
       { ...props, additionalProp: "hi" },
       <>
         function {props.name}() {"{"}
-          console.log("hello world");
+        console.log("hello world");
         {"}"}
       </>,
     );
@@ -43,10 +43,12 @@ it("works with string keys", () => {
   // extension.tsx
   replace(FunctionSlot.find({ name: "foo" }), (props: any) => {
-    return <>
-      // original
-      { props.original }
-    </>;
+    return (
+      <>
+        // original
+        {props.original}
+      </>
+    );
   });
   const tree = render(
@@ -65,12 +67,12 @@ it("works with symbols", () => {
     additionalProp: string;
   }
-  const FunctionSlot = defineSlot<FunctionSlotProps>((query: {
-    fqn: string;
-  }) => {
-    const binder = useBinder();
-    return binder.resolveFQN(query.fqn);
-  });
+  const FunctionSlot = defineSlot<FunctionSlotProps>(
+    (query: { fqn: string }) => {
+      const binder = useBinder();
+      return binder.resolveFQN(query.fqn);
+    },
+  );
   interface FunctionComponentProps {
     name: string;
@@ -87,8 +89,9 @@ it("works with symbols", () => {
       sym,
       { ...props, additionalProp: "hi" },
       <Declaration symbol={sym}>
-        function <Name />() {"{"}
-          console.log("hello world");
+        function <Name />
+        () {"{"}
+        console.log("hello world");
         {"}"}
       </Declaration>,
     );
@@ -98,10 +101,12 @@ it("works with symbols", () => {
   // extension.tsx
   replace(FunctionSlot.find({ fqn: "foo.bar" }), (props: any) => {
-    return <>
-      // original
-      { props.original }
-    </>;
+    return (
+      <>
+        // original
+        {props.original}
+      </>
+    );
   });
   const tree = render(
@@ -122,12 +127,12 @@ it("can rename", () => {
     additionalProp: string;
   }
-  const FunctionSlot = defineSlot<FunctionSlotProps>((query: {
-    fqn: string;
-  }) => {
-    const binder = useBinder();
-    return binder.resolveFQN(query.fqn);
-  });
+  const FunctionSlot = defineSlot<FunctionSlotProps>(
+    (query: { fqn: string }) => {
+      const binder = useBinder();
+      return binder.resolveFQN(query.fqn);
+    },
+  );
   interface FunctionComponentProps {
     name: string;
@@ -144,8 +149,9 @@ it("can rename", () => {
       sym,
       { ...props, additionalProp: "hi" },
       <Declaration symbol={sym}>
-        function <Name />() {"{"}
-          console.log("hello world");
+        function <Name />
+        () {"{"}
+        console.log("hello world");
         {"}"}
       </Declaration>,
     );

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

@@ -18,7 +18,9 @@ it("tracks its content", () => {
   const _ = renderTree(
     <Output>
       <Test />
-      <SourceFile path="hi.txt" filetype="text">hello!</SourceFile>
+      <SourceFile path="hi.txt" filetype="text">
+        hello!
+      </SourceFile>
     </Output>,
   );
   expect(context!.contents.length).toEqual(1);
@@ -31,43 +33,21 @@ it("has reactive context", () => {
       return sdContext.contents.map((v) => v.path).join(" ");
     });
-    return <SourceFile path="contents.txt" filetype="text">{allFiles.value}</SourceFile>;
+    return (
+      <SourceFile path="contents.txt" filetype="text">
+        {allFiles.value}
+      </SourceFile>
+    );
   }
   const tree = render(
     <Output>
-      <SourceFile path="hi.txt" filetype="text">hello!</SourceFile>
+      <SourceFile path="hi.txt" filetype="text">
+        hello!
+      </SourceFile>
       <TrackContents />
     </Output>,
   );
   expect(tree.contents[1].contents).toEqual("hi.txt contents.txt");
 });
-it("can change its indent level", () => {
-  function Nested() {
-    return <>
-      base
-        indented
-    </>;
-  }
-  expect(
-    <Output>
-    <SourceFile path="hi.txt" filetype="text" indent="    ">
-      hello
-        there
-      <Nested />
-        <Nested />
-    </SourceFile>
-  </Output>,
-  ).toRenderTo(`
-    hello
-        there
-    base
-        indented
-        base
-            indented
-  `);
-});

package/test/components/wrap.test.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+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}]</>;
+}
+it("conditionally wraps", () => {
+  const template = (
+    <>
+      <Wrap when={true} with={Wrapper}>
+        testing
+      </Wrap>
+      <Wrap when={false} with={Wrapper}>
+        testing
+      </Wrap>
+    </>
+  );
+  expect(template).toRenderTo(`[testing]testing`);
+});
+it("works reactively", () => {
+  const doWrap = ref(false);
+  const template = (
+    <>
+      <Wrap when={doWrap.value} with={Wrapper}>
+        testing
+      </Wrap>
+    </>
+  );
+  const tree = renderTree(template);
+  expect(printTree(tree)).toEqual(`testing`);
+  doWrap.value = true;
+  expect(printTree(tree)).toEqual(`testing`);
+});

package/test/control-flow/for.test.tsx ADDED Viewed

@@ -0,0 +1,194 @@
+import "@alloy-js/core/testing";
+import { d } from "@alloy-js/core/testing";
+import { expect, it } from "vitest";
+import { For } from "../../src/components/For.jsx";
+import { onCleanup, printTree, reactive, renderTree } from "../../src/index.js";
+it("works", () => {
+  const messages = ["hi", "bye"];
+  const template = (
+    <For each={messages}>{(message) => <>{message}, Jose!</>}</For>
+  );
+  expect(template).toRenderTo(`
+    hi, Jose!
+    bye, Jose!
+  `);
+});
+it("handles map entries", () => {
+  const map = new Map([["a", { name: "foo" }]]);
+  const entries = Array.from(map.entries());
+  const template = (
+    <For each={entries}>
+      {([key, value]) => (
+        <>
+          {key}: {value.name}
+        </>
+      )}
+    </For>
+  );
+  expect(template).toRenderTo(`
+    a: foo
+  `);
+});
+it("handles maps", () => {
+  const map = new Map([["a", { name: "foo" }]]);
+  const template = (
+    <For each={map}>
+      {(key, value) => (
+        <>
+          {key}: {value.name}
+        </>
+      )}
+    </For>
+  );
+  expect(template).toRenderTo(`
+    a: foo
+  `);
+});
+it("doesn't rerender mappers", () => {
+  const messages = reactive(["hi", "bye"]);
+  let count = 0;
+  const template = <For each={messages}>{() => <>item {count++}</>}</For>;
+  const tree = renderTree(template);
+  expect(count).toBe(2);
+  messages.push("maybe");
+  expect(count).toBe(3);
+  expect(printTree(tree)).toBe(d`
+    item 0
+    item 1
+    item 2
+  `);
+});
+it("doesn't rerender mappers with sets", () => {
+  const messages = reactive(new Set(["hi", "bye"]));
+  let count = 0;
+  const template = <For each={messages}>{() => <>item {count++}</>}</For>;
+  const tree = renderTree(template);
+  expect(count).toBe(2);
+  messages.add("maybe");
+  expect(count).toBe(3);
+  expect(printTree(tree)).toBe(d`
+    item 0
+    item 1
+    item 2
+  `);
+});
+it("doesn't rerender mappers with maps", () => {
+  const messages = reactive(
+    new Map([
+      ["hi", "one"],
+      ["bye", "two"],
+    ]),
+  );
+  let count = 0;
+  const template = <For each={messages}>{() => <>item {count++}</>}</For>;
+  const tree = renderTree(template);
+  expect(count).toBe(2);
+  messages.set("maybe", "three");
+  expect(count).toBe(3);
+  expect(printTree(tree)).toBe(d`
+    item 0
+    item 1
+    item 2
+  `);
+});
+it("doesn't rerender mappers (with splice)", () => {
+  const messages = reactive(["hi", "maybe", "bye"]);
+  let count = 0;
+  const template = <For each={messages}>{(msg) => <>item {count++}</>}</For>;
+  const tree = renderTree(template);
+  expect(count).toBe(3);
+  messages.splice(1, 1);
+  // A sufficiently smart mapJoin would be able to handle this case...
+  // but for now we re-render everything after the splice point.
+  expect(count).toBe(4);
+  expect(printTree(tree)).toBe(d`
+    item 0
+    item 3
+  `);
+});
+it("cleans up things which end up removed (with push)", () => {
+  const cleanups: string[] = [];
+  function Letter(props: any) {
+    onCleanup(() => {
+      cleanups.push(props.letter);
+    });
+    return <>Letter {props.letter}</>;
+  }
+  const items = reactive(["a", "b"]);
+  const template = <For each={items}>{(item) => <Letter letter={item} />}</For>;
+  const tree = renderTree(template);
+  expect(cleanups).toEqual([]);
+  expect(printTree(tree)).toBe(d`
+    Letter a
+    Letter b
+  `);
+  items.pop();
+  expect(cleanups).toEqual(["b"]);
+  expect(printTree(tree)).toBe(d`
+    Letter a
+  `);
+  items.pop();
+  expect(cleanups).toEqual(["b", "a"]);
+  expect(printTree(tree)).toBe("");
+});
+it("cleans up things which end up removed (with splice)", () => {
+  const cleanups: string[] = [];
+  function Letter(props: any) {
+    onCleanup(() => {
+      cleanups.push(props.letter);
+    });
+    return <>Letter {props.letter}</>;
+  }
+  const items = reactive(["a", "b", "c"]);
+  const template = <For each={items}>{(item) => <Letter letter={item} />}</For>;
+  const tree = renderTree(template);
+  expect(cleanups).toEqual([]);
+  expect(printTree(tree)).toBe(d`
+    Letter a
+    Letter b
+    Letter c
+  `);
+  items.splice(1, 1);
+  // A sufficiently smart mapJoin would be able to handle this case...
+  // but for now we re-render everything after the splice point.
+  expect(cleanups).toEqual(["b", "c"]);
+  expect(printTree(tree)).toBe(d`
+    Letter a
+    Letter c
+  `);
+});