@esmx/router 3.0.0-rc.12

package/dist/history/abstract.d.ts

@@ -0,0 +1,29 @@
+import type { Route, RouteRecord, RouterInstance, RouterRawLocation } from '../types';
+import { BaseRouterHistory } from './base';
+export declare class AbstractHistory extends BaseRouterHistory {
+    index: number;
+    stack: RouteRecord[];
+    constructor(router: RouterInstance);
+    init({ replace }?: {
+        replace?: boolean;
+    }): Promise<void>;
+    destroy(): void;
+    setupListeners(): void;
+    isSameHost(location: RouterRawLocation, route: Route): any;
+    handleOutside(location: RouterRawLocation, replace?: boolean, isTriggerWithWindow?: boolean): boolean;
+    push(location: RouterRawLocation): Promise<void>;
+    /**
+     * 新开浏览器窗口的方法，在服务端会调用 push 作为替代
+     */
+    pushWindow(location: RouterRawLocation): Promise<void>;
+    replace(location: RouterRawLocation): Promise<void>;
+    /**
+     * 替换当前浏览器窗口的方法，在服务端会调用 replace 作为替代
+     */
+    replaceWindow(location: RouterRawLocation): Promise<void>;
+    jump(location: RouterRawLocation, replace?: boolean): Promise<void>;
+    private _jump;
+    go(delta: number): void;
+    forward(): void;
+    back(): void;
+}

package/dist/history/abstract.mjs

@@ -0,0 +1,107 @@
+import { isPathWithProtocolOrDomain, normalizeLocation } from "../utils/index.mjs";
+import { BaseRouterHistory } from "./base.mjs";
+export class AbstractHistory extends BaseRouterHistory {
+  index;
+  stack;
+  constructor(router) {
+    super(router);
+    this.index = -1;
+    this.stack = [];
+    this.init();
+  }
+  async init({ replace } = { replace: true }) {
+    const { initUrl } = this.router.options;
+    if (initUrl !== void 0) {
+      if (replace) {
+        await this.replace(initUrl);
+      } else {
+        await this.push(initUrl);
+      }
+    }
+  }
+  destroy() {
+  }
+  // 设置监听函数
+  setupListeners() {
+  }
+  // 服务端判断是否是相同域名
+  isSameHost(location, route) {
+    const rawLocation = typeof location === "string" ? { path: location } : location;
+    if (rawLocation.path === void 0) {
+      rawLocation.path = this.current.fullPath;
+    }
+    const { base } = normalizeLocation(rawLocation, this.router.base);
+    return base.includes(route.hostname);
+  }
+  // 处理外站跳转逻辑
+  handleOutside(location, replace = false, isTriggerWithWindow = false) {
+    const { flag, route } = isPathWithProtocolOrDomain(location);
+    if (!flag) {
+      return false;
+    }
+    const router = this.router;
+    const { validateOutside, handleOutside } = router.options;
+    const isSameHost = this.isSameHost(location, route);
+    if (isSameHost && !(validateOutside == null ? void 0 : validateOutside({ router, location, route }))) {
+      return false;
+    }
+    handleOutside == null ? void 0 : handleOutside({
+      router,
+      route,
+      replace,
+      isTriggerWithWindow,
+      isSameHost
+    });
+    return true;
+  }
+  // 新增路由记录跳转
+  async push(location) {
+    await this.jump(location, false);
+  }
+  /**
+   * 新开浏览器窗口的方法，在服务端会调用 push 作为替代
+   */
+  async pushWindow(location) {
+    await this._jump(location, false, true);
+  }
+  // 替换当前路由记录跳转
+  async replace(location) {
+    await this.jump(location, true);
+  }
+  /**
+   * 替换当前浏览器窗口的方法，在服务端会调用 replace 作为替代
+   */
+  async replaceWindow(location) {
+    await this._jump(location, true, true);
+  }
+  // 跳转方法
+  async jump(location, replace = false) {
+    await this._jump(location, replace);
+  }
+  async _jump(location, replace = false, isTriggerWithWindow = false) {
+    if (this.handleOutside(location, replace, isTriggerWithWindow)) {
+      return;
+    }
+    await this.transitionTo(location, (route) => {
+      const index = replace ? this.index : this.index + 1;
+      this.stack = this.stack.slice(0, index).concat(route);
+    });
+  }
+  go(delta) {
+    const targetIndex = this.index + delta;
+    if (targetIndex < 0 || targetIndex >= this.stack.length) {
+      return;
+    }
+    const route = this.stack[targetIndex];
+    this.index = targetIndex;
+    this.updateRoute(route);
+  }
+  /* 路由历史记录前进方法 */
+  forward() {
+    this.go(1);
+  }
+  /* 路由历史记录后退方法 */
+  back() {
+    this.go(-1);
+  }
+}

