@tarojs/router 3.4.5 → 3.5.0-alpha.0

package/dist/{router.esm.js → index.cjs.js}

@@ -1,29 +1,178 @@
-import { createBrowserHistory, createHashHistory, parsePath, Action } from 'history';
-import { requestAnimationFrame, Current, container, SERVICE_IDENTIFIER, eventCenter, createPageConfig, stringify } from '@tarojs/runtime';
-import UniversalRouter from 'universal-router';
-import queryString from 'query-string';
-import { initTabBarApis } from '@tarojs/taro';
+'use strict';
 
-let history;
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var history = require('history');
+var runtime = require('@tarojs/runtime');
+var UniversalRouter = require('universal-router');
+var queryString = require('query-string');
+var taro = require('@tarojs/taro');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var UniversalRouter__default = /*#__PURE__*/_interopDefaultLegacy(UniversalRouter);
+var queryString__default = /*#__PURE__*/_interopDefaultLegacy(queryString);
+
+const addLeadingSlash = (url = '') => (url.charAt(0) === '/' ? url : '/' + url);
+const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path) || path === prefix;
+const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substr(prefix.length) : path;
+class RoutesAlias {
+    conf = [];
+    set(customRoutes = {}) {
+        for (let key in customRoutes) {
+            const path = customRoutes[key];
+            key = addLeadingSlash(key);
+            if (typeof path === 'string') {
+                this.conf.push([key, addLeadingSlash(path)]);
+            }
+            else if (path?.length > 0) {
+                this.conf.push(...path.map(p => [key, addLeadingSlash(p)]));
+            }
+        }
+    }
+    getConfig = (url = '') => {
+        const customRoute = this.conf.filter((arr) => {
+            return arr.includes(url);
+        });
+        return customRoute[0];
+    };
+    getOrigin = (url = '') => {
+        return this.getConfig(url)?.[0] || url;
+    };
+    getAlias = (url = '') => {
+        return this.getConfig(url)?.[1] || url;
+    };
+    getAll = (url = '') => {
+        return this.conf
+            .filter((arr) => arr.includes(url))
+            .reduceRight((p, a) => {
+            p.unshift(a[1]);
+            return p;
+        }, []);
+    };
+}
+const routesAlias = new RoutesAlias();
+
+class RouterConfig {
+    static __config;
+    static set config(e) {
+        this.__config = e;
+    }
+    static get config() {
+        return this.__config;
+    }
+    static get pages() {
+        return this.config.pages || [];
+    }
+    static get router() {
+        return this.config.router || {};
+    }
+    static get mode() {
+        return this.router.mode || 'hash';
+    }
+    static get customRoutes() { return this.router.customRoutes || {}; }
+    static isPage(url = '') {
+        return this.pages.findIndex(e => addLeadingSlash(e) === url) !== -1;
+    }
+}
+
+exports.history = void 0;
 let basename = '/';
+class MpaHistory {
+    action;
+    get location() {
+        return {
+            pathname: window.location.pathname,
+            search: window.location.search,
+            hash: window.location.hash,
+            key: `${window.history.length}`,
+            state: window.history.state
+        };
+    }
+    createHref(_to) {
+        throw new Error('Method not implemented.');
+    }
+    parseUrl(to) {
+        let url = to.pathname || '';
+        if (RouterConfig.isPage(url)) {
+            url += '.html';
+        }
+        if (to.search) {
+            url += `?${to.search}`;
+        }
+        if (to.hash) {
+            url += `#${to.hash}`;
+        }
+        return url;
+    }
+    push(to, _state = {}) {
+        window.location.pathname = this.parseUrl(to);
+        // this.pushState(_state, '', this.parseUrl(to))
+    }
+    replace(to, _state = {}) {
+        window.location.replace(this.parseUrl(to));
+        // this.replaceState(_state, '', this.parseUrl(to))
+    }
+    go(delta) {
+        window.history.go(delta);
+    }
+    back = window.history.back;
+    forward = window.history.forward;
+    listen(listener) {
+        function callback(e) {
+            if (e.action === 'pushState') {
+                listener({ action: history.Action.Push, location: this.location });
+            }
+            else if (e.action === 'replaceState') {
+                listener({ action: history.Action.Replace, location: this.location });
+            }
+            else {
+                // NOTE: 这里包括 back、forward、go 三种可能，并非是 POP 事件
+                listener({ action: history.Action.Pop, location: this.location });
+            }
+        }
+        window.addEventListener('popstate', callback);
+        return () => {
+            window.removeEventListener('popstate', callback);
+        };
+    }
+    block(_blocker) {
+        throw new Error('Method not implemented.');
+    }
+    pushState = this.eventState('pushState');
+    replaceState = this.eventState('replaceState');
+    eventState(action) {
+        return (data, unused, url) => {
+            const wrapper = window.history[action](data, unused, url);
+            const evt = new Event(action);
+            evt.action = action;
+            evt.state = data;
+            evt.unused = unused;
+            evt.url = url;
+            window.dispatchEvent(evt);
+            return wrapper;
+        };
+    }
+}
 function setHistoryMode(mode, base = '/') {
     const options = {
         window
     };
     basename = base;
     if (mode === 'browser') {
-        history = createBrowserHistory(options);
+        exports.history = history.createBrowserHistory(options);
+    }
+    else if (mode === 'multi') {
+        exports.history = new MpaHistory();
     }
     else {
         // default is hash
-        history = createHashHistory(options);
+        exports.history = history.createHashHistory(options);
     }
 }
 function prependBasename(url = '') {
     return basename.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
 }
