Function createLiveStore

ui/src/live/createLiveStore.ts:77–156

(opts: LiveStoreOptions<S>)

}

export function createLiveStore<S>(opts: LiveStoreOptions<S>): LiveStore<S> {
  const inner = createStore<S>(() => opts.initialState)
  const stale = opts.staleAfterMs ?? 60_000

  let refCount = 0
  let cleanup: (() => void) | null = null
  let lastEventTs = Date.now()
  let visibilityHandler: (() => void) | null = null

  const apply: Apply<S> = (next) => {
    if (typeof next === 'function') {
      inner.setState((prev) => (next as (p: S) => S)(prev), true)
    } else {
      inner.setState(next, true)
    }
    lastEventTs = Date.now()
  }

  function start() {
    if (cleanup) return
    lastEventTs = Date.now()
    cleanup = opts.subscribe({ apply })

    visibilityHandler = () => {
      if (document.visibilityState !== 'visible') return
      if (Date.now() - lastEventTs > stale) {
        // Connection might have died silently while backgrounded — take
        // the optimistic stance and reconnect. Worst case we drop a few
        // duplicate events; best case we recover from a zombie socket.
        reconnect()
      }
    }
    document.addEventListener('visibilitychange', visibilityHandler)
  }

  function stop() {
    cleanup?.()
    cleanup = null
    if (visibilityHandler) {
      document.removeEventListener('visibilitychange', visibilityHandler)
      visibilityHandler = null
    }
  }

  function reconnect() {
    if (!cleanup) return
    stop()
    start()
  }

  function bumpRef(delta: 1 | -1) {
    refCount += delta
    if (refCount === 1 && delta === 1) start()
    else if (refCount === 0 && delta === -1) stop()
  }

  function useStore<T>(selector: (s: S) => T): T {
    useEffect(() => {