@tanstack/react-router 1.115.2 → 1.116.0

package/dist/cjs/ClientOnly.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+function ClientOnly({ children, fallback = null }) {
+  return useHydrated() ? /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: fallback });
+}
+function useHydrated() {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function subscribe() {
+  return () => {
+  };
+}
+exports.ClientOnly = ClientOnly;
+//# sourceMappingURL=ClientOnly.cjs.map

package/dist/cjs/ClientOnly.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.cjs","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render if 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 */\nfunction useHydrated(): boolean {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  )\n}\n\nfunction subscribe() {\n  return () => {}\n}\n"],"names":["jsx"],"mappings":";;;;AA8BO,SAAS,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,SAAO,YAAY,IAChBA,2BAAAA,IAAA,MAAM,UAAN,EAAgB,SAAS,CAAA,IAEzBA,2BAAAA,IAAA,MAAM,UAAN,EAAgB,UAAS,SAAA,CAAA;AAE9B;AAqBA,SAAS,cAAuB;AAC9B,SAAO,MAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;;"}

package/dist/cjs/ClientOnly.d.cts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface ClientOnlyProps {
+    /**
+     * The children to render if the JS is loaded.
+     */
+    children: React.ReactNode;
+    /**
+     * The fallback component to render if the JS is not yet loaded.
+     */
+    fallback?: React.ReactNode;
+}
+/**
+ * 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>
+ * )
+ * ```
+ */
+export declare function ClientOnly({ children, fallback }: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/index.cjs

@@ -6,6 +6,7 @@ const routerCore = require("@tanstack/router-core");
 const history = require("@tanstack/history");
 const awaited = require("./awaited.cjs");
 const CatchBoundary = require("./CatchBoundary.cjs");
+const ClientOnly = require("./ClientOnly.cjs");
 const fileRoute = require("./fileRoute.cjs");
 const lazyRouteComponent = require("./lazyRouteComponent.cjs");
 const link = require("./link.cjs");
@@ -225,6 +226,7 @@ exports.Await = awaited.Await;
 exports.useAwaited = awaited.useAwaited;
 exports.CatchBoundary = CatchBoundary.CatchBoundary;
 exports.ErrorComponent = CatchBoundary.ErrorComponent;
+exports.ClientOnly = ClientOnly.ClientOnly;
 exports.FileRoute = fileRoute.FileRoute;
 exports.FileRouteLoader = fileRoute.FileRouteLoader;
 exports.LazyRoute = fileRoute.LazyRoute;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/index.d.cts

@@ -9,6 +9,7 @@ export type { BlockerFn, HistoryLocation, RouterHistory, ParsedPath, HistoryStat
 export { useAwaited, Await } from './awaited.cjs';
 export type { AwaitOptions } from './awaited.cjs';
 export { CatchBoundary, ErrorComponent } from './CatchBoundary.cjs';
+export { ClientOnly } from './ClientOnly.cjs';
 export { FileRoute, createFileRoute, FileRouteLoader, LazyRoute, createLazyRoute, createLazyFileRoute, } from './fileRoute.cjs';
 export * from './history.cjs';
 export { lazyRouteComponent } from './lazyRouteComponent.cjs';

package/dist/cjs/lazyRouteComponent.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Match = require("./Match.cjs");
+const ClientOnly = require("./ClientOnly.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -24,23 +25,6 @@ function isModuleNotFoundError(error) {
   if (typeof (error == null ? void 0 : error.message) !== "string") return false;
   return error.message.startsWith("Failed to fetch dynamically imported module") || error.message.startsWith("error loading dynamically imported module") || error.message.startsWith("Importing a module script failed");
 }
-function ClientOnly({
-  children,
-  fallback = null
-}) {
-  return useHydrated() ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
-}
-function subscribe() {
-  return () => {
-  };
-}
-function useHydrated() {
-  return React__namespace.useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false
-  );
-}
 function lazyRouteComponent(importer, exportName, ssr) {
   let loadPromise;
   let comp;
@@ -83,14 +67,12 @@ function lazyRouteComponent(importer, exportName, ssr) {
       throw load();
     }
     if ((ssr == null ? void 0 : ssr()) === false) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Match.Outlet, {}), children: React__namespace.createElement(comp, props) });
