@tanstack/react-router 0.0.1-beta.225 → 0.0.1-beta.227

package/build/types/Matches.d.ts

@@ -20,7 +20,6 @@ export interface RouteMatch<TRouteTree extends AnyRoute = AnyRoute, TRouteId ext
     loaderData?: RouteById<TRouteTree, TRouteId>['types']['loaderData'];
     __resolveLoadPromise?: () => void;
     context: RouteById<TRouteTree, TRouteId>['types']['allContext'];
-    routeSearch: RouteById<TRouteTree, TRouteId>['types']['searchSchema'];
     search: FullSearchSchema<TRouteTree> & RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'];
     fetchedAt: number;
     shouldReloadDeps: any;

package/build/types/RouterProvider.d.ts

@@ -3,7 +3,7 @@ import { LinkInfo, LinkOptions, NavigateOptions, ResolveRelativePath, ToOptions
 import { ParsedLocation } from './location';
 import { AnyRoute } from './route';
 import { RouteById, RoutePaths } from './routeInfo';
-import { BuildNextOptions, DehydratedRouteMatch, RegisteredRouter, Router, RouterOptions, RouterState } from './router';
+import { BuildNextOptions, RegisteredRouter, Router, RouterOptions, RouterState } from './router';
 import { NoInfer } from './utils';
 import { MatchRouteOptions } from './Matches';
 import { RouteMatch } from './Matches';
@@ -21,11 +21,6 @@ export interface MatchLocation {
 export type BuildLinkFn<TRouteTree extends AnyRoute> = <TFrom extends RoutePaths<TRouteTree> = '/', TTo extends string = ''>(dest: LinkOptions<TRouteTree, TFrom, TTo>) => LinkInfo;
 export type NavigateFn<TRouteTree extends AnyRoute> = <TFrom extends RoutePaths<TRouteTree> = '/', TTo extends string = '', TMaskFrom extends RoutePaths<TRouteTree> = TFrom, TMaskTo extends string = ''>(opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>;
 export type MatchRouteFn<TRouteTree extends AnyRoute> = <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'];
-export type LoadFn = (opts?: {
-    next?: ParsedLocation;
-    throwOnError?: boolean;
-    __dehydratedMatches?: DehydratedRouteMatch[];
-}) => Promise<void>;
 export type BuildLocationFn<TRouteTree extends AnyRoute> = (opts: BuildNextOptions) => ParsedLocation;
 export type InjectedHtmlEntry = string | (() => Promise<string> | string);
 export declare const routerContext: React.Context<Router<any, Record<string, any>>>;

package/build/types/fileRoute.d.ts

@@ -1,5 +1,5 @@
 import { ParsePathParams } from './link';
-import { AnyRoute, ResolveFullPath, ResolveFullSearchSchema, MergeFromFromParent, RouteContext, AnyContext, RouteOptions, UpdatableRouteOptions, Route, AnyPathParams, RootRouteId, TrimPathLeft, RouteConstraints } from './route';
+import { AnyRoute, ResolveFullPath, ResolveFullSearchSchema, MergeFromFromParent, RouteContext, AnyContext, RouteOptions, UpdatableRouteOptions, Route, RootRouteId, TrimPathLeft, RouteConstraints } from './route';
 import { Assign, Expand, IsAny } from './utils';
 export interface FileRoutesByPath {
 }
@@ -13,7 +13,7 @@ export type FileRoutePath<TParentRoute extends AnyRoute, TFilePath extends strin
 export declare class FileRoute<TFilePath extends keyof FileRoutesByPath, TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'], TId extends RouteConstraints['TId'] = TFilePath, TPath extends RouteConstraints['TPath'] = FileRoutePath<TParentRoute, TFilePath>, TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<TParentRoute, RemoveUnderScores<TPath>>> {
     path: TFilePath;
     constructor(path: TFilePath);
-    createRoute: <TSearchSchema extends import("./route").AnySearchSchema = {}, TFullSearchSchema extends import("./route").AnySearchSchema = ResolveFullSearchSchema<TParentRoute, TSearchSchema>, TParams extends Record<string, any> = ParsePathParams<TPath> extends never ? AnyPathParams : Record<ParsePathParams<TPath>, string>, TAllParams extends Record<string, any> = MergeFromFromParent<TParentRoute["types"]["allParams"], TParams>, TRouteContext extends RouteContext = RouteContext, TContext extends Expand<Assign<IsAny<TParentRoute["types"]["allContext"], {}>, TRouteContext>> = Expand<Assign<IsAny<TParentRoute["types"]["allContext"], {}>, TRouteContext>>, TRouterContext extends AnyContext = AnyContext, TLoaderData extends unknown = unknown, TChildren extends unknown = unknown, TRouteTree extends AnyRoute = AnyRoute>(options?: (Omit<RouteOptions<TParentRoute, string, string, TSearchSchema, TFullSearchSchema, TParams, TAllParams, TRouteContext, TContext, TLoaderData>, "path" | "id" | "getParentRoute"> & {
+    createRoute: <TSearchSchema extends import("./route").AnySearchSchema = {}, TFullSearchSchema extends import("./route").AnySearchSchema = ResolveFullSearchSchema<TParentRoute, TSearchSchema>, TParams extends Record<string, any> = Expand<Record<ParsePathParams<TPath>, string>>, TAllParams extends Record<string, any> = MergeFromFromParent<TParentRoute["types"]["allParams"], TParams>, TRouteContext extends RouteContext = RouteContext, TContext extends Expand<Assign<IsAny<TParentRoute["types"]["allContext"], {}>, TRouteContext>> = Expand<Assign<IsAny<TParentRoute["types"]["allContext"], {}>, TRouteContext>>, TRouterContext extends AnyContext = AnyContext, TLoaderData extends unknown = unknown, TChildren extends unknown = unknown, TRouteTree extends AnyRoute = AnyRoute>(options?: (Omit<RouteOptions<TParentRoute, string, TPath, TSearchSchema, TFullSearchSchema, TParams, TAllParams, TRouteContext, TContext, TLoaderData>, "path" | "id" | "getParentRoute"> & {
         meta?: import("./route").RouteMeta | undefined;
     } & {
         caseSensitive?: boolean | undefined;

package/build/types/route.d.ts

@@ -29,7 +29,7 @@ export type MetaOptions = keyof PickRequired<RouteMeta> extends never ? {
 } : {
     meta: RouteMeta;
 };
-export type RouteOptions<TParentRoute extends AnyRoute = AnyRoute, TCustomId extends string = string, TPath extends string = string, TSearchSchema extends Record<string, any> = {}, TFullSearchSchema extends Record<string, any> = TSearchSchema, TParams extends AnyPathParams = AnyPathParams, TAllParams extends AnyPathParams = TParams, TRouteContext extends RouteContext = RouteContext, TAllContext extends Record<string, any> = AnyContext, TLoaderData extends any = unknown> = BaseRouteOptions<TParentRoute, TCustomId, TPath, TSearchSchema, TFullSearchSchema, TParams, TAllParams, TRouteContext, TAllContext, TLoaderData> & NoInfer<UpdatableRouteOptions<TFullSearchSchema, TAllParams, TAllContext, TLoaderData>>;
+export type RouteOptions<TParentRoute extends AnyRoute = AnyRoute, TCustomId extends string = string, TPath extends string = string, TSearchSchema extends Record<string, any> = {}, TFullSearchSchema extends Record<string, any> = TSearchSchema, TParams extends AnyPathParams = AnyPathParams, TAllParams extends AnyPathParams = TParams, TRouteContext extends RouteContext = RouteContext, TAllContext extends Record<string, any> = AnyContext, TLoaderData extends any = unknown> = BaseRouteOptions<TParentRoute, TCustomId, TPath, TSearchSchema, TFullSearchSchema, TParams, TAllParams, TRouteContext, TAllContext, TLoaderData> & UpdatableRouteOptions<NoInfer<TFullSearchSchema>, NoInfer<TAllParams>, NoInfer<TAllContext>, NoInfer<TLoaderData>>;
 export type ParamsFallback<TPath extends string, TParams> = unknown extends TParams ? Record<ParsePathParams<TPath>, string> : TParams;
 export type BaseRouteOptions<TParentRoute extends AnyRoute = AnyRoute, TCustomId extends string = string, TPath extends string = string, TSearchSchema extends Record<string, any> = {}, TFullSearchSchema extends Record<string, any> = TSearchSchema, TParams extends AnyPathParams = {}, TAllParams = ParamsFallback<TPath, TParams>, TRouteContext extends RouteContext = RouteContext, TAllContext extends Record<string, any> = AnyContext, TLoaderData extends any = unknown> = RoutePathOptions<TCustomId, TPath> & {
     getParentRoute: () => TParentRoute;
@@ -40,7 +40,11 @@ export type BaseRouteOptions<TParentRoute extends AnyRoute = AnyRoute, TCustomId
 } : {
     beforeLoad: BeforeLoadFn<TFullSearchSchema, TParentRoute, TAllParams, TRouteContext>;
 }) & {
-    loader?: RouteLoadFn<TAllParams, TFullSearchSchema, NoInfer<TAllContext>, NoInfer<TRouteContext>, TLoaderData>;
+    key?: (opts: {
+        search: TFullSearchSchema;
+        location: ParsedLocation;
+    }) => any;
+    loader?: RouteLoaderFn<TAllParams, TFullSearchSchema, NoInfer<TAllContext>, NoInfer<TRouteContext>, TLoaderData>;
 } & ({
     parseParams?: (rawParams: IsAny<TPath, any, Record<ParsePathParams<TPath>, string>>) => TParams extends Record<ParsePathParams<TPath>, any> ? TParams : 'parseParams must return an object';
     stringifyParams?: (params: NoInfer<ParamsFallback<TPath, TParams>>) => Record<ParsePathParams<TPath>, string>;
@@ -87,7 +91,7 @@ export type DefinedPathParamWarning = 'Path params cannot be redefined by child
 export type ParentParams<TParentParams> = AnyPathParams extends TParentParams ? {} : {
     [Key in keyof TParentParams]?: DefinedPathParamWarning;
 };
-export type RouteLoadFn<TAllParams = {}, TFullSearchSchema extends Record<string, any> = {}, TAllContext extends Record<string, any> = AnyContext, TRouteContext extends Record<string, any> = AnyContext, TLoaderData extends any = unknown> = (match: LoaderFnContext<TAllParams, TFullSearchSchema, TAllContext, TRouteContext>) => Promise<TLoaderData> | TLoaderData;
+export type RouteLoaderFn<TAllParams = {}, TFullSearchSchema extends Record<string, any> = {}, TAllContext extends Record<string, any> = AnyContext, TRouteContext extends Record<string, any> = AnyContext, TLoaderData extends any = unknown> = (match: LoaderFnContext<TAllParams, TFullSearchSchema, TAllContext, TRouteContext>) => Promise<TLoaderData> | TLoaderData;
 export interface LoaderFnContext<TAllParams = {}, TFullSearchSchema extends Record<string, any> = {}, TAllContext extends Record<string, any> = AnyContext, TRouteContext extends Record<string, any> = AnyContext> {
     abortController: AbortController;
     preload: boolean;

package/build/types/router.d.ts

@@ -9,7 +9,7 @@ import { AnyRouteMatch, RouteMatch } from './Matches';
 import { ParsedLocation } from './location';
 import { LocationState } from './location';
 import { SearchSerializer, SearchParser } from './searchParams';
-import { BuildLinkFn, BuildLocationFn, CommitLocationOptions, InjectedHtmlEntry, LoadFn, MatchRouteFn, NavigateFn } from './RouterProvider';
+import { BuildLinkFn, BuildLocationFn, CommitLocationOptions, InjectedHtmlEntry, MatchRouteFn, NavigateFn } from './RouterProvider';
 declare global {
     interface Window {
         __TSR_DEHYDRATED__?: HydrationCtx;
@@ -152,12 +152,16 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     commitLocation: ({ startTransition, ...next }: ParsedLocation & CommitLocationOptions) => Promise<void>;
     buildAndCommitLocation: ({ replace, resetScroll, startTransition, ...rest }?: BuildNextOptions & CommitLocationOptions) => Promise<void>;
     navigate: NavigateFn<TRouteTree>;
-    loadMatches: ({ checkLatest, matches, preload, }: {
+    loadMatches: ({ checkLatest, matches, preload, invalidate, }: {
         checkLatest: () => Promise<void> | undefined;
         matches: AnyRouteMatch[];
         preload?: boolean | undefined;
+        invalidate?: boolean | undefined;
     }) => Promise<RouteMatch[]>;
-    load: LoadFn;
+    invalidate: () => Promise<void>;
+    load: (opts?: {
+        invalidate?: boolean;
+    }) => Promise<void>;
     preloadRoute: (navigateOpts?: BuildNextOptions) => Promise<readonly [RouteMatch<AnyRoute, any>, RouteMatch<AnyRoute, any>[]]>;
     buildLink: BuildLinkFn<TRouteTree>;
     matchRoute: MatchRouteFn<TRouteTree>;

package/build/umd/index.development.js

@@ -963,7 +963,6 @@
       matches: matches
     }) : null));
   }
-  const defaultPending = () => null;
   function SafeFragment(props) {
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
   }
@@ -978,9 +977,9 @@
     const routeId = match?.routeId;
     const route = routesById[routeId];
     const locationKey = useRouterState().location.state?.key;
-    const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent ?? defaultPending;
+    const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent;
     const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? ErrorComponent;
-    const ResolvedSuspenseBoundary = route.options.wrapInSuspense ? React__namespace.Suspense : SafeFragment;
+    const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? PendingComponent ? React__namespace.Suspense : SafeFragment;
     const errorComponent = routeErrorComponent ? React__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
         ...props,
@@ -990,6 +989,7 @@
         useParams: route.useParams
       });
     }, [route]) : undefined;
+    const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
     return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
       value: matches
     }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
@@ -999,7 +999,7 @@
         useSearch: route.useSearch,
         useParams: route.useParams
       })
-    }, errorComponent ? /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
       resetKey: locationKey,
       errorComponent: errorComponent,
       onCatch: () => {
@@ -1007,8 +1007,6 @@
       }
     }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
       match: match
-    })) : /*#__PURE__*/React__namespace.createElement(SafeFragment, null, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-      match: match
     }))));
   }
   function MatchInner({
@@ -1019,6 +1017,9 @@
       routesById
     } = useRouter();
     const route = routesById[match.routeId];
+    if (match.id.split('/').length === 4) {
+      console.log(match.id, pick(match, ['status', 'cause', 'isFetching']));
+    }
     if (match.status === 'error') {
       throw match.error;
     }
@@ -1112,31 +1113,6 @@
     return typeof opts.select === 'function' ? opts.select(match?.loaderData) : match?.loaderData;
   }
 
