@tanstack/react-router 0.0.1-beta.63 → 0.0.1-beta.64

package/build/stats-react.json

@@ -7,31 +7,31 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "cf24-103",
+            "uid": "8d6c-103",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
             "name": "node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-            "uid": "cf24-105"
+            "uid": "8d6c-105"
           },
           {
             "name": "packages",
             "children": [
               {
                 "name": "store/build/esm/index.js",
-                "uid": "cf24-107"
+                "uid": "8d6c-107"
               },
               {
                 "name": "router/build/esm/index.js",
-                "uid": "cf24-109"
+                "uid": "8d6c-109"
               },
               {
                 "name": "react-store/build/esm/index.js",
-                "uid": "cf24-111"
+                "uid": "8d6c-111"
               },
               {
                 "name": "react-router/src/index.tsx",
-                "uid": "cf24-113"
+                "uid": "8d6c-113"
               }
             ]
           }
@@ -41,155 +41,155 @@
     "isRoot": true
   },
   "nodeParts": {
-    "cf24-103": {
+    "8d6c-103": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "cf24-102"
+      "mainUid": "8d6c-102"
     },
-    "cf24-105": {
+    "8d6c-105": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "cf24-104"
+      "mainUid": "8d6c-104"
     },
-    "cf24-107": {
+    "8d6c-107": {
       "renderedLength": 1288,
       "gzipLength": 497,
       "brotliLength": 0,
-      "mainUid": "cf24-106"
+      "mainUid": "8d6c-106"
     },
-    "cf24-109": {
-      "renderedLength": 44953,
-      "gzipLength": 10850,
+    "8d6c-109": {
+      "renderedLength": 45412,
+      "gzipLength": 10895,
       "brotliLength": 0,
-      "mainUid": "cf24-108"
+      "mainUid": "8d6c-108"
     },
-    "cf24-111": {
+    "8d6c-111": {
       "renderedLength": 1571,
       "gzipLength": 594,
       "brotliLength": 0,
-      "mainUid": "cf24-110"
+      "mainUid": "8d6c-110"
     },
-    "cf24-113": {
-      "renderedLength": 12098,
-      "gzipLength": 3161,
+    "8d6c-113": {
+      "renderedLength": 12077,
+      "gzipLength": 3154,
       "brotliLength": 0,
-      "mainUid": "cf24-112"
+      "mainUid": "8d6c-112"
     }
   },
   "nodeMetas": {
-    "cf24-102": {
+    "8d6c-102": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "cf24-103"
+        "index.production.js": "8d6c-103"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "cf24-112"
+          "uid": "8d6c-112"
         }
       ]
     },
-    "cf24-104": {
+    "8d6c-104": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "cf24-105"
+        "index.production.js": "8d6c-105"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "cf24-108"
+          "uid": "8d6c-108"
         }
       ]
     },
-    "cf24-106": {
+    "8d6c-106": {
       "id": "/packages/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "cf24-107"
+        "index.production.js": "8d6c-107"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "cf24-108"
+          "uid": "8d6c-108"
         }
       ]
     },
-    "cf24-108": {
+    "8d6c-108": {
       "id": "/packages/router/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "cf24-109"
+        "index.production.js": "8d6c-109"
       },
       "imported": [
         {
-          "uid": "cf24-104"
+          "uid": "8d6c-104"
         },
         {
-          "uid": "cf24-106"
+          "uid": "8d6c-106"
         }
       ],
       "importedBy": [
         {
-          "uid": "cf24-112"
+          "uid": "8d6c-112"
         }
       ]
     },
-    "cf24-110": {
+    "8d6c-110": {
       "id": "/packages/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "cf24-111"
+        "index.production.js": "8d6c-111"
       },
       "imported": [
         {
-          "uid": "cf24-115"
+          "uid": "8d6c-115"
         }
       ],
       "importedBy": [
         {
-          "uid": "cf24-112"
+          "uid": "8d6c-112"
         }
       ]
     },
-    "cf24-112": {
+    "8d6c-112": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "cf24-113"
+        "index.production.js": "8d6c-113"
       },
       "imported": [
         {
-          "uid": "cf24-102"
+          "uid": "8d6c-102"
         },
         {
-          "uid": "cf24-114"
+          "uid": "8d6c-114"
         },
         {
-          "uid": "cf24-108"
+          "uid": "8d6c-108"
         },
         {
-          "uid": "cf24-110"
+          "uid": "8d6c-110"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "cf24-114": {
+    "8d6c-114": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "cf24-112"
+          "uid": "8d6c-112"
         }
       ],
       "isExternal": true
     },
-    "cf24-115": {
+    "8d6c-115": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "cf24-110"
+          "uid": "8d6c-110"
         }
       ],
       "isExternal": true

package/build/umd/index.development.js

