@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","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 */\nexport function useHydrated(): Solid.Accessor<boolean> {\n  const [hydrated, setHydrated] = Solid.createSignal(false)\n  Solid.onMount(() => {\n    setHydrated(true)\n  })\n  return hydrated\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgBM,WAAWC,OAAwB;CACjD,MAAMC,WAAWC,aAAa;AAC9B,SAAA,GAAA,aAAA,iBACGT,SAAMW,MAAI;EAAA,IAACC,OAAI;AAAA,UAAEJ,UAAU;;EAAA,IAAEH,WAAQ;AAAA,UAAEE,MAAMF,YAAY;;EAAI,IAAAH,WAAA;AAAA,WAAA,GAAA,aAAA,YACzDK,MAAML,SAAQ;;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AAwBvB,SAAgBO,cAAuC;CACrD,MAAM,CAACD,UAAUO,eAAef,SAAMgB,aAAa,MAAM;AACzDhB,UAAMiB,cAAc;AAClBF,cAAY,KAAK;GACjB;AACF,QAAOP"}