@depup/tanstack__react-router 1.167.0-depup.0 → 1.167.3-depup.0

package/dist/esm/ClientOnly.js

@@ -1,21 +1,52 @@
+import React from "react";
 import { jsx } from "react/jsx-runtime";
-import React__default from "react";
+//#region src/ClientOnly.tsx
+/**
+* Render the children only after the JS has loaded client-side. Use an optional
+* fallback component if the JS is not yet loaded.
+*
+* @example
+* Render a Chart component if JS loads, renders a simple FakeChart
+* component server-side or if there is no JS. The FakeChart can have only the
+* UI without the behavior or be a loading spinner or skeleton.
+*
+* ```tsx
+* return (
+*   <ClientOnly fallback={<FakeChart />}>
+*     <Chart />
+*   </ClientOnly>
+* )
+* ```
+*/
 function ClientOnly({ children, fallback = null }) {
-  return useHydrated() ? /* @__PURE__ */ jsx(React__default.Fragment, { children }) : /* @__PURE__ */ jsx(React__default.Fragment, { children: fallback });
+	return useHydrated() ? /* @__PURE__ */ jsx(React.Fragment, { children }) : /* @__PURE__ */ jsx(React.Fragment, { children: fallback });
 }
+/**
+* Return a boolean indicating if the JS has been hydrated already.
+* When doing Server-Side Rendering, the result will always be false.
+* When doing Client-Side Rendering, the result will always be false on the
+* first render and true from then on. Even if a new component renders it will
+* always start with true.
+*
+* @example
+* ```tsx
+* // Disable a button that needs JS to work.
+* let hydrated = useHydrated()
+* return (
+*   <button type="button" disabled={!hydrated} onClick={doSomethingCustom}>
+*     Click me
+*   </button>
+* )
+* ```
+* @returns True if the JS has been hydrated already, false otherwise.
+*/
 function useHydrated() {
-  return React__default.useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false
-  );
+	return React.useSyncExternalStore(subscribe, () => true, () => false);
 }
 function subscribe() {
-  return () => {
-  };
+	return () => {};
 }
-export {
-  ClientOnly,
-  useHydrated
-};
-//# sourceMappingURL=ClientOnly.js.map
+//#endregion
+export { ClientOnly, useHydrated };
+
+//# sourceMappingURL=ClientOnly.js.map

package/dist/esm/ClientOnly.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClientOnly.js","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render when the JS is loaded.\n   */\n  children: React.ReactNode\n  /**\n   * The fallback component to render if the JS is not yet loaded.\n   */\n  fallback?: React.ReactNode\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n *   <ClientOnly fallback={<FakeChart />}>\n *     <Chart />\n *   </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n  return useHydrated() ? (\n    <React.Fragment>{children}</React.Fragment>\n  ) : (\n    <React.Fragment>{fallback}</React.Fragment>\n  )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * let hydrated = useHydrated()\n * return (\n *   <button type=\"button\" disabled={!hydrated} onClick={doSomethingCustom}>\n *     Click me\n *   </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated(): boolean {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  )\n}\n\nfunction subscribe() {\n  return () => {}\n}\n"],"names":["React"],"mappings":";;AA8BO,SAAS,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,SAAO,YAAA,IACL,oBAACA,eAAM,UAAN,EAAgB,SAAA,CAAS,IAE1B,oBAACA,eAAM,UAAN,EAAgB,UAAA,SAAA,CAAS;AAE9B;AAqBO,SAAS,cAAuB;AACrC,SAAOA,eAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAEV;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;"}
+{"version":3,"file":"ClientOnly.js","names":[],"sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render when the JS is loaded.\n   */\n  children: React.ReactNode\n  /**\n   * The fallback component to render if the JS is not yet loaded.\n   */\n  fallback?: React.ReactNode\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n *   <ClientOnly fallback={<FakeChart />}>\n *     <Chart />\n *   </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n  return useHydrated() ? (\n    <React.Fragment>{children}</React.Fragment>\n  ) : (\n    <React.Fragment>{fallback}</React.Fragment>\n  )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * let hydrated = useHydrated()\n * return (\n *   <button type=\"button\" disabled={!hydrated} onClick={doSomethingCustom}>\n *     Click me\n *   </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated(): boolean {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  )\n}\n\nfunction subscribe() {\n  return () => {}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,QAAO,aAAa,GAClB,oBAAC,MAAM,UAAP,EAAiB,UAA0B,CAAA,GAE3C,oBAAC,MAAM,UAAP,EAAA,UAAiB,UAA0B,CAAA;;;;;;;;;;;;;;;;;;;;;AAuB/C,SAAgB,cAAuB;AACrC,QAAO,MAAM,qBACX,iBACM,YACA,MACP;;AAGH,SAAS,YAAY;AACnB,cAAa"}

