refactor(report): rewrites err-html reporter without handlebars (#829)

## Description - rewrites the err-html reporter in plain javascript ## Motivation and Context - reduces the shipped size of dc without added complexity - step towards handlebars-less-ness (less dependencies === less worries) ## How Has This Been Tested? - [x] green ci - [x] additional automated tests ## 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) ## Checklist - [x] 📖 - My change doesn't require a documentation update, or ... - it _does_ and I have updated it - [x] ⚖️ - The contribution will be subject to [The MIT license](https://github.com/sverweij/dependency-cruiser/blob/main/LICENSE), and I'm OK with that. - The contribution is my own original work. - I am ok with the stuff in [**CONTRIBUTING.md**](https://github.com/sverweij/dependency-cruiser/blob/main/.github/CONTRIBUTING.md).
sverweij · Aug 13, 2023 · 30ea30f · 30ea30f
1 parent 3af670e
commit 30ea30f
Show file tree

Hide file tree

Showing 8 changed files with 2,558 additions and 319 deletions.
diff --git a/Makefile b/Makefile
@@ -3,7 +3,6 @@ NODE=node
 RM=rm -f
 GENERATED_SOURCES=src/cli/init-config/config.js.template.js \
 	src/report/dot/dot.template.js \
-	src/report/error-html/error-html.template.js \
 	src/schema/baseline-violations.schema.mjs \
 	src/schema/configuration.schema.mjs \
 	src/schema/cruise-result.schema.mjs \

diff --git a/src/report/error-html/error-html-template.mjs b/src/report/error-html/error-html-template.mjs
@@ -0,0 +1,212 @@
+export default `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>dependency-cruiser - results</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <style type="text/css">
+    body {
+      font-family: sans-serif;
+      margin: 0 auto;
+      max-width: 90%;
+      line-height: 1.6;
+      font-size: 14px;
+      color: #444;
+      padding: 0 10px;
+      background-color: #fff;
+    }
+
+    footer {
+      color: gray;
+      margin-top: 1.4em;
+      border-top: solid 1px currentColor
+    }
+
+    a {
+      text-decoration: none
+    }
+
+    a.noiseless {
+      color: currentColor
+    }
+
+    h1,
+    h2,
+    h3 {
+      line-height: 1.2
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    th,
+    td {
+      text-align: left;
+      padding: 4px;
+    }
+
+    tbody tr:nth-child(odd) {
+      background-color: rgba(128, 128, 128, 0.2);
+    }
+
+    .error {
+      color: red;
+    }
+
+    .warn {
+      color: orange;
+    }
+
+    .info {
+      color: blue;
+    }
+
+    .ignore {
+      color:gray;
+    }
+
+    .ok {
+      color: limegreen;
+    }
+
+    td.nowrap {
+      white-space: nowrap
+    }
+
+    svg {
+      fill: currentColor
+    }
+
+    #show-unviolated {
+      display: block
+    }
+
+    #hide-unviolated {
+      display: none
+    }
+
+    #show-all-the-rules:target #show-unviolated {
+      display: none
+    }
+
+    #show-all-the-rules:target #hide-unviolated {
+      display: block
+    }
+
+    tr.unviolated {
+      display: none
+    }
+
+    #show-all-the-rules:target tr.unviolated {
+      display: table-row;
+      color: gray;
+    }
+
+    #show-ignored {
+      display: block
+    }
+
+    #hide-ignored {
+      display: none
+    }
+
+    #show-ignored-violations:target #show-ignored {
+      display: none
+    }
+
+    #show-ignored-violations:target #hide-ignored {
+      display: block
+    }
+
+    tr.ignored {
+      display: none
+    }
+
+    #show-ignored-violations:target tr.ignored {
+      display: table-row;
+      color: gray;
+    }
+
+    .p__svg--inline {
+      vertical-align: top;
+      width: 1.2em;
+      height: 1.2em
+    }
+
+    .controls {
+      background-color: #fff;
+      vertical-align: bottom;
+      text-align: center
+    }
+
+    .controls:hover {
+      opacity: 1;
+    }
+
+    .controls a {
+      text-decoration: none;
+      color: gray;
+    }
+
+    .controls a:hover {
+      text-decoration: underline;
+      color: blue;
+    }
+
+    .extra {
+      color: gray;
+    }
+  </style>
+  <style type="text/css" media="print">
+    th,
+    td {
+      border: 1px solid #444;
+    }
+
+    .controls {
+      display: none
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Forbidden dependency check - results</h1>
+  <span id="show-all-the-rules">
+  <h2><svg class="p__svg--inline" viewBox="0 0 14 16" version="1.1" aria-hidden="true">
+      <path fill-rule="evenodd"
+        d="M11.5 8L8.8 5.4 6.6 8.5 5.5 1.6 2.38 8H0v2h3.6l.9-1.8.9 5.4L9 8.5l1.6 1.5H14V8h-2.5z"></path>
+    </svg> Summary</h2>
+  <p>
+    <div style="float:left;padding-right:20px">
+      <strong>{{totalCruised}}</strong> modules
+    </div>
+    <div style="float:left;padding-right:20px">
+      <strong>{{totalDependenciesCruised}}</strong> dependencies
+    </div>
+    <div style="float:left;padding-right:20px">
+      <strong>{{error}}</strong> errors
+    </div>
+    <div style="float:left;padding-right:20px">
+      <strong>{{warn}}</strong> warnings
+    </div>
+    <div style="float:left;padding-right:20px">
+      <strong>{{info}}</strong> informational
+    </div>
+    <div style="float:left;padding-right:20px" class="ignore">
+      <strong>{{ignore}}</strong> ignored
+    </div>
+    &nbsp;
+  </p>
+  {{violatedRulesTable}}
+  </span>
+
+  {{violationsList}}
+  <footer>
+    <p><a href="https://github.com/sverweij/dependency-cruiser">{{depcruiseVersion}}</a> /
+      {{runDate}}</p>
+  </footer>
+</body>
+</html>`;