@tarojs/router 3.4.0-beta.1 → 3.4.1

package/dist/index.js

@@ -483,8 +483,10 @@ var Stacks = /*#__PURE__*/function () {
     set: function set(delta) {
       if (delta > 0) {
         this.backDelta = delta;
-      } else {
+      } else if (this.backDelta > 0) {
         --this.backDelta;
+      } else {
+        this.backDelta = 0;
       }
     }
   }, {
@@ -525,10 +527,11 @@ var Stacks = /*#__PURE__*/function () {
     value: function getDelta(pathname) {
       if (this.backDelta >= 1) {
         return this.backDelta;
-      } // NOTE: 此处为了修复浏览器后退多级页面，在大量重复路由状况下可能出现判断错误的情况 （增强判断能力只能考虑在 query 中新增参数来判断，暂时搁置）
+      }
 
+      var index = this.getLastIndex(pathname); // NOTE: 此处为了修复浏览器后退多级页面，在大量重复路由状况下可能出现判断错误的情况 （增强判断能力只能考虑在 query 中新增参数来判断，暂时搁置）
 
-      return this.getLastIndex(pathname) || 1;
+      return index > 0 ? index : 1;
     }
   }, {
     key: "getPrevIndex",
@@ -603,8 +606,8 @@ var RoutesAlias = /*#__PURE__*/function () {
       var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       return _this.conf.filter(function (arr) {
         return arr.includes(url);
-      }).reduce(function (p, a) {
-        p.push(a[1]);
+      }).reduceRight(function (p, a) {
+        p.unshift(a[1]);
         return p;
       }, [url]);
     });
@@ -648,12 +651,10 @@ var routesAlias = new RoutesAlias();
 function processNavigateUrl(option) {
   var _pathPieces$pathname;
 
-  var pathPieces = J(option.url); // 处理自定义路由
-
-  pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname)); // 处理相对路径
+  var pathPieces = J(option.url); // 处理相对路径
 
