@tanstack/react-router 0.0.1-beta.276 → 0.0.1-beta.278

package/build/types/Matches.d.ts

@@ -55,6 +55,9 @@ export declare function useMatches<T = RouteMatch[]>(opts?: {
 export declare function useParentMatches<T = RouteMatch[]>(opts?: {
     select?: (matches: RouteMatch[]) => T;
 }): T;
+export declare function useLoaderDeps<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>, TStrict extends boolean = true, TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<TRouteTree, TFrom>, TSelected = Required<TRouteMatch>['loaderDeps']>(opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatch) => TSelected;
+}): TStrict extends true ? TSelected : TSelected | undefined;
 export declare function useLoaderData<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>, TStrict extends boolean = true, TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<TRouteTree, TFrom>, TSelected = Required<TRouteMatch>['loaderData']>(opts: StrictOrFrom<TFrom> & {
     select?: (match: TRouteMatch) => TSelected;
 }): TStrict extends true ? TSelected : TSelected | undefined;

package/build/types/route.d.ts

@@ -134,25 +134,28 @@ export type RouteConstraints = {
     TChildren: unknown;
     TRouteTree: AnyRoute;
 };
-export declare class RouteApi<TId extends RouteIds<RegisteredRouter['routeTree']>, TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>, TFullSearchSchema extends Record<string, any> = TRoute['types']['fullSearchSchema'], TAllParams extends AnyPathParams = TRoute['types']['allParams'], TAllContext extends Record<string, any> = TRoute['types']['allContext'], TLoaderData extends any = TRoute['types']['loaderData']> {
+export declare class RouteApi<TId extends RouteIds<RegisteredRouter['routeTree']>, TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>, TFullSearchSchema extends Record<string, any> = TRoute['types']['fullSearchSchema'], TAllParams extends AnyPathParams = TRoute['types']['allParams'], TAllContext extends Record<string, any> = TRoute['types']['allContext'], TLoaderDeps extends Record<string, any> = TRoute['types']['loaderDeps'], TLoaderData extends any = TRoute['types']['loaderData']> {
     id: TId;
     constructor({ id }: {
         id: TId;
     });
     useMatch: <TSelected = TAllContext>(opts?: {
-        select?: ((search: TAllContext) => TSelected) | undefined;
+        select?: ((s: TAllContext) => TSelected) | undefined;
     } | undefined) => TSelected;
     useRouteContext: <TSelected = TAllContext>(opts?: {
-        select?: ((search: TAllContext) => TSelected) | undefined;
+        select?: ((s: TAllContext) => TSelected) | undefined;
     } | undefined) => TSelected;
     useSearch: <TSelected = TFullSearchSchema>(opts?: {
-        select?: ((search: TFullSearchSchema) => TSelected) | undefined;
+        select?: ((s: TFullSearchSchema) => TSelected) | undefined;
     } | undefined) => TSelected;
     useParams: <TSelected = TAllParams>(opts?: {
-        select?: ((search: TAllParams) => TSelected) | undefined;
+        select?: ((s: TAllParams) => TSelected) | undefined;
+    } | undefined) => TSelected;
+    useLoaderDeps: <TSelected = TLoaderDeps>(opts?: {
+        select?: ((s: TLoaderDeps) => TSelected) | undefined;
     } | undefined) => TSelected;
     useLoaderData: <TSelected = TLoaderData>(opts?: {
-        select?: ((search: TLoaderData) => TSelected) | undefined;
+        select?: ((s: TLoaderData) => TSelected) | undefined;
     } | undefined) => TSelected;
 }
 export declare class Route<TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute, TPath extends RouteConstraints['TPath'] = '/', TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<TParentRoute, TPath>, TCustomId extends RouteConstraints['TCustomId'] = string, TId extends RouteConstraints['TId'] = ResolveId<TParentRoute, TCustomId, TPath>, TSearchSchema extends RouteConstraints['TSearchSchema'] = {}, TFullSearchSchema extends RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<TParentRoute, TSearchSchema>, TParams extends RouteConstraints['TParams'] = Expand<Record<ParsePathParams<TPath>, string>>, TAllParams extends RouteConstraints['TAllParams'] = ResolveAllParams<TParentRoute, TParams>, TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext, TAllContext extends Expand<Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>> = Expand<Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>>, TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext, TLoaderDeps extends Record<string, any> = {}, TLoaderData extends any = unknown, TChildren extends RouteConstraints['TChildren'] = unknown, TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute> {
@@ -205,6 +208,9 @@ export declare class Route<TParentRoute extends RouteConstraints['TParentRoute']
     useParams: <TSelected = TAllParams>(opts?: {
         select?: ((search: TAllParams) => TSelected) | undefined;
     } | undefined) => TSelected;
+    useLoaderDeps: <TSelected = TLoaderDeps>(opts?: {
+        select?: ((s: TLoaderDeps) => TSelected) | undefined;
+    } | undefined) => TSelected;
     useLoaderData: <TSelected = TLoaderData>(opts?: {
         select?: ((search: TLoaderData) => TSelected) | undefined;
     } | undefined) => TSelected;

package/build/umd/index.development.js

@@ -942,13 +942,14 @@
     invariant(routeId, `Could not find routeId for matchId "${matchId}". Please file an issue!`);
     const route = router.routesById[routeId];
     const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
+    const pendingElement = PendingComponent ? /*#__PURE__*/React__namespace.createElement(PendingComponent, null) : null;
     const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
     const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? PendingComponent ?? route.options.component?.preload ?? route.options.pendingComponent?.preload ?? route.options.errorComponent?.preload ? React__namespace.Suspense : SafeFragment;
     const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
     return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
       value: matchId
     }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
-      fallback: PendingComponent
+      fallback: pendingElement
     }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
       getResetKey: () => router.state.resolvedLocation.state?.key,
       errorComponent: routeErrorComponent,
