@esmx/router 3.0.0-rc.12

package/src/history/html.ts

@@ -0,0 +1,231 @@
+import {
+    type RouterInstance,
+    type RouterRawLocation,
+    StateLayerConfigKey
+} from '../types';
+import {
+    computeScrollPosition,
+    getKeepScrollPosition,
+    getSavedScrollPosition,
+    isPathWithProtocolOrDomain,
+    normalizeLocation,
+    openWindow,
+    saveScrollPosition,
+    scrollToPosition
+} from '../utils';
+import { BaseRouterHistory } from './base';
+
+export class HtmlHistory extends BaseRouterHistory {
+    constructor(router: RouterInstance) {
+        super(router);
+
+        if ('scrollRestoration' in window.history) {
+            // 只有在 html 模式下才需要修改历史滚动模式
+            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: PopStateEvent) => {
+        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?: boolean } = { replace: true }) {
+        const { initUrl } = this.router.options;
+        let route = this.getCurrentLocation();
+        if (initUrl !== undefined) {
+            // 存在 initUrl 则用 initUrl 进行初始化
+            route = this.resolve(initUrl) as any;
+        } else {
+            const state = history.state || {};
+            route.state = {
+                ...state,
+                _ancientRoute: state._ancientRoute ?? true // 最古历史的标记, 在调用返回事件时如果有这个标记则直接调用没有历史记录的钩子
+            };
+        }
+        if (replace) {
+            await this.replace(route as RouterRawLocation);
+        } else {
+            await this.push(route as RouterRawLocation);
+        }
+        this.setupListeners();
+    }
+
+    // 设置监听函数
+    setupListeners() {
+        window.addEventListener('popstate', this.onPopState);
+    }
+
+    destroy() {
+        window.removeEventListener('popstate', this.onPopState);
+    }
+
+    pushWindow(location: RouterRawLocation) {
+        if (this.isFrozen) return;
+        this.handleOutside(location, false, true);
+    }
+
+    replaceWindow(location: RouterRawLocation) {
+        if (this.isFrozen) return;
+        this.handleOutside(location, true, true);
+    }
+
+    // 处理外站跳转逻辑
+    handleOutside(
+        location: RouterRawLocation,
+        replace = false,
+        // 是否是 pushWindow/replaceWindow 触发的
+        isTriggerWithWindow = false
+    ) {
+        const { flag, route } = isPathWithProtocolOrDomain(location);
+        const router = this.router;
+        const { handleOutside, validateOutside } = router.options;
+
+        // 不以域名开头 或 域名相同 都认为是同域
+        const isSameHost = !flag || window.location.hostname === route.hostname;
+
+        // 如果 不是 pushWindow/replaceWindow 触发的
+        if (!isTriggerWithWindow) {
+            // 如果域名相同 和 非外站（存在就算同域也会被视为外站的情况） 则跳出
+            if (isSameHost && !validateOutside?.({ router, location, route })) {
+                return false;
+            }
+        }
+
+        // 如果有配置跳转外站函数，则执行配置函数
+        // 如果配置函数返回 true 则认为其处理了打开逻辑，跳出
+        if (
+            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: RouterRawLocation) {
+        await this.jump(location, false);
+    }
+
+    // 替换当前路由记录跳转
+    async replace(location: RouterRawLocation) {
+        await this.jump(location, true);
+    }
+
+    // 跳转方法
+    async jump(location: RouterRawLocation, 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: number): void {
+        if (this.isFrozen) return;
+        window.history.go(delta);
+    }
+
+    forward(): void {
+        if (this.isFrozen) return;
+        window.history.forward();
+    }
+
+    protected timer: NodeJS.Timeout | null = null;
+
+    back(): void {
+        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/src/history/index.ts

@@ -0,0 +1,20 @@
+import { type RouterInstance, RouterMode } from '../types';
+import { AbstractHistory } from './abstract';
+import { HtmlHistory } from './html';
+
+export function createHistory({
+    router,
+    mode
+}: {
+    router: RouterInstance;
+    mode: RouterMode;
+}) {
+    switch (mode) {
+        case RouterMode.HISTORY:
+            return new HtmlHistory(router);
+        case RouterMode.ABSTRACT:
+            return new AbstractHistory(router);
+        default:
+            throw new Error('not support mode');
+    }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { createRouter } from './router';
+export * from './types';
+export * from './utils';

package/src/matcher/create-matcher.spec.ts

@@ -0,0 +1,3 @@
+import { describe, it } from 'vitest';
+
+import { createRouterMatcher } from './create-matcher';

package/src/matcher/create-matcher.ts

@@ -0,0 +1,293 @@
+import { compile, match, pathToRegexp } from 'path-to-regexp';
+
+import type {
+    HistoryState,
+    RouteConfig,
+    RouteMatch,
+    RouteRecord,
+    RouterLocation,
+    RouterMatcher
+} from '../types';
+import {
+    decode,
+    encodePath,
+    normalizeLocation,
+    normalizePath,
+    parsePath,
+    stringifyPath
+} from '../utils';
+
+/**
+ * 路由匹配器
+ */
+class RouteMatcher {
+    /*
+     * 路由匹配规则
+     */
+    protected routeMatches: RouteMatch[];
+
+    /*
+     * 原始路由配置
+     */
+    // protected routes: RouteConfig[];
+
+    constructor(routes: RouteConfig[]) {
+        // this.routes = routes;
+        this.routeMatches = createRouteMatches(routes);
+    }
+
+    /*
+     * 根据配置匹配对应的路由
+     */
+    public match(
+        rawLocation: RouterLocation,
+        {
+            base,
+            redirectedFrom
+        }: { base: string; redirectedFrom?: RouteRecord } = { base: '' }
+    ): RouteRecord | null {
+        let path = '';
+        /* 按 Hanson 要求加入 undefined 类型 */
+        let query: Record<string, string | undefined> = {};
+        let queryArray: Record<string, string[]> = {};
+        let params: Record<string, string> = {};
+        let hash = '';
+        let state: HistoryState = {};
+
+        const parsedOption = parsePath(rawLocation.path);
+        path = parsedOption.pathname;
+        query = rawLocation.query || parsedOption.query || {};
+        queryArray = rawLocation.queryArray || parsedOption.queryArray || {};
+        hash = rawLocation.hash || parsedOption.hash || '';
+        state = rawLocation.state || {};
+
+        const routeMatch = this.routeMatches.find(({ match }) => {
+            return match(path);
+        });
+
+        if (routeMatch) {
+            const {
+                component,
+                asyncComponent,
+                compile,
+                meta,
+                redirect,
+                matched,
+                parse
+            } = routeMatch.internalRedirect || routeMatch; // 优先使用内部重定向
+
+            params = rawLocation.params || parse(path).params || {};
+
+            const realPath = normalizePath(
+                compile({
+                    query,
+                    queryArray,
+                    params,
+                    hash
+                })
+            );
+
+            const {
+                params: realParams,
+                query: realQuery,
+                queryArray: realQueryArray,
+                hash: realHash
+            } = parse(realPath);
+
+            const routeRecord = {
+                base,
+                path: normalizePath(
+                    compile({
+                        params: realParams
+                    })
+                ),
+                fullPath: realPath,
+                params: realParams,
+                query: realQuery,
+                queryArray: realQueryArray,
+                hash: realHash,
+                state,
+                component,
+                asyncComponent,
+                meta,
+                redirect,
+                redirectedFrom,
+                matched
+            };
+
+            if (redirect) {
+                const normalizedLocation = normalizeLocation(
+                    typeof redirect === 'function'
+                        ? redirect(routeRecord)
+                        : redirect,
+                    base
+                );
+                return this.match(normalizedLocation, {
+                    base,
+                    redirectedFrom: routeRecord
+                });
+            }
+            return routeRecord;
+        }
+        return null;
+    }
+
+    /*
+     * 获取当前路由匹配规则
+     */
+    public getRoutes(): RouteMatch[] {
+        return this.routeMatches;
+    }
+
+    /**
+     * 新增单个路由匹配规则
+     */
+    // public addRoute(route: RouteConfig) {
+    //     this.routes.push(route);
+    //     this.routeMatches = createRouteMatches(this.routes);
+    // }
+
+    /**
+     * 新增多个路由匹配规则
+     */
+    // public addRoutes(routes: RouteConfig[]) {
+    //     this.routes.push(...routes);
+    //     this.routeMatches = createRouteMatches(this.routes);
+    // }
+}
+
+/**
+ * 创建路由匹配器
+ */
+export function createRouterMatcher(routes: RouteConfig[]): RouterMatcher {
+    return new RouteMatcher(routes);
+}
+
+/**
+ * 生成打平的路由匹配规则
+ */
+function createRouteMatches(
+    routes: RouteConfig[],
+    parent?: RouteMatch
+): RouteMatch[] {
+    const routeMatches: RouteMatch[] = [];
+    for (const route of routes) {
+        routeMatches.push(
+            ...createRouteMatch(
+                {
+                    ...route,
+                    path:
+                        route.path instanceof Array ? route.path : [route.path]
+                },
+                parent
+            )
+        );
+    }
+    return routeMatches;
+}
+
+/**
+ * 生成单个路由匹配规则
+ */
+function createRouteMatch(
+    route: RouteConfig & { path: string },
+    parent?: RouteMatch
+): RouteMatch;
+function createRouteMatch(
+    route: RouteConfig & { path: string[] },
+    parent?: RouteMatch
+): RouteMatch[];
+function createRouteMatch(
+    route: RouteConfig,
+    parent?: RouteMatch
+): RouteMatch | RouteMatch[] {
+    const pathList = route.path instanceof Array ? route.path : [route.path];
+    const routeMatches: RouteMatch[] = pathList.reduce<RouteMatch[]>(
+        (acc, item, index) => {
+            const { children } = route;
+            const path = normalizePath(item, parent?.path);
+            let regex: RegExp;
+            try {
+                regex = pathToRegexp(path);
+            } catch (error) {
+                console.warn(
+                    `@create route rule failed on path: ${path}`,
+                    route
+                );
+                return acc;
+            }
+            const toPath = compile(path, { encode: encodePath });
+            const parseParams = match(path, { decode });
+            const current: RouteMatch = {
+                regex,
+                match: (path: string) => {
+                    return regex.test(path);
+                },
+                parse: (
+                    path: string
+                ): {
+                    params: Record<string, string>;
+                    query: Record<string, string>;
+                    queryArray: Record<string, string[]>;
+                    hash: string;
+                } => {
+                    const { pathname, query, queryArray, hash } =
+                        parsePath(path);
+                    const { params } = parseParams(pathname) || { params: {} };
+                    return {
+                        params: Object.assign({}, params), // parse的 params 是使用 Object.create(null) 创建的没有原型的对象，需要进行包装处理
+                        query,
+                        queryArray,
+                        hash
+                    };
+                },
+                compile: (
+                    { params = {}, query = {}, queryArray = {}, hash = '' } = {
+                        params: {},
+                        query: {},
+                        queryArray: {},
+                        hash: ''
+                    }
+                ) => {
+                    const pathString = toPath(params);
+                    return stringifyPath({
+                        pathname: pathString,
+                        query,
+                        queryArray,
+                        hash
+                    });
+                },
+                path,
+                appType: route.appType || parent?.appType || '',
+                component: route.component,
+                asyncComponent: route.asyncComponent,
+                meta: route.meta || {},
+                redirect: route.redirect,
+                /**
+                 * 第一个 path 作为基准，后续 path 会内部重定向到第一个 path
+                 * 同时如果父路由存在内部跳转，子路由也需要处理内部跳转
+                 */
+                internalRedirect:
+                    index > 0 || parent?.internalRedirect
+                        ? createRouteMatch(
+                              {
+                                  ...route,
+                                  path: pathList[0]
+                              },
+                              parent?.internalRedirect || parent
+                          )
+                        : undefined,
+                matched: [...(parent?.matched || []), route]
+            };
+            if (children && children.length > 0) {
+                acc.push(...createRouteMatches(children, current));
+            }
+            acc.push(current);
+            return acc;
+        },
+        []
+    );
+    return route.path instanceof Array
+        ? routeMatches
+        : routeMatches[routeMatches.length - 1];
+}

package/src/matcher/index.ts

@@ -0,0 +1 @@
+export { createRouterMatcher } from './create-matcher';