-  // export type RouterContext<
-  //   TRouteTree extends AnyRoute,
-  //   // TDehydrated extends Record<string, any>,
-  // > = {
-  //   buildLink: BuildLinkFn<TRouteTree>
-  //   state: RouterState<TRouteTree>
-  //   navigate: NavigateFn<TRouteTree>
-  //   matchRoute: MatchRouteFn<TRouteTree>
-  //   routeTree: TRouteTree
-  //   routesById: RoutesById<TRouteTree>
-  //   options: RouterOptions<TRouteTree>
-  //   history: RouterHistory
-  //   load: LoadFn
-  //   buildLocation: BuildLocationFn<TRouteTree>
-  //   subscribe: Router<TRouteTree>['subscribe']
-  //   resetNextScrollRef: React.MutableRefObject<boolean>
-  //   injectedHtmlRef: React.MutableRefObject<InjectedHtmlEntry[]>
-  //   injectHtml: (entry: InjectedHtmlEntry) => void
-  //   dehydrateData: <T>(
-  //     key: any,
-  //     getData: T | (() => Promise<T> | T),
-  //   ) => () => void
-  //   hydrateData: <T>(key: any) => T | undefined
-  // }
-
   const routerContext = /*#__PURE__*/React__namespace.createContext(null);
   if (typeof document !== 'undefined') {
     window.__TSR_ROUTER_CONTEXT__ = routerContext;
@@ -1205,7 +1181,7 @@
       return () => {
         unsub();
       };
-    }, [history]);
+    }, [router.history]);
     React__namespace.useLayoutEffect(() => {
       if (!isTransitioning && state.resolvedLocation !== state.location) {
         router.emit({
@@ -1810,38 +1786,66 @@
         }
         return;
       });
-      const matches = matchedRoutes.map((route, index) => {
+      const matches = [];
+      matchedRoutes.forEach((route, index) => {
+        // Take each matched route and resolve + validate its search params
+        // This has to happen serially because each route's search params
+        // can depend on the parent route's search params
+        // It must also happen before we create the match so that we can
+        // pass the search params to the route's potential key function
+        // which is used to uniquely identify the route match in state
+
+        const parentMatch = matches[index - 1];
+        const [preMatchSearch, searchError] = (() => {
+          // Validate the search params and stabilize them
+          const parentSearch = parentMatch?.search ?? locationSearch;
+          try {
+            const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
+            let search = validator?.(parentSearch) ?? {};
+            return [{
+              ...parentSearch,
+              ...search
+            }, undefined];
+          } catch (err) {
+            const searchError = new SearchParamError(err.message, {
+              cause: err
+            });
+            if (opts?.throwOnError) {
+              throw searchError;
+            }
+            return [parentSearch, searchError];
+          }
+        })();
         const interpolatedPath = interpolatePath(route.path, routeParams);
-        const matchId = interpolatePath(route.id, routeParams, true);
+        const matchId = interpolatePath(route.id, routeParams, true) + (route.options.key?.({
+          search: preMatchSearch,
+          location: this.state.location
+        }) ?? '');
 
         // Waste not, want not. If we already have a match for this route,
         // reuse it. This is important for layout routes, which might stick
         // around between navigation actions that only change leaf routes.
         const existingMatch = getRouteMatch(this.state, matchId);
         const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
-        if (existingMatch) {
-          return {
-            ...existingMatch,
-            cause
-          };
-        }
 
         // Create a fresh route match
         const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
-        const routeMatch = {
+        const match = existingMatch ? {
+          ...existingMatch,
+          cause
+        } : {
           id: matchId,
           routeId: route.id,
           params: routeParams,
           pathname: joinPaths([this.basepath, interpolatedPath]),
           updatedAt: Date.now(),
-          routeSearch: {},
           search: {},
+          searchError: undefined,
           status: hasLoaders ? 'pending' : 'success',
           isFetching: false,
           invalid: false,
           error: undefined,
           paramsError: parseErrors[index],
-          searchError: undefined,
           loadPromise: Promise.resolve(),
           context: undefined,
           abortController: new AbortController(),
@@ -1849,46 +1853,13 @@
           fetchedAt: 0,
           cause
         };
-        return routeMatch;
-      });
 
-      // Take each match and resolve its search params and context
-      // This has to happen after the matches are created or found
-      // so that we can use the parent match's search params and context
-      matches.forEach((match, i) => {
-        const parentMatch = matches[i - 1];
-        const route = this.looseRoutesById[match.routeId];
-        const searchInfo = (() => {
-          // Validate the search params and stabilize them
-          const parentSearchInfo = {
-            search: parentMatch?.search ?? locationSearch,
-            routeSearch: parentMatch?.routeSearch ?? locationSearch
-          };
-          try {
-            const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
-            let routeSearch = validator?.(parentSearchInfo.search) ?? {};
-            let search = {
-              ...parentSearchInfo.search,
-              ...routeSearch
-            };
-            routeSearch = replaceEqualDeep(match.routeSearch, routeSearch);
-            search = replaceEqualDeep(match.search, search);
-            return {
-              routeSearch,
-              search,
-              searchDidChange: match.routeSearch !== routeSearch
-            };
-          } catch (err) {
-            match.searchError = new SearchParamError(err.message, {
-              cause: err
-            });
-            if (opts?.throwOnError) {
-              throw match.searchError;
-            }
-            return parentSearchInfo;
-          }
-        })();
-        Object.assign(match, searchInfo);
+        // Regardless of whether we're reusing an existing match or creating
+        // a new one, we need to update the match's search params
+        match.search = replaceEqualDeep(match.search, preMatchSearch);
+        // And also update the searchError if there is one
+        match.searchError = searchError;
+        matches.push(match);
       });
       return matches;
     };
@@ -2082,7 +2053,8 @@
     loadMatches = async ({
       checkLatest,
       matches,
-      preload
+      preload,
+      invalidate
     }) => {
       let latestPromise;
       let firstBadMatchIndex;
@@ -2198,7 +2170,7 @@
             // Default to reloading the route all the time
             let shouldReload = true;
             let shouldReloadDeps = typeof route.options.shouldReload === 'function' ? route.options.shouldReload?.(loaderContext) : !!(route.options.shouldReload ?? true);
-            if (match.cause === 'enter') {
+            if (match.cause === 'enter' || invalidate) {
               match.shouldReloadDeps = shouldReloadDeps;
             } else if (match.cause === 'stay') {
               if (typeof shouldReloadDeps === 'object') {
@@ -2281,7 +2253,10 @@
       await Promise.all(matchPromises);
       return matches;
     };
-    load = async () => {
+    invalidate = () => this.load({
+      invalidate: true
+    });
+    load = async opts => {
       const promise = new Promise(async (resolve, reject) => {
         const next = this.latestLocation;
         const prevLocation = this.state.resolvedLocation;
@@ -2316,7 +2291,8 @@
             // Load the matches
             await this.loadMatches({
               matches,
-              checkLatest: () => this.checkLatest(promise)
+              checkLatest: () => this.checkLatest(promise),
+              invalidate: opts?.invalidate
             });
           } catch (err) {
             // swallow this error, since we'll display the