@alloy-js/core 0.10.0 → 0.11.0

package/dist/test/components/slot.test.js

@@ -0,0 +1,134 @@
+import { memo as _$memo, createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import { it } from "vitest";
+import { Output } from "../../src/components/Output.js";
+import { SourceFile } from "../../src/components/SourceFile.js";
+import { Declaration, Name, refkey, Scope, useBinder } from "../../src/index.js";
+import { render } from "../../src/render.js";
+import { defineSlot, rename, replace } from "../../src/slot.js";
+import "../../testing/extend-expect.js";
+it("works with string keys", () => {
+  const FunctionSlot = defineSlot(query => query.name);
+  function MyFunctionComponent(props) {
+    const FunctionSlotInstance = FunctionSlot.create(props.name, {
+      ...props,
+      additionalProp: "hi"
+    }, ["function ", _$memo(() => props.name), "() ", "{", "console.log(\"hello world\");", "}"]);
+    return _$createComponent(FunctionSlotInstance, {});
+  }
+
+  // extension.tsx
+  replace(FunctionSlot.find({
+    name: "foo"
+  }), props => {
+    return ["// original", _$memo(() => props.original)];
+  });
+  const tree = render(_$createComponent(Output, {
+    get children() {
+      return _$createComponent(SourceFile, {
+        path: "test.ts",
+        filetype: "ts",
+        get children() {
+          return _$createComponent(MyFunctionComponent, {
+            name: "foo"
+          });
+        }
+      });
+    }
+  }));
+  console.log(tree.contents[0].contents);
+});
+it("works with symbols", () => {
+  const FunctionSlot = defineSlot(query => {
+    const binder = useBinder();
+    return binder.resolveFQN(query.fqn);
+  });
+  function MyFunctionComponent(props) {
+    const binder = useBinder();
+    const sym = binder.createSymbol({
+      name: props.name,
+      refkey: refkey()
+    });
+    const FunctionSlotInstance = FunctionSlot.create(sym, {
+      ...props,
+      additionalProp: "hi"
+    }, _$createComponent(Declaration, {
+      symbol: sym,
+      get children() {
+        return ["function ", _$createComponent(Name, {}), "() ", "{", "console.log(\"hello world\");", "}"];
+      }
+    }));
+    return _$createComponent(FunctionSlotInstance, {});
+  }
+
+  // extension.tsx
+  replace(FunctionSlot.find({
+    fqn: "foo.bar"
+  }), props => {
+    return ["// original", _$memo(() => props.original)];
+  });
+  const tree = render(_$createComponent(Output, {
+    get children() {
+      return _$createComponent(SourceFile, {
+        path: "test.ts",
+        filetype: "ts",
+        get children() {
+          return _$createComponent(Scope, {
+            name: "foo",
+            get children() {
+              return _$createComponent(MyFunctionComponent, {
+                name: "bar"
+              });
+            }
+          });
+        }
+      });
+    }
+  }));
+  console.log(tree.contents[0].contents);
+});
+it("can rename", () => {
+  const FunctionSlot = defineSlot(query => {
+    const binder = useBinder();
+    return binder.resolveFQN(query.fqn);
+  });
+  function MyFunctionComponent(props) {
+    const binder = useBinder();
+    const sym = binder.createSymbol({
+      name: props.name,
+      refkey: refkey()
+    });
+    const FunctionSlotInstance = FunctionSlot.create(sym, {
+      ...props,
+      additionalProp: "hi"
+    }, _$createComponent(Declaration, {
+      symbol: sym,
+      get children() {
+        return ["function ", _$createComponent(Name, {}), "() ", "{", "console.log(\"hello world\");", "}"];
+      }
+    }));
+    return _$createComponent(FunctionSlotInstance, {});
+  }
+  rename(() => {
+    const binder = useBinder();
+    return binder.resolveFQN("foo.bar");
+  }, "bazxxx");
+  const tree = render(_$createComponent(Output, {
+    get children() {
+      return _$createComponent(SourceFile, {
+        path: "test.ts",
+        filetype: "ts",
+        get children() {
+          return _$createComponent(Scope, {
+            name: "foo",
+            get children() {
+              return _$createComponent(MyFunctionComponent, {
+                name: "bar"
+              });
+            }
+          });
+        }
+      });
+    }
+  }));
+  console.log(tree.contents[0].contents);
+});

package/dist/test/components/source-file.test.js

@@ -0,0 +1,64 @@
+import { createComponent as _$createComponent, memo as _$memo } from "@alloy-js/core/jsx-runtime";
+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";
+import { d } from "../../testing/render.js";
+it("tracks its content", () => {
+  let context;
+  function Test() {
+    context = useContext(SourceDirectoryContext);
+  }
+  const _ = renderTree(_$createComponent(Output, {
+    get children() {
+      return [_$createComponent(Test, {}), _$createComponent(SourceFile, {
+        path: "hi.txt",
+        filetype: "text",
+        children: "hello!"
+      })];
+    }
+  }));
+  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 _$createComponent(SourceFile, {
+      path: "contents.txt",
+      filetype: "text",
+      get children() {
+        return allFiles.value;
+      }
+    });
+  }
+  const tree = render(_$createComponent(Output, {
+    get children() {
+      return [_$createComponent(SourceFile, {
+        path: "hi.txt",
+        filetype: "text",
+        children: "hello!"
+      }), _$createComponent(TrackContents, {})];
+    }
+  }));
+  expect(tree.contents[1].contents).toEqual("hi.txt contents.txt");
+});
+it("Includes header", () => {
+  const header = ["# This is a header"];
+  const tree = render(_$createComponent(Output, {
+    get children() {
+      return _$createComponent(SourceFile, {
+        path: "hi.txt",
+        filetype: "text",
+        header: header,
+        children: "hello!"
+      });
+    }
+  }));
+  expect(tree.contents[0].contents).toEqual(d`
+    # This is a header
+    hello!
+    `);
+});

