@alloy-js/core 0.9.0 → 0.11.0

package/dist/test/rendering/formatting.test.js

@@ -0,0 +1,402 @@
+import { createIntrinsic as _$createIntrinsic, createComponent as _$createComponent, memo as _$memo } from "@alloy-js/core/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { For, Output, render, SourceFile } from "../../src/index.js";
+import "../../testing/extend-expect.js";
+import { d } from "../../testing/render.js";
+describe("group", () => {
+  it("breaks when shouldBreak is passed", () => {
+    expect(_$createIntrinsic("group", {
+      shouldBreak: true,
+      get children() {
+        return ["hi", _$createIntrinsic("sbr", {}), "bye"];
+      }
+    })).toRenderTo(`
+        hi
+        bye
+      `);
+  });
+});
+describe("indent", () => {
+  it("indents its children", () => {
+    expect(["a", _$createIntrinsic("indent", {
+      get children() {
+        return [_$createIntrinsic("hardline", {}), "b"];
+      }
+    })]).toRenderTo(`
+      a
+        b
+    `);
+  });
+});
+describe("dedent and markAsRoot", () => {
+  it("dedents its children", () => {
+    expect(["base", _$createIntrinsic("indent", {
+      get children() {
+        return [_$createIntrinsic("hbr", {}), "a", _$createIntrinsic("dedent", {
+          get children() {
+            return [_$createIntrinsic("hardline", {}), "b"];
+          }
+        })];
+      }
+    })]).toRenderTo(`
+    base
+      a
+    b
+    `);
+  });
+});
+describe("dedentToRoot and setRoot", () => {
+  it("dedents to the indent level marked by the root when not marked", () => {
+    expect(["base", _$createIntrinsic("indent", {
+      get children() {
+        return [_$createIntrinsic("hbr", {}), "a", _$createIntrinsic("dedentToRoot", {
+          get children() {
+            return [_$createIntrinsic("hbr", {}), "b"];
+          }
+        })];
+      }
+    })]).toRenderTo(`
+    base
+      a
+    b
+    `);
+  });
+  it("dedents to the indent level marked by the root when marked", () => {
+    expect(["base", _$createIntrinsic("indent", {
+      get children() {
+        return [_$createIntrinsic("hbr", {}), "root", _$createIntrinsic("markAsRoot", {
+          get children() {
+            return _$createIntrinsic("indent", {
+              get children() {
+                return [_$createIntrinsic("hbr", {}), "a", _$createIntrinsic("dedentToRoot", {
+                  get children() {
+                    return [_$createIntrinsic("hbr", {}), "b"];
+                  }
+                })];
+              }
+            });
+          }
+        })];
+      }
+    })]).toRenderTo(`
+    base
+      root
+        a
+      b
+    `);
+  });
+});
+describe("softline", () => {
+  it("breaks to to a new line when needed", () => {
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("softline", {}), "1234567890"];
+      }
+    })).toRenderTo(`12345678901234567890`, {
+      printWidth: 25
+    });
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("softline", {}), "1234567890"];
+      }
+    })).toRenderTo(`
+        1234567890
+        1234567890
+      `, {
+      printWidth: 15
+    });
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("sbr", {}), "1234567890"];
+      }
+    })).toRenderTo(`12345678901234567890`, {
+      printWidth: 25
+    });
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("sbr", {}), "1234567890"];
+      }
+    })).toRenderTo(`
+        1234567890
+        1234567890
+      `, {
+      printWidth: 15
+    });
+  });
+});
+describe("hardline", () => {
+  it("always breaks to a new line", () => {
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("hardline", {}), "1234567890"];
+      }
+    })).toRenderTo(`
+        1234567890
+        1234567890
+      `);
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("hbr", {}), "1234567890"];
+      }
+    })).toRenderTo(`
+        1234567890
+        1234567890
+      `);
+  });
+});
+describe("line", () => {
+  it("creates a new line when needed, is otherwise space", () => {
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("line", {}), "1234567890"];
+      }
+    })).toRenderTo(`1234567890 1234567890`, {
+      printWidth: 25
+    });
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("line", {}), "1234567890"];
+      }
+    })).toRenderTo(`
+        1234567890
+        1234567890
+      `, {
+      printWidth: 15
+    });
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("br", {}), "1234567890"];
+      }
+    })).toRenderTo(`1234567890 1234567890`, {
+      printWidth: 25
+    });
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return ["1234567890", _$createIntrinsic("br", {}), "1234567890"];
+      }
+    })).toRenderTo(`
+        1234567890
+        1234567890
+      `, {
+      printWidth: 15
+    });
+  });
+});
+describe("literalline", () => {
+  it("always creates a new line", () => {
+    expect(["base", _$createIntrinsic("indent", {
+      get children() {
+        return [_$createIntrinsic("hbr", {}), "1234567890", _$createIntrinsic("literalline", {}), "1234567890", _$createIntrinsic("hbr", {}), "x"];
+      }
+    })]).toRenderTo(`
+        base
+          1234567890
+        1234567890
+          x
+      `);
+    expect(["base", _$createIntrinsic("indent", {
+      get children() {
+        return [_$createIntrinsic("hbr", {}), "1234567890", _$createIntrinsic("lbr", {}), "1234567890", _$createIntrinsic("hbr", {}), "x"];
+      }
+    })]).toRenderTo(`
+        base
+          1234567890
+        1234567890
+          x
+      `);
+  });
+});
+describe("lineSuffix and lineSuffixBoundary", () => {
+  it("adds a line suffix", () => {
+    expect(["hello", _$createIntrinsic("lineSuffix", {
+      children: "// comment"
+    }), " there", _$createIntrinsic("hbr", {}), "how", _$createIntrinsic("lineSuffix", {
+      children: "// another comment"
+    }), " are", " ", _$createIntrinsic("lineSuffixBoundary", {}), "you"]).toRenderTo(`
+        hello there// comment
+        how are // another comment
+        you
+      `);
+  });
+});
+describe("breakParent", () => {
+  it("breaks the parent group", () => {
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return [_$createIntrinsic("breakParent", {}), "one", _$createIntrinsic("sbr", {}), "two"];
+      }
+    })).toRenderTo(`
+        one
+        two
+      `);
+  });
+});
+describe("ifBreak", () => {
+  it("renders the children when broken", () => {
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return _$createIntrinsic("ifBreak", {
+          flatContents: "bye",
+          children: "hi"
+        });
+      }
+    })).toRenderTo(`bye`);
+  });
+  it("renders the children when not broken", () => {
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return [_$createIntrinsic("ifBreak", {
+          flatContents: "bye",
+          children: "hi"
+        }), _$createIntrinsic("breakParent", {})];
+      }
+    })).toRenderTo(`hi`);
+  });
+  it("renders flatContents that are elements", () => {
+    function Foo() {
+      return "Foo";
+    }
+    const contents = [_$createComponent(Foo, {}), _$createComponent(Foo, {})];
+    expect(_$createIntrinsic("group", {
+      get children() {
+        return _$createIntrinsic("ifBreak", {
+          flatContents: contents,
+          children: "hi"
+        });
+      }
+    })).toRenderTo(`FooFoo`);
+  });
+  it("works with a group id", () => {
+    const id = Symbol();
+    expect([_$createIntrinsic("group", {
+      id: id,
+      get children() {
+        return ["a", _$createIntrinsic("hbr", {}), "b", _$createIntrinsic("hbr", {})];
+      }
+    }), _$createIntrinsic("ifBreak", {
+      groupId: id,
+      children: "c"
+    })]).toRenderTo(`a\nb\nc`);
+  });
+});
+describe("fill", () => {
+  it("fills the group with its children", () => {
+    const items = ["one", "two", "three", "four", "five", "six"];
+    // place a <br /> after every item except the last
+    const filledItems = items.map((item, index) => [item, _$memo(() => _$memo(() => index < items.length - 1)() && _$createIntrinsic("br", {}))]);
+    expect(_$createIntrinsic("fill", {
+      children: filledItems
+    })).toRenderTo(`one two three four\nfive six`, {
+      printWidth: 20
+    });
+  });
+});
+describe("align", () => {
+  it("aligns contents with a number of spaces", () => {
+    expect(["base", _$createIntrinsic("align", {
+      width: 4,
+      get children() {
+        return [_$createIntrinsic("hbr", {}), "hi"];
+      }
+    })]).toRenderTo(`
+        base
+            hi
+      `);
+  });
+  it("aligns contents with a string", () => {
+    expect(["base", _$createIntrinsic("align", {
+      string: "XXXX",
+      get children() {
+        return [_$createIntrinsic("hbr", {}), "hi"];
+      }
+    })]).toRenderTo(`
+        base
+        XXXXhi
+      `);
+  });
+});
+it("all works together", () => {
+  const argCount = 2;
+  const args = Array.from({
+    length: argCount
+  }, (_, i) => `arg${i + 1}`);
+  expect([_$createIntrinsic("group", {
+    get children() {
+      return ["async function foo(", _$createIntrinsic("indent", {
+        get children() {
+          return [_$createIntrinsic("sbr", {}), _$createComponent(For, {
+            each: args,
+            get joiner() {
+              return [",", _$createIntrinsic("br", {})];
+            },
+            children: arg => [arg, ": string"]
+          })];
+        }
+      }), _$createIntrinsic("sbr", {}), ")"];
+    }
+  }), ": void ", "{", _$createIntrinsic("indent", {
+    get children() {
+      return [_$createIntrinsic("hbr", {}), "// function body"];
+    }
+  }), _$createIntrinsic("hbr", {}), "}"]).toRenderTo(`
+    async function foo(arg1: string, arg2: string): void {
+      // function body
+    }
+  `, {
+    printWidth: 80
+  });
+});
+it("formats based on the output component props", () => {
+  const template = _$createComponent(Output, {
+    printWidth: 5,
+    get children() {
+      return _$createComponent(SourceFile, {
+        path: "foo.txt",
+        filetype: "text/plain",
+        get children() {
+          return _$createIntrinsic("group", {
+            get children() {
+              return ["1", _$createIntrinsic("br", {}), "2", _$createIntrinsic("br", {}), "3", _$createIntrinsic("br", {}), "4", _$createIntrinsic("br", {}), "5", _$createIntrinsic("br", {}), "6"];
+            }
+          });
+        }
+      });
+    }
+  });
+  const tree = render(template);
+  expect(tree.contents[0].contents).toEqual(d`
+    1
+    2
+    3
+    4
+    5
+    6
+  `);
+});
+it("formats based on the source file component props", () => {
+  const template = _$createComponent(Output, {
+    get children() {
+      return _$createComponent(SourceFile, {
+        path: "foo.txt",
+        filetype: "text/plain",
+        printWidth: 5,
+        get children() {
+          return _$createIntrinsic("group", {
+            get children() {
+              return ["1", _$createIntrinsic("br", {}), "2", _$createIntrinsic("br", {}), "3", _$createIntrinsic("br", {}), "4", _$createIntrinsic("br", {}), "5", _$createIntrinsic("br", {}), "6"];
+            }
+          });
+        }
+      });
+    }
+  });
+  const tree = render(template);
+  expect(tree.contents[0].contents).toEqual(d`
+    1
+    2
+    3
+    4
+    5
+    6
+  `);
+});