-const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path);
-const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substr(prefix.length) : path;
 
 class Stacks {
     stacks = [];
@@ -82,54 +231,11 @@ class Stacks {
 }
 const stacks = new Stacks();
 
-function addLeadingSlash(path) {
-    if (path == null) {
-        return '';
-    }
-    return path.charAt(0) === '/' ? path : '/' + path;
-}
-class RoutesAlias {
-    conf = [];
-    set(customRoutes = {}) {
-        for (let key in customRoutes) {
-            const path = customRoutes[key];
-            key = addLeadingSlash(key);
-            if (typeof path === 'string') {
-                this.conf.push([key, addLeadingSlash(path)]);
-            }
-            else if (path?.length > 0) {
-                this.conf.push(...path.map(p => [key, addLeadingSlash(p)]));
-            }
-        }
-    }
-    getConfig = (url = '') => {
-        const customRoute = this.conf.filter((arr) => {
-            return arr.includes(url);
-        });
-        return customRoute[0];
-    };
-    getOrigin = (url = '') => {
-        return this.getConfig(url)?.[0] || url;
-    };
-    getAlias = (url = '') => {
-        return this.getConfig(url)?.[1] || url;
-    };
-    getAll = (url = '') => {
-        return this.conf.filter((arr) => {
-            return arr.includes(url);
-        }).reduceRight((p, a) => {
-            p.unshift(a[1]);
-            return p;
-        }, [url]);
-    };
-}
-const routesAlias = new RoutesAlias();
-
 function processNavigateUrl(option) {
-    const pathPieces = parsePath(option.url);
+    const pathPieces = history.parsePath(option.url);
     // 处理相对路径
     if (pathPieces.pathname?.includes('./')) {
-        const parts = routesAlias.getOrigin(history.location.pathname).split('/');
+        const parts = routesAlias.getOrigin(exports.history.location.pathname).split('/');
         parts.pop();
         pathPieces.pathname.split('/').forEach((item) => {
             if (item === '.') {
@@ -151,7 +257,7 @@ function processNavigateUrl(option) {
 async function navigate(option, method) {
     return new Promise((resolve, reject) => {
         const { success, complete, fail } = option;
-        const unListen = history.listen(() => {
+        const unListen = exports.history.listen(() => {
             const res = { errMsg: `${method}:ok` };
             success?.(res);
             complete?.(res);
@@ -163,19 +269,19 @@ async function navigate(option, method) {
                 const pathPieces = processNavigateUrl(option);
                 const state = { timestamp: Date.now() };
                 if (method === 'navigateTo') {
-                    history.push(pathPieces, state);
+                    exports.history.push(pathPieces, state);
                 }
                 else if (method === 'redirectTo' || method === 'switchTab') {
-                    history.replace(pathPieces, state);
+                    exports.history.replace(pathPieces, state);
                 }
                 else if (method === 'reLaunch') {
                     stacks.delta = stacks.length;
-                    history.replace(pathPieces, state);
+                    exports.history.replace(pathPieces, state);
                 }
             }
             else if (method === 'navigateBack') {
                 stacks.delta = option.delta;
-                history.go(-option.delta);
+                exports.history.go(-option.delta);
             }
         }
         catch (error) {
@@ -192,11 +298,11 @@ function navigateTo(option) {
 function redirectTo(option) {
     return navigate(option, 'redirectTo');
 }
-function navigateBack(options = { delta: 1 }) {
-    if (!options.delta || options.delta < 1) {
-        options.delta = 1;
+function navigateBack(option = { delta: 1 }) {
+    if (!option.delta || option.delta < 1) {
+        option.delta = 1;
     }
-    return navigate(options, 'navigateBack');
+    return navigate(option, 'navigateBack');
 }
 function switchTab(option) {
     return navigate(option, 'switchTab');
@@ -205,6 +311,9 @@ function reLaunch(option) {
     return navigate(option, 'reLaunch');
 }
 function getCurrentPages() {
+    if (process.env.NODE_ENV === 'development' && RouterConfig.mode === 'multi') {
+        console.warn('多页面路由模式不支持使用 getCurrentPages 方法！');
+    }
     const pages = stacks.get();
     return pages.map(e => ({ ...e, route: e.path || '' }));
 }
@@ -239,37 +348,9 @@ function loadAnimateStyle(ms = 300) {
     document.getElementsByTagName('head')[0].appendChild(style);
 }
 
-// @ts-nocheck
-function initTabbar(config) {
-    if (config.tabBar == null) {
-        return;
-    }
-    // TODO: custom-tab-bar
-    const tabbar = document.createElement('taro-tabbar');
-    const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
-    tabbar.conf = config.tabBar;
-    tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
-    const routerConfig = config.router;
-    tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
-    if (routerConfig.customRoutes) {
-        tabbar.conf.custom = true;
-        tabbar.conf.customRoutes = routerConfig.customRoutes;
-    }
-    else {
-        tabbar.conf.custom = false;
-        tabbar.conf.customRoutes = {};
-    }
-    if (typeof routerConfig.basename !== 'undefined') {
-        tabbar.conf.basename = routerConfig.basename;
-    }
-    const container = document.getElementById('container');
-    container?.appendChild(tabbar);
-    initTabBarApis(config);
-}
-
 let pageResizeFn;
 function bindPageResize(page) {
-    window.removeEventListener('resize', pageResizeFn);
+    pageResizeFn && window.removeEventListener('resize', pageResizeFn);
     pageResizeFn = function () {
         page.onResize && page.onResize({
             size: {
@@ -284,7 +365,7 @@ function bindPageResize(page) {
 let pageScrollFn;
 let pageDOM = window;
 function bindPageScroll(page, pageEl, distance = 50) {
-    pageEl.removeEventListener('scroll', pageScrollFn);
+    pageScrollFn && pageEl.removeEventListener('scroll', pageScrollFn);
     pageDOM = pageEl;
     let isReachBottom = false;
     pageScrollFn = function () {
@@ -312,6 +393,34 @@ function getOffset() {
     }
 }
 
+// @ts-nocheck
+function initTabbar(config) {
+    if (config.tabBar == null) {
+        return;
+    }
+    // TODO: custom-tab-bar
+    const tabbar = document.createElement('taro-tabbar');
+    const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
+    tabbar.conf = config.tabBar;
+    tabbar.conf.homePage = exports.history.location.pathname === '/' ? homePage : exports.history.location.pathname;
+    const routerConfig = config.router;
+    tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
+    if (routerConfig.customRoutes) {
+        tabbar.conf.custom = true;
+        tabbar.conf.customRoutes = routerConfig.customRoutes;
+    }
+    else {
+        tabbar.conf.custom = false;
+        tabbar.conf.customRoutes = {};
+    }
+    if (typeof routerConfig.basename !== 'undefined') {
+        tabbar.conf.basename = routerConfig.basename;
+    }
+    const container = document.getElementById('container');
+    container?.appendChild(tabbar);
+    taro.initTabBarApis(config);
+}
+
 function setDisplay(el, type = '') {
     if (el) {
         el.style.display = type;
@@ -394,7 +503,7 @@ class PageHandler {
     getQuery(stamp = 0, search = '', options = {}) {
         search = search ? `${search}&${this.search}` : this.search;
         const query = search
-            ? queryString.parse(search, { decode: false })
+            ? queryString__default["default"].parse(search, { decode: false })
             : {};
         query.stamp = stamp.toString();
         return { ...query, ...options };
@@ -426,7 +535,7 @@ class PageHandler {
         if (pageEl && !pageEl?.['__isReady']) {
             const el = pageEl.firstElementChild;
             el?.['componentOnReady']?.()?.then(() => {
-                requestAnimationFrame(() => {
+                runtime.requestAnimationFrame(() => {
                     page.onReady?.();
                     pageEl['__isReady'] = true;
                 });
@@ -548,7 +657,7 @@ class PageHandler {
         }
     }
     getPageContainer(page) {
-        const path = page ? page?.path : Current.page?.path;
+        const path = page ? page?.path : runtime.Current.page?.path;
         const id = path?.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1');
         if (page) {
             return document.querySelector(`.taro_page#${id}`);
@@ -571,8 +680,9 @@ class PageHandler {
 
 /* eslint-disable dot-notation */
 function createRouter(app, config, framework) {
+    RouterConfig.config = config;
     const handler = new PageHandler(config);
-    const runtimeHooks = container.get(SERVICE_IDENTIFIER.Hooks);
+    const runtimeHooks = runtime.container.get(runtime.SERVICE_IDENTIFIER.Hooks);
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => ({
@@ -580,11 +690,11 @@ function createRouter(app, config, framework) {
         action: route.load
     }));
     const entryPagePath = config.entryPagePath || routes[0].path?.[0];
-    const router = new UniversalRouter(routes, { baseUrl: basename || '' });
+    const router = new UniversalRouter__default["default"](routes, { baseUrl: basename || '' });
     const launchParam = handler.getQuery(stacks.length);
     app.onLaunch?.(launchParam);
     const render = async ({ location, action }) => {
-        handler.pathname = location.pathname;
+        handler.pathname = decodeURI(location.pathname);
         let element;
         try {
             element = await router.resolve(handler.router.forcePath || handler.pathname);
@@ -603,7 +713,7 @@ function createRouter(app, config, framework) {
             return;
         const pageConfig = handler.pageConfig;
         let enablePullDownRefresh = config?.window?.enablePullDownRefresh || false;
-        eventCenter.trigger('__taroRouterChange', {
+        runtime.eventCenter.trigger('__taroRouterChange', {
             toLocation: {
                 path: handler.pathname
             }
@@ -614,7 +724,7 @@ function createRouter(app, config, framework) {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
             }
         }
-        const currentPage = Current.page;
+        const currentPage = runtime.Current.page;
         const pathname = handler.pathname;
         let shouldLoad = false;
         if (action === 'POP') {
@@ -656,18 +766,173 @@ function createRouter(app, config, framework) {
             const stacksIndex = stacks.length;
             delete loadConfig['path'];
             delete loadConfig['load'];
-            const page = createPageConfig(enablePullDownRefresh ? runtimeHooks.createPullDownComponent?.(el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + stringify(handler.getQuery(stacksIndex)), {}, loadConfig);
+            const page = runtime.createPageConfig(enablePullDownRefresh ? runtimeHooks.createPullDownComponent?.(el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + runtime.stringify(handler.getQuery(stacksIndex)), {}, loadConfig);
             return handler.load(page, pageConfig, stacksIndex);
         }
     };
-    const stripped = stripBasename(history.location.pathname, handler.basename);
-    if (stripped === '/' || stripped === '') {
-        history.replace(prependBasename(entryPagePath + history.location.search));
+    if (exports.history.location.pathname === '/') {
+        const stripped = stripBasename(exports.history.location.pathname, handler.basename);
+        if (stripped === '/' || stripped === '') {
+            exports.history.replace(prependBasename(entryPagePath + exports.history.location.search));
+        }
+    }
+    render({ location: exports.history.location, action: history.Action.Push });
+    app.onShow?.(launchParam);
+    return exports.history.listen(render);
+}
+
+class MultiPageHandler {
+    config;
+    constructor(config) {
+        this.config = config;
+        this.mount();
+    }
+    get appId() { return 'app'; }
+    get router() { return this.config.router; }
+    get routerMode() { return this.router.mode || 'hash'; }
+    get customRoutes() { return this.router.customRoutes || {}; }
+    get tabBarList() { return this.config.tabBar?.list || []; }
+    get PullDownRefresh() { return this.config.PullDownRefresh; }
+    set pathname(p) { this.router.pathname = p; }
+    get pathname() { return this.router.pathname; }
+    get basename() { return this.router.basename || ''; }
+    get pageConfig() { return this.config.route; }
+    get isTabBar() {
+        const routePath = stripBasename(this.pathname, this.basename);
+        const pagePath = Object.entries(this.customRoutes).find(([, target]) => {
+            if (typeof target === 'string') {
+                return target === routePath;
+            }
+            else if (target?.length > 0) {
+                return target.includes(routePath);
+            }
+            return false;
+        })?.[0] || routePath;
+        return !!pagePath && this.tabBarList.some(t => t.pagePath === pagePath);
+    }
+    get search() { return location.search.substr(1); }
+    getQuery(search = '', options = {}) {
+        search = search ? `${search}&${this.search}` : this.search;
+        const query = search
+            ? queryString__default["default"].parse(search)
+            : {};
+        return { ...query, ...options };
+    }
+    mount() {
+        setHistoryMode(this.routerMode, this.router.basename);
+        document.getElementById('app')?.remove();
+        const app = document.createElement('div');
+        app.id = this.appId;
+        app.classList.add('taro_router');
+        if (this.tabBarList.length > 1) {
+            const container = document.createElement('div');
+            container.classList.add('taro-tabbar__container');
+            container.id = 'container';
+            const panel = document.createElement('div');
+            panel.classList.add('taro-tabbar__panel');
+            panel.appendChild(app);
+            container.appendChild(panel);
+            document.body.appendChild(container);
+            initTabbar(this.config);
+        }
+        else {
+            document.body.appendChild(app);
+        }
     }
-    render({ location: history.location, action: Action.Push });
+    onReady(page, onLoad = true) {
+        const pageEl = this.getPageContainer(page);
+        if (pageEl && !pageEl?.['__isReady']) {
+            const el = pageEl.firstElementChild;
+            el?.['componentOnReady']?.();
+            onLoad && (pageEl['__page'] = page);
+        }
+    }
+    load(page, pageConfig = {}) {
+        if (!page)
+            return;
+        page.onLoad?.(this.getQuery('', page.options), () => {
+            const pageEl = this.getPageContainer(page);
+            this.isTabBar && pageEl?.classList.add('taro_tabbar_page');
+            this.onReady(page, true);
+            page.onShow?.();
+            this.bindPageEvents(page, pageEl, pageConfig);
+        });
+    }
+    getPageContainer(page) {
+        const path = page ? page?.path : runtime.Current.page?.path;
+        const id = path?.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1');
+        if (page) {
+            return document.querySelector(`.taro_page#${id}`);
+        }
+        const el = (id
+            ? document.querySelector(`.taro_page#${id}`)
+            : document.querySelector('.taro_page') ||
+                document.querySelector('.taro_router'));
+        return el || window;
+    }
+    bindPageEvents(page, pageEl, config = {}) {
+        if (!pageEl) {
+            pageEl = this.getPageContainer();
+        }
+        const distance = config.onReachBottomDistance || this.config.window?.onReachBottomDistance || 50;
+        bindPageScroll(page, pageEl, distance);
+        bindPageResize(page);
+    }
+}
+
+/* eslint-disable dot-notation */
+// TODO 支持多路由 (APP 生命周期仅触发一次)
+/** Note: 关于多页面应用
+ * - 需要配置路由映射（根目录跳转、404 页面……）
+ * - app.onPageNotFound 事件不支持
+ * - 应用生命周期可能多次触发
+ * - TabBar 会多次加载
+ * - 不支持路由动画
+ */
+async function createMultiRouter(app, config, framework) {
+    RouterConfig.config = config;
+    const handler = new MultiPageHandler(config);
+    const runtimeHooks = runtime.container.get(runtime.SERVICE_IDENTIFIER.Hooks);
+    const launchParam = handler.getQuery();
+    app.onLaunch?.(launchParam);
+    const pathName = config.pageName;
+    const pageConfig = handler.pageConfig;
+    let element;
+    try {
+        element = await pageConfig.load?.();
+    }
+    catch (error) {
+        throw new Error(error);
+    }
+    if (!element)
+        return;
+    let enablePullDownRefresh = config?.window?.enablePullDownRefresh || false;
+    runtime.eventCenter.trigger('__taroRouterChange', {
+        toLocation: {
+            path: pathName
+        }
+    });
+    if (pageConfig) {
+        document.title = pageConfig.navigationBarTitleText ?? document.title;
+        if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
+            enablePullDownRefresh = pageConfig.enablePullDownRefresh;
+        }
+    }
+    const el = element.default ?? element;
+    const loadConfig = { ...pageConfig };
+    delete loadConfig['path'];
+    delete loadConfig['load'];
+    const page = runtime.createPageConfig(enablePullDownRefresh ? runtimeHooks.createPullDownComponent?.(el, location.pathname, framework, config.PullDownRefresh) : el, pathName + runtime.stringify(launchParam), {}, loadConfig);
+    handler.load(page, pageConfig);
     app.onShow?.(launchParam);
-    return history.listen(render);
 }
 
-export { createRouter, getCurrentPages, history, navigateBack, navigateTo, reLaunch, redirectTo, switchTab };
-//# sourceMappingURL=router.esm.js.map
+exports.createMultiRouter = createMultiRouter;
+exports.createRouter = createRouter;
+exports.getCurrentPages = getCurrentPages;
+exports.navigateBack = navigateBack;
+exports.navigateTo = navigateTo;
+exports.reLaunch = reLaunch;
+exports.redirectTo = redirectTo;
+exports.switchTab = switchTab;
+//# sourceMappingURL=index.cjs.js.map