@alloy-js/core 0.5.0 → 0.6.0

package/test/control-flow/match.test.tsx

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

package/test/control-flow/show.test.tsx

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

package/test/name-policy.test.tsx

@@ -11,9 +11,9 @@ it("is applied by output", () => {
     const namer = useNamePolicy();
     return namer!.getName("hi", "name");
   }
-  expect(<Output namePolicy={policy}>
-    <Foo />
-  </Output>).toRenderTo(
-    "namehi",
-  );
+  expect(
+    <Output namePolicy={policy}>
+      <Foo />
+    </Output>,
+  ).toRenderTo("namehi");
 });

package/test/reactivity/cleanup.test.tsx

@@ -0,0 +1,91 @@
+import { Children, effect, memo, onCleanup } 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<unknown>(<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: { children: Children }) {
+      onCleanup(() => {
+        cleanedUpC1 = true;
+      });
+      return props.children;
+    }
+
+    function C2() {
+      onCleanup(() => {
+        cleanedUpC2 = true;
+      });
+    }
+    const el = ref<unknown>(
+      <C1>
+        <C2></C2>
+      </C1>,
+    );
+    const template = <>{el}</>;
+    renderTree(template);
+    el.value = "";
+    expect(cleanedUpC1).toBe(true);
+    expect(cleanedUpC2).toBe(true);
+  });
+});

package/test/reactivity/memo.test.tsx

@@ -0,0 +1,17 @@
+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/test/reactivity/ref-rendering.test.tsx

@@ -1,13 +1,10 @@
-import { code, memo, renderTree } from "@alloy-js/core";
+import { code, memo, printTree, renderTree } from "@alloy-js/core";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
-import { printTree } from "../../testing/render.js";
 
 it("handles refs in the tree", () => {
   const r = ref(42);
-  const tree = renderTree(<>
-    The number is {r}
-  </>);
+  const tree = renderTree(<>The number is {r}</>);
 
   expect(printTree(tree)).toBe("The number is 42");
   r.value = 12;
@@ -28,9 +25,7 @@ it("handles refs in the tree with code", () => {
 it("handles memos in the tree", () => {
   const r = ref(42);
   const m = memo(() => r.value + 10);
-  const tree = renderTree(<>
-    The number is {m}
-  </>);
+  const tree = renderTree(<>The number is {m}</>);
 
   expect(printTree(tree)).toBe("The number is 52");
   r.value = 12;

package/test/reactivity/test.test.tsx

@@ -1,8 +1,8 @@
-import { memo, renderTree } from "@alloy-js/core";
+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, printTree } from "../../testing/render.js";
+import { d } from "../../testing/render.js";
 
 it("splices in new nodes", () => {
   const r = ref(["one"]);
@@ -38,10 +38,11 @@ it("works with a complex case", () => {
 
   function ImportStatements(props: ImportStatementsProps) {
     return memo(() =>
-      mapJoin(props.records, (
-        path,
-        types,
-      ) => <ImportStatement path={path} types={types} />));
+      mapJoin(
+        () => props.records,
+        (path, types) => <ImportStatement path={path} types={types} />,
+      ),
+    );
   }
 
   interface ImportStatementProps {

package/test/reactivity/untrack.test.ts

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

package/test/rendering/basic.test.tsx

@@ -2,24 +2,15 @@ import { describe, expect, it } from "vitest";
 import { Children } from "../../src/jsx-runtime.js";
 import "../../testing/extend-expect.js";
 describe("string nodes", () => {
-  it("renders string nodes", () => {
-    expect(<>
-      a
-      b
-        c
-    </>).toRenderTo(`
-      a
-      b
-        c
-    `);
-  });
-
   it("renders string nodes with substitutions", () => {
     const str = "hi";
-    expect(<>
-      a {str}
-      {str}
-    </>).toRenderTo(`
+    expect(
+      <>
+        a {str}
+        <hbr />
+        {str}
+      </>,
+    ).toRenderTo(`
       a hi
       hi
     `);
@@ -52,21 +43,11 @@ describe("component nodes", () => {
   });
 
   it("renders components on same line", () => {
-    expect(<>
-      <Str /> <Str />
-    </>).toRenderTo("Str Str");
-  });
-
-  it("renders components on multiple lines", () => {
-    expect(<>
-      <Str /> <Str />
-      <Arr /> <Arr />
-    </>).toRenderTo(`
-    Str Str
-    Item 1
-    Item 2 Item 1
-    Item 2
-    `);
+    expect(
+      <>
+        <Str /> <Str />
+      </>,
+    ).toRenderTo("Str Str");
   });
 });
 
@@ -85,21 +66,15 @@ describe("memo nodes", () => {
   }
 
   it("renders basic memos", () => {
-    expect(<>
-      {getStr()}
-    </>).toRenderTo("Str");
+    expect(<>{getStr()}</>).toRenderTo("Str");
   });
 
   it("renders component memos", () => {
-    expect(<>
-      {getFoo()}
-    </>).toRenderTo("Foo");
+    expect(<>{getFoo()}</>).toRenderTo("Foo");
   });
 
   it("renders array memos", () => {
-    expect(<>
-      {getArr()}
-    </>).toRenderTo("Foo\nFoo");
+    expect(<>{getArr()}</>).toRenderTo("Foo\nFoo");
   });
 });
 
@@ -114,10 +89,13 @@ it("renders text fragments", () => {
     return "bye";
   }
 
-  expect(<>
+  expect(
+    <>
       hi
+      <hbr />
       <Foo />
-    </>).toRenderTo(`
+    </>,
+  ).toRenderTo(`
     hi
     bye
   `);
@@ -148,9 +126,9 @@ it("keeps spaces between expressions", () => {
   function getStr() {
     return "getStr";
   }
-  expect(<>
-    a {str} {str} {getStr()} {getStr()} c
-  </>).toRenderTo(
-    "a str str getStr getStr c",
-  );
+  expect(
+    <>
+      a {str} {str} {getStr()} {getStr()} c
+    </>,
+  ).toRenderTo("a str str getStr getStr c");
 });

package/test/rendering/code.test.tsx

@@ -17,7 +17,7 @@ it("renders allows substitutions of elements", () => {
     return "hi";
   }
   expect(code`
-    foo ${<Foo />} bar
+    foo ${(<Foo />)} bar
   `).toRenderTo("foo hi bar");
 });
 
@@ -31,7 +31,7 @@ it("renders has auto-indentation", () => {
 
   const template = code`
     if (x === 1) {
-      ${<Foo />}
+      ${(<Foo />)}
     }
   `;
 
@@ -55,7 +55,7 @@ it("handles blank lines", () => {
   expect(template).toRenderTo(`
     {
       a
-      
+    
       x
     }
   `);