@luna_ui/luna 0.11.0 → 0.20.0

package/tests/store.test.ts

@@ -1,263 +0,0 @@
-import { describe, test, expect, beforeEach } from "vitest";
-import {
-  createStore,
-  createRenderEffect,
-  createRoot,
-  produce,
-  reconcile,
-} from "../src/index";
-
-describe("createStore", () => {
-  describe("Basic functionality", () => {
-    test("creates a store with initial value", () => {
-      const [state] = createStore({ count: 0 });
-      expect(state.count).toBe(0);
-    });
-
-    test("nested property access works", () => {
-      const [state] = createStore({
-        user: { name: "John", age: 30 },
-      });
-      expect(state.user.name).toBe("John");
-      expect(state.user.age).toBe(30);
-    });
-
-    test("deeply nested access works", () => {
-      const [state] = createStore({
-        a: { b: { c: { d: 42 } } },
-      });
-      expect(state.a.b.c.d).toBe(42);
-    });
-  });
-
-  describe("setState with path", () => {
-    test("updates single property", () => {
-      const [state, setState] = createStore({ count: 0 });
-      setState("count", 1);
-      expect(state.count).toBe(1);
-    });
-
-    test("updates nested property", () => {
-      const [state, setState] = createStore({
-        user: { name: "John" },
-      });
-      setState("user", "name", "Jane");
-      expect(state.user.name).toBe("Jane");
-    });
-
-    test("functional update works", () => {
-      const [state, setState] = createStore({ count: 5 });
-      setState("count", (c: number) => c + 1);
-      expect(state.count).toBe(6);
-    });
-
-    test("merges objects at path", () => {
-      const [state, setState] = createStore({
-        user: { name: "John", age: 30 },
-      });
-      setState("user", { age: 31 });
-      expect(state.user.name).toBe("John");
-      expect(state.user.age).toBe(31);
-    });
-
-    test("merges at root level", () => {
-      const [state, setState] = createStore({
-        count: 0,
-        name: "test",
-      });
-      setState({ count: 10 });
-      expect(state.count).toBe(10);
-      expect(state.name).toBe("test");
-    });
-  });
-
-  describe("Reactivity", () => {
-    test("tracks property access in effects", () => {
-      createRoot(() => {
-        const [state, setState] = createStore({ count: 0 });
-        const values: number[] = [];
-
-        createRenderEffect(() => {
-          values.push(state.count);
-        });
-
-        expect(values).toEqual([0]);
-
-        setState("count", 1);
-        expect(values).toEqual([0, 1]);
-
-        setState("count", 2);
-        expect(values).toEqual([0, 1, 2]);
-      });
-    });
-
-    test("tracks nested property access", () => {
-      createRoot(() => {
-        const [state, setState] = createStore({
-          user: { name: "John" },
-        });
-        const names: string[] = [];
-
-        createRenderEffect(() => {
-          names.push(state.user.name);
-        });
-
-        expect(names).toEqual(["John"]);
-
-        setState("user", "name", "Jane");
-        expect(names).toEqual(["John", "Jane"]);
-      });
-    });
-
-    test("only triggers when accessed property changes", () => {
-      createRoot(() => {
-        const [state, setState] = createStore({
-          a: 1,
-          b: 2,
-        });
-        const aValues: number[] = [];
-
-        createRenderEffect(() => {
-          aValues.push(state.a);
-        });
-
-        expect(aValues).toEqual([1]);
-
-        // Changing b should not trigger effect that only reads a
-        setState("b", 3);
-        expect(aValues).toEqual([1]);
-
-        // Changing a should trigger
-        setState("a", 10);
-        expect(aValues).toEqual([1, 10]);
-      });
-    });
-
-    test("parent path change notifies child accessors", () => {
-      createRoot(() => {
-        const [state, setState] = createStore({
-          user: { name: "John", age: 30 },
-        });
-        const names: string[] = [];
-
-        createRenderEffect(() => {
-          names.push(state.user.name);
-        });
-
-        expect(names).toEqual(["John"]);
-
-        // Replacing the entire user object should trigger
-        setState("user", { name: "Jane", age: 25 });
-        expect(names).toEqual(["John", "Jane"]);
-      });
-    });
-  });
-
-  describe("Arrays", () => {
-    test("array access works", () => {
-      const [state] = createStore({ items: [1, 2, 3] });
-      expect(state.items[0]).toBe(1);
-      expect(state.items.length).toBe(3);
-    });
-
-    test("array updates work", () => {
-      const [state, setState] = createStore({ items: ["a", "b", "c"] });
-      setState("items", [...state.items, "d"]);
-      expect(state.items).toEqual(["a", "b", "c", "d"]);
-    });
-
-    test("array with objects", () => {
-      const [state, setState] = createStore({
-        todos: [
-          { id: 1, text: "First", done: false },
-          { id: 2, text: "Second", done: true },
-        ],
-      });
-
-      expect(state.todos[0].text).toBe("First");
-      expect(state.todos[1].done).toBe(true);
-    });
-  });
-
-  describe("produce helper", () => {
-    test("produce creates a mutation function", () => {
-      const [state, setState] = createStore({
-        user: { name: "John", age: 30 },
-      });
-
-      setState(
-        "user",
-        produce((user: { name: string; age: number }) => {
-          user.name = "Jane";
-          user.age = 31;
-        })
-      );
-
-      expect(state.user.name).toBe("Jane");
-      expect(state.user.age).toBe(31);
-    });
-
-    test("produce works with arrays", () => {
-      const [state, setState] = createStore({
-        items: [1, 2, 3],
-      });
-
-      setState(
-        "items",
-        produce((items: number[]) => {
-          items.push(4);
-        })
-      );
-
-      expect(state.items).toEqual([1, 2, 3, 4]);
-    });
-  });
-
-  describe("reconcile helper", () => {
-    test("reconcile replaces entire value", () => {
-      const [state, setState] = createStore({
-        items: [1, 2, 3],
-      });
-
-      setState("items", reconcile([4, 5, 6]));
-      expect(state.items).toEqual([4, 5, 6]);
-    });
-  });
-
-  describe("Edge cases", () => {
-    test("handles undefined values", () => {
-      const [state, setState] = createStore<{
-        value: number | undefined;
-      }>({ value: undefined });
-      expect(state.value).toBeUndefined();
-
-      setState("value", 42);
-      expect(state.value).toBe(42);
-
-      setState("value", undefined);
-      expect(state.value).toBeUndefined();
-    });
-
-    test("handles null values", () => {
-      const [state, setState] = createStore<{
-        value: string | null;
-      }>({ value: null });
-      expect(state.value).toBeNull();
-
-      setState("value", "hello");
-      expect(state.value).toBe("hello");
-
-      setState("value", null);
-      expect(state.value).toBeNull();
-    });
-
-    test("creates nested paths that don't exist", () => {
-      const [state, setState] = createStore<{
-        deep?: { nested?: { value?: number } };
-      }>({});
-
-      setState("deep", "nested", "value", 42);
-      expect(state.deep?.nested?.value).toBe(42);
-    });
-  });
-});

