@tanstack/react-router 0.0.1-beta.182 → 0.0.1-beta.183

package/build/stats-react.json

@@ -11,19 +11,19 @@
             "children": [
               {
                 "name": "@tanstack+store@0.0.1/node_modules/@tanstack/store/build/esm/index.js",
-                "uid": "ff99-159"
+                "uid": "d5e5-159"
               },
               {
                 "name": "@tanstack+react-store@0.0.1/node_modules/@tanstack/react-store/build/esm/index.js",
-                "uid": "ff99-161"
+                "uid": "d5e5-161"
               },
               {
                 "name": "tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-                "uid": "ff99-163"
+                "uid": "d5e5-163"
               },
               {
                 "name": "tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
-                "uid": "ff99-165"
+                "uid": "d5e5-165"
               }
             ]
           },
@@ -32,25 +32,25 @@
             "children": [
               {
                 "name": "router-core/build/esm/index.js",
-                "uid": "ff99-167"
+                "uid": "d5e5-167"
               },
               {
                 "name": "react-router/src",
                 "children": [
                   {
-                    "uid": "ff99-171",
+                    "uid": "d5e5-171",
                     "name": "react.tsx"
                   },
                   {
-                    "uid": "ff99-173",
+                    "uid": "d5e5-173",
                     "name": "scroll-restoration.tsx"
                   },
                   {
-                    "uid": "ff99-175",
+                    "uid": "d5e5-175",
                     "name": "awaited.tsx"
                   },
                   {
-                    "uid": "ff99-177",
+                    "uid": "d5e5-177",
                     "name": "index.tsx"
                   }
                 ]
@@ -58,7 +58,7 @@
             ]
           },
           {
-            "uid": "ff99-169",
+            "uid": "d5e5-169",
             "name": "\u0000rollupPluginBabelHelpers.js"
           }
         ]
@@ -67,302 +67,302 @@
     "isRoot": true
   },
   "nodeParts": {
-    "ff99-159": {
+    "d5e5-159": {
       "renderedLength": 1843,
       "gzipLength": 644,
       "brotliLength": 0,
-      "mainUid": "ff99-158"
+      "mainUid": "d5e5-158"
     },
-    "ff99-161": {
+    "d5e5-161": {
       "renderedLength": 1006,
       "gzipLength": 479,
       "brotliLength": 0,
-      "mainUid": "ff99-160"
+      "mainUid": "d5e5-160"
     },
-    "ff99-163": {
+    "d5e5-163": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "ff99-162"
+      "mainUid": "d5e5-162"
     },
-    "ff99-165": {
+    "d5e5-165": {
       "renderedLength": 44,
       "gzipLength": 62,
       "brotliLength": 0,
-      "mainUid": "ff99-164"
+      "mainUid": "d5e5-164"
     },
-    "ff99-167": {
-      "renderedLength": 64170,
-      "gzipLength": 15197,
+    "d5e5-167": {
+      "renderedLength": 64537,
+      "gzipLength": 15249,
       "brotliLength": 0,
-      "mainUid": "ff99-166"
+      "mainUid": "d5e5-166"
     },
-    "ff99-169": {
+    "d5e5-169": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "ff99-168"
+      "mainUid": "d5e5-168"
     },
-    "ff99-171": {
-      "renderedLength": 17448,
-      "gzipLength": 3863,
+    "d5e5-171": {
+      "renderedLength": 17084,
+      "gzipLength": 3790,
       "brotliLength": 0,
-      "mainUid": "ff99-170"
+      "mainUid": "d5e5-170"
     },
-    "ff99-173": {
+    "d5e5-173": {
       "renderedLength": 466,
       "gzipLength": 228,
       "brotliLength": 0,
-      "mainUid": "ff99-172"
+      "mainUid": "d5e5-172"
     },
-    "ff99-175": {
+    "d5e5-175": {
       "renderedLength": 641,
       "gzipLength": 305,
       "brotliLength": 0,
-      "mainUid": "ff99-174"
+      "mainUid": "d5e5-174"
     },
-    "ff99-177": {
+    "d5e5-177": {
       "renderedLength": 0,
       "gzipLength": 0,
       "brotliLength": 0,
-      "mainUid": "ff99-176"
+      "mainUid": "d5e5-176"
     }
   },
   "nodeMetas": {
-    "ff99-158": {
+    "d5e5-158": {
       "id": "/node_modules/.pnpm/@tanstack+store@0.0.1/node_modules/@tanstack/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "ff99-159"
+        "index.production.js": "d5e5-159"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "ff99-160"
+          "uid": "d5e5-160"
         },
         {
-          "uid": "ff99-166"
+          "uid": "d5e5-166"
         }
       ]
     },
-    "ff99-160": {
+    "d5e5-160": {
       "id": "/node_modules/.pnpm/@tanstack+react-store@0.0.1/node_modules/@tanstack/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "ff99-161"
+        "index.production.js": "d5e5-161"
       },
       "imported": [
         {
-          "uid": "ff99-178"
+          "uid": "d5e5-178"
         },
         {
-          "uid": "ff99-158"
+          "uid": "d5e5-158"
         }
       ],
       "importedBy": [
         {
-          "uid": "ff99-176"
+          "uid": "d5e5-176"
         },
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         }
       ]
     },
-    "ff99-162": {
+    "d5e5-162": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "ff99-163"
+        "index.production.js": "d5e5-163"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "ff99-166"
+          "uid": "d5e5-166"
         },
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         }
       ]
     },
-    "ff99-164": {
+    "d5e5-164": {
       "id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
       "moduleParts": {
-        "index.production.js": "ff99-165"
+        "index.production.js": "d5e5-165"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "ff99-166"
+          "uid": "d5e5-166"
         },
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         }
       ]
     },
-    "ff99-166": {
+    "d5e5-166": {
       "id": "/packages/router-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "ff99-167"
+        "index.production.js": "d5e5-167"
       },
       "imported": [
         {
-          "uid": "ff99-162"
+          "uid": "d5e5-162"
         },
         {
-          "uid": "ff99-164"
+          "uid": "d5e5-164"
         },
         {
-          "uid": "ff99-158"
+          "uid": "d5e5-158"
         }
       ],
       "importedBy": [
         {
-          "uid": "ff99-176"
+          "uid": "d5e5-176"
         },
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         },
         {
-          "uid": "ff99-172"
+          "uid": "d5e5-172"
         },
         {
-          "uid": "ff99-174"
+          "uid": "d5e5-174"
         }
       ]
     },
-    "ff99-168": {
+    "d5e5-168": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "ff99-169"
+        "index.production.js": "d5e5-169"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         }
       ]
     },
