@tanstack/react-router 1.40.0 → 1.41.0

package/dist/cjs/CatchBoundary.d.cts

@@ -6,7 +6,7 @@ export declare function CatchBoundary(props: {
     children: React.ReactNode;
     errorComponent?: ErrorRouteComponent;
     onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ErrorComponent({ error }: {
     error: any;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Match.cjs

@@ -0,0 +1,238 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const invariant = require("tiny-invariant");
+const warning = require("tiny-warning");
+const CatchBoundary = require("./CatchBoundary.cjs");
+const useRouterState = require("./useRouterState.cjs");
+const useRouter = require("./useRouter.cjs");
+const utils = require("./utils.cjs");
+const notFound = require("./not-found.cjs");
+const redirects = require("./redirects.cjs");
+const matchContext = require("./matchContext.cjs");
+const isServerSideError = require("./isServerSideError.cjs");
+const SafeFragment = require("./SafeFragment.cjs");
+const renderRouteNotFound = require("./renderRouteNotFound.cjs");
+const root = require("./root.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function Match({ matchId }) {
+  var _a, _b;
+  const router = useRouter.useRouter();
+  const routeId = useRouterState.useRouterState({
+    select: (s) => {
+      var _a2;
+      return (_a2 = s.matches.find((d) => d.id === matchId)) == null ? void 0 : _a2.routeId;
+    }
+  });
+  invariant(
+    routeId,
+    `Could not find routeId for matchId "${matchId}". Please file an issue!`
+  );
+  const route = router.routesById[routeId];
+  const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
+  const pendingElement = PendingComponent ? /* @__PURE__ */ jsxRuntime.jsx(PendingComponent, {}) : null;
+  const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent;
+  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch;
+  const routeNotFoundComponent = route.isRoot ? (
+    // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
+    route.options.notFoundComponent ?? ((_a = router.options.notFoundRoute) == null ? void 0 : _a.options.component)
+  ) : route.options.notFoundComponent;
+  const ResolvedSuspenseBoundary = (
+    // If we're on the root route, allow forcefully wrapping in suspense
+    (!route.isRoot || route.options.wrapInSuspense) && (route.options.wrapInSuspense ?? PendingComponent ?? ((_b = route.options.errorComponent) == null ? void 0 : _b.preload)) ? React__namespace.Suspense : SafeFragment.SafeFragment
+  );
+  const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary.CatchBoundary : SafeFragment.SafeFragment;
+  const ResolvedNotFoundBoundary = routeNotFoundComponent ? notFound.CatchNotFound : SafeFragment.SafeFragment;
+  const resetKey = useRouterState.useRouterState({
+    select: (s) => s.resolvedLocation.state.key
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(matchContext.matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsxRuntime.jsx(ResolvedSuspenseBoundary, { fallback: pendingElement, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ResolvedCatchBoundary,
+    {
+      getResetKey: () => resetKey,
+      errorComponent: routeErrorComponent || CatchBoundary.ErrorComponent,
+      onCatch: (error, errorInfo) => {
+        if (notFound.isNotFound(error)) throw error;
+        warning(false, `Error in route match: ${matchId}`);
+        routeOnCatch == null ? void 0 : routeOnCatch(error, errorInfo);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ResolvedNotFoundBoundary,
+        {
+          fallback: (error) => {
+            if (!routeNotFoundComponent || error.routeId && error.routeId !== routeId || !error.routeId && !route.isRoot)
+              throw error;
+            return React__namespace.createElement(routeNotFoundComponent, error);
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(MatchInner, { matchId })
+        }
+      )
+    }
+  ) }) });
+}
+function MatchInner({ matchId }) {
+  var _a, _b;
+  const router = useRouter.useRouter();
+  const routeId = useRouterState.useRouterState({
+    select: (s) => {
+      var _a2;
+      return (_a2 = s.matches.find((d) => d.id === matchId)) == null ? void 0 : _a2.routeId;
+    }
+  });
+  const route = router.routesById[routeId];
+  const [match, matchIndex] = useRouterState.useRouterState({
+    select: (s) => {
+      const matchIndex2 = s.matches.findIndex((d) => d.id === matchId);
+      const match2 = s.matches[matchIndex2];
+      return [
+        utils.pick(match2, [
+          "id",
+          "status",
+          "error",
+          "loadPromise",
+          "minPendingPromise"
+        ]),
+        matchIndex2
+      ];
+    }
+  });
+  const RouteErrorComponent = (route.options.errorComponent ?? router.options.defaultErrorComponent) || CatchBoundary.ErrorComponent;
+  if (match.status === "notFound") {
+    let error;
+    if (isServerSideError.isServerSideError(match.error)) {
+      const deserializeError = ((_a = router.options.errorSerializer) == null ? void 0 : _a.deserialize) ?? isServerSideError.defaultDeserializeError;
+      error = deserializeError(match.error.data);
+    } else {
+      error = match.error;
+    }
+    invariant(notFound.isNotFound(error), "Expected a notFound error");
+    return renderRouteNotFound.renderRouteNotFound(router, route, error);
+  }
+  if (match.status === "redirected") {
+    invariant(redirects.isRedirect(match.error), "Expected a redirect error");
+    throw match.loadPromise;
+  }
+  if (match.status === "error") {
+    if (router.isServer) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        RouteErrorComponent,
+        {
+          error: match.error,
+          info: {
+            componentStack: ""
+          }
+        }
+      );
+    }
+    if (isServerSideError.isServerSideError(match.error)) {
+      const deserializeError = ((_b = router.options.errorSerializer) == null ? void 0 : _b.deserialize) ?? isServerSideError.defaultDeserializeError;
+      throw deserializeError(match.error.data);
+    } else {
+      throw match.error;
+    }
+  }
+  if (match.status === "pending") {
+    const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
+    if (pendingMinMs && !match.minPendingPromise) {
+      match.minPendingPromise = utils.createControlledPromise();
+      if (!router.isServer) {
+        Promise.resolve().then(() => {
+          router.__store.setState((s) => ({
+            ...s,
+            matches: s.matches.map(
+              (d) => d.id === match.id ? { ...d, minPendingPromise: utils.createControlledPromise() } : d
+            )
+          }));
+        });
+        setTimeout(() => {
+          router.__store.setState((s) => {
+            return {
+              ...s,
+              matches: s.matches.map(
+                (d) => {
+                  var _a2;
+                  return d.id === match.id ? {
+                    ...d,
+                    minPendingPromise: ((_a2 = d.minPendingPromise) == null ? void 0 : _a2.resolve(), void 0)
+                  } : d;
+                }
+              )
+            };
+          });
+        }, pendingMinMs);
+      }
+    }
+    throw match.loadPromise;
+  }
+  const Comp = route.options.component ?? router.options.defaultComponent;
+  const out = Comp ? /* @__PURE__ */ jsxRuntime.jsx(Comp, {}) : /* @__PURE__ */ jsxRuntime.jsx(Outlet, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    router.AfterEachMatch ? /* @__PURE__ */ jsxRuntime.jsx(router.AfterEachMatch, { match, matchIndex }) : null,
+    out
+  ] });
+}
+const Outlet = React__namespace.memo(function Outlet2() {
+  const router = useRouter.useRouter();
+  const matchId = React__namespace.useContext(matchContext.matchContext);
+  const routeId = useRouterState.useRouterState({
+    select: (s) => {
+      var _a;
+      return (_a = s.matches.find((d) => d.id === matchId)) == null ? void 0 : _a.routeId;
+    }
+  });
+  const route = router.routesById[routeId];
+  const { parentGlobalNotFound } = useRouterState.useRouterState({
+    select: (s) => {
+      const matches = s.matches;
+      const parentMatch = matches.find((d) => d.id === matchId);
+      invariant(
+        parentMatch,
+        `Could not find parent match for matchId "${matchId}"`
+      );
+      return {
+        parentGlobalNotFound: parentMatch.globalNotFound
+      };
+    }
+  });
+  const childMatchId = useRouterState.useRouterState({
+    select: (s) => {
+      var _a;
+      const matches = s.matches;
+      const index = matches.findIndex((d) => d.id === matchId);
+      return (_a = matches[index + 1]) == null ? void 0 : _a.id;
+    }
+  });
+  if (parentGlobalNotFound) {
+    return renderRouteNotFound.renderRouteNotFound(router, route, void 0);
+  }
+  if (!childMatchId) {
+    return null;
+  }
+  const nextMatch = /* @__PURE__ */ jsxRuntime.jsx(Match, { matchId: childMatchId });
+  const pendingElement = router.options.defaultPendingComponent ? /* @__PURE__ */ jsxRuntime.jsx(router.options.defaultPendingComponent, {}) : null;
+  if (matchId === root.rootRouteId) {
+    return /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Suspense, { fallback: pendingElement, children: nextMatch });
+  }
+  return nextMatch;
+});
+exports.Match = Match;
+exports.Outlet = Outlet;
+//# sourceMappingURL=Match.cjs.map

