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

Modern and scalable routing for Solid applications

{"version":3,"file":"ClientOnly.cjs","names":["Solid","ClientOnlyProps","children","JSX","Element","fallback","ClientOnly","props","hydrated","useHydrated","_$createComponent","Show","when","_$memo","globalHydrated","Accessor","setHydrated","createSignal","onMount"],"sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render when 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  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(globalHydrated)\n\n  Solid.onMount(() => {\n    globalHydrated = true\n    setHydrated(true)\n  })\n\n  return hydrated\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgBM,WAAWC,OAAwB;CACjD,MAAMC,WAAWC,YAAY;CAC7B,QAAA,GAAA,aAAA,iBACGT,SAAMW,MAAI;EAAA,IAACC,OAAI;GAAA,OAAEJ,SAAS;EAAC;EAAA,IAAEH,WAAQ;GAAA,OAAEE,MAAMF,YAAY;EAAI;EAAA,IAAAH,WAAA;GAAA,QAAA,GAAA,aAAA,YACzDK,MAAML,QAAQ;EAAA;CAAA,CAAA;AAGvB;;;;;;;;;;;;;;;;;;;;AAqBA,IAAIY,iBAAiB;AAErB,SAAgBL,cAAuC;CACrD,MAAM,CAACD,UAAUQ,eAAehB,SAAMiB,aAAaH,cAAc;CAEjEd,SAAMkB,cAAc;EAClBJ,iBAAiB;EACjBE,YAAY,IAAI;CAClB,CAAC;CAED,OAAOR;AACT"}