@tarojs/router 4.0.0-beta.82 → 4.0.0-beta.83

package/dist/router/spa.d.ts

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

package/dist/router/spa.js

@@ -17,6 +17,10 @@ function createRouter(history, app, config, framework) {
     }
     RouterConfig.config = config;
     const handler = new PageHandler(config, history);
+    // Note: 弱网情况下，快速切换 tab，会造成同个页面实例被多次挂在到页面上，原因是资源请求是异步的，短时间内发起多个请求，
+    // 会在资源加载完成后，同时走到挂载的逻辑，造成 pageStampId 更新不及时，两个 page 的Id 相同，后面很多操作是通过 getElementById 来进行的
+    // 所以需要加一个锁来应对这个情况
+    const pageLock = {};
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => {
@@ -38,29 +42,35 @@ function createRouter(history, app, config, framework) {
     eventCenter.trigger('__taroRouterLaunch', launchParam);
     (_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, _h, _j, _k;
-        handler.pathname = decodeURI(location.pathname);
-        if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
+    const render = (_c) => __awaiter(this, [_c], void 0, function* ({ location, action }) {
+        var _d, _e, _f, _g, _h, _j, _k, _l;
+        // Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
+        const currentPathname = decodeURI(location.pathname);
+        if ((_d = window.__taroAppConfig) === null || _d === void 0 ? void 0 : _d.usingWindowScroll)
             window.scrollTo(0, 0);
         eventCenter.trigger('__taroRouterChange', {
             toLocation: {
-                path: handler.pathname
+                path: currentPathname
             }
         });
-        let element, params;
+        let element, context, params;
+        const routerPath = handler.router.forcePath || currentPathname;
+        pageLock[routerPath] = typeof pageLock[routerPath] === 'number' ? pageLock[routerPath] + 1 : 1;
+        const currentLock = pageLock[routerPath];
+        let postLock;
         try {
-            const result = yield router.resolve(handler.router.forcePath || handler.pathname);
-            [element, , params] = yield Promise.all(result);
+            const result = yield router.resolve(routerPath);
+            [element, context, params] = yield Promise.all(result);
+            postLock = pageLock[routerPath];
         }
         catch (error) {
             if (error.status === 404) {
                 const notFoundEvent = {
                     isEntryPage: stacks.length === 0,
-                    path: handler.pathname,
+                    path: currentPathname,
                     query: handler.getQuery(createStampId()),
                 };
-                (_d = app.onPageNotFound) === null || _d === void 0 ? void 0 : _d.call(app, notFoundEvent);
+                (_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
                 eventCenter.trigger('__taroRouterNotFound', notFoundEvent);
             }
             else if (/Loading hot update .* failed./.test(error.message)) {
@@ -71,13 +81,16 @@ function createRouter(history, app, config, framework) {
                 throw error;
             }
         }
-        if (!element)
+        if (!element || currentLock !== postLock)
             return;
-        const pageConfig = handler.pageConfig;
-        let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
-        let navigationStyle = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.navigationStyle) || 'default';
-        let navigationBarTextStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationBarTextStyle) || 'white';
-        let navigationBarBackgroundColor = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarBackgroundColor) || '#000000';
+        // Note: 异步结束后，在设置 handler.pathname
+        // context.pathname 在 universal-router 被处理过了，是发起资源请求的时候传入的 pathname，即 await router.resolve(routerPath) 这个 routerPath
+        handler.pathname = context.pathname;
+        const { pathname, pageConfig } = handler;
+        let enablePullDownRefresh = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.enablePullDownRefresh) || false;
+        let navigationStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationStyle) || 'default';
+        let navigationBarTextStyle = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarTextStyle) || 'white';
+        let navigationBarBackgroundColor = ((_j = config === null || config === void 0 ? void 0 : config.window) === null || _j === void 0 ? void 0 : _j.navigationBarBackgroundColor) || '#000000';
         if (pageConfig) {
             if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
@@ -94,8 +107,7 @@ function createRouter(history, app, config, framework) {
         }
         eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = Current.page;
-        const pathname = handler.pathname;
-        const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
+        const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
         stacks.method = '';
@@ -110,10 +122,11 @@ function createRouter(history, app, config, framework) {
             }
             shouldLoad = true;
         }
-        else if (currentPage && handler.isTabBar(handler.pathname)) {
+        else if (currentPage && handler.isTabBar(pathname)) {
             if (handler.isSamePage(currentPage))
                 return;
             if (handler.isTabBar(currentPage.path)) {
+                // NOTE: 从 tabBar 页面切换到 tabBar 页面
                 handler.hide(currentPage);
                 stacks.pushTab(currentPage.path.split('?')[0]);
             }
@@ -127,8 +140,8 @@ function createRouter(history, app, config, framework) {
                     handler.unload(currentPage, stacks.length, true);
                 }
             }
-            if (cacheTabs[handler.pathname]) {
-                stacks.popTab(handler.pathname);
+            if (cacheTabs[pathname]) {
+                stacks.popTab(pathname);
                 return handler.show(stacks.getItem(0), pageConfig, 0);
             }
             shouldLoad = true;
@@ -157,11 +170,11 @@ function createRouter(history, app, config, framework) {
             shouldLoad = true;
         }
         else if (action === 'PUSH') {
-            handler.hide(currentPage);
+            handler.hide(currentPage, true);
             shouldLoad = true;
         }
         if (shouldLoad || stacks.length < 1) {
-            const el = (_k = element.default) !== null && _k !== void 0 ? _k : element;
+            const el = (_l = element.default) !== null && _l !== void 0 ? _l : element;
             const loadConfig = Object.assign({}, pageConfig);
             const stacksIndex = stacks.length;
             delete loadConfig['path'];

package/dist/router/stack.d.ts

@@ -1,4 +1,4 @@
-import { PageInstance } from '@tarojs/runtime';
+import type { PageInstance } from '@tarojs/runtime';
 declare class Stacks {
     stacks: PageInstance[];
     backDelta: number;
@@ -23,4 +23,4 @@ declare class Stacks {
     removeTab(path: string): void;
 }
 declare const stacks: Stacks;
-export { stacks as default };
+export default stacks;

package/dist/style.d.ts

@@ -1,14 +1,13 @@
 /**
  * 插入页面动画需要的样式
  */
-declare function loadAnimateStyle(ms?: number): void;
+export declare function loadAnimateStyle(ms?: number): void;
 /**
  * 插入路由相关样式
  */
-declare function loadRouterStyle(enableTabBar: boolean, enableWindowScroll: boolean): void;
+export declare function loadRouterStyle(enableTabBar: boolean, enableWindowScroll: boolean): void;
 /**
  * 插入导航栏相关的样式
 */
-declare function loadNavigationBarStyle(): void;
-declare function addStyle(css: any): void;
-export { loadAnimateStyle, loadRouterStyle, loadNavigationBarStyle, addStyle };
+export declare function loadNavigationBarStyle(): void;
+export declare function addStyle(css: any): void;

package/dist/style.js

@@ -4,7 +4,8 @@
 function loadAnimateStyle(ms = 300) {
     const css = `
 body {
-  overflow: hidden; // 防止 iOS 页面滚动
+  /* 防止 iOS 页面滚动 */
+  overflow: hidden;
 }
 .taro_router > .taro_page {
   position: absolute;
@@ -61,8 +62,9 @@ ${enableTabBar ? `
   }
 
 ` : ''}
-  .taro_page_shade,
-  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
+  .taro_page_shade:has(+.taro_page_stationed),
+  .taro_page_shade.taro_tabbar_page,
+  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
     display: none;
   }
 `;
@@ -130,7 +132,7 @@ function loadNavigationBarStyle() {
     to {
       transform: rotate(360deg);
     }
-  }  
+  }
 
   .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
     display: none;

package/dist/tabbar.d.ts

@@ -1,4 +1,3 @@
 import { AppConfig } from '@tarojs/taro';
-import { History } from "./history.js";
-declare function initTabbar(config: AppConfig, history: History): void;
-export { initTabbar };
+import type { History } from 'history';
+export declare function initTabbar(config: AppConfig, history: History): void;

package/dist/utils/index.d.ts

@@ -6,6 +6,5 @@ declare class RoutesAlias {
     getAlias: (url?: string) => string;
     getAll: (url?: string) => string[];
 }
-declare const routesAlias: RoutesAlias;
-export { routesAlias };
-export * from "./navigate.js";
+export declare const routesAlias: RoutesAlias;
+export * from './navigate';

package/dist/utils/navigate.d.ts

@@ -1,10 +1,9 @@
-declare const isWeixin: () => boolean;
-declare const isDingTalk: () => boolean;
-declare function setMpaTitle(title: string): void;
-declare function setTitle(title: string): void;
-declare function setNavigationBarStyle(option: {
+export declare const isWeixin: () => boolean;
+export declare const isDingTalk: () => boolean;
+export declare function setMpaTitle(title: string): void;
+export declare function setTitle(title: string): void;
+export declare function setNavigationBarStyle(option: {
     backgroundColor: string;
     frontColor: string;
 }): void;
-declare function setNavigationBarLoading(loading: boolean): void;
-export { isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, setNavigationBarLoading };
+export declare function setNavigationBarLoading(loading: boolean): void;

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@tarojs/router",
-  "version": "4.0.0-beta.82",
+  "version": "4.0.0-beta.83",
   "description": "Taro-router",
+  "author": "O2Team",
+  "license": "MIT",
   "browser": "dist/index.js",
   "main:h5": "dist/index.esm.js",
   "main": "dist/index.js",
@@ -20,47 +22,34 @@
   "keywords": [
     "router"
   ],
-  "author": "O2Team",
-  "license": "MIT",
+  "engines": {
+    "node": ">= 18"
+  },
   "dependencies": {
     "dingtalk-jsapi": "~2.15.2",
-    "history": "^5.1.0",
+    "history": "^5.3.0",
     "mobile-detect": "^1.4.2",
-    "query-string": "^7.1.1",
+    "query-string": "^9.0.0",
     "tslib": "^2.6.2",
-    "universal-router": "^8.3.0"
+    "universal-router": "^9.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.0",
-    "@types/jest": "^29.4.0",
-    "jest": "^29.3.1",
-    "jest-cli": "^29.3.1",
-    "jest-environment-jsdom": "^29.6.4",
-    "jsdom": "^21.1.0",
-    "rollup": "^3.8.1",
-    "rollup-plugin-node-externals": "^5.0.0",
-    "rollup-plugin-ts": "^3.0.2",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4.7.4",
-    "@tarojs/taro": "4.0.0-beta.82",
-    "@tarojs/shared": "4.0.0-beta.82",
-    "@tarojs/runtime": "4.0.0-beta.82"
+    "@tarojs/components": "4.0.0-beta.83",
+    "@tarojs/runtime": "4.0.0-beta.83",
+    "@tarojs/taro": "4.0.0-beta.83",
+    "@tarojs/shared": "4.0.0-beta.83"
   },
   "peerDependencies": {
-    "@tarojs/runtime": "4.0.0-beta.82",
-    "@tarojs/taro": "4.0.0-beta.82",
-    "@tarojs/shared": "4.0.0-beta.82"
+    "@tarojs/runtime": "4.0.0-beta.83",
+    "@tarojs/shared": "4.0.0-beta.83",
+    "@tarojs/taro": "4.0.0-beta.83"
   },
   "scripts": {
+    "prod": "pnpm run build",
     "prebuild": "pnpm run clean",
     "build": "pnpm run rollup --environment NODE_ENV:production",
     "clean": "rimraf --impl=move-remove ./dist",
     "dev": "pnpm run rollup --environment NODE_ENV:development -w",
-    "rollup": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript --bundleConfigAsCjs",
-    "test": "cross-env NODE_ENV=jest jest",
-    "test:ci": "cross-env NODE_ENV=jest jest --ci -i --coverage --silent",
-    "test:dev": "cross-env NODE_ENV=jest jest --watch"
+    "rollup": "rollup --config rollup.config.mts --configPlugin typescript"
   }
 }

package/dist/index.cjs.d.ts

@@ -1,66 +0,0 @@
-import { Action, createBrowserHistory, createHashHistory, Blocker, BrowserHistoryOptions, HashHistoryOptions, History, Listener, Location, Path, To } from "history";
-import { IH5RouterConfig } from "@tarojs/taro/types/compile";
-import { StateEvent } from "../types/history";
-import { MpaRouterConfig, SpaRouterConfig } from '../types/router';
-import Taro from "@tarojs/taro";
-import { AppInstance } from "@tarojs/runtime";
-import { MpaRouterConfig as MpaRouterConfig$0 } from "../../types/router";
-import { SpaRouterConfig as SpaRouterConfig$0 } from "../../types/router";
-declare let history: History;
-declare class MpaHistory implements History {
-    action: Action;
-    get location(): Location;
-    createHref(_to: To): string;
-    parseUrl(to: Partial<Path>): string;
-    push(to: Partial<Path>, _state?: Record<string, unknown>): void;
-    replace(to: Partial<Path>, _state?: Record<string, unknown>): void;
-    go(delta: number): void;
-    back: () => void;
-    forward: () => void;
-    listen(listener: Listener): () => void;
-    block(_blocker: Blocker): () => void;
-    pushState: globalThis.History["pushState"];
-    replaceState: globalThis.History["replaceState"];
-    eventState(action: Required<StateEvent>["action"]): (data: any, unused: string, url?: string | URL | null) => any;
-}
-declare function setHistory(h: History, base?: string): void;
-declare function createMpaHistory(_?: HashHistoryOptions | BrowserHistoryOptions): MpaHistory;
-declare function setHistoryMode(mode?: IH5RouterConfig["mode"], base?: string): void;
-declare function prependBasename(url?: string): string;
-declare function navigateTo(option: Taro.navigateTo.Option): ReturnType<typeof Taro.navigateTo>;
-declare function redirectTo(option: Taro.redirectTo.Option): ReturnType<typeof Taro.redirectTo>;
-declare function navigateBack(option?: Taro.navigateBack.Option): ReturnType<typeof Taro.navigateBack>;
-declare function switchTab(option: Taro.switchTab.Option): ReturnType<typeof Taro.switchTab>;
-declare function reLaunch(option: Taro.reLaunch.Option): ReturnType<typeof Taro.reLaunch>;
-declare function getCurrentPages(): Taro.Page[];
-// TODO 支持多路由 (APP 生命周期仅触发一次)
-/** Note: 关于多页面应用
- * - 需要配置路由映射（根目录跳转、404 页面……）
- * - app.onPageNotFound 事件不支持
- * - 应用生命周期可能多次触发
- * - TabBar 会多次加载
- * - 不支持路由动画
- */
-declare function createMultiRouter(history: History, app: AppInstance, config: MpaRouterConfig$0, framework?: string): Promise<void>;
-declare function createRouter(history: History, app: AppInstance, config: SpaRouterConfig$0, framework?: string): () => void;
-declare class RoutesAlias {
-    conf: Array<string[]>;
-    set(customRoutes?: Record<string, string | string[]>): void;
-    getConfig: (url?: string) => string[];
-    getOrigin: (url?: string) => string;
-    getAlias: (url?: string) => string;
-    getAll: (url?: string) => string[];
-}
-declare const routesAlias: RoutesAlias;
-declare const isWeixin: () => boolean;
-declare const isDingTalk: () => boolean;
-declare function setMpaTitle(title: string): void;
-declare function setTitle(title: string): void;
-declare function setNavigationBarStyle(option: {
-    backgroundColor: string;
-    frontColor: string;
-}): void;
-declare function setNavigationBarLoading(loading: boolean): void;
-declare function handleAppMount(config: SpaRouterConfig | MpaRouterConfig, _: History, appId?: string): void;
-declare function handleAppMountWithTabbar(config: SpaRouterConfig | MpaRouterConfig, history: History, appId?: string): void;
-export { navigateTo, redirectTo, navigateBack, switchTab, reLaunch, getCurrentPages, history, setHistory, createMpaHistory, createBrowserHistory, createHashHistory, setHistoryMode, prependBasename, createMultiRouter, createRouter, routesAlias, isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, setNavigationBarLoading, handleAppMount, handleAppMountWithTabbar };

package/dist/index.esm.d.ts

@@ -1,66 +0,0 @@
-import { Action, createBrowserHistory, createHashHistory, Blocker, BrowserHistoryOptions, HashHistoryOptions, History, Listener, Location, Path, To } from "history";
-import { IH5RouterConfig } from "@tarojs/taro/types/compile";
-import { StateEvent } from "../types/history";
-import { MpaRouterConfig, SpaRouterConfig } from '../types/router';
-import Taro from "@tarojs/taro";
-import { AppInstance } from "@tarojs/runtime";
-import { MpaRouterConfig as MpaRouterConfig$0 } from "../../types/router";
-import { SpaRouterConfig as SpaRouterConfig$0 } from "../../types/router";
-declare let history: History;
-declare class MpaHistory implements History {
-    action: Action;
-    get location(): Location;
-    createHref(_to: To): string;
-    parseUrl(to: Partial<Path>): string;
-    push(to: Partial<Path>, _state?: Record<string, unknown>): void;
-    replace(to: Partial<Path>, _state?: Record<string, unknown>): void;
-    go(delta: number): void;
-    back: () => void;
-    forward: () => void;
-    listen(listener: Listener): () => void;
-    block(_blocker: Blocker): () => void;
-    pushState: globalThis.History["pushState"];
-    replaceState: globalThis.History["replaceState"];
-    eventState(action: Required<StateEvent>["action"]): (data: any, unused: string, url?: string | URL | null) => any;
-}
-declare function setHistory(h: History, base?: string): void;
-declare function createMpaHistory(_?: HashHistoryOptions | BrowserHistoryOptions): MpaHistory;
-declare function setHistoryMode(mode?: IH5RouterConfig["mode"], base?: string): void;
-declare function prependBasename(url?: string): string;
-declare function navigateTo(option: Taro.navigateTo.Option): ReturnType<typeof Taro.navigateTo>;
-declare function redirectTo(option: Taro.redirectTo.Option): ReturnType<typeof Taro.redirectTo>;
-declare function navigateBack(option?: Taro.navigateBack.Option): ReturnType<typeof Taro.navigateBack>;
-declare function switchTab(option: Taro.switchTab.Option): ReturnType<typeof Taro.switchTab>;
-declare function reLaunch(option: Taro.reLaunch.Option): ReturnType<typeof Taro.reLaunch>;
-declare function getCurrentPages(): Taro.Page[];
-// TODO 支持多路由 (APP 生命周期仅触发一次)
-/** Note: 关于多页面应用
- * - 需要配置路由映射（根目录跳转、404 页面……）
- * - app.onPageNotFound 事件不支持
- * - 应用生命周期可能多次触发
- * - TabBar 会多次加载
- * - 不支持路由动画
- */
-declare function createMultiRouter(history: History, app: AppInstance, config: MpaRouterConfig$0, framework?: string): Promise<void>;
-declare function createRouter(history: History, app: AppInstance, config: SpaRouterConfig$0, framework?: string): () => void;
-declare class RoutesAlias {
-    conf: Array<string[]>;
-    set(customRoutes?: Record<string, string | string[]>): void;
-    getConfig: (url?: string) => string[];
-    getOrigin: (url?: string) => string;
-    getAlias: (url?: string) => string;
-    getAll: (url?: string) => string[];
-}
-declare const routesAlias: RoutesAlias;
-declare const isWeixin: () => boolean;
-declare const isDingTalk: () => boolean;
-declare function setMpaTitle(title: string): void;
-declare function setTitle(title: string): void;
-declare function setNavigationBarStyle(option: {
-    backgroundColor: string;
-    frontColor: string;
-}): void;
-declare function setNavigationBarLoading(loading: boolean): void;
-declare function handleAppMount(config: SpaRouterConfig | MpaRouterConfig, _: History, appId?: string): void;
-declare function handleAppMountWithTabbar(config: SpaRouterConfig | MpaRouterConfig, history: History, appId?: string): void;
-export { navigateTo, redirectTo, navigateBack, switchTab, reLaunch, getCurrentPages, history, setHistory, createMpaHistory, createBrowserHistory, createHashHistory, setHistoryMode, prependBasename, createMultiRouter, createRouter, routesAlias, isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, setNavigationBarLoading, handleAppMount, handleAppMountWithTabbar };