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

• iterable
• @opennetwork/vnode
• @opennetwork/vnode-hooks
• @opennetwork/vnode-fragment
• @opennetwork/vdom

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