package/dist/cjs/Match.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Match.cjs","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { createControlledPromise, pick } from './utils'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { type AnyRoute } from './route'\nimport { matchContext } from './matchContext'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { rootRouteId } from './root'\n\nexport function Match({ matchId }: { matchId: string }) {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  invariant(\n    routeId,\n    `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n  )\n\n  const route: AnyRoute = router.routesById[routeId]\n\n  const PendingComponent =\n    route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n  const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n  const routeErrorComponent =\n    route.options.errorComponent ?? router.options.defaultErrorComponent\n\n  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n  const routeNotFoundComponent = route.isRoot\n    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n      route.options.notFoundComponent ??\n      router.options.notFoundRoute?.options.component\n    : route.options.notFoundComponent\n\n  const ResolvedSuspenseBoundary =\n    // If we're on the root route, allow forcefully wrapping in suspense\n    (!route.isRoot || route.options.wrapInSuspense) &&\n    (route.options.wrapInSuspense ??\n      PendingComponent ??\n      (route.options.errorComponent as any)?.preload)\n      ? React.Suspense\n      : SafeFragment\n\n  const ResolvedCatchBoundary = routeErrorComponent\n    ? CatchBoundary\n    : SafeFragment\n\n  const ResolvedNotFoundBoundary = routeNotFoundComponent\n    ? CatchNotFound\n    : SafeFragment\n\n  const resetKey = useRouterState({\n    select: (s) => s.resolvedLocation.state.key!,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <ResolvedSuspenseBoundary fallback={pendingElement}>\n        <ResolvedCatchBoundary\n          getResetKey={() => resetKey}\n          errorComponent={routeErrorComponent || ErrorComponent}\n          onCatch={(error, errorInfo) => {\n            // Forward not found errors (we don't want to show the error component for these)\n            if (isNotFound(error)) throw error\n            warning(false, `Error in route match: ${matchId}`)\n            routeOnCatch?.(error, errorInfo)\n          }}\n        >\n          <ResolvedNotFoundBoundary\n            fallback={(error) => {\n              // If the current not found handler doesn't exist or it has a\n              // route ID which doesn't match the current route, rethrow the error\n              if (\n                !routeNotFoundComponent ||\n                (error.routeId && error.routeId !== routeId) ||\n                (!error.routeId && !route.isRoot)\n              )\n                throw error\n\n              return React.createElement(routeNotFoundComponent, error as any)\n            }}\n          >\n            <MatchInner matchId={matchId} />\n          </ResolvedNotFoundBoundary>\n        </ResolvedCatchBoundary>\n      </ResolvedSuspenseBoundary>\n    </matchContext.Provider>\n  )\n}\nfunction MatchInner({ matchId }: { matchId: string }): any {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const [match, matchIndex] = useRouterState({\n    select: (s) => {\n      const matchIndex = s.matches.findIndex((d) => d.id === matchId)\n      const match = s.matches[matchIndex]!\n      return [\n        pick(match, [\n          'id',\n          'status',\n          'error',\n          'loadPromise',\n          'minPendingPromise',\n        ]),\n        matchIndex,\n      ] as const\n    },\n  })\n\n  const RouteErrorComponent =\n    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n    ErrorComponent\n\n  if (match.status === 'notFound') {\n    let error: unknown\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n\n      error = deserializeError(match.error.data)\n    } else {\n      error = match.error\n    }\n\n    invariant(isNotFound(error), 'Expected a notFound error')\n\n    return renderRouteNotFound(router, route, error)\n  }\n\n  if (match.status === 'redirected') {\n    // Redirects should be handled by the router transition. If we happen to\n    // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n    invariant(isRedirect(match.error), 'Expected a redirect error')\n\n    // warning(\n    //   false,\n    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n    // )\n    throw match.loadPromise\n  }\n\n  if (match.status === 'error') {\n    // If we're on the server, we need to use React's new and super\n    // wonky api for throwing errors from a server side render inside\n    // of a suspense boundary. This is the only way to get\n    // renderToPipeableStream to not hang indefinitely.\n    // We'll serialize the error and rethrow it on the client.\n    if (router.isServer) {\n      return (\n        <RouteErrorComponent\n          error={match.error}\n          info={{\n            componentStack: '',\n          }}\n        />\n      )\n    }\n\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n      throw deserializeError(match.error.data)\n    } else {\n      throw match.error\n    }\n  }\n\n  if (match.status === 'pending') {\n    // We're pending, and if we have a minPendingMs, we need to wait for it\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n    if (pendingMinMs && !match.minPendingPromise) {\n      // Create a promise that will resolve after the minPendingMs\n      match.minPendingPromise = createControlledPromise()\n\n      if (!router.isServer) {\n        Promise.resolve().then(() => {\n          router.__store.setState((s) => ({\n            ...s,\n            matches: s.matches.map((d) =>\n              d.id === match.id\n                ? { ...d, minPendingPromise: createControlledPromise() }\n                : d,\n            ),\n          }))\n        })\n\n        setTimeout(() => {\n          // We've handled the minPendingPromise, so we can delete it\n          router.__store.setState((s) => {\n            return {\n              ...s,\n              matches: s.matches.map((d) =>\n                d.id === match.id\n                  ? {\n                      ...d,\n                      minPendingPromise:\n                        (d.minPendingPromise?.resolve(), undefined),\n                    }\n                  : d,\n              ),\n            }\n          })\n        }, pendingMinMs)\n      }\n    }\n\n    throw match.loadPromise\n  }\n\n  const Comp = route.options.component ?? router.options.defaultComponent\n\n  const out = Comp ? <Comp /> : <Outlet />\n\n  return (\n    <>\n      {router.AfterEachMatch ? (\n        <router.AfterEachMatch match={match} matchIndex={matchIndex} />\n      ) : null}\n      {out}\n    </>\n  )\n}\n\nexport const Outlet = React.memo(function Outlet() {\n  const router = useRouter()\n  const matchId = React.useContext(matchContext)\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const { parentGlobalNotFound } = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const parentMatch = matches.find((d) => d.id === matchId)\n      invariant(\n        parentMatch,\n        `Could not find parent match for matchId \"${matchId}\"`,\n      )\n      return {\n        parentGlobalNotFound: parentMatch.globalNotFound,\n      }\n    },\n  })\n\n  const childMatchId = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const index = matches.findIndex((d) => d.id === matchId)\n      return matches[index + 1]?.id\n    },\n  })\n\n  if (parentGlobalNotFound) {\n    return renderRouteNotFound(router, route, undefined)\n  }\n\n  if (!childMatchId) {\n    return null\n  }\n\n  const nextMatch = <Match matchId={childMatchId} />\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  if (matchId === rootRouteId) {\n    return (\n      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n    )\n  }\n\n  return nextMatch\n})\n"],"names":["matchIndex","match"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBgB;;AACd;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACU;AAIxC;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAChC;AAAA;AAKV;AACA;;AACE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAA2C;AAEjCA;AACAC;AACC;AAAA;AACO;AACV;AACA;AACA;AACA;AACA;AACD;AACDD;AAAA;AAEJ;AAGF;AAII;AACE;AACA;AACF;AAGQ;AAAiC;AAEzC;AAAc;AAGN;AAEH;AAAwC;AAG7C;AAGF;AAMA;AAAY;AAGV;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACP;AACY;AAClB;AAAA;AAAA;AAKF;AACF;AAEM;AAAiC;AAEvC;AAAY;AACd;AAGE;AAEF;AAGI;AAEF;AAEI;AACM;AACC;AAAyB;AAC3B;AACgB;AAGb;AACN;AACA;AAGJ;AAES;AACE;AAAA;AACF;AACgB;;AACjB;AACI;AACK;AAEgC;AAErC;AAAA;AACN;AAAA;AAEH;AACY;AACjB;AAGF;AAAY;AAGd;AAEA;AAEA;AAEK;AAEG;AACH;AAGP;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEA;AAA0C;AAE5C;AACA;AACA;AAAA;AACE;AACmD;AAE9C;AAAA;AAC6B;AAAA;AAEtC;AAGF;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAC7B;AAGF;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;"}

package/dist/cjs/Match.d.cts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare function Match({ matchId }: {
+    matchId: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Outlet: React.NamedExoticComponent<object>;

package/dist/cjs/Matches.cjs

@@ -2,16 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const invariant = require("tiny-invariant");
 const warning = require("tiny-warning");
 const CatchBoundary = require("./CatchBoundary.cjs");
 const useRouterState = require("./useRouterState.cjs");
 const useRouter = require("./useRouter.cjs");
-const utils = require("./utils.cjs");
-const notFound = require("./not-found.cjs");
-const redirects = require("./redirects.cjs");
 const Transitioner = require("./Transitioner.cjs");
-const root = require("./root.cjs");
+const matchContext = require("./matchContext.cjs");
+const Match = require("./Match.cjs");
+const SafeFragment = require("./SafeFragment.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -29,11 +27,10 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const matchContext = React__namespace.createContext(void 0);
 function Matches() {
   const router = useRouter.useRouter();
   const pendingElement = router.options.defaultPendingComponent ? /* @__PURE__ */ jsxRuntime.jsx(router.options.defaultPendingComponent, {}) : null;
-  const ResolvedSuspense = !router.state.matches.length ? React__namespace.Suspense : SafeFragment;
+  const ResolvedSuspense = !router.state.matches.length ? React__namespace.Suspense : SafeFragment.SafeFragment;
   const inner = /* @__PURE__ */ jsxRuntime.jsxs(ResolvedSuspense, { fallback: pendingElement, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Transitioner.Transitioner, {}),
     /* @__PURE__ */ jsxRuntime.jsx(MatchesInner, {})
@@ -50,7 +47,7 @@ function MatchesInner() {
   const resetKey = useRouterState.useRouterState({
     select: (s) => s.resolvedLocation.state.key
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(matchContext.matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsxRuntime.jsx(
     CatchBoundary.CatchBoundary,
     {
       getResetKey: () => resetKey,
@@ -62,226 +59,10 @@ function MatchesInner() {
         );
         warning(false, error.message || error.toString());
       },
-      children: matchId ? /* @__PURE__ */ jsxRuntime.jsx(Match, { matchId }) : null
+      children: matchId ? /* @__PURE__ */ jsxRuntime.jsx(Match.Match, { matchId }) : null
     }
   ) });
 }
-function SafeFragment(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
-}
-function Match({ matchId }) {
-  var _a, _b;
-  const router = useRouter.useRouter();
-  const routeId = useRouterState.useRouterState({
-    select: (s) => {
-      var _a2;
-      return (_a2 = s.matches.find((d) => d.id === matchId)) == null ? void 0 : _a2.routeId;
-    }
-  });
-  invariant(
-    routeId,
-    `Could not find routeId for matchId "${matchId}". Please file an issue!`
-  );
-  const route = router.routesById[routeId];
-  const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
-  const pendingElement = PendingComponent ? /* @__PURE__ */ jsxRuntime.jsx(PendingComponent, {}) : null;
-  const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent;
-  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch;
-  const routeNotFoundComponent = route.isRoot ? (
-    // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
-    route.options.notFoundComponent ?? ((_a = router.options.notFoundRoute) == null ? void 0 : _a.options.component)
-  ) : route.options.notFoundComponent;
-  const ResolvedSuspenseBoundary = (
-    // If we're on the root route, allow forcefully wrapping in suspense
-    (!route.isRoot || route.options.wrapInSuspense) && (route.options.wrapInSuspense ?? PendingComponent ?? ((_b = route.options.errorComponent) == null ? void 0 : _b.preload)) ? React__namespace.Suspense : SafeFragment
-  );
-  const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary.CatchBoundary : SafeFragment;
-  const ResolvedNotFoundBoundary = routeNotFoundComponent ? notFound.CatchNotFound : SafeFragment;
-  const resetKey = useRouterState.useRouterState({
-    select: (s) => s.resolvedLocation.state.key
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsxRuntime.jsx(ResolvedSuspenseBoundary, { fallback: pendingElement, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ResolvedCatchBoundary,
-    {
-      getResetKey: () => resetKey,
-      errorComponent: routeErrorComponent || CatchBoundary.ErrorComponent,
-      onCatch: (error, errorInfo) => {
-        if (notFound.isNotFound(error)) throw error;
-        warning(false, `Error in route match: ${matchId}`);
-        routeOnCatch == null ? void 0 : routeOnCatch(error, errorInfo);
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ResolvedNotFoundBoundary,
-        {
-          fallback: (error) => {
-            if (!routeNotFoundComponent || error.routeId && error.routeId !== routeId || !error.routeId && !route.isRoot)
-              throw error;
-            return React__namespace.createElement(routeNotFoundComponent, error);
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(MatchInner, { matchId })
-        }
-      )
-    }
-  ) }) });
-}
-function MatchInner({ matchId }) {
-  var _a, _b;
-  const router = useRouter.useRouter();
-  const routeId = useRouterState.useRouterState({
-    select: (s) => {
-      var _a2;
-      return (_a2 = s.matches.find((d) => d.id === matchId)) == null ? void 0 : _a2.routeId;
-    }
-  });
-  const route = router.routesById[routeId];
-  const match = useRouterState.useRouterState({
-    select: (s) => utils.pick(s.matches.find((d) => d.id === matchId), [
-      "id",
-      "status",
-      "error",
-      "loadPromise",
-      "minPendingPromise"
-    ])
-  });
-  const RouteErrorComponent = (route.options.errorComponent ?? router.options.defaultErrorComponent) || CatchBoundary.ErrorComponent;
-  if (match.status === "notFound") {
-    let error;
-    if (isServerSideError(match.error)) {
-      const deserializeError = ((_a = router.options.errorSerializer) == null ? void 0 : _a.deserialize) ?? defaultDeserializeError;
-      error = deserializeError(match.error.data);
-    } else {
-      error = match.error;
-    }
-    invariant(notFound.isNotFound(error), "Expected a notFound error");
-    return renderRouteNotFound(router, route, error);
-  }
-  if (match.status === "redirected") {
-    invariant(redirects.isRedirect(match.error), "Expected a redirect error");
-    throw match.loadPromise;
-  }
-  if (match.status === "error") {
-    if (router.isServer) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        RouteErrorComponent,
-        {
-          error: match.error,
-          info: {
-            componentStack: ""
-          }
-        }
-      );
-    }
-    if (isServerSideError(match.error)) {
-      const deserializeError = ((_b = router.options.errorSerializer) == null ? void 0 : _b.deserialize) ?? defaultDeserializeError;
-      throw deserializeError(match.error.data);
-    } else {
-      throw match.error;
-    }
-  }
-  if (match.status === "pending") {
-    const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
-    if (pendingMinMs && !match.minPendingPromise) {
-      match.minPendingPromise = utils.createControlledPromise();
-      if (!router.isServer) {
-        Promise.resolve().then(() => {
-          router.__store.setState((s) => ({
-            ...s,
-            matches: s.matches.map(
-              (d) => d.id === match.id ? { ...d, minPendingPromise: utils.createControlledPromise() } : d
-            )
-          }));
-        });
-        setTimeout(() => {
-          router.__store.setState((s) => {
-            return {
-              ...s,
-              matches: s.matches.map(
-                (d) => {
-                  var _a2;
-                  return d.id === match.id ? {
-                    ...d,
-                    minPendingPromise: ((_a2 = d.minPendingPromise) == null ? void 0 : _a2.resolve(), void 0)
-                  } : d;
-                }
-              )
-            };
-          });
-        }, pendingMinMs);
-      }
-    }
-    throw match.loadPromise;
-  }
-  if (match.status === "success") {
-    const Comp = route.options.component ?? router.options.defaultComponent;
-    if (Comp) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Comp, {});
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(Outlet, {});
-  }
-  invariant(
-    false,
-    "Idle routeMatch status encountered during rendering! You should never see this. File an issue!"
-  );
-}
-const Outlet = React__namespace.memo(function Outlet2() {
-  const router = useRouter.useRouter();
-  const matchId = React__namespace.useContext(matchContext);
-  const routeId = useRouterState.useRouterState({
-    select: (s) => {
-      var _a;
-      return (_a = s.matches.find((d) => d.id === matchId)) == null ? void 0 : _a.routeId;
-    }
-  });
-  const route = router.routesById[routeId];
-  const { parentGlobalNotFound } = useRouterState.useRouterState({
-    select: (s) => {
-      const matches = s.matches;
-      const parentMatch = matches.find((d) => d.id === matchId);
-      invariant(
-        parentMatch,
-        `Could not find parent match for matchId "${matchId}"`
-      );
-      return {
-        parentGlobalNotFound: parentMatch.globalNotFound
-      };
-    }
-  });
-  const childMatchId = useRouterState.useRouterState({
-    select: (s) => {
-      var _a;
-      const matches = s.matches;
-      const index = matches.findIndex((d) => d.id === matchId);
-      return (_a = matches[index + 1]) == null ? void 0 : _a.id;
-    }
-  });
-  if (parentGlobalNotFound) {
-    return renderRouteNotFound(router, route, void 0);
-  }
-  if (!childMatchId) {
-    return null;
-  }
-  const nextMatch = /* @__PURE__ */ jsxRuntime.jsx(Match, { matchId: childMatchId });
-  const pendingElement = router.options.defaultPendingComponent ? /* @__PURE__ */ jsxRuntime.jsx(router.options.defaultPendingComponent, {}) : null;
-  if (matchId === root.rootRouteId) {
-    return /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Suspense, { fallback: pendingElement, children: nextMatch });
-  }
-  return nextMatch;
-});
-function renderRouteNotFound(router, route, data) {
-  if (!route.options.notFoundComponent) {
-    if (router.options.defaultNotFoundComponent) {
-      return /* @__PURE__ */ jsxRuntime.jsx(router.options.defaultNotFoundComponent, { data });
-    }
-    if (process.env.NODE_ENV === "development") {
-      warning(
-        route.options.notFoundComponent,
-        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<div>Not Found<div>)`
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(notFound.DefaultGlobalNotFound, {});
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(route.options.notFoundComponent, { data });
-}
 function useMatchRoute() {
   const router = useRouter.useRouter();
   return React__namespace.useCallback(
@@ -314,7 +95,7 @@ function useMatches(opts) {
   });
 }
 function useParentMatches(opts) {
-  const contextMatchId = React__namespace.useContext(matchContext);
+  const contextMatchId = React__namespace.useContext(matchContext.matchContext);
   return useMatches({
     select: (matches) => {
       matches = matches.slice(
@@ -326,7 +107,7 @@ function useParentMatches(opts) {
   });
 }
 function useChildMatches(opts) {
-  const contextMatchId = React__namespace.useContext(matchContext);
+  const contextMatchId = React__namespace.useContext(matchContext.matchContext);
   return useMatches({
     select: (matches) => {
       matches = matches.slice(
@@ -336,30 +117,8 @@ function useChildMatches(opts) {
     }
   });
 }
-function isServerSideError(error) {
-  if (!(typeof error === "object" && error && "data" in error)) return false;
-  if (!("__isServerError" in error && error.__isServerError)) return false;
-  if (!(typeof error.data === "object" && error.data)) return false;
-  return error.__isServerError === true;
-}
-function defaultDeserializeError(serializedData) {
-  if ("name" in serializedData && "message" in serializedData) {
-    const error = new Error(serializedData.message);
-    error.name = serializedData.name;
-    if (process.env.NODE_ENV === "development") {
-      error.stack = serializedData.stack;
-    }
-    return error;
-  }
-  return serializedData.data;
-}
-exports.Match = Match;
 exports.MatchRoute = MatchRoute;
 exports.Matches = Matches;
-exports.Outlet = Outlet;
-exports.defaultDeserializeError = defaultDeserializeError;
-exports.isServerSideError = isServerSideError;
-exports.matchContext = matchContext;
 exports.useChildMatches = useChildMatches;
 exports.useMatchRoute = useMatchRoute;
 exports.useMatches = useMatches;