@luna_ui/luna 0.11.0 → 0.20.0

package/tests/integration.test.ts

@@ -1,405 +0,0 @@
-/**
- * Integration tests for nested components, ForEach, and provide
- * These tests document current Luna API behavior and highlight differences from SolidJS
- */
-import { describe, test, expect, beforeEach } from "vitest";
-import {
-  // Signal API (SolidJS-style)
-  createSignal,
-  createEffect,
-  createRoot,
-  // Context API
-  createContext,
-  provide,
-  useContext,
-  // DOM API
-  createElement,
-  text,
-  render,
-  mount,
-  forEach,
-  show,
-} from "../src/index";
-
-// MoonBit AttrValue constructors
-const AttrValue = {
-  Static: (value: string) => ({ $tag: 0, _0: value }),
-  Dynamic: (getter: () => string) => ({ $tag: 1, _0: getter }),
-};
-
-function attr(name: string, value: unknown) {
-  return { _0: name, _1: value };
-}
-
-describe("Integration: Nested Components with Context", () => {
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  describe("Context across component boundaries", () => {
-    test("context flows through nested function components", () => {
-      const themeCtx = createContext("light");
-      const values: string[] = [];
-
-      // Simulate nested component structure
-      const GrandChild = () => {
-        values.push(`grandchild: ${useContext(themeCtx)}`);
-        return text(useContext(themeCtx));
-      };
-
-      const Child = () => {
-        values.push(`child: ${useContext(themeCtx)}`);
-        return createElement("span", [], [GrandChild()]);
-      };
-
-      const Parent = () => {
-        values.push(`parent: ${useContext(themeCtx)}`);
-        return createElement("div", [], [Child()]);
-      };
-
-      // Provide dark theme at root
-      provide(themeCtx, "dark", () => {
-        render(container, Parent());
-      });
-
-      expect(values).toEqual([
-        "parent: dark",
-        "child: dark",
-        "grandchild: dark",
-      ]);
-      expect(container.textContent).toBe("dark");
-    });
-
-    test("nested provide overrides parent context", () => {
-      const themeCtx = createContext("light");
-      const values: string[] = [];
-
-      const Inner = () => {
-        values.push(useContext(themeCtx));
-        return text(useContext(themeCtx));
-      };
-
-      const Middle = () => {
-        // Override context for children
-        return provide(themeCtx, "blue", () => {
-          values.push(`middle sees: ${useContext(themeCtx)}`);
-          return createElement("div", [], [Inner()]);
-        });
-      };
-
-      const Outer = () => {
-        values.push(`outer sees: ${useContext(themeCtx)}`);
-        return createElement("div", [], [Middle()]);
-      };
-
-      provide(themeCtx, "dark", () => {
-        render(container, Outer());
-      });
-
-      expect(values).toEqual([
-        "outer sees: dark",
-        "middle sees: blue",
-        "blue",
-      ]);
-    });
-
-    test("multiple contexts work independently", () => {
-      const themeCtx = createContext("light");
-      const langCtx = createContext("en");
-      const sizeCtx = createContext("medium");
-
-      let capturedTheme: string;
-      let capturedLang: string;
-      let capturedSize: string;
-
-      const DeepComponent = () => {
-        capturedTheme = useContext(themeCtx);
-        capturedLang = useContext(langCtx);
-        capturedSize = useContext(sizeCtx);
-        return text("deep");
-      };
-
-      provide(themeCtx, "dark", () => {
-        provide(langCtx, "ja", () => {
-          // sizeCtx not provided, should use default
-          render(container, DeepComponent());
-        });
-      });
-
-      expect(capturedTheme!).toBe("dark");
-      expect(capturedLang!).toBe("ja");
-      expect(capturedSize!).toBe("medium"); // default
-    });
-  });
-
-  describe("ForEach with reactive updates", () => {
-    test("forEach renders initial list", () => {
-      const [items] = createSignal(["a", "b", "c"]);
-
-      const List = () =>
-        createElement(
-          "ul",
-          [],
-          [
-            forEach(items, (item, index) =>
-              createElement(
-                "li",
-                [attr("data-index", AttrValue.Static(String(index)))],
-                [text(item)]
-              )
-            ),
-          ]
-        );
-
-      render(container, List());
-
-      const lis = container.querySelectorAll("li");
-      expect(lis.length).toBe(3);
-      expect(lis[0].textContent).toBe("a");
-      expect(lis[1].textContent).toBe("b");
-      expect(lis[2].textContent).toBe("c");
-    });
-
-    test("forEach updates when signal changes", () => {
-      const [items, setItems] = createSignal(["x", "y"]);
-
-      createRoot((dispose) => {
-        const List = () =>
-          createElement("ul", [], [
-            forEach(items, (item) => createElement("li", [], [text(item)])),
-          ]);
-
-        render(container, List());
-
-        expect(container.querySelectorAll("li").length).toBe(2);
-
-        // Update the list
-        setItems(["x", "y", "z"]);
-
-        expect(container.querySelectorAll("li").length).toBe(3);
-        expect(container.querySelectorAll("li")[2].textContent).toBe("z");
-
-        dispose();
-      });
-    });
-
-    test("forEach with object items", () => {
-      interface User {
-        id: number;
-        name: string;
-      }
-
-      const [users] = createSignal<User[]>([
-        { id: 1, name: "Alice" },
-        { id: 2, name: "Bob" },
-      ]);
-
-      createRoot((dispose) => {
-        const UserList = () =>
-          createElement("div", [], [
-            forEach(users, (user) =>
-              createElement(
-                "div",
-                [attr("data-id", AttrValue.Static(String(user.id)))],
-                [text(user.name)]
-              )
-            ),
-          ]);
-
-        render(container, UserList());
-
-        const divs = container.querySelectorAll("[data-id]");
-        expect(divs.length).toBe(2);
-        expect(divs[0].textContent).toBe("Alice");
-        expect(divs[1].textContent).toBe("Bob");
-
-        dispose();
-      });
-    });
-  });
-
-  describe("Context + ForEach integration", () => {
-    test("forEach items can access context", () => {
-      const prefixCtx = createContext("");
-      const [items] = createSignal(["one", "two", "three"]);
-      const renderedTexts: string[] = [];
-
-      const ItemComponent = (item: string) => {
-        const prefix = useContext(prefixCtx);
-        const fullText = `${prefix}${item}`;
-        renderedTexts.push(fullText);
-        return createElement("span", [], [text(fullText)]);
-      };
-
-      provide(prefixCtx, "item-", () => {
-        const List = () =>
-          createElement("div", [], [
-            forEach(items, (item) => ItemComponent(item)),
-          ]);
-
-        render(container, List());
-      });
-
-      expect(renderedTexts).toEqual(["item-one", "item-two", "item-three"]);
-    });
-  });
-
-  describe("Show (conditional rendering)", () => {
-    // NOTE: show() has a known limitation - it doesn't render initially when true
-    // because the effect runs before the placeholder is in the DOM.
-    // This is a design difference from SolidJS's <Show> component.
-
-    test("show hides when condition is false", () => {
-      const [visible] = createSignal(false);
-
-      const node = show(visible, () =>
-        createElement("span", [], [text("visible")])
-      );
-
-      mount(container, node);
-
-      // When false, show renders a placeholder (comment node)
-      expect(container.querySelector("span")).toBeNull();
-    });
-
-    test("show toggles from false to true", () => {
-      // Start with false, then toggle to true
-      const [visible, setVisible] = createSignal(false);
-
-      const node = show(visible, () =>
-        createElement("span", [], [text("content")])
-      );
-
-      mount(container, node);
-
-      expect(container.querySelector("span")).toBeNull();
-
-      // Toggle to true - this should work because placeholder is now in DOM
-      setVisible(true);
-      expect(container.querySelector("span")).not.toBeNull();
-
-      // Toggle back to false
-      setVisible(false);
-      expect(container.querySelector("span")).toBeNull();
-    });
-
-    test("show renders when initial condition is true", () => {
-      const [visible] = createSignal(true);
-
-      const node = show(visible, () =>
-        createElement("span", [], [text("visible")])
-      );
-
-      mount(container, node);
-
-      expect(container.querySelector("span")).not.toBeNull();
-    });
-  });
-
-  describe("Complex nested scenario", () => {
-    /**
-     * Luna's provide() is now Owner-based (component-tree-scoped).
-     *
-     * Context values are associated with Owners (reactive scopes).
-     * When show() or forEach() render later, they inherit context from
-     * the Owner that was active when they were created.
-     *
-     * This matches SolidJS's <Provider> behavior.
-     */
-
-    test("show and forEach inherit context from Owner (fixed)", () => {
-      const themeCtx = createContext("light"); // default is "light"
-      const [showList, setShowList] = createSignal(false);
-      const [items, setItems] = createSignal(["A", "B"]);
-
-      const ListItem = (item: string) => {
-        const theme = useContext(themeCtx);
-        return createElement(
-          "li",
-          [attr("class", AttrValue.Static(`item-${theme}`))],
-          [text(item)]
-        );
-      };
-
-      // Context is Owner-based: show/forEach must be created inside provide scope
-      // to capture the Owner with the context value
-      provide(themeCtx, "dark", () => {
-        const listNode = show(showList, () =>
-          createElement("ul", [], [forEach(items, (item) => ListItem(item))])
-        );
-        mount(container, listNode);
-      });
-
-      // Initially hidden
-      expect(container.querySelector("ul")).toBeNull();
-
-      // Toggle to visible - context should be "dark" (inherited from Owner)
-      setShowList(true);
-      let lis = container.querySelectorAll("li");
-      expect(lis.length).toBe(2);
-      // Context is "dark" because Owner-based context persists
-      expect(lis[0].className).toBe("item-dark");
-
-      // Toggle visibility
-      setShowList(false);
-      expect(container.querySelector("ul")).toBeNull();
-
-      setShowList(true);
-      lis = container.querySelectorAll("li");
-      expect(lis.length).toBe(2);
-      // Still "dark" after re-render
-      expect(lis[0].className).toBe("item-dark");
-
-      // Update items - new items should also get "dark" context
-      setItems(["A", "B", "C"]);
-      lis = container.querySelectorAll("li");
-      expect(lis.length).toBe(3);
-      expect(lis[2].className).toBe("item-dark");
-    });
-
-    test("context works with immediate rendering (non-deferred)", () => {
-      const themeCtx = createContext("light");
-
-      // Context works when rendering is synchronous
-      provide(themeCtx, "dark", () => {
-        const theme = useContext(themeCtx);
-        const node = createElement(
-          "div",
-          [attr("class", AttrValue.Static(`theme-${theme}`))],
-          [text(theme)]
-        );
-        mount(container, node);
-      });
-
-      const div = container.querySelector("div");
-      expect(div?.className).toBe("theme-dark");
-      expect(div?.textContent).toBe("dark");
-    });
-
-    test("forEach renders correctly without show (initial items)", () => {
-      // This test shows that forEach initial render works,
-      // but context is still function-scoped
-      const [items, setItems] = createSignal(["A", "B"]);
-
-      const listNode = createElement("ul", [], [
-        forEach(items, (item) => createElement("li", [], [text(item)])),
-      ]);
-
-      mount(container, listNode);
-
-      let lis = container.querySelectorAll("li");
-      expect(lis.length).toBe(2);
-      expect(lis[0].textContent).toBe("A");
-      expect(lis[1].textContent).toBe("B");
-
-      // Update items
-      setItems(["X", "Y", "Z"]);
-      lis = container.querySelectorAll("li");
-      expect(lis.length).toBe(3);
-      expect(lis[2].textContent).toBe("Z");
-    });
-  });
-});

