@tanstack/router-core 1.132.0-alpha.1 → 1.132.0-alpha.15

package/dist/esm/router.js

@@ -1,14 +1,16 @@
 import { Store, batch } from "@tanstack/store";
-import { createMemoryHistory, createBrowserHistory, parseHref } from "@tanstack/history";
+import { createBrowserHistory, parseHref } from "@tanstack/history";
 import invariant from "tiny-invariant";
-import { pick, createControlledPromise, 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 { createControlledPromise, deepEqual, replaceEqualDeep, last, findLast, functionalUpdate } from "./utils.js";
+import { resolvePath, cleanPath, trimPathRight, trimPath, matchPathname, interpolatePath, 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";
 import { defaultParseSearch, defaultStringifySearch } from "./searchParams.js";
 import { rootRouteId } from "./root.js";
 import { redirect, isRedirect } from "./redirect.js";
 import { createLRUCache } from "./lru-cache.js";
+import { loadMatches, loadRouteChunk, routeNeedsPreload } from "./load-matches.js";
+import { rewriteBasepath, composeRewrites, executeRewriteInput, executeRewriteOutput } from "./rewrite.js";
 function defaultSerializeError(err) {
   if (err instanceof Error) {
     const obj = {
@@ -53,7 +55,6 @@ class RouterCore {
           "The notFoundRoute API is deprecated and will be removed in the next major version. See https://tanstack.com/router/v1/docs/framework/react/guide/not-found-errors#migrating-from-notfoundroute for more info."
         );
       }
-      const previousOptions = this.options;
       this.options = {
         ...this.options,
         ...newOptions
@@ -65,24 +66,43 @@ class RouterCore {
           char
         ])
       ) : void 0;
-      if (!this.basepath || newOptions.basepath && newOptions.basepath !== previousOptions.basepath) {
-        if (newOptions.basepath === void 0 || newOptions.basepath === "" || newOptions.basepath === "/") {
-          this.basepath = "/";
+      if (!this.history || this.options.history && this.options.history !== this.history) {
+        if (!this.options.history) {
+          if (!this.isServer) {
+            this.history = createBrowserHistory();
+          }
         } else {
-          this.basepath = `/${trimPath(newOptions.basepath)}`;
+          this.history = this.options.history;
         }
       }
-      if (!this.history || this.options.history && this.options.history !== this.history) {
-        this.history = this.options.history ?? (this.isServer ? createMemoryHistory({
-          initialEntries: [this.basepath || "/"]
-        }) : createBrowserHistory());
-        this.latestLocation = this.parseLocation();
+      if (this.options.basepath) {
+        const basepathRewrite = rewriteBasepath({
+          basepath: this.options.basepath
+        });
+        if (this.options.rewrite) {
+          this.rewrite = composeRewrites([basepathRewrite, this.options.rewrite]);
+        } else {
+          this.rewrite = basepathRewrite;
+        }
+      } else {
+        this.rewrite = this.options.rewrite;
+      }
+      this.origin = this.options.origin;
+      if (!this.origin) {
+        if (!this.isServer) {
+          this.origin = window.origin;
+        } else {
+          this.origin = "http://localhost";
+        }
+      }
+      if (this.history) {
+        this.updateLatestLocation();
       }
       if (this.options.routeTree !== this.routeTree) {
         this.routeTree = this.options.routeTree;
         this.buildRouteTree();
       }
-      if (!this.__store) {
+      if (!this.__store && this.latestLocation) {
         this.__store = new Store(getInitialRouterState(this.latestLocation), {
           onUpdate: () => {
             this.__store.state = {
@@ -101,6 +121,12 @@ class RouterCore {
         );
       }
     };
+    this.updateLatestLocation = () => {
+      this.latestLocation = this.parseLocation(
+        this.history.location,
+        this.latestLocation
+      );
+    };
     this.buildRouteTree = () => {
       const { routesById, routesByPath, flatRoutes } = processRouteTree({
         routeTree: this.routeTree,
@@ -138,25 +164,30 @@ class RouterCore {
         }
       });
     };
-    this.parseLocation = (previousLocation, locationToParse) => {
+    this.parseLocation = (locationToParse, previousLocation) => {
       const parse = ({
-        pathname,
-        search,
-        hash,
+        href,
         state
       }) => {
-        const parsedSearch = this.options.parseSearch(search);
+        const fullUrl = new URL(href, this.origin);
+        const url = executeRewriteInput(this.rewrite, fullUrl);
+        const parsedSearch = this.options.parseSearch(url.search);
         const searchStr = this.options.stringifySearch(parsedSearch);
+        url.search = searchStr;
+        const fullPath = url.href.replace(url.origin, "");
+        const { pathname, hash } = url;
         return {
+          href: fullPath,
+          publicHref: href,
+          url: url.href,
           pathname,
           searchStr,
           search: replaceEqualDeep(previousLocation?.search, parsedSearch),
           hash: hash.split("#").reverse()[0] ?? "",
-          href: `${pathname}${searchStr}${hash}`,
           state: replaceEqualDeep(previousLocation?.state, state)
         };
       };
-      const location = parse(locationToParse ?? this.history.location);
+      const location = parse(locationToParse);
       const { __tempLocation, __tempKey } = location.state;
       if (__tempLocation && (!__tempKey || __tempKey === this.tempLocationKey)) {
         const parsedTempLocation = parse(__tempLocation);
@@ -172,11 +203,9 @@ class RouterCore {
     };
     this.resolvePathWithBase = (from, path) => {
       const resolvedPath = resolvePath({
-        basepath: this.basepath,
         base: from,
         to: cleanPath(path),
         trailingSlash: this.options.trailingSlash,
-        caseSensitive: this.options.caseSensitive,
         parseCache: this.parsePathnameCache
       });
       return resolvedPath;
@@ -198,7 +227,6 @@ class RouterCore {
       return getMatchedRoutes({
         pathname,
         routePathname,
-        basepath: this.basepath,
         caseSensitive: this.options.caseSensitive,
         routesByPath: this.routesByPath,
         routesById: this.routesById,
@@ -210,13 +238,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,60 +253,51 @@ class RouterCore {
           _buildLocation: true
         });
         const lastMatch = last(allCurrentLocationMatches);
-        let fromPath = 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") {
-          fromPath = currentLocation.pathname;
-        } else if (routeIsChanging && dest.from) {
-          fromPath = dest.from;
-          if (process.env.NODE_ENV !== "production" && dest._isNavigate) {
-            const allFromMatches = this.getMatchedRoutes(
-              dest.from,
-              void 0
-            ).matchedRoutes;
-            const matchedFrom = [...allCurrentLocationMatches].reverse().find((d) => {
-              return comparePaths(d.fullPath, fromPath);
-            });
-            const matchedCurrent = [...allFromMatches].reverse().find((d) => {
-              return comparePaths(d.fullPath, currentLocation.pathname);
-            });
-            if (!matchedFrom && !matchedCurrent) {
-              console.warn(`Could not find match for from: ${fromPath}`);
-            }
+        if (dest.from && process.env.NODE_ENV !== "production" && dest._isNavigate) {
+          const allFromMatches = this.getMatchedRoutes(
+            dest.from,
+            void 0
+          ).matchedRoutes;
+          const matchedFrom = findLast(allCurrentLocationMatches, (d) => {
+            return comparePaths(d.fullPath, dest.from);
+          });
+          const matchedCurrent = findLast(allFromMatches, (d) => {
+            return comparePaths(d.fullPath, lastMatch.fullPath);
+          });
+          if (!matchedFrom && !matchedCurrent) {
+            console.warn(`Could not find match for from: ${dest.from}`);
           }
         }
+        const defaultedFromPath = dest.unsafeRelative === "path" ? currentLocation.pathname : dest.from ?? lastMatch.fullPath;
+        const fromPath = this.resolvePathWithBase(defaultedFromPath, ".");
         const fromSearch = lastMatch.search;
         const fromParams = { ...lastMatch.params };
         const nextTo = dest.to ? this.resolvePathWithBase(fromPath, `${dest.to}`) : this.resolvePathWithBase(fromPath, ".");
-        let nextParams = dest.params === false || dest.params === null ? {} : (dest.params ?? true) === true ? fromParams : {
-          ...fromParams,
-          ...functionalUpdate(dest.params, fromParams)
-        };
+        const nextParams = dest.params === false || dest.params === null ? {} : (dest.params ?? true) === true ? fromParams : Object.assign(
+          fromParams,
+          functionalUpdate(dest.params, fromParams)
+        );
         const interpolatedNextTo = interpolatePath({
           path: nextTo,
-          params: nextParams ?? {},
+          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;
-          }).filter(Boolean).forEach((fn) => {
-            nextParams = { ...nextParams, ...fn(nextParams) };
-          });
+          for (const route of destRoutes) {
+            const fn = route.options.params?.stringify ?? route.options.stringifyParams;
+            if (fn) {
+              Object.assign(nextParams, fn(nextParams));
+            }
+          }
         }
         const nextPathname = interpolatePath({
           // Use the original template path for interpolation
           // This preserves the original parameter syntax including optional parameters
           path: nextTo,
-          params: nextParams ?? {},
+          params: nextParams,
           leaveWildcards: false,
           leaveParams: opts.leaveParams,
           decodeCharMap: this.pathParamsDecodeCharMap,
@@ -291,19 +305,19 @@ class RouterCore {
         }).interpolatedPath;
         let nextSearch = fromSearch;
         if (opts._includeValidateSearch && this.options.search?.strict) {
-          let validatedSearch = {};
+          const validatedSearch = {};
           destRoutes.forEach((route) => {
-            try {
-              if (route.options.validateSearch) {
-                validatedSearch = {
-                  ...validatedSearch,
-                  ...validateSearch(route.options.validateSearch, {
+            if (route.options.validateSearch) {
+              try {
+                Object.assign(
+                  validatedSearch,
+                  validateSearch(route.options.validateSearch, {
                     ...validatedSearch,
                     ...nextSearch
-                  }) ?? {}
-                };
+                  })
+                );
+              } catch {
               }
-            } catch {
             }
           });
           nextSearch = validatedSearch;
@@ -320,13 +334,18 @@ class RouterCore {
         const hashStr = hash ? `#${hash}` : "";
         let nextState = dest.state === true ? currentLocation.state : dest.state ? functionalUpdate(dest.state, currentLocation.state) : {};
         nextState = replaceEqualDeep(currentLocation.state, nextState);
+        const fullPath = `${nextPathname}${searchStr}${hashStr}`;
+        const url = new URL(fullPath, this.origin);
+        const rewrittenUrl = executeRewriteOutput(this.rewrite, url);
         return {
+          publicHref: rewrittenUrl.pathname + rewrittenUrl.search + rewrittenUrl.hash,
+          href: fullPath,
+          url: rewrittenUrl.href,
           pathname: nextPathname,
           search: nextSearch,
           searchStr,
           state: nextState,
           hash: hash ?? "",
-          href: `${nextPathname}${searchStr}${hashStr}`,
           unmaskOnReload: dest.unmaskOnReload
         };
       };
@@ -337,7 +356,6 @@ class RouterCore {
           let params = {};
           const foundMask = this.options.routeMasks?.find((d) => {
             const match = matchPathname(
-              this.basepath,
               next.pathname,
               {
                 to: d.from,
@@ -355,7 +373,7 @@ class RouterCore {
           if (foundMask) {
             const { from: _from, ...maskProps } = foundMask;
             maskedDest = {
-              ...pick(opts, ["from"]),
+              from: opts.from,
               ...maskProps,
               params
             };
@@ -370,7 +388,7 @@ class RouterCore {
       };
       if (opts.mask) {
         return buildWithMatches(opts, {
-          ...pick(opts, ["from"]),
+          from: opts.from,
           ...opts.mask
         });
       }
@@ -398,7 +416,7 @@ class RouterCore {
         });
         return isEqual;
       };
-      const isSameUrl = this.latestLocation.href === next.href;
+      const isSameUrl = trimPathRight(this.latestLocation.href) === trimPathRight(next.href);
       const previousCommitPromise = this.commitLocationPromise;
       this.commitLocationPromise = createControlledPromise(() => {
         previousCommitPromise?.resolve();
@@ -434,7 +452,7 @@ class RouterCore {
         nextHistory.state.__hashScrollIntoViewOptions = hashScrollIntoView ?? this.options.defaultHashScrollIntoView ?? true;
         this.shouldViewTransition = viewTransition;
         this.history[next.replace ? "replace" : "push"](
-          nextHistory.href,
+          nextHistory.publicHref,
           nextHistory.state,
           { ignoreBlocker }
         );
@@ -487,7 +505,7 @@ class RouterCore {
       if (reloadDocument) {
         if (!href) {
           const location = this.buildLocation({ to, ...rest });
-          href = this.history.createHref(location.href);
+          href = location.href;
         }
         if (rest.replace) {
           window.location.replace(href);
@@ -505,7 +523,7 @@ class RouterCore {
     };
     this.beforeLoad = () => {
       this.cancelMatches();
-      this.latestLocation = this.parseLocation(this.latestLocation);
+      this.updateLatestLocation();
       if (this.isServer) {
         const nextLocation = this.buildLocation({
           to: this.latestLocation.pathname,
@@ -566,10 +584,12 @@ class RouterCore {
                 location: next
               })
             });
-            await this.loadMatches({
+            await loadMatches({
+              router: this,
               sync: opts?.sync,
               matches: this.state.pendingMatches,
               location: next,
+              updateMatch: this.updateMatch,
               // eslint-disable-next-line @typescript-eslint/require-await
               onReady: async () => {
                 this.startViewTransition(async () => {
@@ -693,510 +713,13 @@ 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?.();
-        }
-      };
-      const resolvePreload = (matchId) => {
-        return !!(allPreload && !this.state.matches.some((d) => d.id === matchId));
-      };
-      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;
-              }
-            }
-          }
-          match.beforeLoadPromise?.resolve();
-          match.loaderPromise?.resolve();
-          updateMatch(match.id, (prev) => ({
-            ...prev,
-            status: isRedirect(err) ? "redirected" : isNotFound(err) ? "notFound" : "error",
-            isFetching: false,
-            error: err,
-            beforeLoadPromise: void 0,
-            loaderPromise: void 0
-          }));
-          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;
-          }
-        }
-      };
-      const shouldSkipLoader = (matchId) => {
-        const match = this.getMatch(matchId);
-        if (!this.isServer && match._dehydrated) {
-          return true;
-        }
-        if (this.isServer) {
-          if (match.ssr === false) {
-            return true;
-          }
-        }
-        return false;
-      };
-      try {
-        await new Promise((resolveAll, rejectAll) => {
-          ;
-          (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();
-            } catch (err) {
-              rejectAll(err);
-            }
-          })();
-        });
-        await triggerOnReady();
-      } catch (err) {
-        if (isRedirect(err) || isNotFound(err)) {
-          if (isNotFound(err) && !allPreload) {
-            await triggerOnReady();
-          }
-          throw err;
-        }
-      }
-      return matches;
-    };
     this.invalidate = (opts) => {
       const invalidate = (d) => {
         if (opts?.filter?.(d) ?? true) {
           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;
@@ -1254,31 +777,7 @@ class RouterCore {
       };
       this.clearCache({ filter });
     };
-    this.loadRouteChunk = (route) => {
-      if (route._lazyPromise === void 0) {
-        if (route.lazyFn) {
-          route._lazyPromise = route.lazyFn().then((lazyRoute) => {
-            const { id: _id, ...options2 } = lazyRoute.options;
-            Object.assign(route.options, options2);
-          });
-        } else {
-          route._lazyPromise = Promise.resolve();
-        }
-      }
-      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();
-              }
-            })
-          )
-        );
-      }
-      return route._componentsPromise;
-    };
+    this.loadRouteChunk = loadRouteChunk;
     this.preloadRoute = async (opts) => {
       const next = this.buildLocation(opts);
       let matches = this.matchRoutes(next, {
@@ -1306,7 +805,8 @@ class RouterCore {
         });
       });
       try {
-        matches = await this.loadMatches({
+        matches = await loadMatches({
+          router: this,
           matches,
           location: next,
           preload: true,
@@ -1352,7 +852,6 @@ class RouterCore {
       const pending = opts?.pending === void 0 ? !this.state.isLoading : opts.pending;
       const baseLocation = pending ? this.latestLocation : this.state.resolvedLocation || this.state.location;
       const match = matchPathname(
-        this.basepath,
         baseLocation.pathname,
         {
           ...opts,
@@ -1373,39 +872,6 @@ class RouterCore {
       }
       return match;
     };
-    this._handleNotFound = (matches, err, {
-      updateMatch = this.updateMatch
-    } = {}) => {
-      const routeCursor = this.routesById[err.routeId ?? ""] ?? this.routeTree;
-      const matchesByRouteId = {};
-      for (const match of matches) {
-        matchesByRouteId[match.routeId] = match;
-      }
-      if (!routeCursor.options.notFoundComponent && this.options?.defaultNotFoundComponent) {
-        routeCursor.options.notFoundComponent = this.options.defaultNotFoundComponent;
-      }
-      invariant(
-        routeCursor.options.notFoundComponent,
-        "No notFoundComponent found. Please set a notFoundComponent on your route or provide a defaultNotFoundComponent to the router."
-      );
-      const matchForRoute = matchesByRouteId[routeCursor.id];
-      invariant(
-        matchForRoute,
-        "Could not find match for route: " + routeCursor.id
-      );
-      updateMatch(matchForRoute.id, (prev) => ({
-        ...prev,
-        status: "notFound",
-        error: err,
-        isFetching: false
-      }));
-      if (err.routerCode === "BEFORE_LOAD" && routeCursor.parentRoute) {
-        err.routeId = routeCursor.parentRoute.id;
-        this._handleNotFound(matches, err, {
-          updateMatch
-        });
-      }
-    };
     this.hasNotFoundMatch = () => {
       return this.__store.state.matches.some(
         (d) => d.status === "notFound" || d.globalNotFound
@@ -1493,16 +959,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,
@@ -1563,7 +1029,7 @@ class RouterCore {
           routeId: route.id,
           params: previousMatch ? replaceEqualDeep(previousMatch.params, routeParams) : routeParams,
           _strictParams: usedParams,
-          pathname: joinPaths([this.basepath, interpolatedPath]),
+          pathname: interpolatedPath,
           updatedAt: Date.now(),
           search: previousMatch ? replaceEqualDeep(previousMatch.search, preMatchSearch) : preMatchSearch,
           _strictSearch: strictMatchSearch,
@@ -1572,7 +1038,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 +1055,6 @@ class RouterCore {
           headScripts: void 0,
           meta: void 0,
           staticData: route.options.staticData || {},
-          loadPromise: createControlledPromise(),
           fullPath: route.fullPath
         };
       }
@@ -1608,19 +1076,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,
@@ -1679,20 +1149,6 @@ function validateSearch(validateSearch2, input) {
   }
   return {};
 }
-const componentTypes = [
-  "component",
-  "errorComponent",
-  "pendingComponent",
-  "notFoundComponent"
-];
-function routeNeedsPreload(route) {
-  for (const componentType of componentTypes) {
-    if (route.options[componentType]?.preload) {
-      return true;
-    }
-  }
-  return false;
-}
 const REQUIRED_PARAM_BASE_SCORE = 0.5;
 const OPTIONAL_PARAM_BASE_SCORE = 0.4;
 const WILDCARD_PARAM_BASE_SCORE = 0.25;
@@ -1825,7 +1281,6 @@ function processRouteTree({
 function getMatchedRoutes({
   pathname,
   routePathname,
-  basepath,
   caseSensitive,
   routesByPath,
   routesById,
@@ -1836,7 +1291,6 @@ function getMatchedRoutes({
   const trimmedPath = trimPathRight(pathname);
   const getMatchedParams = (route) => {
     const result = matchPathname(
-      basepath,
       trimmedPath,
       {
         to: route.fullPath,
@@ -1923,7 +1377,7 @@ function applySearchMiddleware({
           try {
             const validatedSearch = {
               ...result,
-              ...validateSearch(route.options.validateSearch, result) ?? {}
+              ...validateSearch(route.options.validateSearch, result) ?? void 0
             };
             return validatedSearch;
           } catch {
@@ -1962,7 +1416,6 @@ export {
   PathParamError,
   RouterCore,
   SearchParamError,
-  componentTypes,
   defaultSerializeError,
   getInitialRouterState,
   getLocationChangeInfo,