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

Modern and scalable routing for React applications

{"version":3,"file":"ClientOnly.cjs","names":["React"],"sources":["../../src/ClientOnly.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nconst getSnapshot = () => true\nconst getServerSnapshot = () => false\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render when 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 <React.Fragment>{useHydrated() ? children : fallback}</React.Fragment>\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 */\nexport function useHydrated(): boolean\n/**\n * @internal\n * callers whose output does not depend on hydration can keep the\n * same snapshot on both sides, avoiding an unnecessary post-hydration render.\n */\nexport function useHydrated(enabled: boolean): boolean\n/** @internal */\nexport function useHydrated(enabled = true): boolean {\n  return React.useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    enabled ? getServerSnapshot : getSnapshot,\n  )\n}\n\nfunction subscribe() {\n  return () => {\n    // noop\n  }\n}\n"],"mappings":";;;;;;AAIA,IAAM,oBAAoB;AAC1B,IAAM,0BAA0B;;;;;;;;;;;;;;;;;;AA8BhC,SAAgB,WAAW,EAAE,UAAU,WAAW,QAAyB;CACzE,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,MAAAA,QAAM,UAAP,EAAA,UAAiB,YAAY,IAAI,WAAW,SAAyB,CAAA;AAC9E;;AA6BA,SAAgB,YAAY,UAAU,MAAe;CACnD,OAAOA,MAAAA,QAAM,qBACX,WACA,aACA,UAAU,oBAAoB,WAChC;AACF;AAEA,SAAS,YAAY;CACnB,aAAa,CAEb;AACF"}