package/tests/issue-11-show-null-to-truthy.test.ts

@@ -1,176 +0,0 @@
-/**
- * Issue #11: Show component does not re-render when signal changes from null to truthy value
- *
- * This test reproduces the exact scenario described in the issue.
- * Now using SolidJS-compatible accessor pattern: children receives an accessor function.
- */
-
-import { describe, test, expect, beforeEach, afterEach } from "vitest";
-import {
-  createSignal,
-  createRoot,
-  mount,
-  render,
-  Show,
-  show,
-  createElement,
-  text,
-} from "../src/index";
-
-describe("Issue #11: Show with null to truthy transition", () => {
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    container.remove();
-  });
-
-  test("Show updates when signal changes from null to truthy (pattern 1: direct signal)", () => {
-    const [data, setData] = createSignal<string | null>(null);
-
-    const node = Show({
-      when: data,
-      // SolidJS-style: children receives accessor, call with ()
-      children: (value: () => string) => createElement("p", [], [text(`Data: ${value()}`)]),
-    });
-
-    mount(container, node);
-
-    // Initial state: data is null, nothing should be visible
-    expect(container.querySelector("p")).toBeNull();
-
-    // Update signal to truthy value
-    setData("loaded data");
-
-    // After update: content should be visible
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p?.textContent).toBe("Data: loaded data");
-  });
-
-  test("Show updates when signal changes from null to truthy (pattern 2: getter function)", () => {
-    const [data, setData] = createSignal<string | null>(null);
-
-    const node = Show({
-      when: () => data(),
-      // SolidJS-style: children receives accessor, call with ()
-      children: (value: () => string) => createElement("p", [], [text(`Data: ${value()}`)]),
-    });
-
-    mount(container, node);
-
-    // Initial state: data is null, nothing should be visible
-    expect(container.querySelector("p")).toBeNull();
-
-    // Update signal to truthy value
-    setData("loaded data");
-
-    // After update: content should be visible
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p?.textContent).toBe("Data: loaded data");
-  });
-
-  test("Show updates with async delay (simulating real use case)", async () => {
-    const [data, setData] = createSignal<string | null>(null);
-
-    const node = Show({
-      when: data,
-      // SolidJS-style: children receives accessor, call with ()
-      children: (value: () => string) => createElement("p", [], [text(`Data: ${value()}`)]),
-    });
-
-    mount(container, node);
-
-    // Initial state
-    expect(container.querySelector("p")).toBeNull();
-
-    // Simulate async data loading
-    await new Promise<void>((resolve) => {
-      setTimeout(() => {
-        setData("loaded data");
-        resolve();
-      }, 50);
-    });
-
-    // After async update
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p?.textContent).toBe("Data: loaded data");
-  });
-
-  test("Low-level show() works with null to truthy", () => {
-    const [data, setData] = createSignal<string | null>(null);
-
-    const node = show(
-      () => data() !== null,
-      () => createElement("p", [], [text(`Data: ${data()}`)]),
-    );
-
-    mount(container, node);
-
-    // Initial state
-    expect(container.querySelector("p")).toBeNull();
-
-    // Update
-    setData("loaded data");
-
-    // After update
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p?.textContent).toBe("Data: loaded data");
-  });
-
-  test("Show inside createRoot works correctly", () => {
-    const [data, setData] = createSignal<string | null>(null);
-    let rootNode: unknown;
-
-    createRoot((dispose) => {
-      rootNode = Show({
-        when: data,
-        // SolidJS-style: children receives accessor, call with ()
-        children: (value: () => string) => createElement("p", [], [text(`Data: ${value()}`)]),
-      });
-      mount(container, rootNode as any);
-      return dispose;
-    });
-
-    // Initial state
-    expect(container.querySelector("p")).toBeNull();
-
-    // Update
-    setData("loaded data");
-
-    // After update
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p?.textContent).toBe("Data: loaded data");
-  });
-
-  test("Show with render (not mount) works correctly", () => {
-    const [data, setData] = createSignal<string | null>(null);
-
-    const node = Show({
-      when: data,
-      // SolidJS-style: children receives accessor, call with ()
-      children: (value: () => string) => createElement("p", [], [text(`Data: ${value()}`)]),
-    });
-
-    render(container, node);
-
-    // Initial state
-    expect(container.querySelector("p")).toBeNull();
-
-    // Update
-    setData("loaded data");
-
-    // After update
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p?.textContent).toBe("Data: loaded data");
-  });
-});