package/dist/esm/HeadContent.dev.js

@@ -1,25 +1,35 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { createElement } from "react";
-import { Asset } from "./Asset.js";
-import { useRouter } from "./useRouter.js";
 import { useHydrated } from "./ClientOnly.js";
+import { useRouter } from "./useRouter.js";
+import { Asset } from "./Asset.js";
 import { useTags } from "./headContentUtils.js";
-const DEV_STYLES_ATTR = "data-tanstack-router-dev-styles";
+import * as React$1 from "react";
+import { createElement } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/HeadContent.dev.tsx
+var DEV_STYLES_ATTR = "data-tanstack-router-dev-styles";
+/**
+* Render route-managed head tags (title, meta, links, styles, head scripts).
+* Place inside the document head of your app shell.
+*
+* Development version: filters out dev styles link after hydration and
+* includes a fallback cleanup effect for hydration mismatch cases.
+*
+* @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
+*/
 function HeadContent() {
-  const tags = useTags();
-  const router = useRouter();
-  const nonce = router.options.ssr?.nonce;
-  const hydrated = useHydrated();
-  React.useEffect(() => {
-    if (hydrated) {
-      document.querySelectorAll(`link[${DEV_STYLES_ATTR}]`).forEach((el) => el.remove());
-    }
-  }, [hydrated]);
-  const filteredTags = hydrated ? tags.filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR]) : tags;
-  return /* @__PURE__ */ jsx(Fragment, { children: filteredTags.map((tag) => /* @__PURE__ */ createElement(Asset, { ...tag, key: `tsr-meta-${JSON.stringify(tag)}`, nonce })) });
+	const tags = useTags();
+	const nonce = useRouter().options.ssr?.nonce;
+	const hydrated = useHydrated();
+	React$1.useEffect(() => {
+		if (hydrated) document.querySelectorAll(`link[${DEV_STYLES_ATTR}]`).forEach((el) => el.remove());
+	}, [hydrated]);
+	return /* @__PURE__ */ jsx(Fragment, { children: (hydrated ? tags.filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR]) : tags).map((tag) => /* @__PURE__ */ createElement(Asset, {
+		...tag,
+		key: `tsr-meta-${JSON.stringify(tag)}`,
+		nonce
+	})) });
 }
-export {
-  HeadContent
-};
-//# sourceMappingURL=HeadContent.dev.js.map
+//#endregion
+export { HeadContent };
+
+//# sourceMappingURL=HeadContent.dev.js.map

