Datagraph is a state management framework for TypeScript.
This library is in development and not ready for production usage.
Install:
yarn add @datagraph/dgf
When you think about the data in an application, each piece of data can be thought of as depending on other pieces of data in the application. Some pieces of data don't depend on other persistent pieces of data though, but start out in some state and change over time, with their changes being triggered by a set of events.
One can create a diagram of those different pieces of state and their dependencies and create a graph such that pieces of data are nodes and the dependencies between those pieces of data are edges. In most applications the changes are propagated by hand-written logic. When some piece of data (node) A changes, some node B must be updated to take that change of A into account. Then perhaps some node C must change in response to node B's change, and so on and so forth.
This implicit graph implementation happens in most applications. The logic to effect these changes can be very brittle. Different developers write changes without having a good mental model of the whole graph, and bugs slip in.
Datagraph allows application data to be explicitly organized as a directed acyclic graph. Each piece of data is a node and the edges are the dependencies between the data.
Each node has an output type, called its value type.
Each node has a Props object type. This is an object with named values of particular types. For
example:
type Props = {
a: number;
b: string;
};For a node with Props, the one who instantiates the node must provide either static values for
both a and b, or link nodes whose value types match a and b.
A functional node (FN) is a node whose value is a function of its props.
Here is an example of a functional node:
type Props = {
a: number;
b: string;
};
export const FormulaNode = createFunctionalNode<number, Props>(
(props: Props) => (props.a * 2) + props.b.length,
);This node;s value is the props.a value times 2, plus the length of the string props.b. Because
it only relies on the props values and nothing else, is it a pure function of props.
- datagraph-react is a way to bind data to React components. (WIP)