-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathgraph.html
171 lines (151 loc) · 12.5 KB
/
graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/logo.svg">
<title>VanGraph - Visualize Dependencies in Your App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<style>
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');
}
</style>
<link rel="stylesheet" href="/code/w3-v1.css">
<link id="prism-css" rel="stylesheet" href="">
<link rel="stylesheet" href="/vanjs-v2.css">
</head>
<body class="line-numbers" data-prismjs-copy="📋">
<!-- Gurubase Widget -->
<script async src="https://widget.gurubase.io/widget.latest.min.js" id="guru-widget-id" data-widget-id="f0WMAZ_-X7VX2FTx6oGbm_FvuhgEyJTZKjTrEqCDlQ0" data-text="Ask AI" data-bg-color="rgba(244, 67, 54, 0.3)" data-light-mode="auto">
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XFMTW2GNRV"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XFMTW2GNRV');
</script>
<script type="text/javascript" src="/code/prism-v1.js" defer></script>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:280px;font-weight:bold;" id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<h1 class="w3-padding-16 w3-xxxlarge">
<img src="/logo.svg" alt="VanJS" width="192px" height="192px">
</h1>
</div>
<div id="nav" class="w3-bar-block"><a href="/" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a><a href="/start" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Getting Started</a><a href="/tutorial" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Tutorial</a><a href="/demo" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">VanJS by Example</a><a href="/convert" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">HTML/MD to VanJS</a><a href="/vanui" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">VanUI</a><a href="/minivan" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Mini-Van</a><a href="/ssr" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">SSR & Hydration</a><a href="/x" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">X</a><a href="/advanced" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Advanced Topics</a><a href="/media" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Media Coverage</a><a href="/about" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">About</a></div>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
<span id="title-bar"></span>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- Dark‑/light‑mode toggle button -->
<button id="theme-toggle" title="Toggle dark / light mode" style="position:fixed;top:15px;right:20px;background:none;border:none;font-size:22px;cursor:pointer;z-index:30;">
🌙
</button>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px;">
<div id="page">
<div id="content"><h1 class="w3-xxlarge"><strong>VanGraph</strong>: Visualize Dependencies in Your App</h1><p><strong>VanGraph</strong> is a library that helps you visualize dependency graph among states and DOM nodes with the help of <a href="https://graphviz.org/" class="w3-hover-opacity">Graphviz</a>. Here is the sample usage:</p><pre><code class="language-js">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})
</code></pre><p>Checkout a demo in <a href="https://codesandbox.io/p/devbox/github/vanjs-org/van/tree/main/graph/examples/basic?file=%2Fsrc%2Fmain.ts" class="w3-hover-opacity">CodeSandbox</a>.</p><h2 class="w3-xxlarge w3-text-red" id="installation"><a class="self-link" href="#installation">Installation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><h3 class="w3-large w3-text-red" id="via-npm"><a class="self-link" href="#via-npm">Via NPM</a></h3><p>The library is published as NPM package <a href="https://www.npmjs.com/package/vanjs-graph" class="w3-hover-opacity">vanjs-graph</a>. Run the following command to install the package:</p><pre><code class="language-shell">npm install vanjs-graph
</code></pre><p>To use the NPM package, add this line to your script:</p><pre><code class="language-js">import * as vanGraph from "vanjs-graph"
</code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanGraph</strong> from CDN via a <code class="symbol"><script type="text/javascript"></code> tag:</p><pre><code class="language-html"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/van-graph.nomodule.min.js"></script>
</code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-graph.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: you need to import <strong>VanJS</strong> and <code class="symbol">@viz-js/viz</code> before <strong>VanGraph</strong> for it to be used properly:</p><pre><code class="language-html"><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.5.nomodule.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@viz-js/[email protected]/lib/viz-standalone.js"></script>
</code></pre><p><a href="https://jsfiddle.net/zo49cqys/1/" class="w3-hover-opacity">Try on jsfiddle</a></p><h2 class="w3-xxlarge w3-text-red" id="documentation"><a class="self-link" href="#documentation">Documentation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><pre><code class="language-js">vanGraph.show(states[, options]) => Promise<SVGSVGElement>
</code></pre><p>The parameter <code class="symbol">states</code> represents a collection of <code class="symbol">State</code> objects whose dependency graph we want to visualize. All the <code class="symbol">State</code> objects and their dependents will be rendered in the dependency graph. <code class="symbol">states</code> can either be specified as a plain object, e.g.: <code class="symbol">{firstName, lastName, fullName}</code>, or as an array, e.g.: <code class="symbol">[firstName, lastName, fullName]</code>. If <code class="symbol">states</code> is specified as an array, the variable names won't be shown in the rendered graph.</p><p><code class="symbol">options</code> is a plain object with the following properties:</p><ul><li><code class="symbol">rankdir</code>: Type <code class="symbol">string</code>. Default <code class="symbol">"LR"</code>. Optional. Corresponding to the graph attribute <code class="symbol">rankdir</code> in Graphviz.</li></ul><p>The function returns a <code class="symbol">Promise<SVGSVGElement></code> so that you can await the result and then attach <code class="symbol">SVGSVGElement</code> to the main DOM tree.</p></div>
<aside id="toc"><ul><li><a href="#installation" class="w3-hover-opacity">Installation</a><ul><li><a href="#via-npm" class="w3-hover-opacity">Via NPM</a></li><li><a href="#via-a-script-tag" class="w3-hover-opacity">Via a Script Tag</a></li></ul></li><li><a href="#documentation" class="w3-hover-opacity">Documentation</a></li></ul></aside>
</div>
</div>
<script>
// Script to open and close sidebar
const w3_open = () => {
document.getElementById("mySidebar").style.display = "block"
document.getElementById("myOverlay").style.display = "block"
}
const w3_close = () => {
document.getElementById("mySidebar").style.display = "none"
document.getElementById("myOverlay").style.display = "none"
}
const tocDom = document.getElementById("toc")
// Tracks the current toc item
const trackToc = () => {
const allHeadings = [...document.querySelectorAll("h2,h3")]
const currentHeadingIndex = allHeadings.findIndex(h => h.getBoundingClientRect().top >= 0)
let currentHeading
if (currentHeadingIndex < 0) currentHeading = allHeadings[allHeadings.length - 1]; else {
currentHeading = allHeadings[currentHeadingIndex]
if (currentHeadingIndex > 0 && currentHeading.getBoundingClientRect().top > innerHeight)
currentHeading = allHeadings[currentHeadingIndex - 1]
}
for (const e of document.querySelectorAll("#toc li a"))
if (e.href.split("#")[1] === currentHeading?.id) {
e.classList.add("current-heading")
const {top: tocTop, bottom: tocBottom} = tocDom.getBoundingClientRect()
const {top: eTop, bottom: eBottom} = e.getBoundingClientRect()
if (eBottom > tocBottom) tocDom.scrollTop += eBottom - tocBottom
else if (eTop < tocTop) tocDom.scrollTop -= tocTop - eTop
} else
e.classList.remove("current-heading")
}
trackToc()
document.addEventListener("scroll", trackToc)
addEventListener("resize", trackToc)
// Dark / light theme handling
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
const root = document.documentElement
const btn = document.getElementById("theme-toggle")
const applyTheme = theme => {
if (theme === "dark") {
root.setAttribute("data-theme", "dark")
document.getElementById("prism-css").href = "/code/prism-v2-dark.css"
btn.textContent = "☀️"
} else {
root.removeAttribute("data-theme")
document.getElementById("prism-css").href = "/code/prism-v2.css"
btn.textContent = "🌙"
}
if (typeof updateChart === "function") updateChart()
}
const stored = localStorage.getItem("theme")
if (stored === "light" || stored === "dark")
applyTheme(stored)
else
applyTheme(prefersDarkMq.matches ? "dark" : "light")
btn.addEventListener("click", () => {
const current = root.getAttribute("data-theme") === "dark" ? "dark" : "light"
const next = current === "dark" ? "light" : "dark"
localStorage.setItem("theme", next)
applyTheme(next)
})
prefersDarkMq.addEventListener("change", e => {
if (!localStorage.getItem("theme"))
applyTheme(e.matches ? "dark" : "light")
})
const copy = e => {
const file = e.previousElementSibling.innerText
const importLine = file.includes("nomodule") ?
`<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/${file}"><\/script>` :
`import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/${file}"`
navigator.clipboard.writeText(importLine)
.then(() => e.querySelector(".tooltip").innerText = "Copied")
.catch(() => e.querySelector(".tooltip").innerText = "Copy failed")
}
const resetTooltip = e => e.querySelector(".tooltip").innerText = "Copy import line"
</script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async src="https://buttons.github.io/buttons.js"></script>
<link rel="prefetch" href="/code/prism-v1.js" as="script"><link rel="prefetch" href="https://www.gstatic.com/charts/loader.js" as="script"><link rel="prefetch" href="/code/diff.min.js" as="script"><link rel="prefetch" href="/code/van-1.5.5.nomodule.min.js" as="script"><link rel="prefetch" href="/code/van-x-0.6.2.nomodule.min.js" as="script"></body></html>