package/dist/test/rendering/indent.test.js

@@ -0,0 +1,90 @@
+import { createComponent as _$createComponent, createIntrinsic as _$createIntrinsic, memo as _$memo } from "@alloy-js/core/jsx-runtime";
+// prettier-ignore
+import { Indent } from "@alloy-js/core";
+import { describe, expect, it } from "vitest";
+import "../../testing/extend-expect.js";
+describe("Indent component", () => {
+  it("indents explicitly indented content on a subsequent line", () => {
+    expect(["one", _$createComponent(Indent, {
+      children: "hi"
+    })]).toRenderTo("one\n  hi");
+  });
+  it("indents explicitly indented content", () => {
+    expect(["one", _$createComponent(Indent, {
+      get children() {
+        return ["hi", _$createIntrinsic("hbr", {}), "bye"];
+      }
+    })]).toRenderTo(`
+      one
+        hi
+        bye
+    `);
+  });
+  it("indents memos", () => {
+    function getValue() {
+      return "hi";
+    }
+    expect(["base", _$createComponent(Indent, {
+      get children() {
+        return getValue();
+      }
+    }), _$createComponent(Indent, {
+      get children() {
+        return [_$memo(() => getValue()), _$createIntrinsic("hbr", {}), "bye"];
+      }
+    }), _$createComponent(Indent, {
+      get children() {
+        return ["bye", _$createIntrinsic("hbr", {}), _$memo(() => getValue())];
+      }
+    })]).toRenderTo(`
+      base
+        hi
+        hi
+        bye
+        bye
+        hi
+    `);
+  });
+  it("doesn't indent components on the same line with explicit indent", () => {
+    function Foo() {
+      return "Foo";
+    }
+    expect(["base", _$createComponent(Indent, {
+      get children() {
+        return [_$createComponent(Foo, {}), _$createComponent(Foo, {})];
+      }
+    })]).toRenderTo(`
+      base
+        FooFoo
+    `);
+  });
+  it("works with nested indents", () => {
+    expect(["base", _$createComponent(Indent, {
+      get children() {
+        return ["1", _$createIntrinsic("hbr", {}), "2", _$createComponent(Indent, {
+          get children() {
+            return ["3", _$createIntrinsic("hbr", {}), "4", _$createComponent(Indent, {
+              get children() {
+                return ["5", _$createIntrinsic("hbr", {}), "6"];
+              }
+            }), _$createIntrinsic("hbr", {}), "7", _$createIntrinsic("hbr", {}), "8"];
+          }
+        }), _$createIntrinsic("hbr", {}), "9", _$createIntrinsic("hbr", {}), "10"];
+      }
+    }), _$createIntrinsic("hbr", {}), "11", _$createIntrinsic("hbr", {}), "12"]).toRenderTo(`
+      base
+        1
+        2
+          3
+          4
+            5
+            6
+          7
+          8
+        9
+        10
+      11
+      12
+    `);
+  });
+});

