@tanstack/react-router 1.31.0 → 1.31.2

package/dist/esm/router.js

@@ -7,7 +7,7 @@ import { defaultStringifySearch, defaultParseSearch } from "./searchParams.js";
 import { createControlledPromise, replaceEqualDeep, pick, last, deepEqual, escapeJSON, functionalUpdate } from "./utils.js";
 import { getRouteMatch } from "./RouterProvider.js";
 import { trimPath, trimPathLeft, parsePathname, resolvePath, cleanPath, matchPathname, trimPathRight, interpolatePath, joinPaths } from "./path.js";
-import { isRedirect } from "./redirects.js";
+import { isResolvedRedirect, isRedirect } from "./redirects.js";
 import { isNotFound } from "./not-found.js";
 const componentTypes = [
   "component",
@@ -28,7 +28,6 @@ class Router {
     )}`;
     this.resetNextScroll = true;
     this.shouldViewTransition = void 0;
-    this.navigateTimeout = null;
     this.latestLoadPromise = Promise.resolve();
     this.subscribers = /* @__PURE__ */ new Set();
     this.injectedHtml = [];
@@ -173,7 +172,9 @@ class Router {
       });
     };
     this.checkLatest = (promise) => {
-      return this.latestLoadPromise !== promise ? this.latestLoadPromise : void 0;
+      if (this.latestLoadPromise !== promise) {
+        throw this.latestLoadPromise;
+      }
     };
     this.parseLocation = (previousLocation) => {
       const parse = ({
@@ -396,20 +397,20 @@ class Router {
     };
     this.buildLocation = (opts) => {
       const build = (dest = {}, matches) => {
-        var _a, _b, _c, _d;
-        const fromPath = dest.from || this.latestLocation.pathname;
-        let fromSearch = ((_a = dest._fromLocation) == null ? void 0 : _a.search) || this.latestLocation.search;
-        const fromMatches = this.matchRoutes(fromPath, fromSearch);
+        var _a, _b, _c;
+        let fromPath = this.latestLocation.pathname;
+        let fromSearch = dest.fromSearch || this.latestLocation.search;
+        const fromMatches = this.matchRoutes(
+          this.latestLocation.pathname,
+          fromSearch
+        );
+        fromPath = ((_a = fromMatches.find((d) => d.id === dest.from)) == null ? void 0 : _a.pathname) || fromPath;
         fromSearch = ((_b = last(fromMatches)) == null ? void 0 : _b.search) || this.latestLocation.search;
         const stayingMatches = matches == null ? void 0 : matches.filter(
           (d) => fromMatches.find((e) => e.routeId === d.routeId)
         );
-        const fromRoute = this.looseRoutesById[(_c = last(fromMatches)) == null ? void 0 : _c.routeId];
-        let pathname = dest.to ? this.resolvePathWithBase(
-          dest.from ?? this.latestLocation.pathname,
-          `${dest.to}`
-        ) : this.resolvePathWithBase(fromRoute == null ? void 0 : fromRoute.fullPath, fromRoute == null ? void 0 : fromRoute.fullPath);
-        const prevParams = { ...(_d = last(fromMatches)) == null ? void 0 : _d.params };
+        let pathname = dest.to ? this.resolvePathWithBase(fromPath, `${dest.to}`) : this.resolvePathWithBase(fromPath, fromPath);
+        const prevParams = { ...(_c = last(fromMatches)) == null ? void 0 : _c.params };
         let nextParams = (dest.params ?? true) === true ? prevParams : { ...prevParams, ...functionalUpdate(dest.params, prevParams) };
         if (Object.keys(nextParams).length > 0) {
           matches == null ? void 0 : matches.map((d) => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach((fn) => {
@@ -503,8 +504,6 @@ class Router {
       viewTransition,
       ...next
     }) => {
-      if (this.navigateTimeout)
-        clearTimeout(this.navigateTimeout);
       const isSameUrl = this.latestLocation.href === next.href;
       if (!isSameUrl) {
         let { maskedLocation, ...nextHistory } = next;
@@ -574,14 +573,131 @@ class Router {
         // to: toString,
       });
     };
+    this.load = async () => {
+      const promise = createControlledPromise();
+      this.latestLoadPromise = promise;
+      let redirect;
+      let notFound;
+      this.startReactTransition(async () => {
+        try {
+          const next = this.latestLocation;
+          const prevLocation = this.state.resolvedLocation;
+          const pathDidChange = prevLocation.href !== next.href;
+          this.cancelMatches();
+          this.emit({
+            type: "onBeforeLoad",
+            fromLocation: prevLocation,
+            toLocation: next,
+            pathChanged: pathDidChange
+          });
+          let pendingMatches;
+          this.__store.batch(() => {
+            this.cleanCache();
+            pendingMatches = this.matchRoutes(next.pathname, next.search);
+            this.__store.setState((s) => ({
+              ...s,
+              status: "pending",
+              isLoading: true,
+              location: next,
+              pendingMatches,
+              // If a cached moved to pendingMatches, remove it from cachedMatches
+              cachedMatches: s.cachedMatches.filter((d) => {
+                return !pendingMatches.find((e) => e.id === d.id);
+              })
+            }));
+          });
+          await this.loadMatches({
+            matches: pendingMatches,
+            location: next,
+            checkLatest: () => this.checkLatest(promise),
+            onReady: async () => {
+              await this.startViewTransition(async () => {
+                let exitingMatches;
+                let enteringMatches;
+                let stayingMatches;
+                this.__store.batch(() => {
+                  this.__store.setState((s) => {
+                    const previousMatches = s.matches;
+                    const newMatches = s.pendingMatches || s.matches;
+                    exitingMatches = previousMatches.filter(
+                      (match) => !newMatches.find((d) => d.id === match.id)
+                    );
+                    enteringMatches = newMatches.filter(
+                      (match) => !previousMatches.find((d) => d.id === match.id)
+                    );
+                    stayingMatches = previousMatches.filter(
+                      (match) => newMatches.find((d) => d.id === match.id)
+                    );
+                    return {
+                      ...s,
+                      isLoading: false,
+                      matches: newMatches,
+                      pendingMatches: void 0,
+                      cachedMatches: [
+                        ...s.cachedMatches,
+                        ...exitingMatches.filter((d) => d.status !== "error")
+                      ]
+                    };
+                  });
+                  this.cleanCache();
+                });
+                [
+                  [exitingMatches, "onLeave"],
+                  [enteringMatches, "onEnter"],
+                  [stayingMatches, "onStay"]
+                ].forEach(([matches, hook]) => {
+                  matches.forEach((match) => {
+                    var _a, _b;
+                    (_b = (_a = this.looseRoutesById[match.routeId].options)[hook]) == null ? void 0 : _b.call(_a, match);
+                  });
+                });
+              });
+            }
+          });
+        } catch (err) {
+          if (isResolvedRedirect(err)) {
+            redirect = err;
+            if (!this.isServer) {
+              this.navigate({ ...err, replace: true });
+              this.load();
+            }
+          } else if (isNotFound(err)) {
+            notFound = err;
+          }
+          this.__store.setState((s) => ({
+            ...s,
+            statusCode: (redirect == null ? void 0 : redirect.statusCode) || notFound ? 404 : s.matches.some((d) => d.status === "error") ? 500 : 200,
+            redirect
+          }));
+        }
+        promise.resolve();
+      });
+      return this.latestLoadPromise;
+    };
+    this.startViewTransition = async (fn) => {
+      var _a, _b;
+      const shouldViewTransition = this.shouldViewTransition ?? this.options.defaultViewTransition;
+      delete this.shouldViewTransition;
+      ((_b = (_a = shouldViewTransition && typeof document !== "undefined" ? document : void 0) == null ? void 0 : _a.startViewTransition) == null ? void 0 : _b.call(_a, fn)) || fn();
+    };
     this.loadMatches = async ({
       checkLatest,
       location,
       matches,
-      preload
+      preload,
+      onReady
     }) => {
-      let latestPromise;
       let firstBadMatchIndex;
+      let rendered = false;
+      const triggerOnReady = async () => {
+        if (!rendered) {
+          rendered = true;
+          await (onReady == null ? void 0 : onReady());
+        }
+      };
+      if (!this.isServer && !this.state.matches.length) {
+        triggerOnReady();
+      }
       const updateMatch = (id, updater, opts) => {
         var _a;
         let updated;
@@ -599,41 +715,64 @@ class Router {
         });
         return updated;
       };
+      const handleRedirectAndNotFound = (match, err) => {
+        if (isResolvedRedirect(err))
+          throw err;
+        if (isRedirect(err) || isNotFound(err)) {
+          updateMatch(match.id, (prev) => ({
+            ...prev,
+            status: isRedirect(err) ? "redirected" : isNotFound(err) ? "notFound" : "error",
+            isFetching: false,
+            error: err
+          }));
+          rendered = true;
+          if (!err.routeId) {
+            err.routeId = match.routeId;
+          }
+          if (isRedirect(err)) {
+            err = this.resolveRedirect(err);
+            throw err;
+          } else if (isNotFound(err)) {
+            this.handleNotFound(matches, err);
+            throw err;
+          }
+        }
+      };
       try {
         await new Promise((resolveAll, rejectAll) => {
           ;
           (async () => {
             var _a, _b;
             try {
-              const handleRedirectAndNotFound = (match, err) => {
-                if (isRedirect(err) || isNotFound(err)) {
-                  updateMatch(match.id, (prev) => ({
-                    ...prev,
-                    status: isRedirect(err) ? "redirected" : isNotFound(err) ? "notFound" : "error",
-                    isFetching: false,
-                    error: err
-                  }));
-                  if (!err.routeId) {
-                    ;
-                    err.routeId = match.routeId;
-                  }
-                  if (isRedirect(err)) {
-                    const redirect = this.resolveRedirect(err);
-                    if (!preload && !this.isServer) {
-                      this.navigate({ ...redirect, replace: true });
-                    }
-                    throw redirect;
-                  } else if (isNotFound(err)) {
-                    if (!preload)
-                      this.handleNotFound(matches, err);
-                    throw err;
-                  }
-                }
-              };
               for (let [index, match] of matches.entries()) {
                 const parentMatch = matches[index - 1];
                 const route = this.looseRoutesById[match.routeId];
                 const abortController = new AbortController();
+                let loadPromise = match.loadPromise;
+                const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+                const shouldPending = !!(onReady && !this.isServer && !preload && (route.options.loader || route.options.beforeLoad) && typeof pendingMs === "number" && pendingMs !== Infinity && (route.options.pendingComponent ?? this.options.defaultPendingComponent));
+                if (shouldPending) {
+                  setTimeout(() => {
+                    try {
+                      checkLatest();
+                      triggerOnReady();
+                    } catch {
+                    }
+                  }, pendingMs);
+                }
+                if (match.isFetching) {
+                  continue;
+                }
+                const previousResolve = loadPromise.resolve;
+                loadPromise = createControlledPromise(
+                  // Resolve the old when we we resolve the new one
+                  previousResolve
+                );
+                matches[index] = match = updateMatch(match.id, (prev) => ({
+                  ...prev,
+                  isFetching: "beforeLoad",
+                  loadPromise
+                }));
                 const handleSerialError = (err, routerCode) => {
                   var _a2, _b2;
                   err.routerCode = routerCode;
@@ -661,19 +800,6 @@ class Router {
                 }
                 try {
                   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) => {
-                    if (pendingMs !== Infinity)
-                      setTimeout(r, pendingMs);
-                  });
-                  const shouldPending = !this.isServer && !preload && (route.options.loader || route.options.beforeLoad) && typeof pendingMs === "number" && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
-                  if (shouldPending) {
-                    pendingPromise.then(async () => {
-                      if (latestPromise = checkLatest())
-                        return latestPromise;
-                      resolveAll();
-                    });
-                  }
                   const beforeLoadContext = await ((_b = (_a = route.options).beforeLoad) == null ? void 0 : _b.call(_a, {
                     search: match.search,
                     abortController,
@@ -685,6 +811,7 @@ class Router {
                     buildLocation: this.buildLocation,
                     cause: preload ? "preload" : match.cause
                   })) ?? {};
+                  checkLatest();
                   if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
                     handleSerialError(beforeLoadContext, "BEFORE_LOAD");
                   }
@@ -708,6 +835,7 @@ class Router {
                   updateMatch(match.id, () => match);
                 }
               }
+              checkLatest();
               const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
               const matchPromises = [];
               await Promise.all(
@@ -732,13 +860,11 @@ class Router {
                     let lazyPromise = Promise.resolve();
                     let componentsPromise = Promise.resolve();
                     let loaderPromise = existing.loaderPromise;
-                    let loadPromise = existing.loadPromise;
                     const potentialPendingMinPromise = async () => {
                       const latestMatch = getRouteMatch(this.state, match.id);
                       if (latestMatch == null ? void 0 : latestMatch.minPendingPromise) {
                         await latestMatch.minPendingPromise;
-                        if (latestPromise = checkLatest())
-                          return await latestPromise;
+                        checkLatest();
                         updateMatch(latestMatch.id, (prev) => ({
                           ...prev,
                           minPendingPromise: void 0
@@ -746,12 +872,15 @@ class Router {
                       }
                     };
                     try {
-                      if (!match.isFetching) {
-                        matches[index] = match = {
-                          ...match,
-                          isFetching: true,
-                          fetchCount: match.fetchCount + 1
-                        };
+                      if (match.isFetching === "beforeLoad") {
+                        matches[index] = match = updateMatch(
+                          match.id,
+                          (prev) => ({
+                            ...prev,
+                            isFetching: "loader",
+                            fetchCount: match.fetchCount + 1
+                          })
+                        );
                         lazyPromise = ((_a2 = route.lazyFn) == null ? void 0 : _a2.call(route).then((lazyRoute) => {
                           Object.assign(route.options, lazyRoute.options);
                         })) || Promise.resolve();
@@ -766,29 +895,21 @@ class Router {
                           )
                         );
                         await lazyPromise;
-                        if (latestPromise = checkLatest())
-                          return await latestPromise;
+                        checkLatest();
                         loaderPromise = (_c = (_b2 = route.options).loader) == null ? void 0 : _c.call(_b2, loaderContext);
-                        const previousResolve = loadPromise.resolve;
-                        loadPromise = createControlledPromise(
-                          // Resolve the old when we we resolve the new one
-                          previousResolve
+                        matches[index] = match = updateMatch(
+                          match.id,
+                          (prev) => ({
+                            ...prev,
+                            loaderPromise
+                          })
                         );
                       }
-                      matches[index] = match = updateMatch(match.id, (prev) => ({
-                        ...prev,
-                        loaderPromise,
-                        loadPromise
-                      }));
                       const loaderData = await loaderPromise;
-                      if (latestPromise = checkLatest())
-                        return await latestPromise;
+                      checkLatest();
                       handleRedirectAndNotFound(match, loaderData);
-                      if (latestPromise = checkLatest())
-                        return await latestPromise;
                       await potentialPendingMinPromise();
-                      if (latestPromise = checkLatest())
-                        return await latestPromise;
+                      checkLatest();
                       const meta = (_e = (_d = route.options).meta) == null ? void 0 : _e.call(_d, {
                         params: match.params,
                         loaderData
@@ -807,12 +928,10 @@ class Router {
                         headers
                       }));
                     } catch (e) {
+                      checkLatest();
                       let error = e;
-                      if (latestPromise = checkLatest())
-                        return await latestPromise;
                       await potentialPendingMinPromise();
-                      if (latestPromise = checkLatest())
-                        return await latestPromise;
+                      checkLatest();
                       handleRedirectAndNotFound(match, e);
                       try {
                         (_i = (_h = route.options).onError) == null ? void 0 : _i.call(_h, e);
@@ -828,9 +947,8 @@ class Router {
                       }));
                     }
                     await componentsPromise;
-                    if (latestPromise = checkLatest())
-                      return await latestPromise;
-                    loadPromise.resolve();
+                    checkLatest();
+                    match.loadPromise.resolve();
                   };
                   const age = Date.now() - match.updatedAt;
                   const staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
@@ -844,8 +962,7 @@ class Router {
                     try {
                       await fetch();
                     } catch (err) {
-                      if (latestPromise = checkLatest())
-                        return await latestPromise;
+                      checkLatest();
                       handleRedirectAndNotFound(match, err);
                     }
                   };
@@ -858,14 +975,14 @@ class Router {
                   }
                 })
               );
-              if (latestPromise = checkLatest())
-                return await latestPromise;
+              checkLatest();
               resolveAll();
             } catch (err) {
               rejectAll(err);
             }
           })();
         });
+        await triggerOnReady();
       } catch (err) {
         if (isRedirect(err) || isNotFound(err)) {
           throw err;
@@ -890,115 +1007,6 @@ class Router {
       });
       return this.load();
     };
-    this.load = async () => {
-      let resolveLoad;
-      let rejectLoad;
-      const promise = new Promise((resolve, reject) => {
-        resolveLoad = resolve;
-        rejectLoad = reject;
-      });
-      this.latestLoadPromise = promise;
-      let latestPromise;
-      this.startReactTransition(async () => {
-        var _a, _b;
-        try {
-          const next = this.latestLocation;
-          const prevLocation = this.state.resolvedLocation;
-          const pathDidChange = prevLocation.href !== next.href;
-          this.cancelMatches();
-          this.emit({
-            type: "onBeforeLoad",
-            fromLocation: prevLocation,
-            toLocation: next,
-            pathChanged: pathDidChange
-          });
-          let pendingMatches;
-          const previousMatches = this.state.matches;
-          this.__store.batch(() => {
-            this.cleanCache();
-            pendingMatches = this.matchRoutes(next.pathname, next.search);
-            this.__store.setState((s) => ({
-              ...s,
-              status: "pending",
-              isLoading: true,
-              location: next,
-              pendingMatches,
-              cachedMatches: s.cachedMatches.filter((d) => {
-                return !pendingMatches.find((e) => e.id === d.id);
-              })
-            }));
-          });
-          let redirect;
-          let notFound;
-          try {
-            const loadMatchesPromise = this.loadMatches({
-              matches: pendingMatches,
-              location: next,
-              checkLatest: () => this.checkLatest(promise)
-            });
-            if (previousMatches.length || this.isServer) {
-              await loadMatchesPromise;
-            }
-          } catch (err) {
-            if (isRedirect(err)) {
-              redirect = err;
-            } else if (isNotFound(err)) {
-              notFound = err;
-            }
-          }
-          if (latestPromise = this.checkLatest(promise)) {
-            return latestPromise;
-          }
-          const exitingMatches = previousMatches.filter(
-            (match) => !pendingMatches.find((d) => d.id === match.id)
-          );
-          const enteringMatches = pendingMatches.filter(
-            (match) => !previousMatches.find((d) => d.id === match.id)
-          );
-          const stayingMatches = previousMatches.filter(
-            (match) => pendingMatches.find((d) => d.id === match.id)
-          );
-          const shouldViewTransition = this.shouldViewTransition ?? this.options.defaultViewTransition;
-          delete this.shouldViewTransition;
-          const apply = () => {
-            this.__store.batch(() => {
-              this.__store.setState((s) => ({
-                ...s,
-                isLoading: false,
-                matches: s.pendingMatches,
-                pendingMatches: void 0,
-                cachedMatches: [
-                  ...s.cachedMatches,
-                  ...exitingMatches.filter((d) => d.status !== "error")
-                ],
-                statusCode: (redirect == null ? void 0 : redirect.statusCode) || notFound ? 404 : s.matches.some((d) => d.status === "error") ? 500 : 200,
-                redirect
-              }));
-              this.cleanCache();
-            });
-            [
-              [exitingMatches, "onLeave"],
-              [enteringMatches, "onEnter"],
-              [stayingMatches, "onStay"]
-            ].forEach(([matches, hook]) => {
-              matches.forEach((match) => {
-                var _a2, _b2;
-                (_b2 = (_a2 = this.looseRoutesById[match.routeId].options)[hook]) == null ? void 0 : _b2.call(_a2, match);
-              });
-            });
-            resolveLoad();
-          };
-          ((_b = (_a = shouldViewTransition && typeof document !== "undefined" ? document : void 0) == null ? void 0 : _a.startViewTransition) == null ? void 0 : _b.call(_a, apply)) || apply();
-        } catch (err) {
-          if (latestPromise = this.checkLatest(promise)) {
-            return latestPromise;
-          }
-          console.error("Load Error", err);
-          rejectLoad(err);
-        }
-      });
-      return this.latestLoadPromise;
-    };
     this.resolveRedirect = (err) => {
       const redirect = err;
       if (!redirect.href) {
@@ -1061,7 +1069,7 @@ class Router {
       } catch (err) {
         if (isRedirect(err)) {
           return await this.preloadRoute({
-            _fromDest: next,
+            fromSearch: next.search,
             from: next.pathname,
             ...err
           });