@tanstack/react-router 0.0.1-beta.226 → 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/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

@@ -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/umd/index.development.js

@@ -169,7 +169,6 @@
    * @returns A history instance
    */
   function createBrowserHistory(opts) {
-    console.log('hello');
     const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.search}${window.location.hash}`);
     const createHref = opts?.createHref ?? (path => path);
     let currentLocation = parseLocation(getHref(), window.history.state);
@@ -964,7 +963,6 @@
       matches: matches
     }) : null));
   }
-  const defaultPending = () => null;
   function SafeFragment(props) {
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
   }
@@ -979,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,
@@ -991,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, {
@@ -1000,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: () => {
@@ -1008,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({
@@ -1020,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;
     }
@@ -1113,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;
@@ -1811,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(),
@@ -1850,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;
     };