@tanstack/react-router 1.18.3 → 1.19.0

package/dist/esm/router.js

@@ -65,7 +65,10 @@ class Router {
           onUpdate: () => {
             this.__store.state = {
               ...this.state,
-              status: this.state.isTransitioning || this.state.isLoading ? "pending" : "idle"
+              status: this.state.isTransitioning || this.state.isLoading ? "pending" : "idle",
+              cachedMatches: this.state.cachedMatches.filter(
+                (d) => !["redirected"].includes(d.status)
+              )
             };
           }
         });
@@ -219,7 +222,7 @@ class Router {
         }
         return false;
       });
-      let routeCursor = foundRoute || this.routesById["__root__"];
+      let routeCursor = foundRoute || this.routesById[rootRouteId];
       let matchedRoutes = [routeCursor];
       let isGlobalNotFound = false;
       if (
@@ -240,6 +243,20 @@ class Router {
         if (routeCursor)
           matchedRoutes.unshift(routeCursor);
       }
+      const globalNotFoundRouteId = (() => {
+        if (!isGlobalNotFound) {
+          return void 0;
+        }
+        if (this.options.notFoundMode !== "root") {
+          for (let i = matchedRoutes.length - 1; i >= 0; i--) {
+            const route = matchedRoutes[i];
+            if (route.children) {
+              return route.id;
+            }
+          }
+        }
+        return rootRouteId;
+      })();
       const parseErrors = matchedRoutes.map((route) => {
         let parsedParamsError;
         if (route.options.parseParams) {
@@ -297,12 +314,11 @@ class Router {
           params: routeParams,
           leaveWildcards: true
         }) + loaderDepsHash;
-        const existingMatch = getRouteMatch(this.state, matchId);
+        let existingMatch = getRouteMatch(this.state, matchId);
         const cause = this.state.matches.find((d) => d.id === matchId) ? "stay" : "enter";
         const match = existingMatch ? {
           ...existingMatch,
           cause,
-          notFoundError: isGlobalNotFound && route.id === rootRouteId ? { global: true } : void 0,
           params: routeParams
         } : {
           id: matchId,
@@ -326,11 +342,13 @@ class Router {
           loaderDeps,
           invalid: false,
           preload: false,
-          notFoundError: isGlobalNotFound && route.id === rootRouteId ? { global: true } : void 0,
           links: (_d = (_c = route.options).links) == null ? void 0 : _d.call(_c),
           scripts: (_f = (_e = route.options).scripts) == null ? void 0 : _f.call(_e),
           staticData: route.options.staticData || {}
         };
+        if (!(opts == null ? void 0 : opts.preload)) {
+          match.globalNotFound = globalNotFoundRouteId === route.id;
+        }
         match.search = replaceEqualDeep(match.search, preMatchSearch);
         match.searchError = searchError;
         matches.push(match);
@@ -338,8 +356,6 @@ class Router {
       return matches;
     };
     this.cancelMatch = (id) => {
-      var _a, _b;
-      (_b = (_a = getRouteMatch(this.state, id)) == null ? void 0 : _a.abortController) == null ? void 0 : _b.abort();
     };
     this.cancelMatches = () => {
       var _a;
@@ -349,13 +365,9 @@ class Router {
     };
     this.buildLocation = (opts) => {
       const build = (dest = {}, matches) => {
-        var _a, _b;
+        var _a, _b, _c;
         const relevantMatches = this.state.pendingMatches || this.state.matches;
         const fromSearch = ((_a = relevantMatches[relevantMatches.length - 1]) == null ? void 0 : _a.search) || this.latestLocation.search;
-        let pathname = this.resolvePathWithBase(
-          dest.from ?? this.latestLocation.pathname,
-          `${dest.to ?? ""}`
-        );
         const fromMatches = this.matchRoutes(
           this.latestLocation.pathname,
           fromSearch
@@ -363,7 +375,12 @@ class Router {
         const stayingMatches = matches == null ? void 0 : matches.filter(
           (d) => fromMatches == null ? void 0 : fromMatches.find((e) => e.routeId === d.routeId)
         );
-        const prevParams = { ...(_b = last(fromMatches)) == null ? void 0 : _b.params };
+        const fromRoute = this.looseRoutesById[(_b = last(fromMatches)) == null ? void 0 : _b.routeId];
+        let pathname = dest.to ? this.resolvePathWithBase(
+          dest.from ?? this.latestLocation.pathname,
+          `${dest.to}`
+        ) : fromRoute == null ? void 0 : fromRoute.fullPath;
+        const prevParams = { ...(_c = last(fromMatches)) == null ? void 0 : _c.params };
         let nextParams = (dest.params ?? true) === true ? prevParams : { ...prevParams, ...functionalUpdate(dest.params, prevParams) };
         if (nextParams) {
           matches == null ? void 0 : matches.map((d) => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach((fn) => {
@@ -455,7 +472,7 @@ class Router {
       if (this.navigateTimeout)
         clearTimeout(this.navigateTimeout);
       const isSameUrl = this.latestLocation.href === next.href;
-      if (!isSameUrl || !next.replace) {
+      if (!isSameUrl) {
         let { maskedLocation, ...nextHistory } = next;
         if (maskedLocation) {
           nextHistory = {
@@ -529,13 +546,14 @@ class Router {
     };
     this.loadMatches = async ({
       checkLatest,
+      location,
       matches,
       preload
     }) => {
       var _a, _b;
       let latestPromise;
       let firstBadMatchIndex;
-      const updateMatch = (match) => {
+      const updateMatch = (match, opts) => {
         var _a2;
         const isPending = (_a2 = this.state.pendingMatches) == null ? void 0 : _a2.find(
           (d) => d.id === match.id
@@ -543,36 +561,43 @@ class Router {
         const isMatched = this.state.matches.find((d) => d.id === match.id);
         const matchesKey = isPending ? "pendingMatches" : isMatched ? "matches" : "cachedMatches";
         this.__store.setState((s) => {
-          var _a3;
+          var _a3, _b2;
           return {
             ...s,
-            [matchesKey]: (_a3 = s[matchesKey]) == null ? void 0 : _a3.map(
-              (d) => d.id === match.id ? match : d
-            )
+            [matchesKey]: (opts == null ? void 0 : opts.remove) ? (_a3 = s[matchesKey]) == null ? void 0 : _a3.filter((d) => d.id !== match.id) : (_b2 = s[matchesKey]) == null ? void 0 : _b2.map((d) => d.id === match.id ? match : d)
           };
         });
       };
+      const handleMatchSpecialError = (match, err) => {
+        match = {
+          ...match,
+          status: isRedirect(err) ? "redirected" : isNotFound(err) ? "notFound" : "error",
+          isFetching: false,
+          error: err
+        };
+        updateMatch(match);
+        if (!err.routeId) {
+          err.routeId = match.routeId;
+        }
+        throw err;
+      };
       for (let [index, match] of matches.entries()) {
         const parentMatch = matches[index - 1];
         const route = this.looseRoutesById[match.routeId];
         const abortController = new AbortController();
-        const handleError = (err, code) => {
+        const handleSerialError = (err, code) => {
           var _a2, _b2;
           err.routerCode = code;
           firstBadMatchIndex = firstBadMatchIndex ?? index;
-          if (isRedirect(err)) {
-            throw err;
-          }
-          if (isNotFound(err)) {
-            err.routeId = match.routeId;
-            throw err;
+          if (isRedirect(err) || isNotFound(err)) {
+            handleMatchSpecialError(match, err);
           }
           try {
             (_b2 = (_a2 = route.options).onError) == null ? void 0 : _b2.call(_a2, err);
           } catch (errorHandlerErr) {
             err = errorHandlerErr;
-            if (isRedirect(errorHandlerErr)) {
-              throw errorHandlerErr;
+            if (isRedirect(err) || isNotFound(err)) {
+              handleMatchSpecialError(match, errorHandlerErr);
             }
           }
           matches[index] = match = {
@@ -583,13 +608,13 @@ class Router {
             abortController: new AbortController()
           };
         };
+        if (match.paramsError) {
+          handleSerialError(match.paramsError, "PARSE_PARAMS");
+        }
+        if (match.searchError) {
+          handleSerialError(match.searchError, "VALIDATE_SEARCH");
+        }
         try {
-          if (match.paramsError) {
-            handleError(match.paramsError, "PARSE_PARAMS");
-          }
-          if (match.searchError) {
-            handleError(match.searchError, "VALIDATE_SEARCH");
-          }
           const parentContext = (parentMatch == null ? void 0 : parentMatch.context) ?? this.options.context ?? {};
           const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
           const pendingPromise = typeof pendingMs === "number" && pendingMs <= 0 ? Promise.resolve() : new Promise((r) => setTimeout(r, pendingMs));
@@ -599,14 +624,13 @@ class Router {
             params: match.params,
             preload: !!preload,
             context: parentContext,
-            location: this.state.location,
-            // TOOD: just expose state and router, etc
+            location,
             navigate: (opts) => this.navigate({ ...opts, from: match.pathname }),
             buildLocation: this.buildLocation,
             cause: preload ? "preload" : match.cause
           })) ?? {};
-          if (isRedirect(beforeLoadContext)) {
-            throw beforeLoadContext;
+          if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
+            handleSerialError(beforeLoadContext, "BEFORE_LOAD");
           }
           const context = {
             ...parentContext,
@@ -620,7 +644,7 @@ class Router {
             pendingPromise
           };
         } catch (err) {
-          handleError(err, "BEFORE_LOAD");
+          handleSerialError(err, "BEFORE_LOAD");
           break;
         }
       }
@@ -633,12 +657,8 @@ class Router {
             const parentMatchPromise = matchPromises[index - 1];
             const route = this.looseRoutesById[match.routeId];
             const handleError = (err) => {
-              if (isRedirect(err)) {
-                throw err;
-              }
-              if (isNotFound(err)) {
-                err.routeId = match.routeId;
-                throw err;
+              if (isRedirect(err) || isNotFound(err)) {
+                handleMatchSpecialError(match, err);
               }
             };
             let loadPromise;
@@ -649,7 +669,6 @@ class Router {
             let didShowPending = false;
             const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
             const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
-            const shouldPending = !preload && typeof pendingMs === "number" && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
             const loaderContext = {
               params: match.params,
               deps: match.loaderDeps,
@@ -657,53 +676,47 @@ class Router {
               parentMatchPromise,
               abortController: match.abortController,
               context: match.context,
-              location: this.state.location,
+              location,
               navigate: (opts) => this.navigate({ ...opts, from: match.pathname }),
-              cause: preload ? "preload" : match.cause
+              cause: preload ? "preload" : match.cause,
+              route
             };
             const fetch = async () => {
-              var _a3, _b2, _c, _d, _e, _f, _g, _h;
-              if (match.isFetching) {
-                loadPromise = (_a3 = getRouteMatch(this.state, match.id)) == null ? void 0 : _a3.loadPromise;
-              } else {
-                if (match.fetchCount && match.status === "success") {
-                  resolve();
+              var _a3, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+              try {
+                if (match.isFetching) {
+                  loadPromise = (_a3 = getRouteMatch(this.state, match.id)) == null ? void 0 : _a3.loadPromise;
+                } else {
+                  matches[index] = match = {
+                    ...match,
+                    isFetching: true,
+                    fetchCount: match.fetchCount + 1
+                  };
+                  const lazyPromise = ((_b2 = route.lazyFn) == null ? void 0 : _b2.call(route).then((lazyRoute) => {
+                    Object.assign(route.options, lazyRoute.options);
+                  })) || Promise.resolve();
+                  const componentsPromise = lazyPromise.then(
+                    () => Promise.all(
+                      componentTypes.map(async (type) => {
+                        const component = route.options[type];
+                        if (component == null ? void 0 : component.preload) {
+                          await component.preload();
+                        }
+                      })
+                    )
+                  );
+                  const loaderPromise = (_d = (_c = route.options).loader) == null ? void 0 : _d.call(_c, loaderContext);
+                  loadPromise = Promise.all([
+                    componentsPromise,
+                    loaderPromise,
+                    lazyPromise
+                  ]).then((d) => d[1]);
                 }
                 matches[index] = match = {
                   ...match,
-                  isFetching: true,
-                  fetchCount: match.fetchCount + 1
+                  loadPromise
                 };
-                const lazyPromise = ((_b2 = route.lazyFn) == null ? void 0 : _b2.call(route).then((lazyRoute) => {
-                  Object.assign(route.options, lazyRoute.options);
-                })) || Promise.resolve();
-                const componentsPromise = lazyPromise.then(
-                  () => Promise.all(
-                    componentTypes.map(async (type) => {
-                      const component = route.options[type];
-                      if (component == null ? void 0 : component.preload) {
-                        await component.preload();
-                      }
-                    })
-                  )
-                );
-                async function loader() {
-                  var _a4, _b3;
-                  return await ((_b3 = (_a4 = route.options).loader) == null ? void 0 : _b3.call(_a4, loaderContext));
-                }
-                const loaderPromise = loader();
-                loadPromise = Promise.all([
-                  componentsPromise,
-                  loaderPromise,
-                  lazyPromise
-                ]).then((d) => d[1]);
-              }
-              matches[index] = match = {
-                ...match,
-                loadPromise
-              };
-              updateMatch(match);
-              try {
+                updateMatch(match);
                 const loaderData = await loadPromise;
                 if (latestPromise = checkLatest())
                   return await latestPromise;
@@ -714,11 +727,11 @@ class Router {
                 if (latestPromise = checkLatest())
                   return await latestPromise;
                 const [meta, headers] = await Promise.all([
-                  (_d = (_c = route.options).meta) == null ? void 0 : _d.call(_c, {
+                  (_f = (_e = route.options).meta) == null ? void 0 : _f.call(_e, {
                     params: match.params,
                     loaderData
                   }),
-                  (_f = (_e = route.options).headers) == null ? void 0 : _f.call(_e, {
+                  (_h = (_g = route.options).headers) == null ? void 0 : _h.call(_g, {
                     loaderData
                   })
                 ]);
@@ -738,7 +751,7 @@ class Router {
                   return await latestPromise;
                 handleError(error);
                 try {
-                  (_h = (_g = route.options).onError) == null ? void 0 : _h.call(_g, error);
+                  (_j = (_i = route.options).onError) == null ? void 0 : _j.call(_i, error);
                 } catch (onErrorError) {
                   error = onErrorError;
                   handleError(onErrorError);
@@ -761,8 +774,26 @@ class Router {
               ...match,
               preload: !!preload && !this.state.matches.find((d) => d.id === match.id)
             };
-            try {
-              if (match.status !== "success") {
+            if (match.status === "success" && (match.invalid || (shouldReload ?? age > staleAge))) {
+              (async () => {
+                try {
+                  await fetch();
+                } catch (err) {
+                  console.info("Background Fetching Error", err);
+                  if (isRedirect(err)) {
+                    const isActive = (this.state.pendingMatches || this.state.matches).find((d) => d.id === match.id);
+                    handleError(err);
+                    if (isActive) {
+                      this.handleRedirect(err);
+                    }
+                  }
+                }
+              })();
+              return resolve();
+            }
+            const shouldPending = !preload && typeof pendingMs === "number" && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
+            if (match.status !== "success") {
+              try {
                 if (shouldPending) {
                   (_a2 = match.pendingPromise) == null ? void 0 : _a2.then(async () => {
                     if (latestPromise = checkLatest())
@@ -777,11 +808,9 @@ class Router {
                   });
                 }
                 await fetch();
-              } else if (match.invalid || (shouldReload ?? age > staleAge)) {
-                fetch();
+              } catch (err) {
+                reject(err);
               }
-            } catch (err) {
-              reject(err);
             }
             resolve();
           })
@@ -837,15 +866,20 @@ class Router {
           }));
         });
         try {
+          let redirected;
+          let notFound;
           try {
             await this.loadMatches({
               matches: pendingMatches,
+              location: next,
               checkLatest: () => this.checkLatest(promise)
             });
           } catch (err) {
             if (isRedirect(err)) {
+              redirected = err;
               this.handleRedirect(err);
             } else if (isNotFound(err)) {
+              notFound = err;
               this.handleNotFound(pendingMatches, err);
             }
           }
@@ -870,7 +904,8 @@ class Router {
               cachedMatches: [
                 ...s.cachedMatches,
                 ...exitingMatches.filter((d) => d.status !== "error")
-              ]
+              ],
+              statusCode: (redirected == null ? void 0 : redirected.code) || notFound ? 404 : s.matches.some((d) => d.status === "error") ? 500 : 200
             }));
             this.cleanCache();
           });
@@ -895,6 +930,7 @@ class Router {
           if (latestPromise = this.checkLatest(promise)) {
             return latestPromise;
           }
+          console.log("Load Error", err);
           reject(err);
         }
       });
@@ -905,10 +941,9 @@ class Router {
       if (!err.href) {
         err.href = this.buildLocation(err).href;
       }
-      if (isServer) {
-        throw err;
+      if (!isServer) {
+        this.navigate({ ...err, replace: true });
       }
-      this.navigate(err);
     };
     this.cleanCache = () => {
       this.__store.setState((s) => {
@@ -925,11 +960,12 @@ class Router {
         };
       });
     };
-    this.preloadRoute = async (navigateOpts = this.state.location) => {
+    this.preloadRoute = async (opts) => {
       var _a;
-      let next = this.buildLocation(navigateOpts);
+      let next = this.buildLocation(opts);
       let matches = this.matchRoutes(next.pathname, next.search, {
-        throwOnError: true
+        throwOnError: true,
+        preload: true
       });
       const loadedMatchIds = Object.fromEntries(
         (_a = [
@@ -951,14 +987,16 @@ class Router {
       try {
         matches = await this.loadMatches({
           matches,
+          location: next,
           preload: true,
           checkLatest: () => void 0
         });
         return matches;
       } catch (err) {
-        if (!isRedirect(err) && !isNotFound(err)) {
-          console.error(err);
+        if (isRedirect(err)) {
+          return await this.preloadRoute(err);
         }
+        console.error(err);
         return void 0;
       }
     };
@@ -1045,15 +1083,7 @@ class Router {
       return {
         state: {
           dehydratedMatches: this.state.matches.map((d) => ({
-            ...pick(d, [
-              "id",
-              "status",
-              "updatedAt",
-              "loaderData",
-              // Not-founds that occur during SSR don't require the client to load data before
-              // triggering in order to prevent the flicker of the loading component
-              "notFoundError"
-            ]),
+            ...pick(d, ["id", "status", "updatedAt", "loaderData"]),
             // If an error occurs server-side during SSRing,
             // send a small subset of the error to the client
             error: d.error ? {
@@ -1115,30 +1145,28 @@ class Router {
     };
     this.handleNotFound = (matches, err) => {
       const matchesByRouteId = Object.fromEntries(
-        matches.map((match) => [match.routeId, match])
+        matches.map((match2) => [match2.routeId, match2])
       );
-      if (!err.global && err.routeId) {
-        let currentRoute = this.looseRoutesById[err.routeId];
-        if (currentRoute) {
-          while (!currentRoute.options.notFoundComponent) {
-            currentRoute = currentRoute == null ? void 0 : currentRoute.parentRoute;
-            invariant(
-              currentRoute,
-              "Found invalid route tree while trying to find not-found handler."
-            );
-            if (currentRoute.id === rootRouteId)
-              break;
-          }
-          const match = matchesByRouteId[currentRoute.id];
-          invariant(match, "Could not find match for route: " + currentRoute.id);
-          match.notFoundError = err;
-          return;
-        }
+      let routeCursor = (err.global ? this.looseRoutesById[rootRouteId] : this.looseRoutesById[err.routeId]) || this.looseRoutesById[rootRouteId];
+      while (!routeCursor.options.notFoundComponent && !this.options.defaultNotFoundComponent && routeCursor.id !== rootRouteId) {
+        routeCursor = routeCursor == null ? void 0 : routeCursor.parentRoute;
+        invariant(
+          routeCursor,
+          "Found invalid route tree while trying to find not-found handler."
+        );
       }
-      matchesByRouteId[rootRouteId].notFoundError = err;
+      let match = matchesByRouteId[routeCursor.id];
+      invariant(match, "Could not find match for route: " + routeCursor.id);
+      Object.assign(match, {
+        status: "notFound",
+        error: err,
+        isFetching: false
+      });
     };
     this.hasNotFoundMatch = () => {
-      return this.__store.state.matches.some((d) => d.notFoundError);
+      return this.__store.state.matches.some(
+        (d) => d.status === "notFound" || d.globalNotFound
+      );
     };
     this.update({
       defaultPreloadDelay: 50,
@@ -1186,7 +1214,8 @@ function getInitialRouterState(location) {
     matches: [],
     pendingMatches: [],
     cachedMatches: [],
-    lastUpdated: 0
+    lastUpdated: 0,
+    statusCode: 200
   };
 }
 function defaultSerializeError(err) {