@tanstack/react-router 1.8.4 → 1.10.0

package/src/router.ts

@@ -176,7 +176,7 @@ export interface DehydratedRouterState {
 
 export type DehydratedRouteMatch = Pick<
   RouteMatch,
-  'id' | 'status' | 'updatedAt'
+  'id' | 'status' | 'updatedAt' | 'loaderData'
 >
 
 export interface DehydratedRouter {
@@ -224,6 +224,19 @@ export type RouterListener<TRouterEvent extends RouterEvent> = {
   fn: ListenerFn<TRouterEvent>
 }
 
+export function createRouter<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+  TSerializedError extends Record<string, any> = Record<string, any>,
+>(
+  options: RouterConstructorOptions<TRouteTree, TDehydrated, TSerializedError>,
+) {
+  return new Router<TRouteTree, TDehydrated, TSerializedError>(options)
+}
+
+/**
+ * @deprecated Use the `createRouter` function instead
+ */
 export class Router<
   TRouteTree extends AnyRoute = AnyRoute,
   TDehydrated extends Record<string, any> = Record<string, any>,
@@ -691,6 +704,7 @@ export class Router<
       // Create a fresh route match
       const hasLoaders = !!(
         route.options.loader ||
+        route.options.lazy ||
         componentTypes.some((d) => (route.options[d] as any)?.preload)
       )
 
@@ -1142,6 +1156,9 @@ export class Router<
             ...beforeLoadContext,
           }
 
+          const links = route.options.links?.()
+          const scripts = route.options.scripts?.()
+
           matches[index] = match = {
             ...match,
             routeContext: replaceEqualDeep(
@@ -1151,6 +1168,8 @@ export class Router<
             context: replaceEqualDeep(match.context, context),
             abortController,
             pendingPromise,
+            links,
+            scripts,
           }
         } catch (err) {
           handleErrorAndRedirect(err, 'BEFORE_LOAD')
@@ -1234,21 +1253,33 @@ export class Router<
                 fetchCount: match.fetchCount + 1,
               }
 
-              const componentsPromise = Promise.all(
-                componentTypes.map(async (type) => {
-                  const component = route.options[type]
-
-                  if ((component as any)?.preload) {
-                    await (component as any).preload()
-                  }
-                }),
+              const lazyPromise =
+                route.options.lazy?.().then((lazyRoute) => {
+                  Object.assign(route.options, lazyRoute.options)
+                }) || Promise.resolve()
+
+              // If for some reason lazy resolves more lazy components...
+              // We'll wait for that before pre attempt to preload any
+              // components themselves.
+              const componentsPromise = lazyPromise.then(() =>
+                Promise.all(
+                  componentTypes.map(async (type) => {
+                    const component = route.options[type]
+
+                    if ((component as any)?.preload) {
+                      await (component as any).preload()
+                    }
+                  }),
+                ),
               )
 
+              // Kick off the loader!
               const loaderPromise = route.options.loader?.(loaderContext)
 
               loadPromise = Promise.all([
                 componentsPromise,
                 loaderPromise,
+                lazyPromise,
               ]).then((d) => d[1])
             }
 
@@ -1273,6 +1304,10 @@ export class Router<
 
               if ((latestPromise = checkLatest())) return await latestPromise
 
+              const meta = route.options.meta?.({
+                loaderData,
+              })
+
               matches[index] = match = {
                 ...match,
                 error: undefined,
@@ -1281,6 +1316,7 @@ export class Router<
                 updatedAt: Date.now(),
                 loaderData,
                 loadPromise: undefined,
+                meta,
               }
             } catch (error) {
               if ((latestPromise = checkLatest())) return await latestPromise
@@ -1704,9 +1740,16 @@ export class Router<
       )
 
       if (dehydratedMatch) {
+        const route = this.looseRoutesById[match.routeId]!
+
         return {
           ...match,
           ...dehydratedMatch,
+          meta: route.options.meta?.({
+            loaderData: dehydratedMatch.loaderData,
+          }),
+          links: route.options.links?.(),
+          scripts: route.options.scripts?.(),
         }
       }
       return match
@@ -1716,6 +1759,7 @@ export class Router<
       return {
         ...s,
         matches: matches as any,
+        lastUpdated: Date.now(),
       }
     })
   }
@@ -1758,7 +1802,7 @@ export function getInitialRouterState(
     matches: [],
     pendingMatches: [],
     cachedMatches: [],
-    lastUpdated: Date.now(),
+    lastUpdated: 0,
   }
 }
 

package/src/useParams.tsx

@@ -1,7 +1,7 @@
 import { AnyRoute } from './route'
-import { RouteIds, RouteById } from './routeInfo'
+import { RouteIds, RouteById, AllParams } from './routeInfo'
 import { RegisteredRouter } from './router'
-import { last } from './utils'
+import { Expand, last } from './utils'
 import { useRouterState } from './useRouterState'
 import { StrictOrFrom } from './utils'
 import { getRenderedMatches } from './Matches'
@@ -9,10 +9,13 @@ import { getRenderedMatches } from './Matches'
 export function useParams<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TParams = RouteById<TRouteTree, TFrom>['types']['allParams'],
+  TReturnIntersection extends boolean = false,
+  TParams = TReturnIntersection extends false
+    ? RouteById<TRouteTree, TFrom>['types']['allParams']
+    : Expand<Partial<AllParams<TRouteTree>>>,
   TSelected = TParams,
 >(
-  opts: StrictOrFrom<TFrom> & {
+  opts: StrictOrFrom<TFrom, TReturnIntersection> & {
     select?: (params: TParams) => TSelected
   },
 ): TSelected {

package/src/useSearch.tsx

@@ -1,20 +1,25 @@
 import { AnyRoute, RootSearchSchema } from './route'
-import { RouteIds, RouteById } from './routeInfo'
+import { RouteIds, RouteById, FullSearchSchema } from './routeInfo'
 import { RegisteredRouter } from './router'
 import { RouteMatch } from './Matches'
 import { useMatch } from './Matches'
-import { StrictOrFrom } from './utils'
+import { Expand, StrictOrFrom } from './utils'
 
 export function useSearch<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TSearch = Exclude<
-    RouteById<TRouteTree, TFrom>['types']['fullSearchSchema'],
-    RootSearchSchema
-  >,
+  TReturnIntersection extends boolean = false,
+  TSearch = TReturnIntersection extends false
+    ? Exclude<
+        RouteById<TRouteTree, TFrom>['types']['fullSearchSchema'],
+        RootSearchSchema
+      >
+    : Expand<
+        Partial<Omit<FullSearchSchema<TRouteTree>, keyof RootSearchSchema>>
+      >,
   TSelected = TSearch,
 >(
-  opts: StrictOrFrom<TFrom> & {
+  opts: StrictOrFrom<TFrom, TReturnIntersection> & {
     select?: (search: TSearch) => TSelected
   },
 ): TSelected {

package/src/utils.ts

@@ -300,7 +300,7 @@ export type StringLiteral<T> = T extends string
     : T
   : never
 
-export type StrictOrFrom<TFrom> =
+export type StrictOrFrom<TFrom, TReturnIntersection extends boolean = false> =
   | {
       from: StringLiteral<TFrom> | TFrom
       strict?: true
@@ -308,6 +308,7 @@ export type StrictOrFrom<TFrom> =
   | {
       from?: never
       strict: false
+      experimental_returnIntersection?: TReturnIntersection
     }
 
 export const useLayoutEffect =