@luna_ui/luna 0.11.0 → 0.20.0

package/tests/solidjs-api.test.ts

@@ -1,660 +0,0 @@
-/**
- * Tests for SolidJS-compatible API utilities
- */
-import { describe, test, expect, beforeEach, afterEach } from "vitest";
-import {
-  createSignal,
-  createRenderEffect,
-  createMemo,
-  createRoot,
-  on,
-  mergeProps,
-  splitProps,
-  Provider,
-  Index,
-  Switch,
-  Match,
-  Portal,
-  portalToBody,
-  portalToSelector,
-  createContext,
-  useContext,
-  createElement,
-  text,
-  mount,
-  For,
-} 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("on() utility", () => {
-  test("on tracks single dependency", () => {
-    const results: [number, number | undefined][] = [];
-
-    createRoot((dispose) => {
-      const [count, setCount] = createSignal(0);
-
-      createRenderEffect(
-        on(count, (value, prev) => {
-          results.push([value, prev]);
-        })
-      );
-
-      setCount(1);
-      setCount(2);
-      dispose();
-    });
-
-    expect(results).toEqual([
-      [0, undefined],
-      [1, 0],
-      [2, 1],
-    ]);
-  });
-
-  test("on tracks multiple dependencies", () => {
-    const results: [[number, string], [number, string] | undefined][] = [];
-
-    createRoot((dispose) => {
-      const [a, setA] = createSignal(1);
-      const [b, setB] = createSignal("x");
-
-      createRenderEffect(
-        on([a, b], (values, prev) => {
-          results.push([values as [number, string], prev as [number, string] | undefined]);
-        })
-      );
-
-      setA(2);
-      setB("y");
-      dispose();
-    });
-
-    expect(results).toEqual([
-      [[1, "x"], undefined],
-      [[2, "x"], [1, "x"]],
-      [[2, "y"], [2, "x"]],
-    ]);
-  });
-
-  test("on with defer option skips initial run", () => {
-    const results: number[] = [];
-
-    createRoot((dispose) => {
-      const [count, setCount] = createSignal(0);
-
-      createRenderEffect(
-        on(
-          count,
-          (value) => {
-            results.push(value);
-          },
-          { defer: true }
-        )
-      );
-
-      // Initial run should be skipped
-      expect(results).toEqual([]);
-
-      setCount(1);
-      expect(results).toEqual([1]);
-
-      setCount(2);
-      expect(results).toEqual([1, 2]);
-
-      dispose();
-    });
-  });
-});
-
-describe("mergeProps()", () => {
-  test("merges simple props", () => {
-    const a = { foo: 1, bar: 2 };
-    const b = { bar: 3, baz: 4 };
-    const result = mergeProps(a, b);
-
-    expect(result).toEqual({ foo: 1, bar: 3, baz: 4 });
-  });
-
-  test("merges event handlers", () => {
-    const calls: string[] = [];
-    const a = { onClick: () => calls.push("a") };
-    const b = { onClick: () => calls.push("b") };
-    const result = mergeProps(a, b) as { onClick: () => void };
-
-    result.onClick();
-    expect(calls).toEqual(["a", "b"]);
-  });
-
-  test("merges ref callbacks", () => {
-    const refs: string[] = [];
-    const a = { ref: (el: string) => refs.push(`a:${el}`) };
-    const b = { ref: (el: string) => refs.push(`b:${el}`) };
-    const result = mergeProps(a, b) as { ref: (el: string) => void };
-
-    result.ref("element");
-    expect(refs).toEqual(["a:element", "b:element"]);
-  });
-
-  test("merges class names", () => {
-    const a = { class: "foo" };
-    const b = { class: "bar" };
-    const result = mergeProps(a, b);
-
-    expect(result.class).toBe("foo bar");
-  });
-
-  test("merges className", () => {
-    const a = { className: "foo" };
-    const b = { className: "bar" };
-    const result = mergeProps(a, b);
-
-    expect(result.className).toBe("foo bar");
-  });
-
-  test("merges style objects", () => {
-    const a = { style: { color: "red", margin: "10px" } } as const;
-    const b = { style: { color: "blue", padding: "5px" } } as const;
-    const result = mergeProps<{ style: Record<string, string> }>(a as any, b as any);
-
-    expect(result.style).toEqual({ color: "blue", margin: "10px", padding: "5px" });
-  });
-
-  test("handles undefined sources", () => {
-    const a = { foo: 1 };
-    const result = mergeProps<{ foo?: number; bar?: number }>(undefined, a, undefined, { bar: 2 });
-
-    expect(result).toEqual({ foo: 1, bar: 2 });
-  });
-});
-
-describe("splitProps()", () => {
-  test("splits props into specified groups", () => {
-    const props = { a: 1, b: 2, c: 3, d: 4 };
-    const [ab, cd] = splitProps(props, ["a", "b"]);
-
-    expect(ab).toEqual({ a: 1, b: 2 });
-    expect(cd).toEqual({ c: 3, d: 4 });
-  });
-
-  test("splits props into multiple groups", () => {
-    const props = { a: 1, b: 2, c: 3, d: 4, e: 5 };
-    const [group1, group2, rest] = splitProps(props, ["a", "b"], ["c"]);
-
-    expect(group1).toEqual({ a: 1, b: 2 });
-    expect(group2).toEqual({ c: 3 });
-    expect(rest).toEqual({ d: 4, e: 5 });
-  });
-
-  test("handles missing keys", () => {
-    const props = { a: 1, b: 2 };
-    const [group, rest] = splitProps(props, ["a", "c"] as (keyof typeof props)[]);
-
-    expect(group).toEqual({ a: 1 });
-    expect(rest).toEqual({ b: 2 });
-  });
-});
-
-describe("Provider component", () => {
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  test("Provider provides context value", () => {
-    const themeCtx = createContext("light");
-    let capturedTheme = "";
-
-    const Child = () => {
-      capturedTheme = useContext(themeCtx);
-      return text(capturedTheme);
-    };
-
-    Provider({
-      context: themeCtx,
-      value: "dark",
-      children: () => {
-        mount(container, Child());
-        return text("");
-      },
-    });
-
-    expect(capturedTheme).toBe("dark");
-  });
-
-  test("Provider works with function children", () => {
-    const countCtx = createContext(0);
-    let capturedCount = -1;
-
-    Provider({
-      context: countCtx,
-      value: 42,
-      children: () => {
-        capturedCount = useContext(countCtx);
-        return text(String(capturedCount));
-      },
-    });
-
-    expect(capturedCount).toBe(42);
-  });
-});
-
-describe("Index component", () => {
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  test("Index renders list with item getters", () => {
-    const [items] = createSignal(["a", "b", "c"]);
-
-    const node = Index({
-      each: items,
-      children: (itemGetter, index) =>
-        createElement(
-          "span",
-          [attr("data-index", AttrValue.Static(String(index)))],
-          [text(itemGetter())]
-        ),
-    });
-
-    mount(container, node);
-
-    const spans = container.querySelectorAll("span");
-    expect(spans.length).toBe(3);
-    expect(spans[0].textContent).toBe("a");
-    expect(spans[1].textContent).toBe("b");
-    expect(spans[2].textContent).toBe("c");
-  });
-
-  test("Index provides working item getter", () => {
-    const values: string[] = [];
-    const [items] = createSignal(["x", "y"]);
-
-    Index({
-      each: items,
-      children: (itemGetter, _index) => {
-        values.push(itemGetter());
-        return text(itemGetter());
-      },
-    });
-
-    expect(values).toEqual(["x", "y"]);
-  });
-});
-
-describe("Switch/Match components", () => {
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    container.remove();
-  });
-
-  test("Switch renders first truthy Match", () => {
-    const [value, setValue] = createSignal("a");
-
-    let rendered = "";
-    createRoot((dispose) => {
-      const result = Switch({
-        fallback: text("none"),
-        children: [
-          Match({
-            when: () => value() === "a",
-            children: text("matched-a"),
-          }),
-          Match({
-            when: () => value() === "b",
-            children: text("matched-b"),
-          }),
-        ],
-      });
-
-      // result should be the matched content
-      rendered = result ? "has-result" : "no-result";
-      dispose();
-    });
-
-    expect(rendered).toBe("has-result");
-  });
-
-  test("Switch updates DOM when signal changes", () => {
-    const [value, setValue] = createSignal("a");
-
-    createRoot((dispose) => {
-      const node = Switch({
-        fallback: text("fallback"),
-        children: [
-          Match({
-            when: () => value() === "a",
-            children: text("A"),
-          }),
-          Match({
-            when: () => value() === "b",
-            children: text("B"),
-          }),
-        ],
-      });
-
-      mount(container, node);
-      expect(container.textContent).toBe("A");
-
-      setValue("b");
-      expect(container.textContent).toBe("B");
-
-      setValue("c");
-      expect(container.textContent).toBe("fallback");
-
-      setValue("a");
-      expect(container.textContent).toBe("A");
-
-      dispose();
-    });
-  });
-
-  test("Switch returns fallback when no match", () => {
-    const [value] = createSignal("c");
-
-    const result = Switch({
-      fallback: text("fallback"),
-      children: [
-        Match({
-          when: () => value() === "a",
-          children: text("a"),
-        }),
-        Match({
-          when: () => value() === "b",
-          children: text("b"),
-        }),
-      ],
-    });
-
-    // Result should be fallback text node
-    expect(result).toBeDefined();
-  });
-
-  test("Match with function children receives accessor (SolidJS-style)", () => {
-    const [user, setUser] = createSignal<{ name: string } | null>(null);
-    let receivedName = "";
-
-    createRoot((dispose) => {
-      const match = Match({
-        when: user,
-        // SolidJS-style: children receives accessor function, call with ()
-        children: (userAccessor: () => { name: string }) => {
-          receivedName = userAccessor().name;
-          return text(userAccessor().name);
-        },
-      });
-
-      // First, user is null, so match.when() should be false
-      expect(match.when()).toBe(false);
-
-      setUser({ name: "Alice" });
-      expect(match.when()).toBe(true);
-
-      // Call children with the value
-      if (match.when() && typeof match.children === "function") {
-        match.children();
-        expect(receivedName).toBe("Alice");
-      }
-
-      dispose();
-    });
-  });
-});
-
-describe("SolidJS API compatibility", () => {
-  test("createSignal returns tuple [getter, setter]", () => {
-    const [count, setCount] = createSignal(0);
-
-    expect(typeof count).toBe("function");
-    expect(typeof setCount).toBe("function");
-    expect(count()).toBe(0);
-
-    setCount(5);
-    expect(count()).toBe(5);
-
-    setCount((c) => c + 1);
-    expect(count()).toBe(6);
-  });
-
-  test("createMemo returns accessor", () => {
-    const [count, setCount] = createSignal(2);
-    const doubled = createMemo(() => count() * 2);
-
-    expect(typeof doubled).toBe("function");
-    expect(doubled()).toBe(4);
-
-    setCount(5);
-    expect(doubled()).toBe(10);
-  });
-
-  test("createRenderEffect tracks dependencies automatically", () => {
-    const values: number[] = [];
-
-    createRoot((dispose) => {
-      const [count, setCount] = createSignal(0);
-
-      createRenderEffect(() => {
-        values.push(count());
-      });
-
-      setCount(1);
-      setCount(2);
-      dispose();
-    });
-
-    expect(values).toEqual([0, 1, 2]);
-  });
-});
-
-describe("Portal component", () => {
-  let container: HTMLElement;
-  let portalTarget: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    container.id = "test-container";
-    document.body.appendChild(container);
-
-    portalTarget = document.createElement("div");
-    portalTarget.id = "portal-target";
-    document.body.appendChild(portalTarget);
-  });
-
-  afterEach(() => {
-    container.remove();
-    portalTarget.remove();
-  });
-
-  test("Portal renders children to body by default", () => {
-    const placeholder = Portal({
-      children: () => createElement("div", [attr("id", AttrValue.Static("portal-content"))], [text("Portal content")]),
-    });
-
-    // Placeholder should be returned
-    expect(placeholder).toBeDefined();
-
-    // Content should be in body
-    const rendered = document.getElementById("portal-content");
-    expect(rendered).not.toBeNull();
-    expect(rendered?.textContent).toBe("Portal content");
-
-    // Clean up
-    rendered?.remove();
-  });
-
-  test("Portal renders to selector mount target", () => {
-    Portal({
-      mount: "#portal-target",
-      children: () => createElement("div", [attr("id", AttrValue.Static("selector-portal"))], [text("Selector portal")]),
-    });
-
-    // Content should be in the portal target
-    const rendered = portalTarget.querySelector("#selector-portal");
-    expect(rendered).not.toBeNull();
-    expect(rendered?.textContent).toBe("Selector portal");
-  });
-
-  test("portalToBody low-level API works", () => {
-    const content = createElement("div", [attr("id", AttrValue.Static("low-level-portal"))], [text("Low level")]);
-
-    portalToBody([content]);
-
-    const rendered = document.getElementById("low-level-portal");
-    expect(rendered).not.toBeNull();
-    expect(rendered?.textContent).toBe("Low level");
-
-    rendered?.remove();
-  });
-
-  test("portalToSelector low-level API works", () => {
-    const content = createElement("div", [attr("class", AttrValue.Static("selector-content"))], [text("Selector content")]);
-
-    portalToSelector("#portal-target", [content]);
-
-    const rendered = portalTarget.querySelector(".selector-content");
-    expect(rendered).not.toBeNull();
-    expect(rendered?.textContent).toBe("Selector content");
-  });
-
-  test("Portal accepts function children", () => {
-    const content = () => createElement("span", [attr("id", AttrValue.Static("func-portal"))], [text("Function child")]);
-
-    Portal({
-      children: content,
-    });
-
-    const rendered = document.getElementById("func-portal");
-    expect(rendered).not.toBeNull();
-    expect(rendered?.textContent).toBe("Function child");
-
-    rendered?.remove();
-  });
-});
-
-describe("Switch/Match component", () => {
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    container.remove();
-  });
-
-  test("Switch with single Match renders correctly", () => {
-    createRoot((dispose) => {
-      const [value, setValue] = createSignal(true);
-
-      const node = Switch({
-        children: Match({
-          when: value,
-          children: createElement("div", [], [text("Match 1")]),
-        }),
-      });
-
-      mount(container, node);
-      expect(container.textContent).toContain("Match 1");
-      dispose();
-    });
-  });
-
-  test("Switch with single Match and fallback", () => {
-    createRoot((dispose) => {
-      const [value, setValue] = createSignal(false);
-
-      const node = Switch({
-        fallback: createElement("div", [], [text("Fallback")]),
-        children: Match({
-          when: value,
-          children: createElement("div", [], [text("Match 1")]),
-        }),
-      });
-
-      mount(container, node);
-      expect(container.textContent).toContain("Fallback");
-
-      // Trigger update
-      setValue(true);
-      expect(container.textContent).toContain("Match 1");
-      dispose();
-    });
-  });
-
-  test("Switch with multiple Match components", () => {
-    createRoot((dispose) => {
-      const [value, setValue] = createSignal(1);
-
-      const node = Switch({
-        fallback: createElement("div", [], [text("Fallback")]),
-        children: [
-          Match({
-            when: () => value() === 1,
-            children: createElement("div", [], [text("First")]),
-          }),
-          Match({
-            when: () => value() === 2,
-            children: createElement("div", [], [text("Second")]),
-          }),
-        ],
-      });
-
-      mount(container, node);
-      expect(container.textContent).toContain("First");
-
-      setValue(2);
-      expect(container.textContent).toContain("Second");
-
-      setValue(3);
-      expect(container.textContent).toContain("Fallback");
-      dispose();
-    });
-  });
-
-  test("Switch with accessor condition in Match", () => {
-    createRoot((dispose) => {
-      const [count, setCount] = createSignal(0);
-
-      const node = Switch({
-        fallback: createElement("div", [], [text("Default")]),
-        children: Match({
-          when: () => count() % 3 === 0 && count() > 0,
-          children: createElement("div", [], [text("Bang!")]),
-        }),
-      });
-
-      mount(container, node);
-      expect(container.textContent).toContain("Default");
-
-      setCount(3);
-      expect(container.textContent).toContain("Bang!");
-
-      setCount(4);
-      expect(container.textContent).toContain("Default");
-
-      setCount(6);
-      expect(container.textContent).toContain("Bang!");
-      dispose();
-    });
-  });
-});

