@esmx/router 3.0.0-rc.18 → 3.0.0-rc.20

package/dist/micro-app.d.ts

@@ -0,0 +1,18 @@
+import type { Router } from './router';
+import type { RouterMicroAppOptions } from './types';
+/**
+ * Resolves the root container element.
+ * Supports a DOM selector string or a direct HTMLElement.
+ *
+ * @param rootConfig - The root container configuration, can be a selector string or an HTMLElement.
+ * @returns The resolved HTMLElement.
+ */
+export declare function resolveRootElement(rootConfig?: string | HTMLElement): HTMLElement;
+export declare class MicroApp {
+    app: RouterMicroAppOptions | null;
+    root: HTMLElement | null;
+    private _factory;
+    _update(router: Router, force?: boolean): void;
+    private _getNextFactory;
+    destroy(): void;
+}

package/dist/micro-app.dom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/micro-app.dom.test.mjs

@@ -0,0 +1,532 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MicroApp, resolveRootElement } from "./micro-app.mjs";
+import { parsedOptions } from "./options.mjs";
+import { Route } from "./route.mjs";
+import { RouteType, RouterMode } from "./types.mjs";
+const createMockParsedConfig = (app) => ({
+  path: "/test",
+  compilePath: "/test",
+  children: [],
+  match: vi.fn(),
+  compile: vi.fn(),
+  meta: {},
+  app
+});
+const createMockRouter = (overrides = {}) => {
+  var _a;
+  const baseOptions = {
+    root: overrides.root || "#test-router",
+    context: {},
+    routes: [],
+    mode: RouterMode.memory,
+    base: new URL("https://example.com/"),
+    req: null,
+    res: null,
+    apps: ((_a = overrides.options) == null ? void 0 : _a.apps) || {},
+    normalizeURL: (url) => url,
+    fallback: () => {
+    },
+    rootStyle: false,
+    handleBackBoundary: () => {
+    },
+    handleLayerClose: () => {
+    }
+  };
+  const mockParsedOptions = {
+    ...parsedOptions(baseOptions),
+    ...overrides.parsedOptions
+  };
+  if (overrides.matched) {
+    const customMatched = overrides.matched.map(
+      (item) => createMockParsedConfig(item.app || "test-app")
+    );
+    mockParsedOptions.matcher = () => ({
+      matches: customMatched,
+      params: {}
+    });
+  }
+  const mockRoute = new Route({
+    options: mockParsedOptions,
+    toType: RouteType.push,
+    toInput: "/test"
+  });
+  return {
+    root: overrides.root || "#test-router",
+    route: mockRoute,
+    options: overrides.options || {},
+    parsedOptions: mockParsedOptions
+  };
+};
+const createMockApp = () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+  renderToString: vi.fn().mockResolvedValue("<div>rendered</div>")
+});
+describe("resolveRootElement", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+    document.body.innerHTML = "";
+  });
+  describe("Basic functionality tests", () => {
+    it("should return a div element when the parameter is empty", () => {
+      const result1 = resolveRootElement();
+      expect(result1).toBeInstanceOf(HTMLElement);
+      expect(result1.tagName).toBe("DIV");
+      const result2 = resolveRootElement(void 0);
+      expect(result2).toBeInstanceOf(HTMLElement);
+      expect(result2.tagName).toBe("DIV");
+    });
+    it("should correctly handle a directly passed HTMLElement", () => {
+      const element = document.createElement("div");
+      element.id = "test-element";
+      const result = resolveRootElement(element);
+      expect(result).toBe(element);
+      expect(result.id).toBe("test-element");
+    });
+    it("should correctly handle a string selector", () => {
+      const existingElement = document.createElement("div");
+      existingElement.id = "existing-element";
+      document.body.appendChild(existingElement);
+      const result = resolveRootElement("#existing-element");
+      expect(result).toBe(existingElement);
+    });
+    it("should create a new element when not found", () => {
+      const result = resolveRootElement("#non-existent");
+      expect(result).toBeInstanceOf(HTMLElement);
+      expect(result.tagName).toBe("DIV");
+      expect(result.id).toBe("");
+    });
+  });
+  describe("Selector type tests", () => {
+    it("should handle ID selectors", () => {
+      const existingElement = document.createElement("div");
+      existingElement.id = "app";
+      document.body.appendChild(existingElement);
+      const result = resolveRootElement("#app");
+      expect(result).toBeInstanceOf(HTMLElement);
+      expect(result.id).toBe("app");
+      const newResult = resolveRootElement("#new-app");
+      expect(newResult).toBeInstanceOf(HTMLElement);
+      expect(newResult.tagName).toBe("DIV");
+      expect(newResult.id).toBe("");
+    });
+    it("should handle class selectors", () => {
+      const element = document.createElement("div");
+      element.className = "app-container";
+      document.body.appendChild(element);
+      const result = resolveRootElement(".app-container");
+      expect(result).toBe(element);
+    });
+    it("should handle attribute selectors", () => {
+      const element = document.createElement("div");
+      element.setAttribute("data-app", "main");
+      document.body.appendChild(element);
+      const result = resolveRootElement('[data-app="main"]');
+      expect(result).toBe(element);
+    });
+    it("should handle tag selectors", () => {
+      const element = document.createElement("main");
+      document.body.appendChild(element);
+      const result = resolveRootElement("main");
+      expect(result).toBe(element);
+    });
+  });
+  describe("Edge case tests", () => {
+    it("should handle complex selectors", () => {
+      const container = document.createElement("div");
+      container.className = "container";
+      const app = document.createElement("div");
+      app.id = "app";
+      container.appendChild(app);
+      document.body.appendChild(container);
+      const result = resolveRootElement(".container #app");
+      expect(result).toBe(app);
+    });
+    it("should return the first matching element", () => {
+      const element1 = document.createElement("div");
+      element1.className = "multiple";
+      element1.textContent = "first";
+      const element2 = document.createElement("div");
+      element2.className = "multiple";
+      element2.textContent = "second";
+      document.body.appendChild(element1);
+      document.body.appendChild(element2);
+      const result = resolveRootElement(".multiple");
+      expect(result).toBe(element1);
+    });
+    it("should handle non-string, non-HTMLElement inputs", () => {
+      const result1 = resolveRootElement(123);
+      expect(result1).toBeInstanceOf(HTMLElement);
+      expect(result1.tagName).toBe("DIV");
+      const result2 = resolveRootElement({});
+      expect(result2).toBeInstanceOf(HTMLElement);
+      expect(result2.tagName).toBe("DIV");
+      const result3 = resolveRootElement([]);
+      expect(result3).toBeInstanceOf(HTMLElement);
+      expect(result3.tagName).toBe("DIV");
+    });
+  });
+  describe("Type safety tests", () => {
+    it("should return any type of element found", () => {
+      const svg = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      svg.id = "svg-element";
+      document.body.appendChild(svg);
+      const result = resolveRootElement("#svg-element");
+      expect(result).toBe(svg);
+      expect(result).toBeInstanceOf(SVGElement);
+    });
+    it("should handle non-element nodes like text nodes", () => {
+      const result = resolveRootElement("#non-existent-text");
+      expect(result).toBeInstanceOf(HTMLElement);
+    });
+  });
+});
+describe("MicroApp", () => {
+  let microApp;
+  beforeEach(() => {
+    microApp = new MicroApp();
+  });
+  afterEach(() => {
+    vi.clearAllMocks();
+    document.body.innerHTML = "";
+  });
+  describe("Initial state", () => {
+    it("should initialize with a null state", () => {
+      expect(microApp.app).toBeNull();
+      expect(microApp.root).toBeNull();
+      expect(microApp._factory).toBeNull();
+    });
+  });
+  describe("_getNextFactory", () => {
+    it("should get the app name from route match and return the corresponding factory", () => {
+      const mockFactory = vi.fn();
+      const router = createMockRouter({
+        matched: [{ app: "vue-app" }],
+        options: { apps: { "vue-app": mockFactory } }
+      });
+      const factory = microApp._getNextFactory(router);
+      expect(factory).toBe(mockFactory);
+    });
+    it("should return null if the app name does not exist", () => {
+      const router = createMockRouter({
+        matched: [{ app: "non-existent-app" }],
+        options: { apps: { "vue-app": vi.fn() } }
+      });
+      const factory = microApp._getNextFactory(router);
+      expect(factory).toBeNull();
+    });
+    it("should handle function-type apps in the match result", () => {
+      const mockFactory = vi.fn();
+      const router = createMockRouter({
+        matched: [{ app: mockFactory }]
+      });
+      const factory = microApp._getNextFactory(router);
+      expect(factory).toBe(mockFactory);
+    });
+    it("should handle options.apps being a function", () => {
+      const mockFactory = vi.fn();
+      const router = createMockRouter({
+        matched: [{ app: "any-app" }],
+        options: { apps: mockFactory }
+      });
+      const factory = microApp._getNextFactory(router);
+      expect(factory).toBe(mockFactory);
+    });
+    it("should return null when there are no match results", () => {
+      const router = createMockRouter({
+        matched: []
+      });
+      const factory = microApp._getNextFactory(router);
+      expect(factory).toBeNull();
+    });
+    it("should return null when options.apps is an empty object", () => {
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: {} }
+      });
+      const factory = microApp._getNextFactory(router);
+      expect(factory).toBeNull();
+    });
+  });
+  describe("_update method", () => {
+    it("should update the factory and create the application", () => {
+      const mockFactory = vi.fn().mockReturnValue(createMockApp());
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      microApp._update(router);
+      expect(microApp._factory).toBe(mockFactory);
+      expect(mockFactory).toHaveBeenCalledWith(router);
+      expect(microApp.app).not.toBeNull();
+      expect(microApp.root).not.toBeNull();
+    });
+    it("should skip update if factory has not changed and force=false", () => {
+      const mockFactory = vi.fn().mockReturnValue(createMockApp());
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      microApp._update(router);
+      expect(mockFactory).toHaveBeenCalledTimes(1);
+      microApp._update(router);
+      expect(mockFactory).toHaveBeenCalledTimes(1);
+    });
+    it("should force update when force=true", () => {
+      const mockFactory = vi.fn().mockReturnValue(createMockApp());
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      microApp._update(router);
+      expect(mockFactory).toHaveBeenCalledTimes(1);
+      microApp._update(router, true);
+      expect(mockFactory).toHaveBeenCalledTimes(2);
+    });
+    it("should set the application to null if there is no factory", () => {
+      const router = createMockRouter({
+        matched: [{ app: "non-existent" }],
+        options: { apps: {} }
+      });
+      microApp._update(router);
+      expect(microApp.app).toBeNull();
+      expect(microApp._factory).toBeNull();
+    });
+    it("should create a new root element and mount the application", () => {
+      const mockApp = createMockApp();
+      const mockFactory = vi.fn().mockReturnValue(mockApp);
+      const router = createMockRouter({
+        root: "#test-router",
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      microApp._update(router);
+      expect(microApp.root).toBeInstanceOf(HTMLElement);
+      expect(microApp.root.tagName).toBe("DIV");
+      expect(mockApp.mount).toHaveBeenCalledWith(microApp.root);
+      expect(document.body.contains(microApp.root)).toBe(true);
+    });
+    it("should use an existing root element", () => {
+      const existingElement = document.createElement("div");
+      existingElement.id = "test-router";
+      document.body.appendChild(existingElement);
+      const mockApp = createMockApp();
+      const mockFactory = vi.fn().mockReturnValue(mockApp);
+      const router = createMockRouter({
+        root: "#test-router",
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      microApp._update(router);
+      expect(microApp.root).toBe(existingElement);
+      expect(mockApp.mount).toHaveBeenCalledWith(existingElement);
+    });
+    it("should use the already set root element", () => {
+      const existingRoot = document.createElement("div");
+      existingRoot.id = "existing-root";
+      document.body.appendChild(existingRoot);
+      microApp.root = existingRoot;
+      const mockApp = createMockApp();
+      const mockFactory = vi.fn().mockReturnValue(mockApp);
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      microApp._update(router);
+      expect(microApp.root).toBe(existingRoot);
+      expect(mockApp.mount).toHaveBeenCalledWith(existingRoot);
+    });
+    it("should apply rootStyle styles", () => {
+      const mockApp = createMockApp();
+      const mockFactory = vi.fn().mockReturnValue(mockApp);
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } },
+        parsedOptions: {
+          rootStyle: { color: "red", fontSize: "16px" }
+        }
+      });
+      microApp._update(router);
+      expect(microApp.root.style.color).toBe("red");
+      expect(microApp.root.style.fontSize).toBe("16px");
+    });
+    it("should unmount the old application if it exists", () => {
+      const oldApp = createMockApp();
+      const newApp = createMockApp();
+      const oldFactory = vi.fn().mockReturnValue(oldApp);
+      const newFactory = vi.fn().mockReturnValue(newApp);
+      const router1 = createMockRouter({
+        matched: [{ app: "old-app" }],
+        options: { apps: { "old-app": oldFactory } }
+      });
+      microApp._update(router1);
+      expect(microApp.app).toBe(oldApp);
+      expect(oldApp.unmount).not.toHaveBeenCalled();
+      const router2 = createMockRouter({
+        matched: [{ app: "new-app" }],
+        options: { apps: { "new-app": newFactory } }
+      });
+      microApp._update(router2);
+      expect(oldApp.unmount).toHaveBeenCalled();
+      expect(microApp.app).toBe(newApp);
+    });
+    it("should append the root element to the body if not in DOM", () => {
+      const mockApp = createMockApp();
+      const mockFactory = vi.fn().mockReturnValue(mockApp);
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      microApp._update(router);
+      expect(document.body.contains(microApp.root)).toBe(true);
+    });
+    it("should not re-append an element already in the DOM", () => {
+      const existingElement = document.createElement("div");
+      existingElement.id = "test-router";
+      document.body.appendChild(existingElement);
+      const mockApp = createMockApp();
+      const mockFactory = vi.fn().mockReturnValue(mockApp);
+      const router = createMockRouter({
+        root: "#test-router",
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      const initialChildCount = document.body.children.length;
+      microApp._update(router);
+      expect(document.body.children.length).toBe(initialChildCount);
+      expect(microApp.root).toBe(existingElement);
+    });
+    it("should handle the case where the factory function is null", () => {
+      const router = createMockRouter({
+        matched: [],
+        options: { apps: {} }
+      });
+      microApp._update(router, true);
+      expect(microApp.app).toBeNull();
+      expect(microApp._factory).toBeNull();
+    });
+  });
+  describe("destroy method", () => {
+    it("should destroy the application and clean up the state", () => {
+      const mockApp = createMockApp();
+      const mockRoot = document.createElement("div");
+      document.body.appendChild(mockRoot);
+      microApp.app = mockApp;
+      microApp.root = mockRoot;
+      microApp._factory = vi.fn();
+      microApp.destroy();
+      expect(mockApp.unmount).toHaveBeenCalled();
+      expect(document.body.contains(mockRoot)).toBe(false);
+      expect(microApp.app).toBeNull();
+      expect(microApp.root).toBeNull();
+      expect(microApp._factory).toBeNull();
+    });
+    it("should safely handle empty state", () => {
+      expect(() => microApp.destroy()).not.toThrow();
+      expect(microApp.app).toBeNull();
+      expect(microApp.root).toBeNull();
+      expect(microApp._factory).toBeNull();
+    });
+    it("should handle partial state", () => {
+      const mockApp = createMockApp();
+      microApp.app = mockApp;
+      expect(() => microApp.destroy()).not.toThrow();
+      expect(mockApp.unmount).toHaveBeenCalled();
+      expect(microApp.app).toBeNull();
+    });
+  });
+  describe("integration tests", () => {
+    it("should fully handle the application lifecycle", () => {
+      const mockApp1 = createMockApp();
+      const mockApp2 = createMockApp();
+      const factory1 = vi.fn().mockReturnValue(mockApp1);
+      const factory2 = vi.fn().mockReturnValue(mockApp2);
+      const router1 = createMockRouter({
+        root: "#app1",
+        matched: [{ app: "app1" }],
+        options: { apps: { app1: factory1 } }
+      });
+      microApp._update(router1);
+      expect(factory1).toHaveBeenCalledWith(router1);
+      expect(mockApp1.mount).toHaveBeenCalledWith(microApp.root);
+      expect(microApp.app).toBe(mockApp1);
+      const router2 = createMockRouter({
+        root: "#app2",
+        matched: [{ app: "app2" }],
+        options: { apps: { app2: factory2 } }
+      });
+      microApp._update(router2);
+      expect(mockApp1.unmount).toHaveBeenCalled();
+      expect(factory2).toHaveBeenCalledWith(router2);
+      expect(mockApp2.mount).toHaveBeenCalledWith(microApp.root);
+      expect(microApp.app).toBe(mockApp2);
+      microApp.destroy();
+      expect(mockApp2.unmount).toHaveBeenCalled();
+      expect(document.body.contains(microApp.root)).toBe(false);
+      expect(microApp.app).toBeNull();
+      expect(microApp.root).toBeNull();
+    });
+    it("should handle complex route application configuration", () => {
+      const mockApp = createMockApp();
+      const dynamicFactory = vi.fn().mockReturnValue(mockApp);
+      const router = createMockRouter({
+        matched: [{ app: dynamicFactory }],
+        options: { apps: {} }
+      });
+      microApp._update(router);
+      expect(dynamicFactory).toHaveBeenCalledWith(router);
+      expect(mockApp.mount).toHaveBeenCalledWith(microApp.root);
+      expect(microApp.app).toBe(mockApp);
+    });
+    it("should correctly handle rootStyle being false", () => {
+      const mockApp = createMockApp();
+      const mockFactory = vi.fn().mockReturnValue(mockApp);
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } },
+        parsedOptions: { rootStyle: false }
+      });
+      microApp._update(router);
+      expect(microApp.root.style.cssText).toBe("");
+    });
+  });
+  describe("boundary case tests", () => {
+    it("should handle the case where route.matched is an empty array", () => {
+      const router = createMockRouter({
+        matched: []
+      });
+      expect(() => microApp._update(router)).not.toThrow();
+      expect(microApp.app).toBeNull();
+    });
+    it("should handle the case where route.matched[0] does not have an app attribute", () => {
+      const router = createMockRouter({
+        matched: [{}]
+      });
+      expect(() => microApp._update(router)).not.toThrow();
+      expect(microApp.app).toBeNull();
+    });
+    it("should handle the case where the factory function returns null", () => {
+      const mockFactory = vi.fn().mockReturnValue(null);
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      microApp._update(router);
+      expect(mockFactory).toHaveBeenCalledWith(router);
+      expect(microApp.app).toBeNull();
+    });
+    it("should handle the case where the factory function throws an exception", () => {
+      const mockFactory = vi.fn().mockImplementation(() => {
+        throw new Error("Factory error");
+      });
+      const router = createMockRouter({
+        matched: [{ app: "test-app" }],
+        options: { apps: { "test-app": mockFactory } }
+      });
+      expect(() => microApp._update(router)).toThrow("Factory error");
+    });
+  });
+});

