bi-reactive

NPM · GitHub · Demos · API

A signals-like bidirectional reactive programming system where edges can go both ways. Forward and backward propagation are handled by the engine, with the same set of caveats as regular reactive programming.

Install

npm install bireactive
Copy

Runtime dependencies temml (for tex), Automerge and prism-esm (for code) are installed automatically. These will be split into separate packages later so the core stays dependency-free.

Sketch

import { cell } from "bireactive";

// A derived value with an inverse — the edge runs both ways.
const celsius = cell(20);
const fahrenheit = celsius.lens(
  c => (c * 9) / 5 + 32, // forward
  f => ((f - 32) * 5) / 9, // backward
);

fahrenheit.value; // 68
fahrenheit.value = 212; // write the derived end…
celsius.value; // 100 — …and the source updates to match
Copy

Values also come as small classes (Num, Vec, Box, Color, ...) with field lenses and bidirectional operators.

import { vec, box, mean } from "bireactive";

// Free-function lens: the mean (midpoint) of two points, writable.
const a = vec(0, 0);
const b = vec(10, 0);
const mid = mean([a, b]);
mid.value = { x: 5, y: 10 }; // drag it up…
a.value; // { x: 0, y: 10 } — both ends translate to keep it the midpoint

// Chaining value-class operators builds a multi-step writable view.
const p = vec(10, 20);
const view = p.scale(2).right(5); // ×2, then shift +5 in x
view.value; // { x: 25, y: 40 }
view.value = { x: 5, y: 0 }; // write the end of the chain…
p.value; // { x: 0, y: 0 } — inverted back through right, then scale

// Cross-type lens: a Box/Vec relation projected to Bool, still writable.
const region = box(0, 0, 100, 100); // x, y, w, h
const q = vec(150, 50); // outside the box
const inside = region.contains(q); // Bool view of "q ∈ region"
inside.value; // false
inside.value = true; // assert membership…
q.value; // { x: 100, y: 50 } — q snaps to the nearest in-box point
Copy

Documentation

• Guide — start with the Overview (a map of every capability) and Getting Started.
• API reference — every export, grouped by domain; the guide lives in its sidebar too.
• Demos — live, interactive examples.

Develop

npm run dev        # serve the landing page at :5555
npm run site       # build the static site + API docs into dist-web/
npm run docs       # build just the API reference + guide into dist-web/api/
npm run build      # compile the library into dist/
npm test           # run the test suite
Copy

Status

0.x — APIs are still moving frequently. The package is a single bundle today; sub-packages will be split out once the surface settles.

License

MIT