@tanstack/solid-router 1.115.3 → 1.117.0

package/dist/cjs/ClientOnly.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const Solid = require("solid-js");
+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 Solid__namespace = /* @__PURE__ */ _interopNamespaceDefault(Solid);
+function ClientOnly(props) {
+  return useHydrated() ? web.memo(() => props.children) : web.memo(() => props.fallback);
+}
+function useHydrated() {
+  const [hydrated, setHydrated] = Solid__namespace.createSignal(!web.isServer);
+  if (!web.isServer) {
+    Solid__namespace.createEffect(() => {
+      setHydrated(true);
+    });
+  }
+  return hydrated;
+}
+exports.ClientOnly = ClientOnly;
+exports.useHydrated = useHydrated;
+//# sourceMappingURL=ClientOnly.cjs.map

package/dist/cjs/ClientOnly.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.cjs","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { isServer } from 'solid-js/web'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render if the JS is loaded.\n   */\n  children: Solid.JSX.Element\n  /**\n   * The fallback component to render if the JS is not yet loaded.\n   */\n  fallback?: Solid.JSX.Element\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(props: ClientOnlyProps) {\n  return useHydrated() ? <>{props.children}</> : <>{props.fallback}</>\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 A signal accessor function that returns true if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated() {\n  const [hydrated, setHydrated] = Solid.createSignal(!isServer)\n\n  if (!isServer) {\n    Solid.createEffect(() => {\n      setHydrated(true)\n    })\n  }\n\n  return hydrated\n}\n"],"names":["ClientOnly","props","useHydrated","_$memo","children","fallback","hydrated","setHydrated","Solid","createSignal","isServer","createEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BO,SAASA,WAAWC,OAAwB;AAC1CC,SAAAA,YAAAA,IAAaC,IAAAA,KAAMF,MAAAA,MAAMG,QAAQ,IAAAD,IAAAA,KAAA,MAAUF,MAAMI,QAAQ;AAClE;AAqBO,SAASH,cAAc;AAC5B,QAAM,CAACI,UAAUC,WAAW,IAAIC,iBAAMC,aAAa,CAACC,YAAQ;AAE5D,MAAI,CAACA,IAAAA,UAAU;AACbF,qBAAMG,aAAa,MAAM;AACvBJ,kBAAY,IAAI;AAAA,IAAA,CACjB;AAAA,EAAA;AAGID,SAAAA;AACT;;;"}

package/dist/cjs/ClientOnly.d.cts

@@ -0,0 +1,49 @@
+import * as Solid from 'solid-js';
+export interface ClientOnlyProps {
+    /**
+     * The children to render if the JS is loaded.
+     */
+    children: Solid.JSX.Element;
+    /**
+     * The fallback component to render if the JS is not yet loaded.
+     */
+    fallback?: Solid.JSX.Element;
+}
+/**
+ * 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(props: ClientOnlyProps): Solid.JSX.Element;
+/**
+ * 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 A signal accessor function that returns true if the JS has been hydrated already, false otherwise.
+ */
+export declare function useHydrated(): Solid.Accessor<boolean>;

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

@@ -8,6 +8,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,15 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const Solid = require("solid-js");
 const Match = require("./Match.cjs");
+const ClientOnly = require("./ClientOnly.cjs");
 function isModuleNotFoundError(error) {
   return typeof (error == null ? void 0 : error.message) === "string" && /Failed to fetch dynamically imported module/.test(error.message);
 }
-function ClientOnly(props) {
-  return useHydrated() ? web.memo(() => props.children) : web.memo(() => props.fallback);
-}
-function useHydrated() {
-  return web.isServer;
-}
 function lazyRouteComponent(importer, exportName, ssr) {
   let loadPromise;
   let comp;
@@ -56,7 +51,7 @@ function lazyRouteComponent(importer, exportName, ssr) {
       return web.memo(compResource);
     }
     if ((ssr == null ? void 0 : ssr()) === false) {
-      return web.createComponent(ClientOnly, {
+      return web.createComponent(ClientOnly.ClientOnly, {
         get fallback() {
           return web.createComponent(Match.Outlet, {});
         },
@@ -74,7 +69,5 @@ function lazyRouteComponent(importer, exportName, ssr) {
   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 { Dynamic, isServer } from 'solid-js/web'\nimport { createResource } from 'solid-js'\nimport { Outlet } from './Match'\nimport type * as Solid from 'solid-js'\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  return (\n    typeof error?.message === 'string' &&\n    /Failed to fetch dynamically imported module/.test(error.message)\n  )\n}\n\nexport function ClientOnly(\n  props: Solid.ParentProps<{ fallback?: Solid.JSX.Element }>,\n) {\n  return useHydrated() ? <>{props.children}</> : <>{props.fallback}</>\n}\n\nexport function useHydrated() {\n  return isServer\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\n  const load = () => {\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve(comp)\n    }\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n          return comp\n        })\n        .catch((err) => {\n          error = err\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    // throw the error if it was a module not found error during preload\n    if (error) {\n      if (isModuleNotFoundError(error)) {\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, recover the promise with a null return,\n        // and we will attempt module not found resolution during the render path.\n\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            window.location.reload()\n\n            // Return empty component while we wait for window to reload\n            return {\n              default: () => null,\n            }\n          }\n        }\n      }\n\n      // Otherwise, just throw the error\n      throw error\n    }\n\n    if (!comp) {\n      const [compResource] = createResource(load, {\n        initialValue: comp,\n        ssrLoadFrom: 'initial',\n      })\n      return <>{compResource()}</>\n    }\n\n    if (ssr?.() === false) {\n      return (\n        <ClientOnly fallback={<Outlet />}>\n          <Dynamic component={comp} {...props} />\n        </ClientOnly>\n      )\n    }\n    return <Dynamic component={comp} {...props} />\n  }\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["isModuleNotFoundError","error","message","test","ClientOnly","props","useHydrated","_$memo","children","fallback","isServer","lazyRouteComponent","importer","exportName","ssr","loadPromise","comp","load","document","Promise","resolve","then","res","undefined","catch","err","lazyComp","Lazy","Error","window","sessionStorage","storageKey","getItem","setItem","location","reload","default","compResource","createResource","initialValue","ssrLoadFrom","_$createComponent","Outlet","Dynamic","_$mergeProps","component","preload"],"mappings":";;;;;AAWA,SAASA,sBAAsBC,OAAqB;AAClD,SACE,QAAOA,+BAAOC,aAAY,YAC1B,8CAA8CC,KAAKF,MAAMC,OAAO;AAEpE;AAEO,SAASE,WACdC,OACA;AACOC,SAAAA,YAAAA,IAAaC,IAAAA,KAAMF,MAAAA,MAAMG,QAAQ,IAAAD,IAAAA,KAAA,MAAUF,MAAMI,QAAQ;AAClE;AAEO,SAASH,cAAc;AACrBI,SAAAA,IAAAA;AACT;AAEgBC,SAAAA,mBAIdC,UACAC,YACAC,KAGQ;AACJC,MAAAA;AACAC,MAAAA;AACAf,MAAAA;AAEJ,QAAMgB,OAAOA,MAAM;AACjB,QAAI,OAAOC,aAAa,gBAAeJ,kCAAY,OAAO;AACxDE,aAAQ,MAAM;AACPG,aAAAA,QAAQC,QAAQJ,IAAI;AAAA,IAAA;AAE7B,QAAI,CAACD,aAAa;AACFH,oBAAAA,SAAAA,EACXS,KAAMC,CAAQ,QAAA;AACCC,sBAAAA;AACPD,eAAAA,IAAIT,cAAc,SAAS;AAC3BG,eAAAA;AAAAA,MAAAA,CACR,EACAQ,MAAOC,CAAQ,QAAA;AACNA,gBAAAA;AAAAA,MAAAA,CACT;AAAA,IAAA;AAGEV,WAAAA;AAAAA,EACT;AAEMW,QAAAA,WAAW,SAASC,KAAKtB,OAAY;AAGzC,QAAIJ,OAAO;AACLD,UAAAA,sBAAsBC,KAAK,GAAG;AAMhC,YACEA,iBAAiB2B,SACjB,OAAOC,WAAW,eAClB,OAAOC,mBAAmB,aAC1B;AAKMC,gBAAAA,aAAa,0BAA0B9B,MAAMC,OAAO;AAC1D,cAAI,CAAC4B,eAAeE,QAAQD,UAAU,GAAG;AACxBE,2BAAAA,QAAQF,YAAY,GAAG;AACtCF,mBAAOK,SAASC,OAAO;AAGhB,mBAAA;AAAA,cACLC,SAASA,MAAM;AAAA,YACjB;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAIInC,YAAAA;AAAAA,IAAAA;AAGR,QAAI,CAACe,MAAM;AACT,YAAM,CAACqB,YAAY,IAAIC,MAAAA,eAAerB,MAAM;AAAA,QAC1CsB,cAAcvB;AAAAA,QACdwB,aAAa;AAAA,MAAA,CACd;AACD,aAAAjC,IAAAA,KAAU8B,YAAY;AAAA,IAAA;AAGpBvB,SAAAA,kCAAY,OAAO;AACrB,aAAA2B,IAAAA,gBACGrC,YAAU;AAAA,QAAA,IAACK,WAAQ;AAAAgC,iBAAAA,IAAAA,gBAAGC,MAAM,QAAA,EAAA;AAAA,QAAA;AAAA,QAAA,IAAAlC,WAAA;AAAAiC,iBAAAA,IAAAA,gBAC1BE,aAAOC,eAAA;AAAA,YAACC,WAAW7B;AAAAA,UAAI,GAAMX,KAAK,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAIzCoC,WAAAA,IAAAA,gBAAQE,aAAOC,eAAA;AAAA,MAACC,WAAW7B;AAAAA,IAAI,GAAMX,KAAK,CAAA;AAAA,EAC5C;AAEEqB,WAAiBoB,UAAU7B;AAEtBS,SAAAA;AACT;;;;"}
+{"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import { Dynamic } from 'solid-js/web'\nimport { createResource } from 'solid-js'\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  return (\n    typeof error?.message === 'string' &&\n    /Failed to fetch dynamically imported module/.test(error.message)\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\n  const load = () => {\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve(comp)\n    }\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n          return comp\n        })\n        .catch((err) => {\n          error = err\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    // throw the error if it was a module not found error during preload\n    if (error) {\n      if (isModuleNotFoundError(error)) {\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, recover the promise with a null return,\n        // and we will attempt module not found resolution during the render path.\n\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            window.location.reload()\n\n            // Return empty component while we wait for window to reload\n            return {\n              default: () => null,\n            }\n          }\n        }\n      }\n\n      // Otherwise, just throw the error\n      throw error\n    }\n\n    if (!comp) {\n      const [compResource] = createResource(load, {\n        initialValue: comp,\n        ssrLoadFrom: 'initial',\n      })\n      return <>{compResource()}</>\n    }\n\n    if (ssr?.() === false) {\n      return (\n        <ClientOnly fallback={<Outlet />}>\n          <Dynamic component={comp} {...props} />\n        </ClientOnly>\n      )\n    }\n    return <Dynamic component={comp} {...props} />\n  }\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["isModuleNotFoundError","error","message","test","lazyRouteComponent","importer","exportName","ssr","loadPromise","comp","load","document","Promise","resolve","then","res","undefined","catch","err","lazyComp","Lazy","props","Error","window","sessionStorage","storageKey","getItem","setItem","location","reload","default","compResource","createResource","initialValue","ssrLoadFrom","_$memo","_$createComponent","ClientOnly","fallback","Outlet","children","Dynamic","_$mergeProps","component","preload"],"mappings":";;;;;;AAWA,SAASA,sBAAsBC,OAAqB;AAClD,SACE,QAAOA,+BAAOC,aAAY,YAC1B,8CAA8CC,KAAKF,MAAMC,OAAO;AAEpE;AAEgBE,SAAAA,mBAIdC,UACAC,YACAC,KAGQ;AACJC,MAAAA;AACAC,MAAAA;AACAR,MAAAA;AAEJ,QAAMS,OAAOA,MAAM;AACjB,QAAI,OAAOC,aAAa,gBAAeJ,kCAAY,OAAO;AACxDE,aAAQ,MAAM;AACPG,aAAAA,QAAQC,QAAQJ,IAAI;AAAA,IAAA;AAE7B,QAAI,CAACD,aAAa;AACFH,oBAAAA,SAAAA,EACXS,KAAMC,CAAQ,QAAA;AACCC,sBAAAA;AACPD,eAAAA,IAAIT,cAAc,SAAS;AAC3BG,eAAAA;AAAAA,MAAAA,CACR,EACAQ,MAAOC,CAAQ,QAAA;AACNA,gBAAAA;AAAAA,MAAAA,CACT;AAAA,IAAA;AAGEV,WAAAA;AAAAA,EACT;AAEMW,QAAAA,WAAW,SAASC,KAAKC,OAAY;AAGzC,QAAIpB,OAAO;AACLD,UAAAA,sBAAsBC,KAAK,GAAG;AAMhC,YACEA,iBAAiBqB,SACjB,OAAOC,WAAW,eAClB,OAAOC,mBAAmB,aAC1B;AAKMC,gBAAAA,aAAa,0BAA0BxB,MAAMC,OAAO;AAC1D,cAAI,CAACsB,eAAeE,QAAQD,UAAU,GAAG;AACxBE,2BAAAA,QAAQF,YAAY,GAAG;AACtCF,mBAAOK,SAASC,OAAO;AAGhB,mBAAA;AAAA,cACLC,SAASA,MAAM;AAAA,YACjB;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAII7B,YAAAA;AAAAA,IAAAA;AAGR,QAAI,CAACQ,MAAM;AACT,YAAM,CAACsB,YAAY,IAAIC,MAAAA,eAAetB,MAAM;AAAA,QAC1CuB,cAAcxB;AAAAA,QACdyB,aAAa;AAAA,MAAA,CACd;AACD,aAAAC,IAAAA,KAAUJ,YAAY;AAAA,IAAA;AAGpBxB,SAAAA,kCAAY,OAAO;AACrB,aAAA6B,IAAAA,gBACGC,WAAAA,YAAU;AAAA,QAAA,IAACC,WAAQ;AAAAF,iBAAAA,IAAAA,gBAAGG,MAAM,QAAA,EAAA;AAAA,QAAA;AAAA,QAAA,IAAAC,WAAA;AAAAJ,iBAAAA,IAAAA,gBAC1BK,aAAOC,eAAA;AAAA,YAACC,WAAWlC;AAAAA,UAAI,GAAMY,KAAK,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAIzCe,WAAAA,IAAAA,gBAAQK,aAAOC,eAAA;AAAA,MAACC,WAAWlC;AAAAA,IAAI,GAAMY,KAAK,CAAA;AAAA,EAC5C;AAEEF,WAAiByB,UAAUlC;AAEtBS,SAAAA;AACT;;"}

package/dist/cjs/lazyRouteComponent.d.cts

@@ -1,7 +1,2 @@
 import { AsyncRouteComponent } from './route.cjs';
-import type * as Solid from 'solid-js';
-export declare function ClientOnly(props: Solid.ParentProps<{
-    fallback?: Solid.JSX.Element;
-}>): Solid.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,49 @@
+import * as Solid from 'solid-js';
+export interface ClientOnlyProps {
+    /**
+     * The children to render if the JS is loaded.
+     */
+    children: Solid.JSX.Element;
+    /**
+     * The fallback component to render if the JS is not yet loaded.
+     */
+    fallback?: Solid.JSX.Element;
+}
+/**
+ * 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(props: ClientOnlyProps): Solid.JSX.Element;
+/**
+ * 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 A signal accessor function that returns true if the JS has been hydrated already, false otherwise.
+ */
+export declare function useHydrated(): Solid.Accessor<boolean>;

package/dist/esm/ClientOnly.js

@@ -0,0 +1,19 @@
+import { memo, isServer } from "solid-js/web";
+import * as Solid from "solid-js";
+function ClientOnly(props) {
+  return useHydrated() ? memo(() => props.children) : memo(() => props.fallback);
+}
+function useHydrated() {
+  const [hydrated, setHydrated] = Solid.createSignal(!isServer);
+  if (!isServer) {
+    Solid.createEffect(() => {
+      setHydrated(true);
+    });
+  }
+  return hydrated;
+}
+export {
+  ClientOnly,
+  useHydrated
+};
+//# sourceMappingURL=ClientOnly.js.map

package/dist/esm/ClientOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.js","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { isServer } from 'solid-js/web'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render if the JS is loaded.\n   */\n  children: Solid.JSX.Element\n  /**\n   * The fallback component to render if the JS is not yet loaded.\n   */\n  fallback?: Solid.JSX.Element\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(props: ClientOnlyProps) {\n  return useHydrated() ? <>{props.children}</> : <>{props.fallback}</>\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 A signal accessor function that returns true if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated() {\n  const [hydrated, setHydrated] = Solid.createSignal(!isServer)\n\n  if (!isServer) {\n    Solid.createEffect(() => {\n      setHydrated(true)\n    })\n  }\n\n  return hydrated\n}\n"],"names":["ClientOnly","props","useHydrated","_$memo","children","fallback","hydrated","setHydrated","Solid","createSignal","isServer","createEffect"],"mappings":";;AA+BO,SAASA,WAAWC,OAAwB;AAC1CC,SAAAA,YAAAA,IAAaC,KAAMF,MAAAA,MAAMG,QAAQ,IAAAD,KAAA,MAAUF,MAAMI,QAAQ;AAClE;AAqBO,SAASH,cAAc;AAC5B,QAAM,CAACI,UAAUC,WAAW,IAAIC,MAAMC,aAAa,CAACC,QAAQ;AAE5D,MAAI,CAACA,UAAU;AACbF,UAAMG,aAAa,MAAM;AACvBJ,kBAAY,IAAI;AAAA,IAAA,CACjB;AAAA,EAAA;AAGID,SAAAA;AACT;"}

package/dist/esm/index.d.ts

@@ -8,6 +8,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 type * as Solid from 'solid-js';
-export declare function ClientOnly(props: Solid.ParentProps<{
-    fallback?: Solid.JSX.Element;
-}>): Solid.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,15 +1,10 @@
-import { memo, createComponent, Dynamic, mergeProps, isServer } from "solid-js/web";
+import { memo, createComponent, Dynamic, mergeProps } from "solid-js/web";
 import { createResource } from "solid-js";
 import { Outlet } from "./Match.js";
+import { ClientOnly } from "./ClientOnly.js";
 function isModuleNotFoundError(error) {
   return typeof (error == null ? void 0 : error.message) === "string" && /Failed to fetch dynamically imported module/.test(error.message);
 }
-function ClientOnly(props) {
-  return useHydrated() ? memo(() => props.children) : memo(() => props.fallback);
-}
-function useHydrated() {
-  return isServer;
-}
 function lazyRouteComponent(importer, exportName, ssr) {
   let loadPromise;
   let comp;
@@ -73,8 +68,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 { Dynamic, isServer } from 'solid-js/web'\nimport { createResource } from 'solid-js'\nimport { Outlet } from './Match'\nimport type * as Solid from 'solid-js'\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  return (\n    typeof error?.message === 'string' &&\n    /Failed to fetch dynamically imported module/.test(error.message)\n  )\n}\n\nexport function ClientOnly(\n  props: Solid.ParentProps<{ fallback?: Solid.JSX.Element }>,\n) {\n  return useHydrated() ? <>{props.children}</> : <>{props.fallback}</>\n}\n\nexport function useHydrated() {\n  return isServer\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\n  const load = () => {\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve(comp)\n    }\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n          return comp\n        })\n        .catch((err) => {\n          error = err\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    // throw the error if it was a module not found error during preload\n    if (error) {\n      if (isModuleNotFoundError(error)) {\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, recover the promise with a null return,\n        // and we will attempt module not found resolution during the render path.\n\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            window.location.reload()\n\n            // Return empty component while we wait for window to reload\n            return {\n              default: () => null,\n            }\n          }\n        }\n      }\n\n      // Otherwise, just throw the error\n      throw error\n    }\n\n    if (!comp) {\n      const [compResource] = createResource(load, {\n        initialValue: comp,\n        ssrLoadFrom: 'initial',\n      })\n      return <>{compResource()}</>\n    }\n\n    if (ssr?.() === false) {\n      return (\n        <ClientOnly fallback={<Outlet />}>\n          <Dynamic component={comp} {...props} />\n        </ClientOnly>\n      )\n    }\n    return <Dynamic component={comp} {...props} />\n  }\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["isModuleNotFoundError","error","message","test","ClientOnly","props","useHydrated","_$memo","children","fallback","isServer","lazyRouteComponent","importer","exportName","ssr","loadPromise","comp","load","document","Promise","resolve","then","res","undefined","catch","err","lazyComp","Lazy","Error","window","sessionStorage","storageKey","getItem","setItem","location","reload","default","compResource","createResource","initialValue","ssrLoadFrom","_$createComponent","Outlet","Dynamic","_$mergeProps","component","preload"],"mappings":";;;AAWA,SAASA,sBAAsBC,OAAqB;AAClD,SACE,QAAOA,+BAAOC,aAAY,YAC1B,8CAA8CC,KAAKF,MAAMC,OAAO;AAEpE;AAEO,SAASE,WACdC,OACA;AACOC,SAAAA,YAAAA,IAAaC,KAAMF,MAAAA,MAAMG,QAAQ,IAAAD,KAAA,MAAUF,MAAMI,QAAQ;AAClE;AAEO,SAASH,cAAc;AACrBI,SAAAA;AACT;AAEgBC,SAAAA,mBAIdC,UACAC,YACAC,KAGQ;AACJC,MAAAA;AACAC,MAAAA;AACAf,MAAAA;AAEJ,QAAMgB,OAAOA,MAAM;AACjB,QAAI,OAAOC,aAAa,gBAAeJ,kCAAY,OAAO;AACxDE,aAAQ,MAAM;AACPG,aAAAA,QAAQC,QAAQJ,IAAI;AAAA,IAAA;AAE7B,QAAI,CAACD,aAAa;AACFH,oBAAAA,SAAAA,EACXS,KAAMC,CAAQ,QAAA;AACCC,sBAAAA;AACPD,eAAAA,IAAIT,cAAc,SAAS;AAC3BG,eAAAA;AAAAA,MAAAA,CACR,EACAQ,MAAOC,CAAQ,QAAA;AACNA,gBAAAA;AAAAA,MAAAA,CACT;AAAA,IAAA;AAGEV,WAAAA;AAAAA,EACT;AAEMW,QAAAA,WAAW,SAASC,KAAKtB,OAAY;AAGzC,QAAIJ,OAAO;AACLD,UAAAA,sBAAsBC,KAAK,GAAG;AAMhC,YACEA,iBAAiB2B,SACjB,OAAOC,WAAW,eAClB,OAAOC,mBAAmB,aAC1B;AAKMC,gBAAAA,aAAa,0BAA0B9B,MAAMC,OAAO;AAC1D,cAAI,CAAC4B,eAAeE,QAAQD,UAAU,GAAG;AACxBE,2BAAAA,QAAQF,YAAY,GAAG;AACtCF,mBAAOK,SAASC,OAAO;AAGhB,mBAAA;AAAA,cACLC,SAASA,MAAM;AAAA,YACjB;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAIInC,YAAAA;AAAAA,IAAAA;AAGR,QAAI,CAACe,MAAM;AACT,YAAM,CAACqB,YAAY,IAAIC,eAAerB,MAAM;AAAA,QAC1CsB,cAAcvB;AAAAA,QACdwB,aAAa;AAAA,MAAA,CACd;AACD,aAAAjC,KAAU8B,YAAY;AAAA,IAAA;AAGpBvB,SAAAA,kCAAY,OAAO;AACrB,aAAA2B,gBACGrC,YAAU;AAAA,QAAA,IAACK,WAAQ;AAAAgC,iBAAAA,gBAAGC,QAAM,EAAA;AAAA,QAAA;AAAA,QAAA,IAAAlC,WAAA;AAAAiC,iBAAAA,gBAC1BE,SAAOC,WAAA;AAAA,YAACC,WAAW7B;AAAAA,UAAI,GAAMX,KAAK,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAIzCoC,WAAAA,gBAAQE,SAAOC,WAAA;AAAA,MAACC,WAAW7B;AAAAA,IAAI,GAAMX,KAAK,CAAA;AAAA,EAC5C;AAEEqB,WAAiBoB,UAAU7B;AAEtBS,SAAAA;AACT;"}
+{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import { Dynamic } from 'solid-js/web'\nimport { createResource } from 'solid-js'\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  return (\n    typeof error?.message === 'string' &&\n    /Failed to fetch dynamically imported module/.test(error.message)\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\n  const load = () => {\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve(comp)\n    }\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n          return comp\n        })\n        .catch((err) => {\n          error = err\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    // throw the error if it was a module not found error during preload\n    if (error) {\n      if (isModuleNotFoundError(error)) {\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, recover the promise with a null return,\n        // and we will attempt module not found resolution during the render path.\n\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            window.location.reload()\n\n            // Return empty component while we wait for window to reload\n            return {\n              default: () => null,\n            }\n          }\n        }\n      }\n\n      // Otherwise, just throw the error\n      throw error\n    }\n\n    if (!comp) {\n      const [compResource] = createResource(load, {\n        initialValue: comp,\n        ssrLoadFrom: 'initial',\n      })\n      return <>{compResource()}</>\n    }\n\n    if (ssr?.() === false) {\n      return (\n        <ClientOnly fallback={<Outlet />}>\n          <Dynamic component={comp} {...props} />\n        </ClientOnly>\n      )\n    }\n    return <Dynamic component={comp} {...props} />\n  }\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["isModuleNotFoundError","error","message","test","lazyRouteComponent","importer","exportName","ssr","loadPromise","comp","load","document","Promise","resolve","then","res","undefined","catch","err","lazyComp","Lazy","props","Error","window","sessionStorage","storageKey","getItem","setItem","location","reload","default","compResource","createResource","initialValue","ssrLoadFrom","_$memo","_$createComponent","ClientOnly","fallback","Outlet","children","Dynamic","_$mergeProps","component","preload"],"mappings":";;;;AAWA,SAASA,sBAAsBC,OAAqB;AAClD,SACE,QAAOA,+BAAOC,aAAY,YAC1B,8CAA8CC,KAAKF,MAAMC,OAAO;AAEpE;AAEgBE,SAAAA,mBAIdC,UACAC,YACAC,KAGQ;AACJC,MAAAA;AACAC,MAAAA;AACAR,MAAAA;AAEJ,QAAMS,OAAOA,MAAM;AACjB,QAAI,OAAOC,aAAa,gBAAeJ,kCAAY,OAAO;AACxDE,aAAQ,MAAM;AACPG,aAAAA,QAAQC,QAAQJ,IAAI;AAAA,IAAA;AAE7B,QAAI,CAACD,aAAa;AACFH,oBAAAA,SAAAA,EACXS,KAAMC,CAAQ,QAAA;AACCC,sBAAAA;AACPD,eAAAA,IAAIT,cAAc,SAAS;AAC3BG,eAAAA;AAAAA,MAAAA,CACR,EACAQ,MAAOC,CAAQ,QAAA;AACNA,gBAAAA;AAAAA,MAAAA,CACT;AAAA,IAAA;AAGEV,WAAAA;AAAAA,EACT;AAEMW,QAAAA,WAAW,SAASC,KAAKC,OAAY;AAGzC,QAAIpB,OAAO;AACLD,UAAAA,sBAAsBC,KAAK,GAAG;AAMhC,YACEA,iBAAiBqB,SACjB,OAAOC,WAAW,eAClB,OAAOC,mBAAmB,aAC1B;AAKMC,gBAAAA,aAAa,0BAA0BxB,MAAMC,OAAO;AAC1D,cAAI,CAACsB,eAAeE,QAAQD,UAAU,GAAG;AACxBE,2BAAAA,QAAQF,YAAY,GAAG;AACtCF,mBAAOK,SAASC,OAAO;AAGhB,mBAAA;AAAA,cACLC,SAASA,MAAM;AAAA,YACjB;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAII7B,YAAAA;AAAAA,IAAAA;AAGR,QAAI,CAACQ,MAAM;AACT,YAAM,CAACsB,YAAY,IAAIC,eAAetB,MAAM;AAAA,QAC1CuB,cAAcxB;AAAAA,QACdyB,aAAa;AAAA,MAAA,CACd;AACD,aAAAC,KAAUJ,YAAY;AAAA,IAAA;AAGpBxB,SAAAA,kCAAY,OAAO;AACrB,aAAA6B,gBACGC,YAAU;AAAA,QAAA,IAACC,WAAQ;AAAAF,iBAAAA,gBAAGG,QAAM,EAAA;AAAA,QAAA;AAAA,QAAA,IAAAC,WAAA;AAAAJ,iBAAAA,gBAC1BK,SAAOC,WAAA;AAAA,YAACC,WAAWlC;AAAAA,UAAI,GAAMY,KAAK,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAIzCe,WAAAA,gBAAQK,SAAOC,WAAA;AAAA,MAACC,WAAWlC;AAAAA,IAAI,GAAMY,KAAK,CAAA;AAAA,EAC5C;AAEEF,WAAiByB,UAAUlC;AAEtBS,SAAAA;AACT;"}

package/dist/source/ClientOnly.d.ts

@@ -0,0 +1,49 @@
+import * as Solid from 'solid-js';
+export interface ClientOnlyProps {
+    /**
+     * The children to render if the JS is loaded.
+     */
+    children: Solid.JSX.Element;
+    /**
+     * The fallback component to render if the JS is not yet loaded.
+     */
+    fallback?: Solid.JSX.Element;
+}
+/**
+ * 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(props: ClientOnlyProps): Solid.JSX.Element;
+/**
+ * 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 A signal accessor function that returns true if the JS has been hydrated already, false otherwise.
+ */
+export declare function useHydrated(): Solid.Accessor<boolean>;

package/dist/source/ClientOnly.jsx

@@ -0,0 +1,51 @@
+import * as Solid from 'solid-js';
+import { isServer } from 'solid-js/web';
+/**
+ * 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(props) {
+    return useHydrated() ? <>{props.children}</> : <>{props.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 A signal accessor function that returns true if the JS has been hydrated already, false otherwise.
+ */
+export function useHydrated() {
+    const [hydrated, setHydrated] = Solid.createSignal(!isServer);
+    if (!isServer) {
+        Solid.createEffect(() => {
+            setHydrated(true);
+        });
+    }
+    return hydrated;
+}
+//# sourceMappingURL=ClientOnly.jsx.map

package/dist/source/ClientOnly.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.jsx","sourceRoot":"","sources":["../../src/ClientOnly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAavC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,OAAO,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAA;AACtE,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,WAAW;IACzB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAA;IAE7D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE;YACtB,WAAW,CAAC,IAAI,CAAC,CAAA;QACnB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC"}

package/dist/source/index.d.ts

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

package/dist/source/index.jsx

@@ -5,6 +5,7 @@ pick, functionalUpdate, replaceEqualDeep, isPlainObject, isPlainArray, deepEqual
 export { createHistory, createBrowserHistory, createHashHistory, createMemoryHistory, } from '@tanstack/history';
 export { useAwaited, Await } from './awaited';
 export { CatchBoundary, ErrorComponent } from './CatchBoundary';
+export { ClientOnly } from './ClientOnly';
 export { FileRoute, createFileRoute, FileRouteLoader, LazyRoute, createLazyRoute, createLazyFileRoute, } from './fileRoute';
 export * from './history';
 export { lazyRouteComponent } from './lazyRouteComponent';

package/dist/source/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAA;AAEjD,OAAO,EACL,KAAK,EACL,oBAAoB,EACpB,OAAO,EACP,SAAS,EACT,SAAS,EACT,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACX,aAAa,EACb,eAAe,EACf,aAAa,EACb,cAAc,EACd,WAAW,EACX,MAAM,EACN,MAAM,EACN,WAAW,EACX,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,mBAAmB,EACnB,UAAU,EAAE,MAAM;AAClB,IAAI,EACJ,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,SAAS,EACT,OAAO,EACP,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,uBAAuB,CAAA;AA8K9B,OAAO,EACL,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAU1B,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAG7C,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EACL,SAAS,EACT,eAAe,EACf,eAAe,EACf,SAAS,EACT,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAA;AAEpB,cAAc,WAAW,CAAA;AAEzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEzD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAUpE,OAAO,EACL,OAAO,EACP,aAAa,EACb,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,WAAW,CAAA;AAIlB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAE5D,OAAO,EACL,QAAQ,EACR,WAAW,EACX,KAAK,EACL,WAAW,EACX,SAAS,EACT,oBAAoB,EACpB,eAAe,EACf,0BAA0B,EAC1B,eAAe,EACf,aAAa,GACd,MAAM,SAAS,CAAA;AAWhB,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EACL,cAAc,EACd,MAAM,EACN,gBAAgB,EAChB,cAAc,EACd,qBAAqB,GACtB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AAGxE,OAAO,EACL,2BAA2B,EAC3B,iBAAiB,GAClB,MAAM,qBAAqB,CAAA;AAG5B,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EACL,gBAAgB,EAAE,MAAM;EACzB,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AA+B5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/source/lazyRouteComponent.d.ts

@@ -1,7 +1,2 @@
-import type * as Solid from 'solid-js';
 import type { AsyncRouteComponent } from './route';
-export declare function ClientOnly(props: Solid.ParentProps<{
-    fallback?: Solid.JSX.Element;
-}>): Solid.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/source/lazyRouteComponent.jsx

@@ -1,6 +1,7 @@
-import { Dynamic, isServer } from 'solid-js/web';
+import { Dynamic } from 'solid-js/web';
 import { createResource } from 'solid-js';
 import { Outlet } from './Match';
+import { ClientOnly } from './ClientOnly';
 // If the load fails due to module not found, it may mean a new version of
 // the build was deployed and the user's browser is still using an old version.
 // If this happens, the old version in the user's browser would have an outdated
@@ -10,12 +11,6 @@ function isModuleNotFoundError(error) {
     return (typeof error?.message === 'string' &&
         /Failed to fetch dynamically imported module/.test(error.message));
 }
-export function ClientOnly(props) {
-    return useHydrated() ? <>{props.children}</> : <>{props.fallback}</>;
-}
-export function useHydrated() {
-    return isServer;
-}
 export function lazyRouteComponent(importer, exportName, ssr) {
     let loadPromise;
     let comp;

package/dist/source/lazyRouteComponent.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"lazyRouteComponent.jsx","sourceRoot":"","sources":["../../src/lazyRouteComponent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"lazyRouteComponent.jsx","sourceRoot":"","sources":["../../src/lazyRouteComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,0EAA0E;AAC1E,+EAA+E;AAC/E,gFAAgF;AAChF,0BAA0B;AAC1B,yEAAyE;AACzE,SAAS,qBAAqB,CAAC,KAAU;IACvC,OAAO,CACL,OAAO,KAAK,EAAE,OAAO,KAAK,QAAQ;QAClC,6CAA6C,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAClE,CAAA;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAIhC,QAA0B,EAC1B,UAAiB,EACjB,GAAmB;IAInB,IAAI,WAAqC,CAAA;IACzC,IAAI,IAA4B,CAAA;IAChC,IAAI,KAAU,CAAA;IAEd,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,GAAG,EAAE,EAAE,KAAK,KAAK,EAAE,CAAC;YACzD,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAQ,CAAA;YAC1B,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QAC9B,CAAC;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,WAAW,GAAG,QAAQ,EAAE;iBACrB,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACZ,WAAW,GAAG,SAAS,CAAA;gBACvB,IAAI,GAAG,GAAG,CAAC,UAAU,IAAI,SAAS,CAAC,CAAA;gBACnC,OAAO,IAAI,CAAA;YACb,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,KAAK,GAAG,GAAG,CAAA;YACb,CAAC,CAAC,CAAA;QACN,CAAC;QAED,OAAO,WAAW,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,SAAS,IAAI,CAAC,KAAU;QACvC,6DAA6D;QAC7D,oEAAoE;QACpE,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,qBAAqB,CAAC,KAAK,CAAC,EAAE,CAAC;gBACjC,mEAAmE;gBACnE,uEAAuE;gBACvE,4DAA4D;gBAC5D,0EAA0E;gBAE1E,IACE,KAAK,YAAY,KAAK;oBACtB,OAAO,MAAM,KAAK,WAAW;oBAC7B,OAAO,cAAc,KAAK,WAAW,EACrC,CAAC;oBACD,4EAA4E;oBAC5E,oEAAoE;oBACpE,4DAA4D;oBAC5D,4EAA4E;oBAC5E,MAAM,UAAU,GAAG,0BAA0B,KAAK,CAAC,OAAO,EAAE,CAAA;oBAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;wBACxC,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;wBACvC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAA;wBAExB,4DAA4D;wBAC5D,OAAO;4BACL,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI;yBACpB,CAAA;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;YAED,kCAAkC;YAClC,MAAM,KAAK,CAAA;QACb,CAAC;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,CAAC,YAAY,CAAC,GAAG,cAAc,CAAC,IAAI,EAAE;gBAC1C,YAAY,EAAE,IAAI;gBAClB,WAAW,EAAE,SAAS;aACvB,CAAC,CAAA;YACF,OAAO,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,CAAA;QAC9B,CAAC;QAED,IAAI,GAAG,EAAE,EAAE,KAAK,KAAK,EAAE,CAAC;YACtB,OAAO,CACL,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,AAAD,EAAG,CAAC,CAC/B;UAAA,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EACtC;QAAA,EAAE,UAAU,CAAC,CACd,CAAA;QACH,CAAC;QACD,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAA;IAChD,CAAC,CAEA;IAAC,QAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;IAEjC,OAAO,QAAe,CAAA;AACxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-router",
-  "version": "1.115.3",
+  "version": "1.117.0",
   "description": "Modern and scalable routing for Solid applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.115.0",
-    "@tanstack/router-core": "1.115.3"
+    "@tanstack/router-core": "1.117.0"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",

package/src/ClientOnly.tsx

@@ -0,0 +1,65 @@
+import * as Solid from 'solid-js'
+import { isServer } from 'solid-js/web'
+
+export interface ClientOnlyProps {
+  /**
+   * The children to render if the JS is loaded.
+   */
+  children: Solid.JSX.Element
+  /**
+   * The fallback component to render if the JS is not yet loaded.
+   */
+  fallback?: Solid.JSX.Element
+}
+
+/**
+ * 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(props: ClientOnlyProps) {
+  return useHydrated() ? <>{props.children}</> : <>{props.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 A signal accessor function that returns true if the JS has been hydrated already, false otherwise.
+ */
+export function useHydrated() {
+  const [hydrated, setHydrated] = Solid.createSignal(!isServer)
+
+  if (!isServer) {
+    Solid.createEffect(() => {
+      setHydrated(true)
+    })
+  }
+
+  return hydrated
+}

package/src/index.tsx

@@ -228,6 +228,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,7 +1,7 @@
-import { Dynamic, isServer } from 'solid-js/web'
+import { Dynamic } from 'solid-js/web'
 import { createResource } from 'solid-js'
 import { Outlet } from './Match'
-import type * as Solid from 'solid-js'
+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
@@ -16,16 +16,6 @@ function isModuleNotFoundError(error: any): boolean {
   )
 }
 
-export function ClientOnly(
-  props: Solid.ParentProps<{ fallback?: Solid.JSX.Element }>,
-) {
-  return useHydrated() ? <>{props.children}</> : <>{props.fallback}</>
-}
-
-export function useHydrated() {
-  return isServer
-}
-
 export function lazyRouteComponent<
   T extends Record<string, any>,
   TKey extends keyof T = 'default',