@luna_ui/luna 0.3.4 → 0.3.5

package/tests/resource.test.ts

@@ -0,0 +1,160 @@
+import { describe, test, expect, vi } from "vitest";
+import {
+  createResource,
+  createDeferred,
+  createRenderEffect,
+  createRoot,
+} from "../src/index";
+
+describe("Resource API (SolidJS-style)", () => {
+  describe("createResource", () => {
+    test("starts in pending state", () => {
+      const [resource] = createResource<string>(() => {
+        // Never resolves
+      });
+
+      expect(resource.loading).toBe(true);
+      expect(resource.state).toBe("pending");
+    });
+
+    test("transitions to success on resolve", async () => {
+      const [resource] = createResource<string>((resolve) => {
+        resolve("success-data");
+      });
+
+      // Resolve happens synchronously in this case
+      expect(resource.state).toBe("ready");
+      expect(resource()).toBe("success-data");
+    });
+
+    test("transitions to failure on reject", () => {
+      const [resource] = createResource<string>((_, reject) => {
+        reject("error-message");
+      });
+
+      expect(resource.state).toBe("errored");
+      expect(resource.error).toBe("error-message");
+    });
+
+    test("async resolve works", async () => {
+      let resolveRef: ((value: string) => void) | null = null;
+
+      const [resource] = createResource<string>((resolve) => {
+        resolveRef = resolve;
+      });
+
+      expect(resource.loading).toBe(true);
+
+      resolveRef!("async-data");
+
+      expect(resource.state).toBe("ready");
+      expect(resource()).toBe("async-data");
+    });
+
+    test("refetch re-runs fetcher", () => {
+      let fetchCount = 0;
+      const [resource, { refetch }] = createResource<string>((resolve) => {
+        fetchCount++;
+        resolve(`fetch-${fetchCount}`);
+      });
+
+      expect(fetchCount).toBe(1);
+      expect(resource()).toBe("fetch-1");
+
+      refetch();
+
+      expect(fetchCount).toBe(2);
+      expect(resource()).toBe("fetch-2");
+    });
+  });
+
+  describe("createDeferred", () => {
+    test("returns accessor, resolve, and reject", () => {
+      const [resource, resolve, reject] = createDeferred<number>();
+
+      expect(typeof resource).toBe("function");
+      expect(typeof resolve).toBe("function");
+      expect(typeof reject).toBe("function");
+    });
+
+    test("starts in pending state", () => {
+      const [resource] = createDeferred<number>();
+      expect(resource.loading).toBe(true);
+    });
+
+    test("resolve transitions to success", () => {
+      const [resource, resolve] = createDeferred<number>();
+
+      resolve(42);
+
+      expect(resource.loading).toBe(false);
+      expect(resource()).toBe(42);
+    });
+
+    test("reject transitions to failure", () => {
+      const [resource, , reject] = createDeferred<number>();
+
+      reject("deferred-error");
+
+      expect(resource.loading).toBe(false);
+      expect(resource.error).toBe("deferred-error");
+    });
+  });
+
+  describe("reactivity", () => {
+    test("accessor is reactive", () => {
+      const [resource, resolve] = createDeferred<string>();
+      let effectRunCount = 0;
+
+      createRoot((dispose) => {
+        createRenderEffect(() => {
+          resource(); // Access value to track
+          effectRunCount++;
+        });
+
+        expect(effectRunCount).toBe(1);
+
+        resolve("data");
+        // Effect should re-run because accessor is reactive
+        expect(effectRunCount).toBe(2);
+        dispose();
+      });
+    });
+  });
+
+  describe("integration with Promise", () => {
+    test("works with setTimeout simulation", async () => {
+      vi.useFakeTimers();
+
+      const [resource] = createResource<string>((resolve) => {
+        setTimeout(() => resolve("delayed"), 100);
+      });
+
+      expect(resource.loading).toBe(true);
+
+      vi.advanceTimersByTime(100);
+
+      expect(resource.state).toBe("ready");
+      expect(resource()).toBe("delayed");
+
+      vi.useRealTimers();
+    });
+
+    test("can wrap fetch-like async operations", async () => {
+      const mockFetch = vi.fn().mockResolvedValue({ data: "fetched" });
+
+      const [resource] = createResource<{ data: string }>((resolve, reject) => {
+        mockFetch()
+          .then(resolve)
+          .catch((e: Error) => reject(e.message));
+      });
+
+      // Wait for promise to resolve
+      await vi.waitFor(() => {
+        expect(resource.state).toBe("ready");
+      });
+
+      expect(resource()).toEqual({ data: "fetched" });
+    });
+  });
+});

