@tanstack/react-router 1.48.4 → 1.49.0

package/dist/esm/router.d.ts

@@ -1,7 +1,7 @@
 import { Store, NoInfer } from '@tanstack/react-store';
 import { HistoryState, RouterHistory } from '@tanstack/history';
 import { Manifest } from './manifest.js';
-import { AnyContext, AnyRoute, AnyRouteWithContext, AnySearchSchema, ErrorRouteComponent, NotFoundRouteComponent, RootRoute, RouteComponent, RouteMask } from './route.js';
+import { AnyContext, AnyRoute, AnyRouteWithContext, ErrorRouteComponent, NotFoundRouteComponent, RootRoute, RouteComponent, RouteMask } from './route.js';
 import { FullSearchSchema, RouteById, RoutePaths, RoutesById, RoutesByPath } from './routeInfo.js';
 import { ControlledPromise, NonNullableUpdater, PickAsRequired, Updater } from './utils.js';
 import { AnyRouteMatch, MakeRouteMatch, MatchRouteOptions } from './Matches.js';
@@ -11,12 +11,17 @@ import { BuildLocationFn, CommitLocationOptions, NavigateFn } from './RouterProv
 import { AnyRedirect, ResolvedRedirect } from './redirects.js';
 import { NotFoundError } from './not-found.js';
 import { NavigateOptions, ResolveRelativePath, ToOptions } from './link.js';
