Hooks

import { createWebStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/solid'
import * as z from 'zod'

function Counter() {
  const value = useSubscription(() => createWebStorageValue({
    type: 'sessionStorage',
    key: 'test',
    defaultValue: 0,
    schema: z.number(),
  }))

  return <div>{value()}</div>
}

import { createWebStorage } from 'seitu/web'
import { useSubscription } 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 Counter() {
  const value = useSubscription(sessionStorage)
  return <div>{value().count}</div>
}

import { createWebStorage } from 'seitu/web'
import { useSubscription } 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 Counter() {
  // Accessor updates only when count changes
  const count = useSubscription(sessionStorage, { selector: value => value.count })

  return <div>{count()}</div>
}

import { createSignal } from 'solid-js'
import { createWebStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/solid'
import * as z from 'zod'

function User() {
  const [userId, setUserId] = createSignal('user-1')
  const data = useSubscription(() => createWebStorageValue({
    type: 'localStorage',
    key: `user:${userId()}`,
    schema: z.object({ name: z.string() }),
    defaultValue: { name: '' },
  }))

  return <div>{data().name}</div>
}

import { createScrollState } from 'seitu/web'
import { useSubscription } from 'seitu/solid'

function Page() {
  let ref: HTMLDivElement | undefined
  const state = useSubscription(() => createScrollState({ element: () => ref, direction: 'vertical' }))

  return (
    <div ref={ref}>
      {String(state().top.reached)}
    </div>
  )
}