package/tests/router.test.ts

@@ -0,0 +1,117 @@
+import { describe, test, expect, beforeEach } from "vitest";
+import {
+  routePage,
+  routePageTitled,
+  routePageFull,
+  createRouter,
+  routerNavigate,
+  routerReplace,
+  routerGetPath,
+  routerGetMatch,
+  routerGetBase,
+  type Routes,
+  type BrowserRouter,
+} from "../src/index";
+
+describe("Route definitions", () => {
+  test("routePage creates a page route", () => {
+    const route = routePage("/home", "HomePage");
+    expect(route).toBeDefined();
+    // MoonBit enum representation
+    expect((route as any).$tag).toBeDefined();
+  });
+
+  test("routePageTitled with title", () => {
+    const route = routePageTitled("/about", "AboutPage", "About Us");
+    expect(route).toBeDefined();
+  });
+
+  test("routePageFull with title and meta", () => {
+    const route = routePageFull("/about", "AboutPage", "About Us", [
+      { _0: "description", _1: "About our company" },
+    ]);
+    expect(route).toBeDefined();
+  });
+
+  test("multiple page routes", () => {
+    const routes: Routes[] = [
+      routePage("/", "Home"),
+      routePage("/about", "About"),
+      routePage("/contact", "Contact"),
+    ];
+    expect(routes.length).toBe(3);
+  });
+});
+
+describe("BrowserRouter", () => {
+  let router: BrowserRouter;
+
+  beforeEach(() => {
+    // Reset location to root
+    window.history.replaceState(null, "", "/");
+  });
+
+  test("createRouter creates a router", () => {
+    const routes = [routePage("/", "Home"), routePage("/about", "About")];
+    router = createRouter(routes);
+    expect(router).toBeDefined();
+  });
+
+  test("createRouter with base path", () => {
+    const routes = [routePage("/", "Home")];
+    router = createRouter(routes, "/app");
+    expect(routerGetBase(router)).toBe("/app");
+  });
+
+  test("routerGetPath returns current path", () => {
+    const routes = [routePage("/", "Home")];
+    router = createRouter(routes);
+    // Initial path should be "/"
+    const path = routerGetPath(router);
+    expect(typeof path).toBe("string");
+  });
+
+  test("routerNavigate changes path", () => {
+    const routes = [routePage("/", "Home"), routePage("/about", "About")];
+    router = createRouter(routes);
+
+    routerNavigate(router, "/about");
+    expect(routerGetPath(router)).toBe("/about");
+  });
+
+  test("routerReplace changes path without adding to history", () => {
+    const routes = [routePage("/", "Home"), routePage("/about", "About")];
+    router = createRouter(routes);
+
+    const historyLength = window.history.length;
+    routerReplace(router, "/about");
+    expect(routerGetPath(router)).toBe("/about");
+    // Replace should not add to history
+    expect(window.history.length).toBe(historyLength);
+  });
+
+  test("routerGetMatch returns match for current route", () => {
+    const routes = [routePage("/", "Home"), routePage("/about", "About")];
+    router = createRouter(routes);
+
+    routerNavigate(router, "/about");
+    const match = routerGetMatch(router);
+
+    expect(match).toBeDefined();
+    if (match) {
+      expect(match.route.component).toBe("About");
+      expect(match.path).toBe("/about");
+    }
+  });
+
+  test("routerGetMatch returns undefined for unmatched route", () => {
+    const routes = [routePage("/", "Home")];
+    router = createRouter(routes);
+
+    routerNavigate(router, "/nonexistent");
+    const match = routerGetMatch(router);
+    // Should be undefined or match might still return something
+    // depending on implementation
+    expect(typeof match === "undefined" || match !== null).toBe(true);
+  });
+});

package/tests/show-initial-mount-leak.test.tsx

