@tanstack/react-router 1.5.4 → 1.5.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -44,7 +44,7 @@
     "@tanstack/store": "^0.1.3",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.5.4"
+    "@tanstack/history": "1.5.6"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -2,7 +2,8 @@ import * as React from 'react'
 import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
-import { useRouter, useRouterState } from './RouterProvider'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
 import { ResolveRelativePath, ToOptions } from './link'
 import { AnyRoute, ReactNode, RootSearchSchema } from './route'
 import {

package/src/RouterProvider.tsx

@@ -1,21 +1,16 @@
 import * as React from 'react'
-import warning from 'tiny-warning'
-import { useStore } from '@tanstack/react-store'
 import { Matches } from './Matches'
-import { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
+import { NavigateOptions, ToOptions } from './link'
 import { ParsedLocation } from './location'
 import { AnyRoute } from './route'
-import { RouteById, RoutePaths } from './routeInfo'
-import {
-  BuildNextOptions,
-  RegisteredRouter,
-  Router,
-  RouterOptions,
-  RouterState,
-} from './router'
-import { NoInfer, pick, useLayoutEffect } from './utils'
-import { MatchRouteOptions } from './Matches'
+import { RoutePaths } from './routeInfo'
+import { RegisteredRouter, Router, RouterOptions, RouterState } from './router'
+import { pick, useLayoutEffect } from './utils'
+
 import { RouteMatch } from './Matches'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+import { routerContext } from './routerContext'
 
 const useTransition =
   React.useTransition ||
@@ -48,31 +43,12 @@ export type NavigateFn<TRouteTree extends AnyRoute> = <
   opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
 ) => Promise<void>
 
-export type MatchRouteFn<TRouteTree extends AnyRoute> = <
-  TFrom extends RoutePaths<TRouteTree> = '/',
-  TTo extends string = '',
-  TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>,
->(
-  location: ToOptions<TRouteTree, TFrom, TTo>,
-  opts?: MatchRouteOptions,
-) => false | RouteById<TRouteTree, TResolved>['types']['allParams']
-
 export type BuildLocationFn<TRouteTree extends AnyRoute> = (
   opts: ToOptions<TRouteTree>,
 ) => ParsedLocation
 
 export type InjectedHtmlEntry = string | (() => Promise<string> | string)
 
-export let routerContext = React.createContext<Router<any>>(null!)
-
-if (typeof document !== 'undefined') {
-  if (window.__TSR_ROUTER_CONTEXT__) {
-    routerContext = window.__TSR_ROUTER_CONTEXT__
-  } else {
-    window.__TSR_ROUTER_CONTEXT__ = routerContext as any
-  }
-}
-
 export function RouterProvider<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TDehydrated extends Record<string, any> = Record<string, any>,
@@ -234,19 +210,6 @@ export function getRouteMatch<TRouteTree extends AnyRoute>(
   ].find((d) => d.id === id)
 }
 
-export function useRouterState<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TSelected = RouterState<TRouteTree>,
->(opts?: {
-  router?: Router<TRouteTree>
-  select: (state: RouterState<RegisteredRouter['routeTree']>) => TSelected
-}): TSelected {
-  const contextRouter = useRouter<TRouteTree>({
-    warn: opts?.router === undefined,
-  })
-  return useStore((opts?.router || contextRouter).__store, opts?.select as any)
-}
-
 export type RouterProps<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TDehydrated extends Record<string, any> = Record<string, any>,
@@ -254,18 +217,3 @@ export type RouterProps<
   router: Router<TRouteTree>
   context?: Partial<RouterOptions<TRouteTree, TDehydrated>['context']>
 }
-
-export function useRouter<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
->(opts?: { warn?: boolean }): Router<TRouteTree> {
-  const resolvedContext =
-    typeof document !== 'undefined'
-      ? window.__TSR_ROUTER_CONTEXT__ || routerContext
-      : routerContext
-  const value = React.useContext(resolvedContext)
-  warning(
-    !((opts?.warn ?? true) && !value),
-    'useRouter must be used inside a <RouterProvider> component!',
-  )
-  return value as any
-}

