@tanstack/react-router 1.48.1 → 1.49.0

package/src/router.ts

@@ -1,4 +1,8 @@
-import { createBrowserHistory, createMemoryHistory } from '@tanstack/history'
+import {
+  createBrowserHistory,
+  createMemoryHistory,
+  parseHref,
+} from '@tanstack/history'
 import { Store } from '@tanstack/react-store'
 import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
@@ -25,6 +29,7 @@ import {
 } from './path'
 import { isRedirect, isResolvedRedirect } from './redirects'
 import { isNotFound } from './not-found'
+import { defaultTransformer } from './transformer'
 import type * as React from 'react'
 import type {
   HistoryLocation,
@@ -37,12 +42,13 @@ import type {
   AnyContext,
   AnyRoute,
   AnyRouteWithContext,
-  AnySearchSchema,
+  BeforeLoadContextOptions,
   ErrorRouteComponent,
   LoaderFnContext,
   NotFoundRouteComponent,
   RootRoute,
   RouteComponent,
+  RouteContextOptions,
   RouteMask,
 } from './route'
 import type {
@@ -73,13 +79,18 @@ import type {
 import type { AnyRedirect, ResolvedRedirect } from './redirects'
 import type { NotFoundError } from './not-found'
 import type { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
+import type { RouterTransformer } from './transformer'
 
 //
 
 declare global {
   interface Window {
     __TSR__?: {
-      matches: Array<any>
+      matches: Array<{
+        __beforeLoadContext?: string
+        loaderData?: string
+        extracted?: Array<ExtractedEntry>
+      }>
       streamedValues: Record<
         string,
         {
@@ -121,9 +132,9 @@ export type HydrationCtx = {
 export type InferRouterContext<TRouteTree extends AnyRoute> =
   TRouteTree extends RootRoute<
     any,
+    infer TRouterContext extends AnyContext,
     any,
     any,
-    infer TRouterContext extends AnyContext,
     any,
     any,
     any,
@@ -132,6 +143,20 @@ export type InferRouterContext<TRouteTree extends AnyRoute> =
     ? TRouterContext
     : AnyContext
 
+export type ExtractedEntry = {
+  dataType: '__beforeLoadContext' | 'loaderData'
+  type: 'promise' | 'stream'
+  path: Array<string>
+  value: any
+  id: number
+  streamState?: StreamState
+  matchIndex: number
+}
+
+export type StreamState = {
+  promises: Array<ControlledPromise<string | null>>
+}
+
 export type RouterContextOptions<TRouteTree extends AnyRoute> =
   AnyContext extends InferRouterContext<TRouteTree>
     ? {
@@ -428,10 +453,6 @@ export interface RouterOptions<
   isServer?: boolean
 }
 
-export interface RouterTransformer {
-  stringify: (obj: unknown) => string
-  parse: (str: string) => unknown
-}
 export interface RouterErrorSerializer<TSerializedError> {
   serialize: (err: unknown) => TSerializedError
   deserialize: (err: TSerializedError) => unknown
@@ -591,7 +612,8 @@ export class Router<
     matchIndex: number
   }) => any
   serializeLoaderData?: (
-    data: any,
+    type: '__beforeLoadContext' | 'loaderData',
+    loaderData: any,
     ctx: {
       router: AnyRouter
       match: AnyRouteMatch
@@ -644,10 +666,7 @@ export class Router<
       notFoundMode: options.notFoundMode ?? 'fuzzy',
       stringifySearch: options.stringifySearch ?? defaultStringifySearch,
       parseSearch: options.parseSearch ?? defaultParseSearch,
-      transformer: options.transformer ?? {
-        parse: JSON.parse,
-        stringify: JSON.stringify,
-      },
+      transformer: options.transformer ?? defaultTransformer,
     })
 
     if (typeof document !== 'undefined') {
@@ -932,8 +951,7 @@ export class Router<
   }
 
   matchRoutes = (
-    pathname: string,
-    locationSearch: AnySearchSchema,
+    next: ParsedLocation,
     opts?: { preload?: boolean; throwOnError?: boolean },
   ): Array<AnyRouteMatch> => {
     let routeParams: Record<string, string> = {}
@@ -941,7 +959,7 @@ export class Router<
     const foundRoute = this.flatRoutes.find((route) => {
       const matchedParams = matchPathname(
         this.basepath,
-        trimPathRight(pathname),
+        trimPathRight(next.pathname),
         {
           to: route.fullPath,
           caseSensitive:
@@ -971,7 +989,7 @@ export class Router<
       foundRoute
         ? foundRoute.path !== '/' && routeParams['**']
         : // Or if we didn't find a route and we have left over path
-          trimPathRight(pathname)
+          trimPathRight(next.pathname)
     ) {
       // If the user has defined an (old) 404 route, use it
       if (this.options.notFoundRoute) {
@@ -1048,7 +1066,7 @@ export class Router<
 
       const [preMatchSearch, searchError]: [Record<string, any>, any] = (() => {
         // Validate the search params and stabilize them
-        const parentSearch = parentMatch?.search ?? locationSearch
+        const parentSearch = parentMatch?.search ?? next.search
 
         try {
           const validator =
@@ -1138,8 +1156,9 @@ export class Router<
           isFetching: false,
           error: undefined,
           paramsError: parseErrors[index],
-          routeContext: undefined!,
-          context: undefined!,
+          __routeContext: {},
+          __beforeLoadContext: {},
+          context: {},
           abortController: new AbortController(),
           fetchCount: 0,
           cause,
@@ -1180,6 +1199,41 @@ export class Router<
       // And also update the searchError if there is one
       match.searchError = searchError
 
+      const parentMatchId = parentMatch?.id
+
+      const parentContext = !parentMatchId
+        ? ((this.options.context as any) ?? {})
+        : (parentMatch.context ?? this.options.context ?? {})
+
+      match.context = {
+        ...parentContext,
+        ...match.__routeContext,
+        ...match.__beforeLoadContext,
+      }
+
+      // Update the match's context
+      const contextFnContext: RouteContextOptions<any, any, any, any> = {
+        search: match.search,
+        params: match.params,
+        context: match.context,
+        location: next,
+        navigate: (opts: any) =>
+          this.navigate({ ...opts, _fromLocation: next }),
+        buildLocation: this.buildLocation,
+        cause: match.cause,
+        abortController: match.abortController,
+        preload: !!match.preload,
+      }
+
+      // Get the route context
+      match.__routeContext = route.options.context?.(contextFnContext) ?? {}
+
+      match.context = {
+        ...parentContext,
+        ...match.__routeContext,
+        ...match.__beforeLoadContext,
+      }
+
       matches.push(match)
     })
 
@@ -1210,10 +1264,10 @@ export class Router<
     ): ParsedLocation => {
       const fromMatches =
         dest._fromLocation != null
-          ? this.matchRoutes(
-              dest._fromLocation.pathname,
-              dest.fromSearch || dest._fromLocation.search,
-            )
+          ? this.matchRoutes({
+              ...dest._fromLocation,
+              search: dest.fromSearch || dest._fromLocation.search,
+            })
           : this.state.matches
 
       const fromMatch =
@@ -1389,9 +1443,9 @@ export class Router<
         }
       }
 
-      const nextMatches = this.matchRoutes(next.pathname, next.search)
+      const nextMatches = this.matchRoutes(next)
       const maskedMatches = maskedNext
-        ? this.matchRoutes(maskedNext.pathname, maskedNext.search)
+        ? this.matchRoutes(maskedNext)
         : undefined
       const maskedFinal = maskedNext
         ? build(maskedDest, maskedMatches)
@@ -1501,6 +1555,14 @@ export class Router<
     ignoreBlocker,
     ...rest
   }: BuildNextOptions & CommitLocationOptions = {}) => {
+    const href = (rest as any).href
+    if (href) {
+      const parsed = parseHref(href, {})
+      rest.to = parsed.pathname
+      rest.search = this.options.parseSearch(parsed.search)
+      rest.hash = parsed.hash
+    }
+
     const location = this.buildLocation(rest as any)
     return this.commitLocation({
       ...location,
@@ -1511,14 +1573,13 @@ export class Router<
     })
   }
 
-  navigate: NavigateFn = ({ from, to, __isRedirect, ...rest }) => {
+  navigate: NavigateFn = ({ to, __isRedirect, ...rest }) => {
     // If this link simply reloads the current route,
     // make sure it has a new key so it will trigger a data refresh
 
     // If this `to` is a valid external URL, return
     // null for LinkUtils
     const toString = String(to)
-    // const fromString = from !== undefined ? String(from) : from
     let isExternal
 
     try {
@@ -1533,7 +1594,6 @@ export class Router<
 
     return this.buildAndCommitLocation({
       ...rest,
-      from,
       to,
       // to: toString,
     })
@@ -1552,7 +1612,10 @@ export class Router<
     let redirect: ResolvedRedirect | undefined
     let notFound: NotFoundError | undefined
 
-    const loadPromise = new Promise<void>((resolve) => {
+    let loadPromise: Promise<void>
+
+    // eslint-disable-next-line prefer-const
+    loadPromise = new Promise<void>((resolve) => {
       this.startReactTransition(async () => {
         try {
           const next = this.latestLocation
@@ -1570,7 +1633,7 @@ export class Router<
             // this.cleanCache()
 
             // Match the routes
-            pendingMatches = this.matchRoutes(next.pathname, next.search)
+            pendingMatches = this.matchRoutes(next)
 
             // Ingest the new matches
             this.__store.setState((s) => ({
@@ -1871,6 +1934,7 @@ export class Router<
 
             for (const [index, { id: matchId, routeId }] of matches.entries()) {
               const existingMatch = this.getMatch(matchId)!
+              const parentMatchId = matches[index - 1]?.id
 
               if (
                 // If we are in the middle of a load, either of these will be present
@@ -1894,20 +1958,6 @@ export class Router<
                   const route = this.looseRoutesById[routeId]!
                   const abortController = new AbortController()
 
-                  const parentMatchId = matches[index - 1]?.id
-
-                  const getParentContext = () => {
-                    if (!parentMatchId) {
-                      return (this.options.context as any) ?? {}
-                    }
-
-                    return (
-                      this.getMatch(parentMatchId)!.context ??
-                      this.options.context ??
-                      {}
-                    )
-                  }
-
                   const pendingMs =
                     route.options.pendingMs ?? this.options.defaultPendingMs
 
@@ -1946,30 +1996,39 @@ export class Router<
                     handleSerialError(index, searchError, 'VALIDATE_SEARCH')
                   }
 
-                  const parentContext = getParentContext()
+                  const getParentMatchContext = () =>
+                    parentMatchId
+                      ? this.getMatch(parentMatchId)!.context
+                      : (this.options.context ?? {})
 
                   updateMatch(matchId, (prev) => ({
                     ...prev,
                     isFetching: 'beforeLoad',
                     fetchCount: prev.fetchCount + 1,
-                    routeContext: replaceEqualDeep(
-                      prev.routeContext,
-                      parentContext,
-                    ),
-                    context: replaceEqualDeep(prev.context, parentContext),
                     abortController,
                     pendingTimeout,
+                    context: {
+                      ...getParentMatchContext(),
+                      ...prev.__routeContext,
+                      ...prev.__beforeLoadContext,
+                    },
                   }))
 
-                  const { search, params, routeContext, cause } =
+                  const { search, params, context, cause } =
                     this.getMatch(matchId)!
 
-                  const beforeLoadFnContext = {
+                  const beforeLoadFnContext: BeforeLoadContextOptions<
+                    any,
+                    any,
+                    any,
+                    any,
+                    any
+                  > = {
                     search,
                     abortController,
                     params,
                     preload: !!preload,
-                    context: routeContext,
+                    context,
                     location,
                     navigate: (opts: any) =>
                       this.navigate({ ...opts, _fromLocation: location }),
@@ -1977,10 +2036,21 @@ export class Router<
                     cause: preload ? 'preload' : cause,
                   }
 
-                  const beforeLoadContext =
+                  let beforeLoadContext =
                     (await route.options.beforeLoad?.(beforeLoadFnContext)) ??
                     {}
 
+                  if (this.serializeLoaderData) {
+                    beforeLoadContext = this.serializeLoaderData(
+                      '__beforeLoadContext',
+                      beforeLoadContext,
+                      {
+                        router: this,
+                        match: this.getMatch(matchId)!,
+                      },
+                    )
+                  }
+
                   if (
                     isRedirect(beforeLoadContext) ||
                     isNotFound(beforeLoadContext)
@@ -1989,18 +2059,14 @@ export class Router<
                   }
 
                   updateMatch(matchId, (prev) => {
-                    const routeContext = {
-                      ...prev.routeContext,
-                      ...beforeLoadContext,
-                    }
-
                     return {
                       ...prev,
-                      routeContext: replaceEqualDeep(
-                        prev.routeContext,
-                        routeContext,
-                      ),
-                      context: replaceEqualDeep(prev.context, routeContext),
+                      __beforeLoadContext: beforeLoadContext,
+                      context: {
+                        ...getParentMatchContext(),
+                        ...prev.__routeContext,
+                        ...beforeLoadContext,
+                      },
                       abortController,
                     }
                   })
@@ -2150,10 +2216,14 @@ export class Router<
                             await route.options.loader?.(getLoaderContext())
 
                           if (this.serializeLoaderData) {
-                            loaderData = this.serializeLoaderData(loaderData, {
-                              router: this,
-                              match: this.getMatch(matchId)!,
-                            })
+                            loaderData = this.serializeLoaderData(
+                              'loaderData',
+                              loaderData,
+                              {
+                                router: this,
+                                match: this.getMatch(matchId)!,
+                              },
+                            )
                           }
 
                           handleRedirectAndNotFound(
@@ -2220,7 +2290,9 @@ export class Router<
                     // If the route is successful and still fresh, just resolve
                     const { status, invalid } = this.getMatch(matchId)!
 
-                    if (
+                    if (preload && route.options.preload === false) {
+                      // Do nothing
+                    } else if (
                       status === 'success' &&
                       (invalid || (shouldReload ?? age > staleAge))
                     ) {
@@ -2342,7 +2414,7 @@ export class Router<
   ): Promise<Array<AnyRouteMatch> | undefined> => {
     const next = this.buildLocation(opts as any)
 
-    let matches = this.matchRoutes(next.pathname, next.search, {
+    let matches = this.matchRoutes(next, {
       throwOnError: true,
       preload: true,
     })
@@ -2499,10 +2571,7 @@ export class Router<
     this.options.hydrate?.(ctx.payload as any)
     const dehydratedState = ctx.router.state
 
-    const matches = this.matchRoutes(
-      this.state.location.pathname,
-      this.state.location.search,
-    ).map((match) => {
+    const matches = this.matchRoutes(this.state.location).map((match) => {
       const dehydratedMatch = dehydratedState.dehydratedMatches.find(
         (d) => d.id === match.id,
       )

package/src/transformer.ts

@@ -0,0 +1,49 @@
+import { isPlainObject } from './utils'
+
+export interface RouterTransformer {
+  stringify: (obj: unknown) => string
+  parse: (str: string) => unknown
+}
+
+export const defaultTransformer: RouterTransformer = {
+  stringify: (value: any) =>
+    JSON.stringify(value, function replacer(key, value) {
+      const keyVal = this[key]
+      const transformer = transformers.find((t) => t.stringifyCondition(keyVal))
+
+      if (transformer) {
+        return transformer.stringify(keyVal)
+      }
+
+      return value
+    }),
+  parse: (value: string) =>
+    JSON.parse(value, function parser(key, value) {
+      const keyVal = this[key]
+      const transformer = transformers.find((t) => t.parseCondition(keyVal))
+
+      if (transformer) {
+        return transformer.parse(keyVal)
+      }
+
+      return value
+    }),
+}
+
+const transformers = [
+  {
+    // Dates
+    stringifyCondition: (value: any) => value instanceof Date,
+    stringify: (value: any) => ({ $date: value.toISOString() }),
+    parseCondition: (value: any) => isPlainObject(value) && value.$date,
+    parse: (value: any) => new Date(value.$date),
+  },
+  {
+    // undefined
+    stringifyCondition: (value: any) => value === undefined,
+    stringify: () => ({ $undefined: '' }),
+    parseCondition: (value: any) =>
+      isPlainObject(value) && value.$undefined === '',
+    parse: () => undefined,
+  },
+] as const

package/src/utils.ts

@@ -4,6 +4,7 @@ export type NoInfer<T> = [T][T extends any ? 0 : never]
 export type IsAny<TValue, TYesResult, TNoResult = TValue> = 1 extends 0 & TValue
   ? TYesResult
   : TNoResult
+
 export type PickAsRequired<TValue, TKey extends keyof TValue> = Omit<
   TValue,
   TKey
@@ -98,6 +99,10 @@ export type MergeUnion<TUnion> =
   | MergeUnionPrimitives<TUnion>
   | MergeUnionObject<TUnion>
 
+export type Constrain<T, TConstaint> =
+  | (T extends TConstaint ? T : never)
+  | TConstaint
+
 export function last<T>(arr: Array<T>) {
   return arr[arr.length - 1]
 }