SignalConsumers.tsx

import {useComputed, Signal} from '@preact/signals-react'
import {ReactNode} from 'react'

type SignalConsumerProps<Signal, Selection> = {
  signal: Signal
  children: (value: Selection) => ReactNode
  selector: (s: Signal) => Selection
}

export function ComputedSignalConsumer<Signal, Selection>({
  signal,
  children,
  selector,
}: SignalConsumerProps<Signal, Selection>) {
  const selection = useComputed(() => selector(signal))
  return children(selection.value) as JSX.Element
}

type ConsumerProps<Value> = {
  children: (value: Value) => ReactNode
  signal: Signal<Value>
}

export function SignalConsumer<Value>({children, signal}: ConsumerProps<Value>) {
  return children(signal.value) as JSX.Element
}