package/src/awaited.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from './RouterProvider'
+import { useRouter } from './useRouter'
 import { DeferredPromise, isDehydratedDeferred } from './defer'
 
 export type AwaitOptions<T> = {

package/src/index.tsx

@@ -7,8 +7,6 @@ export * from './defer'
 export * from './CatchBoundary'
 export * from './fileRoute'
 export * from './history'
-export * from './index'
-// export * from './injectHtml'
 export * from './lazyRouteComponent'
 export * from './link'
 export * from './location'
@@ -26,4 +24,8 @@ export * from './useBlocker'
 export * from './useNavigate'
 export * from './useParams'
 export * from './useSearch'
+export * from './routerContext'
+export * from './useRouteContext'
+export * from './useRouter'
+export * from './useRouterState'
 export * from './utils'

package/src/link.tsx

@@ -1,13 +1,10 @@
 import * as React from 'react'
 import { useMatch } from './Matches'
-import { useRouter, useRouterState } from './RouterProvider'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
 import { Trim } from './fileRoute'
 import { AnyRoute, ReactNode, RootSearchSchema } from './route'
-import {
-  RouteByPath,
-  RouteIds,
-  RoutePaths,
-} from './routeInfo'
+import { RouteByPath, RouteIds, RoutePaths } from './routeInfo'
 import { RegisteredRouter } from './router'
 import { LinkProps, UseLinkPropsOptions } from './useNavigate'
 import {
@@ -188,7 +185,11 @@ export type ParamOptions<
       RootSearchSchema
     >
   >,
-  TToIndex = TTo extends '' ? '' : RouteByPath<TRouteTree, `${TTo}/`> extends never ? TTo : `${TTo}/`,
+  TToIndex = TTo extends ''
+    ? ''
+    : RouteByPath<TRouteTree, `${TTo}/`> extends never
+      ? TTo
+      : `${TTo}/`,
   TToParams = TToIndex extends ''
     ? TFromParams
     : never extends TResolved

package/src/router.ts

@@ -18,7 +18,13 @@ import {
   Route,
   LoaderFnContext,
 } from './route'
-import { FullSearchSchema, RoutesById, RoutesByPath } from './routeInfo'
+import {
+  FullSearchSchema,
+  RouteById,
+  RoutePaths,
+  RoutesById,
+  RoutesByPath,
+} from './routeInfo'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
   PickAsRequired,
@@ -33,14 +39,13 @@ import {
   Timeout,
 } from './utils'
 import { RouteComponent } from './route'
-import { AnyRouteMatch, RouteMatch } from './Matches'
+import { AnyRouteMatch, MatchRouteOptions, RouteMatch } from './Matches'
 import { ParsedLocation } from './location'
 import { SearchSerializer, SearchParser } from './searchParams'
 import {
   BuildLocationFn,
   CommitLocationOptions,
   InjectedHtmlEntry,
-  MatchRouteFn,
   NavigateFn,
   getRouteMatch,
 } from './RouterProvider'
@@ -58,7 +63,8 @@ import {
 } from './path'
 import invariant from 'tiny-invariant'
 import { isRedirect } from './redirects'
-import { ToOptions } from './link'
+import { ResolveRelativePath, ToOptions } from './link'
+import { NoInfer } from '@tanstack/react-store'
 // import warning from 'tiny-warning'
 
 //
@@ -1517,7 +1523,14 @@ export class Router<
     return matches
   }
 
-  matchRoute: MatchRouteFn<TRouteTree> = (location, opts) => {
+  matchRoute = <
+    TFrom extends RoutePaths<TRouteTree> = '/',
+    TTo extends string = '',
+    TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>,
+  >(
+    location: ToOptions<TRouteTree, TFrom, TTo>,
+    opts?: MatchRouteOptions,
+  ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {
     location = {
       ...location,
       to: location.to

package/src/routerContext.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { Router } from './router'
+
+export let routerContext = React.createContext<Router<any>>(null!)
+if (typeof document !== 'undefined') {
+  if (window.__TSR_ROUTER_CONTEXT__) {
+    routerContext = window.__TSR_ROUTER_CONTEXT__
+  } else {
+    window.__TSR_ROUTER_CONTEXT__ = routerContext as any
+  }
+}

package/src/scroll-restoration.tsx

@@ -4,7 +4,7 @@ const useLayoutEffect =
   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
 
 import { ParsedLocation } from './location'
-import { useRouter } from './RouterProvider'
+import { useRouter } from './useRouter'
 import { NonNullableUpdater, functionalUpdate } from './utils'
 
 const windowKey = 'window'

package/src/useBlocker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { ReactNode } from './route'
-import { useRouter } from './RouterProvider'
+import { useRouter } from './useRouter'
 import { BlockerFn } from '@tanstack/history'
 
 export function useBlocker(

package/src/useNavigate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useMatch } from './Matches'
-import { useRouter } from './RouterProvider'
+import { useRouter } from './useRouter'
 import { LinkOptions, NavigateOptions } from './link'
 import { AnyRoute } from './route'
 import { RoutePaths } from './routeInfo'

package/src/useParams.tsx

@@ -2,7 +2,7 @@ import { AnyRoute } from './route'
 import { RouteIds, RouteById } from './routeInfo'
 import { RegisteredRouter } from './router'
 import { last } from './utils'
-import { useRouterState } from './RouterProvider'
+import { useRouterState } from './useRouterState'
 import { StrictOrFrom } from './utils'
 import { getRenderedMatches } from './Matches'
 

package/src/useRouteContext.ts

@@ -0,0 +1,24 @@
+import { useMatch, RouteMatch } from './Matches'
+import { AnyRoute } from './route'
+import { RouteIds, RouteById } from './routeInfo'
+import { RegisteredRouter } from './router'
+import { StrictOrFrom } from './utils'
+
+export function useRouteContext<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],
+  TSelected = TRouteContext,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (search: TRouteContext) => TSelected
+  },
+): TSelected {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) =>
+      opts?.select
+        ? opts.select(match.context as TRouteContext)
+        : match.context,
+  })
+}

