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

package/build/esm/index.js

@@ -637,7 +637,6 @@ function Matches() {
     matches: matches
   }) : null));
 }
-const defaultPending = () => null;
 function SafeFragment(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
 }
@@ -652,9 +651,9 @@ function Match({
   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.Suspense : SafeFragment;
+  const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? PendingComponent ? React.Suspense : SafeFragment;
   const errorComponent = routeErrorComponent ? React.useCallback(props => {
     return /*#__PURE__*/React.createElement(routeErrorComponent, {
       ...props,
@@ -664,6 +663,7 @@ function Match({
       useParams: route.useParams
     });
   }, [route]) : undefined;
+  const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
   return /*#__PURE__*/React.createElement(matchesContext.Provider, {
     value: matches
   }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
@@ -673,7 +673,7 @@ function Match({
       useSearch: route.useSearch,
       useParams: route.useParams
     })
-  }, errorComponent ? /*#__PURE__*/React.createElement(CatchBoundary, {
+  }, /*#__PURE__*/React.createElement(ResolvedCatchBoundary, {
     resetKey: locationKey,
     errorComponent: errorComponent,
     onCatch: () => {
@@ -681,8 +681,6 @@ function Match({
     }
   }, /*#__PURE__*/React.createElement(MatchInner, {
     match: match
-  })) : /*#__PURE__*/React.createElement(SafeFragment, null, /*#__PURE__*/React.createElement(MatchInner, {
-    match: match
   }))));
 }
 function MatchInner({
@@ -693,6 +691,9 @@ function MatchInner({
     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;
   }
@@ -786,31 +787,6 @@ function useLoaderData(opts) {
   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.createContext(null);
 if (typeof document !== 'undefined') {
   window.__TSR_ROUTER_CONTEXT__ = routerContext;
@@ -879,7 +855,7 @@ function RouterProvider({
     return () => {
       unsub();
     };
-  }, [history]);
+  }, [router.history]);
   React.useLayoutEffect(() => {
     if (!isTransitioning && state.resolvedLocation !== state.location) {
       router.emit({
@@ -1484,38 +1460,66 @@ class Router {
       }
       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(),
@@ -1523,46 +1527,13 @@ class Router {
         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;
   };
@@ -1756,7 +1727,8 @@ class Router {
   loadMatches = async ({
     checkLatest,
     matches,
-    preload
+    preload,
+    invalidate
   }) => {
     let latestPromise;
     let firstBadMatchIndex;
@@ -1872,7 +1844,7 @@ class Router {
           // 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') {
@@ -1955,7 +1927,10 @@ class Router {
     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;
@@ -1990,7 +1965,8 @@ class Router {
           // 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