@tanstack/react-router 1.12.16 → 1.14.0

package/dist/cjs/router.cjs

@@ -2,16 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const history = require("@tanstack/history");
 const reactStore = require("@tanstack/react-store");
+const route = require("./route.cjs");
 const searchParams = require("./searchParams.cjs");
 const utils = require("./utils.cjs");
 const RouterProvider = require("./RouterProvider.cjs");
 const path = require("./path.cjs");
 const invariant = require("tiny-invariant");
 const redirects = require("./redirects.cjs");
+const notFound = require("./not-found.cjs");
 const componentTypes = [
   "component",
   "errorComponent",
-  "pendingComponent"
+  "pendingComponent",
+  "notFoundComponent"
 ];
 function createRouter(options) {
   return new Router(options);
@@ -28,6 +31,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,
@@ -193,13 +201,13 @@ class Router {
     };
     this.matchRoutes = (pathname, locationSearch, opts) => {
       let routeParams = {};
-      let foundRoute = this.flatRoutes.find((route) => {
+      let foundRoute = this.flatRoutes.find((route2) => {
         const matchedParams = path.matchPathname(
           this.basepath,
           path.trimPathRight(pathname),
           {
-            to: route.fullPath,
-            caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
+            to: route2.fullPath,
+            caseSensitive: route2.options.caseSensitive ?? this.options.caseSensitive,
             fuzzy: true
           }
         );
@@ -211,26 +219,30 @@ 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
           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;
         if (routeCursor)
           matchedRoutes.unshift(routeCursor);
       }
-      const parseErrors = matchedRoutes.map((route) => {
+      const parseErrors = matchedRoutes.map((route2) => {
         let parsedParamsError;
-        if (route.options.parseParams) {
+        if (route2.options.parseParams) {
           try {
-            const parsedParams = route.options.parseParams(routeParams);
+            const parsedParams = route2.options.parseParams(routeParams);
             Object.assign(routeParams, parsedParams);
           } catch (err) {
             parsedParamsError = new PathParamError(err.message, {
@@ -245,13 +257,13 @@ class Router {
         return;
       });
       const matches = [];
-      matchedRoutes.forEach((route, index) => {
+      matchedRoutes.forEach((route$1, index) => {
         var _a, _b, _c, _d, _e, _f;
         const parentMatch = matches[index - 1];
         const [preMatchSearch, searchError] = (() => {
           const parentSearch = (parentMatch == null ? void 0 : parentMatch.search) ?? locationSearch;
           try {
-            const validator = typeof route.options.validateSearch === "object" ? route.options.validateSearch.parse : route.options.validateSearch;
+            const validator = typeof route$1.options.validateSearch === "object" ? route$1.options.validateSearch.parse : route$1.options.validateSearch;
             let search = (validator == null ? void 0 : validator(parentSearch)) ?? {};
             return [
               {
@@ -270,28 +282,32 @@ class Router {
             return [parentSearch, searchError2];
           }
         })();
-        const loaderDeps = ((_b = (_a = route.options).loaderDeps) == null ? void 0 : _b.call(_a, {
+        const loaderDeps = ((_b = (_a = route$1.options).loaderDeps) == null ? void 0 : _b.call(_a, {
           search: preMatchSearch
         })) ?? "";
         const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : "";
         const interpolatedPath = path.interpolatePath({
-          path: route.fullPath,
+          path: route$1.fullPath,
           params: routeParams
         });
         const matchId = path.interpolatePath({
-          path: route.id,
+          path: route$1.id,
           params: routeParams,
           leaveWildcards: true
         }) + loaderDepsHash;
         const existingMatch = RouterProvider.getRouteMatch(this.state, matchId);
         const cause = this.state.matches.find((d) => d.id === matchId) ? "stay" : "enter";
-        const hasLoaders = !!(route.options.loader || route.lazyFn || componentTypes.some((d) => {
+        const hasLoaders = !!(route$1.options.loader || route$1.lazyFn || componentTypes.some((d) => {
           var _a2;
-          return (_a2 = route.options[d]) == null ? void 0 : _a2.preload;
+          return (_a2 = route$1.options[d]) == null ? void 0 : _a2.preload;
         }));
-        const match = existingMatch ? { ...existingMatch, cause } : {
+        const match = existingMatch ? {
+          ...existingMatch,
+          cause,
+          notFoundError: isGlobalNotFound && route$1.id === route.rootRouteId ? { global: true } : void 0
+        } : {
           id: matchId,
-          routeId: route.id,
+          routeId: route$1.id,
           params: routeParams,
           pathname: path.joinPaths([this.basepath, interpolatedPath]),
           updatedAt: Date.now(),
@@ -311,9 +327,10 @@ class Router {
           loaderDeps,
           invalid: false,
           preload: false,
-          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 || {}
+          notFoundError: isGlobalNotFound && route$1.id === route.rootRouteId ? { global: true } : void 0,
+          links: (_d = (_c = route$1.options).links) == null ? void 0 : _d.call(_c),
+          scripts: (_f = (_e = route$1.options).scripts) == null ? void 0 : _f.call(_e),
+          staticData: route$1.options.staticData || {}
         };
         match.search = utils.replaceEqualDeep(match.search, preMatchSearch);
         match.searchError = searchError;
@@ -539,7 +556,7 @@ class Router {
       try {
         for (let [index, match] of matches.entries()) {
           const parentMatch = matches[index - 1];
-          const route = this.looseRoutesById[match.routeId];
+          const route2 = this.looseRoutesById[match.routeId];
           const abortController = new AbortController();
           const handleErrorAndRedirect = (err, code) => {
             var _a2, _b2;
@@ -548,8 +565,11 @@ class Router {
             if (redirects.isRedirect(err)) {
               throw err;
             }
+            if (notFound.isNotFound(err)) {
+              this.updateMatchesWithNotFound(matches, match, err);
+            }
             try {
-              (_b2 = (_a2 = route.options).onError) == null ? void 0 : _b2.call(_a2, err);
+              (_b2 = (_a2 = route2.options).onError) == null ? void 0 : _b2.call(_a2, err);
             } catch (errorHandlerErr) {
               err = errorHandlerErr;
               if (redirects.isRedirect(errorHandlerErr)) {
@@ -572,9 +592,9 @@ class Router {
               handleErrorAndRedirect(match.searchError, "VALIDATE_SEARCH");
             }
             const parentContext = (parentMatch == null ? void 0 : parentMatch.context) ?? this.options.context ?? {};
-            const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+            const pendingMs = route2.options.pendingMs ?? this.options.defaultPendingMs;
             const pendingPromise = typeof pendingMs === "number" && pendingMs <= 0 ? Promise.resolve() : new Promise((r) => setTimeout(r, pendingMs));
-            const beforeLoadContext = await ((_b = (_a = route.options).beforeLoad) == null ? void 0 : _b.call(_a, {
+            const beforeLoadContext = await ((_b = (_a = route2.options).beforeLoad) == null ? void 0 : _b.call(_a, {
               search: match.search,
               abortController,
               params: match.params,
@@ -623,7 +643,7 @@ class Router {
           new Promise(async (resolve) => {
             var _a2;
             const parentMatchPromise = matchPromises[index - 1];
-            const route = this.looseRoutesById[match.routeId];
+            const route2 = this.looseRoutesById[match.routeId];
             const handleErrorAndRedirect = (err) => {
               if (redirects.isRedirect(err)) {
                 if (!preload) {
@@ -631,6 +651,9 @@ class Router {
                 }
                 return true;
               }
+              if (notFound.isNotFound(err)) {
+                this.updateMatchesWithNotFound(matches, match, err);
+              }
               return false;
             };
             let loadPromise;
@@ -639,9 +662,9 @@ class Router {
               showPending: false
             };
             let didShowPending = false;
-            const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-            const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
-            const shouldPending = !preload && typeof pendingMs === "number" && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
+            const pendingMs = route2.options.pendingMs ?? this.options.defaultPendingMs;
+            const pendingMinMs = route2.options.pendingMinMs ?? this.options.defaultPendingMinMs;
+            const shouldPending = !preload && typeof pendingMs === "number" && (route2.options.pendingComponent ?? this.options.defaultPendingComponent);
             const loaderContext = {
               params: match.params,
               deps: match.loaderDeps,
@@ -666,20 +689,20 @@ class Router {
                   isFetching: true,
                   fetchCount: match.fetchCount + 1
                 };
-                const lazyPromise = ((_b2 = route.lazyFn) == null ? void 0 : _b2.call(route).then((lazyRoute) => {
-                  Object.assign(route.options, lazyRoute.options);
+                const lazyPromise = ((_b2 = route2.lazyFn) == null ? void 0 : _b2.call(route2).then((lazyRoute) => {
+                  Object.assign(route2.options, lazyRoute.options);
                 })) || Promise.resolve();
                 const componentsPromise = lazyPromise.then(
                   () => Promise.all(
                     componentTypes.map(async (type) => {
-                      const component = route.options[type];
+                      const component = route2.options[type];
                       if (component == null ? void 0 : component.preload) {
                         await component.preload();
                       }
                     })
                   )
                 );
-                const loaderPromise = (_d = (_c = route.options).loader) == null ? void 0 : _d.call(_c, loaderContext);
+                const loaderPromise = (_d = (_c = route2.options).loader) == null ? void 0 : _d.call(_c, loaderContext);
                 loadPromise = Promise.all([
                   componentsPromise,
                   loaderPromise,
@@ -704,7 +727,7 @@ class Router {
                 }
                 if (latestPromise = checkLatest())
                   return await latestPromise;
-                const meta = (_f = (_e = route.options).meta) == null ? void 0 : _f.call(_e, {
+                const meta = (_f = (_e = route2.options).meta) == null ? void 0 : _f.call(_e, {
                   loaderData
                 });
                 matches[index] = match = {
@@ -723,7 +746,7 @@ class Router {
                 if (handleErrorAndRedirect(error))
                   return;
                 try {
-                  (_h = (_g = route.options).onError) == null ? void 0 : _h.call(_g, error);
+                  (_h = (_g = route2.options).onError) == null ? void 0 : _h.call(_g, error);
                 } catch (onErrorError) {
                   error = onErrorError;
                   if (handleErrorAndRedirect(onErrorError))
@@ -739,9 +762,9 @@ class Router {
               updateMatch(match);
             };
             const age = Date.now() - match.updatedAt;
-            let staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
+            let staleAge = preload ? route2.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route2.options.staleTime ?? this.options.defaultStaleTime ?? 0;
             let shouldReload;
-            const shouldReloadOption = route.options.shouldReload;
+            const shouldReloadOption = route2.options.shouldReload;
             shouldReload = typeof shouldReloadOption === "function" ? shouldReloadOption(loaderContext) : shouldReloadOption;
             matches[index] = match = {
               ...match,
@@ -883,11 +906,11 @@ class Router {
         return {
           ...s,
           cachedMatches: s.cachedMatches.filter((d) => {
-            const route = this.looseRoutesById[d.routeId];
-            if (!route.options.loader) {
+            const route2 = this.looseRoutesById[d.routeId];
+            if (!route2.options.loader) {
               return false;
             }
-            const gcTime = (d.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 5 * 60 * 1e3;
+            const gcTime = (d.preload ? route2.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route2.options.gcTime ?? this.options.defaultGcTime) ?? 5 * 60 * 1e3;
             return d.status !== "error" && Date.now() - d.updatedAt < gcTime;
           })
         };
@@ -966,7 +989,7 @@ class Router {
           const data = typeof getData === "function" ? await getData() : getData;
           return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${utils.escapeJSON(
             strKey
-          )}"] = ${JSON.stringify(data)}
+          )}"] = ${JSON.stringify(this.options.transformer.stringify(data))}
           ;(() => {
             var el = document.getElementById('${id}')
             el.parentElement.removeChild(el)
@@ -980,7 +1003,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;
     };
@@ -990,7 +1015,15 @@ class Router {
       return {
         state: {
           dehydratedMatches: this.state.matches.map((d) => ({
-            ...utils.pick(d, ["id", "status", "updatedAt", "loaderData"]),
+            ...utils.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 ? {
@@ -1002,24 +1035,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
         );
@@ -1028,15 +1061,15 @@ class Router {
           `Could not find a client-side match for dehydrated match with id: ${match.id}!`
         );
         if (dehydratedMatch) {
-          const route = this.looseRoutesById[match.routeId];
+          const route2 = this.looseRoutesById[match.routeId];
           return {
             ...match,
             ...dehydratedMatch,
-            meta: (_b2 = (_a2 = route.options).meta) == null ? void 0 : _b2.call(_a2, {
+            meta: (_b2 = (_a2 = route2.options).meta) == null ? void 0 : _b2.call(_a2, {
               loaderData: dehydratedMatch.loaderData
             }),
-            links: (_d = (_c = route.options).links) == null ? void 0 : _d.call(_c),
-            scripts: (_f = (_e = route.options).scripts) == null ? void 0 : _f.call(_e)
+            links: (_d = (_c2 = route2.options).links) == null ? void 0 : _d.call(_c2),
+            scripts: (_f = (_e = route2.options).scripts) == null ? void 0 : _f.call(_e)
           };
         }
         return match;
@@ -1049,6 +1082,31 @@ class Router {
         };
       });
     };
+    this.updateMatchesWithNotFound = (matches, currentMatch, err) => {
+      const matchesByRouteId = Object.fromEntries(
+        matches.map((match) => [match.routeId, match])
+      );
+      if (err.global) {
+        matchesByRouteId[route.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 === route.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,
@@ -1056,7 +1114,8 @@ class Router {
       context: void 0,
       ...options,
       stringifySearch: (options == null ? void 0 : options.stringifySearch) ?? searchParams.defaultStringifySearch,
-      parseSearch: (options == null ? void 0 : options.parseSearch) ?? searchParams.defaultParseSearch
+      parseSearch: (options == null ? void 0 : options.parseSearch) ?? searchParams.defaultParseSearch,
+      transformer: (options == null ? void 0 : options.transformer) ?? JSON
     });
   }
   get state() {