@alloy-js/core 0.10.0 → 0.12.0

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
+    }
+  `);
+});

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,27 @@
+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";
+import { flushJobs } from "../../src/scheduler.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;
+  flushJobs();
+  expect(renderCount).toBe(2);
+});