From 29137818bfbd25e323406aa4ca6b31f33452a2ca Mon Sep 17 00:00:00 2001 From: sverweij Date: Sun, 26 Nov 2023 11:07:18 +0100 Subject: [PATCH 1/2] refactor(wrap-stream-in-html): makes the wrapper easier to maintain --- .eslintrc.js | 2 +- .../svg-in-html-snippets/footer.snippet.html | 2 - .../svg-in-html-snippets/header.snippet.html | 108 ------------------ .../{script.snippet.js => script.js} | 0 src/cli/tools/svg-in-html-snippets/style.css | 101 ++++++++++++++++ src/cli/tools/wrap-stream-in-html.mjs | 72 +++++++++--- 6 files changed, 159 insertions(+), 126 deletions(-) delete mode 100644 src/cli/tools/svg-in-html-snippets/footer.snippet.html delete mode 100644 src/cli/tools/svg-in-html-snippets/header.snippet.html rename src/cli/tools/svg-in-html-snippets/{script.snippet.js => script.js} (100%) create mode 100644 src/cli/tools/svg-in-html-snippets/style.css diff --git a/.eslintrc.js b/.eslintrc.js index 7a1488ca1..c8f03a8dc 100644 --- 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 deleted file mode 100644 index b605728ee..000000000 --- a/src/cli/tools/svg-in-html-snippets/footer.snippet.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/src/cli/tools/svg-in-html-snippets/header.snippet.html b/src/cli/tools/svg-in-html-snippets/header.snippet.html deleted file mode 100644 index 26c84635a..000000000 --- a/src/cli/tools/svg-in-html-snippets/header.snippet.html +++ /dev/null @@ -1,108 +0,0 @@ - - - - - dependency graph - - - - - diff --git a/src/cli/tools/svg-in-html-snippets/script.snippet.js b/src/cli/tools/svg-in-html-snippets/script.js similarity index 100% rename from src/cli/tools/svg-in-html-snippets/script.snippet.js rename to 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 new file mode 100644 index 000000000..7d518772a --- /dev/null +++ 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 index cd1a200b7..ce613e21e 100755 --- 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 ` + + + + dependency graph + + + + + +`; +} + +/** + * @param {string} pScript + * @returns {string} + */ +function getFooter(pScript) { + return ` + +`; +} + /** * 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,18 +63,15 @@ 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 = `${lEnd}`; - - pOutStream.write(lHeader); + pOutStream.write(getHeader(lStylesheet)); pInStream .on("end", () => { - pOutStream.write(lFooter); + pOutStream.write(getFooter(lScript)); pOutStream.end(); }) .on( @@ -45,9 +79,17 @@ export default async function wrap(pInStream, pOutStream) { /* 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); }); From 8988d61908d139558a226189ad78021bbcef8d7b Mon Sep 17 00:00:00 2001 From: sverweij Date: Sun, 26 Nov 2023 13:16:40 +0100 Subject: [PATCH 2/2] lint --fix --- .dependency-cruiser.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dependency-cruiser.json b/.dependency-cruiser.json index 68a89b571..a2568ba59 100644 --- 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 */