feature(bin): adds a tool to wrap svg output by graphviz in html (sve…

…rweij#266) (This was already available in the internal `utl` tools folder, but that isn't distributed to the package registries)
lovethisshit · Feb 22, 2020 · d4e01e0 · d4e01e0
1 parent b1765c4
commit d4e01e0
Show file tree

Hide file tree

Showing 13 changed files with 2,513 additions and 2,380 deletions.
diff --git a/bin/wrap-stream-in-html.js b/bin/wrap-stream-in-html.js
@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+const wrap = require("../src/cli/tools/wrap-stream-in-html");
+/*
+ * Wrap some html & css around the stuff passed in stdin, so it becomes a bit more
+ * interactive to use. Tailored to svg's generated by graphviz dot.
+ */
+
+wrap(process.stdin).then(pOutput => process.stdout.write(pOutput));
diff --git a/doc/cli.md b/doc/cli.md
@@ -35,7 +35,9 @@ available in dependency-cruiser configurations.
 1. [`--webpack-config`: use (the resolution options of) a webpack configuration`](#--webpack-config-use-the-resolution-options-of-a-webpack-configuration)
 1. [`--preserve-symlinks`](#--preserve-symlinks)
 
-### [depcruise-fmt](#depcruise-fmt)
+### Standalone formatting of dependency graphs: [depcruise-fmt](#depcruise-fmt)
+
+### Make GraphViz output more interactive: [depcruise-wrap-stream-in-html](#depcruise-wrap-stream-in-html)
 
 ## Command line only options
 
@@ -119,7 +121,7 @@ with _GraphViz dot_ (`-T` is the short form of `--output-type`:)
 dependency-cruise -x "^node_modules" -T dot src | dot -T svg > dependencygraph.svg
 ```
 
-You can customize the look of these graphs. See the 
+You can customize the look of these graphs. See the
 [dot section in the rules reference](./rules-reference.md#dot) for details.
 
 #### ddot - summarize on folder level
@@ -135,8 +137,8 @@ folder level. You can customize it just as you can the dot reporter output.
 > This reporter is _experimental_. It's likely to stay, but the way you configure
 > it or how its output looks might change without major version bumping.
 
-The archi is a variant on the `dot` output. The archi reporter 
-can summarize (or 'collapse') dependencies to folders of your own choosing. 
+The archi is a variant on the `dot` output. The archi reporter
+can summarize (or 'collapse') dependencies to folders of your own choosing.
 Great if you want to have a high level overview of your app's dependencies.
 
 By default it collapses to one folder below folders named _node_modules_, _packages_,
@@ -151,7 +153,6 @@ details.
 
 </details>
 
-
 #### err-html
 
 Generates an stand alone html report with:
@@ -258,7 +259,7 @@ so it's easier to compare than the two json's):
   to replace non-common path elements
   with (`src/search/dragonfly-algorithm.js` -> `src/animal/announce.js`,
   `src/search/dragonfly-algorithm.spec.js` -> `src/animal/announce.spec.js`).
-- (You can use any array of strings here - a good one is Sindre Sorhus' 
+- (You can use any array of strings here - a good one is Sindre Sorhus'
   [mnemonic-words](https://www.npmjs.com/package/mnemonic-words), which
   you can simply require into the option if you're using javascript as
   the config file format):
@@ -591,6 +592,27 @@ Options:
   -h, --help                output usage information
 ```
 
+## depcruise-wrap-stream-in-html
+
+With `depcruise-wrap-stream-in-html` you can wrap the graphical output of
+graphviz dot into html that is geared to make the graph easier to use. It a.o.
+adds highlight-on-hover.
+
+Typical use:
+
+```sh
+depcruise -v -T dot src | dot -T svg | depcruise-wrap-stream-in-html > dependency-graph.html
+```
+
+This works for all dot-based reporters, including `archi` and `ddot`
+
+Some examples:
+
+- [Dependency-cruiser's own dependency graph](https://sverweij.github.io/dependency-cruiser/dependency-cruiser-dependency-graph.html)
+- [yarn v2's high level dependency graph](https://sverweij.github.io/dependency-cruiser/assets/berry-high-level-depencencies.html)
+  (`archi` reporter)
+- [state-machine-cat's dependency graph](https://state-machine-cat.js.org/dependency-cruiser-graph.html)
+
 ## Daphne's dependencies - a gentle introduction
 
 **[Daphne's dependencies](sample-output.md)**

diff --git a/doc/real-world-samples/dependency-cruiser-dir-graph.svg b/doc/real-world-samples/dependency-cruiser-dir-graph.svg
diff --git a/doc/real-world-samples/dependency-cruiser-without-node_modules.svg b/doc/real-world-samples/dependency-cruiser-without-node_modules.svg
diff --git a/docs/dependency-cruiser-archi-graph.html b/docs/dependency-cruiser-archi-graph.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8" />
-    <title>dependency-cruiser dependency-graph</title>
+    <title>dependency graph</title>
     <style>
       .node:active path,
       .node:hover path,
@@ -39,8 +39,7 @@
       }
     </style>
   </head>
-  <body>
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+  <body><?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <!-- Generated by graphviz version 2.43.0 (0)

diff --git a/docs/dependency-cruiser-dependency-graph.html b/docs/dependency-cruiser-dependency-graph.html
diff --git a/docs/dependency-cruiser-dir-graph.html b/docs/dependency-cruiser-dir-graph.html
diff --git a/docs/schema-overview.html b/docs/schema-overview.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8" />
-    <title>dependency-cruiser dependency-graph</title>
+    <title>dependency graph</title>
     <style>
       .node:active path,
       .node:hover path,
@@ -39,8 +39,7 @@
       }
     </style>
   </head>
-  <body>
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+  <body><?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <!-- Generated by graphviz version 2.43.0 (0)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dependency-cruiser",
-  "version": "7.2.0",
+  "version": "7.3.0-beta-3",
   "description": "Validate and visualize dependencies. With your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.",
   "keywords": [
     "static analysis",
@@ -39,7 +39,8 @@
     "dependency-cruiser": "bin/dependency-cruise.js",
     "dependency-cruise": "bin/dependency-cruise.js",
     "depcruise": "bin/dependency-cruise.js",
-    "depcruise-fmt": "bin/depcruise-fmt.js"
+    "depcruise-fmt": "bin/depcruise-fmt.js",
+    "depcruise-wrap-stream-in-html": "bin/wrap-stream-in-html.js"
   },
   "main": "src/main/index.js",
   "types": "types/dependency-cruiser.d.ts",
@@ -66,15 +67,15 @@
     "depcruise:explain": "node ./bin/dependency-cruise.js --output-type err-long --validate -- src bin test configs types utl",
     "depcruise:graph:doc": "npm-run-all depcruise:graph:doc:json depcruise:graph:doc:schema depcruise:graph:doc:types --parallel depcruise:graph:doc:html depcruise:graph:doc:html* depcruise:graph:doc:svg* depcruise:graph:doc:theming:*",
     "depcruise:graph:doc:json": "node ./bin/dependency-cruise.js --validate --include-only '^(src|bin)' --output-type json bin src --output-to tmp_graph_deps.json",
-    "depcruise:graph:doc:html": "./bin/depcruise-fmt.js -T dot -f - tmp_graph_deps.json | dot -T svg | node utl/embed-svg-in-html.utl.js > docs/dependency-cruiser-dependency-graph.html",
-    "depcruise:graph:doc:html-archi": "./bin/depcruise-fmt.js -T archi -f - tmp_graph_deps.json | dot -T svg -Grankdir=TD | node utl/embed-svg-in-html.utl.js > docs/dependency-cruiser-archi-graph.html",
-    "depcruise:graph:doc:html-dir": "./bin/depcruise-fmt.js -T ddot -f - tmp_graph_deps.json | dot -T svg -Grankdir=TD | node utl/embed-svg-in-html.utl.js > docs/dependency-cruiser-dir-graph.html",
+    "depcruise:graph:doc:html": "./bin/depcruise-fmt.js -T dot -f - tmp_graph_deps.json | dot -T svg | node bin/wrap-stream-in-html.js > docs/dependency-cruiser-dependency-graph.html",
+    "depcruise:graph:doc:html-archi": "./bin/depcruise-fmt.js -T archi -f - tmp_graph_deps.json | dot -T svg -Grankdir=TD | node bin/wrap-stream-in-html.js > docs/dependency-cruiser-archi-graph.html",
+    "depcruise:graph:doc:html-dir": "./bin/depcruise-fmt.js -T ddot -f - tmp_graph_deps.json | dot -T svg -Grankdir=TD | node bin/wrap-stream-in-html.js > docs/dependency-cruiser-dir-graph.html",
     "depcruise:graph:doc:svg": "./bin/depcruise-fmt.js -T dot -f - tmp_graph_deps.json | dot -T svg > doc/real-world-samples/dependency-cruiser-without-node_modules.svg",
     "depcruise:graph:doc:svg-archi": "./bin/depcruise-fmt.js -T archi -f - tmp_graph_deps.json | dot -Grankdir=TD -T svg > doc/real-world-samples/dependency-cruiser-archi-graph.svg",
     "depcruise:graph:doc:svg-dir": "./bin/depcruise-fmt.js -T ddot -f - tmp_graph_deps.json | dot -Grankdir=TD -T svg > doc/real-world-samples/dependency-cruiser-dir-graph.svg",
     "depcruise:graph:doc:schema": "npm-run-all depcruise:graph:doc:schema:svg depcruise:graph:doc:schema:html",
     "depcruise:graph:doc:schema:svg": "cd utl/schema && node ../../bin/dependency-cruise.js --validate ../../.dependency-cruiser.json --prefix https://github.com/sverweij/dependency-cruiser/blob/develop/utl/schema/ --output-type dot . | dot -Gsplines=true -T svg > ../overview.svg && cd -",
-    "depcruise:graph:doc:schema:html": "node utl/embed-svg-in-html.utl.js < utl/overview.svg > docs/schema-overview.html",
+    "depcruise:graph:doc:schema:html": "node ./bin/wrap-stream-in-html.js < utl/overview.svg > docs/schema-overview.html",
     "depcruise:graph:doc:theming:bare": " bin/dependency-cruise.js -Tdot -v doc/assets/theming/bare.config.js src/main | dot -Tsvg > doc/assets/theming/bare.svg",
     "depcruise:graph:doc:theming:base": " bin/dependency-cruise.js -Tdot -v doc/assets/theming/base.config.js src/main | dot -Tsvg > doc/assets/theming/base.svg",
     "depcruise:graph:doc:theming:engineering": " bin/dependency-cruise.js -Tdot -v doc/assets/theming/engineering.config.js src/main | dot -Tsvg > doc/assets/theming/engineering.svg",

diff --git a/...-svg-in-html-snippets/footer.snippet.html → .../svg-in-html-snippets/footer.snippet.html b/...-svg-in-html-snippets/footer.snippet.html → .../svg-in-html-snippets/footer.snippet.html
diff --git a/...-svg-in-html-snippets/header.snippet.html → .../svg-in-html-snippets/header.snippet.html b/...-svg-in-html-snippets/header.snippet.html → .../svg-in-html-snippets/header.snippet.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8" />
-    <title>dependency-cruiser dependency-graph</title>
+    <title>dependency graph</title>
     <style>
       .node:active path,
       .node:hover path,
@@ -39,4 +39,4 @@
       }
     </style>
   </head>
-  <body>
+  <body>
diff --git a/utl/embed-svg-in-html.utl.js → src/cli/tools/wrap-stream-in-html.js b/utl/embed-svg-in-html.utl.js → src/cli/tools/wrap-stream-in-html.js
@@ -4,12 +4,12 @@ const getStream = require("get-stream");
 
 const HEADER_FILE = path.join(
   __dirname,
-  "embed-svg-in-html-snippets",
+  "svg-in-html-snippets",
   "header.snippet.html"
 );
 const FOOTER_FILE = path.join(
   __dirname,
-  "embed-svg-in-html-snippets",
+  "svg-in-html-snippets",
   "footer.snippet.html"
 );
 
@@ -36,11 +36,4 @@ async function wrap(pHeaderFileName, pFooterFileName, pStream) {
   return `${lHeader}${await getStream(pStream)}${lFooter}`;
 }
 
-/*
- * Wrap some html & css around the stuff passed in stdin, so it becomes a bit more
- * interactive to use. Tailored to svg's generated by graphviz dot.
- */
-
-wrap(HEADER_FILE, FOOTER_FILE, process.stdin).then(pOutput =>
-  process.stdout.write(pOutput)
-);
+module.exports = pStream => wrap(HEADER_FILE, FOOTER_FILE, pStream);
diff --git a/test/cli/tools/wrap-stream-in-html.spec.js b/test/cli/tools/wrap-stream-in-html.spec.js
@@ -0,0 +1,18 @@
+const fs = require("fs");
+const chai = require("chai");
+const wrapStreamInHTML = require("../../../src/cli/tools/wrap-stream-in-html");
+
+const expect = chai.expect;
+
+describe("wrap-stream-in-html", () => {
+  const lStream = fs.createReadStream("package.json");
+
+  it("Wraps the contens of a stream in html with some preloaded css", async () => {
+    const lResultHTML = await wrapStreamInHTML(lStream);
+
+    expect(lResultHTML).to.contain("<html");
+    expect(lResultHTML).to.contain("<style>");
+    expect(lResultHTML).to.contain('"name": "dependency-cruiser"');
+    expect(lResultHTML).to.contain("</html");
+  });
+});