refactor(wrap-stream-in-html): makes the wrapper easier to maintain (#…

…877) ## Description - inline the html into javascript - move the css to a separate file so styling tweaks are easier to get to ## Motivation and Context - Editors kept autocorrecting 'header' and 'footer' html with closing and opening tags that made the result invalid html - The css is now easier to get to ## How Has This Been Tested? - [x] green ci ## Types of changes - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] Documentation only change - [x] Refactor (non-breaking change which fixes an issue without changing functionality) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change)
sverweij · Nov 26, 2023 · c6a33b1 · c6a33b1
1 parent 9415a84
commit c6a33b1
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 127 deletions.
diff --git a/.dependency-cruiser.json b/.dependency-cruiser.json
@@ -269,7 +269,7 @@
       "mocks",
       "fixtures",
       "test/integration",
-      "src/cli/tools/svg-in-html-snippets/script.snippet.js"
+      "src/cli/tools/svg-in-html-snippets/script.js"
     ],
 
     /* list of module systems to cruise */

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -61,7 +61,7 @@ module.exports = {
     "coverage",
     "tmp",
     "src/**/*.schema.mjs",
-    "src/cli/tools/svg-in-html-snippets/script.snippet.js",
+    "src/cli/tools/svg-in-html-snippets/script.js",
     "test/integration/**",
     "test/*/__fixtures__/**",
     "test/*/*/__fixtures__/**",

diff --git a/src/cli/tools/svg-in-html-snippets/footer.snippet.html b/src/cli/tools/svg-in-html-snippets/footer.snippet.html
diff --git a/src/cli/tools/svg-in-html-snippets/header.snippet.html b/src/cli/tools/svg-in-html-snippets/header.snippet.html
diff --git a/...ls/svg-in-html-snippets/script.snippet.js → src/cli/tools/svg-in-html-snippets/script.js b/...ls/svg-in-html-snippets/script.snippet.js → src/cli/tools/svg-in-html-snippets/script.js
diff --git a/src/cli/tools/svg-in-html-snippets/style.css b/src/cli/tools/svg-in-html-snippets/style.css
@@ -0,0 +1,101 @@
+.node:active path,
+.node:hover path,
+.node.current path,
+.node:active polygon,
+.node:hover polygon,
+.node.current polygon {
+  stroke: fuchsia;
+  stroke-width: 2;
+}
+
+.edge:active path,
+.edge:hover path,
+.edge.current path,
+.edge:active ellipse,
+.edge:hover ellipse,
+.edge.current ellipse {
+  stroke: fuchsia;
+  stroke-width: 3;
+  stroke-opacity: 1;
+}
+
+.edge:active polygon,
+.edge:hover polygon,
+.edge.current polygon {
+  stroke: fuchsia;
+  stroke-width: 3;
+  fill: fuchsia;
+  stroke-opacity: 1;
+  fill-opacity: 1;
+}
+
+.edge:active text,
+.edge:hover text {
+  fill: fuchsia;
+}
+
+.cluster path {
+  stroke-width: 3;
+}
+
+.cluster:active path,
+.cluster:hover path {
+  fill: #ffff0011;
+}
+
+div.hint {
+  background-color: #000000aa;
+  color: white;
+  font-family: Arial, Helvetica, sans-serif;
+  border-radius: 1rem;
+  position: fixed;
+  top: calc(50% - 4em);
+  right: calc(50% - 10em);
+  border: none;
+  padding: 1em 3em 1em 1em;
+}
+
+.hint button {
+  position: absolute;
+  font-weight: bolder;
+  right: 0.6em;
+  top: 0.6em;
+  color: inherit;
+  background-color: inherit;
+  border: 1px solid currentColor;
+  border-radius: 1em;
+  margin-left: 0.6em;
+}
+
+.hint a {
+  color: inherit;
+}
+
+#button_help {
+  color: white;
+  background-color: #00000011;
+  border-radius: 1em;
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  font-size: 24pt;
+  font-weight: bolder;
+  width: 2em;
+  height: 2em;
+  border: none;
+}
+
+#button_help:hover {
+  cursor: pointer;
+  background-color: #00000077;
+}
+
+@media print {
+  #button_help {
+    display: none;
+  }
+
+  div.hint {
+    display: none;
+  }
+}
diff --git a/src/cli/tools/wrap-stream-in-html.mjs b/src/cli/tools/wrap-stream-in-html.mjs
@@ -1,19 +1,56 @@
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 
-const HEADER_FILE = fileURLToPath(
-  new URL("svg-in-html-snippets/header.snippet.html", import.meta.url)
+const STYLESHEET_FILE = fileURLToPath(
+  new URL("svg-in-html-snippets/style.css", import.meta.url),
 );
 const SCRIPT_FILE = fileURLToPath(
-  new URL("svg-in-html-snippets/script.snippet.js", import.meta.url)
-);
-const FOOTER_FILE = fileURLToPath(
-  new URL("svg-in-html-snippets/footer.snippet.html", import.meta.url)
+  new URL("svg-in-html-snippets/script.js", import.meta.url),
 );
 
+/**
+ * @param {string} pStylesheet
+ * @returns {string}
+ */
+function getHeader(pStylesheet) {
+  return `<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>dependency graph</title>
+    <style>
+      ${pStylesheet}
+    </style>
+  </head>
+  <body>
+    <button id="button_help">?</button>
+    <div id="hints" class="hint" style="display: none">
+      <button id="close-hints">x</button>
+      <span id="hint-text"></span>
+      <ul>
+        <li><b>Hover</b> - highlight</li>
+        <li><b>Right-click</b> - pin highlight</li>
+        <li><b>ESC</b> - clear</li>
+      </ul>
+    </div>
+`;
+}
+
+/**
+ * @param {string} pScript
+ * @returns {string}
+ */
+function getFooter(pScript) {
+  return `    <script>
+      ${pScript}
+    </script>
+  </body>
+</html>`;
+}
+
 /**
  * Slaps the stuff in the passed stream in between the contents
- * of the header and the footer file and returns it as a string.
+ * of the header and the footer and returns it as a string.
  *
  * Almost exactly the same as:
  * ```sh
@@ -26,28 +63,33 @@ const FOOTER_FILE = fileURLToPath(
  * @param {writeStream} pOutStream stream to write to
  */
 export default async function wrap(pInStream, pOutStream) {
-  const [lHeader, lScript, lEnd] = await Promise.all([
-    readFile(HEADER_FILE, "utf8"),
+  const [lStylesheet, lScript] = await Promise.all([
+    readFile(STYLESHEET_FILE, "utf8"),
     readFile(SCRIPT_FILE, "utf8"),
-    readFile(FOOTER_FILE, "utf8"),
   ]);
 
-  const lFooter = `<script>${lScript}</script>${lEnd}`;
-
-  pOutStream.write(lHeader);
+  pOutStream.write(getHeader(lStylesheet));
   pInStream
     .on("end", () => {
-      pOutStream.write(lFooter);
+      pOutStream.write(getFooter(lScript));
       pOutStream.end();
     })
     .on(
       "error",
       /* c8 ignore start */
       (pError) => {
         process.stderr.write(`${pError}\n`);
-      }
+      },
       /* c8 ignore stop */
     )
+    /*
+     * We could have put the whole html in a template literal, but we don't know
+     * how large the svg that's going to be injected is going to be - it could just
+     * as well be as large that if we're going to buffer it, it's going into out
+     * of memory territory.
+     *
+     * We circumvent that by streaming the svg in between the header and the footer.
+     */
     .on("data", (pChunk) => {
       pOutStream.write(pChunk);
     });