@alloy-js/core 0.22.0-dev.1 → 0.22.0-dev.4

package/test/components/list.test.tsx

@@ -1,5 +1,12 @@
 import { expect, it } from "vitest";
-import { List, printTree, ref, renderTree } from "../../src/index.js";
+import {
+  createContentSlot,
+  List,
+  printTree,
+  ref,
+  renderTree,
+  Show,
+} from "../../src/index.js";
 import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 
@@ -88,3 +95,71 @@ it("is useful for statements", () => {
 
   `);
 });
+
+it("doesn't add joiners when items are empty", () => {
+  expect(
+    <group>
+      <List comma line>
+        <></>
+        <></>
+        <></>
+      </List>
+    </group>,
+  ).toRenderTo(``);
+});
+
+it("It add joiners when items are become non-empty", () => {
+  const item1 = ref("");
+  const item2 = ref("");
+  const item3 = ref("");
+
+  const tree = renderTree(
+    <group>
+      <List comma line ender=";">
+        <>{item1}</>
+        <>{item2}</>
+        <>{item3}</>
+      </List>
+    </group>,
+  );
+
+  expect(printTree(tree)).toBe(``);
+  item1.value = "hi";
+  expect(printTree(tree)).toBe(`hi;`);
+  item2.value = "there";
+  expect(printTree(tree)).toBe(`hi, there;`);
+  item3.value = "friend";
+  expect(printTree(tree)).toBe(`hi, there, friend;`);
+
+  item1.value = "";
+  expect(printTree(tree)).toBe(`there, friend;`);
+  item3.value = "";
+  expect(printTree(tree)).toBe(`there;`);
+  item2.value = "";
+  expect(printTree(tree)).toBe(``);
+});
+
+it("works with show", () => {
+  const ContentSlot = createContentSlot();
+  const showFirst = ref(false);
+  const showSecond = ref(false);
+  const tree = renderTree(
+    <>
+      <ContentSlot.WhenEmpty>Empty list!</ContentSlot.WhenEmpty>
+      <ContentSlot>
+        <List comma space>
+          <Show when={showFirst.value}>One</Show>
+          <Show when={showSecond.value}>Two</Show>
+        </List>
+      </ContentSlot>
+    </>,
+  );
+  expect(printTree(tree)).toBe(`Empty list!`);
+  showFirst.value = true;
+  expect(printTree(tree)).toBe(`One`);
+  showSecond.value = true;
+  expect(printTree(tree)).toBe(`One, Two`);
+  showFirst.value = false;
+  showSecond.value = false;
+  expect(printTree(tree)).toBe(`Empty list!`);
+});

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

@@ -2,7 +2,13 @@ import "@alloy-js/core/testing";
 import { d } from "@alloy-js/core/testing";
 import { describe, expect, it } from "vitest";
 import { For } from "../../src/components/For.jsx";
-import { onCleanup, printTree, reactive, renderTree } from "../../src/index.js";
+import {
+  onCleanup,
+  printTree,
+  reactive,
+  ref,
+  renderTree,
+} from "../../src/index.js";
 import { flushJobs } from "../../src/scheduler.js";
 
 it("works", () => {
@@ -154,7 +160,13 @@ it("doesn't rerender mappers with maps", () => {
 it("doesn't rerender mappers (with splice)", () => {
   const messages = reactive(["hi", "maybe", "bye"]);
   let count = 0;
-  const template = <For each={messages}>{(msg) => <>item {count++}</>}</For>;
+  const template = (
+    <For each={messages}>
+      {(msg) => {
+        return <>item {count++}</>;
+      }}
+    </For>
+  );
   const tree = renderTree(template);
   expect(count).toBe(3);
   messages.splice(1, 1);
@@ -239,3 +251,32 @@ it("cleans up things which end up removed (with splice)", () => {
     Letter c
   `);
 });
+
+it("doesn't render empty content", () => {
+  const items = [1, 2, 3];
+  const tree = renderTree(
+    <For each={items}>{(item) => (item > 2 ? item : null)}</For>,
+  );
+  expect(printTree(tree)).toBe(`3`);
+});
+
+it("updates joiners appropriately when items get/lose content", () => {
+  const items = [
+    { content: ref("") },
+    { content: ref("") },
+    { content: ref("hello") },
+  ];
+
+  const tree = renderTree(
+    <For each={items} joiner=", ">
+      {(item) => {
+        return item.content;
+      }}
+    </For>,
+  );
+
+  expect(printTree(tree)).toBe(`hello`);
+  items[1].content.value = "hi";
+  flushJobs();
+  expect(printTree(tree)).toBe(`hi, hello`);
+});