@tanstack/react-router 0.0.1-beta.241 → 0.0.1-beta.242

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.241",
+  "version": "0.0.1-beta.242",
   "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": "0.0.1-beta.241"
+    "@tanstack/history": "0.0.1-beta.242"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/CatchBoundary.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 export function CatchBoundary(props: {
-  resetKey: string
+  getResetKey: () => string
   children: any
   errorComponent?: any
   onCatch: (error: any) => void
@@ -10,7 +10,7 @@ export function CatchBoundary(props: {
 
   return (
     <CatchBoundaryImpl
-      resetKey={props.resetKey}
+      getResetKey={props.getResetKey}
       onCatch={props.onCatch}
       children={({ error }) => {
         if (error) {
@@ -26,23 +26,26 @@ export function CatchBoundary(props: {
 }
 
 export class CatchBoundaryImpl extends React.Component<{
-  resetKey: string
+  getResetKey: () => string
   children: (props: { error: any; reset: () => void }) => any
   onCatch?: (error: any) => void
 }> {
   state = { error: null } as any
+  static getDerivedStateFromProps(props: any) {
+    return { resetKey: props.getResetKey() }
+  }
   static getDerivedStateFromError(error: any) {
     return { error }
   }
   componentDidUpdate(
     prevProps: Readonly<{
-      resetKey: string
+      getResetKey: () => string
       children: (props: { error: any; reset: () => void }) => any
       onCatch?: ((error: any, info: any) => void) | undefined
     }>,
     prevState: any,
   ): void {
-    if (prevState.error && prevProps.resetKey !== this.props.resetKey) {
+    if (prevState.error && prevState.resetKey !== this.state.resetKey) {
       this.setState({ error: null })
     }
   }

package/src/Matches.tsx

@@ -13,9 +13,11 @@ import {
   RouteIds,
   RoutePaths,
 } from './routeInfo'
-import { RegisteredRouter } from './router'
+import { RegisteredRouter, RouterState } from './router'
 import { NoInfer, StrictOrFrom, pick } from './utils'
 
+export const matchContext = React.createContext<string | undefined>(undefined)
+
 export interface RouteMatch<
   TRouteTree extends AnyRoute = AnyRoute,
   TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
@@ -48,11 +50,11 @@ export type AnyRouteMatch = RouteMatch<any>
 
 export function Matches() {
   const router = useRouter()
-  const routerState = useRouterState()
-  const matches = routerState.pendingMatches?.some((d) => d.showPending)
-    ? routerState.pendingMatches
-    : routerState.matches
-  const locationKey = routerState.resolvedLocation.state.key
+  const matchId = useRouterState({
+    select: (s) => {
+      return getRenderedMatches(s)[0]?.id
+    },
+  })
   const route = router.routesById[rootRouteId]!
 
   const errorComponent = React.useCallback(
@@ -69,9 +71,9 @@ export function Matches() {
   )
 
   return (
-    <matchesContext.Provider value={matches}>
+    <matchContext.Provider value={matchId}>
       <CatchBoundary
-        resetKey={locationKey}
+        getResetKey={() => router.state.resolvedLocation.state?.key}
         errorComponent={errorComponent}
         onCatch={() => {
           warning(
@@ -80,9 +82,9 @@ export function Matches() {
           )
         }}
       >
-        {matches.length ? <Match matches={matches} /> : null}
+        {matchId ? <Match matchId={matchId} /> : null}
       </CatchBoundary>
-    </matchesContext.Provider>
+    </matchContext.Provider>
   )
 }
 
@@ -90,16 +92,22 @@ function SafeFragment(props: any) {
   return <>{props.children}</>
 }
 
-export function Match({ matches }: { matches: RouteMatch[] }) {
-  const { options, routesById } = useRouter()
-  const match = matches[0]!
-  const routeId = match?.routeId
-  const route = routesById[routeId]!
+export function Match({ matchId }: { matchId: string }) {
   const router = useRouter()
-  const locationKey = useRouterState().resolvedLocation.state?.key
+  const routeId = useRouterState({
+    select: (s) =>
+      getRenderedMatches(s).find((d) => d.id === matchId)?.routeId as string,
+  })
+
+  invariant(
+    routeId,
+    `Could not find routeId for matchId "${matchId}". Please file an issue!`,
+  )
+
+  const route = router.routesById[routeId]!
 
   const PendingComponent = (route.options.pendingComponent ??
-    options.defaultPendingComponent) as any
+    router.options.defaultPendingComponent) as any
 
   const pendingElement = PendingComponent
     ? React.createElement(PendingComponent, {
@@ -112,7 +120,7 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
 
   const routeErrorComponent =
     route.options.errorComponent ??
-    options.defaultErrorComponent ??
+    router.options.defaultErrorComponent ??
     ErrorComponent
 
   const ResolvedSuspenseBoundary =
@@ -138,30 +146,45 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
   const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment
 
   return (
-    <matchesContext.Provider value={matches}>
+    <matchContext.Provider value={matchId}>
       <ResolvedSuspenseBoundary fallback={pendingElement}>
         <ResolvedCatchBoundary
-          resetKey={locationKey}
+          getResetKey={() => router.state.resolvedLocation.state?.key}
           errorComponent={errorComponent}
           onCatch={() => {
-            warning(false, `Error in route match: ${match.id}`)
+            warning(false, `Error in route match: ${matchId}`)
           }}
         >
-          <MatchInner match={match} pendingElement={pendingElement} />
+          <MatchInner matchId={matchId!} pendingElement={pendingElement} />
         </ResolvedCatchBoundary>
       </ResolvedSuspenseBoundary>
-    </matchesContext.Provider>
+    </matchContext.Provider>
   )
 }
 function MatchInner({
-  match,
+  matchId,
   pendingElement,
 }: {
-  match: RouteMatch
+  matchId: string
   pendingElement: any
 }): any {
-  const { options, routesById } = useRouter()
-  const route = routesById[match.routeId]!
+  const router = useRouter()
+  const routeId = useRouterState({
+    select: (s) =>
+      getRenderedMatches(s).find((d) => d.id === matchId)?.routeId as string,
+  })
+
+  const route = router.routesById[routeId]!
+
+  const match = useRouterState({
+    select: (s) =>
+      pick(getRenderedMatches(s).find((d) => d.id === matchId)!, [
+        'status',
+        'error',
+        'showPending',
+        'loadPromise',
+      ]),
+  })
 
   if (match.status === 'error') {
     throw match.error
@@ -175,7 +198,7 @@ function MatchInner({
   }
 
   if (match.status === 'success') {
-    let comp = route.options.component ?? options.defaultComponent
+    let comp = route.options.component ?? router.options.defaultComponent
 
     if (comp) {
       return React.createElement(comp, {
@@ -197,13 +220,21 @@ function MatchInner({
 }
 
 export function Outlet() {
-  const matches = React.useContext(matchesContext).slice(1)
+  const matchId = React.useContext(matchContext)
+
+  const childMatchId = useRouterState({
+    select: (s) => {
+      const matches = getRenderedMatches(s)
+      const index = matches.findIndex((d) => d.id === matchId)
+      return matches[index + 1]?.id
+    },
+  })
 
-  if (!matches[0]) {
+  if (!childMatchId) {
     return null
   }
 
-  return <Match matches={matches} />
+  return <Match matchId={childMatchId} />
 }
 
 export interface MatchRouteOptions {
@@ -291,6 +322,12 @@ export function MatchRoute<
   return !!params ? props.children : null
 }
 
+function getRenderedMatches(state: RouterState) {
+  return state.pendingMatches?.some((d) => d.showPending)
+    ? state.pendingMatches
+    : state.matches
+}
+
 export function useMatch<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
@@ -302,22 +339,20 @@ export function useMatch<
     select?: (match: TRouteMatchState) => TSelected
   },
 ): TStrict extends true ? TSelected : TSelected | undefined {
-  const nearestMatch = React.useContext(matchesContext)[0]!
-  const nearestMatchRouteId = nearestMatch?.routeId
-
-  const matchRouteId = useRouterState({
-    select: (state) => {
-      const matches = state.pendingMatches?.some((d) => d.showPending)
-        ? state.pendingMatches
-        : state.matches
+  const router = useRouter()
+  const nearestMatchId = React.useContext(matchContext)
 
-      const match = opts?.from
-        ? matches.find((d) => d.routeId === opts?.from)
-        : matches.find((d) => d.id === nearestMatch.id)
+  const nearestMatchRouteId = getRenderedMatches(router.state).find(
+    (d) => d.id === nearestMatchId,
+  )?.routeId
 
-      return match!.routeId
-    },
-  })
+  const matchRouteId = (() => {
+    const matches = getRenderedMatches(router.state)
+    const match = opts?.from
+      ? matches.find((d) => d.routeId === opts?.from)
+      : matches.find((d) => d.id === nearestMatchId)
+    return match!.routeId
+  })()
 
   if (opts?.strict ?? true) {
     invariant(
@@ -334,13 +369,9 @@ export function useMatch<
 
   const matchSelection = useRouterState({
     select: (state) => {
-      const matches = state.pendingMatches?.some((d) => d.showPending)
-        ? state.pendingMatches
-        : state.matches
-
-      const match = opts?.from
-        ? matches.find((d) => d.routeId === opts?.from)
-        : matches.find((d) => d.id === nearestMatch.id)
+      const match = getRenderedMatches(state).find(
+        (d) => d.id === nearestMatchId,
+      )
 
       invariant(
         match,
@@ -358,22 +389,15 @@ export function useMatch<
   return matchSelection as any
 }
 
-export const matchesContext = React.createContext<RouteMatch[]>(null!)
-
 export function useMatches<T = RouteMatch[]>(opts?: {
   select?: (matches: RouteMatch[]) => T
 }): T {
-  const contextMatches = React.useContext(matchesContext)
+  const contextMatchId = React.useContext(matchContext)
 
   return useRouterState({
     select: (state) => {
-      let matches = state.pendingMatches?.some((d) => d.showPending)
-        ? state.pendingMatches
-        : state.matches
-
-      matches = matches.slice(
-        matches.findIndex((d) => d.id === contextMatches[0]?.id),
-      )
+      let matches = getRenderedMatches(state)
+      matches = matches.slice(matches.findIndex((d) => d.id === contextMatchId))
       return opts?.select ? opts.select(matches) : (matches as T)
     },
   })
@@ -393,9 +417,12 @@ export function useLoaderData<
     select?: (match: TRouteMatch) => TSelected
   },
 ): TStrict extends true ? TSelected : TSelected | undefined {
-  const match = useMatch({ ...opts, select: undefined })!
-
-  return typeof opts.select === 'function'
-    ? opts.select(match?.loaderData)
-    : match?.loaderData
+  return useMatch({
+    ...opts,
+    select: (s) => {
+      return typeof opts.select === 'function'
+        ? opts.select(s?.loaderData)
+        : s?.loaderData
+    },
+  })!
 }

package/src/link.tsx

@@ -43,31 +43,31 @@ export type LinkInfo =
 export type CleanPath<T extends string> = T extends `${infer L}//${infer R}`
   ? CleanPath<`${CleanPath<L>}/${CleanPath<R>}`>
   : T extends `${infer L}//`
-  ? `${CleanPath<L>}/`
-  : T extends `//${infer L}`
-  ? `/${CleanPath<L>}`
-  : T
+    ? `${CleanPath<L>}/`
+    : T extends `//${infer L}`
+      ? `/${CleanPath<L>}`
+      : T
 
 export type Split<S, TIncludeTrailingSlash = true> = S extends unknown
   ? string extends S
     ? string[]
     : S extends string
-    ? CleanPath<S> extends ''
-      ? []
-      : TIncludeTrailingSlash extends true
-      ? CleanPath<S> extends `${infer T}/`
-        ? [...Split<T>, '/']
-        : CleanPath<S> extends `/${infer U}`
-        ? Split<U>
-        : CleanPath<S> extends `${infer T}/${infer U}`
-        ? [...Split<T>, ...Split<U>]
-        : [S]
-      : CleanPath<S> extends `${infer T}/${infer U}`
-      ? [...Split<T>, ...Split<U>]
-      : S extends string
-      ? [S]
+      ? CleanPath<S> extends ''
+        ? []
+        : TIncludeTrailingSlash extends true
+          ? CleanPath<S> extends `${infer T}/`
+            ? [...Split<T>, '/']
+            : CleanPath<S> extends `/${infer U}`
+              ? Split<U>
+              : CleanPath<S> extends `${infer T}/${infer U}`
+                ? [...Split<T>, ...Split<U>]
+                : [S]
+          : CleanPath<S> extends `${infer T}/${infer U}`
+            ? [...Split<T>, ...Split<U>]
+            : S extends string
+              ? [S]
+              : never
       : never
-    : never
   : never
 
 export type ParsePathParams<T extends string> = keyof {
@@ -77,10 +77,10 @@ export type ParsePathParams<T extends string> = keyof {
 export type Join<T, Delimiter extends string = '/'> = T extends []
   ? ''
   : T extends [infer L extends string]
-  ? L
-  : T extends [infer L extends string, ...infer Tail extends [...string[]]]
-  ? CleanPath<`${L}${Delimiter}${Join<Tail>}`>
-  : never
+    ? L
+    : T extends [infer L extends string, ...infer Tail extends [...string[]]]
+      ? CleanPath<`${L}${Delimiter}${Join<Tail>}`>
+      : never
 
 export type Last<T extends any[]> = T extends [...infer _, infer L] ? L : never
 
@@ -112,23 +112,23 @@ export type RelativeToPathAutoComplete<
       >}`
     : never
   : TTo extends `./${infer RestTTo}`
-  ? SplitPaths extends [
-      ...Split<TFrom, false>,
-      ...Split<RestTTo, false>,
-      ...infer RestPath,
-    ]
-    ? `${TTo}${Join<RestPath>}`
-    : never
-  :
-      | (TFrom extends `/`
-          ? never
-          : SplitPaths extends [...Split<TFrom, false>, ...infer RestPath]
-          ? Join<RestPath> extends { length: 0 }
+    ? SplitPaths extends [
+        ...Split<TFrom, false>,
+        ...Split<RestTTo, false>,
+        ...infer RestPath,
+      ]
+      ? `${TTo}${Join<RestPath>}`
+      : never
+    :
+        | (TFrom extends `/`
             ? never
-            : './'
-          : never)
-      | (TFrom extends `/` ? never : '../')
-      | AllPaths
+            : SplitPaths extends [...Split<TFrom, false>, ...infer RestPath]
+              ? Join<RestPath> extends { length: 0 }
+                ? never
+                : './'
+              : never)
+        | (TFrom extends `/` ? never : '../')
+        | AllPaths
 
 export type NavigateOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
@@ -333,22 +333,22 @@ export type ResolveRelativePath<TFrom, TTo = '.'> = TFrom extends string
     ? TTo extends '.'
       ? TFrom
       : TTo extends `./`
-      ? Join<[TFrom, '/']>
-      : TTo extends `./${infer TRest}`
-      ? ResolveRelativePath<TFrom, TRest>
-      : TTo extends `/${infer TRest}`
-      ? TTo
-      : Split<TTo> extends ['..', ...infer ToRest]
-      ? Split<TFrom> extends [...infer FromRest, infer FromTail]
-        ? ToRest extends ['/']
-          ? Join<[...FromRest, '/']>
-          : ResolveRelativePath<Join<FromRest>, Join<ToRest>>
-        : never
-      : Split<TTo> extends ['.', ...infer ToRest]
-      ? ToRest extends ['/']
         ? Join<[TFrom, '/']>
-        : ResolveRelativePath<TFrom, Join<ToRest>>
-      : CleanPath<Join<['/', ...Split<TFrom>, ...Split<TTo>]>>
+        : TTo extends `./${infer TRest}`
+          ? ResolveRelativePath<TFrom, TRest>
+          : TTo extends `/${infer TRest}`
+            ? TTo
+            : Split<TTo> extends ['..', ...infer ToRest]
+              ? Split<TFrom> extends [...infer FromRest, infer FromTail]
+                ? ToRest extends ['/']
+                  ? Join<[...FromRest, '/']>
+                  : ResolveRelativePath<Join<FromRest>, Join<ToRest>>
+                : never
+              : Split<TTo> extends ['.', ...infer ToRest]
+                ? ToRest extends ['/']
+                  ? Join<[TFrom, '/']>
+                  : ResolveRelativePath<TFrom, Join<ToRest>>
+                : CleanPath<Join<['/', ...Split<TFrom>, ...Split<TTo>]>>
     : never
   : never
 
@@ -443,8 +443,8 @@ export function useLinkProps<
     href: disabled
       ? undefined
       : next.maskedLocation
-      ? next.maskedLocation.href
-      : next.href,
+        ? next.maskedLocation.href
+        : next.href,
     onClick: composeHandlers([onClick, handleClick]),
     onFocus: composeHandlers([onFocus, handleFocus]),
     onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),

package/src/router.ts

@@ -601,7 +601,7 @@ export class Router<
         }
       })()
 
-      const interpolatedPath = interpolatePath(route.path, routeParams)
+      const interpolatedPath = interpolatePath(route.fullPath, routeParams)
       const matchId =
         interpolatePath(route.id, routeParams, true) +
         (route.options.key?.({