@tanstack/react-router 1.31.1 → 1.31.3

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",
@@ -172,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 = ({
@@ -571,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;
@@ -596,38 +715,51 @@ 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)) {
-                    err = this.resolveRedirect(err);
-                    throw err;
-                  } else if (isNotFound(err)) {
-                    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;
                 }
@@ -668,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,
@@ -692,8 +811,7 @@ class Router {
                     buildLocation: this.buildLocation,
                     cause: preload ? "preload" : match.cause
                   })) ?? {};
-                  if (latestPromise = checkLatest())
-                    return latestPromise;
+                  checkLatest();
                   if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
                     handleSerialError(beforeLoadContext, "BEFORE_LOAD");
                   }
@@ -717,8 +835,7 @@ class Router {
                   updateMatch(match.id, () => match);
                 }
               }
-              if (latestPromise = checkLatest())
-                return latestPromise;
+              checkLatest();
               const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
               const matchPromises = [];
               await Promise.all(
@@ -747,8 +864,7 @@ class Router {
                       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
@@ -779,8 +895,7 @@ class Router {
                           )
                         );
                         await lazyPromise;
-                        if (latestPromise = checkLatest())
-                          return await latestPromise;
+                        checkLatest();
                         loaderPromise = (_c = (_b2 = route.options).loader) == null ? void 0 : _c.call(_b2, loaderContext);
                         matches[index] = match = updateMatch(
                           match.id,
@@ -791,14 +906,10 @@ class Router {
                         );
                       }
                       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
@@ -817,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);
@@ -838,8 +947,7 @@ class Router {
                       }));
                     }
                     await componentsPromise;
-                    if (latestPromise = checkLatest())
-                      return await latestPromise;
+                    checkLatest();
                     match.loadPromise.resolve();
                   };
                   const age = Date.now() - match.updatedAt;
@@ -854,8 +962,7 @@ class Router {
                     try {
                       await fetch();
                     } catch (err) {
-                      if (latestPromise = checkLatest())
-                        return await latestPromise;
+                      checkLatest();
                       handleRedirectAndNotFound(match, err);
                     }
                   };
@@ -868,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;
@@ -900,122 +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;
-          const loadMatches = () => this.loadMatches({
-            matches: pendingMatches,
-            location: next,
-            checkLatest: () => this.checkLatest(promise)
-          });
-          if (previousMatches.length || this.isServer) {
-            try {
-              await loadMatches();
-            } catch (err) {
-              if (isRedirect(err)) {
-                redirect = err;
-              } else if (isNotFound(err)) {
-                notFound = err;
-              }
-            }
-          } else {
-            loadMatches().catch((err) => {
-              if (isRedirect(err)) {
-                this.navigate({ ...err, replace: true });
-              }
-              this.load();
-            });
-          }
-          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) {