Nonchalant

A generator already has the three things a piece of application state needs: local variables to hold it, a loop to take input in order, and an end. Nonchalant runs that generator and gives you a handle to it.

You write a process as an async generator. spawn runs it and hands back a typed handle you can read, send to, ask, iterate, and dispose. State is ordinary let variables; input is for await; output is yield. There is no store, no reducer registration, no dependency array.

import { spawn } from '@nonchalant/core'
import type { Self } from '@nonchalant/core'
import { mount } from '@nonchalant/dom'
import { button, div, span } from '@nonchalant/dom/tags'

const counter = spawn(async function* (self: Self<number>) {
  let n = 0                          // this is the state
  yield n
  for await (const d of self) {      // this is the input
    n += d
    yield n                          // this is the output
  }
}, undefined, { initial: 0 })

mount(document.getElementById('app')!, div({},
  button({ onclick: () => counter.send(-1) }, '−'),
  span({}, counter),                 // a live binding
  button({ onclick: () => counter.send(1) }, '+')))

That same unit scales up without changing shape. A widget's state is a process. Shared application state is a process, reached by name. A cached query is a process with an idle timeout. A process on a server is the same process, reached through a transport instead of a function call.

The packages are not published yet — the npm scope claim and first release are still to come. For now it is a clone-and-explore library:

git clone https://github.com/twfarland/nonchalant
cd nonchalant
pnpm install

pnpm dev     # this site at /, the example gallery at /examples/
pnpm test    # the whole suite, including the perf, size, and DOM-write budgets
pnpm check   # strict TypeScript across packages, examples, and this site

One noun with two faces. Process is what a holder of the running thing can do; Self is what the generator itself receives.

A message that expects an answer is a Call, and the compiler keeps the two straight: it refuses to send a call or ask a cast.

type CartMsg =
  | { type: 'add'; item: Item }                                   // a cast
  | Call<{ type: 'checkout' }, { ok: boolean; charged: number }>  // a call

cart.send({ type: 'add', item })                 // fine
const res = await cart.ask({ type: 'checkout' }) // res is typed; a crash rejects it

Every demo below is running on this page right now — the real library, no server anywhere. The listing under each one is the program above it: the same file, imported twice, once to run and once to read.

You write ordinary immutable updates. Every yield is diffed structurally against the previous snapshot, and a reader wakes only if a path it actually read is in the diff.

s = { ...s, total: s.total + item.price }   // an ordinary immutable update
yield s                                     // diffed → only /total readers wake;
                                            // a binding on items[3].done sleeps through it

Nothing declares its dependencies. Reads inside a tracked context go through a short-lived recording proxy, so the set of paths a binding depends on is observed rather than annotated — which is why there are no dependency arrays, no memos, and no re-render tax to defend against. Views run once and never rebuild; structural change is expressed as keyed lists or swapped regions.

The claims are CI assertions, not adjectives:

lookup(name, args) is one operation doing three jobs: dependency injection, query caching, and — once a transport is involved — remote addressing. Swapping a local registry for a connection keeps the interface, so the process and the view do not change:

const shop = registry({ cart: define(cart) })                  // state lives in this tab
const shop = connect<Shop>(webSocketTransport('wss://…'))      // state lives on a server

What crosses is a patch of plain data — never markup, never code — so the browser keeps rendering and local interaction, and any language can implement the host half against the conformance vectors. A crashed process on the host shows up here as stale: true with the last value intact; reconnecting is not a special case, just a re-lookup that answers with a full snapshot.

One demo needs no server but does need two tabs: multi-tab elects one tab as the host over a BroadcastChannel, and moves the job when you close it. Open it twice.

This page is the short version. The written documentation goes considerably deeper, and every performance or granularity claim in it points at the test that enforces it.

Prior art it stands on

alien-signals for the propagation core, which is a faithful port. Crank for the proof that generator components with plain-local state feel right. Erlang/OTP for mailboxes, casts and calls, and named processes. TanStack Query for cache keys, sharing, and idle eviction. Solid and lit-html for the localized keyed diff. LiveView for server-held state — with data patches here instead of HTML.