+import { RouterTransformer } from './transformer.js';
 
 import type * as React from 'react';
 declare global {
     interface Window {
         __TSR__?: {
-            matches: Array<any>;
+            matches: Array<{
+                __beforeLoadContext?: string;
+                loaderData?: string;
+                extracted?: Array<ExtractedEntry>;
+            }>;
             streamedValues: Record<string, {
                 value: any;
                 parsed: any;
@@ -38,7 +43,19 @@ export type HydrationCtx = {
     router: DehydratedRouter;
     payload: Record<string, any>;
 };
-export type InferRouterContext<TRouteTree extends AnyRoute> = TRouteTree extends RootRoute<any, any, any, infer TRouterContext extends AnyContext, any, any, any, any> ? TRouterContext : AnyContext;
+export type InferRouterContext<TRouteTree extends AnyRoute> = TRouteTree extends RootRoute<any, infer TRouterContext extends AnyContext, any, any, any, any, any, any> ? 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> ? {
     context?: InferRouterContext<TRouteTree>;
 } : {
@@ -328,10 +345,6 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TTrailingSlashOption
      */
     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;
@@ -422,7 +435,7 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
         match: Pick<AnyRouteMatch, 'id' | 'status' | 'error' | 'loadPromise' | 'minPendingPromise'>;
         matchIndex: number;
     }) => any;
-    serializeLoaderData?: (data: any, ctx: {
+    serializeLoaderData?: (type: '__beforeLoadContext' | 'loaderData', loaderData: any, ctx: {
         router: AnyRouter;
         match: AnyRouteMatch;
     }) => any;
@@ -452,7 +465,7 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
     parseLocation: (previousLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>) => ParsedLocation<FullSearchSchema<TRouteTree>>;
     resolvePathWithBase: (from: string, path: string) => string;
     get looseRoutesById(): Record<string, AnyRoute>;
-    matchRoutes: (pathname: string, locationSearch: AnySearchSchema, opts?: {
+    matchRoutes: (next: ParsedLocation, opts?: {
         preload?: boolean;
         throwOnError?: boolean;
     }) => Array<AnyRouteMatch>;

package/dist/esm/router.js

@@ -1,4 +1,4 @@
-import { createMemoryHistory, createBrowserHistory } from "@tanstack/history";
+import { createMemoryHistory, createBrowserHistory, parseHref } from "@tanstack/history";
 import { Store } from "@tanstack/react-store";
 import invariant from "tiny-invariant";
 import warning from "tiny-warning";
@@ -8,6 +8,7 @@ import { createControlledPromise, replaceEqualDeep, pick, deepEqual, last, funct
 import { trimPath, trimPathLeft, parsePathname, resolvePath, cleanPath, matchPathname, trimPathRight, interpolatePath, joinPaths } from "./path.js";
 import { isResolvedRedirect, isRedirect } from "./redirects.js";
 import { isNotFound } from "./not-found.js";
+import { defaultTransformer } from "./transformer.js";
 const componentTypes = [
   "component",
   "errorComponent",
@@ -208,12 +209,12 @@ class Router {
       });
       return resolvedPath;
     };
-    this.matchRoutes = (pathname, locationSearch, opts) => {
+    this.matchRoutes = (next, opts) => {
       let routeParams = {};
       const foundRoute = this.flatRoutes.find((route) => {
         const matchedParams = matchPathname(
           this.basepath,
-          trimPathRight(pathname),
+          trimPathRight(next.pathname),
           {
             to: route.fullPath,
             caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
@@ -233,7 +234,7 @@ class Router {
         // If we found a route, and it's not an index route and we have left over path
         foundRoute ? foundRoute.path !== "/" && routeParams["**"] : (
           // Or if we didn't find a route and we have left over path
-          trimPathRight(pathname)
+          trimPathRight(next.pathname)
         )
       ) {
         if (this.options.notFoundRoute) {
@@ -282,10 +283,10 @@ class Router {
       });
       const matches = [];
       matchedRoutes.forEach((route, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
         const parentMatch = matches[index - 1];
         const [preMatchSearch, searchError] = (() => {
-          const parentSearch = (parentMatch == null ? void 0 : parentMatch.search) ?? locationSearch;
+          const parentSearch = (parentMatch == null ? void 0 : parentMatch.search) ?? next.search;
           try {
             const validator = typeof route.options.validateSearch === "object" ? route.options.validateSearch.parse : route.options.validateSearch;
             const search = (validator == null ? void 0 : validator(parentSearch)) ?? {};
@@ -343,8 +344,9 @@ class Router {
             isFetching: false,
             error: void 0,
             paramsError: parseErrors[index],
-            routeContext: void 0,
-            context: void 0,
+            __routeContext: {},
+            __beforeLoadContext: {},
+            context: {},
             abortController: new AbortController(),
             fetchCount: 0,
             cause,
@@ -373,6 +375,30 @@ class Router {
         }
         match.search = replaceEqualDeep(match.search, preMatchSearch);
         match.searchError = searchError;
+        const parentMatchId = parentMatch == null ? void 0 : parentMatch.id;
+        const parentContext = !parentMatchId ? this.options.context ?? {} : parentMatch.context ?? this.options.context ?? {};
+        match.context = {
+          ...parentContext,
+          ...match.__routeContext,
+          ...match.__beforeLoadContext
+        };
+        const contextFnContext = {
+          search: match.search,
+          params: match.params,
+          context: match.context,
+          location: next,
+          navigate: (opts2) => this.navigate({ ...opts2, _fromLocation: next }),
+          buildLocation: this.buildLocation,
+          cause: match.cause,
+          abortController: match.abortController,
+          preload: !!match.preload
+        };
+        match.__routeContext = ((_l = (_k = route.options).context) == null ? void 0 : _l.call(_k, contextFnContext)) ?? {};
+        match.context = {
+          ...parentContext,
+          ...match.__routeContext,
+          ...match.__beforeLoadContext
+        };
         matches.push(match);
       });
       return matches;
@@ -392,10 +418,10 @@ class Router {
     this.buildLocation = (opts) => {
       const build = (dest = {}, matches) => {
         var _a, _b, _c;
-        const fromMatches = dest._fromLocation != null ? this.matchRoutes(
-          dest._fromLocation.pathname,
-          dest.fromSearch || dest._fromLocation.search
-        ) : this.state.matches;
+        const fromMatches = dest._fromLocation != null ? this.matchRoutes({
+          ...dest._fromLocation,
+          search: dest.fromSearch || dest._fromLocation.search
+        }) : this.state.matches;
         const fromMatch = dest.from != null ? fromMatches.find(
           (d) => matchPathname(this.basepath, trimPathRight(d.pathname), {
             to: dest.from,
@@ -487,8 +513,8 @@ class Router {
             maskedNext = build(maskedDest);
           }
         }
-        const nextMatches = this.matchRoutes(next.pathname, next.search);
-        const maskedMatches = maskedNext ? this.matchRoutes(maskedNext.pathname, maskedNext.search) : void 0;
+        const nextMatches = this.matchRoutes(next);
+        const maskedMatches = maskedNext ? this.matchRoutes(maskedNext) : void 0;
         const maskedFinal = maskedNext ? build(maskedDest, maskedMatches) : void 0;
         const final = build(dest, nextMatches);
         if (maskedFinal) {
@@ -566,6 +592,13 @@ class Router {
       ignoreBlocker,
       ...rest
     } = {}) => {
+      const href = rest.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);
       return this.commitLocation({
         ...location,
@@ -575,7 +608,7 @@ class Router {
         ignoreBlocker
       });
     };
-    this.navigate = ({ from, to, __isRedirect, ...rest }) => {
+    this.navigate = ({ to, __isRedirect, ...rest }) => {
       const toString = String(to);
       let isExternal;
       try {
@@ -589,7 +622,6 @@ class Router {
       );
       return this.buildAndCommitLocation({
         ...rest,
-        from,
         to
         // to: toString,
       });
@@ -602,7 +634,8 @@ class Router {
       }));
       let redirect;
       let notFound;
-      const loadPromise = new Promise((resolve) => {
+      let loadPromise;
+      loadPromise = new Promise((resolve) => {
         this.startReactTransition(async () => {
           var _a;
           try {
@@ -612,7 +645,7 @@ class Router {
             this.cancelMatches();
             let pendingMatches;
             this.__store.batch(() => {
-              pendingMatches = this.matchRoutes(next.pathname, next.search);
+              pendingMatches = this.matchRoutes(next);
               this.__store.setState((s) => ({
                 ...s,
                 status: "pending",
@@ -832,6 +865,7 @@ class Router {
               };
               for (const [index, { id: matchId, routeId }] of matches.entries()) {
                 const existingMatch = this.getMatch(matchId);
+                const parentMatchId = (_a = matches[index - 1]) == null ? void 0 : _a.id;
                 if (
                   // If we are in the middle of a load, either of these will be present
                   // (not to be confused with `loadPromise`, which is always defined)
@@ -850,13 +884,6 @@ class Router {
                     }));
                     const route = this.looseRoutesById[routeId];
                     const abortController = new AbortController();
-                    const parentMatchId = (_a = matches[index - 1]) == null ? void 0 : _a.id;
-                    const getParentContext = () => {
-                      if (!parentMatchId) {
-                        return this.options.context ?? {};
-                      }
-                      return this.getMatch(parentMatchId).context ?? this.options.context ?? {};
-                    };
                     const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
                     const shouldPending = !!(onReady && !this.isServer && !preload && (route.options.loader || route.options.beforeLoad) && typeof pendingMs === "number" && pendingMs !== Infinity && (route.options.pendingComponent ?? this.options.defaultPendingComponent));
                     let pendingTimeout;
@@ -875,47 +902,54 @@ class Router {
                     if (searchError) {
                       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
+                      pendingTimeout,
+                      context: {
+                        ...getParentMatchContext(),
+                        ...prev.__routeContext,
+                        ...prev.__beforeLoadContext
+                      }
                     }));
-                    const { search, params, routeContext, cause } = this.getMatch(matchId);
+                    const { search, params, context, cause } = this.getMatch(matchId);
                     const beforeLoadFnContext = {
                       search,
                       abortController,
                       params,
                       preload: !!preload,
-                      context: routeContext,
+                      context,
                       location,
                       navigate: (opts) => this.navigate({ ...opts, _fromLocation: location }),
                       buildLocation: this.buildLocation,
                       cause: preload ? "preload" : cause
                     };
-                    const beforeLoadContext = await ((_c = (_b = route.options).beforeLoad) == null ? void 0 : _c.call(_b, beforeLoadFnContext)) ?? {};
+                    let beforeLoadContext = await ((_c = (_b = route.options).beforeLoad) == null ? void 0 : _c.call(_b, beforeLoadFnContext)) ?? {};
+                    if (this.serializeLoaderData) {
+                      beforeLoadContext = this.serializeLoaderData(
+                        "__beforeLoadContext",
+                        beforeLoadContext,
+                        {
+                          router: this,
+                          match: this.getMatch(matchId)
+                        }
+                      );
+                    }
                     if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
                       handleSerialError(index, beforeLoadContext, "BEFORE_LOAD");
                     }
                     updateMatch(matchId, (prev) => {
-                      const routeContext2 = {
-                        ...prev.routeContext,
-                        ...beforeLoadContext
-                      };
                       return {
                         ...prev,
-                        routeContext: replaceEqualDeep(
-                          prev.routeContext,
-                          routeContext2
-                        ),
-                        context: replaceEqualDeep(prev.context, routeContext2),
+                        __beforeLoadContext: beforeLoadContext,
+                        context: {
+                          ...getParentMatchContext(),
+                          ...prev.__routeContext,
+                          ...beforeLoadContext
+                        },
                         abortController
                       };
                     });
@@ -1008,10 +1042,14 @@ class Router {
                             await route._lazyPromise;
                             let loaderData = await ((_b2 = (_a2 = route.options).loader) == null ? void 0 : _b2.call(_a2, 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(
                               this.getMatch(matchId),
@@ -1063,7 +1101,8 @@ class Router {
                         }
                       };
                       const { status, invalid } = this.getMatch(matchId);
-                      if (status === "success" && (invalid || (shouldReload ?? age > staleAge))) {
+                      if (preload && route.options.preload === false) {
+                      } else if (status === "success" && (invalid || (shouldReload ?? age > staleAge))) {
                         ;
                         (async () => {
                           try {
@@ -1145,7 +1184,7 @@ class Router {
     };
     this.preloadRoute = async (opts) => {
       const next = this.buildLocation(opts);
-      let matches = this.matchRoutes(next.pathname, next.search, {
+      let matches = this.matchRoutes(next, {
         throwOnError: true,
         preload: true
       });
@@ -1263,10 +1302,7 @@ class Router {
       this.dehydratedData = ctx.payload;
       (_c = (_b = this.options).hydrate) == null ? void 0 : _c.call(_b, ctx.payload);
       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
         );
@@ -1366,10 +1402,7 @@ 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") {
       window.__TSR__ROUTER__ = this;