@alloy-js/core 0.10.0 → 0.12.0

package/dist/test/control-flow/for.test.js

@@ -0,0 +1,219 @@
+import { createComponent as _$createComponent, memo as _$memo } from "@alloy-js/core/jsx-runtime";
+import "@alloy-js/core/testing";
+import { d } from "@alloy-js/core/testing";
+import { describe, expect, it } from "vitest";
+import { For } from "../../src/components/For.js";
+import { onCleanup, printTree, reactive, renderTree } from "../../src/index.js";
+import { flushJobs } from "../../src/scheduler.js";
+it("works", () => {
+  const messages = ["hi", "bye"];
+  const template = _$createComponent(For, {
+    each: messages,
+    children: message => [message, ", Jose!"]
+  });
+  expect(template).toRenderTo(`
+    hi, Jose!
+    bye, Jose!
+  `);
+});
+describe("readonly collections", () => {
+  const out = d`
+    a
+    b
+  `;
+  it("array", () => {
+    const messages = ["a", "b"];
+    expect(_$createComponent(For, {
+      each: messages,
+      children: x => [x]
+    })).toRenderTo(out);
+  });
+  it("map", () => {
+    const messages = new Map([["a", "a"], ["b", "b"]]);
+    expect(_$createComponent(For, {
+      each: messages,
+      children: x => [x]
+    })).toRenderTo(out);
+  });
+  it("set", () => {
+    const messages = new Set(["a", "b"]);
+    expect(_$createComponent(For, {
+      each: messages,
+      children: x => [x]
+    })).toRenderTo(out);
+  });
+});
+it("handles map entries", () => {
+  const map = new Map([["a", {
+    name: "foo"
+  }]]);
+  const entries = Array.from(map.entries());
+  const template = _$createComponent(For, {
+    each: entries,
+    children: ([key, value]) => [key, ": ", _$memo(() => value.name)]
+  });
+  expect(template).toRenderTo(`
+    a: foo
+  `);
+});
+it("handles iterators", () => {
+  const iterator = new Map([["a", {
+    name: "foo"
+  }]]).entries();
+  const template = _$createComponent(For, {
+    each: iterator,
+    children: ([key, value]) => [key, ": ", _$memo(() => value.name)]
+  });
+  expect(template).toRenderTo(`
+    a: foo
+  `);
+});
+it("handles maps", () => {
+  const map = new Map([["a", {
+    name: "foo"
+  }]]);
+  const template = _$createComponent(For, {
+    each: map,
+    children: (key, value) => [key, ": ", _$memo(() => value.name)]
+  });
+  expect(template).toRenderTo(`
+    a: foo
+  `);
+});
+it("doesn't rerender mappers", () => {
+  const messages = reactive(["hi", "bye"]);
+  let count = 0;
+  const template = _$createComponent(For, {
+    each: messages,
+    children: () => ["item ", count++]
+  });
+  const tree = renderTree(template);
+  expect(count).toBe(2);
+  messages.push("maybe");
+  flushJobs();
+  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 = _$createComponent(For, {
+    each: messages,
+    children: () => ["item ", count++]
+  });
+  const tree = renderTree(template);
+  expect(count).toBe(2);
+  messages.add("maybe");
+  flushJobs();
+  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 = _$createComponent(For, {
+    each: messages,
+    children: () => ["item ", count++]
+  });
+  const tree = renderTree(template);
+  expect(count).toBe(2);
+  messages.set("maybe", "three");
+  flushJobs();
+  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 = _$createComponent(For, {
+    each: messages,
+    children: msg => ["item ", count++]
+  });
+  const tree = renderTree(template);
+  expect(count).toBe(3);
+  messages.splice(1, 1);
+  flushJobs();
+  // 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 = [];
+  function Letter(props) {
+    onCleanup(() => {
+      cleanups.push(props.letter);
+    });
+    return ["Letter ", _$memo(() => props.letter)];
+  }
+  const items = reactive(["a", "b"]);
+  const template = _$createComponent(For, {
+    each: items,
+    children: item => _$createComponent(Letter, {
+      letter: item
+    })
+  });
+  const tree = renderTree(template);
+  expect(cleanups).toEqual([]);
+  expect(printTree(tree)).toBe(d`
+    Letter a
+    Letter b
+  `);
+  items.pop();
+  flushJobs();
+  expect(cleanups).toEqual(["b"]);
+  expect(printTree(tree)).toBe(d`
+    Letter a
+  `);
+  items.pop();
+  flushJobs();
+  expect(cleanups).toEqual(["b", "a"]);
+  expect(printTree(tree)).toBe("");
+});
+it("cleans up things which end up removed (with splice)", () => {
+  const cleanups = [];
+  function Letter(props) {
+    onCleanup(() => {
+      cleanups.push(props.letter);
+    });
+    return ["Letter ", _$memo(() => props.letter)];
+  }
+  const items = reactive(["a", "b", "c"]);
+  const template = _$createComponent(For, {
+    each: items,
+    children: item => _$createComponent(Letter, {
+      letter: item
+    })
+  });
+  const tree = renderTree(template);
+  expect(cleanups).toEqual([]);
+  expect(printTree(tree)).toBe(d`
+    Letter a
+    Letter b
+    Letter c
+  `);
+  items.splice(1, 1);
+  flushJobs();
+  // 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
+  `);
+});

package/dist/test/control-flow/match.test.js

@@ -0,0 +1,67 @@
+import { createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import "@alloy-js/core/testing";
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { Match, Switch } from "../../src/components/Switch.js";
+import { printTree, renderTree } from "../../src/render.js";
+it("selects the true branch", () => {
+  const template = _$createComponent(Switch, {
+    get children() {
+      return [_$createComponent(Match, {
+        when: true,
+        children: "true"
+      }), _$createComponent(Match, {
+        "else": true,
+        children: "false"
+      })];
+    }
+  });
+  expect(template).toRenderTo(`true`);
+});
+it("selects the else branch", () => {
+  const template = _$createComponent(Switch, {
+    get children() {
+      return [_$createComponent(Match, {
+        when: false,
+        children: "true"
+      }), _$createComponent(Match, {
+        "else": true,
+        children: "false"
+      })];
+    }
+  });
+  expect(template).toRenderTo(`false`);
+});
+it("renders to nothing when no branch matches", () => {
+  const template = _$createComponent(Switch, {
+    get children() {
+      return _$createComponent(Match, {
+        when: false,
+        children: "true"
+      });
+    }
+  });
+  expect(template).toRenderTo(``);
+});
+it("works with reactivity", () => {
+  const count = ref(0);
+  const template = _$createComponent(Switch, {
+    get children() {
+      return [_$createComponent(Match, {
+        get when() {
+          return count.value % 2 === 0;
+        },
+        children: "even"
+      }), _$createComponent(Match, {
+        "else": true,
+        children: "odd"
+      })];
+    }
+  });
+  const tree = renderTree(template);
+  expect(printTree(tree)).toBe(`even`);
+  count.value++;
+  expect(printTree(tree)).toBe(`odd`);
+  count.value++;
+  expect(printTree(tree)).toBe(`even`);
+});

package/dist/test/control-flow/show.test.js

@@ -0,0 +1,29 @@
+import { createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import "@alloy-js/core/testing";
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { Show } from "../../src/components/Show.js";
+import { printTree, renderTree } from "../../src/render.js";
+it("selects the true branch", () => {
+  const template = _$createComponent(Show, {
+    when: true,
+    children: "true"
+  });
+  expect(template).toRenderTo(`true`);
+});
+it("works with reactivity", () => {
+  const count = ref(0);
+  const template = _$createComponent(Show, {
+    get when() {
+      return count.value % 2 === 0;
+    },
+    fallback: "odd",
+    children: "even"
+  });
+  const tree = renderTree(template);
+  expect(printTree(tree)).toBe(`even`);
+  count.value++;
+  expect(printTree(tree)).toBe(`odd`);
+  count.value++;
+  expect(printTree(tree)).toBe(`even`);
+});

package/dist/test/name-policy.test.js

@@ -0,0 +1,19 @@
+import { createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+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(_$createComponent(Output, {
+    namePolicy: policy,
+    get children() {
+      return _$createComponent(Foo, {});
+    }
+  })).toRenderTo("namehi");
+});

package/dist/test/props-with-defaults.test.js

@@ -0,0 +1,93 @@
+import { effect, reactive } from "@vue/reactivity";
+import { expect, it, vi } from "vitest";
+import { defaultProps } from "../src/jsx-runtime.js";
+it("applies defaults to regular object props", () => {
+  const props = {
+    a: 1,
+    b: 2,
+    c: undefined
+  };
+  const dProps = defaultProps(props, {
+    a: 10,
+    c: 20
+  });
+  expect(dProps).toEqual({
+    a: 1,
+    b: 2,
+    c: 20
+  });
+});
+it("applies defaults with getters without invoking them", () => {
+  const getterA = vi.fn(() => 1);
+  const getterB = vi.fn(() => undefined);
+  const props = {
+    get a() {
+      return getterA();
+    },
+    get b() {
+      return getterB();
+    },
+    c: 3
+  };
+  const dProps = defaultProps(props, {
+    b: 20,
+    c: 30
+  });
+  expect(getterA).not.toHaveBeenCalled();
+  expect(getterB).not.toHaveBeenCalled();
+  const value = dProps.b;
+  expect(getterB).toHaveBeenCalledTimes(1);
+  expect(value).toEqual(20);
+});
+it("applies defaults to reactives without observing them initially", () => {
+  const props = reactive({
+    a: 1,
+    b: 2,
+    c: undefined
+  });
+  const defaults = defaultProps(props, {
+    c: 10
+  });
+  expect(defaults.a).toBe(1);
+  expect(defaults.b).toBe(2);
+  expect(defaults.c).toBe(10);
+});
+it("ensures effect is not triggered by defaults but by accessing reactive props", () => {
+  const props = reactive({
+    a: 1,
+    b: 2,
+    c: undefined
+  });
+  let withDefaults;
+  const splitEffect = vi.fn(() => {
+    withDefaults = defaultProps(props, {
+      c: 10
+    });
+  });
+  effect(splitEffect);
+  expect(splitEffect).toHaveBeenCalledTimes(1);
+  const observeEffect = vi.fn(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    withDefaults.a;
+  });
+  effect(observeEffect);
+  expect(observeEffect).toHaveBeenCalledTimes(1);
+  props.a = 2;
+  expect(splitEffect).toHaveBeenCalledTimes(1);
+  expect(observeEffect).toHaveBeenCalledTimes(2);
+});
+it("applies defaults to reactives", () => {
+  const props = reactive({
+    a: 1,
+    b: 2,
+    c: undefined
+  });
+  const withDefaults = defaultProps(props, {
+    c: 10
+  });
+  expect(withDefaults.c).toBe(10);
+  props.c = 20;
+  expect(withDefaults.c).toBe(20);
+  props.c = undefined;
+  expect(withDefaults.c).toBe(10);
+});

package/dist/test/reactivity/circular-reactives.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=circular-reactives.test.d.ts.map

package/dist/test/reactivity/circular-reactives.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-reactives.test.d.ts","sourceRoot":"","sources":["../../../test/reactivity/circular-reactives.test.tsx"],"names":[],"mappings":""}

package/dist/test/reactivity/circular-reactives.test.js

@@ -0,0 +1,31 @@
+import { memo as _$memo, createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import { shallowReactive } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { For } from "../../src/index.js";
+import { printTree, renderTree } from "../../src/render.js";
+import { d } from "../../testing/render.js";
+it("it should work with circular reactives", () => {
+  const items = shallowReactive([]);
+  let added = false;
+  function MaybeAddString(props) {
+    if (!added) {
+      items.push("item " + items.length);
+      added = true;
+    }
+    return [_$memo(() => props.item)];
+  }
+  const template = [_$createComponent(For, {
+    each: items,
+    children: item => {
+      return _$createComponent(MaybeAddString, {
+        item: item
+      });
+    }
+  })];
+  const tree = renderTree(template);
+  items.push("item start");
+  expect(printTree(tree)).toBe(d`
+    item start
+    item 1
+  `);
+});

package/dist/test/reactivity/cleanup.test.js

@@ -0,0 +1,82 @@
+import { effect, memo, onCleanup, createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import { ref } from "@vue/reactivity";
+import { describe, expect, it } from "vitest";
+import { renderTree } from "../../src/render.js";
+import { flushJobs } from "../../src/scheduler.js";
+describe("memo cleanup", () => {
+  it("cleans up when memo value is recomputed", () => {
+    const r = ref(1);
+    let callCount = 0;
+    const m = memo(() => {
+      onCleanup(() => {
+        callCount++;
+      });
+      return r.value;
+    });
+    expect(m()).toBe(1);
+    expect(callCount).toBe(0);
+    r.value = 2;
+    flushJobs();
+    expect(m()).toBe(2);
+    expect(callCount).toBe(1);
+  });
+});
+describe("effect cleanup", () => {
+  it("cleans up when the effect is run", () => {
+    const r = ref(1);
+    let cleanedUp = false;
+    effect(() => {
+      onCleanup(() => {
+        cleanedUp = true;
+      });
+      return r.value;
+    });
+    expect(cleanedUp).toBe(false);
+    r.value = 2;
+    flushJobs();
+    expect(cleanedUp).toBe(true);
+  });
+});
+describe("element cleanup", () => {
+  it("should clean up when the element is unmounted", () => {
+    let cleanedUp = false;
+    function Component() {
+      onCleanup(() => {
+        cleanedUp = true;
+      });
+      return "hi!";
+    }
+    const el = ref(_$createComponent(Component, {}));
+    const template = [el];
+    renderTree(template);
+    el.value = "";
+    flushJobs();
+    expect(cleanedUp).toBe(true);
+  });
+  it("should clean up when the element is unmounted, recursively", () => {
+    let cleanedUpC1 = false;
+    let cleanedUpC2 = false;
+    function C1(props) {
+      onCleanup(() => {
+        cleanedUpC1 = true;
+      });
+      return props.children;
+    }
+    function C2() {
+      onCleanup(() => {
+        cleanedUpC2 = true;
+      });
+    }
+    const el = ref(_$createComponent(C1, {
+      get children() {
+        return _$createComponent(C2, {});
+      }
+    }));
+    const template = [el];
+    renderTree(template);
+    el.value = "";
+    flushJobs();
+    expect(cleanedUpC1).toBe(true);
+    expect(cleanedUpC2).toBe(true);
+  });
+});

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,26 @@
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { memo, untrack } from "../../src/jsx-runtime.js";
+import { flushJobs } from "../../src/scheduler.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;
+  flushJobs();
+  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;
+  });
+  flushJobs();
+  expect(m()).toBe(1);
+});