@alloy-js/core 0.4.0 → 0.6.0

package/test/rendering/indent.test.tsx

@@ -4,17 +4,13 @@ import { describe, expect, it } from "vitest";
 import "../../testing/extend-expect.js";
 
 describe("Indent component", () => {
-  it("indents explicitly indented content on a single line", () => {
-    expect(<>
-      one<Indent>hi</Indent>
-    </>).toRenderTo("onehi");
-  });
-
   it("indents explicitly indented content on a subsequent line", () => {
-    expect(<>
-      one
-      <Indent>hi</Indent>
-    </>).toRenderTo("one\n  hi");
+    expect(
+      <>
+        one
+        <Indent>hi</Indent>
+      </>,
+    ).toRenderTo("one\n  hi");
   });
 
   it("indents explicitly indented content", () => {
@@ -23,6 +19,7 @@ describe("Indent component", () => {
         one
         <Indent>
           hi
+          <hbr />
           bye
         </Indent>
       </>,
@@ -40,19 +37,19 @@ describe("Indent component", () => {
 
     expect(
       <>
-      base
-      <Indent>
-        {getValue()}
-      </Indent>
-      <Indent>
-        {getValue()}
-        bye
-      </Indent>
-      <Indent>
-        bye
-        {getValue()}
-      </Indent>
-    </>,
+        base
+        <Indent>{getValue()}</Indent>
+        <Indent>
+          {getValue()}
+          <hbr />
+          bye
+        </Indent>
+        <Indent>
+          bye
+          <hbr />
+          {getValue()}
+        </Indent>
+      </>,
     ).toRenderTo(`
       base
         hi
@@ -70,11 +67,12 @@ describe("Indent component", () => {
 
     expect(
       <>
-      base
-      <Indent>
-        <Foo /><Foo />
-      </Indent>
-    </>,
+        base
+        <Indent>
+          <Foo />
+          <Foo />
+        </Indent>
+      </>,
     ).toRenderTo(`
       base
         FooFoo
@@ -84,26 +82,26 @@ describe("Indent component", () => {
   it("works with nested indents", () => {
     expect(
       <>
-      base
-      <Indent>
-        1
-        2
+        base
         <Indent>
-          3
-          4
+          1<hbr />2
           <Indent>
-            5
-            6
+            3<hbr />4
+            <Indent>
+              5<hbr />6
+            </Indent>
+            <hbr />
+            7<hbr />8
           </Indent>
-          7
-          8
+          <hbr />
+          9<hbr />
+          10
         </Indent>
-        9
-        10
-      </Indent>
-      11
-      12
-    </>,
+        <hbr />
+        11
+        <hbr />
+        12
+      </>,
     ).toRenderTo(`
       base
         1
@@ -121,488 +119,3 @@ describe("Indent component", () => {
     `);
   });
 });
-
-describe("implicit indenting", () => {
-  it("indents implicitly indented components", () => {
-    function Foo() {
-      return <>
-        hi
-        bye
-      </>;
-    }
-
-    expect(<>
-        one
-          <Foo />
-      </>).toRenderTo(`
-      one
-        hi
-        bye
-    `);
-  });
-
-  it("indents memo substitutions with line breaks properly", () => {
-    function getStr() {
-      return "a\nb";
-    }
-    expect(<>
-      base
-        {getStr()}
-    </>).toRenderTo(`
-      base
-        a
-        b
-    `);
-  });
-
-  it("indents multiple implicitly indented components", () => {
-    function Foo() {
-      return <>
-        hi
-        bye
-      </>;
-    }
-
-    expect(
-      <>
-        one
-          <Foo />
-          <Foo />
-        
-        two
-          <Foo />
-          <Foo />
-      </>,
-    ).toRenderTo(`
-      one
-        hi
-        bye
-        hi
-        bye
-
-      two
-        hi
-        bye
-        hi
-        bye
-    `);
-  });
-
-  it("implictly indents memos", () => {
-    function Foo() {
-      return "Foo";
-    }
-    const hi = "const hi";
-    function getHi() {
-      return "getHi";
-    }
-
-    expect(
-      <>
-      base
-        {getHi()}
-      base {hi}
-        {getHi()}
-      base {getHi()}
-        {getHi()}
-      base <Foo />
-        {getHi()}
-    </>,
-    ).toRenderTo(`
-      base
-        getHi
-      base const hi
-        getHi
-      base getHi
-        getHi
-      base Foo
-        getHi
-    `);
-  });
-
-  it("implictly indents consts", () => {
-    function Foo() {
-      return "Foo";
-    }
-    const hi = "const hi";
-    function getHi() {
-      return "getHi";
-    }
-
-    function ArrComponent() {
-      return [<Foo />, <Foo />];
-    }
-
-    const arr = [<Foo />, <Foo />];
-
-    expect(
-      <>
-      base
-        {hi}
-      base {hi}
-        {hi}
-      base {getHi()}
-        {hi}
-      base <Foo />
-        {hi}
-      base <ArrComponent />
-        {hi}
-      base {arr}
-        {hi}
-    </>,
-    ).toRenderTo(`
-      base
-        const hi
-      base const hi
-        const hi
-      base getHi
-        const hi
-      base Foo
-        const hi
-      base FooFoo
-        const hi
-      base FooFoo
-        const hi
-    `);
-  });
-
-  it("indents children", () => {
-    function Foo(props: any) {
-      return <>
-        a
-        {props.children}
-        b
-      </>;
-    }
-
-    function getChild() {
-      return "hi";
-    }
-    expect(
-      <>
-      base
-        <Foo>
-          child
-          {getChild()}
-        </Foo>
-      </>,
-    ).toRenderTo(`
-    base
-      a
-      child
-      hi
-      b
-    `);
-  });
-
-  it("implicity indents within children", () => {
-    function Foo(props: any) {
-      return <>
-        a
-        {props.children}
-        b
-      </>;
-    }
-
-    function getChild() {
-      return "hi";
-    }
-    expect(
-      <>
-      base
-        <Foo>
-          child
-            {getChild()}
-        </Foo>
-      </>,
-    ).toRenderTo(`
-      base
-        a
-        child
-          hi
-        b
-    `);
-  });
-
-  it("doesn't indent things on the same line", () => {
-    const str = "str";
-    function getStr() {
-      return "getstr";
-    }
-    function Foo() {
-      return "Foo";
-    }
-    expect(
-      <>
-      base
-      {str} {getStr()}
-      item <Foo /> <Foo />
-        {str} {getStr()}
-        item <Foo /> <Foo />
-      </>,
-    ).toRenderTo(`
-      base
-      str getstr
-      item Foo Foo
-        str getstr
-        item Foo Foo
-    `);
-  });
-});
-
-describe("array handling", () => {
-  it("handles a simple array", () => {
-    const simpleArray = [<>hi</>];
-    expect(<>
-      a
-      {simpleArray}
-      b
-    </>).toRenderTo(`
-      a
-      hi
-      b
-    `);
-  });
-
-  it("handles indented simple array", () => {
-    const simpleArray = [<>hi</>];
-    expect(<>
-      a
-        {simpleArray}
-      b
-    </>).toRenderTo(`
-      a
-        hi
-      b
-    `);
-  });
-
-  it("handles indented simple array with line breaks", () => {
-    const val = "hi";
-    function getHi() {
-      return "getHi";
-    }
-    const arr = [<>{val}</>, "\n", <>{getHi()}</>];
-    expect(<>
-      a
-        {arr}
-      b
-    </>).toRenderTo(`
-      a
-        hi
-        getHi
-      b
-    `);
-  });
-
-  it("handles indented component array", () => {
-    function Foo() {
-      return "Foo";
-    }
-    const arr = [<Foo />, <Foo />];
-    expect(<>
-      a
-        {arr}
-      b
-    </>).toRenderTo(`
-      a
-        FooFoo
-      b
-    `);
-  });
-
-  it("handles indented component array with line breaks", () => {
-    function Foo() {
-      return "Foo";
-    }
-    const arr = [<Foo />, "\n", <Foo />];
-    expect(<>
-      a
-        {arr}
-      b
-    </>).toRenderTo(`
-      a
-        Foo
-        Foo
-      b
-    `);
-  });
-
-  it("indents arrays of components (map scenario)", () => {
-    function Foo() {
-      return <>
-        a
-        b
-      </>;
-    }
-
-    function Bar() {
-      return <>
-        c
-        d
-      </>;
-    }
-
-    const foos = [<Foo />, "\n", <Bar />];
-
-    expect(<>
-      base
-        {foos}
-    </>).toRenderTo(`
-      base
-        a
-        b
-        c
-        d
-    `);
-  });
-
-  it("handles arrays of components with children", () => {
-    function Foo(props: any) {
-      return <>
-        hi
-        {props.children}
-          {props.children}
-      </>;
-    }
-
-    const arr = [
-      <Foo>
-        a
-        b
-      </Foo>,
-      "\n",
-      <Foo>
-        c
-        d
-      </Foo>,
-    ];
-
-    expect(<>
-      base
-      {arr}
-        {arr}
-    </>).toRenderTo(`
-      base
-      hi
-      a
-      b
-        a
-        b
-      hi
-      c
-      d
-        c
-        d
-        hi
-        a
-        b
-          a
-          b
-        hi
-        c
-        d
-          c
-          d
-    `);
-  });
-});
-
-it("doesn't indent things on the same line simple", () => {
-  const str = "str";
-  function getStr() {
-    return "getstr";
-  }
-  function Foo() {
-    return "Foo";
-  }
-  const array = [<>{getStr()} {getStr()}</>];
-  expect(
-    <>
-    base
-    <Indent>
-      {str} {getStr()}
-      {array}
-      <Foo /> {str} {getStr()}
-    </Indent>
-  </>,
-  ).toRenderTo(`
-      base
-        str getstr
-        getstr getstr
-        Foo str getstr
-  `);
-});
-
-describe("Children rendering", () => {
-  it("handles children via props.children", () => {
-    function Foo(props: any) {
-      return <>
-        a
-        {props.children}
-        d
-      </>;
-    }
-
-    expect(<>
-      base
-      <Foo>
-        b
-        c
-      </Foo>
-    </>)
-      .toRenderTo(`
-      base
-      a
-      b
-      c
-      d
-    `);
-  });
-
-  it("handles children via destructured children", () => {
-    function Foo({ children }: any) {
-      return <>
-        a
-        {children}
-        d
-      </>;
-    }
-
-    expect(<>
-      base
-      <Foo>
-        b
-        c
-      </Foo>
-    </>)
-      .toRenderTo(`
-      base
-      a
-      b
-      c
-      d
-    `);
-  });
-
-  it("handles children via returning children", () => {
-    function Foo({ children }: any) {
-      return children;
-    }
-
-    expect(<>
-      base
-      <Foo>
-        b
-        c
-      </Foo>
-    </>)
-      .toRenderTo(`
-      base
-      b
-      c
-    `);
-  });
-
-  it("can place children on a single line", () => {});
-});

package/test/rendering/memoization.test.tsx

@@ -0,0 +1,30 @@
+import { memo } 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 = <Child />;
+  const child2 = <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/test/split-props.test.ts

@@ -0,0 +1,87 @@
+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: any;
+  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);
+});