@tarojs/router 3.7.0-alpha.1 → 3.7.0-alpha.3

package/dist/router/page.d.ts

@@ -28,6 +28,7 @@ export default class PageHandler {
     isTabBar(pathname: string): boolean;
     isSamePage(page?: PageInstance | null): boolean;
     get search(): string;
+    get usingWindowScroll(): boolean;
     getQuery(stamp?: string, search?: string, options?: Record<string, unknown>): {
         [x: string]: unknown;
     };
@@ -39,5 +40,7 @@ export default class PageHandler {
     hide(page?: PageInstance | null): void;
     addAnimation(pageEl?: HTMLElement | null, first?: boolean): void;
     getPageContainer(page?: PageInstance | null): HTMLElement | null;
-    bindPageEvents(page: PageInstance, pageEl?: HTMLElement | null, config?: Partial<PageConfig>): void;
+    getScrollingElement(page?: PageInstance | null): (Window & typeof globalThis) | HTMLElement;
+    bindPageEvents(page: PageInstance, config?: Partial<PageConfig>): void;
+    triggerRouterChange(): void;
 }

package/dist/router/page.js

@@ -1,10 +1,10 @@
 /* eslint-disable dot-notation */
-import { Current, requestAnimationFrame } from '@tarojs/runtime';
+import { Current, eventCenter, requestAnimationFrame } from '@tarojs/runtime';
 import queryString from 'query-string';
-import { loadAnimateStyle } from '../animation';
 import { bindPageResize } from '../events/resize';
 import { bindPageScroll } from '../events/scroll';
-import { setHistoryMode } from '../history';
+import { history, setHistoryMode } from '../history';
+import { loadAnimateStyle, loadRouterStyle } from '../style';
 import { initTabbar } from '../tabbar';
 import { addLeadingSlash, getCurrentPage, getHomePage, routesAlias, stripBasename, stripTrailing } from '../utils';
 import stacks from './stack';
@@ -92,6 +92,17 @@ export default class PageHandler {
         }
         return search.substring(1);
     }
+    get usingWindowScroll() {
+        var _a;
+        let usingWindowScroll = false;
+        if (typeof ((_a = this.pageConfig) === null || _a === void 0 ? void 0 : _a.usingWindowScroll) === 'boolean') {
+            usingWindowScroll = this.pageConfig.usingWindowScroll;
+        }
+        const win = window;
+        win.__taroAppConfig || (win.__taroAppConfig = {});
+        win.__taroAppConfig.usingWindowScroll = usingWindowScroll;
+        return usingWindowScroll;
+    }
     getQuery(stamp = '', search = '', options = {}) {
         search = search ? `${search}&${this.search}` : this.search;
         const query = search
@@ -102,7 +113,9 @@ export default class PageHandler {
     }
     mount() {
         setHistoryMode(this.routerMode, this.router.basename);
+        this.pathname = history.location.pathname;
         this.animation && loadAnimateStyle(this.animationDuration);
+        loadRouterStyle(this.usingWindowScroll);
         const appId = this.appId;
         let app = document.getElementById(appId);
         let isPosition = true;
@@ -169,7 +182,8 @@ export default class PageHandler {
             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);
+            this.bindPageEvents(page, pageConfig);
+            this.triggerRouterChange();
         }
         else {
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
@@ -179,7 +193,8 @@ export default class PageHandler {
                 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);
+                this.bindPageEvents(page, pageConfig);
+                this.triggerRouterChange();
             });
         }
     }
@@ -199,6 +214,9 @@ export default class PageHandler {
             const 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');
+            if (pageEl) {
+                pageEl.style.zIndex = '1';
+            }
             this.unloadTimer = setTimeout(() => {
                 var _a, _b;
                 this.unloadTimer = null;
@@ -224,7 +242,8 @@ export default class PageHandler {
             setDisplay(pageEl);
             this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
-            this.bindPageEvents(page, pageEl, pageConfig);
+            this.bindPageEvents(page, pageConfig);
+            this.triggerRouterChange();
         }
         else {
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
@@ -233,7 +252,8 @@ export default class PageHandler {
                 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);
+                this.bindPageEvents(page, pageConfig);
+                this.triggerRouterChange();
             });
         }
     }
@@ -287,15 +307,31 @@ export default class PageHandler {
             ? document.querySelector(`.taro_page#${id}`)
             : document.querySelector('.taro_page') ||
                 document.querySelector('.taro_router'));
