Skip to content

raf-effect-atom and effect-atom-boundary are on npm. Both are pre-1.0, so a minor release can still break them. Install them

raf-effect-atom

Project

Credits

raf-effect-atom builds on Effect Atom and Effect RPC, takes its boundaries from result-rpc and its loaders from raf-query, and its demos' visuals are inspired by Visual Effect and the Effect website.

Effect

Both packages are thin layers on Effect: Effect Atom's registry is the cache, AtomRpc makes the query atoms, and Effect RPC's Schemas carry typed failures from the server to the browser. Thanks to the Effect team.

result-rpc

The typed error boundaries are result-rpc's idea: its Shells are error boundaries that claim failure classes and remove them from the component's error type. effect-atom-boundary is that idea over Effect Atom, claiming by _tag.

raf-query

The loader verbs, prefetch, ensure and fetch, and the way results stream from loaders into the browser, come from raf-query, a render-as-you-fetch cache for React. So do this site, its live demos and its docs tooling.

The demos' visuals

The live demos draw what happens over time, after two sources of inspiration:

  • Kit Langton's Visual Effect (source), which shows Effect programs as nodes that change colour as they run, succeed, fail or die, with a timer while they run. The demos' atoms do the same through Initial, Success and Failure.
  • The Effect website's visuals, such as the lane timelines in its Module of the Week posts (Cluster, part 4), where messages travel between lanes over time. The demos' requests travel between the registry and the worker's RPC server the same way.

The demos' code is this site's own, built on its shared components.

TanStack

The router integration and this site run on TanStack Router and TanStack Start.