@@ -686,8 +686,6 @@
   // const config = rootRoute.addChildren([aRoute.addChildren([bRoute])])
   // //    ^?
 
-  //
-
   const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
   class RouteMatch {
     abortController = new AbortController();
@@ -721,40 +719,42 @@
     #hasLoaders = () => {
       return !!(this.route.options.onLoad || componentTypes.some(d => this.route.options[d]?.preload));
     };
-    __init = opts => {
+    __commit = () => {
+      const {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      } = this.#resolveInfo({
+        location: this.router.state.currentLocation
+      });
+      this.context = context;
+      this.routeContext = routeContext;
+      this.store.setState(s => ({
+        ...s,
+        routeSearch: replaceEqualDeep(s.routeSearch, routeSearch),
+        search: replaceEqualDeep(s.search, search)
+      }));
+    };
+    cancel = () => {
+      this.abortController?.abort();
+    };
+    #resolveSearchInfo = opts => {
       // Validate the search params and stabilize them
-      this.parentMatch = opts.parentMatch;
-      const parentSearch = this.parentMatch?.state.search ?? this.router.state.latestLocation.search;
+      const parentSearchInfo = this.parentMatch ? this.parentMatch.#resolveSearchInfo(opts) : {
+        search: opts.location.search,
+        routeSearch: opts.location.search
+      };
       try {
         const validator = typeof this.route.options.validateSearch === 'object' ? this.route.options.validateSearch.parse : this.route.options.validateSearch;
-        let nextSearch = validator?.(parentSearch) ?? {};
-        this.store.setState(s => ({
-          ...s,
-          routeSearch: nextSearch,
-          search: {
-            ...parentSearch,
-            ...nextSearch
-          }
-        }));
-        componentTypes.map(async type => {
-          const component = this.route.options[type];
-          if (typeof this[type] !== 'function') {
-            this[type] = component;
-          }
-        });
-        const parent = this.parentMatch;
-        this.routeContext = this.route.options.getContext?.({
-          parentContext: parent?.routeContext,
-          context: parent?.context,
-          params: this.params,
-          search: this.state.search
-        }) || {};
-        this.context = parent ? {
-          ...parent.context,
-          ...this.routeContext
-        } : {
-          ...this.router?.options.context,
-          ...this.routeContext
+        const routeSearch = validator?.(parentSearchInfo.search) ?? {};
+        const search = {
+          ...parentSearchInfo.search,
+          ...routeSearch
+        };
+        return {
+          routeSearch,
+          search
         };
       } catch (err) {
         console.error(err);
@@ -762,27 +762,65 @@
           cause: err
         });
         error.code = 'INVALID_SEARCH_PARAMS';
+        throw error;
+      }
+    };
+    #resolveInfo = opts => {
+      const {
+        search,
+        routeSearch
+      } = this.#resolveSearchInfo(opts);
+      const routeContext = this.route.options.getContext?.({
+        parentContext: this.parentMatch?.routeContext ?? {},
+        context: this.parentMatch?.context ?? this.router?.options.context ?? {},
+        params: this.params,
+        search
+      }) || {};
+      const context = {
+        ...(this.parentMatch?.context ?? this.router?.options.context),
+        ...routeContext
+      };
+      return {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      };
+    };
+    __load = async opts => {
+      this.parentMatch = opts.parentMatch;
+      let info;
+      try {
+        info = this.#resolveInfo(opts);
+      } catch (err) {
         this.store.setState(s => ({
           ...s,
           status: 'error',
-          error: error
+          error: err
         }));
 
         // Do not proceed with loading the route
         return;
       }
-    };
-    cancel = () => {
-      this.abortController?.abort();
-    };
-    load = async opts => {
+      const {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      } = info;
+      componentTypes.map(async type => {
+        const component = this.route.options[type];
+        if (typeof this[type] !== 'function') {
+          this[type] = component;
+        }
+      });
+
       // If the match is invalid, errored or idle, trigger it to load
-      if (this.state.status !== 'pending') {
-        await this.fetch(opts);
+      if (this.state.status === 'pending') {
+        return;
       }
-    };
-    #latestId = '';
-    fetch = async opts => {
+
+      // TODO: Should load promises be tracked based on location?
       this.__loadPromise = Promise.resolve().then(async () => {
         const loadId = '' + Date.now() + Math.random();
         this.#latestId = loadId;
@@ -790,17 +828,16 @@
           return loadId !== this.#latestId ? this.__loadPromise : undefined;
         };
         let latestPromise;
-        this.store.batch(() => {
-          // If the match was in an error state, set it
-          // to a loading state again. Otherwise, keep it
-          // as loading or resolved
-          if (this.state.status === 'idle') {
-            this.store.setState(s => ({
-              ...s,
-              status: 'pending'
-            }));
-          }
-        });
+
+        // If the match was in an error state, set it
+        // to a loading state again. Otherwise, keep it
+        // as loading or resolved
+        if (this.state.status === 'idle') {
+          this.store.setState(s => ({
+            ...s,
+            status: 'pending'
+          }));
+        }
         const componentsPromise = (async () => {
           // then run all component and data loaders in parallel
           // For each component type, potentially load it asynchronously
@@ -816,11 +853,12 @@
           if (this.route.options.onLoad) {
             return this.route.options.onLoad({
               params: this.params,
-              search: this.state.search,
+              routeSearch,
+              search,
               signal: this.abortController.signal,
               preload: !!opts?.preload,
-              routeContext: this.routeContext,
-              context: this.context
+              routeContext: routeContext,
+              context: context
             });
           }
           return;
@@ -848,6 +886,7 @@
       });
       return this.__loadPromise;
     };
+    #latestId = '';
   }
 
   const defaultParseSearch = parseSearchWith(JSON.parse);
@@ -1053,7 +1092,7 @@
 
       // Load the matches
       try {
-        await this.loadMatches(matches
+        await this.loadMatches(matches, this.state.pendingLocation
         // opts
         );
       } catch (err) {
@@ -1105,6 +1144,7 @@
           search: d.state.search
         });
       });
