Complete the NPM bundling

Author: Tao-VanJS

Diff for: .vscode/settings.json

@@ -2,7 +2,8 @@
   "deno.enablePaths": [
     "demo/terminal/server.ts",
     "components/scripts",
-    "x/scripts"
+    "x/scripts",
+    "graph/scripts"
   ],
   "cSpell.words": [
     "currentcolor",

Diff for: graph/README.md

@@ -0,0 +1,57 @@
+# **VanGraph**: Helper Library to Visualize Dependency Graph Among States and DOM Nodes
+
+**VanGraph** is a library that helps you visualize dependency graph among states and DOM nodes with the help of [Graphviz](https://graphviz.org/). Here is the sample usage:
+
+```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})
+```
+
+## Installation
+
+### Via NPM
+
+The library is published as NPM package [vanjs-graph](https://www.npmjs.com/package/vanjs-graph). Run the following command to install the package:
+
+```shell
+npm install vanjs-graph
+```
+
+To use the NPM package, add this line to your script:
+
+```js
+import * as vanGraph from "vanjs-graph"
+```
+
+### Via a Script Tag
+
+Alternatively, you can import **VanGraph** from CDN via a `<script type="text/javascript">` tag:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/van-graph.nomodule.min.js"></script>
+```
+
+`https://cdn.jsdelivr.net/npm/[email protected]/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:
+
+```html
+<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/[email protected]/lib/viz-standalone.js"></script>
+```
+
+[Try on jsfiddle](https://jsfiddle.net/1u69nbek/2/)
+
+## Documentation
+
+```js
+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]`.

Diff for: graph/dist/van-graph.js

@@ -1,5 +1,6 @@
 import * as Viz from "@viz-js/viz";
 import van from "vanjs-core";
+const { b, table, td, tr } = van.tags;
 let bindingsPropKey, listenersPropKey, domPropKey;
 const init = () => {
     const viz = Viz.instance();
@@ -9,12 +10,12 @@ const init = () => {
     listenersPropKey = Object.entries(s)
         .filter(([_, v]) => Array.isArray(v))[1][0];
     van.tags.span(s);
-    domPropKey = Object.keys(s[bindingsPropKey]).find(k => k !== "f");
+    domPropKey = Object.keys(s[bindingsPropKey][0]).find(k => k !== "f");
     return viz;
 };
 const { promise: viz, resolve: resolveViz } = Promise.withResolvers();
 init().then(viz => resolveViz(viz));
-const getLabel = (node) => [node._name].concat(node._f?.toString() ?? [], node._state ? `State {val: ${node._state.rawVal}}` : [], node._dom ? node._dom.nodeName : []).join(" | ");
+const getLabelHtml = (node) => table({ border: 0, cellborder: 1, cellspacing: 0 }, !node._name.startsWith(unnamedPrefix) ? tr(td(b(node._name))) : undefined, node._dom ? tr(td(node._dom.nodeName)) : undefined, node._state ? tr(td(`State {val: ${JSON.stringify(node._state.rawVal)}}`)) : undefined, node._f ? tr(td(node._f.toString() + "\n")) : undefined).outerHTML.replaceAll("\n", '<br align="left"/>');
 const unnamedPrefix = "<unnamed>_", stateProto = Object.getPrototypeOf(van.state());
 const keepConnected = (l) => l.filter((b) => b[domPropKey]?.isConnected);
 const show = async (states, { rankdir = "TB", } = {}) => {
@@ -43,16 +44,17 @@ const show = async (states, { rankdir = "TB", } = {}) => {
         for (const l of s[listenersPropKey]) {
             const newS = l.s;
             let newNode = stateOrDomToNode.get(newS);
-            newNode || stateOrDomToNode.set(newS, newNode = { _name: newName(), _f: l.f, _state: newS });
+            newNode || stateOrDomToNode.set(newS, newNode = { _name: newName(), _state: newS });
+            newNode._f = l.f;
             edges.push([node, newNode]);
         }
     }
     return (await viz).renderSVGElement({
         graphAttributes: { rankdir },
-        nodeAttributes: { shape: "record" },
+        nodeAttributes: { shape: "plain", fontname: "Courier", fontsize: 10 },
         nodes: [...stateOrDomToNode.values()].map(node => ({
             name: node._name,
-            attributes: { label: getLabel(node) },
+            attributes: { label: { html: getLabelHtml(node) } },
         })),
         edges: edges.map(([a, b]) => ({ tail: a._name, head: b._name }))
     });

Diff for: graph/dist/van-graph.nomodule.js

@@ -0,0 +1,62 @@
+{
+  const { b, table, td, tr } = van.tags;
+  let bindingsPropKey, listenersPropKey, domPropKey;
+  const init = () => {
+      const viz = Viz.instance();
+      const s = van.state(0);
+      bindingsPropKey = Object.entries(s)
+          .find(([_, v]) => Array.isArray(v))[0];
+      listenersPropKey = Object.entries(s)
+          .filter(([_, v]) => Array.isArray(v))[1][0];
+      van.tags.span(s);
+      domPropKey = Object.keys(s[bindingsPropKey][0]).find(k => k !== "f");
+      return viz;
+  };
+  const { promise: viz, resolve: resolveViz } = Promise.withResolvers();
+  init().then(viz => resolveViz(viz));
+  const getLabelHtml = (node) => table({ border: 0, cellborder: 1, cellspacing: 0 }, !node._name.startsWith(unnamedPrefix) ? tr(td(b(node._name))) : undefined, node._dom ? tr(td(node._dom.nodeName)) : undefined, node._state ? tr(td(`State {val: ${JSON.stringify(node._state.rawVal)}}`)) : undefined, node._f ? tr(td(node._f.toString() + "\n")) : undefined).outerHTML.replaceAll("\n", '<br align="left"/>');
+  const unnamedPrefix = "<unnamed>_", stateProto = Object.getPrototypeOf(van.state());
+  const keepConnected = (l) => l.filter((b) => b[domPropKey]?.isConnected);
+  const show = async (states, { rankdir = "TB", } = {}) => {
+      let id = 0;
+      const newName = () => unnamedPrefix + ++id;
+      const stateOrDomToNode = new Map(), edges = Array();
+      if (Array.isArray(states))
+          for (const s of states)
+              stateOrDomToNode.set(s, { _name: newName(), _state: s });
+      else
+          for (const [name, s] of Object.entries(states))
+              stateOrDomToNode.set(s, { _name: name, _state: s });
+      let iter = stateOrDomToNode.entries();
+      for (let item = iter.next(); !item.done; item = iter.next()) {
+          const [s, node] = item.value;
+          if (Object.getPrototypeOf(s) !== stateProto)
+              continue;
+          s[bindingsPropKey] = keepConnected(s[bindingsPropKey]);
+          s[listenersPropKey] = keepConnected(s[listenersPropKey]);
+          for (const b of s[bindingsPropKey]) {
+              const dom = b[domPropKey];
+              let newNode = stateOrDomToNode.get(dom);
+              newNode || stateOrDomToNode.set(dom, newNode = { _name: newName(), _f: b.f, _dom: dom });
+              edges.push([node, newNode]);
+          }
+          for (const l of s[listenersPropKey]) {
+              const newS = l.s;
+              let newNode = stateOrDomToNode.get(newS);
+              newNode || stateOrDomToNode.set(newS, newNode = { _name: newName(), _state: newS });
+              newNode._f = l.f;
+              edges.push([node, newNode]);
+          }
+      }
+      return (await viz).renderSVGElement({
+          graphAttributes: { rankdir },
+          nodeAttributes: { shape: "plain", fontname: "Courier", fontsize: 10 },
+          nodes: [...stateOrDomToNode.values()].map(node => ({
+              name: node._name,
+              attributes: { label: { html: getLabelHtml(node) } },
+          })),
+          edges: edges.map(([a, b]) => ({ tail: a._name, head: b._name }))
+      });
+  };
+  window.vanGraph = { show };
+}

Diff for: graph/dist/van-graph.nomodule.min.js

@@ -13,6 +13,7 @@
     "terser": "^5.31.6"
   },
   "dependencies": {
-    "vanjs-core": "^1.5.2"
+    "vanjs-core": "^1.5.2",
+    "vanjs-graph": "^0.1.0-rc.3"
   }
 }

Diff for: graph/examples/basic/package-lock.json

@@ -1,5 +1,5 @@
 import van from "vanjs-core"
-import * as vanGraph from "../../../src/van-graph"
+import * as vanGraph from "vanjs-graph"
 
 const {button, div, input, option, pre, select} = van.tags