@tanstack/react-router 1.121.41 → 1.123.0

package/dist/llms/rules/api.js

@@ -1793,11 +1793,12 @@ Navigates to a new location.
 
 Invalidates route matches by forcing their \`beforeLoad\` and \`load\` functions to be called again.
 
-- Type: \`(opts?: {filter?: (d: MakeRouteMatchUnion<TRouter>) => boolean, sync?: boolean}) => Promise<void>\`
+- Type: \`(opts?: {filter?: (d: MakeRouteMatchUnion<TRouter>) => boolean, sync?: boolean, forcePending?: boolean }) => Promise<void>\`
 - This is useful any time your loader data might be out of date or stale. For example, if you have a route that displays a list of posts, and you have a loader function that fetches the list of posts from an API, you might want to invalidate the route matches for that route any time a new post is created so that the list of posts is always up-to-date.
 - if \`filter\` is not supplied, all matches will be invalidated
 - if \`filter\` is supplied, only matches for which \`filter\` returns \`true\` will be invalidated.
 - if \`sync\` is true, the promise returned by this function will only resolve once all loaders have finished.
+- if \`forcePending\` is true, the invalidated matches will be put into \`'pending'\` state regardless whether they are in \`'error'\` state or not.
 - You might also want to invalidate the Router if you imperatively \`reset\` the router's \`CatchBoundary\` to trigger loaders again.
 
 ### \`.clearCache\` method

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.121.41",
+  "version": "1.123.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -80,8 +80,8 @@
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
     "isbot": "^5.1.22",
-    "@tanstack/router-core": "1.121.40",
-    "@tanstack/history": "1.121.34"
+    "@tanstack/history": "1.121.34",
+    "@tanstack/router-core": "1.123.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Match.tsx

@@ -17,7 +17,11 @@ import { matchContext } from './matchContext'
 import { SafeFragment } from './SafeFragment'
 import { renderRouteNotFound } from './renderRouteNotFound'
 import { ScrollRestoration } from './scroll-restoration'
-import type { AnyRoute, ParsedLocation } from '@tanstack/router-core'
+import type {
+  AnyRoute,
+  ParsedLocation,
+  RootRouteOptions,
+} from '@tanstack/router-core'
 
 export const Match = React.memo(function MatchImpl({
   matchId,
@@ -80,8 +84,11 @@ export const Match = React.memo(function MatchImpl({
     },
   })
 
+  const ShellComponent = route.isRoot
+    ? ((route.options as RootRouteOptions).shellComponent ?? SafeFragment)
+    : SafeFragment
   return (
-    <>
+    <ShellComponent>
       <matchContext.Provider value={matchId}>
         <ResolvedSuspenseBoundary fallback={pendingElement}>
           <ResolvedCatchBoundary
@@ -119,7 +126,7 @@ export const Match = React.memo(function MatchImpl({
           <ScrollRestoration />
         </>
       ) : null}
-    </>
+    </ShellComponent>
   )
 })
 

package/src/Matches.tsx

@@ -11,7 +11,6 @@ import type {
   StructuralSharingOption,
   ValidateSelected,
 } from './structuralSharing'
-import type { ReactNode } from './route'
 import type {
   AnyRouter,
   DeepPartial,
@@ -154,7 +153,7 @@ export type MakeMatchRouteOptions<
           TRouter['routeTree'],
           ResolveRelativePath<TFrom, NoInfer<TTo>>
         >['types']['allParams'],
-      ) => ReactNode)
+      ) => React.ReactNode)
     | React.ReactNode
 }
 

package/src/index.tsx

@@ -284,7 +284,6 @@ export {
 } from './route'
 export type {
   AnyRootRoute,
-  ReactNode,
   SyncRouteComponent,
   AsyncRouteComponent,
   RouteComponent,

package/src/route.tsx

@@ -54,6 +54,14 @@ declare module '@tanstack/router-core' {
     pendingComponent?: RouteComponent
   }
 
+  export interface RootRouteOptionsExtensions {
+    shellComponent?: ({
+      children,
+    }: {
+      children: React.ReactNode
+    }) => React.ReactNode
+  }
+
   export interface RouteExtensions<
     in out TId extends string,
     in out TFullPath extends string,
@@ -534,11 +542,9 @@ export function createRouteMask<
   return opts as any
 }
 
-export type ReactNode = any
-
 export type SyncRouteComponent<TProps> =
-  | ((props: TProps) => ReactNode)
-  | React.LazyExoticComponent<(props: TProps) => ReactNode>
+  | React.FC<TProps>
+  | React.LazyExoticComponent<(props: TProps) => React.ReactNode>
 
 export type AsyncRouteComponent<TProps> = SyncRouteComponent<TProps> & {
   preload?: () => Promise<void>