The wire over a Web Worker

How it works

A transport is anything that carries ordered, reliable strings, so the port between two threads is one. The worker hosts a registry; the tab connects to it. That is the entire worker file:

import { define, registry } from '@nonchalant/core'
import { expose } from '@nonchalant/wire'
import { portTransport, workerEndpoint } from '../lib/port.ts'
import { primes } from './primes.ts'

expose(registry({ primes: define(primes) }), portTransport(workerEndpoint()))

and the tab looks the process up the way it looks up anything else:

const there = connect<Lab>(portTransport(new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' })))
const here  = registry({ primes: define(primes) })   // the same definition, this thread

The switch flips between those two registries at runtime. start, stop and reset are the same casts either way; the state arrives as the same patches. What differs is who does the arithmetic: on this thread the grinder shares the frame budget with the hand, and the worst-frame number climbs from about 17 ms to the length of one chunk.

portTransport is the third transport in the box, next to the WebSocket and BroadcastChannel ones — twenty lines over postMessage. It takes a port rather than making one, so the same function serves a Worker, a MessagePort, or a worker's own global. It needs no reconnect story: a port does not drop, and messages posted before the worker has evaluated its script are queued rather than lost.

export function portTransport(port: MessageEndpoint): Transport {
  let handlers: TransportHandlers | null = null
  port.addEventListener('message', (ev) => {
    if (typeof ev.data === 'string') handlers?.message(ev.data)
  })
  return {
    send: (data) => port.postMessage(data),
    subscribe: (h) => { handlers = h; queueMicrotask(() => h.open?.()); return () => { handlers = null } },
  }
}

Only state crosses the port. The thousands of primes the process has found live in a plain array inside it; each yield carries the counters and the last six. The full list is one call() away — a correlated request, answered over the same port.