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

package/dist/router.mjs

@@ -1,399 +1,298 @@
-import URLParse from "url-parse";
-import { createHistory } from "./history/index.mjs";
-import { createRouterMatcher } from "./matcher/index.mjs";
-import {
-  RouterMode,
-  StateLayerConfigKey
-} from "./types/index.mjs";
-import { inBrowser, normalizePath, regexDomain } from "./utils/index.mjs";
-const baseValue = Number(Date.now());
-let layerIdOffset = 0;
-function getLatestLayerId() {
-  return baseValue + ++layerIdOffset;
-}
+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 { RouteType, RouterMode } from "./types.mjs";
+import { isNotNullish, isPlainObject, isRouteMatched } from "./util.mjs";
 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) {
-    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
-          });
-        }
-      }
-      (_e = registerConfig.config) == null ? void 0 : _e.updated();
-    }
-    if (curAppType !== appType && curRegisterConfig) {
-      (_f = curRegisterConfig.config) == null ? void 0 : _f.destroy();
-      curRegisterConfig.mounted = false;
+  parsedOptions;
+  isLayer;
+  navigation;
+  microApp = new MicroApp();
+  // Route transition manager
+  transition = new RouteTransition(this);
+  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()."
+      );
     }
+    return route;
   }
-  /* 应用路由 */
-  applyRoute(route) {
-    let url = "";
-    const { fullPath } = route;
-    if (inBrowser && !regexDomain.test(fullPath)) {
-      url = normalizePath(fullPath, location.origin);
-    } else {
-      url = normalizePath(fullPath);
-    }
-    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
-    );
+  get root() {
+    return this.parsedOptions.root;
   }
-  /* 解析路由 */
-  resolve(location2) {
-    return this.history.resolve(location2);
+  get req() {
+    return this.parsedOptions.req ?? null;
   }
-  /**
-   * 新增单个路由匹配规则
-   */
-  // addRoutes(routes: RouteConfig[]) {
-  //     this.matcher.addRoutes(routes);
-  // }
-  /**
-   * 新增多个路由匹配规则
-   */
-  // addRoute(route: RouteConfig): void {
-  //     this.matcher.addRoute(route);
-  // }
-  /* 初始化 */
-  async init(options = {}) {
-    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;
+  get res() {
+    return this.parsedOptions.res ?? null;
   }
-  /**
-   * 卸载方法
-   */
-  async destroy() {
+  constructor(options) {
+    this.options = options;
+    this.parsedOptions = parsedOptions(options);
+    this.isLayer = this.parsedOptions.layer;
+    this.navigation = new Navigation(
+      this.parsedOptions,
+      (url, state) => {
+        this.transition.to(RouteType.unknown, {
+          url,
+          state
+        });
+      }
+    );
   }
-  /* 已注册的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 ?? 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;
+    return new Route({
+      options: this.parsedOptions,
+      toType,
+      toInput,
+      from: ((_a = this.transition.route) == null ? void 0 : _a.url) ?? null
+    });
   }
   /**
-   * 打开路由弹层方法，会创建新的路由实例并调用注册的 register 方法
-   * 服务端会使用 push 作为替代
+   * Check if the route matches the current route
+   *
+   * @param targetRoute 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(targetRoute, matchType = "include") {
+    const currentRoute = this.transition.route;
+    if (!currentRoute) return false;
+    return isRouteMatched(currentRoute, targetRoute, 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.getEventHandlers(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) {
+    const layerOptions = (isPlainObject(toInput) ? toInput.layer : null) || {};
+    const zIndex = layerOptions.zIndex ?? this.parsedOptions.zIndex + LAYER_ID.next();
+    let promiseResolve;
+    const 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({
+      ...this.options,
+      mode: RouterMode.memory,
+      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"
+      },
+      root: 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));
-      }
-    });
-    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();
-      } else {
-        router.freeze();
-      }
-    });
-    destroyList.forEach((id) => {
-      const layer = this.layerMap[id];
-      if (!layer.destroyed) {
-        const { router, config } = layer;
-        config.destroy();
-        router.destroy();
-        router.freeze();
-        layer.destroyed = true;
-      }
+      },
+      layer: true
     });
-    createList.forEach((id) => {
-      const layer = this.layerMap[id];
-      if (layer.destroyed) {
-        const { router, config } = layer;
-        config.mount();
-        router.unfreeze();
-        layer.destroyed = false;
+    await router.replace(toInput);
+    router.afterEach((to, from) => {
+      if (layerOptions.shouldClose) {
+        const result = layerOptions.shouldClose(to, from, router);
+        if (result === false) {
+          router.destroy();
+          promiseResolve({
+            type: "push",
+            route: to
+          });
+        }
       }
     });
-    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
+      );
+    }
+    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));
+      return result ?? null;
+    } catch (e) {
+      if (throwError) throw e;
+      else console.error(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);
-}