-        return el || window;
+        return el;
     }
-    bindPageEvents(page, pageEl, config = {}) {
+    getScrollingElement(page) {
+        if (this.usingWindowScroll)
+            return window;
+        return this.getPageContainer(page) || window;
+    }
+    bindPageEvents(page, config = {}) {
         var _a;
-        if (!pageEl) {
-            pageEl = this.getPageContainer();
-        }
+        const scrollEl = this.getScrollingElement(page);
         const distance = config.onReachBottomDistance || ((_a = this.config.window) === null || _a === void 0 ? void 0 : _a.onReachBottomDistance) || 50;
-        bindPageScroll(page, pageEl, distance);
+        bindPageScroll(page, scrollEl, distance);
         bindPageResize(page);
     }
+    triggerRouterChange() {
+        /**
+         * @tarojs/runtime 中生命周期跑在 promise 中，所以这里需要 setTimeout 延迟事件调用
+         * TODO 考虑将生命周期返回 Promise，用于处理相关事件调用顺序
+         */
+        setTimeout(() => {
+            eventCenter.trigger('__afterTaroRouterChange', {
+                toLocation: {
+                    path: this.pathname
+                }
+            });
+        }, 0);
+    }
 }

package/dist/router/spa.d.ts

@@ -1,3 +1,3 @@
-import { AppInstance } from '@tarojs/runtime';
+import type { AppInstance } from '@tarojs/runtime';
 import type { SpaRouterConfig } from '../../types/router';
 export declare function createRouter(app: AppInstance, config: SpaRouterConfig, framework?: string): () => void;

package/dist/router/spa.js