package/dist/history/base.d.ts

@@ -0,0 +1,79 @@
+import { type Tasks } from '../task-pipe';
+import type { RouteRecord, RouterHistory, RouterInstance, RouterRawLocation } from '../types';
+export declare abstract class BaseRouterHistory implements RouterHistory {
+    /**
+     * 路由类实例
+     */
+    router: RouterInstance;
+    /**
+     * 路由是否冻结
+     */
+    get isFrozen(): any;
+    /**
+     * 匹配的当前路由
+     */
+    current: RouteRecord;
+    constructor(router: RouterInstance);
+    /**
+     * 更新当前路由
+     */
+    updateRoute(route: RouteRecord): void;
+    /**
+     * 解析路由
+     */
+    resolve(location: RouterRawLocation): RouteRecord;
+    /**
+     * 核心跳转方法
+     */
+    transitionTo(location: RouterRawLocation, onComplete?: (route: RouteRecord) => void): Promise<void>;
+    /**
+     * TODO 逻辑解耦，抽离到task
+     * 重定向方法
+     */
+    redirectTo(location: RouterRawLocation, from: RouteRecord, onComplete?: (route: RouteRecord) => void): Promise<void>;
+    tasks: Tasks | null;
+    abortTask(): Promise<void>;
+    /**
+     * 执行任务
+     * 任务分为三部分: 前置守卫（beforeEach、beforeEnter、beforeUpdate、beforeLeave）、加载路由（loadRoute）、后置守卫（afterEach）
+     * 根据触发方式不同,执行顺序分别为:
+     * 进入路由时: beforeEach -> beforeEnter -> loadRoute -> afterEach
+     * 更新路由时: beforeEach -> beforeUpdate -> afterEach
+     * 离开路由进入新路由时: beforeLeave -> beforeEach -> beforeEnter -> loadRoute -> afterEach
+     * @param from
+     * @param to
+     */
+    runTask(from: RouteRecord, to: RouteRecord, onComplete?: (route: RouteRecord) => void): Promise<void>;
+    /**
+     * 新开浏览器窗口的方法，在服务端会调用 push 作为替代
+     */
+    abstract pushWindow(location: RouterRawLocation): void;
+    /**
+     * 替换当前浏览器窗口的方法，在服务端会调用 replace 作为替代
+     */
+    abstract replaceWindow(location: RouterRawLocation): void;
+    /**
+     * 跳转方法，会创建新的历史纪录
+     */
+    abstract push(location: RouterRawLocation): Promise<void>;
+    /**
+     * 跳转方法，替换当前历史记录
+     */
+    abstract replace(location: RouterRawLocation): Promise<void>;
+    /**
+     * 路由移动到指定历史记录方法
+     */
+    abstract go(delta: number): void;
+    abstract forward(): void;
+    abstract back(): void;
+    /**
+     * 初始化方法
+     */
+    abstract init(params?: {
+        replace?: boolean;
+    }): Promise<void>;
+    /**
+     * 卸载方法
+     */
+    abstract destroy(): void;
+}

package/dist/history/base.mjs

