@tanstack/react-router 1.12.16 → 1.14.0

package/dist/esm/router.d.ts

@@ -9,11 +9,14 @@ import { AnyRouteMatch, MatchRouteOptions, RouteMatch } from './Matches.js';
 import { ParsedLocation } from './location.js';
 import { SearchSerializer, SearchParser } from './searchParams.js';
 import { BuildLocationFn, CommitLocationOptions, InjectedHtmlEntry, NavigateFn } from './RouterProvider.js';
+import { NotFoundError } from './not-found.js';
 import { ResolveRelativePath, ToOptions } from './link.js';
 import { NoInfer } from '@tanstack/react-store';
 declare global {
     interface Window {
-        __TSR_DEHYDRATED__?: HydrationCtx;
+        __TSR_DEHYDRATED__?: {
+            data: string;
+        };
         __TSR_ROUTER_CONTEXT__?: React.Context<Router<any>>;
     }
 }
@@ -61,8 +64,19 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends
     InnerWrap?: (props: {
         children: any;
     }) => JSX.Element;
+    /**
+     * @deprecated
+     * Use `notFoundComponent` instead.
+     * See https://tanstack.com/router/v1/docs/guide/not-found-errors#migrating-from-notfoundroute for more info.
+     */
     notFoundRoute?: AnyRoute;
+    transformer?: RouterTransformer;
     errorSerializer?: RouterErrorSerializer<TSerializedError>;