@@ -21,6 +21,9 @@ const createStampId = incrementId();
 let launchStampId = createStampId();
 export function createRouter(app, config, framework) {
     var _a, _b;
+    if (typeof app.onUnhandledRejection === 'function') {
+        window.addEventListener('unhandledrejection', app.onUnhandledRejection);
+    }
     RouterConfig.config = config;
     const handler = new PageHandler(config);
     routesAlias.set(handler.router.customRoutes);
@@ -45,8 +48,10 @@ export 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);
+        if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
+            window.scrollTo(0, 0);
         eventCenter.trigger('__taroRouterChange', {
             toLocation: {
                 path: handler.pathname
@@ -59,9 +64,13 @@ export function createRouter(app, config, framework) {
         }
         catch (error) {
             if (error.status === 404) {
-                (_c = app.onPageNotFound) === null || _c === void 0 ? void 0 : _c.call(app, {
-                    path: handler.pathname
-                });
+                const notFoundEvent = {
+                    isEntryPage: stacks.length === 0,
+                    path: handler.pathname,
+                    query: handler.getQuery(createStampId()),
+                };
+                (_d = app.onPageNotFound) === null || _d === void 0 ? void 0 : _d.call(app, notFoundEvent);
+                eventCenter.trigger('__taroRouterNotFound', notFoundEvent);
             }
             else if (/Loading hot update .* failed./.test(error.message)) {
                 // NOTE: webpack5 与 prebundle 搭配使用时，开发环境下初次启动时偶发错误，由于 HMR 加载 chunk hash 错误，导致热更新失败
@@ -74,16 +83,16 @@ export function createRouter(app, config, framework) {
         if (!element)
             return;
         const pageConfig = handler.pageConfig;
-        let enablePullDownRefresh = ((_d = config === null || config === void 0 ? void 0 : config.window) === null || _d === void 0 ? void 0 : _d.enablePullDownRefresh) || false;
+        let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
         if (pageConfig) {
-            setTitle((_e = pageConfig.navigationBarTitleText) !== null && _e !== void 0 ? _e : document.title);
+            setTitle((_f = pageConfig.navigationBarTitleText) !== null && _f !== void 0 ? _f : document.title);
             if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
             }
         }
         const currentPage = Current.page;
         const pathname = handler.pathname;
-        const methodName = (_f = stacks.method) !== null && _f !== void 0 ? _f : '';
+        const methodName = (_g = stacks.method) !== null && _g !== void 0 ? _g : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
         stacks.method = '';
@@ -108,11 +117,11 @@ export function createRouter(app, config, framework) {
             else if (stacks.length > 0) {
                 const firstIns = stacks.getItem(0);
                 if (handler.isTabBar(firstIns.path)) {
-                    handler.unload(currentPage, stacks.length - 1);
+                    handler.unload(currentPage, stacks.length - 1, true);
                     stacks.pushTab(firstIns.path.split('?')[0]);
                 }
                 else {
-                    handler.unload(currentPage, stacks.length);
+                    handler.unload(currentPage, stacks.length, true);
                 }
             }
             if (cacheTabs[handler.pathname]) {
@@ -147,7 +156,7 @@ export function createRouter(app, config, framework) {
             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'];
@@ -160,16 +169,11 @@ export function createRouter(app, config, framework) {
             else {
                 pageStampId = createStampId();
             }
-            const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + stringify(handler.getQuery(pageStampId)), {}, loadConfig);
+            const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, pathname, framework, handler.PullDownRefresh, pageStampId) : el, pathname + stringify(handler.getQuery(pageStampId)), {}, loadConfig);
             if (params)
                 page.options = params;
             handler.load(page, pageConfig, pageStampId, stacksIndex);
         }
-        eventCenter.trigger('__afterTaroRouterChange', {
-            toLocation: {
-                path: handler.pathname
-            }
-        });
     });
     const routePath = addLeadingSlash(stripBasename(history.location.pathname, handler.basename));
     if (routePath === '/') {

package/dist/style.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 插入页面动画需要的样式
+ */
+export declare function loadAnimateStyle(ms?: number): void;
+/**
+ * 插入路由相关样式
+ */
+export declare function loadRouterStyle(usingWindowScroll: any): void;

package/dist/style.js

@@ -0,0 +1,71 @@
+/**
+ * 插入页面动画需要的样式
+ */
+export 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);
+}`;
+    addStyle(css);
+}
+/**
+ * 插入路由相关样式
+ */
+export function loadRouterStyle(usingWindowScroll) {
+    const css = `
+  .taro_router {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+  }
+
+  .taro-tabbar__container .taro_router {
+    min-height: calc(100vh - 50px);
+  }
+
+  .taro_page {
+    width: 100%;
+    height: 100%;
+  ${usingWindowScroll ? '' : `
+    overflow-x: hidden;
+    overflow-y: scroll;
+    max-height: 100vh;
+  `}
+  }
+
+  .taro-tabbar__container .taro-tabbar__panel {
+    overflow: hidden;
+  }
+
+  .taro-tabbar__container .taro_page.taro_tabbar_page {
+    max-height: calc(100vh - 50px);
+  }
+`;
+    addStyle(css);
+}
+function addStyle(css) {
+    if (!css)
+        return;
+    const style = document.createElement('style');
+    style.innerHTML = css;
+    document.getElementsByTagName('head')[0].appendChild(style);
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@tarojs/router",
-  "version": "3.7.0-alpha.1",
+  "version": "3.7.0-alpha.3",
   "description": "Taro-router",
-  "browser": "dist/index.esm.js",
-  "main:h5": "dist/index.js",
+  "browser": "dist/index.js",
+  "main:h5": "dist/index.esm.js",
   "main": "dist/index.js",
-  "module": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
@@ -27,8 +27,8 @@
     "mobile-detect": "^1.4.2",
     "query-string": "^7.1.1",
     "universal-router": "^8.3.0",
-    "@tarojs/runtime": "3.7.0-alpha.1",
-    "@tarojs/taro": "3.7.0-alpha.1"
+    "@tarojs/runtime": "3.7.0-alpha.3",
+    "@tarojs/taro": "3.7.0-alpha.3"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
@@ -47,7 +47,8 @@
   "scripts": {
     "build": "rimraf ./dist && tsc && rollup -c",
     "dev": "tsc -w",
-    "test": "jest",
-    "test:dev": "jest --watch"
+    "test": "cross-env NODE_ENV=jest jest",
+    "test:ci": "cross-env NODE_ENV=jest jest --ci",
+    "test:dev": "cross-env NODE_ENV=jest jest --watch"
   }
 }

package/dist/animation.d.ts

@@ -1,4 +0,0 @@
-/**
- * 插入页面动画需要的样式
- */
-export declare function loadAnimateStyle(ms?: number): void;

package/dist/animation.js

@@ -1,29 +0,0 @@
-/**
- * 插入页面动画需要的样式
- */
-export 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);
-}