package/tests/static-perf.bench.ts

@@ -1,64 +0,0 @@
-import { bench, describe } from "vitest";
-
-// Generate HTML for list items
-function generateListHTML(count: number): string {
-  let html = "<ul>";
-  for (let i = 0; i < count; i++) {
-    html += `<li>Item ${i}</li>`;
-  }
-  html += "</ul>";
-  return html;
-}
-
-// Generate DOM using createElement (like render_vnode_to_dom)
-function createListDOM(count: number): Node {
-  const ul = document.createElement("ul");
-  for (let i = 0; i < count; i++) {
-    const li = document.createElement("li");
-    li.textContent = `Item ${i}`;
-    ul.appendChild(li);
-  }
-  return ul;
-}
-
-describe("Static Content: innerHTML vs createElement (Real Browser)", () => {
-  const html100 = generateListHTML(100);
-  const html500 = generateListHTML(500);
-  const html1000 = generateListHTML(1000);
-
-  describe("100 items", () => {
-    bench("createElement (render_vnode_to_dom style)", () => {
-      const container = document.createElement("div");
-      container.appendChild(createListDOM(100));
-    });
-
-    bench("innerHTML (inject_static style)", () => {
-      const container = document.createElement("div");
-      container.innerHTML = html100;
-    });
-  });
-
-  describe("500 items", () => {
-    bench("createElement (render_vnode_to_dom style)", () => {
-      const container = document.createElement("div");
-      container.appendChild(createListDOM(500));
-    });
-
-    bench("innerHTML (inject_static style)", () => {
-      const container = document.createElement("div");
-      container.innerHTML = html500;
-    });
-  });
-
-  describe("1000 items", () => {
-    bench("createElement (render_vnode_to_dom style)", () => {
-      const container = document.createElement("div");
-      container.appendChild(createListDOM(1000));
-    });
-
-    bench("innerHTML (inject_static style)", () => {
-      const container = document.createElement("div");
-      container.innerHTML = html1000;
-    });
-  });
-});