@alloy-js/core 0.1.0

package/test/children.test.tsx

@@ -0,0 +1,33 @@
+import { children, Children, 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 }) {
+    return children(() => props.children);
+  }
+
+  const res = renderTree(<Foo>a b c</Foo>);
+  expect(printTree(res)).toBe("a b c");
+});
+
+it("handles a multiple elements", () => {
+  function Foo(props: { children?: Children }) {
+    const c = children(() => props.children);
+    return c;
+  }
+
+  function Bar() {
+    return "Bar";
+  }
+
+  const res = renderTree(<Foo>
+    <Bar />
+    <Bar />
+  </Foo>);
+
+  expect(printTree(res)).toBe(d`
+    Bar
+    Bar
+  `);
+});

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

@@ -0,0 +1,45 @@
+import {
+  computed,
+  Output,
+  render,
+  renderTree,
+  SourceFile,
+  useContext,
+} from "@alloy-js/core";
+import { expect, it } from "vitest";
+import { SourceDirectoryContext } from "../../src/context/source-directory.js";
+import "../../testing/extend-expect.js";
+
+it("tracks its content", () => {
+  let context;
+  function Test() {
+    context = useContext(SourceDirectoryContext);
+  }
+  const _ = renderTree(
+    <Output>
+      <Test />
+      <SourceFile path="hi.txt" filetype="text">hello!</SourceFile>
+    </Output>,
+  );
+  expect(context!.contents.length).toEqual(1);
+});
+
+it("has reactive context", () => {
+  function TrackContents() {
+    const sdContext = useContext(SourceDirectoryContext)!;
+    const allFiles = computed(() => {
+      return sdContext.contents.map((v) => v.path).join(" ");
+    });
+
+    return <SourceFile path="contents.txt" filetype="text">{allFiles.value}</SourceFile>;
+  }
+
+  const tree = render(
+    <Output>
+      <SourceFile path="hi.txt" filetype="text">hello!</SourceFile>
+      <TrackContents />
+    </Output>,
+  );
+
+  expect(tree.contents[1].contents).toEqual("hi.txt contents.txt");
+});

package/test/name-policy.test.tsx

@@ -0,0 +1,19 @@
+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) => {
+    return "name" + name;
+  });
+
+  function Foo() {
+    const namer = useNamePolicy();
+    return namer!.getName("hi", "name");
+  }
+  expect(<Output namePolicy={policy}>
+    <Foo />
+  </Output>).toRenderTo(
+    "namehi",
+  );
+});

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