@@ -957,7 +958,7 @@
       }
     }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
       matchId: matchId,
-      pendingElement: PendingComponent
+      pendingElement: pendingElement
     }))));
   }
   function MatchInner({
@@ -977,7 +978,7 @@
     }
     if (match.status === 'pending') {
       if (match.showPending) {
-        return pendingElement || null;
+        return pendingElement;
       }
       throw match.loadPromise;
     }
@@ -1007,6 +1008,9 @@
     });
   });
   function useMatchRoute() {
+    useRouterState({
+      select: s => [s.location, s.resolvedLocation]
+    });
     const {
       matchRoute
     } = useRouter();
@@ -1071,6 +1075,14 @@
       }
     });
   }
+  function useLoaderDeps(opts) {
+    return useMatch({
+      ...opts,
+      select: s => {
+        return typeof opts.select === 'function' ? opts.select(s?.loaderDeps) : s?.loaderDeps;
+      }
+    });
+  }
   function useLoaderData(opts) {
     return useMatch({
       ...opts,
@@ -1497,6 +1509,12 @@
         from: this.id
       });
     };
+    useLoaderDeps = opts => {
+      return useLoaderDeps({
+        ...opts,
+        from: this.id
+      });
+    };
     useLoaderData = opts => {
       return useLoaderData({
         ...opts,
@@ -1583,6 +1601,12 @@
         from: this.id
       });
     };
+    useLoaderDeps = opts => {
+      return useLoaderDeps({
+        ...opts,
+        from: this.id
+      });
+    };
     useLoaderData = opts => {
       return useLoaderData({
         ...opts,
@@ -2518,9 +2542,9 @@
       let latestPromise;
       let firstBadMatchIndex;
       const updateMatch = match => {
-        const isPreload = this.state.preloadMatches.find(d => d.id === match.id);
+        // const isPreload = this.state.preloadMatches.find((d) => d.id === match.id)
         const isPending = this.state.pendingMatches?.find(d => d.id === match.id);
-        const matchesKey = isPreload ? 'preloadMatches' : isPending ? 'pendingMatches' : 'matches';
+        const matchesKey = preload ? 'preloadMatches' : isPending ? 'pendingMatches' : 'matches';
         this.__store.setState(s => ({
           ...s,
           [matchesKey]: s[matchesKey]?.map(d => d.id === match.id ? match : d)
@@ -3328,6 +3352,7 @@
   exports.useLayoutEffect = useLayoutEffect$1;
   exports.useLinkProps = useLinkProps;
   exports.useLoaderData = useLoaderData;
+  exports.useLoaderDeps = useLoaderDeps;
   exports.useMatch = useMatch;
   exports.useMatchRoute = useMatchRoute;
   exports.useMatches = useMatches;