+      return /* @__PURE__ */ jsxRuntime.jsx(ClientOnly.ClientOnly, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Match.Outlet, {}), children: React__namespace.createElement(comp, props) });
     }
     return React__namespace.createElement(comp, props);
   };
   lazyComp.preload = load;
   return lazyComp;
 }
-exports.ClientOnly = ClientOnly;
 exports.lazyRouteComponent = lazyRouteComponent;
-exports.useHydrated = useHydrated;
 //# sourceMappingURL=lazyRouteComponent.cjs.map

package/dist/cjs/lazyRouteComponent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Outlet } from './Match'\nimport type { AsyncRouteComponent } from './route'\n\n// If the load fails due to module not found, it may mean a new version of\n// the build was deployed and the user's browser is still using an old version.\n// If this happens, the old version in the user's browser would have an outdated\n// URL to the lazy module.\n// In that case, we want to attempt one window refresh to get the latest.\nfunction isModuleNotFoundError(error: any): boolean {\n  // chrome: \"Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // firefox: \"error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // safari: \"Importing a module script failed.\"\n  if (typeof error?.message !== 'string') return false\n  return (\n    error.message.startsWith('Failed to fetch dynamically imported module') ||\n    error.message.startsWith('error loading dynamically imported module') ||\n    error.message.startsWith('Importing a module script failed')\n  )\n}\n\nexport function ClientOnly({\n  children,\n  fallback = null,\n}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {\n  return useHydrated() ? <>{children}</> : <>{fallback}</>\n}\n\nfunction subscribe() {\n  return () => {}\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  )\n}\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n  ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any> | undefined\n  let comp: T[TKey] | T['default']\n  let error: any\n  let reload: boolean\n\n  const load = () => {\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve()\n    }\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n        })\n        .catch((err) => {\n          // We don't want an error thrown from preload in this case, because\n          // there's nothing we want to do about module not found during preload.\n          // Record the error, the rest is handled during the render path.\n          error = err\n          if (isModuleNotFoundError(error)) {\n            if (\n              error instanceof Error &&\n              typeof window !== 'undefined' &&\n              typeof sessionStorage !== 'undefined'\n            ) {\n              // Again, we want to reload one time on module not found error and not enter\n              // a reload loop if there is some other issue besides an old deploy.\n              // That's why we store our reload attempt in sessionStorage.\n              // Use error.message as key because it contains the module path that failed.\n              const storageKey = `tanstack_router_reload:${error.message}`\n              if (!sessionStorage.getItem(storageKey)) {\n                sessionStorage.setItem(storageKey, '1')\n                reload = true\n              }\n            }\n          }\n        })\n    }\n\n    return loadPromise\n  }\n\n  const lazyComp = function Lazy(props: any) {\n    // Now that we're out of preload and into actual render path,\n    if (reload) {\n      // If it was a module loading error,\n      // throw eternal suspense while we wait for window to reload\n      window.location.reload()\n      throw new Promise(() => {})\n    }\n    if (error) {\n      // Otherwise, just throw the error\n      throw error\n    }\n\n    if (!comp) {\n      throw load()\n    }\n\n    if (ssr?.() === false) {\n      return (\n        <ClientOnly fallback={<Outlet />}>\n          {React.createElement(comp, props)}\n        </ClientOnly>\n      )\n    }\n    return React.createElement(comp, props)\n  }\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["jsx","Fragment","React","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,SAAS,sBAAsB,OAAqB;AAIlD,MAAI,QAAO,+BAAO,aAAY,SAAiB,QAAA;AAC/C,SACE,MAAM,QAAQ,WAAW,6CAA6C,KACtE,MAAM,QAAQ,WAAW,2CAA2C,KACpE,MAAM,QAAQ,WAAW,kCAAkC;AAE/D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AACb,GAA4D;AAC1D,SAAO,YAAgB,IAAAA,+BAAAC,WAAAA,UAAA,EAAG,SAAS,CAAA,0DAAS,UAAS,SAAA,CAAA;AACvD;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAOC,iBAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEgB,SAAA,mBAId,UACA,YACA,KAGQ;AACJ,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,OAAO,aAAa,gBAAe,kCAAY,OAAO;AACxD,aAAQ,MAAM;AACd,aAAO,QAAQ,QAAQ;AAAA,IAAA;AAEzB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EACpB,KAAK,CAAC,QAAQ;AACC,sBAAA;AACP,eAAA,IAAI,cAAc,SAAS;AAAA,MAAA,CACnC,EACA,MAAM,CAAC,QAAQ;AAIN,gBAAA;AACJ,YAAA,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,kBAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,6BAAA,QAAQ,YAAY,GAAG;AAC7B,uBAAA;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAGE,WAAA;AAAA,EACT;AAEM,QAAA,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAO;AACjB,YAAA,IAAI,QAAQ,MAAM;AAAA,MAAA,CAAE;AAAA,IAAA;AAE5B,QAAI,OAAO;AAEH,YAAA;AAAA,IAAA;AAGR,QAAI,CAAC,MAAM;AACT,YAAM,KAAK;AAAA,IAAA;AAGT,SAAA,kCAAY,OAAO;AAEnB,aAAAF,2BAAA,IAAC,YAAW,EAAA,UAAWA,2BAAAA,IAAAG,MAAAA,QAAA,CAAA,CAAO,GAC3B,UAAMD,iBAAA,cAAc,MAAM,KAAK,EAClC,CAAA;AAAA,IAAA;AAGG,WAAAA,iBAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAEtB,SAAA;AACT;;;;"}
+{"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Outlet } from './Match'\nimport { ClientOnly } from './ClientOnly'\nimport type { AsyncRouteComponent } from './route'\n\n// If the load fails due to module not found, it may mean a new version of\n// the build was deployed and the user's browser is still using an old version.\n// If this happens, the old version in the user's browser would have an outdated\n// URL to the lazy module.\n// In that case, we want to attempt one window refresh to get the latest.\nfunction isModuleNotFoundError(error: any): boolean {\n  // chrome: \"Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // firefox: \"error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // safari: \"Importing a module script failed.\"\n  if (typeof error?.message !== 'string') return false\n  return (\n    error.message.startsWith('Failed to fetch dynamically imported module') ||\n    error.message.startsWith('error loading dynamically imported module') ||\n    error.message.startsWith('Importing a module script failed')\n  )\n}\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n  ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any> | undefined\n  let comp: T[TKey] | T['default']\n  let error: any\n  let reload: boolean\n\n  const load = () => {\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve()\n    }\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n        })\n        .catch((err) => {\n          // We don't want an error thrown from preload in this case, because\n          // there's nothing we want to do about module not found during preload.\n          // Record the error, the rest is handled during the render path.\n          error = err\n          if (isModuleNotFoundError(error)) {\n            if (\n              error instanceof Error &&\n              typeof window !== 'undefined' &&\n              typeof sessionStorage !== 'undefined'\n            ) {\n              // Again, we want to reload one time on module not found error and not enter\n              // a reload loop if there is some other issue besides an old deploy.\n              // That's why we store our reload attempt in sessionStorage.\n              // Use error.message as key because it contains the module path that failed.\n              const storageKey = `tanstack_router_reload:${error.message}`\n              if (!sessionStorage.getItem(storageKey)) {\n                sessionStorage.setItem(storageKey, '1')\n                reload = true\n              }\n            }\n          }\n        })\n    }\n\n    return loadPromise\n  }\n\n  const lazyComp = function Lazy(props: any) {\n    // Now that we're out of preload and into actual render path,\n    if (reload) {\n      // If it was a module loading error,\n      // throw eternal suspense while we wait for window to reload\n      window.location.reload()\n      throw new Promise(() => {})\n    }\n    if (error) {\n      // Otherwise, just throw the error\n      throw error\n    }\n\n    if (!comp) {\n      throw load()\n    }\n\n    if (ssr?.() === false) {\n      return (\n        <ClientOnly fallback={<Outlet />}>\n          {React.createElement(comp, props)}\n        </ClientOnly>\n      )\n    }\n    return React.createElement(comp, props)\n  }\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["jsx","ClientOnly","Outlet","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,sBAAsB,OAAqB;AAIlD,MAAI,QAAO,+BAAO,aAAY,SAAiB,QAAA;AAC/C,SACE,MAAM,QAAQ,WAAW,6CAA6C,KACtE,MAAM,QAAQ,WAAW,2CAA2C,KACpE,MAAM,QAAQ,WAAW,kCAAkC;AAE/D;AAEgB,SAAA,mBAId,UACA,YACA,KAGQ;AACJ,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,OAAO,aAAa,gBAAe,kCAAY,OAAO;AACxD,aAAQ,MAAM;AACd,aAAO,QAAQ,QAAQ;AAAA,IAAA;AAEzB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EACpB,KAAK,CAAC,QAAQ;AACC,sBAAA;AACP,eAAA,IAAI,cAAc,SAAS;AAAA,MAAA,CACnC,EACA,MAAM,CAAC,QAAQ;AAIN,gBAAA;AACJ,YAAA,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,kBAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,6BAAA,QAAQ,YAAY,GAAG;AAC7B,uBAAA;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAGE,WAAA;AAAA,EACT;AAEM,QAAA,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAO;AACjB,YAAA,IAAI,QAAQ,MAAM;AAAA,MAAA,CAAE;AAAA,IAAA;AAE5B,QAAI,OAAO;AAEH,YAAA;AAAA,IAAA;AAGR,QAAI,CAAC,MAAM;AACT,YAAM,KAAK;AAAA,IAAA;AAGT,SAAA,kCAAY,OAAO;AAEnB,aAAAA,2BAAA,IAACC,WAAW,YAAA,EAAA,UAAWD,2BAAAA,IAAAE,MAAAA,QAAA,CAAA,CAAO,GAC3B,UAAMC,iBAAA,cAAc,MAAM,KAAK,EAClC,CAAA;AAAA,IAAA;AAGG,WAAAA,iBAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAEtB,SAAA;AACT;;"}

package/dist/cjs/lazyRouteComponent.d.cts

@@ -1,7 +1,2 @@
 import { AsyncRouteComponent } from './route.cjs';
-import * as React from 'react';
-export declare function ClientOnly({ children, fallback, }: React.PropsWithChildren<{
-    fallback?: React.ReactNode;
-}>): import("react/jsx-runtime").JSX.Element;
-export declare function useHydrated(): boolean;
 export declare function lazyRouteComponent<T extends Record<string, any>, TKey extends keyof T = 'default'>(importer: () => Promise<T>, exportName?: TKey, ssr?: () => boolean): T[TKey] extends (props: infer TProps) => any ? AsyncRouteComponent<TProps> : never;

package/dist/esm/ClientOnly.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface ClientOnlyProps {
+    /**
+     * The children to render if the JS is loaded.
+     */
+    children: React.ReactNode;
+    /**
+     * The fallback component to render if the JS is not yet loaded.
+     */
+    fallback?: React.ReactNode;
+}
+/**
+ * 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>
+ * )
+ * ```
+ */
+export declare function ClientOnly({ children, fallback }: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/ClientOnly.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+function ClientOnly({ children, fallback = null }) {
+  return useHydrated() ? /* @__PURE__ */ jsx(React__default.Fragment, { children }) : /* @__PURE__ */ jsx(React__default.Fragment, { children: fallback });
+}
+function useHydrated() {
+  return React__default.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function subscribe() {
+  return () => {
+  };
+}
+export {
+  ClientOnly
+};
+//# sourceMappingURL=ClientOnly.js.map

package/dist/esm/ClientOnly.js.map

@@ -0,0 +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 if 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 */\nfunction 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,YAAY,IAChB,oBAAAA,eAAM,UAAN,EAAgB,SAAS,CAAA,IAEzB,oBAAAA,eAAM,UAAN,EAAgB,UAAS,SAAA,CAAA;AAE9B;AAqBA,SAAS,cAAuB;AAC9B,SAAOA,eAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;"}

package/dist/esm/index.d.ts

@@ -9,6 +9,7 @@ export type { BlockerFn, HistoryLocation, RouterHistory, ParsedPath, HistoryStat
 export { useAwaited, Await } from './awaited.js';
 export type { AwaitOptions } from './awaited.js';
 export { CatchBoundary, ErrorComponent } from './CatchBoundary.js';
+export { ClientOnly } from './ClientOnly.js';
 export { FileRoute, createFileRoute, FileRouteLoader, LazyRoute, createLazyRoute, createLazyFileRoute, } from './fileRoute.js';
 export * from './history.js';
 export { lazyRouteComponent } from './lazyRouteComponent.js';

package/dist/esm/index.js

@@ -4,6 +4,7 @@ import { PathParamError, SearchParamError, TSR_DEFERRED_PROMISE, cleanPath, comp
 import { createBrowserHistory, createHashHistory, createHistory, createMemoryHistory } from "@tanstack/history";
 import { Await, useAwaited } from "./awaited.js";
 import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
+import { ClientOnly } from "./ClientOnly.js";
 import { FileRoute, FileRouteLoader, LazyRoute, createFileRoute, createLazyFileRoute, createLazyRoute } from "./fileRoute.js";
 import { lazyRouteComponent } from "./lazyRouteComponent.js";
 import { Link, createLink, linkOptions, useLinkProps } from "./link.js";
@@ -39,6 +40,7 @@ export {
   Block,
   CatchBoundary,
   CatchNotFound,
+  ClientOnly,
   DefaultGlobalNotFound,
   ErrorComponent,
   FileRoute,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/lazyRouteComponent.d.ts

@@ -1,7 +1,2 @@
 import { AsyncRouteComponent } from './route.js';
-import * as React from 'react';
-export declare function ClientOnly({ children, fallback, }: React.PropsWithChildren<{
-    fallback?: React.ReactNode;
-}>): import("react/jsx-runtime").JSX.Element;
-export declare function useHydrated(): boolean;
 export declare function lazyRouteComponent<T extends Record<string, any>, TKey extends keyof T = 'default'>(importer: () => Promise<T>, exportName?: TKey, ssr?: () => boolean): T[TKey] extends (props: infer TProps) => any ? AsyncRouteComponent<TProps> : never;

package/dist/esm/lazyRouteComponent.js

@@ -1,27 +1,11 @@
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Outlet } from "./Match.js";
+import { ClientOnly } from "./ClientOnly.js";
 function isModuleNotFoundError(error) {
   if (typeof (error == null ? void 0 : error.message) !== "string") return false;
   return error.message.startsWith("Failed to fetch dynamically imported module") || error.message.startsWith("error loading dynamically imported module") || error.message.startsWith("Importing a module script failed");
 }
-function ClientOnly({
-  children,
-  fallback = null
-}) {
-  return useHydrated() ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
-}
-function subscribe() {
-  return () => {
-  };
-}
-function useHydrated() {
-  return React.useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false
-  );
-}
 function lazyRouteComponent(importer, exportName, ssr) {
   let loadPromise;
   let comp;
@@ -72,8 +56,6 @@ function lazyRouteComponent(importer, exportName, ssr) {
   return lazyComp;
 }
 export {
-  ClientOnly,
-  lazyRouteComponent,
-  useHydrated
+  lazyRouteComponent
 };
 //# sourceMappingURL=lazyRouteComponent.js.map

package/dist/esm/lazyRouteComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Outlet } from './Match'\nimport type { AsyncRouteComponent } from './route'\n\n// If the load fails due to module not found, it may mean a new version of\n// the build was deployed and the user's browser is still using an old version.\n// If this happens, the old version in the user's browser would have an outdated\n// URL to the lazy module.\n// In that case, we want to attempt one window refresh to get the latest.\nfunction isModuleNotFoundError(error: any): boolean {\n  // chrome: \"Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // firefox: \"error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // safari: \"Importing a module script failed.\"\n  if (typeof error?.message !== 'string') return false\n  return (\n    error.message.startsWith('Failed to fetch dynamically imported module') ||\n    error.message.startsWith('error loading dynamically imported module') ||\n    error.message.startsWith('Importing a module script failed')\n  )\n}\n\nexport function ClientOnly({\n  children,\n  fallback = null,\n}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {\n  return useHydrated() ? <>{children}</> : <>{fallback}</>\n}\n\nfunction subscribe() {\n  return () => {}\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  )\n}\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n  ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any> | undefined\n  let comp: T[TKey] | T['default']\n  let error: any\n  let reload: boolean\n\n  const load = () => {\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve()\n    }\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n        })\n        .catch((err) => {\n          // We don't want an error thrown from preload in this case, because\n          // there's nothing we want to do about module not found during preload.\n          // Record the error, the rest is handled during the render path.\n          error = err\n          if (isModuleNotFoundError(error)) {\n            if (\n              error instanceof Error &&\n              typeof window !== 'undefined' &&\n              typeof sessionStorage !== 'undefined'\n            ) {\n              // Again, we want to reload one time on module not found error and not enter\n              // a reload loop if there is some other issue besides an old deploy.\n              // That's why we store our reload attempt in sessionStorage.\n              // Use error.message as key because it contains the module path that failed.\n              const storageKey = `tanstack_router_reload:${error.message}`\n              if (!sessionStorage.getItem(storageKey)) {\n                sessionStorage.setItem(storageKey, '1')\n                reload = true\n              }\n            }\n          }\n        })\n    }\n\n    return loadPromise\n  }\n\n  const lazyComp = function Lazy(props: any) {\n    // Now that we're out of preload and into actual render path,\n    if (reload) {\n      // If it was a module loading error,\n      // throw eternal suspense while we wait for window to reload\n      window.location.reload()\n      throw new Promise(() => {})\n    }\n    if (error) {\n      // Otherwise, just throw the error\n      throw error\n    }\n\n    if (!comp) {\n      throw load()\n    }\n\n    if (ssr?.() === false) {\n      return (\n        <ClientOnly fallback={<Outlet />}>\n          {React.createElement(comp, props)}\n        </ClientOnly>\n      )\n    }\n    return React.createElement(comp, props)\n  }\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":[],"mappings":";;;AASA,SAAS,sBAAsB,OAAqB;AAIlD,MAAI,QAAO,+BAAO,aAAY,SAAiB,QAAA;AAC/C,SACE,MAAM,QAAQ,WAAW,6CAA6C,KACtE,MAAM,QAAQ,WAAW,2CAA2C,KACpE,MAAM,QAAQ,WAAW,kCAAkC;AAE/D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AACb,GAA4D;AAC1D,SAAO,YAAgB,IAAA,oBAAA,UAAA,EAAG,SAAS,CAAA,oCAAS,UAAS,SAAA,CAAA;AACvD;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAO,MAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEgB,SAAA,mBAId,UACA,YACA,KAGQ;AACJ,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,OAAO,aAAa,gBAAe,kCAAY,OAAO;AACxD,aAAQ,MAAM;AACd,aAAO,QAAQ,QAAQ;AAAA,IAAA;AAEzB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EACpB,KAAK,CAAC,QAAQ;AACC,sBAAA;AACP,eAAA,IAAI,cAAc,SAAS;AAAA,MAAA,CACnC,EACA,MAAM,CAAC,QAAQ;AAIN,gBAAA;AACJ,YAAA,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,kBAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,6BAAA,QAAQ,YAAY,GAAG;AAC7B,uBAAA;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAGE,WAAA;AAAA,EACT;AAEM,QAAA,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAO;AACjB,YAAA,IAAI,QAAQ,MAAM;AAAA,MAAA,CAAE;AAAA,IAAA;AAE5B,QAAI,OAAO;AAEH,YAAA;AAAA,IAAA;AAGR,QAAI,CAAC,MAAM;AACT,YAAM,KAAK;AAAA,IAAA;AAGT,SAAA,kCAAY,OAAO;AAEnB,aAAA,oBAAC,YAAW,EAAA,UAAW,oBAAA,QAAA,CAAA,CAAO,GAC3B,UAAM,MAAA,cAAc,MAAM,KAAK,EAClC,CAAA;AAAA,IAAA;AAGG,WAAA,MAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAEtB,SAAA;AACT;"}
+{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Outlet } from './Match'\nimport { ClientOnly } from './ClientOnly'\nimport type { AsyncRouteComponent } from './route'\n\n// If the load fails due to module not found, it may mean a new version of\n// the build was deployed and the user's browser is still using an old version.\n// If this happens, the old version in the user's browser would have an outdated\n// URL to the lazy module.\n// In that case, we want to attempt one window refresh to get the latest.\nfunction isModuleNotFoundError(error: any): boolean {\n  // chrome: \"Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // firefox: \"error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // safari: \"Importing a module script failed.\"\n  if (typeof error?.message !== 'string') return false\n  return (\n    error.message.startsWith('Failed to fetch dynamically imported module') ||\n    error.message.startsWith('error loading dynamically imported module') ||\n    error.message.startsWith('Importing a module script failed')\n  )\n}\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n  ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any> | undefined\n  let comp: T[TKey] | T['default']\n  let error: any\n  let reload: boolean\n\n  const load = () => {\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve()\n    }\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n        })\n        .catch((err) => {\n          // We don't want an error thrown from preload in this case, because\n          // there's nothing we want to do about module not found during preload.\n          // Record the error, the rest is handled during the render path.\n          error = err\n          if (isModuleNotFoundError(error)) {\n            if (\n              error instanceof Error &&\n              typeof window !== 'undefined' &&\n              typeof sessionStorage !== 'undefined'\n            ) {\n              // Again, we want to reload one time on module not found error and not enter\n              // a reload loop if there is some other issue besides an old deploy.\n              // That's why we store our reload attempt in sessionStorage.\n              // Use error.message as key because it contains the module path that failed.\n              const storageKey = `tanstack_router_reload:${error.message}`\n              if (!sessionStorage.getItem(storageKey)) {\n                sessionStorage.setItem(storageKey, '1')\n                reload = true\n              }\n            }\n          }\n        })\n    }\n\n    return loadPromise\n  }\n\n  const lazyComp = function Lazy(props: any) {\n    // Now that we're out of preload and into actual render path,\n    if (reload) {\n      // If it was a module loading error,\n      // throw eternal suspense while we wait for window to reload\n      window.location.reload()\n      throw new Promise(() => {})\n    }\n    if (error) {\n      // Otherwise, just throw the error\n      throw error\n    }\n\n    if (!comp) {\n      throw load()\n    }\n\n    if (ssr?.() === false) {\n      return (\n        <ClientOnly fallback={<Outlet />}>\n          {React.createElement(comp, props)}\n        </ClientOnly>\n      )\n    }\n    return React.createElement(comp, props)\n  }\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":[],"mappings":";;;;AAUA,SAAS,sBAAsB,OAAqB;AAIlD,MAAI,QAAO,+BAAO,aAAY,SAAiB,QAAA;AAC/C,SACE,MAAM,QAAQ,WAAW,6CAA6C,KACtE,MAAM,QAAQ,WAAW,2CAA2C,KACpE,MAAM,QAAQ,WAAW,kCAAkC;AAE/D;AAEgB,SAAA,mBAId,UACA,YACA,KAGQ;AACJ,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,OAAO,aAAa,gBAAe,kCAAY,OAAO;AACxD,aAAQ,MAAM;AACd,aAAO,QAAQ,QAAQ;AAAA,IAAA;AAEzB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EACpB,KAAK,CAAC,QAAQ;AACC,sBAAA;AACP,eAAA,IAAI,cAAc,SAAS;AAAA,MAAA,CACnC,EACA,MAAM,CAAC,QAAQ;AAIN,gBAAA;AACJ,YAAA,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,kBAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,6BAAA,QAAQ,YAAY,GAAG;AAC7B,uBAAA;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAGE,WAAA;AAAA,EACT;AAEM,QAAA,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAO;AACjB,YAAA,IAAI,QAAQ,MAAM;AAAA,MAAA,CAAE;AAAA,IAAA;AAE5B,QAAI,OAAO;AAEH,YAAA;AAAA,IAAA;AAGR,QAAI,CAAC,MAAM;AACT,YAAM,KAAK;AAAA,IAAA;AAGT,SAAA,kCAAY,OAAO;AAEnB,aAAA,oBAAC,YAAW,EAAA,UAAW,oBAAA,QAAA,CAAA,CAAO,GAC3B,UAAM,MAAA,cAAc,MAAM,KAAK,EAClC,CAAA;AAAA,IAAA;AAGG,WAAA,MAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAEtB,SAAA;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.115.2",
+  "version": "1.116.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.115.0",
-    "@tanstack/router-core": "1.115.0"
+    "@tanstack/router-core": "1.115.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/ClientOnly.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+
+export interface ClientOnlyProps {
+  /**
+   * The children to render if the JS is loaded.
+   */
+  children: React.ReactNode
+  /**
+   * The fallback component to render if the JS is not yet loaded.
+   */
+  fallback?: React.ReactNode
+}
+
+/**
+ * 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>
+ * )
+ * ```
+ */
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  return useHydrated() ? (
+    <React.Fragment>{children}</React.Fragment>
+  ) : (
+    <React.Fragment>{fallback}</React.Fragment>
+  )
+}
+
+/**
+ * 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(): boolean {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  )
+}
+
+function subscribe() {
+  return () => {}
+}

package/src/index.tsx

@@ -149,6 +149,7 @@ export { useAwaited, Await } from './awaited'
 export type { AwaitOptions } from './awaited'
 
 export { CatchBoundary, ErrorComponent } from './CatchBoundary'
+export { ClientOnly } from './ClientOnly'
 
 export {
   FileRoute,

package/src/lazyRouteComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Outlet } from './Match'
+import { ClientOnly } from './ClientOnly'
 import type { AsyncRouteComponent } from './route'
 
 // If the load fails due to module not found, it may mean a new version of
@@ -19,25 +20,6 @@ function isModuleNotFoundError(error: any): boolean {
   )
 }
 
-export function ClientOnly({
-  children,
-  fallback = null,
-}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {
-  return useHydrated() ? <>{children}</> : <>{fallback}</>
-}
-
-function subscribe() {
-  return () => {}
-}
-
-export function useHydrated() {
-  return React.useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false,
-  )
-}
-
 export function lazyRouteComponent<
   T extends Record<string, any>,
   TKey extends keyof T = 'default',