+      const prevLocation = this.state.currentLocation;
       this.store.setState(s => ({
         ...s,
         status: 'idle',
@@ -1113,7 +1153,12 @@
         pendingLocation: undefined,
         pendingMatches: undefined
       }));
-      this.options.onRouteChange?.();
+      matches.forEach(match => {
+        match.__commit();
+      });
+      if (prevLocation.href !== this.state.currentLocation.href) {
+        this.options.onRouteChange?.();
+      }
       this.resolveNavigation();
     };
     getRoute = id => {
@@ -1126,7 +1171,7 @@
       const matches = this.matchRoutes(next.pathname, {
         strictParseParams: true
       });
-      await this.loadMatches(matches);
+      await this.loadMatches(matches, next);
       return matches;
     };
     preloadRoute = async (navigateOpts = this.state.latestLocation) => {
@@ -1134,7 +1179,7 @@
       const matches = this.matchRoutes(next.pathname, {
         strictParseParams: true
       });
-      await this.loadMatches(matches, {
+      await this.loadMatches(matches, next, {
         preload: true
       });
       return matches;
@@ -1206,9 +1251,7 @@
       findInRouteTree([this.routeTree]);
       return matches;
     };
-    loadMatches = async (resolvedMatches, opts) => {
-      initMatches(resolvedMatches);
-
+    loadMatches = async (resolvedMatches, location, opts) => {
       // Check each match middleware to see if the route can be accessed
       await Promise.all(resolvedMatches.map(async match => {
         try {
@@ -1224,22 +1267,15 @@
         }
       }));
       const matchPromises = resolvedMatches.map(async (match, index) => {
-        const prevMatch = resolvedMatches[1];
-        match.state.search;
-
-        // if (opts?.filter && !opts.filter(match)) {
-        //   return
-        // }
-
-        match.load({
-          preload: opts?.preload
+        const parentMatch = resolvedMatches[index - 1];
+        match.__load({
+          preload: opts?.preload,
+          location,
+          parentMatch
         });
-        if (match.state.status !== 'success' && match.__loadPromise) {
-          // Wait for the first sign of activity from the match
-          await match.__loadPromise;
-        }
-        if (prevMatch) {
-          await prevMatch.__loadPromise;
+        await match.__loadPromise;
+        if (parentMatch) {
+          await parentMatch.__loadPromise;
         }
       });
       await Promise.all(matchPromises);
@@ -1302,7 +1338,6 @@
         return false;
       }
       if (opts?.includeSearch ?? true) {
-        console.log(baseLocation.search, next.search, partialDeepEqual(baseLocation.search, next.search));
         return partialDeepEqual(baseLocation.search, next.search) ? match : false;
       }
       return match;
@@ -1317,8 +1352,6 @@
       replace,
       activeOptions,
       preload,
-      preloadMaxAge: userPreloadMaxAge,
-      preloadGcMaxAge: userPreloadGcMaxAge,
       preloadDelay: userPreloadDelay,
       disabled
     }) => {
@@ -1438,7 +1471,6 @@
             ...dehydratedMatch.state
           }));
         });
-        initMatches(currentMatches);
         return {
           ...s,
           ...dehydratedRouter.state,
@@ -1577,14 +1609,6 @@
   function isCtrlEvent(e) {
     return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
   }
-  function initMatches(matches) {
-    matches.forEach((match, index) => {
-      const parentMatch = matches[index - 1];
-      match.__init({
-        parentMatch
-      });
-    });
-  }
 
   /**
    * react-store
@@ -1677,7 +1701,6 @@
       to = '.',
       preload,
       preloadDelay,
-      preloadMaxAge,
       replace,
       // element props
       style,