package/dist/esm/HeadContent.dev.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeadContent.dev.js","sources":["../../src/HeadContent.dev.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useHydrated } from './ClientOnly'\nimport { useTags } from './headContentUtils'\n\nconst DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n *\n * Development version: filters out dev styles link after hydration and\n * includes a fallback cleanup effect for hydration mismatch cases.\n *\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  const hydrated = useHydrated()\n\n  // Fallback cleanup for hydration mismatch cases\n  // Runs when hydration completes to remove any orphaned dev styles links from DOM\n  React.useEffect(() => {\n    if (hydrated) {\n      document\n        .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)\n        .forEach((el) => el.remove())\n    }\n  }, [hydrated])\n\n  // Filter out dev styles after hydration\n  const filteredTags = hydrated\n    ? tags.filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])\n    : tags\n\n  return (\n    <>\n      {filteredTags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,kBAAkB;AAWjB,SAAS,cAAc;AAC5B,QAAM,OAAO,QAAA;AACb,QAAM,SAAS,UAAA;AACf,QAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,QAAM,WAAW,YAAA;AAIjB,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eACG,iBAAiB,QAAQ,eAAe,GAAG,EAC3C,QAAQ,CAAC,OAAO,GAAG,OAAA,CAAQ;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,eAAe,WACjB,KAAK,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,eAAe,CAAC,IAClD;AAEJ,yCAEK,UAAA,aAAa,IAAI,CAAC,QACjB,8BAAC,SAAO,GAAG,KAAK,KAAK,YAAY,KAAK,UAAU,GAAG,CAAC,IAAI,OAAc,CACvE,GACH;AAEJ;"}
+{"version":3,"file":"HeadContent.dev.js","names":[],"sources":["../../src/HeadContent.dev.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useHydrated } from './ClientOnly'\nimport { useTags } from './headContentUtils'\n\nconst DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n *\n * Development version: filters out dev styles link after hydration and\n * includes a fallback cleanup effect for hydration mismatch cases.\n *\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  const hydrated = useHydrated()\n\n  // Fallback cleanup for hydration mismatch cases\n  // Runs when hydration completes to remove any orphaned dev styles links from DOM\n  React.useEffect(() => {\n    if (hydrated) {\n      document\n        .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)\n        .forEach((el) => el.remove())\n    }\n  }, [hydrated])\n\n  // Filter out dev styles after hydration\n  const filteredTags = hydrated\n    ? tags.filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])\n    : tags\n\n  return (\n    <>\n      {filteredTags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAMA,IAAM,kBAAkB;;;;;;;;;;AAWxB,SAAgB,cAAc;CAC5B,MAAM,OAAO,SAAS;CAEtB,MAAM,QADS,WAAW,CACL,QAAQ,KAAK;CAClC,MAAM,WAAW,aAAa;AAI9B,SAAM,gBAAgB;AACpB,MAAI,SACF,UACG,iBAAiB,QAAQ,gBAAgB,GAAG,CAC5C,SAAS,OAAO,GAAG,QAAQ,CAAC;IAEhC,CAAC,SAAS,CAAC;AAOd,QACE,oBAAA,UAAA,EAAA,WALmB,WACjB,KAAK,QAAQ,QAAQ,CAAC,IAAI,QAAQ,iBAAiB,GACnD,MAIc,KAAK,QACjB,8BAAC,OAAD;EAAO,GAAI;EAAK,KAAK,YAAY,KAAK,UAAU,IAAI;EAAW;EAAS,CAAA,CACxE,EACD,CAAA"}

package/dist/esm/HeadContent.js

@@ -1,15 +1,24 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { createElement } from "react";
-import { Asset } from "./Asset.js";
 import { useRouter } from "./useRouter.js";
+import { Asset } from "./Asset.js";
 import { useTags } from "./headContentUtils.js";
+import { createElement } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/HeadContent.tsx
+/**
+* Render route-managed head tags (title, meta, links, styles, head scripts).
+* Place inside the document head of your app shell.
+* @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
+*/
 function HeadContent() {
-  const tags = useTags();
-  const router = useRouter();
-  const nonce = router.options.ssr?.nonce;
-  return /* @__PURE__ */ jsx(Fragment, { children: tags.map((tag) => /* @__PURE__ */ createElement(Asset, { ...tag, key: `tsr-meta-${JSON.stringify(tag)}`, nonce })) });
+	const tags = useTags();
+	const nonce = useRouter().options.ssr?.nonce;
+	return /* @__PURE__ */ jsx(Fragment, { children: tags.map((tag) => /* @__PURE__ */ createElement(Asset, {
+		...tag,
+		key: `tsr-meta-${JSON.stringify(tag)}`,
+		nonce
+	})) });
 }
-export {
-  HeadContent
-};
-//# sourceMappingURL=HeadContent.js.map
+//#endregion
+export { HeadContent };
+
+//# sourceMappingURL=HeadContent.js.map

package/dist/esm/HeadContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeadContent.js","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useTags } from './headContentUtils'\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  return (\n    <>\n      {tags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;AAUO,SAAS,cAAc;AAC5B,QAAM,OAAO,QAAA;AACb,QAAM,SAAS,UAAA;AACf,QAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,yCAEK,UAAA,KAAK,IAAI,CAAC,QACT,8BAAC,SAAO,GAAG,KAAK,KAAK,YAAY,KAAK,UAAU,GAAG,CAAC,IAAI,OAAc,CACvE,GACH;AAEJ;"}
+{"version":3,"file":"HeadContent.js","names":[],"sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useTags } from './headContentUtils'\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  return (\n    <>\n      {tags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,cAAc;CAC5B,MAAM,OAAO,SAAS;CAEtB,MAAM,QADS,WAAW,CACL,QAAQ,KAAK;AAClC,QACE,oBAAA,UAAA,EAAA,UACG,KAAK,KAAK,QACT,8BAAC,OAAD;EAAO,GAAI;EAAK,KAAK,YAAY,KAAK,UAAU,IAAI;EAAW;EAAS,CAAA,CACxE,EACD,CAAA"}

package/dist/esm/Match.js

@@ -1,237 +1,192 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import invariant from "tiny-invariant";
-import warning from "tiny-warning";
-import { isNotFound, rootRouteId, createControlledPromise, isRedirect, getLocationChangeInfo } from "@tanstack/router-core";
-import { isServer } from "@tanstack/router-core/isServer";
 import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
-import { useRouterState } from "./useRouterState.js";
+import { ClientOnly } from "./ClientOnly.js";
 import { useRouter } from "./useRouter.js";
-import { CatchNotFound } from "./not-found.js";
+import { useRouterState } from "./useRouterState.js";
 import { matchContext } from "./matchContext.js";
+import { CatchNotFound } from "./not-found.js";
 import { SafeFragment } from "./SafeFragment.js";
 import { renderRouteNotFound } from "./renderRouteNotFound.js";
 import { ScrollRestoration } from "./scroll-restoration.js";
-import { ClientOnly } from "./ClientOnly.js";
-const Match = React.memo(function MatchImpl({
-  matchId
-}) {
-  const router = useRouter();
-  const matchState = useRouterState({
-    select: (s) => {
-      const matchIndex = s.matches.findIndex((d) => d.id === matchId);
-      const match = s.matches[matchIndex];
-      invariant(
-        match,
-        `Could not find match for matchId "${matchId}". Please file an issue!`
-      );
-      return {
-        routeId: match.routeId,
-        ssr: match.ssr,
-        _displayPending: match._displayPending,
-        resetKey: s.loadedAt,
-        parentRouteId: s.matches[matchIndex - 1]?.routeId
-      };
-    },
-    structuralSharing: true
-  });
-  const route = router.routesById[matchState.routeId];
-  const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
-  const pendingElement = PendingComponent ? /* @__PURE__ */ 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 ?? router.options.notFoundRoute?.options.component
-  ) : route.options.notFoundComponent;
-  const resolvedNoSsr = matchState.ssr === false || matchState.ssr === "data-only";
-  const ResolvedSuspenseBoundary = (
-    // If we're on the root route, allow forcefully wrapping in suspense
-    (!route.isRoot || route.options.wrapInSuspense || resolvedNoSsr) && (route.options.wrapInSuspense ?? PendingComponent ?? (route.options.errorComponent?.preload || resolvedNoSsr)) ? React.Suspense : SafeFragment
-  );
-  const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
-  const ResolvedNotFoundBoundary = routeNotFoundComponent ? CatchNotFound : SafeFragment;
-  const ShellComponent = route.isRoot ? route.options.shellComponent ?? SafeFragment : SafeFragment;
-  return /* @__PURE__ */ jsxs(ShellComponent, { children: [
-    /* @__PURE__ */ jsx(matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsx(ResolvedSuspenseBoundary, { fallback: pendingElement, children: /* @__PURE__ */ jsx(
-      ResolvedCatchBoundary,
-      {
-        getResetKey: () => matchState.resetKey,
-        errorComponent: routeErrorComponent || ErrorComponent,
-        onCatch: (error, errorInfo) => {
-          if (isNotFound(error)) throw error;
-          warning(false, `Error in route match: ${matchId}`);
-          routeOnCatch?.(error, errorInfo);
-        },
-        children: /* @__PURE__ */ jsx(
-          ResolvedNotFoundBoundary,
-          {
-            fallback: (error) => {
-              if (!routeNotFoundComponent || error.routeId && error.routeId !== matchState.routeId || !error.routeId && !route.isRoot)
-                throw error;
-              return React.createElement(routeNotFoundComponent, error);
-            },
-            children: resolvedNoSsr || matchState._displayPending ? /* @__PURE__ */ jsx(ClientOnly, { fallback: pendingElement, children: /* @__PURE__ */ jsx(MatchInner, { matchId }) }) : /* @__PURE__ */ jsx(MatchInner, { matchId })
-          }
-        )
-      }
-    ) }) }),
-    matchState.parentRouteId === rootRouteId && router.options.scrollRestoration ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(OnRendered, {}),
-      /* @__PURE__ */ jsx(ScrollRestoration, {})
-    ] }) : null
-  ] });
+import { createControlledPromise, getLocationChangeInfo, isNotFound, isRedirect, rootRouteId } from "@tanstack/router-core";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import warning from "tiny-warning";
+import invariant from "tiny-invariant";
+import { isServer } from "@tanstack/router-core/isServer";
+//#region src/Match.tsx
+var Match = React$1.memo(function MatchImpl({ matchId }) {
+	const router = useRouter();
+	const matchState = useRouterState({
+		select: (s) => {
+			const matchIndex = s.matches.findIndex((d) => d.id === matchId);
+			const match = s.matches[matchIndex];
+			invariant(match, `Could not find match for matchId "${matchId}". Please file an issue!`);
+			return {
+				routeId: match.routeId,
+				ssr: match.ssr,
+				_displayPending: match._displayPending,
+				resetKey: s.loadedAt,
+				parentRouteId: s.matches[matchIndex - 1]?.routeId
+			};
+		},
+		structuralSharing: true
+	});
+	const route = router.routesById[matchState.routeId];
+	const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
+	const pendingElement = PendingComponent ? /* @__PURE__ */ jsx(PendingComponent, {}) : null;
+	const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent;
+	const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch;
+	const routeNotFoundComponent = route.isRoot ? route.options.notFoundComponent ?? router.options.notFoundRoute?.options.component : route.options.notFoundComponent;
+	const resolvedNoSsr = matchState.ssr === false || matchState.ssr === "data-only";
+	const ResolvedSuspenseBoundary = (!route.isRoot || route.options.wrapInSuspense || resolvedNoSsr) && (route.options.wrapInSuspense ?? PendingComponent ?? (route.options.errorComponent?.preload || resolvedNoSsr)) ? React$1.Suspense : SafeFragment;
+	const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
+	const ResolvedNotFoundBoundary = routeNotFoundComponent ? CatchNotFound : SafeFragment;
+	return /* @__PURE__ */ jsxs(route.isRoot ? route.options.shellComponent ?? SafeFragment : SafeFragment, { children: [/* @__PURE__ */ jsx(matchContext.Provider, {
+		value: matchId,
+		children: /* @__PURE__ */ jsx(ResolvedSuspenseBoundary, {
+			fallback: pendingElement,
+			children: /* @__PURE__ */ jsx(ResolvedCatchBoundary, {
+				getResetKey: () => matchState.resetKey,
+				errorComponent: routeErrorComponent || ErrorComponent,
+				onCatch: (error, errorInfo) => {
+					if (isNotFound(error)) throw error;
+					warning(false, `Error in route match: ${matchId}`);
+					routeOnCatch?.(error, errorInfo);
+				},
+				children: /* @__PURE__ */ jsx(ResolvedNotFoundBoundary, {
+					fallback: (error) => {
+						if (!routeNotFoundComponent || error.routeId && error.routeId !== matchState.routeId || !error.routeId && !route.isRoot) throw error;
+						return React$1.createElement(routeNotFoundComponent, error);
+					},
+					children: resolvedNoSsr || matchState._displayPending ? /* @__PURE__ */ jsx(ClientOnly, {
+						fallback: pendingElement,
+						children: /* @__PURE__ */ jsx(MatchInner, { matchId })
+					}) : /* @__PURE__ */ jsx(MatchInner, { matchId })
+				})
+			})
+		})
+	}), matchState.parentRouteId === rootRouteId && router.options.scrollRestoration ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OnRendered, {}), /* @__PURE__ */ jsx(ScrollRestoration, {})] }) : null] });
 });
 function OnRendered() {
-  const router = useRouter();
-  const prevLocationRef = React.useRef(
-    void 0
-  );
-  return /* @__PURE__ */ jsx(
-    "script",
-    {
-      suppressHydrationWarning: true,
-      ref: (el) => {
-        if (el && (prevLocationRef.current === void 0 || prevLocationRef.current.href !== router.latestLocation.href)) {
-          router.emit({
-            type: "onRendered",
-            ...getLocationChangeInfo(router.state)
-          });
-          prevLocationRef.current = router.latestLocation;
-        }
-      }
-    },
-    router.latestLocation.state.__TSR_key
-  );
+	const router = useRouter();
+	const prevLocationRef = React$1.useRef(void 0);
+	return /* @__PURE__ */ jsx("script", {
+		suppressHydrationWarning: true,
+		ref: (el) => {
+			if (el && (prevLocationRef.current === void 0 || prevLocationRef.current.href !== router.latestLocation.href)) {
+				router.emit({
+					type: "onRendered",
+					...getLocationChangeInfo(router.state)
+				});
+				prevLocationRef.current = router.latestLocation;
+			}
+		}
+	}, router.latestLocation.state.__TSR_key);
 }