@@ -0,0 +1,50 @@
+import { code, memo, renderTree } from "@alloy-js/core";
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { printTree } from "../../testing/render.js";
+
+it("handles refs in the tree", () => {
+  const r = ref(42);
+  const tree = renderTree(<>
+    The number is {r}
+  </>);
+
+  expect(printTree(tree)).toBe("The number is 42");
+  r.value = 12;
+  expect(printTree(tree)).toBe("The number is 12");
+});
+
+it("handles refs in the tree with code", () => {
+  const r = ref(42);
+  const tree = renderTree(code`
+    The number is ${r}
+  `);
+
+  expect(printTree(tree)).toBe("The number is 42");
+  r.value = 12;
+  expect(printTree(tree)).toBe("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}
+  </>);
+
+  expect(printTree(tree)).toBe("The number is 52");
+  r.value = 12;
+  expect(printTree(tree)).toBe("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`
+    The number is ${m}
+  `);
+
+  expect(printTree(tree)).toBe("The number is 52");
+  r.value = 12;
+  expect(printTree(tree)).toBe("The number is 22");
+});

package/test/reactivity/test.test.tsx

@@ -0,0 +1,83 @@
+import { memo, renderTree } from "@alloy-js/core";
+import { computed, reactive, ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { mapJoin } from "../../src/utils.js";
+import { d, printTree } from "../../testing/render.js";
+
+it("splices in new nodes", () => {
+  const r = ref(["one"]);
+  const mapped = computed(() => {
+    return r.value.map((v) => `mapped ${v}`).join(" ");
+  });
+
+  function Foo() {
+    return <>{mapped.value} done</>;
+  }
+
+  const tree = renderTree(<Foo />);
+  expect(printTree(tree)).toEqual("mapped one done");
+  r.value = [...r.value, "two"];
+
+  expect(printTree(tree)).toEqual("mapped one mapped two done");
+});
+
+it("works with a complex case", () => {
+  const importRecords: Map<string, Set<string>> = reactive(new Map());
+
+  function addImport(path: string, type: string) {
+    if (!importRecords.has(path)) {
+      importRecords.set(path, new Set());
+    }
+
+    importRecords.get(path)!.add(type);
+  }
+
+  interface ImportStatementsProps {
+    records: Map<string, Set<string>>;
+  }
+
+  function ImportStatements(props: ImportStatementsProps) {
+    return memo(() =>
+      mapJoin(props.records, (
+        path,
+        types,
+      ) => <ImportStatement path={path} types={types} />));
+  }
+
+  interface ImportStatementProps {
+    path: string;
+    types: Set<string>;
+  }
+
+  function ImportStatement(props: ImportStatementProps) {
+    // when the `code` template tag is implemented, the lambda won't be needed.
+    return () =>
+      `import { ${[...props.types.values()].join(", ")} } from "${props.path}";`;
+  }
+
+  const tree = renderTree(<ImportStatements records={importRecords} />);
+  // the tree is empty.
+
+  expect(printTree(tree)).toEqual("");
+
+  addImport("./foo.js", "hi");
+  printTree(tree);
+  expect(printTree(tree)).toEqual('import { hi } from "./foo.js";');
+
+  addImport("./foo.js", "bye");
+  expect(printTree(tree)).toEqual('import { hi, bye } from "./foo.js";');
+
+  addImport("node:assert", "strictEqual");
+  expect(printTree(tree)).toEqual(d`
+    import { hi, bye } from "./foo.js";
+    import { strictEqual } from "node:assert";
+  `);
+});
+
+it("works with memos of memos", () => {
+  const test = ref(1);
+  const tree = renderTree(memo(() => memo(() => test.value)));
+  expect(printTree(tree)).toEqual("1");
+  test.value = 2;
+  expect(printTree(tree)).toEqual("2");
+});

package/test/refkey.test.ts

@@ -0,0 +1,32 @@
+import { expect, it } from "vitest";
+import { refkey } from "../src/refkey.js";
+
+it("is stable when called with same values", () => {
+  const obj = {};
+
+  const key1 = refkey(obj);
+  const key2 = refkey(obj);
+  expect(key1).toBe(key2);
+});
+
+it("supports primitive values", () => {
+  const key1 = refkey("hi");
+  const key2 = refkey("hi");
+  expect(key1).toBe(key2);
+});
+
+it("composes multiple keys", () => {
+  const obj1 = {};
+  const obj2 = {};
+
+  const key1 = refkey(obj1, obj2, "hi");
+  const key2 = refkey(obj1, obj2, "hi");
+
+  expect(key1).toBe(key2);
+});
+
+it("can be called with no args and returns a fresh key", () => {
+  const key1 = refkey();
+  const key2 = refkey();
+  expect(key1).not.toBe(key2);
+});

package/test/rendering/basic.test.tsx

@@ -0,0 +1,156 @@
+import { Children } from "@alloy-js/core/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import "../../testing/extend-expect.js";
+describe("string nodes", () => {
+  it("renders string nodes", () => {
+    expect(<>
+      a
+      b
+        c
+    </>).toRenderTo(`
+      a
+      b
+        c
+    `);
+  });
+
+  it("renders string nodes with substitutions", () => {
+    const str = "hi";
+    expect(<>
+      a {str}
+      {str}
+    </>).toRenderTo(`
+      a hi
+      hi
+    `);
+  });
+});
+
+describe("component nodes", () => {
+  function Str() {
+    return "Str";
+  }
+
+  function Arr() {
+    return ["Item 1", "\n" + "Item 2"];
+  }
+
+  function Nested() {
+    return <Str />;
+  }
+
+  it("renders basic component", () => {
+    expect(<Str />).toRenderTo("Str");
+  });
+
+  it("renders array components", () => {
+    expect(<Arr />).toRenderTo("Item 1\nItem 2");
+  });
+
+  it("renders nested components", () => {
+    expect(<Nested />).toRenderTo("Str");
+  });
+
+  it("renders components on same line", () => {
+    expect(<>
+      <Str /> <Str />
+    </>).toRenderTo("Str Str");
+  });
+
+  it("renders components on multiple lines", () => {
+    expect(<>
+      <Str /> <Str />
+      <Arr /> <Arr />
+    </>).toRenderTo(`
+    Str Str
+    Item 1
+    Item 2 Item 1
+    Item 2
+    `);
+  });
+});
+
+describe("memo nodes", () => {
+  function getStr() {
+    return "Str";
+  }
+  function Foo() {
+    return "Foo";
+  }
+  function getFoo() {
+    return <Foo />;
+  }
+  function getArr() {
+    return [<Foo />, "\n", <Foo />];
+  }
+
+  it("renders basic memos", () => {
+    expect(<>
+      {getStr()}
+    </>).toRenderTo("Str");
+  });
+
+  it("renders component memos", () => {
+    expect(<>
+      {getFoo()}
+    </>).toRenderTo("Foo");
+  });
+
+  it("renders array memos", () => {
+    expect(<>
+      {getArr()}
+    </>).toRenderTo("Foo\nFoo");
+  });
+});
+
+describe("array nodes", () => {
+  it("renders basic arrays", () => {
+    expect([["hi", " ", "hi"]]).toRenderTo("hi hi");
+  });
+});
+
+it("renders text fragments", () => {
+  function Foo() {
+    return "bye";
+  }
+
+  expect(<>
+      hi
+      <Foo />
+    </>).toRenderTo(`
+    hi
+    bye
+  `);
+});
+
+it("renders basic components", () => {
+  function Bar(props: { children?: Children }) {
+    return props.children;
+  }
+
+  function Foo() {
+    return <Bar>hello</Bar>;
+  }
+
+  expect(<Foo />).toRenderTo("hello");
+});
+
+it("renders booleans appropriately", () => {
+  function Foo() {
+    return false;
+  }
+
+  expect(<Foo />).toRenderTo("");
+});
+
+it("keeps spaces between expressions", () => {
+  const str = "str";
+  function getStr() {
+    return "getStr";
+  }
+  expect(<>
+    a {str} {str} {getStr()} {getStr()} c
+  </>).toRenderTo(
+    "a str str getStr getStr c",
+  );
+});

package/test/rendering/code.test.tsx

@@ -0,0 +1,62 @@
+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");
+});
+
+it("renders removes indents", () => {
+  expect(code`
+    foo
+  `).toRenderTo("foo");
+});
+
+it("renders allows substitutions of elements", () => {
+  function Foo() {
+    return "hi";
+  }
+  expect(code`
+    foo ${<Foo />} bar
+  `).toRenderTo("foo hi bar");
+});
+
+it("renders has auto-indentation", () => {
+  function Foo() {
+    return code`
+      hi
+      bye
+    `;
+  }
+
+  const template = code`
+    if (x === 1) {
+      ${<Foo />}
+    }
+  `;
+
+  expect(template).toRenderTo(`
+    if (x === 1) {
+      hi
+      bye
+    }
+  `);
+});
+
+it("handles blank lines", () => {
+  const template = code`
+    {
+      a
+
+      x
+    }
+  `;
+
+  expect(template).toRenderTo(`
+    {
+      a
+      
+      x
+    }
+  `);
+});