@alloy-js/core 0.9.0 → 0.11.0

package/dist/test/reactivity/memo.test.js

@@ -0,0 +1,16 @@
+import { memo } from "@alloy-js/core/jsx-runtime";
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+it("doesn't recalculate when dependencies don't change", () => {
+  const signal = ref(0);
+  let callCount = 0;
+  const m = memo(() => {
+    callCount += 1;
+    return signal.value;
+  });
+  expect(callCount).toBe(1);
+  m();
+  expect(callCount).toBe(1);
+  m();
+  expect(callCount).toBe(1);
+});

package/dist/test/reactivity/ref-rendering.test.js

@@ -0,0 +1,37 @@
+import { code, memo, printTree, renderTree } 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]);
+  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/dist/test/reactivity/test.test.js

@@ -0,0 +1,61 @@
+import { memo as _$memo, createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import { memo, printTree, 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 } 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 [_$memo(() => mapped.value), " done"];
+  }
+  const tree = renderTree(_$createComponent(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 = reactive(new Map());
+  function addImport(path, type) {
+    if (!importRecords.has(path)) {
+      importRecords.set(path, new Set());
+    }
+    importRecords.get(path).add(type);
+  }
+  function ImportStatements(props) {
+    return memo(() => mapJoin(() => props.records, (path, types) => _$createComponent(ImportStatement, {
+      path: path,
+      types: types
+    })));
+  }
+  function ImportStatement(props) {
+    // 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(_$createComponent(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/dist/test/reactivity/untrack.test.js

@@ -0,0 +1,23 @@
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { memo, untrack } from "../../src/jsx-runtime.js";
+it("ignores signals for dependency tracking", () => {
+  const signal = ref(0);
+  const m = memo(() => {
+    return untrack(() => signal.value);
+  });
+  expect(m()).toBe(0);
+  signal.value = 1;
+  expect(m()).toBe(0);
+});
+it("doesn't affect signal changes", () => {
+  const signal = ref(0);
+  const m = memo(() => {
+    return signal.value;
+  });
+  expect(m()).toBe(0);
+  untrack(() => {
+    signal.value = 1;
+  });
+  expect(m()).toBe(1);
+});

package/dist/test/refkey.test.js

@@ -0,0 +1,25 @@
+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/dist/test/rendering/basic.test.js

@@ -0,0 +1,96 @@
+import { createIntrinsic as _$createIntrinsic, createComponent as _$createComponent, memo as _$memo } from "@alloy-js/core/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import "../../testing/extend-expect.js";
+describe("string nodes", () => {
+  it("renders string nodes with substitutions", () => {
+    const str = "hi";
+    expect(["a ", str, _$createIntrinsic("hbr", {}), str]).toRenderTo(`
+      a hi
+      hi
+    `);
+  });
+});
+describe("component nodes", () => {
+  function Str() {
+    return "Str";
+  }
+  function Arr() {
+    return ["Item 1", "\n" + "Item 2"];
+  }
+  function Nested() {
+    return _$createComponent(Str, {});
+  }
+  it("renders basic component", () => {
+    expect(_$createComponent(Str, {})).toRenderTo("Str");
+  });
+  it("renders array components", () => {
+    expect(_$createComponent(Arr, {})).toRenderTo("Item 1\nItem 2");
+  });
+  it("renders nested components", () => {
+    expect(_$createComponent(Nested, {})).toRenderTo("Str");
+  });
+  it("renders components on same line", () => {
+    expect([_$createComponent(Str, {}), " ", _$createComponent(Str, {})]).toRenderTo("Str Str");
+  });
+});
+describe("memo nodes", () => {
+  function getStr() {
+    return "Str";
+  }
+  function Foo() {
+    return "Foo";
+  }
+  function getFoo() {
+    return _$createComponent(Foo, {});
+  }
+  function getArr() {
+    return [_$createComponent(Foo, {}), "\n", _$createComponent(Foo, {})];
+  }
+  it("renders basic memos", () => {
+    expect([_$memo(getStr)]).toRenderTo("Str");
+  });
+  it("renders component memos", () => {
+    expect([_$memo(getFoo)]).toRenderTo("Foo");
+  });
+  it("renders array memos", () => {
+    expect([_$memo(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", _$createIntrinsic("hbr", {}), _$createComponent(Foo, {})]).toRenderTo(`
+    hi
+    bye
+  `);
+});
+it("renders basic components", () => {
+  function Bar(props) {
+    return props.children;
+  }
+  function Foo() {
+    return _$createComponent(Bar, {
+      children: "hello"
+    });
+  }
+  expect(_$createComponent(Foo, {})).toRenderTo("hello");
+});
+it("renders booleans appropriately", () => {
+  function Foo() {
+    return false;
+  }
+  expect(_$createComponent(Foo, {})).toRenderTo("");
+});
+it("keeps spaces between expressions", () => {
+  const str = "str";
+  function getStr() {
+    return "getStr";
+  }
+  expect(["a ", str, " ", str, " ", _$memo(getStr), " ", _$memo(getStr), " c"]).toRenderTo("a str str getStr getStr c");
+});

package/dist/test/rendering/code.test.js

@@ -0,0 +1,55 @@
+import { createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+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 ${_$createComponent(Foo, {})} bar
+  `).toRenderTo("foo hi bar");
+});
+it("renders has auto-indentation", () => {
+  function Foo() {
+    return code`
+      hi
+      bye
+    `;
+  }
+  const template = code`
+    if (x === 1) {
+      ${_$createComponent(Foo, {})}
+    }
+  `;
+  expect(template).toRenderTo(`
+    if (x === 1) {
+      hi
+      bye
+    }
+  `);
+});
+it("handles blank lines", () => {
+  const template = code`
+    {
+      a
+
+      x
+    }
+  `;
+  expect(template).toRenderTo(`
+    {
+      a
+    
+      x
+    }
+  `);
+});