@tarojs/router 4.0.0-alpha.19 → 4.0.0-alpha.20

package/LICENSE

@@ -165,3 +165,10 @@ Apache-2.0 (intersection-observer):
 The following files embed [intersection-observer](https://github.com/GoogleChromeLabs/intersection-observer) Apache-2.0:
 `/packages/taro-api/src/polyfill/intersection-observer.ts`
 See `/LICENSE.txt` for details of the license.
+
+==================
+
+MIT (babel-plugin-jsx-dom-expressions):
+The following files embed [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions) MIT:
+`/packages/babel-plugin-transform-solid-jsx/src/*`
+See `/LICENSE` for details of the license.

package/dist/api.js

@@ -54,6 +54,7 @@ function navigate(option, method) {
                     const pathPieces = processNavigateUrl(option);
                     const state = { timestamp: Date.now() };
                     if (method === 'navigateTo') {
+                        // Note: 由于 spa 会针对弱网情况下，短时间内多次跳转同一个页面跳转加了锁，后续如果有用户反馈返回无效，那可能是这个问题
                         history.push(pathPieces, state);
                     }
                     else if (method === 'redirectTo' || method === 'switchTab') {

package/dist/index.cjs.js

@@ -574,6 +574,7 @@ function navigate(option, method) {
                     const pathPieces = processNavigateUrl(option);
                     const state = { timestamp: Date.now() };
                     if (method === 'navigateTo') {
+                        // Note: 由于 spa 会针对弱网情况下，短时间内多次跳转同一个页面跳转加了锁，后续如果有用户反馈返回无效，那可能是这个问题
                         exports.history.push(pathPieces, state);
                     }
                     else if (method === 'redirectTo' || method === 'switchTab') {
@@ -1493,6 +1494,10 @@ function createRouter(history$1, app, config, framework) {
     }
     RouterConfig.config = config;
     const handler = new PageHandler(config, history$1);
+    // Note: 弱网情况下，快速切换 tab，会造成同个页面实例被多次挂在到页面上，原因是资源请求是异步的，短时间内发起多个请求，
+    // 会在资源加载完成后，同时走到挂载的逻辑，造成 pageStampId 更新不及时，两个 page 的Id 相同，后面很多操作是通过 getElementById 来进行的
+    // 所以需要加一个锁来应对这个情况
+    const pageLock = {};
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => {
@@ -1516,24 +1521,30 @@ function createRouter(history$1, app, config, framework) {
     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 = (_c) => tslib.__awaiter(this, [_c], void 0, function* ({ location, action }) {
         var _d, _e, _f, _g, _h, _j, _k, _l;
-        handler.pathname = decodeURI(location.pathname);
+        // Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
+        const currentPathname = decodeURI(location.pathname);
         if ((_d = window.__taroAppConfig) === null || _d === void 0 ? void 0 : _d.usingWindowScroll)
             window.scrollTo(0, 0);
         runtime.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()),
                 };
                 (_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
@@ -1547,9 +1558,12 @@ function createRouter(history$1, app, config, framework) {
                 throw error;
             }
         }
-        if (!element)
+        if (!element || currentLock !== postLock)
             return;
-        const pageConfig = handler.pageConfig;
+        // 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';
@@ -1570,7 +1584,6 @@ function createRouter(history$1, app, config, framework) {
         }
         runtime.eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = runtime.Current.page;
-        const pathname = handler.pathname;
         const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
@@ -1586,7 +1599,7 @@ function createRouter(history$1, 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)) {
@@ -1604,8 +1617,8 @@ function createRouter(history$1, 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;

package/dist/index.esm.js

@@ -573,6 +573,7 @@ function navigate(option, method) {
                     const pathPieces = processNavigateUrl(option);
                     const state = { timestamp: Date.now() };
                     if (method === 'navigateTo') {
+                        // Note: 由于 spa 会针对弱网情况下，短时间内多次跳转同一个页面跳转加了锁，后续如果有用户反馈返回无效，那可能是这个问题
                         history.push(pathPieces, state);
                     }
                     else if (method === 'redirectTo' || method === 'switchTab') {
@@ -1492,6 +1493,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 => {
@@ -1515,24 +1520,30 @@ function createRouter(history, app, config, framework) {
     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 = (_c) => __awaiter(this, [_c], void 0, function* ({ location, action }) {
         var _d, _e, _f, _g, _h, _j, _k, _l;
-        handler.pathname = decodeURI(location.pathname);
+        // 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()),
                 };
                 (_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
@@ -1546,9 +1557,12 @@ function createRouter(history, app, config, framework) {
                 throw error;
             }
         }
-        if (!element)
+        if (!element || currentLock !== postLock)
             return;
-        const pageConfig = handler.pageConfig;
+        // 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';
@@ -1569,7 +1583,6 @@ function createRouter(history, app, config, framework) {
         }
         eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = Current.page;
-        const pathname = handler.pathname;
         const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
@@ -1585,7 +1598,7 @@ 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)) {
@@ -1603,8 +1616,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;

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 => {
@@ -40,24 +44,30 @@ function createRouter(history, app, config, framework) {
     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 = (_c) => __awaiter(this, [_c], void 0, function* ({ location, action }) {
         var _d, _e, _f, _g, _h, _j, _k, _l;
-        handler.pathname = decodeURI(location.pathname);
+        // 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()),
                 };
                 (_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
@@ -71,9 +81,12 @@ function createRouter(history, app, config, framework) {
                 throw error;
             }
         }
-        if (!element)
+        if (!element || currentLock !== postLock)
             return;
-        const pageConfig = handler.pageConfig;
+        // 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';
@@ -94,7 +107,6 @@ function createRouter(history, app, config, framework) {
         }
         eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = Current.page;
-        const pathname = handler.pathname;
         const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
@@ -110,7 +122,7 @@ 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)) {
@@ -128,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/router",
-  "version": "4.0.0-alpha.19",
+  "version": "4.0.0-alpha.20",
   "description": "Taro-router",
   "author": "O2Team",
   "license": "MIT",
@@ -34,15 +34,15 @@
     "universal-router": "^9.2.0"
   },
   "devDependencies": {
-    "@tarojs/components": "4.0.0-alpha.19",
-    "@tarojs/runtime": "4.0.0-alpha.19",
-    "@tarojs/taro": "4.0.0-alpha.19",
-    "@tarojs/shared": "4.0.0-alpha.19"
+    "@tarojs/components": "4.0.0-alpha.20",
+    "@tarojs/runtime": "4.0.0-alpha.20",
+    "@tarojs/taro": "4.0.0-alpha.20",
+    "@tarojs/shared": "4.0.0-alpha.20"
   },
   "peerDependencies": {
-    "@tarojs/runtime": "4.0.0-alpha.19",
-    "@tarojs/taro": "4.0.0-alpha.19",
-    "@tarojs/shared": "4.0.0-alpha.19"
+    "@tarojs/runtime": "4.0.0-alpha.20",
+    "@tarojs/taro": "4.0.0-alpha.20",
+    "@tarojs/shared": "4.0.0-alpha.20"
   },
   "scripts": {
     "prod": "pnpm run build",