@esmx/router 3.0.0-rc.17 → 3.0.0-rc.19

package/dist/navigation.test.mjs

@@ -0,0 +1,681 @@
+import {
+  assert,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  test,
+  vi
+} from "vitest";
+import { MemoryHistory, Navigation } from "./navigation.mjs";
+import { parsedOptions } from "./options.mjs";
+import { Route } from "./route.mjs";
+import { RouteType, RouterMode } from "./types.mjs";
+const sleep = (ms) => new Promise((s) => setTimeout(s, ms));
+const awaitGo = (history, delta) => {
+  const p = Promise.withResolvers();
+  const un = history.onPopState(() => {
+    un();
+    p.resolve();
+  });
+  history.go(delta);
+  return p.promise;
+};
+describe("MemoryHistory", () => {
+  test("should initialize with root path", () => {
+    const history = new MemoryHistory();
+    assert.equal(history.length, 1);
+    assert.equal(history.state, null);
+  });
+  describe("pushState", () => {
+    test("should add new entry", () => {
+      const history = new MemoryHistory();
+      history.pushState({ id: 1 }, "", "/page1");
+      assert.equal(history.length, 2);
+      assert.deepEqual(history.state, { id: 1 });
+    });
+    test("should clear forward history when pushing new state", () => {
+      const history = new MemoryHistory();
+      history.pushState({ id: 1 }, "", "/page1");
+      history.pushState({ id: 2 }, "", "/page2");
+      history.back();
+      history.pushState({ id: 3 }, "", "/page3");
+      assert.equal(history.length, 3);
+      assert.deepEqual(history.state, { id: 3 });
+    });
+  });
+  describe("replaceState", () => {
+    test("should replace current entry", () => {
+      const history = new MemoryHistory();
+      history.pushState({ id: 1 }, "", "/page1");
+      history.replaceState({ id: 2 }, "", "/page1-updated");
+      assert.equal(history.length, 2);
+      assert.deepEqual(history.state, { id: 2 });
+    });
+  });
+  describe("navigation", () => {
+    test("back() should navigate to previous entry", () => {
+      const history = new MemoryHistory();
+      history.pushState({ id: 1 }, "", "/page1");
+      history.pushState({ id: 2 }, "", "/page2");
+      history.back();
+      assert.deepEqual(history.state, { id: 1 });
+    });
+    test("forward() should navigate to next entry", () => {
+      const history = new MemoryHistory();
+      history.pushState({ id: 1 }, "", "/page1");
+      history.pushState({ id: 2 }, "", "/page2");
+      history.back();
+      history.forward();
+      assert.deepEqual(history.state, { id: 2 });
+    });
+    test("go() should navigate to specific delta", () => {
+      const history = new MemoryHistory();
+      history.pushState({ id: 1 }, "", "/page1");
+      history.pushState({ id: 2 }, "", "/page2");
+      history.pushState({ id: 3 }, "", "/page3");
+      history.go(-2);
+      assert.deepEqual(history.state, { id: 1 });
+      history.go(2);
+      assert.deepEqual(history.state, { id: 3 });
+    });
+    test("go() should not navigate beyond bounds", () => {
+      const history = new MemoryHistory();
+      history.pushState({ id: 1 }, "", "/page1");
+      const originalState = history.state;
+      history.go(-2);
+      assert.deepEqual(history.state, originalState);
+      history.go(2);
+      assert.deepEqual(history.state, originalState);
+    });
+    test("go() should do nothing when delta is 0 or undefined", () => {
+      const history = new MemoryHistory();
+      history.pushState({ id: 1 }, "", "/page1");
+      const originalState = history.state;
+      history.go(0);
+      assert.deepEqual(history.state, originalState);
+      history.go();
+      assert.deepEqual(history.state, originalState);
+    });
+  });
+});
+describe.concurrent("subscribeMemory", () => {
+  test("should preserve original go functionality after subscription", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    history.pushState({ id: 2 }, "", "/page2");
+    void history.onPopState(() => {
+    });
+    history.go(-1);
+    await sleep();
+    assert.equal(history.url, "/page1");
+    assert.deepEqual(history.state, { id: 1 });
+    history.go(1);
+    await sleep();
+    assert.equal(history.url, "/page2");
+    assert.deepEqual(history.state, { id: 2 });
+  });
+  test("should trigger callback only on actual navigation (like popstate)", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    history.pushState({ id: 2 }, "", "/page2");
+    const callbacks = [];
+    void history.onPopState((url, state) => {
+      callbacks.push({ url, state });
+    });
+    await awaitGo(history, -1);
+    assert.equal(callbacks.length, 1);
+    assert.equal(callbacks[0].url, "/page1");
+    assert.deepEqual(callbacks[0].state, { id: 1 });
+  });
+  test("should call callback multiple times for multiple navigation", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    history.pushState({ id: 2 }, "", "/page2");
+    history.pushState({ id: 3 }, "", "/page3");
+    const callbacks = [];
+    void history.onPopState((url, state) => {
+      callbacks.push({ url, state });
+    });
+    history.go(-1);
+    history.go(-1);
+    history.go(2);
+    await sleep();
+    assert.equal(callbacks.length, 3);
+    assert.deepEqual(callbacks, [
+      { url: "/page2", state: { id: 2 } },
+      { url: "/page1", state: { id: 1 } },
+      { url: "/page3", state: { id: 3 } }
+    ]);
+  });
+  test("should NOT trigger callback on pushState/replaceState (like real popstate)", async () => {
+    const history = new MemoryHistory();
+    const callbacks = [];
+    void history.onPopState((url, state) => {
+      callbacks.push({ url, state });
+    });
+    history.pushState({ id: 1 }, "", "/page1");
+    history.replaceState({ id: 2 }, "", "/page1-updated");
+    await sleep();
+    assert.equal(callbacks.length, 0);
+  });
+  test("should NOT trigger callback when go() with delta 0 (no actual navigation)", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    const callbacks = [];
+    void history.onPopState((url, state) => {
+      callbacks.push({ url, state });
+    });
+    history.go(0);
+    history.go();
+    await sleep();
+    assert.equal(callbacks.length, 0);
+  });
+  test("should NOT trigger callback when navigation is out of bounds", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    const callbacks = [];
+    void history.onPopState((url, state) => {
+      callbacks.push({ url, state });
+    });
+    history.go(-10);
+    await sleep();
+    history.go(10);
+    await sleep();
+    assert.equal(callbacks.length, 0);
+  });
+  test("should trigger callback for valid back/forward navigation", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    history.pushState({ id: 2 }, "", "/page2");
+    history.pushState({ id: 3 }, "", "/page3");
+    const callbacks = [];
+    void history.onPopState((url, state) => {
+      callbacks.push({ url, state });
+    });
+    history.back();
+    history.back();
+    history.forward();
+    history.go(1);
+    await sleep();
+    assert.equal(callbacks.length, 4);
+    assert.deepEqual(callbacks, [
+      { url: "/page2", state: { id: 2 } },
+      { url: "/page1", state: { id: 1 } },
+      { url: "/page2", state: { id: 2 } },
+      { url: "/page3", state: { id: 3 } }
+    ]);
+  });
+  test("should provide correct state and url in callback (like popstate event)", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ userId: 123, page: "profile" }, "", "/user/123");
+    history.pushState(
+      { userId: 456, page: "settings" },
+      "",
+      "/user/456/settings"
+    );
+    let callbackData = null;
+    void history.onPopState((url, state) => {
+      callbackData = { url, state };
+    });
+    await awaitGo(history, -1);
+    assert.isNotNull(callbackData);
+    assert.equal(callbackData.url, "/user/123");
+    assert.deepEqual(callbackData.state, {
+      userId: 123,
+      page: "profile"
+    });
+  });
+  test("should support multiple subscribers like multiple event listeners", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    history.pushState({ id: 2 }, "", "/page2");
+    const callbacks1 = [];
+    const callbacks2 = [];
+    void history.onPopState((url, state) => {
+      callbacks1.push({ url, state });
+    });
+    void history.onPopState((url, state) => {
+      callbacks2.push({ url, state });
+    });
+    await awaitGo(history, -1);
+    assert.equal(callbacks1.length, 1);
+    assert.deepEqual(callbacks1, [{ url: "/page1", state: { id: 1 } }]);
+    assert.equal(callbacks2.length, 1);
+    assert.deepEqual(callbacks2, [{ url: "/page1", state: { id: 1 } }]);
+  });
+  test("should return cleanup function to unsubscribe", () => {
+    const history = new MemoryHistory();
+    const unsubscribe = history.onPopState(() => {
+    });
+    assert.equal(typeof unsubscribe, "function");
+  });
+  test("cleanup function should stop triggering callbacks", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    history.pushState({ id: 2 }, "", "/page2");
+    const callbacks = [];
+    const unsubscribe = history.onPopState((url, state) => {
+      callbacks.push({ url, state });
+    });
+    await awaitGo(history, -1);
+    assert.equal(callbacks.length, 1);
+    unsubscribe();
+    await awaitGo(history, 1);
+    assert.equal(callbacks.length, 1);
+  });
+  test("should allow multiple subscriptions and cleanup only the current one", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    history.pushState({ id: 2 }, "", "/page2");
+    const callbacks1 = [];
+    const callbacks2 = [];
+    const callbacks3 = [];
+    void history.onPopState((url, state) => {
+      callbacks1.push({ url, state });
+    });
+    const unsubscribe2 = history.onPopState((url, state) => {
+      callbacks2.push({ url, state });
+    });
+    void history.onPopState((url, state) => {
+      callbacks3.push({ url, state });
+    });
+    await awaitGo(history, -1);
+    assert.equal(callbacks1.length, 1);
+    assert.deepEqual(callbacks1, [{ url: "/page1", state: { id: 1 } }]);
+    assert.equal(callbacks2.length, 1);
+    assert.deepEqual(callbacks2, [{ url: "/page1", state: { id: 1 } }]);
+    assert.equal(callbacks3.length, 1);
+    assert.deepEqual(callbacks3, [{ url: "/page1", state: { id: 1 } }]);
+    unsubscribe2();
+    await awaitGo(history, 1);
+    assert.equal(callbacks1.length, 2);
+    assert.equal(callbacks2.length, 1);
+    assert.equal(callbacks3.length, 2);
+  });
+  test("should not subscribe the same callback multiple times", async () => {
+    const history = new MemoryHistory();
+    history.pushState({ id: 1 }, "", "/page1");
+    history.pushState({ id: 2 }, "", "/page2");
+    const callbacks = [];
+    const callback = (url, state) => {
+      callbacks.push({ url, state });
+    };
+    const unSub1 = history.onPopState(callback);
+    const unSub2 = history.onPopState(callback);
+    await awaitGo(history, -1);
+    assert.equal(callbacks.length, 1);
+    assert.deepEqual(callbacks[0], { url: "/page1", state: { id: 1 } });
+    unSub1();
+    unSub2();
+    await awaitGo(history, 1);
+    assert.equal(callbacks.length, 1);
+    void history.onPopState(callback);
+    unSub1();
+    await awaitGo(history, -1);
+    assert.equal(callbacks.length, 1);
+  });
+});
+describe("Navigation", () => {
+  const createTestOptions = () => {
+    const baseOptions = {
+      context: {},
+      routes: [],
+      mode: RouterMode.memory,
+      base: new URL("http://test.com"),
+      req: null,
+      res: null,
+      apps: {},
+      normalizeURL: (url) => url,
+      fallback: () => {
+      },
+      rootStyle: false,
+      handleBackBoundary: () => {
+      },
+      handleLayerClose: () => {
+      }
+    };
+    return parsedOptions(baseOptions);
+  };
+  test("should provide access to history length", () => {
+    const nav = new Navigation({ mode: RouterMode.memory });
+    assert.equal(nav.length, 1);
+    const route1 = new Route({
+      options: createTestOptions(),
+      toType: RouteType.push,
+      toInput: { path: "/foo", state: { a: 1 } }
+    });
+    nav.push(route1);
+    assert.equal(nav.length, 2);
+    const route2 = new Route({
+      options: createTestOptions(),
+      toType: RouteType.push,
+      toInput: { path: "/bar", state: { b: 2 } }
+    });
+    nav.push(route2);
+    assert.equal(nav.length, 3);
+    const route3 = new Route({
+      options: createTestOptions(),
+      toType: RouteType.push,
+      toInput: { path: "/baz", state: { c: 3 } }
+    });
+    nav.replace(route3);
+    assert.equal(nav.length, 3);
+    nav.destroy();
+  });
+  test("should push and replace state correctly", () => {
+    const nav = new Navigation({ mode: RouterMode.memory });
+    const state1 = nav.push({ state: { a: 1 } }, "/foo");
+    assert.deepEqual(state1.state.a, 1);
+    const state2 = nav.replace({ state: { b: 2 } }, "/bar");
+    assert.deepEqual(state2.state.b, 2);
+    nav.destroy();
+  });
+  test("should resolve go/back/forward with correct url and state", async () => {
+    const nav = new Navigation({ mode: RouterMode.memory });
+    nav.push({ state: { a: 1 } }, "/a");
+    nav.push({ state: { b: 2 } }, "/b");
+    nav.push({ state: { c: 3 } }, "/c");
+    const res1 = await nav.go(-2);
+    assert.equal(res1 == null ? void 0 : res1.url, "/a");
+    assert.deepEqual((res1 == null ? void 0 : res1.state).state.a, 1);
+    const res2 = await nav.forward();
+    assert.equal(res2 == null ? void 0 : res2.url, "/b");
+    assert.deepEqual((res2 == null ? void 0 : res2.state).state.b, 2);
+    const res3 = await nav.back();
+    assert.equal(res3 == null ? void 0 : res3.url, "/a");
+    assert.deepEqual((res3 == null ? void 0 : res3.state).state.a, 1);
+    nav.destroy();
+  });
+  test("should call onUpdated callback on navigation", async () => {
+    const updates = [];
+    const nav = new Navigation(
+      { mode: RouterMode.memory },
+      (url, state) => updates.push({ url, state })
+    );
+    nav.push({ state: { a: 1 } }, "/a");
+    nav.push({ state: { b: 2 } }, "/b");
+    nav._history.back();
+    await sleep(100);
+    assert.ok(updates.length > 0);
+    assert.equal(updates[0].url, "/a");
+    nav.destroy();
+  });
+  test("should resolve null if go is called while pending", async () => {
+    const nav = new Navigation({ mode: RouterMode.memory });
+    nav.push(
+      new Route({
+        options: createTestOptions(),
+        toType: RouteType.push,
+        toInput: { path: "/a", state: { a: 1 } }
+      })
+    );
+    nav.push(
+      new Route({
+        options: createTestOptions(),
+        toType: RouteType.push,
+        toInput: { path: "/b", state: { b: 2 } }
+      })
+    );
+    const p1 = nav.go(-1);
+    const p2 = nav.go(1);
+    const r2 = await p2;
+    assert.equal(r2, null);
+    await p1;
+    nav.destroy();
+  });
+  test("should cleanup listeners on destroy", async () => {
+    const updates = [];
+    const nav = new Navigation(
+      { mode: RouterMode.memory },
+      (url, state) => updates.push({ url, state })
+    );
+    nav.push(
+      new Route({
+        options: createTestOptions(),
+        toType: RouteType.push,
+        toInput: { path: "/a", state: { a: 1 } }
+      })
+    );
+    nav.push(
+      new Route({
+        options: createTestOptions(),
+        toType: RouteType.push,
+        toInput: { path: "/b", state: { b: 2 } }
+      })
+    );
+    nav.destroy();
+    nav.go(-1);
+    const res = await nav.go(1);
+    assert.equal(res, null);
+    assert.equal(updates.length, 0);
+  });
+  describe("in history mode", () => {
+    let mockHistory;
+    let popstateHandler;
+    beforeEach(() => {
+      mockHistory = new MemoryHistory();
+      mockHistory.replaceState({ startPoint: true }, "", "/startPoint");
+      mockHistory.pushState = vi.fn(
+        mockHistory.pushState.bind(mockHistory)
+      );
+      mockHistory.replaceState = vi.fn(
+        mockHistory.replaceState.bind(mockHistory)
+      );
+      mockHistory.go = vi.fn(mockHistory.go.bind(mockHistory));
+      mockHistory.onPopState(() => popstateHandler == null ? void 0 : popstateHandler());
+      const mockLocation = {
+        get href() {
+          return mockHistory.url;
+        }
+      };
+      const mockAddEventListener = vi.fn((type, handler) => {
+        if (type === "popstate") popstateHandler = handler;
+      });
+      const mockRemoveEventListener = vi.fn((type, handler) => {
+        if (type === "popstate" && popstateHandler === handler) {
+          popstateHandler = null;
+        }
+      });
+      vi.stubGlobal("window", {
+        get history() {
+          return mockHistory;
+        },
+        get location() {
+          return mockLocation;
+        },
+        addEventListener: mockAddEventListener,
+        removeEventListener: mockRemoveEventListener
+      });
+      vi.stubGlobal("location", mockLocation);
+      vi.stubGlobal("history", mockHistory);
+    });
+    afterEach(() => {
+      vi.unstubAllGlobals();
+      popstateHandler = null;
+      mockHistory = null;
+    });
+    it("should call pushState/replaceState and handle go/back/forward", async () => {
+      const nav = new Navigation({ mode: RouterMode.history });
+      const state1 = nav.push({ state: { a: 1 } }, "/foo");
+      expect(mockHistory.pushState).toHaveBeenCalledWith(
+        expect.objectContaining({ state: { a: 1 } }),
+        "",
+        "/foo"
+      );
+      const state2 = nav.replace({ state: { b: 2 } }, "/bar");
+      expect(mockHistory.replaceState).toHaveBeenCalledWith(
+        expect.objectContaining({ state: { b: 2 } }),
+        "",
+        "/bar"
+      );
+      const res = await nav.go(-1);
+      expect(res).toEqual({
+        type: "success",
+        url: "/startPoint",
+        state: { startPoint: true }
+      });
+      nav.destroy();
+    });
+  });
+  describe("Uncovered branches tests", () => {
+    test("should handle null/undefined route.state in push method (line 43)", () => {
+      const nav = new Navigation({ mode: RouterMode.memory });
+      const routeWithNullState = new Route({
+        options: createTestOptions(),
+        toType: RouteType.push,
+        toInput: { path: "/test", state: null }
+      });
+      const state1 = nav.push(routeWithNullState);
+      assert.ok(state1);
+      assert.ok("__pageId__" in state1);
+      const routeWithUndefinedState = new Route({
+        options: createTestOptions(),
+        toType: RouteType.push,
+        toInput: { path: "/test2", state: void 0 }
+      });
+      const state2 = nav.push(routeWithUndefinedState);
+      assert.ok(state2);
+      assert.ok("__pageId__" in state2);
+      nav.destroy();
+    });
+    test("should handle null/undefined route.state in replace method (line 53)", () => {
+      const nav = new Navigation({ mode: RouterMode.memory });
+      nav.push(
+        new Route({
+          options: createTestOptions(),
+          toType: RouteType.push,
+          toInput: "/initial"
+        })
+      );
+      const routeWithNullState = new Route({
+        options: createTestOptions(),
+        toType: RouteType.push,
+        toInput: { path: "/test", state: null }
+      });
+      const state1 = nav.replace(routeWithNullState);
+      assert.ok(state1);
+      assert.ok("__pageId__" in state1);
+      const routeWithUndefinedState = new Route({
+        options: createTestOptions(),
+        toType: RouteType.push,
+        toInput: { path: "/test2", state: void 0 }
+      });
+      const state2 = nav.replace(routeWithUndefinedState);
+      assert.ok(state2);
+      assert.ok("__pageId__" in state2);
+      nav.destroy();
+    });
+    test("should call _promiseResolve when destroying with pending promise (line 82)", async () => {
+      const nav = new Navigation({ mode: RouterMode.memory });
+      nav.push(
+        new Route({
+          options: createTestOptions(),
+          toType: RouteType.push,
+          toInput: "/test1"
+        })
+      );
+      nav.push(
+        new Route({
+          options: createTestOptions(),
+          toType: RouteType.push,
+          toInput: "/test2"
+        })
+      );
+      const goPromise = nav.go(-1);
+      nav.destroy();
+      const result = await goPromise;
+      assert.equal(result, null);
+    });
+    test("should return null when _curEntry index is out of bounds (line 92)", () => {
+      const history = new MemoryHistory();
+      history._index = -1;
+      assert.equal(history._curEntry, null);
+      history._index = 999;
+      assert.equal(history._curEntry, null);
+    });
+    test("should return empty string when _curEntry.url is null/undefined (line 101)", () => {
+      const history = new MemoryHistory();
+      const mockEntry = { state: {}, url: void 0 };
+      history._entries = [mockEntry];
+      history._index = 0;
+      assert.equal(history.url, "");
+    });
+    test("should use this.url when pushState url parameter is null/undefined (line 108)", () => {
+      const history = new MemoryHistory();
+      const currentUrl = history.url;
+      history.pushState({ test: 1 }, "", null);
+      assert.equal(history.url, currentUrl);
+      history.pushState({ test: 2 }, "", void 0);
+      assert.equal(history.url, currentUrl);
+    });
+    test("should return early when curEntry is null in replaceState (line 128)", () => {
+      const history = new MemoryHistory();
+      history._index = -1;
+      const originalEntries = [...history._entries];
+      history.replaceState({ test: 1 }, "", "/test");
+      assert.deepEqual(history._entries, originalEntries);
+    });
+    test("should return empty function when cb is not a function in onPopState (line 152)", () => {
+      const history = new MemoryHistory();
+      const unsubscribe1 = history.onPopState(null);
+      const unsubscribe2 = history.onPopState(void 0);
+      const unsubscribe3 = history.onPopState("not a function");
+      const unsubscribe4 = history.onPopState(123);
+      assert.equal(typeof unsubscribe1, "function");
+      assert.equal(typeof unsubscribe2, "function");
+      assert.equal(typeof unsubscribe3, "function");
+      assert.equal(typeof unsubscribe4, "function");
+      assert.doesNotThrow(() => {
+        unsubscribe1();
+        unsubscribe2();
+        unsubscribe3();
+        unsubscribe4();
+      });
+    });
+    test("should handle null history.state in subscribeHtmlHistory (line 159)", () => {
+      const mockHistory = {
+        state: null
+        // Simulate history.state being null
+      };
+      const mockLocation = {
+        href: "http://test.com/page"
+      };
+      const mockWindow = {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn()
+      };
+      let capturedCallback = null;
+      mockWindow.addEventListener.mockImplementation(
+        (event, callback) => {
+          if (event === "popstate") {
+            capturedCallback = callback;
+          }
+        }
+      );
+      vi.stubGlobal("window", mockWindow);
+      vi.stubGlobal("history", mockHistory);
+      vi.stubGlobal("location", mockLocation);
+      const callbackData = [];
+      const nav = new Navigation(
+        { mode: RouterMode.history },
+        (url, state) => {
+          callbackData.push({ url, state });
+        }
+      );
+      expect(mockWindow.addEventListener).toHaveBeenCalledWith(
+        "popstate",
+        expect.any(Function)
+      );
+      if (capturedCallback) {
+        capturedCallback();
+      }
+      expect(callbackData.length).toBe(1);
+      expect(callbackData[0].url).toBe("http://test.com/page");
+      expect(callbackData[0].state).toEqual({});
+      nav.destroy();
+      vi.unstubAllGlobals();
+    });
+  });
+});

package/dist/options.d.ts

@@ -0,0 +1,4 @@
+import type { Router } from './router';
+import type { Route, RouterOptions, RouterParsedOptions } from './types';
+export declare function parsedOptions(options?: RouterOptions): RouterParsedOptions;
+export declare function fallback(to: Route, from: Route | null, router: Router): Window | null | undefined;