@tanstack/react-router 1.30.1 → 1.31.1

package/dist/esm/router.d.ts

@@ -3,7 +3,7 @@ import type * as React from 'react';
 import type { HistoryState, RouterHistory } from '@tanstack/history';
 import type { AnyContext, AnyRoute, AnySearchSchema, ErrorRouteComponent, NotFoundRouteComponent, RouteMask } from './route.js';
 import type { FullSearchSchema, RouteById, RoutePaths, RoutesById, RoutesByPath } from './routeInfo.js';
-import type { ControlledPromise, NonNullableUpdater, PickAsRequired, Timeout, Updater } from './utils.js';
+import type { ControlledPromise, NonNullableUpdater, PickAsRequired, Updater } from './utils.js';
 import type { RouteComponent } from './route.js';
 import type { AnyRouteMatch, MakeRouteMatch, MatchRouteOptions } from './Matches.js';
 import type { ParsedLocation } from './location.js';
@@ -19,12 +19,12 @@ declare global {
         __TSR_DEHYDRATED__?: {
             data: string;
         };
-        __TSR_ROUTER_CONTEXT__?: React.Context<Router<any>>;
+        __TSR_ROUTER_CONTEXT__?: React.Context<Router<any, any>>;
     }
 }
 export interface Register {
 }
-export type AnyRouter = Router<AnyRoute, any, any>;
+export type AnyRouter = Router<any, any, any, any>;
 export type RegisteredRouter = Register extends {
     router: infer TRouter extends AnyRouter;
 } ? TRouter : AnyRouter;
@@ -37,7 +37,8 @@ export type RouterContextOptions<TRouteTree extends AnyRoute> = AnyContext exten
 } : {
     context: TRouteTree['types']['routerContext'];
 };
