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

package/build/stats-react.json

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

package/build/umd/index.development.js

@@ -345,6 +345,21 @@
   function hasObjectPrototype(o) {
     return Object.prototype.toString.call(o) === '[object Object]';
   }
+  function partialDeepEqual(a, b) {
+    if (a === b) {
+      return true;
+    }
+    if (typeof a !== typeof b) {
+      return false;
+    }
+    if (isPlainObject(a) && isPlainObject(b)) {
+      return !Object.keys(b).some(key => !partialDeepEqual(a[key], b[key]));
+    }
+    if (Array.isArray(a) && Array.isArray(b)) {
+      return a.length === b.length && a.every((item, index) => partialDeepEqual(item, b[index]));
+    }
+    return false;
+  }
 
   function joinPaths(paths) {
     return cleanPath(paths.filter(Boolean).join('/'));
@@ -614,15 +629,10 @@
       this.children = children;
       return this;
     };
-
-    // generate: () => {
-    //   invariant(
-    //     false,
-    //     `routeConfig.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. `,
-    //   )
-    // },
+    generate = options => {
+      invariant(false, `route.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. `);
+    };
   }
-
   class RootRoute extends Route {
     constructor(options) {
       super(options);
@@ -676,8 +686,6 @@
   // const config = rootRoute.addChildren([aRoute.addChildren([bRoute])])
   // //    ^?
 
-  //
-
   const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
   class RouteMatch {
     abortController = new AbortController();
@@ -711,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);
@@ -752,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;
@@ -780,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
@@ -806,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;
@@ -838,6 +886,7 @@
       });
       return this.__loadPromise;
     };
+    #latestId = '';
   }
 
   const defaultParseSearch = parseSearchWith(JSON.parse);
@@ -1043,7 +1092,7 @@
 
       // Load the matches
       try {
-        await this.loadMatches(matches
+        await this.loadMatches(matches, this.state.pendingLocation
         // opts
         );
       } catch (err) {
@@ -1095,6 +1144,7 @@
           search: d.state.search
         });
       });
+      const prevLocation = this.state.currentLocation;
       this.store.setState(s => ({
         ...s,
         status: 'idle',
@@ -1103,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 => {
@@ -1116,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) => {
@@ -1124,7 +1179,7 @@
       const matches = this.matchRoutes(next.pathname, {
         strictParseParams: true
       });
-      await this.loadMatches(matches, {
+      await this.loadMatches(matches, next, {
         preload: true
       });
       return matches;
@@ -1196,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 {
@@ -1214,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);
@@ -1246,7 +1292,7 @@
     };
     navigate = async ({
       from,
-      to = '.',
+      to = '',
       search,
       hash,
       replace,
@@ -1280,19 +1326,21 @@
         to: location.to ? this.resolvePath(location.from ?? '', location.to) : undefined
       };
       const next = this.buildNext(location);
-      if (opts?.pending) {
-        if (!this.state.pendingLocation) {
-          return false;
-        }
-        return matchPathname(this.basepath, this.state.pendingLocation.pathname, {
-          ...opts,
-          to: next.pathname
-        });
+      const baseLocation = opts?.pending ? this.state.pendingLocation : this.state.currentLocation;
+      if (!baseLocation) {
+        return false;
       }
-      return matchPathname(this.basepath, this.state.currentLocation.pathname, {
+      const match = matchPathname(this.basepath, baseLocation.pathname, {
         ...opts,
         to: next.pathname
       });
+      if (!match) {
+        return false;
+      }
+      if (opts?.includeSearch ?? true) {
+        return partialDeepEqual(baseLocation.search, next.search) ? match : false;
+      }
+      return match;
     };
     buildLink = ({
       from,
@@ -1304,8 +1352,6 @@
       replace,
       activeOptions,
       preload,
-      preloadMaxAge: userPreloadMaxAge,
-      preloadGcMaxAge: userPreloadGcMaxAge,
       preloadDelay: userPreloadDelay,
       disabled
     }) => {
@@ -1335,17 +1381,16 @@
       const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
 
       // Compare path/hash for matches
-      const pathIsEqual = this.state.currentLocation.pathname === next.pathname;
       const currentPathSplit = this.state.currentLocation.pathname.split('/');
       const nextPathSplit = next.pathname.split('/');
       const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-      const hashIsEqual = this.state.currentLocation.hash === next.hash;
       // Combine the matches based on user options
-      const pathTest = activeOptions?.exact ? pathIsEqual : pathIsFuzzyEqual;
-      const hashTest = activeOptions?.includeHash ? hashIsEqual : true;
+      const pathTest = activeOptions?.exact ? this.state.currentLocation.pathname === next.pathname : pathIsFuzzyEqual;
+      const hashTest = activeOptions?.includeHash ? this.state.currentLocation.hash === next.hash : true;
+      const searchTest = activeOptions?.includeSearch ?? true ? partialDeepEqual(this.state.currentLocation.search, next.search) : true;
 
       // The final "active" test
-      const isActive = pathTest && hashTest;
+      const isActive = pathTest && hashTest && searchTest;
 
       // The click handler
       const handleClick = e => {
@@ -1426,7 +1471,6 @@
             ...dehydratedMatch.state
           }));
         });
-        initMatches(currentMatches);
         return {
           ...s,
           ...dehydratedRouter.state,
@@ -1478,8 +1522,9 @@
       this.load();
     };
     #buildLocation = (dest = {}) => {
+      dest.fromCurrent = dest.fromCurrent ?? dest.to === '';
       const fromPathname = dest.fromCurrent ? this.state.latestLocation.pathname : dest.from ?? this.state.latestLocation.pathname;
-      let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? '.'}`);
+      let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
       const fromMatches = this.matchRoutes(this.state.latestLocation.pathname, {
         strictParseParams: true
       });
@@ -1564,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
@@ -1664,7 +1701,6 @@
       to = '.',
       preload,
       preloadDelay,
-      preloadMaxAge,
       replace,
       // element props
       style,
@@ -2042,6 +2078,7 @@
   exports.matchesContext = matchesContext;
   exports.parsePathname = parsePathname;
   exports.parseSearchWith = parseSearchWith;
+  exports.partialDeepEqual = partialDeepEqual;
   exports.pick = pick;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;