Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
vanjs-graph
Advanced tools
VanGraph is a library that helps you visualize dependency graph among states and DOM nodes with the help of Graphviz. Here is the sample usage:
const firstName = van.state("Tao"), lastName = van.state("Xin")
const fullName = van.derive(() => `${firstName.val} ${lastName.val}`)
// Build the DOM tree...
// To visualize the dependency graph among `firstName`, `lastName`, `fullName`, and all the
// derived states and DOM nodes from them.
vanGraph.show({firstName, lastName, fullName})
Checkout a demo in CodeSandbox.
The library is published as NPM package vanjs-graph. Run the following command to install the package:
npm install vanjs-graph
To use the NPM package, add this line to your script:
import * as vanGraph from "vanjs-graph"
Alternatively, you can import VanGraph from CDN via a <script type="text/javascript">
tag:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vanjs-graph@0.1.0/dist/van-graph.nomodule.min.js"></script>
https://cdn.jsdelivr.net/npm/vanjs-graph@0.1.0/dist/van-graph.nomodule.js
can be used for the non-minified version.
Note that: you need to import VanJS and @viz-js/viz
before VanGraph for it to be used properly:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.2.nomodule.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@viz-js/viz@3.8.0/lib/viz-standalone.js"></script>
vanGraph.show(states[, options]) => Promise<SVGSVGElement>
The parameter states
represents a collection of State
objects whose dependency graph we want to visualize. All the State
objects and their dependents will be rendered in the dependency graph. states
can either be specified as a plain object, e.g.: {firstName, lastName, fullName}
, or as an array, e.g.: [firstName, lastName, fullName]
. If states
is specified as an array, the variable names won't be shown in the rendered graph.
options
is a plain object with the following properties:
rankdir
: Type string
. Default "LR"
. Optional. Corresponding to the graph attribute rankdir
in Graphviz.The function returns a Promise<SVGSVGElement>
so that you can await the result and then attach SVGSVGElement
to the main DOM tree.
FAQs
Helper library to draw dependency graphs for VanJS State objects
The npm package vanjs-graph receives a total of 6 weekly downloads. As such, vanjs-graph popularity was classified as not popular.
We found that vanjs-graph demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.