+    globalNotFound?: RouteComponent;
+}
+export interface RouterTransformer {
+    stringify: (obj: unknown) => string;
+    parse: (str: string) => unknown;
 }
 export interface RouterErrorSerializer<TSerializedError> {
     serialize: (err: unknown) => TSerializedError;
@@ -99,12 +113,12 @@ export interface BuildNextOptions {
 export interface DehydratedRouterState {
     dehydratedMatches: DehydratedRouteMatch[];
 }
-export type DehydratedRouteMatch = Pick<RouteMatch, 'id' | 'status' | 'updatedAt' | 'loaderData'>;
+export type DehydratedRouteMatch = Pick<RouteMatch, 'id' | 'status' | 'updatedAt' | 'notFoundError' | 'loaderData'>;
 export interface DehydratedRouter {
     state: DehydratedRouterState;
 }
 export type RouterConstructorOptions<TRouteTree extends AnyRoute, TDehydrated extends Record<string, any>, TSerializedError extends Record<string, any>> = Omit<RouterOptions<TRouteTree, TDehydrated, TSerializedError>, 'context'> & RouterContextOptions<TRouteTree>;
-export declare const componentTypes: readonly ["component", "errorComponent", "pendingComponent"];
+export declare const componentTypes: readonly ["component", "errorComponent", "pendingComponent", "notFoundComponent"];
 export type RouterEvents = {
     onBeforeLoad: {
         type: 'onBeforeLoad';
@@ -143,7 +157,9 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     injectedHtml: InjectedHtmlEntry[];
     dehydratedData?: TDehydrated;
     __store: Store<RouterState<TRouteTree>>;
-    options: PickAsRequired<RouterOptions<TRouteTree, TDehydrated, TSerializedError>, 'stringifySearch' | 'parseSearch' | 'context'>;
+    options: PickAsRequired<Omit<RouterOptions<TRouteTree, TDehydrated, TSerializedError>, 'transformer'> & {
+        transformer: RouterTransformer;
+    }, 'stringifySearch' | 'parseSearch' | 'context'>;
     history: RouterHistory;
     latestLocation: ParsedLocation;
     basepath: string;
@@ -186,7 +202,9 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     dehydrateData: <T>(key: any, getData: T | (() => T | Promise<T>)) => () => T | undefined;
     hydrateData: <T extends unknown = unknown>(key: any) => T | undefined;
     dehydrate: () => DehydratedRouter;
-    hydrate: (__do_not_use_server_ctx?: HydrationCtx) => Promise<void>;
+    hydrate: (__do_not_use_server_ctx?: string) => Promise<void>;
+    updateMatchesWithNotFound: (matches: AnyRouteMatch[], currentMatch: AnyRouteMatch, err: NotFoundError) => void;
+    hasNotFoundMatch: () => boolean;
 }
 export declare function lazyFn<T extends Record<string, (...args: any[]) => any>, TKey extends keyof T = 'default'>(fn: () => Promise<T>, key?: TKey): (...args: Parameters<T[TKey]>) => Promise<Awaited<ReturnType<T[TKey]>>>;
 export declare class SearchParamError extends Error {

package/dist/esm/router.js

@@ -1,15 +1,18 @@
 import { createBrowserHistory, createMemoryHistory } from "@tanstack/history";
 import { Store } from "@tanstack/react-store";
+import { rootRouteId } from "./route.js";
 import { defaultStringifySearch, defaultParseSearch } from "./searchParams.js";
 import { replaceEqualDeep, pick, deepEqual, escapeJSON, last, functionalUpdate } from "./utils.js";
 import { getRouteMatch } from "./RouterProvider.js";
 import { trimPath, trimPathLeft, parsePathname, resolvePath, cleanPath, matchPathname, trimPathRight, interpolatePath, joinPaths } from "./path.js";
 import invariant from "tiny-invariant";
 import { isRedirect } from "./redirects.js";
+import { isNotFound } from "./not-found.js";
 const componentTypes = [
   "component",
   "errorComponent",
-  "pendingComponent"
+  "pendingComponent",
+  "notFoundComponent"
 ];
 function createRouter(options) {
   return new Router(options);
@@ -26,6 +29,11 @@ class Router {
     this.injectedHtml = [];
     this.startReactTransition = (fn) => fn();
     this.update = (newOptions) => {
+      if (newOptions.notFoundRoute) {
+        console.warn(
+          "The notFoundRoute API is deprecated and will be removed in the next major version. See https://tanstack.com/router/v1/docs/guide/not-found-errors#migrating-from-notfoundroute for more info."
+        );
+      }
       const previousOptions = this.options;
       this.options = {
         ...this.options,
@@ -209,15 +217,19 @@ class Router {
       });
       let routeCursor = foundRoute || this.routesById["__root__"];
       let matchedRoutes = [routeCursor];
+      let isGlobalNotFound = false;
       if (
         // If we found a route, and it's not an index route and we have left over path
-        (foundRoute ? foundRoute.path !== "/" && routeParams["**"] : (
+        foundRoute ? foundRoute.path !== "/" && routeParams["**"] : (
           // Or if we didn't find a route and we have left over path
           trimPathRight(pathname)
-        )) && // And we have a 404 route configured
-        this.options.notFoundRoute
+        )
       ) {
-        matchedRoutes.push(this.options.notFoundRoute);
+        if (this.options.notFoundRoute) {
+          matchedRoutes.push(this.options.notFoundRoute);
+        } else {
+          isGlobalNotFound = true;
+        }
       }
       while (routeCursor == null ? void 0 : routeCursor.parentRoute) {
         routeCursor = routeCursor.parentRoute;
@@ -287,7 +299,11 @@ class Router {
           var _a2;
           return (_a2 = route.options[d]) == null ? void 0 : _a2.preload;
         }));
-        const match = existingMatch ? { ...existingMatch, cause } : {
+        const match = existingMatch ? {
+          ...existingMatch,
+          cause,
+          notFoundError: isGlobalNotFound && route.id === rootRouteId ? { global: true } : void 0
+        } : {
           id: matchId,
           routeId: route.id,
           params: routeParams,
@@ -309,6 +325,7 @@ class Router {
           loaderDeps,
           invalid: false,
           preload: false,
+          notFoundError: isGlobalNotFound && route.id === rootRouteId ? { global: true } : void 0,
           links: (_d = (_c = route.options).links) == null ? void 0 : _d.call(_c),
           scripts: (_f = (_e = route.options).scripts) == null ? void 0 : _f.call(_e),
           staticData: route.options.staticData || {}
@@ -546,6 +563,9 @@ class Router {
             if (isRedirect(err)) {
               throw err;
             }
+            if (isNotFound(err)) {
+              this.updateMatchesWithNotFound(matches, match, err);
+            }
             try {
               (_b2 = (_a2 = route.options).onError) == null ? void 0 : _b2.call(_a2, err);
             } catch (errorHandlerErr) {
@@ -629,6 +649,9 @@ class Router {
                 }
                 return true;
               }
+              if (isNotFound(err)) {
+                this.updateMatchesWithNotFound(matches, match, err);
+              }
               return false;
             };
             let loadPromise;
@@ -964,7 +987,7 @@ class Router {
           const data = typeof getData === "function" ? await getData() : getData;
           return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
             strKey
-          )}"] = ${JSON.stringify(data)}
+          )}"] = ${JSON.stringify(this.options.transformer.stringify(data))}
           ;(() => {
             var el = document.getElementById('${id}')
             el.parentElement.removeChild(el)
@@ -978,7 +1001,9 @@ class Router {
     this.hydrateData = (key) => {
       if (typeof document !== "undefined") {
         const strKey = typeof key === "string" ? key : JSON.stringify(key);
-        return window[`__TSR_DEHYDRATED__${strKey}`];
+        return this.options.transformer.parse(
+          window[`__TSR_DEHYDRATED__${strKey}`]
+        );
       }
       return void 0;
     };
@@ -988,7 +1013,15 @@ class Router {
       return {
         state: {
           dehydratedMatches: this.state.matches.map((d) => ({
-            ...pick(d, ["id", "status", "updatedAt", "loaderData"]),
+            ...pick(d, [
+              "id",
+              "status",
+              "updatedAt",
+              "loaderData",
+              // Not-founds that occur during SSR don't require the client to load data before
+              // triggering in order to prevent the flicker of the loading component
+              "notFoundError"
+            ]),
             // If an error occurs server-side during SSRing,
             // send a small subset of the error to the client
             error: d.error ? {
@@ -1000,24 +1033,24 @@ class Router {
       };
     };
     this.hydrate = async (__do_not_use_server_ctx) => {
-      var _a, _b;
+      var _a, _b, _c;
       let _ctx = __do_not_use_server_ctx;
       if (typeof document !== "undefined") {
-        _ctx = window.__TSR_DEHYDRATED__;
+        _ctx = (_a = window.__TSR_DEHYDRATED__) == null ? void 0 : _a.data;
       }
       invariant(
         _ctx,
         "Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?"
       );
-      const ctx = _ctx;
+      const ctx = this.options.transformer.parse(_ctx);
       this.dehydratedData = ctx.payload;
-      (_b = (_a = this.options).hydrate) == null ? void 0 : _b.call(_a, ctx.payload);
+      (_c = (_b = this.options).hydrate) == null ? void 0 : _c.call(_b, ctx.payload);
       const dehydratedState = ctx.router.state;
       let matches = this.matchRoutes(
         this.state.location.pathname,
         this.state.location.search
       ).map((match) => {
-        var _a2, _b2, _c, _d, _e, _f;
+        var _a2, _b2, _c2, _d, _e, _f;
         const dehydratedMatch = dehydratedState.dehydratedMatches.find(
           (d) => d.id === match.id
         );
@@ -1033,7 +1066,7 @@ class Router {
             meta: (_b2 = (_a2 = route.options).meta) == null ? void 0 : _b2.call(_a2, {
               loaderData: dehydratedMatch.loaderData
             }),
-            links: (_d = (_c = route.options).links) == null ? void 0 : _d.call(_c),
+            links: (_d = (_c2 = route.options).links) == null ? void 0 : _d.call(_c2),
             scripts: (_f = (_e = route.options).scripts) == null ? void 0 : _f.call(_e)
           };
         }
@@ -1047,6 +1080,31 @@ class Router {
         };
       });
     };
+    this.updateMatchesWithNotFound = (matches, currentMatch, err) => {
+      const matchesByRouteId = Object.fromEntries(
+        matches.map((match) => [match.routeId, match])
+      );
+      if (err.global) {
+        matchesByRouteId[rootRouteId].notFoundError = err;
+      } else {
+        let currentRoute = this.routesById[err.route ?? currentMatch.routeId];
+        while (!currentRoute.options.notFoundComponent) {
+          currentRoute = currentRoute == null ? void 0 : currentRoute.parentRoute;
+          invariant(
+            currentRoute,
+            "Found invalid route tree while trying to find not-found handler."
+          );
+          if (currentRoute.id === rootRouteId)
+            break;
+        }
+        const match = matchesByRouteId[currentRoute.id];
+        invariant(match, "Could not find match for route: " + currentRoute.id);
+        match.notFoundError = err;
+      }
+    };
+    this.hasNotFoundMatch = () => {
+      return this.__store.state.matches.some((d) => d.notFoundError);
+    };
     this.update({
       defaultPreloadDelay: 50,
       defaultPendingMs: 1e3,
@@ -1054,7 +1112,8 @@ class Router {
       context: void 0,
       ...options,
       stringifySearch: (options == null ? void 0 : options.stringifySearch) ?? defaultStringifySearch,
-      parseSearch: (options == null ? void 0 : options.parseSearch) ?? defaultParseSearch
+      parseSearch: (options == null ? void 0 : options.parseSearch) ?? defaultParseSearch,
+      transformer: (options == null ? void 0 : options.transformer) ?? JSON
     });
   }
   get state() {