VGraph
VGraph is a collection of tooling to generate and observe virtual graphs using JavaScript.
Modules
All modules listed below are available on https://www.npmjs.com/, https://unpkg.com/, and https://www.pika.dev/ (soon also by way of GitHub registry)
Published as ECMAScript Modules, these modules can be further compiled to be compatible with your target environment using tools such as https://parceljs.org/ or https://github.com/pikapkg/web
Available Modules
Examples
Below are examples authored in TypeScript which show different ways you can express virtual nodes
For these examples we're utilising vdom to project the graph state into the DOM
You can view each of these examples source on GitHub
All examples below will be displayed for 2 seconds after the final render has completed
Some examples, for example the context example, won't complete unless all utilised sources have completed
Single Render
The next example shows a single rendering component
This means that the component only updates the visual state once, and can be considered static to VGraph
Static Nodes
The next example shows static nodes
We don't need an instance of a function or class to render these, they are re-evaluated each time they are referenced
A static node can be used the same way as any other node
Async Single Render
The next example shows an async single rendering component
This means that the component only updates the visual state once, but it is not updated until the component returns its visual state using a promise
Async Generator
The next example shows an async generator component
Each value that is yielded will be rendered within the visual state
This can be used to provide a loading component while an async task is being used for example
Interactive Button
The next example shows one way to implement interactive components
After the button is rendered the component waits for the "onClicked" promise to resolve before it updates the visual state again
Reference Flag
The next example shows a flag being found within the virtual graph
Context
The next example shows a context value being defined that can be utilised within any async context.
Cube
The next example shows a set of cubes with updating state