-  if (pathPieces !== null && pathPieces !== void 0 && (_pathPieces$pathname = pathPieces.pathname) !== null && _pathPieces$pathname !== void 0 && _pathPieces$pathname.includes('./')) {
-    var parts = exports.history.location.pathname.split('/');
+  if ((_pathPieces$pathname = pathPieces.pathname) !== null && _pathPieces$pathname !== void 0 && _pathPieces$pathname.includes('./')) {
+    var parts = routesAlias.getOrigin(exports.history.location.pathname).split('/');
     parts.pop();
     pathPieces.pathname.split('/').forEach(function (item) {
       if (item === '.') {
@@ -663,9 +664,11 @@ function processNavigateUrl(option) {
       item === '..' ? parts.pop() : parts.push(item);
     });
     pathPieces.pathname = parts.join('/');
-  } // 处理 basename
+  } // 处理自定义路由
 
 
+  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 = '';
@@ -688,7 +691,7 @@ function _navigate() {
                   fail = option.fail;
               var unListen = exports.history.listen(function () {
                 var res = {
-                  errMsg: "".concat(method, ": ok")
+                  errMsg: "".concat(method, ":ok")
                 };
                 success === null || success === void 0 ? void 0 : success(res);
                 complete === null || complete === void 0 ? void 0 : complete(res);
@@ -717,7 +720,7 @@ function _navigate() {
                 }
               } catch (error) {
                 var res = {
-                  errMsg: "".concat(method, ": fail ").concat(error.message || error)
+                  errMsg: "".concat(method, ":fail ").concat(error.message || error)
                 };
                 fail === null || fail === void 0 ? void 0 : fail(res);
                 complete === null || complete === void 0 ? void 0 : complete(res);
@@ -1961,64 +1964,12 @@ var filterObj = function filterObj(obj, predicate) {
   };
 })(queryString);
 
-var pageScrollFn;
-var pageDOM = window;
-function bindPageScroll(page, config) {
-  pageDOM.removeEventListener('scroll', pageScrollFn);
-  pageDOM = getScrollContainer();
-  var distance = config.onReachBottomDistance || 50;
-  var isReachBottom = false;
-
-  pageScrollFn = function pageScrollFn() {
-    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);
-}
-window.addEventListener('DOMSubtreeModified', function (e) {
-  var target = e.target;
-  var className = target === null || target === void 0 ? void 0 : target.className;
-
-  if (className && /taro_page/.test(className)) {
-    pageDOM.removeEventListener('scroll', pageScrollFn);
-    pageDOM = getScrollContainer();
-    pageDOM.addEventListener('scroll', pageScrollFn, false);
-  }
-}, false);
-
-function getScrollContainer() {
-  var _Current$page;
-
-  var id = (_Current$page = runtime.Current.page) === null || _Current$page === void 0 ? void 0 : _Current$page.path;
-  var el = id ? document.getElementById(id) : document.querySelector('.taro_page') || document.querySelector('.taro_router');
-  return el || window;
-}
-
-function getOffset() {
-  if (pageDOM instanceof Window) {
-    return document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
-  } else {
-    return pageDOM.scrollHeight - pageDOM.scrollTop - pageDOM.clientHeight;
-  }
-}
-
 /**
  * 插入页面动画需要的样式
  */
 function loadAnimateStyle() {
   var ms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 300;
-  var css = "\n.taro_router .taro_page {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  transform: translate3d(100%, 0, 0);\n  transition: transform ".concat(ms, "ms;\n}\n\n.taro_router .taro_page.taro_tabbar_page {\n  transform: none;\n}\n\n.taro_router .taro_page.taro_page_show {\n  transform: translate3d(0, 0, 0);\n}");
+  var css = "\n.taro_router .taro_page {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n  transform: translate(100%, 0);\n  transition: transform ".concat(ms, "ms;\n  z-index: 0;\n}\n\n.taro_router .taro_page.taro_tabbar_page,\n.taro_router .taro_page.taro_page_show.taro_page_stationed {\n  transform: none;\n}\n\n.taro_router .taro_page.taro_page_show {\n  transform: translate(0, 0);\n}");
   var style = document.createElement('style');
   style.innerHTML = css;
   document.getElementsByTagName('head')[0].appendChild(style);
@@ -2055,6 +2006,56 @@ function initTabbar(config) {
   taro.initTabBarApis(config);
 }
 
+var pageResizeFn;
+function bindPageResize(page) {
+  window.removeEventListener('resize', pageResizeFn);
+
+  pageResizeFn = function pageResizeFn() {
+    page.onResize && page.onResize({
+      size: {
+        windowHeight: window.innerHeight,
+        windowWidth: window.innerWidth
+      }
+    });
+  };
+
+  window.addEventListener('resize', pageResizeFn, false);
+}
+
+var pageScrollFn;
+var pageDOM = window;
+function bindPageScroll(page, pageEl) {
+  var distance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
+  pageEl.removeEventListener('scroll', pageScrollFn);
+  pageDOM = pageEl;
+  var isReachBottom = false;
+
+  pageScrollFn = function pageScrollFn() {
+    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) {
   var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
 
@@ -2074,10 +2075,10 @@ var PageHandler = /*#__PURE__*/function () {
       delay: 50
     });
 
-    _defineProperty__default['default'](this, "hideTimer", void 0);
-
     _defineProperty__default['default'](this, "unloadTimer", void 0);
 
+    _defineProperty__default['default'](this, "hideTimer", void 0);
+
     _defineProperty__default['default'](this, "lastHidePage", void 0);
 
     _defineProperty__default['default'](this, "lastUnloadPage", void 0);
@@ -2135,14 +2136,14 @@ var PageHandler = /*#__PURE__*/function () {
     get: function get() {
       var _this$defaultAnimatio;
 
-      return _typeof__default['default'](this.animation) === 'object' ? this.animation.delay : this.animation ? (_this$defaultAnimatio = this.defaultAnimation) === null || _this$defaultAnimatio === void 0 ? void 0 : _this$defaultAnimatio.delay : 0;
+      return (_typeof__default['default'](this.animation) === 'object' ? this.animation.delay : this.animation ? (_this$defaultAnimatio = this.defaultAnimation) === null || _this$defaultAnimatio === void 0 ? void 0 : _this$defaultAnimatio.delay : 0) || 0;
     }
   }, {
     key: "animationDuration",
     get: function get() {
       var _this$defaultAnimatio2;
 
-      return _typeof__default['default'](this.animation) === 'object' ? this.animation.duration : this.animation ? (_this$defaultAnimatio2 = this.defaultAnimation) === null || _this$defaultAnimatio2 === void 0 ? void 0 : _this$defaultAnimatio2.duration : 0;
+      return (_typeof__default['default'](this.animation) === 'object' ? this.animation.duration : this.animation ? (_this$defaultAnimatio2 = this.defaultAnimation) === null || _this$defaultAnimatio2 === void 0 ? void 0 : _this$defaultAnimatio2.duration : 0) || 0;
     }
   }, {
     key: "pathname",
@@ -2204,7 +2205,7 @@ var PageHandler = /*#__PURE__*/function () {
     get: function get() {
       var search = '?';
 
-      if (this.routerMode) {
+      if (this.routerMode === 'hash') {
         var idx = location.hash.indexOf('?');
 
         if (idx > -1) {
@@ -2220,14 +2221,12 @@ var PageHandler = /*#__PURE__*/function () {
     key: "getQuery",
     value: function getQuery() {
       var stamp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var search = this.search;
+      var search = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      search = search ? "".concat(search, "&").concat(this.search) : this.search;
       var query = search ? queryString.parse(search) : {};
-
-      if (stamp) {
-        query.stamp = stamp.toString();
-      }
-
-      return query;
+      query.stamp = stamp.toString();
+      return _objectSpread__default['default'](_objectSpread__default['default']({}, query), options);
     }
   }, {
     key: "mount",
@@ -2259,7 +2258,7 @@ var PageHandler = /*#__PURE__*/function () {
     key: "onReady",
     value: function onReady(page) {
       var onLoad = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var pageEl = document.getElementById(page.path);
+      var pageEl = this.getPageContainer(page);
 
       if (pageEl && !(pageEl !== null && pageEl !== void 0 && pageEl['__isReady'])) {
         var _el$componentOnReady, _el$componentOnReady$;
@@ -2267,7 +2266,9 @@ var PageHandler = /*#__PURE__*/function () {
         var el = pageEl.firstElementChild;
         el === null || el === void 0 ? void 0 : (_el$componentOnReady = el['componentOnReady']) === null || _el$componentOnReady === void 0 ? void 0 : (_el$componentOnReady$ = _el$componentOnReady.call(el)) === null || _el$componentOnReady$ === void 0 ? void 0 : _el$componentOnReady$.then(function () {
           runtime.requestAnimationFrame(function () {
-            page.onReady();
+            var _page$onReady;
+
+            (_page$onReady = page.onReady) === null || _page$onReady === void 0 ? void 0 : _page$onReady.call(page);
             pageEl['__isReady'] = true;
           });
         });
@@ -2281,31 +2282,38 @@ var PageHandler = /*#__PURE__*/function () {
 
       var pageConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var stacksIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-      if (!page) return;
-      var pageEl = document.getElementById(page.path);
+      if (!page) return; // NOTE: 页面栈推入太晚可能导致 getCurrentPages 无法获取到当前页面实例
+
+      stacks.push(page);
+      var param = this.getQuery(stacks.length, '', page.options);
+      var pageEl = this.getPageContainer(page);
 
       if (pageEl) {
+        var _page$onShow;
+
         setDisplay(pageEl);
         this.isTabBar && pageEl.classList.add('taro_tabbar_page');
         this.addAnimation(pageEl, stacksIndex === 0);
+        (_page$onShow = page.onShow) === null || _page$onShow === void 0 ? void 0 : _page$onShow.call(page);
+        this.bindPageEvents(page, pageEl, pageConfig);
       } else {
         var _page$onLoad;
 
-        (_page$onLoad = page.onLoad) === null || _page$onLoad === void 0 ? void 0 : _page$onLoad.call(page, this.getQuery(stacksIndex), function () {
-          var _pageEl;
+        (_page$onLoad = page.onLoad) === null || _page$onLoad === void 0 ? void 0 : _page$onLoad.call(page, param, function () {
+          var _pageEl, _page$onShow2;
 
-          pageEl = document.getElementById(page.path);
+          pageEl = _this2.getPageContainer(page);
           _this2.isTabBar && ((_pageEl = pageEl) === null || _pageEl === void 0 ? void 0 : _pageEl.classList.add('taro_tabbar_page'));
 
           _this2.addAnimation(pageEl, stacksIndex === 0);
 
           _this2.onReady(page, true);
+
+          (_page$onShow2 = page.onShow) === null || _page$onShow2 === void 0 ? void 0 : _page$onShow2.call(page);
+
+          _this2.bindPageEvents(page, pageEl, pageConfig);
         });
       }
-
-      stacks.push(page);
-      page.onShow();
-      bindPageScroll(page, pageConfig);
     }
   }, {
     key: "unload",
@@ -2328,7 +2336,8 @@ var PageHandler = /*#__PURE__*/function () {
         }
 
         this.lastUnloadPage = page;
-        var pageEl = document.getElementById(page.path);
+        var pageEl = this.getPageContainer(page);
+        pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_stationed');
         pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_show');
         this.unloadTimer = setTimeout(function () {
           var _this3$lastUnloadPage, _this3$lastUnloadPage2;
@@ -2336,6 +2345,14 @@ var PageHandler = /*#__PURE__*/function () {
           _this3.unloadTimer = null;
           (_this3$lastUnloadPage = _this3.lastUnloadPage) === null || _this3$lastUnloadPage === void 0 ? void 0 : (_this3$lastUnloadPage2 = _this3$lastUnloadPage.onUnload) === null || _this3$lastUnloadPage2 === void 0 ? void 0 : _this3$lastUnloadPage2.call(_this3$lastUnloadPage);
         }, this.animationDuration);
+      } else {
+        var _page$onUnload;
+
+        var _pageEl2 = this.getPageContainer(page);
+
+        _pageEl2 === null || _pageEl2 === void 0 ? void 0 : _pageEl2.classList.remove('taro_page_stationed');
+        _pageEl2 === null || _pageEl2 === void 0 ? void 0 : _pageEl2.classList.remove('taro_page_show');
+        page === null || page === void 0 ? void 0 : (_page$onUnload = page.onUnload) === null || _page$onUnload === void 0 ? void 0 : _page$onUnload.call(page);
       }
 
       if (delta >= 1) this.unload(stacks.last, delta);
@@ -2348,25 +2365,33 @@ var PageHandler = /*#__PURE__*/function () {
       var pageConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var stacksIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
       if (!page) return;
-      page.onShow();
-      var pageEl = document.getElementById(page.path);
+      var param = this.getQuery(stacks.length, '', page.options);
+      var pageEl = this.getPageContainer(page);
 
       if (pageEl) {
+        var _page$onShow3;
+
         setDisplay(pageEl);
         this.addAnimation(pageEl, stacksIndex === 0);
+        (_page$onShow3 = page.onShow) === null || _page$onShow3 === void 0 ? void 0 : _page$onShow3.call(page);
+        this.bindPageEvents(page, pageEl, pageConfig);
       } else {
         var _page$onLoad2;
 
-        (_page$onLoad2 = page.onLoad) === null || _page$onLoad2 === void 0 ? void 0 : _page$onLoad2.call(page, this.getQuery(stacksIndex), function () {
-          pageEl = document.getElementById(page.path);
+        (_page$onLoad2 = page.onLoad) === null || _page$onLoad2 === void 0 ? void 0 : _page$onLoad2.call(page, param, function () {
+          var _page$onShow4;
+
+          pageEl = _this4.getPageContainer(page);
 
           _this4.addAnimation(pageEl, stacksIndex === 0);
 
           _this4.onReady(page, false);
+
+          (_page$onShow4 = page.onShow) === null || _page$onShow4 === void 0 ? void 0 : _page$onShow4.call(page);
+
+          _this4.bindPageEvents(page, pageEl, pageConfig);
         });
       }
-
-      bindPageScroll(page, pageConfig);
     }
   }, {
     key: "hide",
@@ -2375,9 +2400,11 @@ var PageHandler = /*#__PURE__*/function () {
 
       if (!page) return; // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
 
-      var pageEl = document.getElementById(page.path);
+      var pageEl = this.getPageContainer(page);
 
       if (pageEl) {
+        var _page$onHide;
+
         if (this.hideTimer) {
           clearTimeout(this.hideTimer);
           this.hideTimer = null;
@@ -2388,8 +2415,8 @@ var PageHandler = /*#__PURE__*/function () {
         this.hideTimer = setTimeout(function () {
           _this5.hideTimer = null;
           setDisplay(_this5.lastHidePage, 'none');
-        }, this.animationDelay);
-        page.onHide();
+        }, this.animationDuration + this.animationDelay);
+        (_page$onHide = page.onHide) === null || _page$onHide === void 0 ? void 0 : _page$onHide.call(page);
       } else {
         setTimeout(function () {
           return _this5.hide(page);
@@ -2399,24 +2426,60 @@ var PageHandler = /*#__PURE__*/function () {
   }, {
     key: "addAnimation",
     value: function addAnimation(pageEl) {
+      var _this6 = this;
+
       var first = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       if (!pageEl) return;
 
       if (this.animation && !first) {
         setTimeout(function () {
           pageEl.classList.add('taro_page_show');
+          setTimeout(function () {
+            pageEl.classList.add('taro_page_stationed');
+          }, _this6.animationDuration);
         }, this.animationDelay);
       } else {
         pageEl.classList.add('taro_page_show');
+        pageEl.classList.add('taro_page_stationed');
       }
     }
+  }, {
+    key: "getPageContainer",
+    value: function getPageContainer(page) {
+      var _Current$page;
+
+      var path = page ? page === null || page === void 0 ? void 0 : page.path : (_Current$page = runtime.Current.page) === null || _Current$page === void 0 ? void 0 : _Current$page.path;
+      var id = path === null || path === void 0 ? void 0 : path.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1');
+
+      if (page) {
+        return document.querySelector(".taro_page#".concat(id));
+      }
+
+      var el = id ? document.querySelector(".taro_page#".concat(id)) : document.querySelector('.taro_page') || document.querySelector('.taro_router');
+      return el || window;
+    }
+  }, {
+    key: "bindPageEvents",
+    value: function bindPageEvents(page, pageEl) {
+      var _this$config$window;
+
+      var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+      if (!pageEl) {
+        pageEl = this.getPageContainer();
+      }
+
+      var distance = config.onReachBottomDistance || ((_this$config$window = this.config.window) === null || _this$config$window === void 0 ? void 0 : _this$config$window.onReachBottomDistance) || 50;
+      bindPageScroll(page, pageEl, distance);
+      bindPageResize(page);
+    }
   }]);
 
   return PageHandler;
 }();
 
 function createRouter(app, config, framework) {
-  var _routes$0$path;
+  var _routes$0$path, _app$onLaunch, _app$onShow;
 
   var handler = new PageHandler(config);
   var runtimeHooks = runtime.container.get(runtime.SERVICE_IDENTIFIER.Hooks);
@@ -2432,10 +2495,13 @@ function createRouter(app, config, framework) {
   var router = new UniversalRouter(routes, {
     baseUrl: basename || ''
   });
-  app.onLaunch();
+  var launchParam = handler.getQuery(stacks.length);
+  (_app$onLaunch = app.onLaunch) === null || _app$onLaunch === void 0 ? void 0 : _app$onLaunch.call(app, launchParam);
 
   var render = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(_ref) {
+      var _config$window;
+
       var location, action, element, _app$onPageNotFound, pageConfig, enablePullDownRefresh, _pageConfig$navigatio, currentPage, pathname, shouldLoad, prevIndex, delta, _prevIndex, _delta, _element$default, _runtimeHooks$createP, el, loadConfig, stacksIndex, page;
 
       return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
@@ -2481,7 +2547,7 @@ function createRouter(app, config, framework) {
 
             case 17:
               pageConfig = handler.pageConfig;
-              enablePullDownRefresh = false;
+              enablePullDownRefresh = (config === null || config === void 0 ? void 0 : (_config$window = config.window) === null || _config$window === void 0 ? void 0 : _config$window.enablePullDownRefresh) || false;
               runtime.eventCenter.trigger('__taroRouterChange', {
                 toLocation: {
                   path: handler.pathname
@@ -2490,7 +2556,10 @@ function createRouter(app, config, framework) {
 
               if (pageConfig) {
                 document.title = (_pageConfig$navigatio = pageConfig.navigationBarTitleText) !== null && _pageConfig$navigatio !== void 0 ? _pageConfig$navigatio : document.title;
-                enablePullDownRefresh = pageConfig.enablePullDownRefresh;
+
+                if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
+                  enablePullDownRefresh = pageConfig.enablePullDownRefresh;
+                }
               }
 
               currentPage = runtime.Current.page;
@@ -2591,7 +2660,7 @@ function createRouter(app, config, framework) {
     location: exports.history.location,
     action: r.Push
   });
-  app.onShow(handler.getQuery(stacks.length));
+  (_app$onShow = app.onShow) === null || _app$onShow === void 0 ? void 0 : _app$onShow.call(app, launchParam);
   return exports.history.listen(render);
 }