@tanstack/solid-router/dist/cjs/ClientOnly.cjs.map

Modern and scalable routing for Solid applications

{"version":3,"file":"ClientOnly.cjs","names":["<Solid.Show when={hydrated()} fallback={props.fallback ?? null}>\n      {props.children}\n    </Solid.Show>","Solid.Show"],"sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport type { JSX } from '@solidjs/web'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render when the JS is loaded.\n   */\n  children: JSX.Element\n  /**\n   * The fallback component to render if the JS is not yet loaded.\n   */\n  fallback?: 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  const hydrated = useHydrated()\n  return (\n    <Solid.Show when={hydrated()} fallback={props.fallback ?? null}>\n      {props.children}\n    </Solid.Show>\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 * const 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 */\nlet globalHydrated = false\n\nexport function useHydrated(): Solid.Accessor<boolean> {\n  const [hydrated, setHydrated] = Solid.createSignal(\n    globalHydrated && !Solid.sharedConfig.hydrating,\n  )\n\n  Solid.createEffect(\n    () => true,\n    () => {\n      globalHydrated = true\n      setHydrated(true)\n    },\n  )\n\n  return hydrated\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,WAAW,OAAwB;CACjD,MAAM,WAAW,YAAY;CAC7B,QAAA,GAAA,aAAA,iBACEA,SAACC,MAAD;EAAY,IAAA,OAAA;UAAM,SAAS;EAAC;EAAE,IAAA,WAAA;UAAU,MAAM,YAAY;EAAI;EAA9D,IAAA,WAAA;UACG,MAAM;EACG;;AAEhB;;;;;;;;;;;;;;;;;;;;AAqBA,IAAI,iBAAiB;AAErB,SAAgB,cAAuC;CACrD,MAAM,CAAC,UAAU,eAAe,SAAM,aACpC,kBAAkB,CAAC,SAAM,aAAa,SACxC;CAEA,SAAM,mBACE,YACA;EACJ,iBAAiB;EACjB,YAAY,IAAI;CAClB,CACF;CAEA,OAAO;AACT"}