-    "ff99-170": {
+    "d5e5-170": {
       "id": "/packages/react-router/src/react.tsx",
       "moduleParts": {
-        "index.production.js": "ff99-171"
+        "index.production.js": "d5e5-171"
       },
       "imported": [
         {
-          "uid": "ff99-168"
+          "uid": "d5e5-168"
         },
         {
-          "uid": "ff99-179"
+          "uid": "d5e5-179"
         },
         {
-          "uid": "ff99-160"
+          "uid": "d5e5-160"
         },
         {
-          "uid": "ff99-162"
+          "uid": "d5e5-162"
         },
         {
-          "uid": "ff99-164"
+          "uid": "d5e5-164"
         },
         {
-          "uid": "ff99-166"
+          "uid": "d5e5-166"
         }
       ],
       "importedBy": [
         {
-          "uid": "ff99-176"
+          "uid": "d5e5-176"
         },
         {
-          "uid": "ff99-172"
+          "uid": "d5e5-172"
         },
         {
-          "uid": "ff99-174"
+          "uid": "d5e5-174"
         }
       ]
     },
-    "ff99-172": {
+    "d5e5-172": {
       "id": "/packages/react-router/src/scroll-restoration.tsx",
       "moduleParts": {
-        "index.production.js": "ff99-173"
+        "index.production.js": "d5e5-173"
       },
       "imported": [
         {
-          "uid": "ff99-179"
+          "uid": "d5e5-179"
         },
         {
-          "uid": "ff99-166"
+          "uid": "d5e5-166"
         },
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         }
       ],
       "importedBy": [
         {
-          "uid": "ff99-176"
+          "uid": "d5e5-176"
         }
       ]
     },
-    "ff99-174": {
+    "d5e5-174": {
       "id": "/packages/react-router/src/awaited.tsx",
       "moduleParts": {
-        "index.production.js": "ff99-175"
+        "index.production.js": "d5e5-175"
       },
       "imported": [
         {
-          "uid": "ff99-166"
+          "uid": "d5e5-166"
         },
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         }
       ],
       "importedBy": [
         {
-          "uid": "ff99-176"
+          "uid": "d5e5-176"
         }
       ]
     },
-    "ff99-176": {
+    "d5e5-176": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "ff99-177"
+        "index.production.js": "d5e5-177"
       },
       "imported": [
         {
-          "uid": "ff99-160"
+          "uid": "d5e5-160"
         },
         {
-          "uid": "ff99-166"
+          "uid": "d5e5-166"
         },
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         },
         {
-          "uid": "ff99-172"
+          "uid": "d5e5-172"
         },
         {
-          "uid": "ff99-174"
+          "uid": "d5e5-174"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "ff99-178": {
+    "d5e5-178": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "ff99-160"
+          "uid": "d5e5-160"
         }
       ],
       "isExternal": true
     },
-    "ff99-179": {
+    "d5e5-179": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "ff99-170"
+          "uid": "d5e5-170"
         },
         {
-          "uid": "ff99-172"
+          "uid": "d5e5-172"
         }
       ],
       "isExternal": true

package/build/umd/index.development.js

@@ -906,6 +906,16 @@
               return next.matchesById[id];
             });
           }
