@esmx/router 3.0.0-rc.12 → 3.0.0-rc.120

package/dist/router.mjs

@@ -1,399 +1,366 @@
-import URLParse from "url-parse";
-import { createHistory } from "./history/index.mjs";
-import { createRouterMatcher } from "./matcher/index.mjs";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { LAYER_ID } from "./increment-id.mjs";
+import { MicroApp } from "./micro-app.mjs";
+import { Navigation } from "./navigation.mjs";
+import { parsedOptions } from "./options.mjs";
+import { Route } from "./route.mjs";
+import { RouteTransition } from "./route-transition.mjs";
+import { createLinkResolver } from "./router-link.mjs";
+import { RouterMode, RouteType } from "./types.mjs";
 import {
-  RouterMode,
-  StateLayerConfigKey
-} from "./types";
-import { inBrowser, normalizePath, regexDomain } from "./utils/index.mjs";
-const baseValue = Number(Date.now());
-let layerIdOffset = 0;
-function getLatestLayerId() {
-  return baseValue + ++layerIdOffset;
-}
+  isNotNullish,
+  isPlainObject,
+  isRouteMatched,
+  validateSsrRootElement
+} from "./util.mjs";
+const LAYER_SKIP_TYPES = /* @__PURE__ */ new Set([
+  RouteType.pushWindow,
+  RouteType.replaceWindow,
+  RouteType.replace,
+  RouteType.restartApp,
+  RouteType.pushLayer
+]);
 export class Router {
-  /**
-   * 当前路由对象的上级路由对象
-   */
-  parent = null;
-  /* 路由配置 */
-  options;
-  /**
-   * 路由固定前置路径
-   * 需要注意的是如果使用函数返回 base，需要尽量保证相同的路径返回相同base
-   */
-  base;
-  /* 路由模式 */
-  mode;
-  /* 路由匹配器 */
-  matcher;
-  /* 路由history类 */
-  history;
-  /* 滚动行为 */
-  scrollBehavior;
-  /* 当前路由信息 */
-  route = {
-    href: "",
-    origin: "",
-    host: "",
-    protocol: "",
-    hostname: "",
-    port: "",
-    pathname: "",
-    search: "",
-    hash: "",
-    params: {},
-    query: {},
-    queryArray: {},
-    state: {},
-    meta: {},
-    base: "",
-    path: "",
-    fullPath: "",
-    matched: []
-  };
   constructor(options) {
+    __publicField(this, "options");
+    __publicField(this, "parsedOptions");
+    __publicField(this, "isLayer");
+    __publicField(this, "navigation");
+    __publicField(this, "microApp", new MicroApp());
+    // Route transition manager
+    __publicField(this, "transition", new RouteTransition(this));
     this.options = options;
-    this.matcher = createRouterMatcher(options.routes || []);
-    this.mode = options.mode || (inBrowser ? RouterMode.HISTORY : RouterMode.ABSTRACT);
-    this.base = options.base || "";
-    this.scrollBehavior = options.scrollBehavior || ((to, from, savedPosition) => {
-      if (savedPosition) return savedPosition;
-      return {
-        left: 0,
-        top: 0
-      };
-    });
-    this.history = createHistory({
-      router: this,
-      mode: this.mode
-    });
-  }
-  /* 更新路由 */
-  updateRoute(route) {
-    var _a, _b, _c, _d, _e, _f;
-    const curAppType = (_b = (_a = this.route) == null ? void 0 : _a.matched[0]) == null ? void 0 : _b.appType;
-    const appType = (_c = route.matched[0]) == null ? void 0 : _c.appType;
-    this.applyRoute(route);
-    const curRegisterConfig = curAppType && this.registeredConfigMap[curAppType];
-    const registerConfig = appType && this.registeredConfigMap[appType];
-    if (registerConfig) {
-      const { mounted, generator } = registerConfig;
-      if (!mounted) {
-        registerConfig.config = generator(this);
-        (_d = registerConfig.config) == null ? void 0 : _d.mount();
-        registerConfig.mounted = true;
-        this.layerMap[this.layerId] = {
-          router: this,
-          config: registerConfig.config,
-          destroyed: false
-        };
-        if (!this.layerConfigList.find(
-          (item) => item.id === this.layerId
-        )) {
-          this.layerConfigList.push({
-            id: this.layerId,
-            depth: 0
-          });
-        }
+    this.parsedOptions = parsedOptions(options);
+    this.isLayer = this.parsedOptions.layer;
+    this.navigation = new Navigation(
+      this.parsedOptions,
+      (url, state) => {
+        this.transition.to(RouteType.unknown, {
+          url,
+          state
+        });
       }
-      (_e = registerConfig.config) == null ? void 0 : _e.updated();
-    }
-    if (curAppType !== appType && curRegisterConfig) {
-      (_f = curRegisterConfig.config) == null ? void 0 : _f.destroy();
-      curRegisterConfig.mounted = false;
-    }
+    );
   }
-  /* 应用路由 */
-  applyRoute(route) {
-    let url = "";
-    const { fullPath } = route;
-    if (inBrowser && !regexDomain.test(fullPath)) {
-      url = normalizePath(fullPath, location.origin);
-    } else {
-      url = normalizePath(fullPath);
+  get route() {
+    const route = this.transition.route;
+    if (route === null) {
+      throw new Error(
+        "No active route found. Please navigate to a route first using router.push() or router.replace()."
+      );
     }
-    const {
-      hash,
-      host,
-      hostname,
-      href,
-      origin,
-      pathname,
-      port,
-      protocol,
-      query
-    } = new URLParse(url);
-    Object.assign(
-      this.route,
-      {
-        href,
-        origin,
-        host,
-        protocol,
-        hostname,
-        port,
-        pathname,
-        search: query,
-        hash
-      },
-      route
-    );
+    return route;
   }
-  /* 解析路由 */
-  resolve(location2) {
-    return this.history.resolve(location2);
+  get context() {
+    return this.parsedOptions.context;
   }
-  /**
-   * 新增单个路由匹配规则
-   */
-  // addRoutes(routes: RouteConfig[]) {
-  //     this.matcher.addRoutes(routes);
-  // }
-  /**
-   * 新增多个路由匹配规则
-   */
-  // addRoute(route: RouteConfig): void {
-  //     this.matcher.addRoute(route);
-  // }
-  /* 初始化 */
-  async init(options = {}) {
+  get data() {
+    return this.parsedOptions.data;
+  }
+  get appId() {
+    return this.parsedOptions.appId;
+  }
+  get mode() {
+    return this.parsedOptions.mode;
+  }
+  get base() {
+    return this.parsedOptions.base;
+  }
+  get req() {
     var _a;
-    const { parent = null, route, replace = true } = options;
-    await this.history.init({
-      replace
-    });
-    const layerId = getLatestLayerId();
-    this.layerId = layerId;
-    let layerMap = {};
-    let layerConfigList = [];
-    if (parent && route) {
-      const appType = (_a = route.matched[0]) == null ? void 0 : _a.appType;
-      if (!appType) return;
-      const registerConfig = parent.registeredConfigMap[appType];
-      if (!registerConfig) return;
-      parent.freeze();
-      this.registeredConfigMap = parent.registeredConfigMap;
-      const { generator } = registerConfig;
-      const config = generator(this);
-      config.mount();
-      config.updated();
-      layerMap = parent.layerMap;
-      layerMap[layerId] = {
-        router: this,
-        config,
-        destroyed: false
-      };
-      layerConfigList = parent.layerConfigList;
-    }
-    if (!layerConfigList.find((item) => item.id === layerId)) {
-      layerConfigList.push({
-        id: layerId,
-        depth: 0
-      });
-    }
-    this.parent = parent;
-    this.layerMap = layerMap;
-    this.layerConfigList = layerConfigList;
+    return (_a = this.parsedOptions.req) != null ? _a : null;
   }
-  /**
-   * 卸载方法
-   */
-  async destroy() {
+  get res() {
+    var _a;
+    return (_a = this.parsedOptions.res) != null ? _a : null;
   }
-  /* 已注册的app配置 */
-  registeredConfigMap = {};
-  /* app配置注册 */
-  register(name, config) {
-    this.registeredConfigMap[name] = {
-      generator: config,
-      mounted: false
-    };
+  push(toInput) {
+    return this.transition.to(RouteType.push, toInput);
   }
-  /* 全局路由守卫 */
-  guards = {
-    beforeEach: [],
-    afterEach: []
-  };
-  /* 注册全局路由前置守卫 */
-  beforeEach(guard) {
-    this.guards.beforeEach.push(guard);
+  replace(toInput) {
+    return this.transition.to(RouteType.replace, toInput);
   }
-  /* 卸载全局路由前置守卫 */
-  unBindBeforeEach(guard) {
-    const i = this.guards.beforeEach.findIndex((item) => item === guard);
-    this.guards.beforeEach.splice(i, 1);
+  pushWindow(toInput) {
+    return this.transition.to(RouteType.pushWindow, toInput);
   }
-  /* 注册全局路由后置守卫 */
-  afterEach(guard) {
-    this.guards.afterEach.push(guard);
+  replaceWindow(toInput) {
+    return this.transition.to(RouteType.replaceWindow, toInput);
   }
-  /* 卸载全局路由后置守卫 */
-  unBindAfterEach(guard) {
-    const i = this.guards.afterEach.findIndex((item) => item === guard);
-    this.guards.afterEach.splice(i, 1);
+  restartApp(toInput) {
+    return this.transition.to(
+      RouteType.restartApp,
+      toInput != null ? toInput : this.route.url.href
+    );
   }
-  /* 路由跳转方法，会创建新的历史记录 */
-  async push(location2) {
-    await this.history.push(location2);
+  async back() {
+    const result = await this.navigation.go(-1);
+    if (result === null) {
+      this.parsedOptions.handleBackBoundary(this);
+      return null;
+    }
+    return this.transition.to(RouteType.back, {
+      url: result.url,
+      state: result.state
+    });
   }
-  /* 路由跳转方法，会替换当前的历史记录 */
-  async replace(location2) {
-    await this.history.replace(location2);
+  async go(index) {
+    if (index === 0) return null;
+    const result = await this.navigation.go(index);
+    if (result === null) {
+      if (index < 0) {
+        this.parsedOptions.handleBackBoundary(this);
+      }
+      return null;
+    }
+    return this.transition.to(RouteType.go, {
+      url: result.url,
+      state: result.state
+    });
   }
-  /**
-   * 当前路由弹层id，用于区分不同的路由弹层
-   */
-  layerId = 0;
-  /**
-   * 路由弹层配置
-   * key为路由弹层id
-   */
-  layerConfigList = [];
-  /**
-   * 路由弹层id与路由实例的map
-   */
-  layerMap = {};
-  /**
-   * 路由是否冻结
-   */
-  isFrozen = false;
-  /**
-   * 路由冻结方法
-   */
-  freeze() {
-    this.isFrozen = true;
+  async forward() {
+    const result = await this.navigation.go(1);
+    if (result === null) return null;
+    return this.transition.to(RouteType.forward, {
+      url: result.url,
+      state: result.state
+    });
   }
   /**
-   * 路由解冻方法
+   * Parse route location without performing actual navigation
+   *
+   * This method is used to parse route configuration and return the corresponding route object,
+   * but does not trigger actual page navigation. It is mainly used for the following scenarios:
+   * - Generate link URLs without jumping
+   * - Pre-check route matching
+   * - Get route parameters, meta information, etc.
+   * - Test the validity of route configuration
+   *
+   * @param toInput Target route location, can be a string path or route configuration object
+   * @returns Parsed route object containing complete route information
+   *
+   * @example
+   * ```typescript
+   * // Parse string path
+   * const route = router.resolve('/user/123');
+   * const url = route.url.href; // Get complete URL
+   *
+   * // Parse named route
+   * const userRoute = router.resolve({
+   *   name: 'user',
+   *   params: { id: '123' }
+   * });
+   * console.log(userRoute.params.id); // '123'
+   *
+   * // Check route validity
+   * const testRoute = router.resolve('/some/path');
+   * if (testRoute.matched.length > 0) {
+   *   // Route matched successfully
+   * }
+   * ```
    */
-  unfreeze() {
-    this.isFrozen = false;
+  resolve(toInput, toType) {
+    var _a, _b;
+    return new Route({
+      options: this.parsedOptions,
+      toType,
+      toInput,
+      from: (_b = (_a = this.transition.route) == null ? void 0 : _a.url) != null ? _b : null
+    });
   }
   /**
-   * 打开路由弹层方法，会创建新的路由实例并调用注册的 register 方法
-   * 服务端会使用 push 作为替代
+   * Check if the route matches the current route
+   *
+   * @param toRoute Target route object to compare
+   * @param matchType Match type
+   * - 'route': Route-level matching, compare if route configurations are the same
+   * - 'exact': Exact matching, compare if paths are completely the same
+   * - 'include': Include matching, check if current path contains target path
+   * @returns Whether it matches
    */
-  async pushLayer(location2) {
-    if (this.isFrozen) return;
-    const route = this.resolve(location2);
-    if (route.fullPath === this.route.fullPath) return;
-    if (!inBrowser) {
-      this.push(location2);
-      return;
-    }
-    const router = createRouter({
-      ...this.options,
-      initUrl: route.fullPath
-    });
-    await router.init({ parent: this, route, replace: false });
+  isRouteMatched(toRoute, matchType = "include") {
+    const currentRoute = this.transition.route;
+    if (!currentRoute) return false;
+    return isRouteMatched(currentRoute, toRoute, matchType);
   }
   /**
-   * 更新路由弹层方法
-   * @param state 参数为history.state
-   * @description 没有传入 state 时使用当前配置更新 history.state，传入了 state 时使用传入的 state 更新当前配置
+   * Resolve router link configuration and return complete link data
+   *
+   * This method analyzes router link properties and returns a comprehensive
+   * link resolution result including route information, navigation functions,
+   * HTML attributes, and event handlers. It's primarily used for:
+   * - Framework-agnostic link component implementation
+   * - Generating link attributes and navigation handlers
+   * - Computing active states and CSS classes
+   * - Creating event handlers for different frameworks
+   *
+   * @param props Router link configuration properties
+   * @returns Complete link resolution result with all necessary data
+   *
+   * @example
+   * ```typescript
+   * // Basic link resolution
+   * const linkData = router.resolveLink({
+   *   to: '/user/123',
+   *   type: 'push'
+   * });
+   *
+   * // Access resolved data
+   * console.log(linkData.route.path); // '/user/123'
+   * console.log(linkData.attributes.href); // Full href URL
+   * console.log(linkData.isActive); // Active state
+   *
+   * // Use navigation function
+   * linkData.navigate(); // Programmatic navigation
+   *
+   * // Get event handlers for React
+   * const handlers = linkData.createEventHandlers(name => `on${name.charAt(0).toUpperCase() + name.slice(1)}`);
+   * // handlers.onClick for React
+   * ```
    */
-  checkLayerState(state) {
-    const stateLayerConfigList = state[StateLayerConfigKey] || [];
-    const layerConfigList = Object.keys(this.layerMap).map(Number);
-    const stateLayerIdList = stateLayerConfigList.map(({ id }) => id).filter((id) => {
-      return layerConfigList.includes(id);
+  resolveLink(props) {
+    return createLinkResolver(this, props);
+  }
+  async createLayer(toInput) {
+    var _a;
+    const layerOptions = isPlainObject(toInput) && toInput.layer || {};
+    const zIndex = (_a = layerOptions.zIndex) != null ? _a : this.parsedOptions.zIndex + LAYER_ID.next();
+    let promiseResolve;
+    let promise = new Promise((resolve) => {
+      promiseResolve = resolve;
     });
-    if (stateLayerIdList.length === 0) {
-      return false;
-    }
-    if (stateLayerIdList.length === 1 && stateLayerIdList[0] === this.layerId) {
-      return false;
-    }
-    const createList = [];
-    const destroyList = [];
-    Object.entries(this.layerMap).forEach(([key, value]) => {
-      if (stateLayerIdList.includes(Number(key))) {
-        if (value.destroyed) {
-          createList.push(Number(key));
+    const router = new Router({
+      rootStyle: {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        zIndex: String(zIndex),
+        background: "rgba(0,0,0,.6)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      ...this.options,
+      context: this.parsedOptions.context,
+      mode: RouterMode.memory,
+      appId: void 0,
+      ...layerOptions.routerOptions,
+      handleBackBoundary(router2) {
+        router2.destroy();
+        promiseResolve({
+          type: "close",
+          route: router2.route
+        });
+      },
+      handleLayerClose(router2, data) {
+        router2.destroy();
+        if (isNotNullish(data)) {
+          promiseResolve({
+            type: "success",
+            route: router2.route,
+            data
+          });
+        } else {
+          promiseResolve({
+            type: "close",
+            route: router2.route
+          });
         }
-      } else {
-        destroyList.push(Number(key));
-      }
+      },
+      layer: true
     });
-    if (createList.length === 0 && destroyList.length === 0) {
-      return false;
-    }
-    const activeId = Math.max(...stateLayerIdList);
-    layerConfigList.forEach((id) => {
-      const { router } = this.layerMap[id];
-      if (activeId === id) {
-        router.unfreeze();
+    const initRoute = await router.replace(toInput);
+    router.afterEach(async (to, from) => {
+      if (LAYER_SKIP_TYPES.has(to.type)) return;
+      let keepAlive = false;
+      if (layerOptions.keepAlive === "exact") {
+        keepAlive = to.path === initRoute.path;
+      } else if (layerOptions.keepAlive === "include") {
+        keepAlive = to.path.startsWith(initRoute.path);
+      } else if (typeof layerOptions.keepAlive === "function") {
+        keepAlive = await layerOptions.keepAlive(to, from, router);
       } else {
-        router.freeze();
+        if (layerOptions.shouldClose) {
+          console.warn(
+            "[esmx-router] RouteLayerOptions.shouldClose is deprecated. Use keepAlive instead. Note: shouldClose returns true to close, keepAlive returns true to keep alive."
+          );
+          keepAlive = !await layerOptions.shouldClose(
+            to,
+            from,
+            router
+          );
+        } else {
+          keepAlive = to.path === initRoute.path;
+        }
       }
-    });
-    destroyList.forEach((id) => {
-      const layer = this.layerMap[id];
-      if (!layer.destroyed) {
-        const { router, config } = layer;
-        config.destroy();
+      if (!keepAlive) {
         router.destroy();
-        router.freeze();
-        layer.destroyed = true;
+        promiseResolve({
+          type: "push",
+          route: to
+        });
       }
     });
-    createList.forEach((id) => {
-      const layer = this.layerMap[id];
-      if (layer.destroyed) {
-        const { router, config } = layer;
-        config.mount();
-        router.unfreeze();
-        layer.destroyed = false;
-      }
-    });
-    this.layerConfigList = stateLayerConfigList;
-    return true;
-  }
-  updateLayerState(route) {
-    const layerConfig = this.layerConfigList.find((item) => {
-      return item.id === this.layerId;
-    });
-    if (layerConfig) layerConfig.depth++;
-    const stateConfigList = this.layerConfigList.filter(({ id }) => {
-      var _a;
-      return !((_a = this.layerMap[id]) == null ? void 0 : _a.destroyed);
-    });
-    const state = {
-      ...history.state,
-      [StateLayerConfigKey]: stateConfigList
+    if (layerOptions.push) {
+      router.navigation.pushHistoryState(
+        router.route.state,
+        router.route.url
+      );
+      promise = promise.then(async (result) => {
+        await this.navigation.backHistoryState();
+        return result;
+      });
+    }
+    if (layerOptions.autoPush) {
+      promise = promise.then(async (result) => {
+        if (result.type === "push") {
+          await this.push(result.route.url.href);
+        }
+        return result;
+      });
+    }
+    return {
+      promise,
+      router
     };
-    window.history.replaceState(state, "", route.fullPath);
   }
-  /**
-   * 新开浏览器窗口的方法，在服务端会调用 push 作为替代
-   */
-  pushWindow(location2) {
-    this.history.pushWindow(location2);
+  async pushLayer(toInput) {
+    const result = await this.transition.to(RouteType.pushLayer, toInput);
+    return result.handleResult;
   }
-  /**
-   * 替换当前浏览器窗口的方法，在服务端会调用 replace 作为替代
-   */
-  replaceWindow(location2) {
-    this.history.replaceWindow(location2);
+  closeLayer(data) {
+    if (!this.isLayer) return;
+    this.parsedOptions.handleLayerClose(this, data);
   }
-  /* 前往特定路由历史记录的方法，可以在历史记录前后移动 */
-  go(delta = 0) {
-    this.history.go(delta);
+  async renderToString(throwError = false) {
+    var _a, _b;
+    try {
+      const result = await ((_b = (_a = this.microApp.app) == null ? void 0 : _a.renderToString) == null ? void 0 : _b.call(_a));
+      const trimmed = result == null ? void 0 : result.trim();
+      const hasContent = trimmed && trimmed.length > 0;
+      if (hasContent && process.env.NODE_ENV !== "production") {
+        validateSsrRootElement(trimmed);
+      }
+      const ssrAttr = hasContent ? " data-ssr" : "";
+      return '<div id="'.concat(this.appId, '"').concat(ssrAttr, ">").concat(result != null ? result : "", "</div>");
+    } catch (e) {
+      if (throwError) throw e;
+      else console.error("[@esmx/router] SSR render failed:", e);
+      return null;
+    }
   }
-  /* 路由历史记录前进方法 */
-  forward() {
-    this.history.forward();
+  beforeEach(guard) {
+    return this.transition.beforeEach(guard);
   }
-  /* 路由历史记录后退方法 */
-  back() {
-    this.history.back();
+  afterEach(guard) {
+    return this.transition.afterEach(guard);
   }
-  /* 根据获取当前所有活跃的路由Record对象 */
-  getRoutes() {
-    return this.matcher.getRoutes();
+  destroy() {
+    this.transition.destroy();
+    this.navigation.destroy();
+    this.microApp.destroy();
   }
 }
-export function createRouter(options) {
-  return new Router(options);
-}