@xfe-repo/web-router 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# `@xfe-repo/web-router`
+
+web 路由库

package/dist/index.d.mts

@@ -0,0 +1,53 @@
+import { History } from 'history';
+import { LoadableComponent, loadableReady } from '@loadable/component';
+import { ParsedQs } from 'qs';
+import { RegisterComponentStatic } from '@xfe-repo/web-register';
+export * from 'react-router-dom';
+import React, { ReactElement, ComponentType } from 'react';
+
+type PageComponent = LoadableComponent<any> & RegisterComponentStatic;
+type RouteConfig = {
+    path: string;
+    Component: PageComponent;
+};
+declare const getRoutes: (pagesIndexPath: string[], getPageComponents: (path: string) => Promise<any>) => RouteConfig[];
+
+type RouterProps = {
+    navigator: NavigatorType;
+    routes: RouteConfig[];
+    basename?: string;
+    children: ReactElement;
+    NotFoundPageComponent?: ComponentType;
+};
+declare const Router: React.MemoExoticComponent<(props: RouterProps) => JSX.Element>;
+
+type LinkProps = {
+    to: string;
+    children?: ReactElement | string | ReactElement[];
+    reLaunch?: boolean;
+    replace?: boolean;
+    preload?: boolean;
+    className?: string;
+};
+declare const Link: (props: LinkProps) => JSX.Element;
+
+type NavigatorStack = {
+    pathname: string;
+};
+interface NavigatorType extends History {
+    stack: NavigatorStack[];
+    reLaunch: (path: string, state?: any) => void;
+    preload: (path: string, isReplace?: boolean, query?: ParsedQs) => Promise<void>;
+    leave: (path: string) => void;
+}
+type CreateNavigatorOptions = {
+    mode: 'static' | 'browser' | 'hash';
+    routes: RouteConfig[];
+    initPathname?: string;
+    redirect?: (path: string) => void;
+};
+declare function createNavigator(options: CreateNavigatorOptions): NavigatorType;
+declare const getClientNavigator: () => NavigatorType;
+declare const routerReady: typeof loadableReady;
+
+export { type CreateNavigatorOptions, Link, type NavigatorStack, type NavigatorType, type PageComponent, type RouteConfig, Router, createNavigator, getClientNavigator, getRoutes, routerReady };

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import { History } from 'history';
+import { LoadableComponent, loadableReady } from '@loadable/component';
+import { ParsedQs } from 'qs';
+import { RegisterComponentStatic } from '@xfe-repo/web-register';
+export * from 'react-router-dom';
+import React, { ReactElement, ComponentType } from 'react';
+
+type PageComponent = LoadableComponent<any> & RegisterComponentStatic;
+type RouteConfig = {
+    path: string;
+    Component: PageComponent;
+};
+declare const getRoutes: (pagesIndexPath: string[], getPageComponents: (path: string) => Promise<any>) => RouteConfig[];
+
+type RouterProps = {
+    navigator: NavigatorType;
+    routes: RouteConfig[];
+    basename?: string;
+    children: ReactElement;
+    NotFoundPageComponent?: ComponentType;
+};
+declare const Router: React.MemoExoticComponent<(props: RouterProps) => JSX.Element>;
+
+type LinkProps = {
+    to: string;
+    children?: ReactElement | string | ReactElement[];
+    reLaunch?: boolean;
+    replace?: boolean;
+    preload?: boolean;
+    className?: string;
+};
+declare const Link: (props: LinkProps) => JSX.Element;
+
+type NavigatorStack = {
+    pathname: string;
+};
+interface NavigatorType extends History {
+    stack: NavigatorStack[];
+    reLaunch: (path: string, state?: any) => void;
+    preload: (path: string, isReplace?: boolean, query?: ParsedQs) => Promise<void>;
+    leave: (path: string) => void;
+}
+type CreateNavigatorOptions = {
+    mode: 'static' | 'browser' | 'hash';
+    routes: RouteConfig[];
+    initPathname?: string;
+    redirect?: (path: string) => void;
+};
+declare function createNavigator(options: CreateNavigatorOptions): NavigatorType;
+declare const getClientNavigator: () => NavigatorType;
+declare const routerReady: typeof loadableReady;
+
+export { type CreateNavigatorOptions, Link, type NavigatorStack, type NavigatorType, type PageComponent, type RouteConfig, Router, createNavigator, getClientNavigator, getRoutes, routerReady };

