@tarojs/router 3.4.5 → 3.5.0-alpha.0

package/dist/index.js

@@ -1,688 +1,4 @@
-'use strict';
-
-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);
-
-exports.history = void 0;
-let basename = '/';
-function setHistoryMode(mode, base = '/') {
-    const options = {
-        window
-    };
-    basename = base;
-    if (mode === 'browser') {
-        exports.history = history.createBrowserHistory(options);
-    }
-    else {
-        // default is hash
-        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 = [];
-    backDelta = 0;
-    set delta(delta) {
-        if (delta > 0) {
-            this.backDelta = delta;
-        }
-        else if (this.backDelta > 0) {
-            --this.backDelta;
-        }
-        else {
-            this.backDelta = 0;
-        }
-    }
-    get delta() {
-        return this.backDelta;
-    }
-    get length() {
-        return this.stacks.length;
-    }
-    get last() {
-        return this.stacks[this.length - 1];
-    }
-    get() {
-        return this.stacks;
-    }
-    getItem(index) {
-        return this.stacks[index];
-    }
-    getLastIndex(pathname, stateWith = 1) {
-        const list = [...this.stacks].reverse();
-        return list.findIndex((page, i) => i >= stateWith && page.path?.replace(/\?.*/g, '') === pathname);
-    }
-    getDelta(pathname) {
-        if (this.backDelta >= 1) {
-            return this.backDelta;
-        }
-        const index = this.getLastIndex(pathname);
-        // NOTE: 此处为了修复浏览器后退多级页面，在大量重复路由状况下可能出现判断错误的情况 （增强判断能力只能考虑在 query 中新增参数来判断，暂时搁置）
-        return index > 0 ? index : 1;
-    }
-    getPrevIndex(pathname, stateWith = 1) {
-        const lastIndex = this.getLastIndex(pathname, stateWith);
-        if (lastIndex < 0) {
-            return -1;
-        }
-        return this.length - 1 - lastIndex;
-    }
-    pop() {
-        return this.stacks.pop();
-    }
-    push(page) {
-        return this.stacks.push(page);
-    }
-}
-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 = history.parsePath(option.url);
-    // 处理相对路径
-    if (pathPieces.pathname?.includes('./')) {
-        const parts = routesAlias.getOrigin(exports.history.location.pathname).split('/');
-        parts.pop();
-        pathPieces.pathname.split('/').forEach((item) => {
-            if (item === '.') {
-                return;
-            }
-            item === '..' ? parts.pop() : parts.push(item);
-        });
-        pathPieces.pathname = parts.join('/');
-    }
-    // 处理自定义路由
-    pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
-    // 处理 basename
-    pathPieces.pathname = prependBasename(pathPieces.pathname);
-    // hack fix history v5 bug: https://github.com/remix-run/history/issues/814
-    if (!pathPieces.search)
-        pathPieces.search = '';
-    return pathPieces;
-}
-async function navigate(option, method) {
-    return new Promise((resolve, reject) => {
-        const { success, complete, fail } = option;
-        const unListen = exports.history.listen(() => {
-            const res = { errMsg: `${method}:ok` };
-            success?.(res);
-            complete?.(res);
-            resolve(res);
-            unListen();
-        });
-        try {
-            if ('url' in option) {
-                const pathPieces = processNavigateUrl(option);
-                const state = { timestamp: Date.now() };
-                if (method === 'navigateTo') {
-                    exports.history.push(pathPieces, state);
-                }
-                else if (method === 'redirectTo' || method === 'switchTab') {
-                    exports.history.replace(pathPieces, state);
-                }
-                else if (method === 'reLaunch') {
-                    stacks.delta = stacks.length;
-                    exports.history.replace(pathPieces, state);
-                }
-            }
-            else if (method === 'navigateBack') {
-                stacks.delta = option.delta;
-                exports.history.go(-option.delta);
-            }
-        }
-        catch (error) {
-            const res = { errMsg: `${method}:fail ${error.message || error}` };
-            fail?.(res);
-            complete?.(res);
-            reject(res);
-        }
-    });
-}
-function navigateTo(option) {
-    return navigate(option, 'navigateTo');
-}
-function redirectTo(option) {
-    return navigate(option, 'redirectTo');
-}
-function navigateBack(options = { delta: 1 }) {
-    if (!options.delta || options.delta < 1) {
-        options.delta = 1;
-    }
-    return navigate(options, 'navigateBack');
-}
-function switchTab(option) {
-    return navigate(option, 'switchTab');
-}
-function reLaunch(option) {
-    return navigate(option, 'reLaunch');
-}
-function getCurrentPages() {
-    const pages = stacks.get();
-    return pages.map(e => ({ ...e, route: e.path || '' }));
-}
-
-/**
- * 插入页面动画需要的样式
- */
-function loadAnimateStyle(ms = 300) {
-    const css = `
-.taro_router .taro_page {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  transform: translate(100%, 0);
-  transition: transform ${ms}ms;
-  z-index: 0;
-}
-
-.taro_router .taro_page.taro_tabbar_page,
-.taro_router .taro_page.taro_page_show.taro_page_stationed {
-  transform: none;
-}
-
-.taro_router .taro_page.taro_page_show {
-  transform: translate(0, 0);
-}`;
-    const style = document.createElement('style');
-    style.innerHTML = css;
-    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 = 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);
-}
-
-let pageResizeFn;
-function bindPageResize(page) {
-    window.removeEventListener('resize', pageResizeFn);
-    pageResizeFn = function () {
-        page.onResize && page.onResize({
-            size: {
-                windowHeight: window.innerHeight,
-                windowWidth: window.innerWidth
-            }
-        });
-    };
-    window.addEventListener('resize', pageResizeFn, false);
-}
-
-let pageScrollFn;
-let pageDOM = window;
-function bindPageScroll(page, pageEl, distance = 50) {
-    pageEl.removeEventListener('scroll', pageScrollFn);
-    pageDOM = pageEl;
-    let isReachBottom = false;
-    pageScrollFn = function () {
-        page.onPageScroll && page.onPageScroll({
-            scrollTop: pageDOM instanceof Window ? window.scrollY : pageDOM.scrollTop
-        });
-        if (isReachBottom && getOffset() > distance) {
-            isReachBottom = false;
-        }
-        if (page.onReachBottom &&
-            !isReachBottom &&
-            getOffset() < distance) {
-            isReachBottom = true;
-            page.onReachBottom();
-        }
-    };
-    pageDOM.addEventListener('scroll', pageScrollFn, false);
-}
-function getOffset() {
-    if (pageDOM instanceof Window) {
-        return document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
-    }
-    else {
-        return pageDOM.scrollHeight - pageDOM.scrollTop - pageDOM.clientHeight;
-    }
-}
-
-function setDisplay(el, type = '') {
-    if (el) {
-        el.style.display = type;
-    }
-}
-class PageHandler {
-    config;
-    defaultAnimation = { duration: 300, delay: 50 };
-    unloadTimer;
-    hideTimer;
-    lastHidePage;
-    lastUnloadPage;
-    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 routes() { return this.config.routes; }
-    get tabBarList() { return this.config.tabBar?.list || []; }
-    get PullDownRefresh() { return this.config.PullDownRefresh; }
-    get animation() { return this.config?.animation ?? this.defaultAnimation; }
-    get animationDelay() {
-        return (typeof this.animation === 'object'
-            ? this.animation.delay
-            : this.animation
-                ? this.defaultAnimation?.delay
-                : 0) || 0;
-    }
-    get animationDuration() {
-        return (typeof this.animation === 'object'
-            ? this.animation.duration
-            : this.animation
-                ? this.defaultAnimation?.duration
-                : 0) || 0;
-    }
-    set pathname(p) { this.router.pathname = p; }
-    get pathname() { return this.router.pathname; }
-    get basename() { return this.router.basename || ''; }
-    get pageConfig() {
-        return this.routes.find(r => {
-            const routePath = stripBasename(this.pathname, this.basename);
-            const pagePath = addLeadingSlash(r.path);
-            return pagePath === routePath || routesAlias.getConfig(pagePath)?.includes(routePath);
-        });
-    }
-    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);
-    }
-    isSamePage(page) {
-        const routePath = stripBasename(this.pathname, this.basename);
-        const pagePath = stripBasename(page?.path, this.basename);
-        return pagePath.startsWith(routePath + '?');
-    }
-    get search() {
-        let search = '?';
-        if (this.routerMode === 'hash') {
-            const idx = location.hash.indexOf('?');
-            if (idx > -1) {
-                search = location.hash.slice(idx);
-            }
-        }
-        else {
-            search = location.search;
-        }
-        return search.substr(1);
-    }
-    getQuery(stamp = 0, search = '', options = {}) {
-        search = search ? `${search}&${this.search}` : this.search;
-        const query = search
-            ? queryString__default["default"].parse(search, { decode: false })
-            : {};
-        query.stamp = stamp.toString();
-        return { ...query, ...options };
-    }
-    mount() {
-        setHistoryMode(this.routerMode, this.router.basename);
-        document.getElementById('app')?.remove();
-        this.animation && loadAnimateStyle(this.animationDuration);
-        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);
-        }
-    }
-    onReady(page, onLoad = true) {
-        const pageEl = this.getPageContainer(page);
-        if (pageEl && !pageEl?.['__isReady']) {
-            const el = pageEl.firstElementChild;
-            el?.['componentOnReady']?.()?.then(() => {
-                runtime.requestAnimationFrame(() => {
-                    page.onReady?.();
-                    pageEl['__isReady'] = true;
-                });
-            });
-            onLoad && (pageEl['__page'] = page);
-        }
-    }
-    load(page, pageConfig = {}, stacksIndex = 0) {
-        if (!page)
-            return;
-        // NOTE: 页面栈推入太晚可能导致 getCurrentPages 无法获取到当前页面实例
-        stacks.push(page);
-        const param = this.getQuery(stacks.length, '', page.options);
-        let pageEl = this.getPageContainer(page);
-        if (pageEl) {
-            setDisplay(pageEl);
-            this.isTabBar && pageEl.classList.add('taro_tabbar_page');
-            this.addAnimation(pageEl, stacksIndex === 0);
-            page.onShow?.();
-            this.bindPageEvents(page, pageEl, pageConfig);
-        }
-        else {
-            page.onLoad?.(param, () => {
-                pageEl = this.getPageContainer(page);
-                this.isTabBar && pageEl?.classList.add('taro_tabbar_page');
-                this.addAnimation(pageEl, stacksIndex === 0);
-                this.onReady(page, true);
-                page.onShow?.();
-                this.bindPageEvents(page, pageEl, pageConfig);
-            });
-        }
-    }
-    unload(page, delta = 1, top = false) {
-        if (!page)
-            return;
-        stacks.delta = --delta;
-        stacks.pop();
-        if (this.animation && top) {
-            if (this.unloadTimer) {
-                clearTimeout(this.unloadTimer);
-                this.lastUnloadPage?.onUnload?.();
-                this.unloadTimer = null;
-            }
-            this.lastUnloadPage = page;
-            const pageEl = this.getPageContainer(page);
-            pageEl?.classList.remove('taro_page_stationed');
-            pageEl?.classList.remove('taro_page_show');
-            this.unloadTimer = setTimeout(() => {
-                this.unloadTimer = null;
-                this.lastUnloadPage?.onUnload?.();
-            }, this.animationDuration);
-        }
-        else {
-            const pageEl = this.getPageContainer(page);
-            pageEl?.classList.remove('taro_page_stationed');
-            pageEl?.classList.remove('taro_page_show');
-            page?.onUnload?.();
-        }
-        if (delta >= 1)
-            this.unload(stacks.last, delta);
-    }
-    show(page, pageConfig = {}, stacksIndex = 0) {
-        if (!page)
-            return;
-        const param = this.getQuery(stacks.length, '', page.options);
-        let pageEl = this.getPageContainer(page);
-        if (pageEl) {
-            setDisplay(pageEl);
-            this.addAnimation(pageEl, stacksIndex === 0);
-            page.onShow?.();
-            this.bindPageEvents(page, pageEl, pageConfig);
-        }
-        else {
-            page.onLoad?.(param, () => {
-                pageEl = this.getPageContainer(page);
-                this.addAnimation(pageEl, stacksIndex === 0);
-                this.onReady(page, false);
-                page.onShow?.();
-                this.bindPageEvents(page, pageEl, pageConfig);
-            });
-        }
-    }
-    hide(page) {
-        if (!page)
-            return;
-        // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
-        const pageEl = this.getPageContainer(page);
-        if (pageEl) {
-            if (this.hideTimer) {
-                clearTimeout(this.hideTimer);
-                this.hideTimer = null;
-                setDisplay(this.lastHidePage, 'none');
-            }
-            this.lastHidePage = pageEl;
-            this.hideTimer = setTimeout(() => {
-                this.hideTimer = null;
-                setDisplay(this.lastHidePage, 'none');
-            }, this.animationDuration + this.animationDelay);
-            page.onHide?.();
-        }
-        else {
-            setTimeout(() => this.hide(page), 0);
-        }
-    }
-    addAnimation(pageEl, first = false) {
-        if (!pageEl)
-            return;
-        if (this.animation && !first) {
-            setTimeout(() => {
-                pageEl.classList.add('taro_page_show');
-                setTimeout(() => {
-                    pageEl.classList.add('taro_page_stationed');
-                }, this.animationDuration);
-            }, this.animationDelay);
-        }
-        else {
-            pageEl.classList.add('taro_page_show');
-            pageEl.classList.add('taro_page_stationed');
-        }
-    }
-    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 */
-function createRouter(app, config, framework) {
-    const handler = new PageHandler(config);
-    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 => ({
-        path: routesAlias.getAll(addLeadingSlash(route.path)),
-        action: route.load
-    }));
-    const entryPagePath = config.entryPagePath || routes[0].path?.[0];
-    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;
-        let element;
-        try {
-            element = await router.resolve(handler.router.forcePath || handler.pathname);
-        }
-        catch (error) {
-            if (error.status === 404) {
-                app.onPageNotFound?.({
-                    path: handler.pathname
-                });
-            }
-            else {
-                throw new Error(error);
-            }
-        }
-        if (!element)
-            return;
-        const pageConfig = handler.pageConfig;
-        let enablePullDownRefresh = config?.window?.enablePullDownRefresh || false;
-        runtime.eventCenter.trigger('__taroRouterChange', {
-            toLocation: {
-                path: handler.pathname
-            }
-        });
-        if (pageConfig) {
-            document.title = pageConfig.navigationBarTitleText ?? document.title;
-            if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
-                enablePullDownRefresh = pageConfig.enablePullDownRefresh;
-            }
-        }
-        const currentPage = runtime.Current.page;
-        const pathname = handler.pathname;
-        let shouldLoad = false;
-        if (action === 'POP') {
-            // NOTE: 浏览器事件退后多次时，该事件只会被触发一次
-            const prevIndex = stacks.getPrevIndex(pathname);
-            const delta = stacks.getDelta(pathname);
-            handler.unload(currentPage, delta, prevIndex > -1);
-            if (prevIndex > -1) {
-                handler.show(stacks.getItem(prevIndex), pageConfig, prevIndex);
-            }
-            else {
-                shouldLoad = true;
-            }
-        }
-        else {
-            if (handler.isTabBar) {
-                if (handler.isSamePage(currentPage))
-                    return;
-                const prevIndex = stacks.getPrevIndex(pathname, 0);
-                handler.hide(currentPage);
-                if (prevIndex > -1) {
-                    // NOTE: tabbar 页且之前出现过，直接复用
-                    return handler.show(stacks.getItem(prevIndex), pageConfig, prevIndex);
-                }
-            }
-            else if (action === 'REPLACE') {
-                const delta = stacks.getDelta(pathname);
-                // NOTE: 页面路由记录并不会清空，只是移除掉缓存的 stack 以及页面
-                handler.unload(currentPage, delta);
-            }
-            else if (action === 'PUSH') {
-                handler.hide(currentPage);
-            }
-            shouldLoad = true;
-        }
-        if (shouldLoad || stacks.length < 1) {
-            const el = element.default ?? element;
-            const loadConfig = { ...pageConfig };
-            const stacksIndex = stacks.length;
-            delete loadConfig['path'];
-            delete loadConfig['load'];
-            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(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);
-}
-
-exports.createRouter = createRouter;
-exports.getCurrentPages = getCurrentPages;
-exports.navigateBack = navigateBack;
-exports.navigateTo = navigateTo;
-exports.reLaunch = reLaunch;
-exports.redirectTo = redirectTo;
-exports.switchTab = switchTab;
-//# sourceMappingURL=index.js.map
+export { history } from './history';
+export * from './api';
+export { createRouter } from './router/spa';
+export { createMultiRouter } from './router/mpa';