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

Modern and scalable routing for Solid applications

const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
let solid_js_web = require("solid-js/web");
let solid_js = require("solid-js");
solid_js = require_runtime.__toESM(solid_js);
//#region src/ClientOnly.tsx
/**
* 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>
* )
* ```
*/
function ClientOnly(props) {
	const hydrated = useHydrated();
	return (0, solid_js_web.createComponent)(solid_js.Show, {
		get when() {
			return hydrated();
		},
		get fallback() {
			return props.fallback ?? null;
		},
		get children() {
			return (0, solid_js_web.memo)(() => props.children);
		}
	});
}
/**
* 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.
* const hydrated = useHydrated()
* return (
*   <button type="button" disabled={!hydrated()} onClick={doSomethingCustom}>
*     Click me
*   </button>
* )
* ```
* @returns True if the JS has been hydrated already, false otherwise.
*/
function useHydrated() {
	const [hydrated, setHydrated] = solid_js.createSignal(false);
	solid_js.onMount(() => {
		setHydrated(true);
	});
	return hydrated;
}
//#endregion
exports.ClientOnly = ClientOnly;
exports.useHydrated = useHydrated;

//# sourceMappingURL=ClientOnly.cjs.map