package/dist/micro-app.mjs

@@ -0,0 +1,80 @@
+import { isBrowser, isPlainObject } from "./util.mjs";
+export function resolveRootElement(rootConfig) {
+  let el = null;
+  if (rootConfig instanceof HTMLElement) {
+    el = rootConfig;
+  }
+  if (typeof rootConfig === "string" && rootConfig) {
+    try {
+      el = document.querySelector(rootConfig);
+    } catch (error) {
+      console.warn(`Failed to resolve root element: ${rootConfig}`);
+    }
+  }
+  if (el === null) {
+    el = document.createElement("div");
+  }
+  return el;
+}
+export class MicroApp {
+  app = null;
+  root = null;
+  _factory = null;
+  _update(router, force = false) {
+    const factory = this._getNextFactory(router);
+    if (!force && factory === this._factory) {
+      return;
+    }
+    const oldApp = this.app;
+    const app = factory ? factory(router) : null;
+    if (isBrowser && app) {
+      let root = this.root;
+      if (root === null) {
+        root = resolveRootElement(router.root);
+        const { rootStyle } = router.parsedOptions;
+        if (root && isPlainObject(rootStyle)) {
+          Object.assign(root.style, router.parsedOptions.rootStyle);
+        }
+      }
+      if (root) {
+        app.mount(root);
+        if (root.parentNode === null) {
+          document.body.appendChild(root);
+        }
+        this.root = root;
+      }
+      if (oldApp) {
+        oldApp.unmount();
+      }
+    }
+    this.app = app;
+    this._factory = factory;
+  }
+  _getNextFactory({
+    route,
+    options
+  }) {
+    if (!route.matched || route.matched.length === 0) {
+      return null;
+    }
+    const name = route.matched[0].app;
+    if (typeof name === "string" && options.apps && typeof options.apps === "object") {
+      return options.apps[name] || null;
+    }
+    if (typeof name === "function") {
+      return name;
+    }
+    if (typeof options.apps === "function") {
+      return options.apps;
+    }
+    return null;
+  }
+  destroy() {
+    var _a, _b;
+    (_a = this.app) == null ? void 0 : _a.unmount();
+    this.app = null;
+    (_b = this.root) == null ? void 0 : _b.remove();
+    this.root = null;
+    this._factory = null;
+  }
+}

