@tarojs/router 3.6.0-canary.1 → 3.6.0-canary.10

package/dist/api.js

@@ -39,6 +39,7 @@ function processNavigateUrl(option) {
 function navigate(option, method) {
     return __awaiter(this, void 0, void 0, function* () {
         return new Promise((resolve, reject) => {
+            stacks.method = method;
             const { success, complete, fail } = option;
             const unListen = history.listen(() => {
                 const res = { errMsg: `${method}:ok` };

package/dist/index.cjs.js

@@ -46,6 +46,12 @@ 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.substring(prefix.length) : path;
 const stripTrailing = (str = '') => str.replace(/[?#][\s\S]*$/, '');
+const getHomePage = (path = '', basename = '', customRoutes = {}, entryPagePath = '') => {
+    var _a;
+    const routePath = addLeadingSlash(stripBasename(path, basename));
+    const alias = ((_a = Object.entries(customRoutes).find(([key]) => key === routePath)) === null || _a === void 0 ? void 0 : _a[1]) || routePath;
+    return entryPagePath || (typeof alias === 'string' ? alias : alias[0]) || basename;
+};
 class RoutesAlias {
     constructor() {
         this.conf = [];
@@ -212,6 +218,8 @@ class Stacks {
     constructor() {
         this.stacks = [];
         this.backDelta = 0;
+        this.tabs = {};
+        this.methodName = '';
     }
     set delta(delta) {
         if (delta > 0) {
@@ -227,6 +235,12 @@ class Stacks {
     get delta() {
         return this.backDelta;
     }
+    set method(methodName) {
+        this.methodName = methodName;
+    }
+    get method() {
+        return this.methodName;
+    }
     get length() {
         return this.stacks.length;
     }
@@ -264,6 +278,20 @@ class Stacks {
     push(page) {
         return this.stacks.push(page);
     }
+    getTabs() {
+        return this.tabs;
+    }
+    pushTab(path) {
+        this.tabs[path] = this.last;
+        this.pop();
+    }
+    popTab(path) {
+        this.push(this.tabs[path]);
+        delete this.tabs[path];
+    }
+    removeTab(path) {
+        delete this.tabs[path];
+    }
 }
 const stacks = new Stacks();
 
@@ -294,6 +322,7 @@ function processNavigateUrl(option) {
 function navigate(option, method) {
     return __awaiter(this, void 0, void 0, function* () {
         return new Promise((resolve, reject) => {
+            stacks.method = method;
             const { success, complete, fail } = option;
             const unListen = exports.history.listen(() => {
                 const res = { errMsg: `${method}:ok` };
@@ -470,7 +499,7 @@ class MultiPageHandler {
         this.config = config;
         this.mount();
     }
-    get appId() { return 'app'; }
+    get appId() { return this.config.appId || 'app'; }
     get router() { return this.config.router || {}; }
     get routerMode() { return this.router.mode || 'hash'; }
     get customRoutes() { return this.router.customRoutes || {}; }
@@ -503,11 +532,13 @@ class MultiPageHandler {
         return Object.assign(Object.assign({}, query), options);
     }
     mount() {
-        var _a;
         setHistoryMode(this.routerMode, this.router.basename);
-        (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
-        const app = document.createElement('div');
-        app.id = this.appId;
+        const appId = this.appId;
+        let app = document.getElementById(appId);
+        if (!app) {
+            app = document.createElement('div');
+            app.id = appId;
+        }
         app.classList.add('taro_router');
         if (this.tabBarList.length > 1) {
             const container = document.createElement('div');
@@ -570,6 +601,8 @@ class MultiPageHandler {
     }
 }
 
+const createStampId$1 = runtime.incrementId();
+const launchStampId$1 = createStampId$1();
 // TODO 支持多路由 (APP 生命周期仅触发一次)
 /** Note: 关于多页面应用
  * - 需要配置路由映射（根目录跳转、404 页面……）
@@ -585,7 +618,7 @@ function createMultiRouter(app, config, framework) {
         const handler = new MultiPageHandler(config);
         const launchParam = {
             path: config.pageName,
-            query: handler.getQuery(),
+            query: handler.getQuery(launchStampId$1),
             scene: 0,
             shareTicket: '',
             referrerInfo: {}
@@ -669,10 +702,10 @@ class PageHandler {
     constructor(config) {
         this.defaultAnimation = { duration: 300, delay: 50 };
         this.config = config;
-        this.homePage = this.getHomePage();
+        this.homePage = getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
         this.mount();
     }
-    get appId() { return 'app'; }
+    get appId() { return this.config.appId || 'app'; }
     get router() { return this.config.router || {}; }
     get routerMode() { return this.router.mode || 'hash'; }
     get customRoutes() { return this.router.customRoutes || {}; }
@@ -708,9 +741,9 @@ class PageHandler {
             return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
         });
     }
-    get isTabBar() {
+    isTabBar(pathname) {
         var _a;
-        const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
+        const routePath = addLeadingSlash(stripBasename(pathname, this.basename)).split('?')[0];
         const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
             if (typeof target === 'string') {
                 return target === routePath;
@@ -722,12 +755,6 @@ class PageHandler {
         })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
         return !!pagePath && this.tabBarList.some(t => stripTrailing(t.pagePath) === pagePath);
     }
-    getHomePage() {
-        var _a;
-        const routePath = addLeadingSlash(stripBasename(this.routes[0].path, this.basename));
-        const alias = ((_a = Object.entries(this.customRoutes).find(([key]) => key === routePath)) === null || _a === void 0 ? void 0 : _a[1]) || routePath;
-        return this.config.entryPagePath || (typeof alias === 'string' ? alias : alias[0]) || this.basename;
-    }
     isSamePage(page) {
         const routePath = stripBasename(this.pathname, this.basename);
         const pagePath = stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
@@ -746,21 +773,23 @@ class PageHandler {
         }
         return search.substr(1);
     }
-    getQuery(stamp = 0, search = '', options = {}) {
+    getQuery(stamp = '', search = '', options = {}) {
         search = search ? `${search}&${this.search}` : this.search;
         const query = search
             ? queryString__default["default"].parse(search, { decode: false })
             : {};
-        query.stamp = stamp.toString();
+        query.stamp = stamp;
         return Object.assign(Object.assign({}, query), options);
     }
     mount() {
-        var _a;
         setHistoryMode(this.routerMode, this.router.basename);
-        (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
         this.animation && loadAnimateStyle(this.animationDuration);
-        const app = document.createElement('div');
-        app.id = this.appId;
+        const appId = this.appId;
+        let app = document.getElementById(appId);
+        if (!app) {
+            app = document.createElement('div');
+            app.id = appId;
+        }
         app.classList.add('taro_router');
         if (this.tabBarList.length > 1) {
             const container = document.createElement('div');
@@ -792,18 +821,18 @@ class PageHandler {
             onLoad && (pageEl['__page'] = page);
         }
     }
-    load(page, pageConfig = {}, stacksIndex = 0) {
+    load(page, pageConfig = {}, stampId, pageNo = 0) {
         var _a, _b;
         if (!page)
             return;
         // NOTE: 页面栈推入太晚可能导致 getCurrentPages 无法获取到当前页面实例
         stacks.push(page);
-        const param = this.getQuery(stacks.length, '', page.options);
+        const param = this.getQuery(stampId, '', page.options);
         let pageEl = this.getPageContainer(page);
         if (pageEl) {
             setDisplay(pageEl);
-            this.isTabBar && pageEl.classList.add('taro_tabbar_page');
-            this.addAnimation(pageEl, stacksIndex === 0);
+            this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page');
+            this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
             this.bindPageEvents(page, pageEl, pageConfig);
         }
@@ -811,8 +840,8 @@ class PageHandler {
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
                 var _a;
                 pageEl = this.getPageContainer(page);
-                this.isTabBar && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
-                this.addAnimation(pageEl, stacksIndex === 0);
+                this.isTabBar(this.pathname) && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
+                this.addAnimation(pageEl, pageNo === 0);
                 this.onReady(page, true);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
                 this.bindPageEvents(page, pageEl, pageConfig);
@@ -850,15 +879,15 @@ class PageHandler {
         if (delta >= 1)
             this.unload(stacks.last, delta);
     }
-    show(page, pageConfig = {}, stacksIndex = 0) {
+    show(page, pageConfig = {}, pageNo = 0) {
         var _a, _b;
         if (!page)
             return;
-        const param = this.getQuery(stacks.length, '', page.options);
+        const param = this.getQuery(page['$taroParams']['stamp'], '', page.options);
         let pageEl = this.getPageContainer(page);
         if (pageEl) {
             setDisplay(pageEl);
-            this.addAnimation(pageEl, stacksIndex === 0);
+            this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
             this.bindPageEvents(page, pageEl, pageConfig);
         }
@@ -866,7 +895,7 @@ class PageHandler {
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
                 var _a;
                 pageEl = this.getPageContainer(page);
-                this.addAnimation(pageEl, stacksIndex === 0);
+                this.addAnimation(pageEl, pageNo === 0);
                 this.onReady(page, false);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
                 this.bindPageEvents(page, pageEl, pageConfig);
@@ -936,6 +965,8 @@ class PageHandler {
     }
 }
 
+const createStampId = runtime.incrementId();
+let launchStampId = createStampId();
 function createRouter(app, config, framework) {
     var _a, _b;
     RouterConfig.config = config;
@@ -953,7 +984,7 @@ function createRouter(app, config, framework) {
     const router = new UniversalRouter__default["default"](routes, { baseUrl: basename || '' });
     const launchParam = {
         path: handler.homePage,
-        query: handler.getQuery(stacks.length),
+        query: handler.getQuery(launchStampId),
         scene: 0,
         shareTicket: '',
         referrerInfo: {}
@@ -962,7 +993,7 @@ function createRouter(app, config, framework) {
     (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
     app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
     const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
-        var _c, _d, _e, _f, _g;
+        var _c, _d, _e, _f, _g, _h;
         handler.pathname = decodeURI(location.pathname);
         runtime.eventCenter.trigger('__taroRouterChange', {
             toLocation: {
@@ -1001,8 +1032,45 @@ function createRouter(app, config, framework) {
         }
         const currentPage = runtime.Current.page;
         const pathname = handler.pathname;
+        const methodName = (_g = stacks.method) !== null && _g !== void 0 ? _g : '';
+        const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
-        if (action === 'POP') {
+        stacks.method = '';
+        if (methodName === 'reLaunch') {
+            handler.unload(currentPage, stacks.length);
+            // NOTE: 同时卸载缓存在tabs里面的页面实例
+            for (const key in cacheTabs) {
+                if (cacheTabs[key]) {
+                    handler.unload(cacheTabs[key]);
+                    stacks.removeTab(key);
+                }
+            }
+            shouldLoad = true;
+        }
+        else if (currentPage && handler.isTabBar(handler.pathname)) {
+            if (handler.isSamePage(currentPage))
+                return;
+            if (handler.isTabBar(currentPage.path)) {
+                handler.hide(currentPage);
+                stacks.pushTab(currentPage.path.split('?')[0]);
+            }
+            else if (stacks.length > 0) {
+                const firstIns = stacks.getItem(0);
+                if (handler.isTabBar(firstIns.path)) {
+                    handler.unload(currentPage, stacks.length - 1);
+                    stacks.pushTab(firstIns.path.split('?')[0]);
+                }
+                else {
+                    handler.unload(currentPage, stacks.length);
+                }
+            }
+            if (cacheTabs[handler.pathname]) {
+                stacks.popTab(handler.pathname);
+                return handler.show(stacks.getItem(0), pageConfig, 0);
+            }
+            shouldLoad = true;
+        }
+        else if (action === 'POP') {
             // NOTE: 浏览器事件退后多次时，该事件只会被触发一次
             const prevIndex = stacks.getPrevIndex(pathname);
             const delta = stacks.getDelta(pathname);
@@ -1017,38 +1085,40 @@ function createRouter(app, config, framework) {
                 }
             }
         }
-        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);
-            }
+        else if (action === 'REPLACE') {
+            const delta = stacks.getDelta(pathname);
+            // NOTE: 页面路由记录并不会清空，只是移除掉缓存的 stack 以及页面
+            handler.unload(currentPage, delta);
+            shouldLoad = true;
+        }
+        else if (action === 'PUSH') {
+            handler.hide(currentPage);
             shouldLoad = true;
         }
         if (shouldLoad || stacks.length < 1) {
-            const el = (_g = element.default) !== null && _g !== void 0 ? _g : element;
+            const el = (_h = element.default) !== null && _h !== void 0 ? _h : element;
             const loadConfig = Object.assign({}, pageConfig);
             const stacksIndex = stacks.length;
             delete loadConfig['path'];
             delete loadConfig['load'];
-            const page = runtime.createPageConfig(enablePullDownRefresh ? runtime.hooks.call('createPullDownComponent', el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + runtime.stringify(handler.getQuery(stacksIndex)), {}, loadConfig);
+            let pageStampId = '';
+            if (launchStampId) {
+                pageStampId = launchStampId;
+                launchStampId = '';
+            }
+            else {
+                pageStampId = createStampId();
+            }
+            const page = runtime.createPageConfig(enablePullDownRefresh ? runtime.hooks.call('createPullDownComponent', el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + runtime.stringify(handler.getQuery(pageStampId)), {}, loadConfig);
             if (params)
                 page.options = params;
-            return handler.load(page, pageConfig, stacksIndex);
+            handler.load(page, pageConfig, pageStampId, stacksIndex);
         }
+        runtime.eventCenter.trigger('__afterTaroRouterChange', {
+            toLocation: {
+                path: handler.pathname
+            }
+        });
     });
     const routePath = addLeadingSlash(stripBasename(exports.history.location.pathname, handler.basename));
     if (routePath === '/') {