-export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends Record<string, any> = Record<string, any>, TSerializedError extends Record<string, any> = Record<string, any>> {
+export type TrailingSlashOption = 'always' | 'never' | 'preserve';
+export interface RouterOptions<TRouteTree extends AnyRoute, TTrailingSlashOption extends TrailingSlashOption, TDehydrated extends Record<string, any> = Record<string, any>, TSerializedError extends Record<string, any> = Record<string, any>> {
     history?: RouterHistory;
     stringifySearch?: SearchSerializer;
     parseSearch?: SearchParser;
@@ -77,7 +78,7 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends
     defaultNotFoundComponent?: NotFoundRouteComponent;
     transformer?: RouterTransformer;
     errorSerializer?: RouterErrorSerializer<TSerializedError>;
-    trailingSlash?: 'always' | 'never' | 'preserve';
+    trailingSlash?: TTrailingSlashOption;
 }
 export interface RouterTransformer {
     stringify: (obj: unknown) => string;
@@ -115,7 +116,7 @@ export interface BuildNextOptions {
         unmaskOnReload?: boolean;
     };
     from?: string;
-    _fromLocation?: ParsedLocation;
+    fromSearch?: unknown;
 }
 export interface DehydratedRouterState {
     dehydratedMatches: Array<DehydratedRouteMatch>;
@@ -124,7 +125,7 @@ export type DehydratedRouteMatch = Pick<MakeRouteMatch, 'id' | 'status' | 'updat
 export interface DehydratedRouter {
     state: DehydratedRouterState;
 }
-export type RouterConstructorOptions<TRouteTree extends AnyRoute, TDehydrated extends Record<string, any>, TSerializedError extends Record<string, any>> = Omit<RouterOptions<TRouteTree, TDehydrated, TSerializedError>, 'context'> & RouterContextOptions<TRouteTree>;
+export type RouterConstructorOptions<TRouteTree extends AnyRoute, TTrailingSlashOption extends TrailingSlashOption, TDehydrated extends Record<string, any>, TSerializedError extends Record<string, any>> = Omit<RouterOptions<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, 'context'> & RouterContextOptions<TRouteTree>;
 export declare const componentTypes: readonly ["component", "errorComponent", "pendingComponent", "notFoundComponent"];
 export type RouterEvents = {
     onBeforeLoad: {
@@ -151,19 +152,18 @@ export type RouterListener<TRouterEvent extends RouterEvent> = {
     eventType: TRouterEvent['type'];
     fn: ListenerFn<TRouterEvent>;
 };
-export declare function createRouter<TRouteTree extends AnyRoute = AnyRoute, TDehydrated extends Record<string, any> = Record<string, any>, TSerializedError extends Record<string, any> = Record<string, any>>(options: RouterConstructorOptions<TRouteTree, TDehydrated, TSerializedError>): Router<TRouteTree, TDehydrated, TSerializedError>;
-export declare class Router<in out TRouteTree extends AnyRoute = AnyRoute, in out TDehydrated extends Record<string, any> = Record<string, any>, in out TSerializedError extends Record<string, any> = Record<string, any>> {
+export declare function createRouter<TRouteTree extends AnyRoute, TTrailingSlashOption extends TrailingSlashOption, TDehydrated extends Record<string, any> = Record<string, any>, TSerializedError extends Record<string, any> = Record<string, any>>(options: RouterConstructorOptions<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>): Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>;
+export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailingSlashOption extends TrailingSlashOption, in out TDehydrated extends Record<string, any> = Record<string, any>, in out TSerializedError extends Record<string, any> = Record<string, any>> {
     tempLocationKey: string | undefined;
     resetNextScroll: boolean;
     shouldViewTransition?: true;
-    navigateTimeout: Timeout | null;
     latestLoadPromise: Promise<void>;
     subscribers: Set<RouterListener<RouterEvent>>;
     injectedHtml: Array<InjectedHtmlEntry>;
     dehydratedData?: TDehydrated;
     viewTransitionPromise?: ControlledPromise<true>;
     __store: Store<RouterState<TRouteTree>>;
-    options: PickAsRequired<Omit<RouterOptions<TRouteTree, TDehydrated, TSerializedError>, 'transformer'> & {
+    options: PickAsRequired<Omit<RouterOptions<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, 'transformer'> & {
         transformer: RouterTransformer;
     }, 'stringifySearch' | 'parseSearch' | 'context'>;
     history: RouterHistory;
@@ -176,10 +176,10 @@ export declare class Router<in out TRouteTree extends AnyRoute = AnyRoute, in ou
     /**
      * @deprecated Use the `createRouter` function instead
      */
-    constructor(options: RouterConstructorOptions<TRouteTree, TDehydrated, TSerializedError>);
+    constructor(options: RouterConstructorOptions<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>);
     isServer: boolean;
     startReactTransition: (fn: () => void) => void;
-    update: (newOptions: RouterConstructorOptions<TRouteTree, TDehydrated, TSerializedError>) => void;
+    update: (newOptions: RouterConstructorOptions<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>) => void;
     get state(): RouterState<TRouteTree, MakeRouteMatch<TRouteTree>>;
     buildRouteTree: () => void;
     subscribe: <TType extends keyof RouterEvents>(eventType: TType, fn: ListenerFn<RouterEvents[TType]>) => () => void;
@@ -208,8 +208,8 @@ export declare class Router<in out TRouteTree extends AnyRoute = AnyRoute, in ou
     load: () => Promise<void>;
     resolveRedirect: (err: AnyRedirect) => ResolvedRedirect;
     cleanCache: () => void;
-    preloadRoute: <TFrom extends string | import("./routeInfo").ParseRoute<TRouteTree, TRouteTree>["fullPath"] = string, TTo extends string = "", TMaskFrom extends string | import("./routeInfo").ParseRoute<TRouteTree, TRouteTree>["fullPath"] = TFrom, TMaskTo extends string = "">(opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<Array<AnyRouteMatch> | undefined>;
-    matchRoute: <TFrom extends RoutePaths<TRouteTree> = "/", TTo extends string = "", TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>>(location: ToOptions<TRouteTree, TFrom, TTo>, opts?: MatchRouteOptions) => false | RouteById<TRouteTree, TResolved>["types"]["allParams"];
+    preloadRoute: <TFrom extends string | import("./routeInfo").ParseRoute<TRouteTree, TRouteTree>["fullPath"] = string, TTo extends string = "", TMaskFrom extends string | import("./routeInfo").ParseRoute<TRouteTree, TRouteTree>["fullPath"] = TFrom, TMaskTo extends string = "">(opts: NavigateOptions<Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<Array<AnyRouteMatch> | undefined>;
+    matchRoute: <TFrom extends RoutePaths<TRouteTree> = "/", TTo extends string = "", TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>>(location: ToOptions<Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, TFrom, TTo>, opts?: MatchRouteOptions) => false | RouteById<TRouteTree, TResolved>["types"]["allParams"];
     injectHtml: (html: string | (() => Promise<string> | string)) => Promise<void>;
     registeredDeferredsIds: Map<string, {}>;
     registeredDeferreds: WeakMap<{}, DeferredPromiseState<any>>;

package/dist/esm/router.js

@@ -28,7 +28,6 @@ class Router {
     )}`;
     this.resetNextScroll = true;
     this.shouldViewTransition = void 0;
-    this.navigateTimeout = null;
     this.latestLoadPromise = Promise.resolve();
     this.subscribers = /* @__PURE__ */ new Set();
     this.injectedHtml = [];
@@ -396,20 +395,20 @@ class Router {
     };
     this.buildLocation = (opts) => {
       const build = (dest = {}, matches) => {
-        var _a, _b, _c, _d;
-        const fromPath = dest.from || this.latestLocation.pathname;
-        let fromSearch = ((_a = dest._fromLocation) == null ? void 0 : _a.search) || this.latestLocation.search;
-        const fromMatches = this.matchRoutes(fromPath, fromSearch);
+        var _a, _b, _c;
+        let fromPath = this.latestLocation.pathname;
+        let fromSearch = dest.fromSearch || this.latestLocation.search;
+        const fromMatches = this.matchRoutes(
+          this.latestLocation.pathname,
+          fromSearch
+        );
+        fromPath = ((_a = fromMatches.find((d) => d.id === dest.from)) == null ? void 0 : _a.pathname) || fromPath;
         fromSearch = ((_b = last(fromMatches)) == null ? void 0 : _b.search) || this.latestLocation.search;
         const stayingMatches = matches == null ? void 0 : matches.filter(
           (d) => fromMatches.find((e) => e.routeId === d.routeId)
         );
-        const fromRoute = this.looseRoutesById[(_c = last(fromMatches)) == null ? void 0 : _c.routeId];
-        let pathname = dest.to ? this.resolvePathWithBase(
-          dest.from ?? this.latestLocation.pathname,
-          `${dest.to}`
-        ) : this.resolvePathWithBase(fromRoute == null ? void 0 : fromRoute.fullPath, fromRoute == null ? void 0 : fromRoute.fullPath);
-        const prevParams = { ...(_d = last(fromMatches)) == null ? void 0 : _d.params };
+        let pathname = dest.to ? this.resolvePathWithBase(fromPath, `${dest.to}`) : this.resolvePathWithBase(fromPath, fromPath);
+        const prevParams = { ...(_c = last(fromMatches)) == null ? void 0 : _c.params };
         let nextParams = (dest.params ?? true) === true ? prevParams : { ...prevParams, ...functionalUpdate(dest.params, prevParams) };
         if (Object.keys(nextParams).length > 0) {
           matches == null ? void 0 : matches.map((d) => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach((fn) => {
@@ -503,8 +502,6 @@ class Router {
       viewTransition,
       ...next
     }) => {
-      if (this.navigateTimeout)
-        clearTimeout(this.navigateTimeout);
       const isSameUrl = this.latestLocation.href === next.href;
       if (!isSameUrl) {
         let { maskedLocation, ...nextHistory } = next;
@@ -618,14 +615,10 @@ class Router {
                     err.routeId = match.routeId;
                   }
                   if (isRedirect(err)) {
-                    const redirect = this.resolveRedirect(err);
-                    if (!preload && !this.isServer) {
-                      this.navigate({ ...redirect, replace: true });
-                    }
-                    throw redirect;
+                    err = this.resolveRedirect(err);
+                    throw err;
                   } else if (isNotFound(err)) {
-                    if (!preload)
-                      this.handleNotFound(matches, err);
+                    this.handleNotFound(matches, err);
                     throw err;
                   }
                 }
@@ -634,6 +627,20 @@ class Router {
                 const parentMatch = matches[index - 1];
                 const route = this.looseRoutesById[match.routeId];
                 const abortController = new AbortController();
+                let loadPromise = match.loadPromise;
+                if (match.isFetching) {
+                  continue;
+                }
+                const previousResolve = loadPromise.resolve;
+                loadPromise = createControlledPromise(
+                  // Resolve the old when we we resolve the new one
+                  previousResolve
+                );
+                matches[index] = match = updateMatch(match.id, (prev) => ({
+                  ...prev,
+                  isFetching: "beforeLoad",
+                  loadPromise
+                }));
                 const handleSerialError = (err, routerCode) => {
                   var _a2, _b2;
                   err.routerCode = routerCode;
@@ -685,6 +692,8 @@ class Router {
                     buildLocation: this.buildLocation,
                     cause: preload ? "preload" : match.cause
                   })) ?? {};
+                  if (latestPromise = checkLatest())
+                    return latestPromise;
                   if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
                     handleSerialError(beforeLoadContext, "BEFORE_LOAD");
                   }
@@ -708,6 +717,8 @@ class Router {
                   updateMatch(match.id, () => match);
                 }
               }
+              if (latestPromise = checkLatest())
+                return latestPromise;
               const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
               const matchPromises = [];
               await Promise.all(
@@ -732,7 +743,6 @@ class Router {
                     let lazyPromise = Promise.resolve();
                     let componentsPromise = Promise.resolve();
                     let loaderPromise = existing.loaderPromise;
-                    let loadPromise = existing.loadPromise;
                     const potentialPendingMinPromise = async () => {
                       const latestMatch = getRouteMatch(this.state, match.id);
                       if (latestMatch == null ? void 0 : latestMatch.minPendingPromise) {
@@ -746,12 +756,15 @@ class Router {
                       }
                     };
                     try {
-                      if (!match.isFetching) {
-                        matches[index] = match = {
-                          ...match,
-                          isFetching: true,
-                          fetchCount: match.fetchCount + 1
-                        };
+                      if (match.isFetching === "beforeLoad") {
+                        matches[index] = match = updateMatch(
+                          match.id,
+                          (prev) => ({
+                            ...prev,
+                            isFetching: "loader",
+                            fetchCount: match.fetchCount + 1
+                          })
+                        );
                         lazyPromise = ((_a2 = route.lazyFn) == null ? void 0 : _a2.call(route).then((lazyRoute) => {
                           Object.assign(route.options, lazyRoute.options);
                         })) || Promise.resolve();
@@ -769,17 +782,14 @@ class Router {
                         if (latestPromise = checkLatest())
                           return await latestPromise;
                         loaderPromise = (_c = (_b2 = route.options).loader) == null ? void 0 : _c.call(_b2, loaderContext);
-                        const previousResolve = loadPromise.resolve;
-                        loadPromise = createControlledPromise(
-                          // Resolve the old when we we resolve the new one
-                          previousResolve
+                        matches[index] = match = updateMatch(
+                          match.id,
+                          (prev) => ({
+                            ...prev,
+                            loaderPromise
+                          })
                         );
                       }
-                      matches[index] = match = updateMatch(match.id, (prev) => ({
-                        ...prev,
-                        loaderPromise,
-                        loadPromise
-                      }));
                       const loaderData = await loaderPromise;
                       if (latestPromise = checkLatest())
                         return await latestPromise;
@@ -830,7 +840,7 @@ class Router {
                     await componentsPromise;
                     if (latestPromise = checkLatest())
                       return await latestPromise;
-                    loadPromise.resolve();
+                    match.loadPromise.resolve();
                   };
                   const age = Date.now() - match.updatedAt;
                   const staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
@@ -930,21 +940,28 @@ class Router {
           });
           let redirect;
           let notFound;
-          try {
-            const loadMatchesPromise = this.loadMatches({
-              matches: pendingMatches,
-              location: next,
-              checkLatest: () => this.checkLatest(promise)
-            });
-            if (previousMatches.length || this.isServer) {
-              await loadMatchesPromise;
-            }
-          } catch (err) {
-            if (isRedirect(err)) {
-              redirect = err;
-            } else if (isNotFound(err)) {
-              notFound = err;
+          const loadMatches = () => this.loadMatches({
+            matches: pendingMatches,
+            location: next,
+            checkLatest: () => this.checkLatest(promise)
+          });
+          if (previousMatches.length || this.isServer) {
+            try {
+              await loadMatches();
+            } catch (err) {
+              if (isRedirect(err)) {
+                redirect = err;
+              } else if (isNotFound(err)) {
+                notFound = err;
+              }
             }
+          } else {
+            loadMatches().catch((err) => {
+              if (isRedirect(err)) {
+                this.navigate({ ...err, replace: true });
+              }
+              this.load();
+            });
           }
           if (latestPromise = this.checkLatest(promise)) {
             return latestPromise;
@@ -1061,7 +1078,7 @@ class Router {
       } catch (err) {
         if (isRedirect(err)) {
           return await this.preloadRoute({
-            _fromDest: next,
+            fromSearch: next.search,
             from: next.pathname,
             ...err
           });