package/dist/navigation.d.ts

@@ -0,0 +1,43 @@
+import type { RouteState, RouterParsedOptions } from './types';
+type NavigationSubscribe = (url: string, state: RouteState) => void;
+type NavigationGoResult = null | {
+    type: 'success';
+    url: string;
+    state: RouteState;
+};
+export declare class Navigation {
+    readonly options: RouterParsedOptions;
+    private readonly _history;
+    private readonly _unSubscribePopState;
+    private _promiseResolve;
+    constructor(options: RouterParsedOptions, onUpdated?: NavigationSubscribe);
+    get length(): number;
+    private _push;
+    private _replace;
+    push(data: any, url?: string | URL | null): RouteState;
+    replace(data: any, url?: string | URL | null): RouteState;
+    pushHistoryState(data: any, url?: string | URL | null): void;
+    replaceHistoryState(data: any, url?: string | URL | null): void;
+    go(index: number): Promise<NavigationGoResult>;
+    forward(): Promise<NavigationGoResult>;
+    back(): Promise<NavigationGoResult>;
+    destroy(): void;
+}
+export declare class MemoryHistory implements History {
+    private _entries;
+    private _index;
+    private get _curEntry();
+    private readonly _popStateCbs;
+    scrollRestoration: ScrollRestoration;
+    get state(): any;
+    get url(): string;
+    constructor();
+    get length(): number;
+    pushState(data: any, unused: string, url?: string | URL | null): void;
+    replaceState(data: any, unused: string, url?: string | URL | null): void;
+    back(): void;
+    forward(): void;
+    go(delta?: number): void;
+    onPopState(cb: NavigationSubscribe): () => void;
+}
+export {};