Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Nov 26, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2913781
refactor(wrap-stream-in-html): makes the wrapper easier to maintain
sverweij Nov 26, 2023
8988d61
lint --fix
sverweij Nov 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .dependency-cruiser.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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__/**",
Expand Down
2 changes: 0 additions & 2 deletions src/cli/tools/svg-in-html-snippets/footer.snippet.html
View file
Open in desktop

This file was deleted.

108 changes: 0 additions & 108 deletions src/cli/tools/svg-in-html-snippets/header.snippet.html
View file
Open in desktop

This file was deleted.

0 ...ls/svg-in-html-snippets/script.snippet.js → src/cli/tools/svg-in-html-snippets/script.js
View file
Open in desktop
File renamed without changes.
101 changes: 101 additions & 0 deletions src/cli/tools/svg-in-html-snippets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
72 changes: 57 additions & 15 deletions src/cli/tools/wrap-stream-in-html.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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);
});
Expand Down