+          if (matchesByIdChanged || matchesChanged || pendingMatchesChanged) {
+            const hasPendingComponent = next.pendingMatches.some(d => {
+              const route = this.getRoute(d.routeId);
+              return !!route?.options.pendingComponent;
+            });
+            next.renderedMatchIds = hasPendingComponent ? next.pendingMatchIds : next.matchIds;
+            next.renderedMatches = next.renderedMatchIds.map(id => {
+              return next.matchesById[id];
+            });
+          }
           next.isFetching = [...next.matches, ...next.pendingMatches].some(d => d.isFetching);
           this.state = next;
         },
@@ -1119,20 +1129,10 @@
       return this.latestLoadPromise;
     };
     #mergeMatches = (prevMatchesById, nextMatches) => {
-      const nextMatchesById = {
-        ...prevMatchesById
+      return {
+        ...prevMatchesById,
+        ...Object.fromEntries(nextMatches.map(match => [match.id, match]))
       };
-      let hadNew = false;
-      nextMatches.forEach(match => {
-        if (!nextMatchesById[match.id]) {
-          hadNew = true;
-          nextMatchesById[match.id] = match;
-        }
-      });
-      if (!hadNew) {
-        return prevMatchesById;
-      }
-      return nextMatchesById;
     };
     getRoute = id => {
       const route = this.routesById[id];
@@ -1282,14 +1282,17 @@
           };
           try {
             const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
-            const routeSearch = validator?.(parentSearchInfo.search) ?? {};
-            const search = {
+            let routeSearch = validator?.(parentSearchInfo.search) ?? {};
+            let search = {
               ...parentSearchInfo.search,
               ...routeSearch
             };
+            routeSearch = replaceEqualDeep(match.routeSearch, routeSearch);
+            search = replaceEqualDeep(match.search, search);
             return {
-              routeSearch: replaceEqualDeep(match.routeSearch, routeSearch),
-              search: replaceEqualDeep(match.search, search)
+              routeSearch,
+              search,
+              searchDidChange: match.routeSearch !== routeSearch
             };
           } catch (err) {
             match.searchError = new SearchParamError(err.message, {
@@ -1870,7 +1873,6 @@
     };
     #commitLocation = async location => {
       const next = this.buildNext(location);
-      const id = '' + Date.now() + Math.random();
       if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
       let nextAction = 'replace';
       if (!location.replace) {
@@ -1881,10 +1883,7 @@
         nextAction = 'replace';
       }
       const href = `${next.pathname}${next.searchStr}${next.hash ? `#${next.hash}` : ''}`;
-      this.history[nextAction === 'push' ? 'push' : 'replace'](href, {
-        id,
-        ...next.state
-      });
+      this.history[nextAction === 'push' ? 'push' : 'replace'](href, next.state);
       this.resetNextScroll = location.resetScroll ?? true;
       return this.latestLoadPromise;
     };
@@ -1970,6 +1969,8 @@
       pendingMatchIds: [],
       matches: [],
       pendingMatches: [],
+      renderedMatchIds: [],
+      renderedMatches: [],
       lastUpdated: Date.now()
     };
   }
@@ -2372,14 +2373,7 @@
     const router = useRouter();
     const matchIds = useRouterState({
       select: state => {
-        const hasPendingComponent = state.pendingMatches.some(d => {
-          const route = router.getRoute(d.routeId);
-          return !!route?.options.pendingComponent;
-        });
-        if (hasPendingComponent) {
-          return state.pendingMatchIds;
-        }
-        return state.matchIds;
+        return state.renderedMatchIds;
       }
     });
     return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
@@ -2401,7 +2395,7 @@
     const matchIds = React__namespace.useContext(matchIdsContext);
     return useRouterState({
       select: state => {
-        const matches = state.matches.slice(state.matches.findIndex(d => d.id === matchIds[0]));
+        const matches = state.renderedMatches.slice(state.renderedMatches.findIndex(d => d.id === matchIds[0]));
         return opts?.select ? opts.select(matches) : matches;
       }
     });
@@ -2412,8 +2406,7 @@
     const nearestMatchRouteId = router.getRouteMatch(nearestMatchId)?.routeId;
     const matchRouteId = useRouterState({
       select: state => {
-        const matches = state.status === 'pending' ? state.pendingMatches : state.matches;
-        const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
+        const match = opts?.from ? state.renderedMatches.find(d => d.routeId === opts?.from) : state.renderedMatches.find(d => d.id === nearestMatchId);
         return match.routeId;
       }
     });
@@ -2422,8 +2415,7 @@
     }
     const matchSelection = useRouterState({
       select: state => {
-        const matches = state.status === 'pending' ? state.pendingMatches : state.matches;
-        const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
+        const match = opts?.from ? state.renderedMatches.find(d => d.routeId === opts?.from) : state.renderedMatches.find(d => d.id === nearestMatchId);
         invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
         return opts?.select ? opts.select(match) : match;
       }
@@ -2459,7 +2451,7 @@
   function useParams(opts) {
     return useRouterState({
       select: state => {
-        const params = last(state.matches)?.params;
+        const params = last(state.renderedMatches)?.params;
         return opts?.select ? opts.select(params) : params;
       }
     });