@playfast/reform-remote-web

Browser/web client transport for reform's remote UI — with built-in reconnect.

A factory that wraps a WebSocket into a RemoteTransport for @playfast/reform-remote's connect. It sends trigger Invokes up and surfaces Snapshot/Patches down, JSON-framed.

import { createWebSocketClientTransport } from '@playfast/reform-remote-web'
import { RemoteUI, useConnectionStatus } from '@playfast/reform-remote'
import { views } from './views'

const transport = createWebSocketClientTransport({ url: 'ws://localhost:8080' })

const App = () => {
  const status = useConnectionStatus(transport) // 'connecting' | 'open' | 'reconnecting' | 'closed'
  return (
    <>
      {status !== 'open' ? <div>{status}…</div> : null}
      <RemoteUI transport={transport} views={views} />
    </>
  )
}

Reconnection is built in. A dropped socket is retried with exponential backoff (baseDelayMs/maxDelayMs), and because the message handlers persist across sockets, the server's first frame on the new connection — always a Snapshot — re-syncs the tree automatically, with no stale nodes left behind. The returned value is a RemoteTransport (pass it straight to connect or <RemoteUI>) that additionally carries status(), onStatusChange() — together a StatusReporter, so useConnectionStatus drives the badge above — and close() to stop reconnecting.

Works anywhere a global WebSocket exists — browsers, Bun, and Node 22+. Elsewhere, inject one via the WebSocket option. Pair it with a server adapter: @playfast/reform-remote-node or @playfast/reform-remote-bun.

License

MIT