package/tests/tsx-syntax.test.tsx

@@ -1,404 +0,0 @@
-// Test actual TSX syntax with jsxImportSource
-import { describe, test, expect } from "vitest";
-import "global-jsdom/register";
-import { createSignal, createRoot, render, Fragment, Show, Switch, Match } from "../src/index";
-import type { JSX } from "../src/jsx-runtime";
-
-describe("TSX Syntax with jsxImportSource", () => {
-  test("basic element", () => {
-    const node = <div className="test">Hello</div>;
-    expect(node).toBeDefined();
-  });
-
-  test("nested elements", () => {
-    const node = (
-      <div className="container">
-        <h1>Title</h1>
-        <p>Paragraph</p>
-      </div>
-    );
-    expect(node).toBeDefined();
-  });
-
-  test("element with multiple attributes", () => {
-    const node = (
-      <input
-        type="text"
-        placeholder="Enter name"
-        value="initial"
-      />
-    );
-    expect(node).toBeDefined();
-  });
-
-  test("event handler", () => {
-    let clicked = false;
-    const node = (
-      <button onClick={() => { clicked = true; }}>
-        Click me
-      </button>
-    );
-    expect(node).toBeDefined();
-  });
-
-  test("function component", () => {
-    function Greeting(props: { name: string }): JSX.Element {
-      return <span>Hello, {props.name}!</span>;
-    }
-
-    const node = <Greeting name="World" />;
-    expect(node).toBeDefined();
-  });
-
-  test("component with children", () => {
-    function Card(props: { title: string; children?: JSX.Element }): JSX.Element {
-      return (
-        <div className="card">
-          <h2>{props.title}</h2>
-          <div className="content">{props.children}</div>
-        </div>
-      );
-    }
-
-    const node = (
-      <Card title="My Card">
-        <p>Card content here</p>
-      </Card>
-    );
-    expect(node).toBeDefined();
-  });
-
-  test("fragment with shorthand syntax", () => {
-    const node = (
-      <>
-        <div>First</div>
-        <div>Second</div>
-      </>
-    );
-    // Fragment should return a DomNode (not an array)
-    expect(node).toBeDefined();
-    expect(Array.isArray(node)).toBe(false);
-  });
-
-  test("Fragment component with explicit JSX tag", () => {
-    // This is the bug fix test: <Fragment> should work like <>
-    const node = (
-      <Fragment>
-        <div>First</div>
-        <div>Second</div>
-      </Fragment>
-    );
-    expect(node).toBeDefined();
-    expect(Array.isArray(node)).toBe(false);
-  });
-
-  test("Fragment renders correctly to DOM", () => {
-    const container = document.createElement("div");
-
-    const node = (
-      <div id="wrapper">
-        <Fragment>
-          <span>A</span>
-          <span>B</span>
-        </Fragment>
-      </div>
-    );
-
-    render(container, node);
-
-    expect(container.innerHTML).toContain("A");
-    expect(container.innerHTML).toContain("B");
-    // Both spans should be direct children of wrapper
-    const wrapper = container.querySelector("#wrapper");
-    expect(wrapper?.querySelectorAll("span").length).toBe(2);
-  });
-
-  test("component returning Fragment works", () => {
-    function MultipleElements(): JSX.Element {
-      return (
-        <Fragment>
-          <div>One</div>
-          <div>Two</div>
-          <div>Three</div>
-        </Fragment>
-      );
-    }
-
-    const container = document.createElement("div");
-    render(container, <MultipleElements />);
-
-    expect(container.textContent).toContain("One");
-    expect(container.textContent).toContain("Two");
-    expect(container.textContent).toContain("Three");
-  });
-
-  test("render TSX to DOM", () => {
-    const container = document.createElement("div");
-
-    const node = (
-      <div id="app">
-        <h1 className="title">Hello TSX</h1>
-        <p>This is a paragraph.</p>
-      </div>
-    );
-
-    render(container, node);
-
-    expect(container.innerHTML).toContain("app");
-    expect(container.innerHTML).toContain("title");
-    expect(container.innerHTML).toContain("Hello TSX");
-    expect(container.innerHTML).toContain("paragraph");
-  });
-
-  test("reactive value with signal", () => {
-    const [count] = createSignal(0);
-
-    const node = (
-      <div className={() => `count-${count()}`}>
-        Count value
-      </div>
-    );
-
-    expect(node).toBeDefined();
-  });
-
-  test("list rendering", () => {
-    const items = ["Apple", "Banana", "Cherry"];
-
-    const node = (
-      <ul>
-        {items.map((item) => (
-          <li>{item}</li>
-        ))}
-      </ul>
-    );
-
-    expect(node).toBeDefined();
-  });
-
-  test("conditional rendering in component", () => {
-    function Toggle(props: { show: boolean }): JSX.Element {
-      return props.show ? <div>Visible</div> : <div>Hidden</div>;
-    }
-
-    const visible = <Toggle show={true} />;
-    const hidden = <Toggle show={false} />;
-
-    expect(visible).toBeDefined();
-    expect(hidden).toBeDefined();
-  });
-
-  test("Show with function children returning array", () => {
-    const container = document.createElement("div");
-
-    createRoot((dispose) => {
-      const [show, setShow] = createSignal(true);
-
-      // Function children that returns multiple elements (array)
-      const node = (
-        <div id="show-test">
-          <Show when={show}>
-            {(value) => [
-              <span>Shown: {String(value)}</span>,
-              <span>Also shown</span>
-            ]}
-          </Show>
-        </div>
-      );
-
-      render(container, node);
-
-      expect(container.textContent).toContain("Shown");
-      expect(container.textContent).toContain("Also shown");
-
-      dispose();
-    });
-  });
-
-  test("Switch/Match with function children", () => {
-    const container = document.createElement("div");
-
-    createRoot((dispose) => {
-      const [value, setValue] = createSignal("a");
-
-      const node = (
-        <div id="switch-test">
-          <Switch fallback={<span>No match</span>}>
-            <Match when={() => value() === "a"}>
-              {() => <span>Match A</span>}
-            </Match>
-            <Match when={() => value() === "b"}>
-              {() => [
-                <span>Match B1</span>,
-                <span>Match B2</span>
-              ]}
-            </Match>
-          </Switch>
-        </div>
-      );
-
-      render(container, node);
-      expect(container.textContent).toContain("Match A");
-
-      setValue("b");
-      expect(container.textContent).toContain("Match B1");
-      expect(container.textContent).toContain("Match B2");
-
-      setValue("c");
-      expect(container.textContent).toContain("No match");
-
-      dispose();
-    });
-  });
-
-  test("Switch/Match with direct multiple children (no function wrapper)", () => {
-    const container = document.createElement("div");
-
-    createRoot((dispose) => {
-      const [isEven, setIsEven] = createSignal(true);
-
-      const node = (
-        <div id="direct-children-test">
-          <Switch fallback={<span>Odd</span>}>
-            <Match when={() => isEven()}>
-              <div>A</div>
-              <div>B</div>
-            </Match>
-          </Switch>
-        </div>
-      );
-
-      render(container, node);
-      expect(container.textContent).toContain("A");
-      expect(container.textContent).toContain("B");
-
-      setIsEven(false);
-      expect(container.textContent).toContain("Odd");
-      expect(container.textContent).not.toContain("A");
-      expect(container.textContent).not.toContain("B");
-
-      dispose();
-    });
-  });
-
-  // Issue #7: Reactive props (class, innerHTML)
-  describe("Reactive props (Issue #7)", () => {
-    test("reactive class with accessor function", () => {
-      const container = document.createElement("div");
-
-      createRoot((dispose) => {
-        const [active, setActive] = createSignal(false);
-
-        // Pass accessor function directly (not called): class={className}
-        const className = () => `btn ${active() ? "active" : "inactive"}`;
-
-        const node = (
-          <button class={className}>
-            Toggle
-          </button>
-        );
-
-        render(container, node);
-        const button = container.querySelector("button")!;
-
-        // Initial state
-        expect(button.className).toBe("btn inactive");
-
-        // After update
-        setActive(true);
-        expect(button.className).toBe("btn active");
-
-        // Toggle back
-        setActive(false);
-        expect(button.className).toBe("btn inactive");
-
-        dispose();
-      });
-    });
-
-    test("reactive className with accessor function", () => {
-      const container = document.createElement("div");
-
-      createRoot((dispose) => {
-        const [color, setColor] = createSignal("red");
-
-        const node = (
-          <div className={() => `text-${color()}`}>
-            Colored text
-          </div>
-        );
-
-        render(container, node);
-        const div = container.querySelector("div")!;
-
-        expect(div.className).toBe("text-red");
-
-        setColor("blue");
-        expect(div.className).toBe("text-blue");
-
-        dispose();
-      });
-    });
-
-    test("dangerouslySetInnerHTML static", () => {
-      const container = document.createElement("div");
-
-      const node = (
-        <span dangerouslySetInnerHTML={{ __html: "<b>bold</b>" }} />
-      );
-
-      render(container, node);
-      const span = container.querySelector("span")!;
-
-      expect(span.innerHTML).toBe("<b>bold</b>");
-      expect(span.querySelector("b")?.textContent).toBe("bold");
-    });
-
-    test("dangerouslySetInnerHTML dynamic", () => {
-      const container = document.createElement("div");
-
-      createRoot((dispose) => {
-        const [html, setHtml] = createSignal("<i>italic</i>");
-
-        const node = (
-          <span dangerouslySetInnerHTML={() => ({ __html: html() })} />
-        );
-
-        render(container, node);
-        const span = container.querySelector("span")!;
-
-        expect(span.innerHTML).toBe("<i>italic</i>");
-
-        setHtml("<strong>strong</strong>");
-        expect(span.innerHTML).toBe("<strong>strong</strong>");
-
-        dispose();
-      });
-    });
-
-    test("reactive style object", () => {
-      const container = document.createElement("div");
-
-      createRoot((dispose) => {
-        const [color, setColor] = createSignal("red");
-
-        const node = (
-          <div style={() => ({ color: color(), fontWeight: "bold" })}>
-            Styled text
-          </div>
-        );
-
-        render(container, node);
-        const div = container.querySelector("div")!;
-
-        expect(div.getAttribute("style")).toContain("color: red");
-        expect(div.getAttribute("style")).toContain("font-weight: bold");
-
-        setColor("blue");
-        expect(div.getAttribute("style")).toContain("color: blue");
-
-        dispose();
-      });
-    });
-  });
-});