@tanstack/react-router 1.83.1 → 1.84.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.83.1",
+  "version": "1.84.2",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/Matches.tsx

@@ -136,13 +136,13 @@ export type MakeRouteMatchFromRoute<TRoute extends AnyRoute> = RouteMatch<
 >
 
 export interface RouteMatch<
-  TRouteId,
-  TFullPath,
-  TAllParams,
-  TFullSearchSchema,
-  TLoaderData,
-  TAllContext,
-  TLoaderDeps,
+  out TRouteId,
+  out TFullPath,
+  out TAllParams,
+  out TFullSearchSchema,
+  out TLoaderData,
+  out TAllContext,
+  out TLoaderDeps,
 > {
   id: string
   routeId: TRouteId

package/src/RouterProvider.tsx

@@ -9,12 +9,13 @@ import type {
   RegisteredRouter,
   Router,
   RouterOptions,
+  ViewTransitionOptions,
 } from './router'
 
 export interface CommitLocationOptions {
   replace?: boolean
   resetScroll?: boolean
-  viewTransition?: boolean
+  viewTransition?: boolean | ViewTransitionOptions
   /**
    * @deprecated All navigations use React transitions under the hood now
    **/

package/src/link.tsx

@@ -28,7 +28,11 @@ import type {
   RouteToPath,
   TrailingSlashOptionByRouter,
 } from './routeInfo'
-import type { AnyRouter, RegisteredRouter } from './router'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ViewTransitionOptions,
+} from './router'
 import type {
   Constrain,
   Expand,
@@ -212,7 +216,8 @@ export interface NavigateOptionProps {
   /** @deprecated All navigations now use startTransition under the hood */
   startTransition?: boolean
   // if set to `true`, the router will wrap the resulting navigation in a document.startViewTransition() call.
-  viewTransition?: boolean
+  // if set to `ViewTransitionOptions`, the router will pass the `types` field to document.startViewTransition({update: fn, types: viewTransition.types}) call
+  viewTransition?: boolean | ViewTransitionOptions
   ignoreBlocker?: boolean
 }
 

package/src/route.ts

@@ -127,17 +127,17 @@ export type ResolveParams<TPath extends string> =
     ? Record<ParsePathParams<TPath>, string>
     : Record<ParsePathParams<TPath>, string> & SplatParams
 
-export type ParseParamsFn<TPath extends string, TParams> = (
+export type ParseParamsFn<in out TPath extends string, in out TParams> = (
   rawParams: ResolveParams<TPath>,
 ) => TParams extends Record<ParsePathParams<TPath>, any>
   ? TParams
   : Record<ParsePathParams<TPath>, any>
 
-export type StringifyParamsFn<TPath extends string, TParams> = (
+export type StringifyParamsFn<in out TPath extends string, in out TParams> = (
   params: TParams,
 ) => ResolveParams<TPath>
 
-export type ParamsOptions<TPath extends string, TParams> = {
+export type ParamsOptions<in out TPath extends string, in out TParams> = {
   params?: {
     parse?: ParseParamsFn<TPath, TParams>
     stringify?: StringifyParamsFn<TPath, TParams>
@@ -1083,12 +1083,11 @@ export class Route<
     this._ssr = options?.ssr ?? opts.defaultSsr ?? true
   }
 
-  addChildren<
-    const TNewChildren extends
-      | Record<string, AnyRoute>
-      | ReadonlyArray<AnyRoute>,
-  >(
-    children: TNewChildren,
+  addChildren<const TNewChildren>(
+    children: Constrain<
+      TNewChildren,
+      ReadonlyArray<AnyRoute> | Record<string, AnyRoute>
+    >,
   ): Route<
     TParentRoute,
     TPath,
@@ -1104,7 +1103,21 @@ export class Route<
     TLoaderFn,
     TNewChildren
   > {
-    return this._addFileChildren(children)
+    return this._addFileChildren(children) as Route<
+      TParentRoute,
+      TPath,
+      TFullPath,
+      TCustomId,
+      TId,
+      TSearchValidator,
+      TParams,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn,
+      TNewChildren
+    >
   }
 
   _addFileChildren<const TNewChildren>(
@@ -1302,7 +1315,7 @@ export function createRoute<
   >(options)
 }
 
-export type AnyRootRoute = RootRoute<any, any, any, any, any, any, any>
+export type AnyRootRoute = RootRoute<any, any, any, any, any, any, any, any>
 
 export type RootRouteOptions<
   TSearchValidator = undefined,
@@ -1408,12 +1421,11 @@ export class RootRoute<
     super(options as any)
   }
 
-  addChildren<
-    const TNewChildren extends
-      | Record<string, AnyRoute>
-      | ReadonlyArray<AnyRoute>,
-  >(
-    children: TNewChildren,
+  addChildren<const TNewChildren>(
+    children: Constrain<
+      TNewChildren,
+      ReadonlyArray<AnyRoute> | Record<string, AnyRoute>
+    >,
   ): RootRoute<
     TSearchValidator,
     TRouterContext,

package/src/router.ts

@@ -299,7 +299,7 @@ export interface RouterOptions<
    *
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaultviewtransition-property)
    */
-  defaultViewTransition?: boolean
+  defaultViewTransition?: boolean | ViewTransitionOptions
   /**
    * @default 'fuzzy'
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#notfoundmode-property)
@@ -544,6 +544,10 @@ export interface DehydratedRouter {
   manifest?: Manifest
 }
 
+export interface ViewTransitionOptions {
+  types: Array<string>
+}
+
 export type RouterConstructorOptions<
   TRouteTree extends AnyRoute,
   TTrailingSlashOption extends TrailingSlashOption,
@@ -689,7 +693,8 @@ export class Router<
     Math.random() * 10000000,
   )}`
   resetNextScroll = true
-  shouldViewTransition?: boolean = undefined
+  shouldViewTransition?: boolean | ViewTransitionOptions = undefined
+  isViewTransitionTypesSupported?: boolean = undefined
   subscribers = new Set<RouterListener<RouterEvent>>()
   dehydratedData?: TDehydrated
   viewTransitionPromise?: ControlledPromise<true>
@@ -853,6 +858,16 @@ export class Router<
         },
       })
     }
+
+    if (
+      typeof window !== 'undefined' &&
+      'CSS' in window &&
+      typeof window.CSS.supports === 'function'
+    ) {
+      this.isViewTransitionTypesSupported = window.CSS.supports(
+        'selector(:active-view-transition-type(a)',
+      )
+    }
   }
 
   get state() {
@@ -1061,7 +1076,7 @@ export class Router<
     return this.routesById as Record<string, AnyRoute>
   }
 
-  /** 
+  /**
   @deprecated use the following signature instead
   ```ts
   matchRoutes (
@@ -2054,7 +2069,23 @@ export class Router<
       'startViewTransition' in document &&
       typeof document.startViewTransition === 'function'
     ) {
-      document.startViewTransition(fn)
+      // lib.dom.ts doesn't support viewTransition types variant yet.
+      // TODO: Fix this when dom types are updated
+      let startViewTransitionParams: any
+
+      if (
+        typeof shouldViewTransition === 'object' &&
+        this.isViewTransitionTypesSupported
+      ) {
+        startViewTransitionParams = {
+          update: fn,
+          types: shouldViewTransition.types,
+        }
+      } else {
+        startViewTransitionParams = fn
+      }
+
+      document.startViewTransition(startViewTransitionParams)
     } else {
       fn()
     }