-const MatchInner = React.memo(function MatchInnerImpl({
-  matchId
-}) {
-  const router = useRouter();
-  const { match, key, routeId } = useRouterState({
-    select: (s) => {
-      const match2 = s.matches.find((d) => d.id === matchId);
-      const routeId2 = match2.routeId;
-      const remountFn = router.routesById[routeId2].options.remountDeps ?? router.options.defaultRemountDeps;
-      const remountDeps = remountFn?.({
-        routeId: routeId2,
-        loaderDeps: match2.loaderDeps,
-        params: match2._strictParams,
-        search: match2._strictSearch
-      });
-      const key2 = remountDeps ? JSON.stringify(remountDeps) : void 0;
-      return {
-        key: key2,
-        routeId: routeId2,
-        match: {
-          id: match2.id,
-          status: match2.status,
-          error: match2.error,
-          _forcePending: match2._forcePending,
-          _displayPending: match2._displayPending
-        }
-      };
-    },
-    structuralSharing: true
-  });
-  const route = router.routesById[routeId];
-  const out = React.useMemo(() => {
-    const Comp = route.options.component ?? router.options.defaultComponent;
-    if (Comp) {
-      return /* @__PURE__ */ jsx(Comp, {}, key);
-    }
-    return /* @__PURE__ */ jsx(Outlet, {});
-  }, [key, route.options.component, router.options.defaultComponent]);
-  if (match._displayPending) {
-    throw router.getMatch(match.id)?._nonReactive.displayPendingPromise;
-  }
-  if (match._forcePending) {
-    throw router.getMatch(match.id)?._nonReactive.minPendingPromise;
-  }
-  if (match.status === "pending") {
-    const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
-    if (pendingMinMs) {
-      const routerMatch = router.getMatch(match.id);
-      if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
-        if (!(isServer ?? router.isServer)) {
-          const minPendingPromise = createControlledPromise();
-          routerMatch._nonReactive.minPendingPromise = minPendingPromise;
-          setTimeout(() => {
-            minPendingPromise.resolve();
-            routerMatch._nonReactive.minPendingPromise = void 0;
-          }, pendingMinMs);
-        }
-      }
-    }
-    throw router.getMatch(match.id)?._nonReactive.loadPromise;
-  }
-  if (match.status === "notFound") {
-    invariant(isNotFound(match.error), "Expected a notFound error");
-    return renderRouteNotFound(router, route, match.error);
-  }
-  if (match.status === "redirected") {
-    invariant(isRedirect(match.error), "Expected a redirect error");
-    throw router.getMatch(match.id)?._nonReactive.loadPromise;
-  }
-  if (match.status === "error") {
-    if (isServer ?? router.isServer) {
-      const RouteErrorComponent = (route.options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent;
-      return /* @__PURE__ */ jsx(
-        RouteErrorComponent,
-        {
-          error: match.error,
-          reset: void 0,
-          info: {
-            componentStack: ""
-          }
-        }
-      );
-    }
-    throw match.error;
-  }
-  return out;
+var MatchInner = React$1.memo(function MatchInnerImpl({ matchId }) {
+	const router = useRouter();
+	const { match, key, routeId } = useRouterState({
+		select: (s) => {
+			const match = s.matches.find((d) => d.id === matchId);
+			const routeId = match.routeId;
+			const remountDeps = (router.routesById[routeId].options.remountDeps ?? router.options.defaultRemountDeps)?.({
+				routeId,
+				loaderDeps: match.loaderDeps,
+				params: match._strictParams,
+				search: match._strictSearch
+			});
+			return {
+				key: remountDeps ? JSON.stringify(remountDeps) : void 0,
+				routeId,
+				match: {
+					id: match.id,
+					status: match.status,
+					error: match.error,
+					_forcePending: match._forcePending,
+					_displayPending: match._displayPending
+				}
+			};
+		},
+		structuralSharing: true
+	});
+	const route = router.routesById[routeId];
+	const out = React$1.useMemo(() => {
+		const Comp = route.options.component ?? router.options.defaultComponent;
+		if (Comp) return /* @__PURE__ */ jsx(Comp, {}, key);
+		return /* @__PURE__ */ jsx(Outlet, {});
+	}, [
+		key,
+		route.options.component,
+		router.options.defaultComponent
+	]);
+	if (match._displayPending) throw router.getMatch(match.id)?._nonReactive.displayPendingPromise;
+	if (match._forcePending) throw router.getMatch(match.id)?._nonReactive.minPendingPromise;
+	if (match.status === "pending") {
+		const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
+		if (pendingMinMs) {
+			const routerMatch = router.getMatch(match.id);
+			if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
+				if (!(isServer ?? router.isServer)) {
+					const minPendingPromise = createControlledPromise();
+					routerMatch._nonReactive.minPendingPromise = minPendingPromise;
+					setTimeout(() => {
+						minPendingPromise.resolve();
+						routerMatch._nonReactive.minPendingPromise = void 0;
+					}, pendingMinMs);
+				}
+			}
+		}
+		throw router.getMatch(match.id)?._nonReactive.loadPromise;
+	}
+	if (match.status === "notFound") {
+		invariant(isNotFound(match.error), "Expected a notFound error");
+		return renderRouteNotFound(router, route, match.error);
+	}
+	if (match.status === "redirected") {
+		invariant(isRedirect(match.error), "Expected a redirect error");
+		throw router.getMatch(match.id)?._nonReactive.loadPromise;
+	}
+	if (match.status === "error") {
+		if (isServer ?? router.isServer) return /* @__PURE__ */ jsx((route.options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent, {
+			error: match.error,
+			reset: void 0,
+			info: { componentStack: "" }
+		});
+		throw match.error;
+	}
+	return out;
 });
-const Outlet = React.memo(function OutletImpl() {
-  const router = useRouter();
-  const matchId = React.useContext(matchContext);
-  const routeId = useRouterState({
-    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId
-  });
-  const route = router.routesById[routeId];
-  const parentGlobalNotFound = 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 parentMatch.globalNotFound;
-    }
-  });
-  const childMatchId = useRouterState({
-    select: (s) => {
-      const matches = s.matches;
-      const index = matches.findIndex((d) => d.id === matchId);
-      return matches[index + 1]?.id;
-    }
-  });
-  const pendingElement = router.options.defaultPendingComponent ? /* @__PURE__ */ jsx(router.options.defaultPendingComponent, {}) : null;
-  if (parentGlobalNotFound) {
-    return renderRouteNotFound(router, route, void 0);
-  }
-  if (!childMatchId) {
-    return null;
-  }
-  const nextMatch = /* @__PURE__ */ jsx(Match, { matchId: childMatchId });
-  if (routeId === rootRouteId) {
-    return /* @__PURE__ */ jsx(React.Suspense, { fallback: pendingElement, children: nextMatch });
-  }
-  return nextMatch;
+/**
+* Render the next child match in the route tree. Typically used inside
+* a route component to render nested routes.
+*
+* @link https://tanstack.com/router/latest/docs/framework/react/api/router/outletComponent
+*/
+var Outlet = React$1.memo(function OutletImpl() {
+	const router = useRouter();
+	const matchId = React$1.useContext(matchContext);
+	const routeId = useRouterState({ select: (s) => s.matches.find((d) => d.id === matchId)?.routeId });
+	const route = router.routesById[routeId];
+	const parentGlobalNotFound = useRouterState({ select: (s) => {
+		const parentMatch = s.matches.find((d) => d.id === matchId);
+		invariant(parentMatch, `Could not find parent match for matchId "${matchId}"`);
+		return parentMatch.globalNotFound;
+	} });
+	const childMatchId = useRouterState({ select: (s) => {
+		const matches = s.matches;
+		return matches[matches.findIndex((d) => d.id === matchId) + 1]?.id;
+	} });
+	const pendingElement = router.options.defaultPendingComponent ? /* @__PURE__ */ jsx(router.options.defaultPendingComponent, {}) : null;
+	if (parentGlobalNotFound) return renderRouteNotFound(router, route, void 0);
+	if (!childMatchId) return null;
+	const nextMatch = /* @__PURE__ */ jsx(Match, { matchId: childMatchId });
+	if (routeId === rootRouteId) return /* @__PURE__ */ jsx(React$1.Suspense, {
+		fallback: pendingElement,
+		children: nextMatch
+	});
+	return nextMatch;
 });
-export {
-  Match,
-  MatchInner,
-  Outlet
-};
-//# sourceMappingURL=Match.js.map
+//#endregion
+export { Match, Outlet };
+
+//# sourceMappingURL=Match.js.map