@tanstack/router-core 1.132.0-alpha.0 → 1.132.0-alpha.2

package/dist/esm/router.js

@@ -1,7 +1,7 @@
 import { Store, batch } from "@tanstack/store";
 import { createMemoryHistory, createBrowserHistory, parseHref } from "@tanstack/history";
 import invariant from "tiny-invariant";
-import { pick, createControlledPromise, deepEqual, replaceEqualDeep, last, functionalUpdate } from "./utils.js";
+import { pick, createControlledPromise, isPromise, deepEqual, replaceEqualDeep, last, functionalUpdate } from "./utils.js";
 import { trimPath, resolvePath, cleanPath, matchPathname, trimPathRight, interpolatePath, joinPaths, trimPathLeft, parsePathname, SEGMENT_TYPE_PARAM, SEGMENT_TYPE_OPTIONAL_PARAM, SEGMENT_TYPE_WILDCARD, SEGMENT_TYPE_PATHNAME } from "./path.js";
 import { isNotFound } from "./not-found.js";
 import { setupScrollRestoration } from "./scroll-restoration.js";
@@ -210,13 +210,8 @@ class RouterCore {
       const match = this.getMatch(id);
       if (!match) return;
       match.abortController.abort();
-      this.updateMatch(id, (prev) => {
-        clearTimeout(prev.pendingTimeout);
-        return {
-          ...prev,
-          pendingTimeout: void 0
-        };
-      });
+      clearTimeout(match._nonReactive.pendingTimeout);
+      match._nonReactive.pendingTimeout = void 0;
     };
     this.cancelMatches = () => {
       this.state.pendingMatches?.forEach((match) => {
@@ -230,7 +225,7 @@ class RouterCore {
           _buildLocation: true
         });
         const lastMatch = last(allCurrentLocationMatches);
-        let fromPath = lastMatch.fullPath;
+        let fromPath = this.resolvePathWithBase(lastMatch.fullPath, ".");
         const toPath = dest.to ? this.resolvePathWithBase(fromPath, `${dest.to}`) : this.resolvePathWithBase(fromPath, ".");
         const routeIsChanging = !!dest.to && !comparePaths(dest.to.toString(), fromPath) && !comparePaths(toPath, fromPath);
         if (dest.unsafeRelative === "path") {
@@ -253,6 +248,7 @@ class RouterCore {
             }
           }
         }
+        fromPath = this.resolvePathWithBase(fromPath, ".");
         const fromSearch = lastMatch.search;
         const fromParams = { ...lastMatch.params };
         const nextTo = dest.to ? this.resolvePathWithBase(fromPath, `${dest.to}`) : this.resolvePathWithBase(fromPath, ".");
@@ -265,13 +261,9 @@ class RouterCore {
           params: nextParams ?? {},
           parseCache: this.parsePathnameCache
         }).interpolatedPath;