package/dist/test/components/wrap.test.js

@@ -0,0 +1,35 @@
+import { memo as _$memo, createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { Wrap } from "../../src/components/Wrap.js";
+import { printTree, renderTree } from "../../src/render.js";
+import "../../testing/extend-expect.js";
+function Wrapper(props) {
+  return ["[", _$memo(() => props.children), "]"];
+}
+it("conditionally wraps", () => {
+  const template = [_$createComponent(Wrap, {
+    when: true,
+    "with": Wrapper,
+    children: "testing"
+  }), _$createComponent(Wrap, {
+    when: false,
+    "with": Wrapper,
+    children: "testing"
+  })];
+  expect(template).toRenderTo(`[testing]testing`);
+});
+it("works reactively", () => {
+  const doWrap = ref(false);
+  const template = [_$createComponent(Wrap, {
+    get when() {
+      return doWrap.value;
+    },
+    "with": Wrapper,
+    children: "testing"
+  })];
+  const tree = renderTree(template);
+  expect(printTree(tree)).toEqual(`testing`);
+  doWrap.value = true;
+  expect(printTree(tree)).toEqual(`testing`);
+});

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

@@ -0,0 +1,185 @@
+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 { expect, it } from "vitest";
+import { For } from "../../src/components/For.js";
+import { onCleanup, printTree, reactive, renderTree } from "../../src/index.js";
+it("works", () => {
+  const messages = ["hi", "bye"];
+  const template = _$createComponent(For, {
+    each: messages,
+    children: message => [message, ", Jose!"]
+  });
+  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 = _$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");
+  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");
+  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");
+  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);
+  // 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();
+  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 = [];
+  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);
+
+  // 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/cleanup.test.js

@@ -0,0 +1,77 @@
+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";
+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;
+    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;
+    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 = "";
+    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 = "";
+    expect(cleanedUpC1).toBe(true);
+    expect(cleanedUpC2).toBe(true);
+  });
+});