@@ -0,0 +1,182 @@
+/** @jsxImportSource ../src */
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import "global-jsdom/register";
+import {
+  createSignal,
+  onMount,
+  onCleanup,
+  render,
+  mount,
+  Show,
+  show,
+} from "../src/index";
+import type { JSX } from "../src/jsx-runtime";
+
+const flushMicrotasks = () => new Promise<void>((resolve) => queueMicrotask(resolve));
+const countLogs = (log: string[]) => {
+  const created = log.filter((item) => item.endsWith(" created")).length;
+  const mounted = log.filter((item) => item.endsWith(" mounted")).length;
+  const cleanups = log.filter((item) => item.endsWith(" cleanup")).length;
+  return { created, mounted, cleanups };
+};
+
+const expectCounts = (
+  log: string[],
+  expected: { created: number; mounted: number; cleanups: number },
+) => {
+  const { created, mounted, cleanups } = countLogs(log);
+  try {
+    expect(created).toBe(expected.created);
+    expect(mounted).toBe(expected.mounted);
+    expect(cleanups).toBe(expected.cleanups);
+  } catch (error) {
+    console.log({ counts: { created, mounted, cleanups }, log });
+    throw error;
+  }
+};
+
+describe("Show initial mount behavior", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it("reproduces multiple instances with Show when=true on initial render", async () => {
+    const log: string[] = [];
+    let gId = 1;
+
+    function Child(): JSX.Element {
+      const id = gId++;
+
+      onMount(() => {
+        log.push(`${id} mounted`);
+      });
+
+      onCleanup(() => {
+        log.push(`${id} cleanup`);
+      });
+
+      log.push(`${id} created`);
+
+      return <p>I'm here</p>;
+    }
+
+    function Counter(): JSX.Element {
+      return (
+        <div>
+          <Show when={true}>{() => <Child />}</Show>
+        </div>
+      );
+    }
+
+    render(container, <Counter />);
+
+    await flushMicrotasks();
+    await flushMicrotasks();
+    await flushMicrotasks();
+    await flushMicrotasks();
+
+    expectCounts(log, { created: 1, mounted: 1, cleanups: 0 });
+  });
+
+  it("does not create multiple instances without Show", async () => {
+    const log: string[] = [];
+    let gId = 1;
+
+    function Child(): JSX.Element {
+      const id = gId++;
+
+      onMount(() => {
+        log.push(`${id} mounted`);
+      });
+
+      onCleanup(() => {
+        log.push(`${id} cleanup`);
+      });
+
+      log.push(`${id} created`);
+
+      return <p>I'm here</p>;
+    }
+
+    function Counter(): JSX.Element {
+      return (
+        <div>
+          <Child />
+        </div>
+      );
+    }
+
+    render(container, <Counter />);
+
+    await flushMicrotasks();
+    await flushMicrotasks();
+
+    expectCounts(log, { created: 1, mounted: 1, cleanups: 0 });
+  });
+
+  it("does not create multiple instances with Show when=true using mount", async () => {
+    const log: string[] = [];
+    let gId = 1;
+
+    function Child(): JSX.Element {
+      const id = gId++;
+
+      onMount(() => {
+        log.push(`${id} mounted`);
+      });
+
+      onCleanup(() => {
+        log.push(`${id} cleanup`);
+      });
+
+      log.push(`${id} created`);
+
+      return <p>I'm here</p>;
+    }
+
+    const node = Show({ when: true, children: () => <Child /> });
+    mount(container, node);
+
+    await flushMicrotasks();
+    await flushMicrotasks();
+
+    expectCounts(log, { created: 1, mounted: 1, cleanups: 0 });
+  });
+
+  it("does not create multiple instances when render uses show() primitive", async () => {
+    const log: string[] = [];
+    let gId = 1;
+    const [visible] = createSignal(true);
+
+    function Child(): JSX.Element {
+      const id = gId++;
+
+      onMount(() => {
+        log.push(`${id} mounted`);
+      });
+
+      onCleanup(() => {
+        log.push(`${id} cleanup`);
+      });
+
+      log.push(`${id} created`);
+
+      return <p>I'm here</p>;
+    }
+
+    const node = show(visible, () => <Child />);
+    render(container, node);
+
+    await flushMicrotasks();
+    await flushMicrotasks();
+
+    expectCounts(log, { created: 1, mounted: 1, cleanups: 0 });
+  });
+});