package/dist/index.js

@@ -0,0 +1,545 @@
+"use strict";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = function(target, all) {
+    for(var name in all)__defProp(target, name, {
+        get: all[name],
+        enumerable: true
+    });
+};
+var __copyProps = function(to, from, except, desc) {
+    if (from && typeof from === "object" || typeof from === "function") {
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            var _loop = function() {
+                var key = _step.value;
+                if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+                    get: function() {
+                        return from[key];
+                    },
+                    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+                });
+            };
+            for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    return to;
+};
+var __reExport = function(target, mod, secondTarget) {
+    return __copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default");
+};
+var __toESM = function(mod, isNodeMode, target) {
+    return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+        value: mod,
+        enumerable: true
+    }) : target, mod);
+};
+var __toCommonJS = function(mod) {
+    return __copyProps(__defProp({}, "__esModule", {
+        value: true
+    }), mod);
+};
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+    Link: function() {
+        return Link;
+    },
+    Router: function() {
+        return Router;
+    },
+    createNavigator: function() {
+        return createNavigator;
+    },
+    getClientNavigator: function() {
+        return getClientNavigator;
+    },
+    getRoutes: function() {
+        return getRoutes;
+    },
+    routerReady: function() {
+        return routerReady;
+    }
+});
+module.exports = __toCommonJS(src_exports);
+var import_history = require("history");
+var import_component2 = require("@loadable/component");
+var import_react_router_dom3 = require("react-router-dom");
+var import_qs = __toESM(require("qs"));
+__reExport(src_exports, require("react-router-dom"), module.exports);
+// src/routes.ts
+var import_react = require("react");
+var import_component = __toESM(require("@loadable/component"));
+var import_web_components = require("@xfe-repo/web-components");
+var getRoutes = function(pagesIndexPath, getPageComponents) {
+    var routes = [];
+    pagesIndexPath.forEach(function(pageIndexPath) {
+        if (pageIndexPath.startsWith("./")) return;
+        var regExpResult = pageIndexPath.match(RegExp("(?<=pages\\/).*(?=\\/index.(?:tsx|js))"));
+        var pageRelativePath = regExpResult ? regExpResult[0].toLowerCase() : "";
+        var pageComponent = (0, import_component.default)(function() {
+            return getPageComponents(pageRelativePath);
+        }, {
+            fallback: (0, import_react.createElement)(import_web_components.Loading, {
+                loading: true
+            })
+        });
+        var routerPath = "/".concat(pageRelativePath);
+        if (routerPath === "/home" || routerPath === "/index") routerPath = "/";
+        var config = {
+            path: routerPath,
+            Component: pageComponent
+        };
+        routes.push(config);
+    });
+    return routes;
+};
+// src/Router.tsx
+var import_react2 = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Router = (0, import_react2.memo)(function(props) {
+    var navigator = props.navigator, routes = props.routes, _props_basename = props.basename, basename = _props_basename === void 0 ? "/" : _props_basename, children = props.children, NotFoundPageComponent = props.NotFoundPageComponent;
+    var _ref = _sliced_to_array((0, import_react2.useState)({
+        action: navigator.action,
+        location: navigator.location
+    }), 2), navigatorState = _ref[0], setNavigatorState = _ref[1];
+    (0, import_react2.useEffect)(function() {
+        return navigator.listen(setNavigatorState);
+    }, [
+        navigator
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Router, {
+        navigator: navigator,
+        navigationType: navigatorState.action,
+        location: navigatorState.location,
+        basename: basename,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Routes, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_router_dom.Route, {
+                path: "/",
+                element: children,
+                children: [
+                    routes.map(function(param) {
+                        var path = param.path, Component = param.Component;
+                        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, {
+                            path: path,
+                            Component: Component
+                        }, path);
+                    }),
+                    NotFoundPageComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, {
+                        path: "*",
+                        Component: NotFoundPageComponent
+                    })
+                ]
+            })
+        })
+    });
+});
+// src/Link.tsx
+var import_react3 = require("react");
+var import_react_router_dom2 = require("react-router-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Link = function(props) {
+    var to = props.to, children = props.children, reLaunch = props.reLaunch, preload = props.preload, replace = props.replace, className = props.className;
+    var _navigator2 = (0, import_react3.useMemo)(function() {
+        return getClientNavigator();
+    }, []);
+    if (/http(s)?:\/{2}/.test(to)) {
+        var handleLink = function(e) {
+            e.preventDefault();
+            window.location.href = to;
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", {
+            href: to,
+            onClick: handleLink,
+            className: className,
+            children: children
+        });
+    }
+    if (reLaunch) {
+        var handleLink1 = function(e) {
+            e.preventDefault();
+            _navigator2.reLaunch(to);
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", {
+            href: to,
+            onClick: handleLink1,
+            className: className,
+            children: children
+        });
+    }
+    if (preload) {
+        var handleLink2 = function() {
+            var _ref = _async_to_generator(function(e) {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            e.preventDefault();
+                            return [
+                                4,
+                                _navigator2.preload(to, replace)
+                            ];
+                        case 1:
+                            _state.sent();
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function handleLink2(e) {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", {
+            href: to,
+            onClick: handleLink2,
+            className: className,
+            children: children
+        });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_router_dom2.Link, _object_spread({}, props));
+};
+// src/index.ts
+var _navigator;
+function createNavigator(options) {
+    var mode = options.mode, _options_initPathname = options.initPathname, initPathname = _options_initPathname === void 0 ? "/" : _options_initPathname, routes = options.routes;
+    var originHistory;
+    if (mode === "static") {
+        originHistory = (0, import_history.createMemoryHistory)({
+            initialEntries: [
+                initPathname
+            ]
+        });
+    } else if (mode === "browser") {
+        originHistory = (0, import_history.createBrowserHistory)();
+    } else {
+        originHistory = (0, import_history.createHashHistory)();
+    }
+    _navigator = originHistory;
+    var initialStack = [
+        {
+            pathname: _navigator.location.pathname
+        }
+    ];
+    var stack = _navigator.stack = initialStack;
+    _navigator.listen(function(param) {
+        var location = param.location, action = param.action;
+        var pathname = location.pathname;
+        if (action === "PUSH") {
+            stack.push({
+                pathname: pathname
+            });
+        } else if (action === "REPLACE") {
+            stack.pop();
+            stack.push({
+                pathname: pathname
+            });
+        } else if (action === "POP") {
+            stack.pop();
+        }
+        console.log("router", action, pathname, stack);
+    });
+    _navigator.reLaunch = function(path, state) {
+        var _stack_;
+        var shouldBlack = -stack.length + 1;
+        if (shouldBlack < 0) _navigator.go(shouldBlack);
+        if (((_stack_ = stack[0]) === null || _stack_ === void 0 ? void 0 : _stack_.pathname) === path) return;
+        setTimeout(function() {
+            _navigator.replace(path, state);
+        }, 1);
+    };
+    _navigator.preload = function() {
+        var _ref = _async_to_generator(function(path, isReplace, query) {
+            var _, _this, _path_split, tmp, originPath, tmp1, search, matchPath, currentRoute, _pageModule_default_emitOnLoad, _pageModule_default, pageModule, _currentRoute_Component_emitOnLoad, _currentRoute_Component;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _path_split = _sliced_to_array(path.split("?"), 2), tmp = _path_split[0], originPath = tmp === void 0 ? "" : tmp, tmp1 = _path_split[1], search = tmp1 === void 0 ? "" : tmp1;
+                        matchPath = originPath.toLowerCase();
+                        currentRoute = (_this = (0, import_react_router_dom3.matchRoutes)(routes, matchPath)) === null || _this === void 0 ? void 0 : (_ = _this[0]) === null || _ === void 0 ? void 0 : _.route;
+                        query = query || import_qs.default.parse(search);
+                        if (!!(currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.Component.config)) return [
+                            3,
+                            3
+                        ];
+                        return [
+                            4,
+                            currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.Component.load()
+                        ];
+                    case 1:
+                        pageModule = _state.sent();
+                        return [
+                            4,
+                            (_pageModule_default = pageModule.default) === null || _pageModule_default === void 0 ? void 0 : (_pageModule_default_emitOnLoad = _pageModule_default.emitOnLoad) === null || _pageModule_default_emitOnLoad === void 0 ? void 0 : _pageModule_default_emitOnLoad.call(_pageModule_default, {
+                                isPreload: true,
+                                query: query
+                            })
+                        ];
+                    case 2:
+                        _state.sent();
+                        return [
+                            3,
+                            5
+                        ];
+                    case 3:
+                        return [
+                            4,
+                            currentRoute === null || currentRoute === void 0 ? void 0 : (_currentRoute_Component = currentRoute.Component) === null || _currentRoute_Component === void 0 ? void 0 : (_currentRoute_Component_emitOnLoad = _currentRoute_Component.emitOnLoad) === null || _currentRoute_Component_emitOnLoad === void 0 ? void 0 : _currentRoute_Component_emitOnLoad.call(_currentRoute_Component, {
+                                isPreload: true,
+                                query: query
+                            })
+                        ];
+                    case 4:
+                        _state.sent();
+                        _state.label = 5;
+                    case 5:
+                        if (isReplace) {
+                            _navigator.replace(path);
+                        } else {
+                            _navigator.push(path);
+                        }
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function(path, isReplace, query) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    return _navigator;
+}
+var getClientNavigator = function() {
+    return _navigator;
+};
+var routerReady = import_component2.loadableReady;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = _object_spread({
+    Link: Link,
+    Router: Router,
+    createNavigator: createNavigator,
+    getClientNavigator: getClientNavigator,
+    getRoutes: getRoutes,
+    routerReady: routerReady
+}, require("react-router-dom")));

package/dist/index.mjs

@@ -0,0 +1,149 @@
+// src/index.ts
+import { createHashHistory, createBrowserHistory, createMemoryHistory } from "history";
+import { loadableReady } from "@loadable/component";
+import { matchRoutes } from "react-router-dom";
+import qs from "qs";
+export * from "react-router-dom";
+
+// src/routes.ts
+import { createElement } from "react";
+import loadable from "@loadable/component";
+import { Loading } from "@xfe-repo/web-components";
+var getRoutes = (pagesIndexPath, getPageComponents) => {
+  const routes = [];
+  pagesIndexPath.forEach((pageIndexPath) => {
+    if (pageIndexPath.startsWith("./"))
+      return;
+    const regExpResult = pageIndexPath.match(/(?<=pages\/).*(?=\/index.(?:tsx|js))/);
+    const pageRelativePath = regExpResult ? regExpResult[0].toLowerCase() : "";
+    const pageComponent = loadable(() => getPageComponents(pageRelativePath), {
+      fallback: createElement(Loading, { loading: true })
+    });
+    let routerPath = `/${pageRelativePath}`;
+    if (routerPath === "/home" || routerPath === "/index")
+      routerPath = "/";
+    const config = {
+      path: routerPath,
+      Component: pageComponent
+    };
+    routes.push(config);
+  });
+  return routes;
+};
+
+// src/Router.tsx
+import { memo, useState, useEffect } from "react";
+import { Router as OriginalRouter, Routes, Route } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Router = memo((props) => {
+  const { navigator, routes, basename = "/", children, NotFoundPageComponent } = props;
+  const [navigatorState, setNavigatorState] = useState({
+    action: navigator.action,
+    location: navigator.location
+  });
+  useEffect(() => navigator.listen(setNavigatorState), [navigator]);
+  return /* @__PURE__ */ jsx(OriginalRouter, { navigator, navigationType: navigatorState.action, location: navigatorState.location, basename, children: /* @__PURE__ */ jsx(Routes, { children: /* @__PURE__ */ jsxs(Route, { path: "/", element: children, children: [
+    routes.map(({ path, Component }) => /* @__PURE__ */ jsx(Route, { path, Component }, path)),
+    NotFoundPageComponent && /* @__PURE__ */ jsx(Route, { path: "*", Component: NotFoundPageComponent })
+  ] }) }) });
+});
+
+// src/Link.tsx
+import { useMemo } from "react";
+import { Link as OriginalLink } from "react-router-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Link = (props) => {
+  const { to, children, reLaunch, preload, replace, className } = props;
+  const _navigator2 = useMemo(() => getClientNavigator(), []);
+  if (/http(s)?:\/{2}/.test(to)) {
+    const handleLink = (e) => {
+      e.preventDefault();
+      window.location.href = to;
+    };
+    return /* @__PURE__ */ jsx2("a", { href: to, onClick: handleLink, className, children });
+  }
+  if (reLaunch) {
+    const handleLink = (e) => {
+      e.preventDefault();
+      _navigator2.reLaunch(to);
+    };
+    return /* @__PURE__ */ jsx2("a", { href: to, onClick: handleLink, className, children });
+  }
+  if (preload) {
+    const handleLink = async (e) => {
+      e.preventDefault();
+      await _navigator2.preload(to, replace);
+    };
+    return /* @__PURE__ */ jsx2("a", { href: to, onClick: handleLink, className, children });
+  }
+  return /* @__PURE__ */ jsx2(OriginalLink, { ...props });
+};
+
+// src/index.ts
+var _navigator;
+function createNavigator(options) {
+  const { mode, initPathname = "/", routes } = options;
+  let originHistory;
+  if (mode === "static") {
+    originHistory = createMemoryHistory({
+      initialEntries: [initPathname]
+    });
+  } else if (mode === "browser") {
+    originHistory = createBrowserHistory();
+  } else {
+    originHistory = createHashHistory();
+  }
+  _navigator = originHistory;
+  const initialStack = [{ pathname: _navigator.location.pathname }];
+  let stack = _navigator.stack = initialStack;
+  _navigator.listen(({ location, action }) => {
+    const { pathname } = location;
+    if (action === "PUSH") {
+      stack.push({ pathname });
+    } else if (action === "REPLACE") {
+      stack.pop();
+      stack.push({ pathname });
+    } else if (action === "POP") {
+      stack.pop();
+    }
+    console.log("router", action, pathname, stack);
+  });
+  _navigator.reLaunch = (path, state) => {
+    let shouldBlack = -stack.length + 1;
+    if (shouldBlack < 0)
+      _navigator.go(shouldBlack);
+    if (stack[0]?.pathname === path)
+      return;
+    setTimeout(() => {
+      _navigator.replace(path, state);
+    }, 1);
+  };
+  _navigator.preload = async (path, isReplace, query) => {
+    const [originPath = "", search = ""] = path.split("?");
+    let matchPath = originPath.toLowerCase();
+    const currentRoute = matchRoutes(routes, matchPath)?.[0]?.route;
+    query = query || qs.parse(search);
+    if (!currentRoute?.Component.config) {
+      const pageModule = await currentRoute?.Component.load();
+      await pageModule.default?.emitOnLoad?.({ isPreload: true, query });
+    } else {
+      await currentRoute?.Component?.emitOnLoad?.({ isPreload: true, query });
+    }
+    if (isReplace) {
+      _navigator.replace(path);
+    } else {
+      _navigator.push(path);
+    }
+  };
+  return _navigator;
+}
+var getClientNavigator = () => _navigator;
+var routerReady = loadableReady;
+export {
+  Link,
+  Router,
+  createNavigator,
+  getClientNavigator,
+  getRoutes,
+  routerReady
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@xfe-repo/web-router",
+  "version": "1.0.0",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@loadable/component": "^5.15.3",
+    "history": "^5.3.0",
+    "qs": "^6.11.2",
+    "react-router-dom": "^6.11.1",
+    "@xfe-repo/web-components": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/loadable__component": "^5.13.8",
+    "@types/node": "^20.10.4",
+    "@types/qs": "^6.9.10",
+    "@types/react": "^18.2.0",
+    "eslint": "^8.53.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.2.2",
+    "@xfe-repo/typescript-config": "0.0.0",
+    "@xfe-repo/web-register": "1.0.0",
+    "@xfe-repo/eslint-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  }
+}