-        const destRoutes = this.matchRoutes(
-          interpolatedNextTo,
-          {},
-          {
-            _buildLocation: true
-          }
-        ).map((d) => this.looseRoutesById[d.routeId]);
+        const destRoutes = this.matchRoutes(interpolatedNextTo, void 0, {
+          _buildLocation: true
+        }).map((d) => this.looseRoutesById[d.routeId]);
         if (Object.keys(nextParams).length > 0) {
           destRoutes.map((route) => {
             return route.options.params?.stringify ?? route.options.stringifyParams;
@@ -693,502 +685,597 @@ class RouterCore {
       const findFn = (d) => d.id === matchId;
       return this.state.cachedMatches.find(findFn) ?? this.state.pendingMatches?.find(findFn) ?? this.state.matches.find(findFn);
     };
-    this.loadMatches = async ({
-      location,
-      matches,
-      preload: allPreload,
-      onReady,
-      updateMatch = this.updateMatch,
-      sync
-    }) => {
-      let firstBadMatchIndex;
-      let rendered = false;
-      const triggerOnReady = async () => {
-        if (!rendered) {
-          rendered = true;
-          await onReady?.();
+    this.triggerOnReady = (innerLoadContext) => {
+      if (!innerLoadContext.rendered) {
+        innerLoadContext.rendered = true;
+        return innerLoadContext.onReady?.();
+      }
+    };
+    this.resolvePreload = (innerLoadContext, matchId) => {
+      return !!(innerLoadContext.preload && !this.state.matches.some((d) => d.id === matchId));
+    };
+    this.handleRedirectAndNotFound = (innerLoadContext, match, err) => {
+      if (!isRedirect(err) && !isNotFound(err)) return;
+      if (isRedirect(err) && err.redirectHandled && !err.options.reloadDocument) {
+        throw err;
+      }
+      if (match) {
+        match._nonReactive.beforeLoadPromise?.resolve();
+        match._nonReactive.loaderPromise?.resolve();
+        match._nonReactive.beforeLoadPromise = void 0;
+        match._nonReactive.loaderPromise = void 0;
+        const status = isRedirect(err) ? "redirected" : "notFound";
+        innerLoadContext.updateMatch(match.id, (prev) => ({
+          ...prev,
+          status,
+          isFetching: false,
+          error: err
+        }));
+        if (isNotFound(err) && !err.routeId) {
+          err.routeId = match.routeId;
+        }
+        match._nonReactive.loadPromise?.resolve();
+      }
+      if (isRedirect(err)) {
+        innerLoadContext.rendered = true;
+        err.options._fromLocation = innerLoadContext.location;
+        err.redirectHandled = true;
+        err = this.resolveRedirect(err);
+        throw err;
+      } else {
+        this._handleNotFound(innerLoadContext, err);
+        throw err;
+      }
+    };
+    this.shouldSkipLoader = (matchId) => {
+      const match = this.getMatch(matchId);
+      if (!this.isServer && match._nonReactive.dehydrated) {
+        return true;
+      }
+      if (this.isServer) {
+        if (match.ssr === false) {
+          return true;
+        }
+      }
+      return false;
+    };
+    this.handleSerialError = (innerLoadContext, index, err, routerCode) => {
+      const { id: matchId, routeId } = innerLoadContext.matches[index];
+      const route = this.looseRoutesById[routeId];
+      if (err instanceof Promise) {
+        throw err;
+      }
+      err.routerCode = routerCode;
+      innerLoadContext.firstBadMatchIndex ??= index;
+      this.handleRedirectAndNotFound(
+        innerLoadContext,
+        this.getMatch(matchId),
+        err
+      );
+      try {
+        route.options.onError?.(err);
+      } catch (errorHandlerErr) {
+        err = errorHandlerErr;
+        this.handleRedirectAndNotFound(
+          innerLoadContext,
+          this.getMatch(matchId),
+          err
+        );
+      }
+      innerLoadContext.updateMatch(matchId, (prev) => {
+        prev._nonReactive.beforeLoadPromise?.resolve();
+        prev._nonReactive.beforeLoadPromise = void 0;
+        prev._nonReactive.loadPromise?.resolve();
+        return {
+          ...prev,
+          error: err,
+          status: "error",
+          isFetching: false,
+          updatedAt: Date.now(),
+          abortController: new AbortController()
+        };
+      });
+    };
+    this.isBeforeLoadSsr = (innerLoadContext, matchId, index, route) => {
+      const existingMatch = this.getMatch(matchId);
+      const parentMatchId = innerLoadContext.matches[index - 1]?.id;
+      const parentMatch = parentMatchId ? this.getMatch(parentMatchId) : void 0;
+      if (this.isShell()) {
+        existingMatch.ssr = matchId === rootRouteId;
+        return;
+      }
+      if (parentMatch?.ssr === false) {
+        existingMatch.ssr = false;
+        return;
+      }
+      const parentOverride = (tempSsr2) => {
+        if (tempSsr2 === true && parentMatch?.ssr === "data-only") {
+          return "data-only";
         }
+        return tempSsr2;
       };
-      const resolvePreload = (matchId) => {
-        return !!(allPreload && !this.state.matches.some((d) => d.id === matchId));
+      const defaultSsr = this.options.defaultSsr ?? true;
+      if (route.options.ssr === void 0) {
+        existingMatch.ssr = parentOverride(defaultSsr);
+        return;
+      }
+      if (typeof route.options.ssr !== "function") {
+        existingMatch.ssr = parentOverride(route.options.ssr);
+        return;
+      }
+      const { search, params } = this.getMatch(matchId);
+      const ssrFnContext = {
+        search: makeMaybe(search, existingMatch.searchError),
+        params: makeMaybe(params, existingMatch.paramsError),
+        location: innerLoadContext.location,
+        matches: innerLoadContext.matches.map((match) => ({
+          index: match.index,
+          pathname: match.pathname,
+          fullPath: match.fullPath,
+          staticData: match.staticData,
+          id: match.id,
+          routeId: match.routeId,
+          search: makeMaybe(match.search, match.searchError),
+          params: makeMaybe(match.params, match.paramsError),
+          ssr: match.ssr
+        }))
       };
-      if (!this.isServer && this.state.matches.some((d) => d._forcePending)) {
-        triggerOnReady();
-      }
-      const handleRedirectAndNotFound = (match, err) => {
-        if (isRedirect(err) || isNotFound(err)) {
-          if (isRedirect(err)) {
-            if (err.redirectHandled) {
-              if (!err.options.reloadDocument) {
-                throw err;
-              }
+      const tempSsr = route.options.ssr(ssrFnContext);
+      if (isPromise(tempSsr)) {
+        return tempSsr.then((ssr) => {
+          existingMatch.ssr = parentOverride(ssr ?? defaultSsr);
+        });
+      }
+      existingMatch.ssr = parentOverride(tempSsr ?? defaultSsr);
+      return;
+    };
+    this.setupPendingTimeout = (innerLoadContext, matchId, route) => {
+      const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+      const shouldPending = !!(innerLoadContext.onReady && !this.isServer && !this.resolvePreload(innerLoadContext, matchId) && (route.options.loader || route.options.beforeLoad || routeNeedsPreload(route)) && typeof pendingMs === "number" && pendingMs !== Infinity && (route.options.pendingComponent ?? this.options?.defaultPendingComponent));
+      const match = this.getMatch(matchId);
+      if (shouldPending && match._nonReactive.pendingTimeout === void 0) {
+        const pendingTimeout = setTimeout(() => {
+          this.triggerOnReady(innerLoadContext);
+        }, pendingMs);
+        match._nonReactive.pendingTimeout = pendingTimeout;
+      }
+    };
+    this.shouldExecuteBeforeLoad = (innerLoadContext, matchId, route) => {
+      const existingMatch = this.getMatch(matchId);
+      if (!existingMatch._nonReactive.beforeLoadPromise && !existingMatch._nonReactive.loaderPromise)
+        return true;
+      this.setupPendingTimeout(innerLoadContext, matchId, route);
+      const then = () => {
+        let shouldExecuteBeforeLoad = true;
+        const match = this.getMatch(matchId);
+        if (match.status === "error") {
+          shouldExecuteBeforeLoad = true;
+        } else if (match.preload && (match.status === "redirected" || match.status === "notFound")) {
+          this.handleRedirectAndNotFound(innerLoadContext, match, match.error);
+        }
+        return shouldExecuteBeforeLoad;
+      };
+      return existingMatch._nonReactive.beforeLoadPromise ? existingMatch._nonReactive.beforeLoadPromise.then(then) : then();
+    };
+    this.executeBeforeLoad = (innerLoadContext, matchId, index, route) => {
+      const match = this.getMatch(matchId);
+      match._nonReactive.beforeLoadPromise = createControlledPromise();
+      const prevLoadPromise = match._nonReactive.loadPromise;
+      match._nonReactive.loadPromise = createControlledPromise(() => {
+        prevLoadPromise?.resolve();
+      });
+      const { paramsError, searchError } = match;
+      if (paramsError) {
+        this.handleSerialError(
+          innerLoadContext,
+          index,
+          paramsError,
+          "PARSE_PARAMS"
+        );
+      }
+      if (searchError) {
+        this.handleSerialError(
+          innerLoadContext,
+          index,
+          searchError,
+          "VALIDATE_SEARCH"
+        );
+      }
+      this.setupPendingTimeout(innerLoadContext, matchId, route);
+      const abortController = new AbortController();
+      const parentMatchId = innerLoadContext.matches[index - 1]?.id;
+      const parentMatch = parentMatchId ? this.getMatch(parentMatchId) : void 0;
+      const parentMatchContext = parentMatch?.context ?? this.options.context ?? void 0;
+      const context = { ...parentMatchContext, ...match.__routeContext };
+      let isPending = false;
+      const pending = () => {
+        if (isPending) return;
+        isPending = true;
+        innerLoadContext.updateMatch(matchId, (prev) => ({
+          ...prev,
+          isFetching: "beforeLoad",
+          fetchCount: prev.fetchCount + 1,
+          abortController,
+          context
+        }));
+      };
+      const resolve = () => {
+        match._nonReactive.beforeLoadPromise?.resolve();
+        match._nonReactive.beforeLoadPromise = void 0;
+        innerLoadContext.updateMatch(matchId, (prev) => ({
+          ...prev,
+          isFetching: false
+        }));
+      };
+      if (!route.options.beforeLoad) {
+        batch(() => {
+          pending();
+          resolve();
+        });
+        return;
+      }
+      const { search, params, cause } = match;
+      const preload = this.resolvePreload(innerLoadContext, matchId);
+      const beforeLoadFnContext = {
+        search,
+        abortController,
+        params,
+        preload,
+        context,
+        location: innerLoadContext.location,
+        navigate: (opts) => this.navigate({ ...opts, _fromLocation: innerLoadContext.location }),
+        buildLocation: this.buildLocation,
+        cause: preload ? "preload" : cause,
+        matches: innerLoadContext.matches
+      };
+      const updateContext = (beforeLoadContext2) => {
+        if (beforeLoadContext2 === void 0) {
+          batch(() => {
+            pending();
+            resolve();
+          });
+          return;
+        }
+        if (isRedirect(beforeLoadContext2) || isNotFound(beforeLoadContext2)) {
+          pending();
+          this.handleSerialError(
+            innerLoadContext,
+            index,
+            beforeLoadContext2,
+            "BEFORE_LOAD"
+          );
+        }
+        batch(() => {
+          pending();
+          innerLoadContext.updateMatch(matchId, (prev) => ({
+            ...prev,
+            __beforeLoadContext: beforeLoadContext2,
+            context: {
+              ...prev.context,
+              ...beforeLoadContext2
+            }
+          }));
+          resolve();
+        });
+      };
+      let beforeLoadContext;
+      try {
+        beforeLoadContext = route.options.beforeLoad(beforeLoadFnContext);
+        if (isPromise(beforeLoadContext)) {
+          pending();
+          return beforeLoadContext.catch((err) => {
+            this.handleSerialError(innerLoadContext, index, err, "BEFORE_LOAD");
+          }).then(updateContext);
+        }
+      } catch (err) {
+        pending();
+        this.handleSerialError(innerLoadContext, index, err, "BEFORE_LOAD");
+      }
+      updateContext(beforeLoadContext);
+      return;
+    };
+    this.handleBeforeLoad = (innerLoadContext, index) => {
+      const { id: matchId, routeId } = innerLoadContext.matches[index];
+      const route = this.looseRoutesById[routeId];
+      const serverSsr = () => {
+        if (this.isServer) {
+          const maybePromise = this.isBeforeLoadSsr(
+            innerLoadContext,
+            matchId,
+            index,
+            route
+          );
+          if (isPromise(maybePromise)) return maybePromise.then(queueExecution);
+        }
+        return queueExecution();
+      };
+      const queueExecution = () => {
+        if (this.shouldSkipLoader(matchId)) return;
+        const shouldExecuteBeforeLoadResult = this.shouldExecuteBeforeLoad(
+          innerLoadContext,
+          matchId,
+          route
+        );
+        return isPromise(shouldExecuteBeforeLoadResult) ? shouldExecuteBeforeLoadResult.then(execute) : execute(shouldExecuteBeforeLoadResult);
+      };
+      const execute = (shouldExecuteBeforeLoad) => {
+        if (shouldExecuteBeforeLoad) {
+          return this.executeBeforeLoad(innerLoadContext, matchId, index, route);
+        }
+        return;
+      };
+      return serverSsr();
+    };
+    this.executeHead = (innerLoadContext, matchId, route) => {
+      const match = this.getMatch(matchId);
+      if (!match) {
+        return;
+      }
+      if (!route.options.head && !route.options.scripts && !route.options.headers) {
+        return;
+      }
+      const assetContext = {
+        matches: innerLoadContext.matches,
+        match,
+        params: match.params,
+        loaderData: match.loaderData
+      };
+      return Promise.all([
+        route.options.head?.(assetContext),
+        route.options.scripts?.(assetContext),
+        route.options.headers?.(assetContext)
+      ]).then(([headFnContent, scripts, headers]) => {
+        const meta = headFnContent?.meta;
+        const links = headFnContent?.links;
+        const headScripts = headFnContent?.scripts;
+        const styles = headFnContent?.styles;
+        return {
+          meta,
+          links,
+          headScripts,
+          headers,
+          scripts,
+          styles
+        };
+      });
+    };
+    this.potentialPendingMinPromise = (matchId) => {
+      const latestMatch = this.getMatch(matchId);
+      return latestMatch._nonReactive.minPendingPromise;
+    };
+    this.getLoaderContext = (innerLoadContext, matchId, index, route) => {
+      const parentMatchPromise = innerLoadContext.matchPromises[index - 1];
+      const { params, loaderDeps, abortController, context, cause } = this.getMatch(matchId);
+      const preload = this.resolvePreload(innerLoadContext, matchId);
+      return {
+        params,
+        deps: loaderDeps,
+        preload: !!preload,
+        parentMatchPromise,
+        abortController,
+        context,
+        location: innerLoadContext.location,
+        navigate: (opts) => this.navigate({ ...opts, _fromLocation: innerLoadContext.location }),
+        cause: preload ? "preload" : cause,
+        route
+      };
+    };
+    this.runLoader = async (innerLoadContext, matchId, index, route) => {
+      try {
+        try {
+          if (!this.isServer || this.getMatch(matchId).ssr === true) {
+            this.loadRouteChunk(route);
+          }
+          const loaderResult = route.options.loader?.(
+            this.getLoaderContext(innerLoadContext, matchId, index, route)
+          );
+          const loaderResultIsPromise = route.options.loader && isPromise(loaderResult);
+          const willLoadSomething = !!(loaderResultIsPromise || route._lazyPromise || route._componentsPromise || route.options.head || route.options.scripts || route.options.headers || this.getMatch(matchId)._nonReactive.minPendingPromise);
+          if (willLoadSomething) {
+            innerLoadContext.updateMatch(matchId, (prev) => ({
+              ...prev,
+              isFetching: "loader"
+            }));
+          }
+          if (route.options.loader) {
+            const loaderData = loaderResultIsPromise ? await loaderResult : loaderResult;
+            this.handleRedirectAndNotFound(
+              innerLoadContext,
+              this.getMatch(matchId),
+              loaderData
+            );
+            if (loaderData !== void 0) {
+              innerLoadContext.updateMatch(matchId, (prev) => ({
+                ...prev,
+                loaderData
+              }));
             }
           }
-          match.beforeLoadPromise?.resolve();
-          match.loaderPromise?.resolve();
-          updateMatch(match.id, (prev) => ({
+          if (route._lazyPromise) await route._lazyPromise;
+          const headResult = this.executeHead(innerLoadContext, matchId, route);
+          const head = headResult ? await headResult : void 0;
+          const pendingPromise = this.potentialPendingMinPromise(matchId);
+          if (pendingPromise) await pendingPromise;
+          if (route._componentsPromise) await route._componentsPromise;
+          innerLoadContext.updateMatch(matchId, (prev) => ({
             ...prev,
-            status: isRedirect(err) ? "redirected" : isNotFound(err) ? "notFound" : "error",
+            error: void 0,
+            status: "success",
             isFetching: false,
-            error: err,
-            beforeLoadPromise: void 0,
-            loaderPromise: void 0
+            updatedAt: Date.now(),
+            ...head
           }));
-          if (!err.routeId) {
-            err.routeId = match.routeId;
-          }
-          match.loadPromise?.resolve();
-          if (isRedirect(err)) {
-            rendered = true;
-            err.options._fromLocation = location;
-            err.redirectHandled = true;
-            err = this.resolveRedirect(err);
-            throw err;
-          } else if (isNotFound(err)) {
-            this._handleNotFound(matches, err, {
-              updateMatch
-            });
-            throw err;
+        } catch (e) {
+          let error = e;
+          const pendingPromise = this.potentialPendingMinPromise(matchId);
+          if (pendingPromise) await pendingPromise;
+          this.handleRedirectAndNotFound(
+            innerLoadContext,
+            this.getMatch(matchId),
+            e
+          );
+          try {
+            route.options.onError?.(e);
+          } catch (onErrorError) {
+            error = onErrorError;
+            this.handleRedirectAndNotFound(
+              innerLoadContext,
+              this.getMatch(matchId),
+              onErrorError
+            );
           }
+          const headResult = this.executeHead(innerLoadContext, matchId, route);
+          const head = headResult ? await headResult : void 0;
+          innerLoadContext.updateMatch(matchId, (prev) => ({
+            ...prev,
+            error,
+            status: "error",
+            isFetching: false,
+            ...head
+          }));
         }
-      };
-      const shouldSkipLoader = (matchId) => {
+      } catch (err) {
         const match = this.getMatch(matchId);
-        if (!this.isServer && match._dehydrated) {
-          return true;
+        if (match) {
+          const headResult = this.executeHead(innerLoadContext, matchId, route);
+          if (headResult) {
+            const head = await headResult;
+            innerLoadContext.updateMatch(matchId, (prev) => ({
+              ...prev,
+              ...head
+            }));
+          }
+          match._nonReactive.loaderPromise = void 0;
         }
+        this.handleRedirectAndNotFound(innerLoadContext, match, err);
+      }
+    };
+    this.loadRouteMatch = async (innerLoadContext, index) => {
+      const { id: matchId, routeId } = innerLoadContext.matches[index];
+      let loaderShouldRunAsync = false;
+      let loaderIsRunningAsync = false;
+      const route = this.looseRoutesById[routeId];
+      const prevMatch = this.getMatch(matchId);
+      if (this.shouldSkipLoader(matchId)) {
         if (this.isServer) {
-          if (match.ssr === false) {
-            return true;
+          const headResult = this.executeHead(innerLoadContext, matchId, route);
+          if (headResult) {
+            const head = await headResult;
+            innerLoadContext.updateMatch(matchId, (prev) => ({
+              ...prev,
+              ...head
+            }));
           }
+          return this.getMatch(matchId);
         }
-        return false;
-      };
-      try {
-        await new Promise((resolveAll, rejectAll) => {
-          ;
+      } else if (prevMatch._nonReactive.loaderPromise) {
+        if (prevMatch.status === "success" && !innerLoadContext.sync && !prevMatch.preload) {
+          return this.getMatch(matchId);
+        }
+        await prevMatch._nonReactive.loaderPromise;
+        const match2 = this.getMatch(matchId);
+        if (match2.error) {
+          this.handleRedirectAndNotFound(innerLoadContext, match2, match2.error);
+        }
+      } else {
+        const age = Date.now() - this.getMatch(matchId).updatedAt;
+        const preload = this.resolvePreload(innerLoadContext, matchId);
+        const staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
+        const shouldReloadOption = route.options.shouldReload;
+        const shouldReload = typeof shouldReloadOption === "function" ? shouldReloadOption(
+          this.getLoaderContext(innerLoadContext, matchId, index, route)
+        ) : shouldReloadOption;
+        const nextPreload = !!preload && !this.state.matches.some((d) => d.id === matchId);
+        const match2 = this.getMatch(matchId);
+        match2._nonReactive.loaderPromise = createControlledPromise();
+        if (nextPreload !== match2.preload) {
+          innerLoadContext.updateMatch(matchId, (prev) => ({
+            ...prev,
+            preload: nextPreload
+          }));
+        }
+        const { status, invalid } = this.getMatch(matchId);
+        loaderShouldRunAsync = status === "success" && (invalid || (shouldReload ?? age > staleAge));
+        if (preload && route.options.preload === false) ;
+        else if (loaderShouldRunAsync && !innerLoadContext.sync) {
+          loaderIsRunningAsync = true;
           (async () => {
             try {
-              const handleSerialError = (index, err, routerCode) => {
-                const { id: matchId, routeId } = matches[index];
-                const route = this.looseRoutesById[routeId];
-                if (err instanceof Promise) {
-                  throw err;
-                }
-                err.routerCode = routerCode;
-                firstBadMatchIndex = firstBadMatchIndex ?? index;
-                handleRedirectAndNotFound(this.getMatch(matchId), err);
-                try {
-                  route.options.onError?.(err);
-                } catch (errorHandlerErr) {
-                  err = errorHandlerErr;
-                  handleRedirectAndNotFound(this.getMatch(matchId), err);
-                }
-                updateMatch(matchId, (prev) => {
-                  prev.beforeLoadPromise?.resolve();
-                  prev.loadPromise?.resolve();
-                  return {
-                    ...prev,
-                    error: err,
-                    status: "error",
-                    isFetching: false,
-                    updatedAt: Date.now(),
-                    abortController: new AbortController(),
-                    beforeLoadPromise: void 0
-                  };
-                });
-              };
-              for (const [index, { id: matchId, routeId }] of matches.entries()) {
-                const existingMatch = this.getMatch(matchId);
-                const parentMatchId = matches[index - 1]?.id;
-                const parentMatch = parentMatchId ? this.getMatch(parentMatchId) : void 0;
-                const route = this.looseRoutesById[routeId];
-                const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-                if (this.isServer) {
-                  let ssr;
-                  if (this.isShell()) {
-                    ssr = matchId === rootRouteId;
-                  } else {
-                    const defaultSsr = this.options.defaultSsr ?? true;
-                    if (parentMatch?.ssr === false) {
-                      ssr = false;
-                    } else {
-                      let tempSsr;
-                      if (route.options.ssr === void 0) {
-                        tempSsr = defaultSsr;
-                      } else if (typeof route.options.ssr === "function") {
-                        let makeMaybe = function(value, error) {
-                          if (error) {
-                            return { status: "error", error };
-                          }
-                          return { status: "success", value };
-                        };
-                        const { search, params } = this.getMatch(matchId);
-                        const ssrFnContext = {
-                          search: makeMaybe(search, existingMatch.searchError),
-                          params: makeMaybe(params, existingMatch.paramsError),
-                          location,
-                          matches: matches.map((match) => ({
-                            index: match.index,
-                            pathname: match.pathname,
-                            fullPath: match.fullPath,
-                            staticData: match.staticData,
-                            id: match.id,
-                            routeId: match.routeId,
-                            search: makeMaybe(match.search, match.searchError),
-                            params: makeMaybe(match.params, match.paramsError),
-                            ssr: match.ssr
-                          }))
-                        };
-                        tempSsr = await route.options.ssr(ssrFnContext) ?? defaultSsr;
-                      } else {
-                        tempSsr = route.options.ssr;
-                      }
-                      if (tempSsr === true && parentMatch?.ssr === "data-only") {
-                        ssr = "data-only";
-                      } else {
-                        ssr = tempSsr;
-                      }
-                    }
-                  }
-                  updateMatch(matchId, (prev) => ({
-                    ...prev,
-                    ssr
-                  }));
-                }
-                if (shouldSkipLoader(matchId)) {
-                  continue;
-                }
-                const shouldPending = !!(onReady && !this.isServer && !resolvePreload(matchId) && (route.options.loader || route.options.beforeLoad || routeNeedsPreload(route)) && typeof pendingMs === "number" && pendingMs !== Infinity && (route.options.pendingComponent ?? this.options?.defaultPendingComponent));
-                let executeBeforeLoad = true;
-                const setupPendingTimeout = () => {
-                  if (shouldPending && this.getMatch(matchId).pendingTimeout === void 0) {
-                    const pendingTimeout = setTimeout(() => {
-                      try {
-                        triggerOnReady();
-                      } catch {
-                      }
-                    }, pendingMs);
-                    updateMatch(matchId, (prev) => ({
-                      ...prev,
-                      pendingTimeout
-                    }));
-                  }
-                };
-                if (
-                  // If we are in the middle of a load, either of these will be present
-                  // (not to be confused with `loadPromise`, which is always defined)
-                  existingMatch.beforeLoadPromise || existingMatch.loaderPromise
-                ) {
-                  setupPendingTimeout();
-                  await existingMatch.beforeLoadPromise;
-                  const match = this.getMatch(matchId);
-                  if (match.status === "error") {
-                    executeBeforeLoad = true;
-                  } else if (match.preload && (match.status === "redirected" || match.status === "notFound")) {
-                    handleRedirectAndNotFound(match, match.error);
-                  }
-                }
-                if (executeBeforeLoad) {
-                  try {
-                    updateMatch(matchId, (prev) => {
-                      const prevLoadPromise = prev.loadPromise;
-                      return {
-                        ...prev,
-                        loadPromise: createControlledPromise(() => {
-                          prevLoadPromise?.resolve();
-                        }),
-                        beforeLoadPromise: createControlledPromise()
-                      };
-                    });
-                    const { paramsError, searchError } = this.getMatch(matchId);
-                    if (paramsError) {
-                      handleSerialError(index, paramsError, "PARSE_PARAMS");
-                    }
-                    if (searchError) {
-                      handleSerialError(index, searchError, "VALIDATE_SEARCH");
-                    }
-                    setupPendingTimeout();
-                    const abortController = new AbortController();
-                    const parentMatchContext = parentMatch?.context ?? this.options.context ?? {};
-                    updateMatch(matchId, (prev) => ({
-                      ...prev,
-                      isFetching: "beforeLoad",
-                      fetchCount: prev.fetchCount + 1,
-                      abortController,
-                      context: {
-                        ...parentMatchContext,
-                        ...prev.__routeContext
-                      }
-                    }));
-                    const { search, params, context, cause } = this.getMatch(matchId);
-                    const preload = resolvePreload(matchId);
-                    const beforeLoadFnContext = {
-                      search,
-                      abortController,
-                      params,
-                      preload,
-                      context,
-                      location,
-                      navigate: (opts) => this.navigate({ ...opts, _fromLocation: location }),
-                      buildLocation: this.buildLocation,
-                      cause: preload ? "preload" : cause,
-                      matches
-                    };
-                    const beforeLoadContext = await route.options.beforeLoad?.(beforeLoadFnContext);
-                    if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
-                      handleSerialError(index, beforeLoadContext, "BEFORE_LOAD");
-                    }
-                    updateMatch(matchId, (prev) => {
-                      return {
-                        ...prev,
-                        __beforeLoadContext: beforeLoadContext,
-                        context: {
-                          ...parentMatchContext,
-                          ...prev.__routeContext,
-                          ...beforeLoadContext
-                        },
-                        abortController
-                      };
-                    });
-                  } catch (err) {
-                    handleSerialError(index, err, "BEFORE_LOAD");
-                  }
-                  updateMatch(matchId, (prev) => {
-                    prev.beforeLoadPromise?.resolve();
-                    return {
-                      ...prev,
-                      beforeLoadPromise: void 0,
-                      isFetching: false
-                    };
-                  });
-                }
-              }
-              const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
-              const matchPromises = [];
-              validResolvedMatches.forEach(({ id: matchId, routeId }, index) => {
-                matchPromises.push(
-                  (async () => {
-                    let loaderShouldRunAsync = false;
-                    let loaderIsRunningAsync = false;
-                    const route = this.looseRoutesById[routeId];
-                    const executeHead = async () => {
-                      const match = this.getMatch(matchId);
-                      if (!match) {
-                        return;
-                      }
-                      const assetContext = {
-                        matches,
-                        match,
-                        params: match.params,
-                        loaderData: match.loaderData
-                      };
-                      const headFnContent = await route.options.head?.(assetContext);
-                      const meta = headFnContent?.meta;
-                      const links = headFnContent?.links;
-                      const headScripts = headFnContent?.scripts;
-                      const styles = headFnContent?.styles;
-                      const scripts = await route.options.scripts?.(assetContext);
-                      const headers = await route.options.headers?.(assetContext);
-                      return {
-                        meta,
-                        links,
-                        headScripts,
-                        headers,
-                        scripts,
-                        styles
-                      };
-                    };
-                    const potentialPendingMinPromise = async () => {
-                      const latestMatch = this.getMatch(matchId);
-                      if (latestMatch.minPendingPromise) {
-                        await latestMatch.minPendingPromise;
-                      }
-                    };
-                    const prevMatch = this.getMatch(matchId);
-                    if (shouldSkipLoader(matchId)) {
-                      if (this.isServer) {
-                        const head = await executeHead();
-                        updateMatch(matchId, (prev) => ({
-                          ...prev,
-                          ...head
-                        }));
-                        return this.getMatch(matchId);
-                      }
-                    } else if (prevMatch.loaderPromise) {
-                      if (prevMatch.status === "success" && !sync && !prevMatch.preload) {
-                        return this.getMatch(matchId);
-                      }
-                      await prevMatch.loaderPromise;
-                      const match = this.getMatch(matchId);
-                      if (match.error) {
-                        handleRedirectAndNotFound(match, match.error);
-                      }
-                    } else {
-                      const parentMatchPromise = matchPromises[index - 1];
-                      const getLoaderContext = () => {
-                        const {
-                          params,
-                          loaderDeps,
-                          abortController,
-                          context,
-                          cause
-                        } = this.getMatch(matchId);
-                        const preload2 = resolvePreload(matchId);
-                        return {
-                          params,
-                          deps: loaderDeps,
-                          preload: !!preload2,
-                          parentMatchPromise,
-                          abortController,
-                          context,
-                          location,
-                          navigate: (opts) => this.navigate({ ...opts, _fromLocation: location }),
-                          cause: preload2 ? "preload" : cause,
-                          route
-                        };
-                      };
-                      const age = Date.now() - this.getMatch(matchId).updatedAt;
-                      const preload = resolvePreload(matchId);
-                      const staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
-                      const shouldReloadOption = route.options.shouldReload;
-                      const shouldReload = typeof shouldReloadOption === "function" ? shouldReloadOption(getLoaderContext()) : shouldReloadOption;
-                      updateMatch(matchId, (prev) => ({
-                        ...prev,
-                        loaderPromise: createControlledPromise(),
-                        preload: !!preload && !this.state.matches.some((d) => d.id === matchId)
-                      }));
-                      const runLoader = async () => {
-                        try {
-                          try {
-                            if (!this.isServer || this.isServer && this.getMatch(matchId).ssr === true) {
-                              this.loadRouteChunk(route);
-                            }
-                            updateMatch(matchId, (prev) => ({
-                              ...prev,
-                              isFetching: "loader"
-                            }));
-                            const loaderData = await route.options.loader?.(getLoaderContext());
-                            handleRedirectAndNotFound(
-                              this.getMatch(matchId),
-                              loaderData
-                            );
-                            updateMatch(matchId, (prev) => ({
-                              ...prev,
-                              loaderData
-                            }));
-                            await route._lazyPromise;
-                            const head = await executeHead();
-                            await potentialPendingMinPromise();
-                            await route._componentsPromise;
-                            updateMatch(matchId, (prev) => ({
-                              ...prev,
-                              error: void 0,
-                              status: "success",
-                              isFetching: false,
-                              updatedAt: Date.now(),
-                              ...head
-                            }));
-                          } catch (e) {
-                            let error = e;
-                            await potentialPendingMinPromise();
-                            handleRedirectAndNotFound(this.getMatch(matchId), e);
-                            try {
-                              route.options.onError?.(e);
-                            } catch (onErrorError) {
-                              error = onErrorError;
-                              handleRedirectAndNotFound(
-                                this.getMatch(matchId),
-                                onErrorError
-                              );
-                            }
-                            const head = await executeHead();
-                            updateMatch(matchId, (prev) => ({
-                              ...prev,
-                              error,
-                              status: "error",
-                              isFetching: false,
-                              ...head
-                            }));
-                          }
-                        } catch (err) {
-                          const head = await executeHead();
-                          updateMatch(matchId, (prev) => ({
-                            ...prev,
-                            loaderPromise: void 0,
-                            ...head
-                          }));
-                          handleRedirectAndNotFound(this.getMatch(matchId), err);
-                        }
-                      };
-                      const { status, invalid } = this.getMatch(matchId);
-                      loaderShouldRunAsync = status === "success" && (invalid || (shouldReload ?? age > staleAge));
-                      if (preload && route.options.preload === false) {
-                      } else if (loaderShouldRunAsync && !sync) {
-                        loaderIsRunningAsync = true;
-                        (async () => {
-                          try {
-                            await runLoader();
-                            const { loaderPromise, loadPromise } = this.getMatch(matchId);
-                            loaderPromise?.resolve();
-                            loadPromise?.resolve();
-                            updateMatch(matchId, (prev) => ({
-                              ...prev,
-                              loaderPromise: void 0
-                            }));
-                          } catch (err) {
-                            if (isRedirect(err)) {
-                              await this.navigate(err.options);
-                            }
-                          }
-                        })();
-                      } else if (status !== "success" || loaderShouldRunAsync && sync) {
-                        await runLoader();
-                      } else {
-                        const head = await executeHead();
-                        updateMatch(matchId, (prev) => ({
-                          ...prev,
-                          ...head
-                        }));
-                      }
-                    }
-                    if (!loaderIsRunningAsync) {
-                      const { loaderPromise, loadPromise } = this.getMatch(matchId);
-                      loaderPromise?.resolve();
-                      loadPromise?.resolve();
-                    }
-                    updateMatch(matchId, (prev) => {
-                      clearTimeout(prev.pendingTimeout);
-                      return {
-                        ...prev,
-                        isFetching: loaderIsRunningAsync ? prev.isFetching : false,
-                        loaderPromise: loaderIsRunningAsync ? prev.loaderPromise : void 0,
-                        invalid: false,
-                        pendingTimeout: void 0,
-                        _dehydrated: void 0
-                      };
-                    });
-                    return this.getMatch(matchId);
-                  })()
-                );
-              });
-              await Promise.all(matchPromises);
-              resolveAll();
+              await this.runLoader(innerLoadContext, matchId, index, route);
+              const match3 = this.getMatch(matchId);
+              match3._nonReactive.loaderPromise?.resolve();
+              match3._nonReactive.loadPromise?.resolve();
+              match3._nonReactive.loaderPromise = void 0;
             } catch (err) {
-              rejectAll(err);
+              if (isRedirect(err)) {
+                await this.navigate(err.options);
+              }
             }
           })();
-        });
-        await triggerOnReady();
-      } catch (err) {
-        if (isRedirect(err) || isNotFound(err)) {
-          if (isNotFound(err) && !allPreload) {
-            await triggerOnReady();
+        } else if (status !== "success" || loaderShouldRunAsync && innerLoadContext.sync) {
+          await this.runLoader(innerLoadContext, matchId, index, route);
+        } else {
+          const headResult = this.executeHead(innerLoadContext, matchId, route);
+          if (headResult) {
+            const head = await headResult;
+            innerLoadContext.updateMatch(matchId, (prev) => ({
+              ...prev,
+              ...head
+            }));
           }
+        }
+      }
+      const match = this.getMatch(matchId);
+      if (!loaderIsRunningAsync) {
+        match._nonReactive.loaderPromise?.resolve();
+        match._nonReactive.loadPromise?.resolve();
+      }
+      clearTimeout(match._nonReactive.pendingTimeout);
+      match._nonReactive.pendingTimeout = void 0;
+      if (!loaderIsRunningAsync) match._nonReactive.loaderPromise = void 0;
+      match._nonReactive.dehydrated = void 0;
+      const nextIsFetching = loaderIsRunningAsync ? match.isFetching : false;
+      if (nextIsFetching !== match.isFetching || match.invalid !== false) {
+        innerLoadContext.updateMatch(matchId, (prev) => ({
+          ...prev,
+          isFetching: nextIsFetching,
+          invalid: false
+        }));
+      }
+      return this.getMatch(matchId);
+    };
+    this.loadMatches = async (baseContext) => {
+      const innerLoadContext = baseContext;
+      innerLoadContext.updateMatch ??= this.updateMatch;
+      innerLoadContext.matchPromises = [];
+      if (!this.isServer && this.state.matches.some((d) => d._forcePending)) {
+        this.triggerOnReady(innerLoadContext);
+      }
+      try {
+        for (let i = 0; i < innerLoadContext.matches.length; i++) {
+          const beforeLoad = this.handleBeforeLoad(innerLoadContext, i);
+          if (isPromise(beforeLoad)) await beforeLoad;
+        }
+        const max = innerLoadContext.firstBadMatchIndex ?? innerLoadContext.matches.length;
+        for (let i = 0; i < max; i++) {
+          innerLoadContext.matchPromises.push(
+            this.loadRouteMatch(innerLoadContext, i)
+          );
+        }
+        await Promise.all(innerLoadContext.matchPromises);
+        const readyPromise = this.triggerOnReady(innerLoadContext);
+        if (isPromise(readyPromise)) await readyPromise;
+      } catch (err) {
+        if (isNotFound(err) && !innerLoadContext.preload) {
+          const readyPromise = this.triggerOnReady(innerLoadContext);
+          if (isPromise(readyPromise)) await readyPromise;
+          throw err;
+        }
+        if (isRedirect(err)) {
           throw err;
         }
       }
-      return matches;
+      return innerLoadContext.matches;
     };
     this.invalidate = (opts) => {
       const invalidate = (d) => {
@@ -1196,7 +1283,7 @@ class RouterCore {
           return {
             ...d,
             invalid: true,
-            ...opts?.forcePending || d.status === "error" ? { status: "pending", error: void 0 } : {}
+            ...opts?.forcePending || d.status === "error" ? { status: "pending", error: void 0 } : void 0
           };
         }
         return d;
@@ -1255,27 +1342,35 @@ class RouterCore {
       this.clearCache({ filter });
     };
     this.loadRouteChunk = (route) => {
-      if (route._lazyPromise === void 0) {
+      if (!route._lazyLoaded && route._lazyPromise === void 0) {
         if (route.lazyFn) {
           route._lazyPromise = route.lazyFn().then((lazyRoute) => {
             const { id: _id, ...options2 } = lazyRoute.options;
             Object.assign(route.options, options2);
+            route._lazyLoaded = true;
+            route._lazyPromise = void 0;
           });
         } else {
-          route._lazyPromise = Promise.resolve();
+          route._lazyLoaded = true;
         }
       }
-      if (route._componentsPromise === void 0) {
-        route._componentsPromise = route._lazyPromise.then(
-          () => Promise.all(
-            componentTypes.map(async (type) => {
-              const component = route.options[type];
-              if (component?.preload) {
-                await component.preload();
-              }
-            })
-          )
-        );
+      if (!route._componentsLoaded && route._componentsPromise === void 0) {
+        const loadComponents = () => {
+          const preloads = [];
+          for (const type of componentTypes) {
+            const preload = route.options[type]?.preload;
+            if (preload) preloads.push(preload());
+          }
+          if (preloads.length)
+            return Promise.all(preloads).then(() => {
+              route._componentsLoaded = true;
+              route._componentsPromise = void 0;
+            });
+          route._componentsLoaded = true;
+          route._componentsPromise = void 0;
+          return;
+        };
+        route._componentsPromise = route._lazyPromise ? route._lazyPromise.then(loadComponents) : loadComponents();
       }
       return route._componentsPromise;
     };
@@ -1373,12 +1468,10 @@ class RouterCore {
       }
       return match;
     };
-    this._handleNotFound = (matches, err, {
-      updateMatch = this.updateMatch
-    } = {}) => {
+    this._handleNotFound = (innerLoadContext, err) => {
       const routeCursor = this.routesById[err.routeId ?? ""] ?? this.routeTree;
       const matchesByRouteId = {};
-      for (const match of matches) {
+      for (const match of innerLoadContext.matches) {
         matchesByRouteId[match.routeId] = match;
       }
       if (!routeCursor.options.notFoundComponent && this.options?.defaultNotFoundComponent) {
@@ -1393,7 +1486,7 @@ class RouterCore {
         matchForRoute,
         "Could not find match for route: " + routeCursor.id
       );
-      updateMatch(matchForRoute.id, (prev) => ({
+      innerLoadContext.updateMatch(matchForRoute.id, (prev) => ({
         ...prev,
         status: "notFound",
         error: err,
@@ -1401,9 +1494,7 @@ class RouterCore {
       }));
       if (err.routerCode === "BEFORE_LOAD" && routeCursor.parentRoute) {
         err.routeId = routeCursor.parentRoute.id;
-        this._handleNotFound(matches, err, {
-          updateMatch
-        });
+        this._handleNotFound(innerLoadContext, err);
       }
     };
     this.hasNotFoundMatch = () => {
@@ -1493,16 +1584,16 @@ class RouterCore {
     const matches = [];
     const getParentContext = (parentMatch) => {
       const parentMatchId = parentMatch?.id;
-      const parentContext = !parentMatchId ? this.options.context ?? {} : parentMatch.context ?? this.options.context ?? {};
+      const parentContext = !parentMatchId ? this.options.context ?? void 0 : parentMatch.context ?? this.options.context ?? void 0;
       return parentContext;
     };
     matchedRoutes.forEach((route, index) => {
       const parentMatch = matches[index - 1];
       const [preMatchSearch, strictMatchSearch, searchError] = (() => {
         const parentSearch = parentMatch?.search ?? next.search;
-        const parentStrictSearch = parentMatch?._strictSearch ?? {};
+        const parentStrictSearch = parentMatch?._strictSearch ?? void 0;
         try {
-          const strictSearch = validateSearch(route.options.validateSearch, { ...parentSearch }) ?? {};
+          const strictSearch = validateSearch(route.options.validateSearch, { ...parentSearch }) ?? void 0;
           return [
             {
               ...parentSearch,
@@ -1572,7 +1663,10 @@ class RouterCore {
           isFetching: false,
           error: void 0,
           paramsError: parseErrors[index],
-          __routeContext: {},
+          __routeContext: void 0,
+          _nonReactive: {
+            loadPromise: createControlledPromise()
+          },
           __beforeLoadContext: void 0,
           context: {},
           abortController: new AbortController(),
@@ -1586,7 +1680,6 @@ class RouterCore {
           headScripts: void 0,
           meta: void 0,
           staticData: route.options.staticData || {},
-          loadPromise: createControlledPromise(),
           fullPath: route.fullPath
         };
       }
@@ -1608,19 +1701,21 @@ class RouterCore {
       if (!existingMatch && opts?._buildLocation !== true) {
         const parentMatch = matches[index - 1];
         const parentContext = getParentContext(parentMatch);
-        const contextFnContext = {
-          deps: match.loaderDeps,
-          params: match.params,
-          context: parentContext,
-          location: next,
-          navigate: (opts2) => this.navigate({ ...opts2, _fromLocation: next }),
-          buildLocation: this.buildLocation,
-          cause: match.cause,
-          abortController: match.abortController,
-          preload: !!match.preload,
-          matches
-        };
-        match.__routeContext = route.options.context?.(contextFnContext) ?? {};
+        if (route.options.context) {
+          const contextFnContext = {
+            deps: match.loaderDeps,
+            params: match.params,
+            context: parentContext ?? {},
+            location: next,
+            navigate: (opts2) => this.navigate({ ...opts2, _fromLocation: next }),
+            buildLocation: this.buildLocation,
+            cause: match.cause,
+            abortController: match.abortController,
+            preload: !!match.preload,
+            matches
+          };
+          match.__routeContext = route.options.context(contextFnContext) ?? void 0;
+        }
         match.context = {
           ...parentContext,
           ...match.__routeContext,
@@ -1635,6 +1730,12 @@ class SearchParamError extends Error {
 }
 class PathParamError extends Error {
 }
+function makeMaybe(value, error) {
+  if (error) {
+    return { status: "error", error };
+  }
+  return { status: "success", value };
+}
 const normalize = (str) => str.endsWith("/") && str.length > 1 ? str.slice(0, -1) : str;
 function comparePaths(a, b) {
   return normalize(a) === normalize(b);
@@ -1923,7 +2024,7 @@ function applySearchMiddleware({
           try {
             const validatedSearch = {
               ...result,
-              ...validateSearch(route.options.validateSearch, result) ?? {}
+              ...validateSearch(route.options.validateSearch, result) ?? void 0
             };
             return validatedSearch;
           } catch {