seitu/dist/solid/components/index.mjs

import { useSubscription } from "../hooks/index.mjs";
//#region src/solid/components/index.ts
/**
* Subscribes to a value and passes an accessor to `children` (runs once; call
* `value()` in JSX). Prefer over the primitive when you want a component API.
*
* @example Basic usage
* ```tsx
* import { createWebStorage } from 'seitu/web'
* import { Subscription } from 'seitu/solid'
* import * as z from 'zod'
*
* const sessionStorage = createWebStorage({
*   type: 'sessionStorage',
*   schemas: { count: z.number(), name: z.string() },
*   defaultValues: { count: 0, name: '' },
* })
*
* function Page() {
*   return (
*     <Subscription value={sessionStorage}>
*       {value => <div>{value().count}</div>}
*     </Subscription>
*   )
* }
* ```
*
* @example With selector
* ```tsx
* import { createWebStorage } from 'seitu/web'
* import { Subscription } from 'seitu/solid'
* import * as z from 'zod'
*
* const sessionStorage = createWebStorage({
*   type: 'sessionStorage',
*   schemas: { count: z.number(), name: z.string() },
*   defaultValues: { count: 0, name: '' },
* })
*
* function Page() {
*   return (
*     <Subscription value={sessionStorage} selector={v => v.count}>
*       {count => <div>{count()}</div>}
*     </Subscription>
*   )
* }
* ```
*/
function Subscription(props) {
	const value = useSubscription(() => props.value, { selector: props.selector });
	return props.children(value);
}
//#endregion
export { Subscription };