package/src/useRouter.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import warning from 'tiny-warning'
+import { AnyRoute } from './route'
+import { RegisteredRouter, Router } from './router'
+import { routerContext } from './routerContext'
+
+export function useRouter<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+>(opts?: { warn?: boolean }): Router<TRouteTree> {
+  const resolvedContext =
+    typeof document !== 'undefined'
+      ? window.__TSR_ROUTER_CONTEXT__ || routerContext
+      : routerContext
+  const value = React.useContext(resolvedContext)
+  warning(
+    !((opts?.warn ?? true) && !value),
+    'useRouter must be used inside a <RouterProvider> component!',
+  )
+  return value as any
+}

package/src/useRouterState.tsx

@@ -0,0 +1,17 @@
+import { useStore } from '@tanstack/react-store'
+import { AnyRoute } from './route'
+import { RegisteredRouter, Router, RouterState } from './router'
+import { useRouter } from './useRouter'
+
+export function useRouterState<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TSelected = RouterState<TRouteTree>,
+>(opts?: {
+  router?: Router<TRouteTree>
+  select: (state: RouterState<RegisteredRouter['routeTree']>) => TSelected
+}): TSelected {
+  const contextRouter = useRouter<TRouteTree>({
+    warn: opts?.router === undefined,
+  })
+  return useStore((opts?.router || contextRouter).__store, opts?.select as any)
+}

package/src/utils.ts

@@ -1,9 +1,4 @@
 import * as React from 'react'
-import { useMatch } from './Matches'
-import { RouteMatch } from './Matches'
-import { AnyRoute } from './route'
-import { RouteIds, RouteById } from './routeInfo'
-import { RegisteredRouter } from './router'
 
 export type NoInfer<T> = [T][T extends any ? 0 : never]
 export type IsAny<T, Y, N = T> = 1 extends 0 & T ? Y : N
@@ -306,25 +301,6 @@ export type StrictOrFrom<TFrom> =
       strict: false
     }
 
-export function useRouteContext<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],
-  TSelected = TRouteContext,
->(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (search: TRouteContext) => TSelected
-  },
-): TSelected {
-  return useMatch({
-    ...(opts as any),
-    select: (match: RouteMatch) =>
-      opts?.select
-        ? opts.select(match.context as TRouteContext)
-        : match.context,
-  })
-}
-
 export const useLayoutEffect =
   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect