@mark1russell7/render-node

The reactive store of render. Each value is a node with an expression, a coeval document. One write starts one epoch. The store evaluates each reader of the node in topological order, and it stops at each value that does not change.

npm i @mark1russell7/render-node @mark1russell7/render-dsl @mark1russell7/render-splay

import { app, lit, ref } from "@mark1russell7/render-dsl";
import { addNode, batch, nodeStore, readValue, setValue } from "@mark1russell7/render-node";
import { standardOps } from "@mark1russell7/render-splay";

const store = nodeStore({ ops: standardOps });
addNode(store, lit(2), "w");
addNode(store, lit(4), "h");
addNode(store, app("*", ref("w"), ref("h")), "area");

setValue(store, "w", 3);
readValue(store, "area"); // { tag: "some", value: 12 }
store.epochStats; // the nodes that the write evaluated and changed

// A batch makes many writes one epoch
batch(store, () => {
  setValue(store, "w", 5);
  setValue(store, "h", 5);
});

A node can be a container of named slots, and a reference reads through the slots. The NodeOps of a store (splash, flow, deref and targets) are its extension points.

The kernel of coeval compiles the expression of a node one time, at each write. Each epoch evaluates the plan. The store is the host thing of the root world. The kernel gives it each path in one call, and the deref op of the store answers. The reads of a node are its free world references (refsOf of the kernel, readsOf). A store value is data, thus a value with the shape of a reference stays a value.

More

• The site: the guide, live demos and the viewer.
• The API reference: the exports of each package.
• The repository: the source, the tests and the review of each known defect.

Each package of render is ESM, has TypeScript declarations, and works in Node.js 22.12 or later and in browsers. The license is MIT.