package/dist/test/rendering/memoization.test.js

@@ -0,0 +1,25 @@
+import { memo, createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { renderTree } from "../../src/render.js";
+it("memoizes child components", () => {
+  let renderCount = 0;
+  function Child() {
+    renderCount++;
+    return "hi " + String(Math.random());
+  }
+  const doThing = ref();
+  const child1 = _$createComponent(Child, {});
+  const child2 = _$createComponent(Child, {});
+  const items = memo(() => {
+    const list = [child1];
+    if (doThing.value) {
+      list.push(child2);
+    }
+    return list;
+  });
+  const template = [items];
+  renderTree(template);
+  doThing.value = true;
+  expect(renderCount).toBe(2);
+});

package/dist/test/rendering/refkeys.test.js

@@ -0,0 +1,32 @@
+import { createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import { refkey } from "@alloy-js/core";
+import { SourceFile } from "@alloy-js/core/stc";
+import { expect, it } from "vitest";
+import "../../testing/extend-expect.js";
+it("is rendered properly in the tree", () => {
+  const key = refkey("foo");
+  function Reference(props) {
+    expect(props.refkey).toEqual(key);
+    return "Reference";
+  }
+  expect(_$createComponent(SourceFile, {
+    filetype: "typescript",
+    path: "foo.ts",
+    reference: Reference,
+    children: key
+  })).toRenderTo("Reference");
+});
+it("is rendered properly in the tree with code", () => {
+  const key = refkey("foo");
+  function Reference(props) {
+    expect(props.refkey).toEqual(key);
+    return "Reference";
+  }
+  expect(SourceFile({
+    filetype: "typescript",
+    path: "foo.ts",
+    reference: Reference
+  }).code`
+      ${key} 
+    `).toRenderTo("Reference");
+});

package/dist/test/split-props.test.js

@@ -0,0 +1,77 @@
+import { effect, reactive } from "@vue/reactivity";
+import { expect, it, vi } from "vitest";
+import { splitProps } from "../src/jsx-runtime.js";
+it("splits regular object props", () => {
+  const props = {
+    a: 1,
+    b: 2,
+    c: 3
+  };
+  const [ab, rest] = splitProps(props, ["a", "b"]);
+  expect(ab).toEqual({
+    a: 1,
+    b: 2
+  });
+  expect(rest).toEqual({
+    c: 3
+  });
+});
+it("splits props with getters without invoking them", () => {
+  const getterA = vi.fn(() => 1);
+  const getterB = vi.fn(() => 2);
+  const props = {
+    get a() {
+      return getterA();
+    },
+    get b() {
+      return getterB();
+    },
+    c: 3
+  };
+  const [ab, rest] = splitProps(props, ["a", "b"]);
+  expect(getterA).not.toHaveBeenCalled();
+  expect(getterB).not.toHaveBeenCalled();
+  expect(ab.a).toBe(1);
+  expect(getterA).toHaveBeenCalledTimes(1);
+  expect(ab.b).toBe(2);
+  expect(getterB).toHaveBeenCalledTimes(1);
+  expect(rest).toEqual({
+    c: 3
+  });
+});
+it("splits reactive props without observing them initially", () => {
+  const props = reactive({
+    a: 1,
+    b: 2,
+    c: 3
+  });
+  const [ab, rest] = splitProps(props, ["a", "b"]);
+  expect(ab.a).toBe(1);
+  expect(ab.b).toBe(2);
+  expect(rest.c).toBe(3);
+});
+it("ensures effect is not triggered by splitProps but by accessing reactive props", () => {
+  const props = reactive({
+    a: 1,
+    b: 2,
+    c: 3
+  });
+  let splits;
+  const splitEffect = vi.fn(() => {
+    splits = splitProps(props, ["a", "b"]);
+  });
+  effect(splitEffect);
+  expect(splitEffect).toHaveBeenCalledTimes(1);
+  const observeEffect = vi.fn(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    splits[0].a;
+  });
+  effect(observeEffect);
+  expect(observeEffect).toHaveBeenCalledTimes(1);
+  props.a = 2;
+  expect(splitEffect).toHaveBeenCalledTimes(1);
+  expect(observeEffect).toHaveBeenCalledTimes(2);
+  splits[0].a = 3;
+  expect(splitEffect).toHaveBeenCalledTimes(1);
+  expect(observeEffect).toHaveBeenCalledTimes(3);
+});

package/dist/test/stc.test.js

@@ -0,0 +1,34 @@
+import { stc } from "@alloy-js/core";
+import { hbr, indent, Indent } from "@alloy-js/core/stc";
+import { describe, expect, it } from "vitest";
+import "../testing/extend-expect.js";
+it("is applied by output", () => {
+  function Foo() {
+    return "Foo component";
+  }
+  const FooStc = stc(Foo);
+  expect([FooStc(), Indent().code`
+      child!
+      child2!
+    `]).toRenderTo(`
+    Foo component
+      child!
+      child2!
+  `);
+});
+describe("works with formatting", () => {
+  it("handles lines", () => {
+    expect(["foo", hbr(), "bar", hbr(), "baz"]).toRenderTo(`
+      foo
+      bar
+      baz
+    `);
+  });
+  it("handles indents", () => {
+    expect(["foo", indent().children([hbr(), "bar", hbr(), "baz"])]).toRenderTo(`
+      foo
+        bar
+        baz
+    `);
+  });
+});