@@ -0,0 +1,275 @@
+import { createTasks } from "../task-pipe/index.mjs";
+import {
+  isESModule,
+  isEqualRoute,
+  isSameRoute,
+  normalizeLocation,
+  stringifyPath
+} from "../utils/index.mjs";
+function createRouteRecord(route = {}) {
+  return {
+    base: "",
+    path: "/",
+    fullPath: "/",
+    meta: {},
+    matched: [],
+    query: {},
+    queryArray: {},
+    params: {},
+    hash: "",
+    state: {},
+    ...route
+  };
+}
+export class BaseRouterHistory {
+  /**
+   * 路由类实例
+   */
+  router;
+  /**
+   * 路由是否冻结
+   */
+  get isFrozen() {
+    return this.router.isFrozen;
+  }
+  /**
+   * 匹配的当前路由
+   */
+  current = createRouteRecord();
+  constructor(router) {
+    this.router = router;
+    Object.defineProperty(this, "router", {
+      enumerable: false
+    });
+  }
+  /**
+   * 更新当前路由
+   */
+  updateRoute(route) {
+    this.current = route;
+    this.router.updateRoute(route);
+  }
+  /**
+   * 解析路由
+   */
+  resolve(location) {
+    const rawLocation = typeof location === "string" ? { path: location } : location;
+    if (rawLocation.path === void 0) {
+      rawLocation.path = this.current.fullPath;
+    }
+    const { base, ...normalizedLocation } = normalizeLocation(
+      rawLocation,
+      this.router.base
+    );
+    const matcher = this.router.matcher.match(normalizedLocation, { base });
+    if (matcher) {
+      return matcher;
+    }
+    const {
+      path = "",
+      params = {},
+      query = {},
+      queryArray = {},
+      hash = "",
+      state = {}
+    } = normalizedLocation;
+    const route = createRouteRecord({
+      base,
+      fullPath: stringifyPath({
+        pathname: path,
+        query,
+        queryArray,
+        hash
+      }),
+      path,
+      params,
+      query,
+      queryArray,
+      hash,
+      state
+    });
+    return route;
+  }
+  /**
+   * 核心跳转方法
+   */
+  async transitionTo(location, onComplete) {
+    if (this.isFrozen) return;
+    const route = this.resolve(location);
+    this.abortTask();
+    if (isEqualRoute(this.current, route)) {
+      return;
+    }
+    await this.runTask(this.current, route, onComplete);
+  }
+  /**
+   * TODO 逻辑解耦，抽离到task
+   * 重定向方法
+   */
+  async redirectTo(location, from, onComplete) {
+    const route = this.resolve(location);
+    this.abortTask();
+    if (isEqualRoute(this.current, route)) {
+      return;
+    }
+    await this.runTask(
+      this.current,
+      {
+        ...route,
+        redirectedFrom: from
+      },
+      onComplete
+    );
+  }
+  /* 当前执行的任务 */
+  tasks = null;
+  /* 取消任务 */
+  async abortTask() {
+    var _a;
+    (_a = this.tasks) == null ? void 0 : _a.abort();
+  }
+  /**
+   * 执行任务
+   * 任务分为三部分: 前置守卫（beforeEach、beforeEnter、beforeUpdate、beforeLeave）、加载路由（loadRoute）、后置守卫（afterEach）
+   * 根据触发方式不同,执行顺序分别为:
+   * 进入路由时: beforeEach -> beforeEnter -> loadRoute -> afterEach
+   * 更新路由时: beforeEach -> beforeUpdate -> afterEach
+   * 离开路由进入新路由时: beforeLeave -> beforeEach -> beforeEnter -> loadRoute -> afterEach
+   * @param from
+   * @param to
+   */
+  async runTask(from, to, onComplete) {
+    var _a;
+    const {
+      beforeEach,
+      beforeEnter,
+      beforeUpdate,
+      beforeLeave,
+      afterEach,
+      loadRoute
+    } = getNavigationHooks(this.router, from, to);
+    const guardBeforeTasks = createTasks();
+    const guardAfterTasks = createTasks();
+    const loadRouteTasks = createTasks();
+    if (isSameRoute(from, to)) {
+      guardBeforeTasks.add([...beforeEach, ...beforeUpdate]);
+      guardAfterTasks.add(afterEach);
+    } else {
+      guardBeforeTasks.add([
+        ...beforeLeave,
+        ...beforeEach,
+        ...beforeEnter
+      ]);
+      loadRouteTasks.add(loadRoute);
+      guardAfterTasks.add(afterEach);
+    }
+    this.tasks = guardBeforeTasks;
+    await guardBeforeTasks.run({
+      cb: async (res) => {
+        var _a2;
+        switch (typeof res) {
+          case "boolean":
+            if (!res) {
+              (_a2 = this.tasks) == null ? void 0 : _a2.abort();
+            }
+            break;
+          case "undefined":
+            break;
+          default:
+            await this.redirectTo(res, from, onComplete);
+            break;
+        }
+      },
+      final: async () => {
+        this.tasks = loadRouteTasks;
+        await loadRouteTasks.run();
+      }
+    });
+    if (((_a = this.tasks) == null ? void 0 : _a.status) === "finished") {
+      this.tasks = null;
+      guardAfterTasks.run();
+      onComplete && onComplete(to);
+      this.updateRoute(to);
+    }
+  }
+}
+function getNavigationHooks(router, from, to) {
+  const beforeEach = router.guards.beforeEach.map((guard) => {
+    return () => {
+      return guard(from, to);
+    };
+  });
+  const afterEach = router.guards.afterEach.map((guard) => {
+    return () => {
+      return guard(from, to);
+    };
+  });
+  const { beforeLeave } = from.matched.reduce(
+    (acc, { beforeLeave: beforeLeave2 }) => {
+      if (beforeLeave2) {
+        acc.beforeLeave.unshift(() => {
+          return beforeLeave2(from, to);
+        });
+      }
+      return acc;
+    },
+    {
+      beforeLeave: []
+    }
+  );
+  const { beforeEnter, beforeUpdate } = to.matched.reduce(
+    (acc, { beforeEnter: beforeEnter2, beforeUpdate: beforeUpdate2 }) => {
+      if (beforeEnter2) {
+        acc.beforeEnter.push(() => {
+          return beforeEnter2(from, to);
+        });
+      }
+      if (beforeUpdate2) {
+        acc.beforeUpdate.push(() => {
+          return beforeUpdate2(from, to);
+        });
+      }
+      return acc;
+    },
+    {
+      beforeEnter: [],
+      beforeUpdate: []
+    }
+  );
+  const loadRoute = [
+    async () => {
+      return Promise.all(
+        to.matched.reduce((acc, route) => {
+          if (!route.component && route.asyncComponent) {
+            acc.push(
+              new Promise((resolve, reject) => {
+                if (!route.component && route.asyncComponent) {
+                  route.asyncComponent().then((resolved) => {
+                    if (!resolved) {
+                      reject(
+                        new Error(
+                          `Couldn't resolve component at "${route.path}". Ensure you passed a function that returns a promise.`
+                        )
+                      );
+                    }
+                    route.component = isESModule(resolved) ? resolved.default : resolved;
+                    resolve();
+                  });
+                }
+              })
+            );
+          }
+          return acc;
+        }, [])
+      );
+    }
+  ];
+  return {
+    beforeEach,
+    afterEach,
+    beforeEnter,
+    beforeUpdate,
+    beforeLeave,
+    loadRoute
+  };
+}

package/dist/history/html.d.ts

@@ -0,0 +1,22 @@
+import { type RouterInstance, type RouterRawLocation } from '../types';
+import { BaseRouterHistory } from './base';
+export declare class HtmlHistory extends BaseRouterHistory {
+    constructor(router: RouterInstance);
+    getCurrentLocation(): any;
+    onPopState: (e: PopStateEvent) => void;
+    init({ replace }?: {
+        replace?: boolean;
+    }): Promise<void>;
+    setupListeners(): void;
+    destroy(): void;
+    pushWindow(location: RouterRawLocation): void;
+    replaceWindow(location: RouterRawLocation): void;
+    handleOutside(location: RouterRawLocation, replace?: boolean, isTriggerWithWindow?: boolean): boolean;
+    push(location: RouterRawLocation): Promise<void>;
+    replace(location: RouterRawLocation): Promise<void>;
+    jump(location: RouterRawLocation, replace?: boolean): Promise<void>;
+    go(delta: number): void;
+    forward(): void;
+    protected timer: NodeJS.Timeout | null;
+    back(): void;
+}

package/dist/history/html.mjs

@@ -0,0 +1,181 @@
+import {
+  computeScrollPosition,
+  getKeepScrollPosition,
+  getSavedScrollPosition,
+  isPathWithProtocolOrDomain,
+  normalizeLocation,
+  openWindow,
+  saveScrollPosition,
+  scrollToPosition
+} from "../utils/index.mjs";
+import { BaseRouterHistory } from "./base.mjs";
+export class HtmlHistory extends BaseRouterHistory {
+  constructor(router) {
+    super(router);
+    if ("scrollRestoration" in window.history) {
+      window.history.scrollRestoration = "manual";
+    }
+  }
+  // 获取当前地址，包括 path query hash
+  getCurrentLocation() {
+    const { href } = window.location;
+    const { state } = window.history;
+    const { path, base, ...rest } = normalizeLocation(
+      href,
+      this.router.base
+    );
+    return {
+      path: path.replace(new RegExp(`^(${base})`), ""),
+      base,
+      ...rest,
+      state
+    };
+  }
+  onPopState = (e) => {
+    if (this.isFrozen) return;
+    if (this.router.checkLayerState(e.state)) return;
+    const current = Object.assign({}, this.current);
+    this.transitionTo(this.getCurrentLocation(), async (route) => {
+      const { state } = window.history;
+      saveScrollPosition(current.fullPath, computeScrollPosition());
+      setTimeout(async () => {
+        const keepScrollPosition = state.keepScrollPosition;
+        if (keepScrollPosition) {
+          return;
+        }
+        const savedPosition = getSavedScrollPosition(route.fullPath);
+        const position = await this.router.scrollBehavior(
+          current,
+          route,
+          savedPosition
+        );
+        const { nextTick } = this.router.options;
+        if (position) {
+          nextTick && await nextTick();
+          scrollToPosition(position);
+        }
+      });
+    });
+  };
+  async init({ replace } = { replace: true }) {
+    const { initUrl } = this.router.options;
+    let route = this.getCurrentLocation();
+    if (initUrl !== void 0) {
+      route = this.resolve(initUrl);
+    } else {
+      const state = history.state || {};
+      route.state = {
+        ...state,
+        _ancientRoute: state._ancientRoute ?? true
+        // 最古历史的标记, 在调用返回事件时如果有这个标记则直接调用没有历史记录的钩子
+      };
+    }
+    if (replace) {
+      await this.replace(route);
+    } else {
+      await this.push(route);
+    }
+    this.setupListeners();
+  }
+  // 设置监听函数
+  setupListeners() {
+    window.addEventListener("popstate", this.onPopState);
+  }
+  destroy() {
+    window.removeEventListener("popstate", this.onPopState);
+  }
+  pushWindow(location) {
+    if (this.isFrozen) return;
+    this.handleOutside(location, false, true);
+  }
+  replaceWindow(location) {
+    if (this.isFrozen) return;
+    this.handleOutside(location, true, true);
+  }
+  // 处理外站跳转逻辑
+  handleOutside(location, replace = false, isTriggerWithWindow = false) {
+    const { flag, route } = isPathWithProtocolOrDomain(location);
+    const router = this.router;
+    const { handleOutside, validateOutside } = router.options;
+    const isSameHost = !flag || window.location.hostname === route.hostname;
+    if (!isTriggerWithWindow) {
+      if (isSameHost && !(validateOutside == null ? void 0 : validateOutside({ router, location, route }))) {
+        return false;
+      }
+    }
+    if (handleOutside == null ? void 0 : handleOutside({
+      router,
+      route,
+      replace,
+      isTriggerWithWindow,
+      isSameHost
+    })) {
+      return true;
+    }
+    if (replace) {
+      window.location.replace(route.href);
+    } else {
+      const { hostname, href } = route;
+      openWindow(href, hostname);
+    }
+    return true;
+  }
+  // 新增路由记录跳转
+  async push(location) {
+    await this.jump(location, false);
+  }
+  // 替换当前路由记录跳转
+  async replace(location) {
+    await this.jump(location, true);
+  }
+  // 跳转方法
+  async jump(location, replace = false) {
+    if (this.isFrozen) return;
+    if (this.handleOutside(location, replace)) {
+      return;
+    }
+    const current = Object.assign({}, this.current);
+    await this.transitionTo(location, (route) => {
+      const keepScrollPosition = getKeepScrollPosition(location);
+      if (!keepScrollPosition) {
+        saveScrollPosition(current.fullPath, computeScrollPosition());
+        scrollToPosition({ left: 0, top: 0 });
+      }
+      const state = Object.assign(
+        replace ? { ...history.state, ...route.state } : { ...route.state, _ancientRoute: false },
+        { keepScrollPosition }
+      );
+      window.history[replace ? "replaceState" : "pushState"](
+        state,
+        "",
+        route.fullPath
+      );
+      this.router.updateLayerState(route);
+    });
+  }
+  go(delta) {
+    if (this.isFrozen) return;
+    window.history.go(delta);
+  }
+  forward() {
+    if (this.isFrozen) return;
+    window.history.forward();
+  }
+  timer = null;
+  back() {
+    if (this.isFrozen) return;
+    const oldState = history.state;
+    const noBackNavigation = this.router.options.noBackNavigation;
+    if (oldState._ancientRoute === true) {
+      noBackNavigation && noBackNavigation(this.router);
+      return;
+    }
+    window.history.back();
+    this.timer = setTimeout(() => {
+      if (history.state === oldState) {
+        noBackNavigation && noBackNavigation(this.router);
+      }
+      this.timer = null;
+    }, 80);
+  }
+}

package/dist/history/index.d.ts

@@ -0,0 +1,7 @@
+import { type RouterInstance, RouterMode } from '../types';
+import { AbstractHistory } from './abstract';
+import { HtmlHistory } from './html';
+export declare function createHistory({ router, mode }: {
+    router: RouterInstance;
+    mode: RouterMode;
+}): AbstractHistory | HtmlHistory;