feat: warnings code popup (#317)

Author: PierreDemailly

package.json

@@ -95,6 +95,7 @@
     "cacache": "^18.0.0",
     "dotenv": "^16.3.1",
     "filenamify": "^6.0.0",
+    "highlightjs-line-numbers.js": "^2.8.0",
     "ini": "^4.1.1",
     "kleur": "^4.1.5",
     "ms": "^2.1.3",

public/components/package/pannels/warnings/code-fetcher.js

@@ -1,13 +1,27 @@
+import hljs from "highlight.js/lib/core";
+window.hljs = hljs;
+require("highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js");
+
 // CONSTANTS
 const kLoadingMessage = "Loading ...";
 
+function removeTags(str) {
+  if ((str === null) || (str === "")) {
+    return false;
+  }
+  // eslint-disable-next-line no-param-reassign
+  str = str.toString();
+
+  return str.replace(/<\/?[^>]+(>|$)/ig, "");
+}
+
 export class CodeFetcher {
   static setupDocumentClickHandler = true;
 
   static getLineFromFile(code, location) {
     const [[startLine]] = location;
 
-    return code.split("\n")[startLine - 1];
+    return code.split("\n").slice(startLine >= 10 ? startLine - 10 : 0, startLine + 10).join("\n");
   }
 
   static hide(event) {
@@ -17,12 +31,12 @@ export class CodeFetcher {
     }
 
     if (
-      (packageCodeElement.innerHTML && packageCodeElement.innerHTML !== kLoadingMessage) &&
+      (packageCodeElement.innerText && packageCodeElement.innerText !== kLoadingMessage) &&
       !packageCodeElement.contains(event.target)
       && packageCodeElement.style.visibility === "visible"
     ) {
       packageCodeElement.style.visibility = "hidden";
-      packageCodeElement.innerHTML = "";
+      packageCodeElement.innerText = "";
     }
   }
 
@@ -37,13 +51,16 @@ export class CodeFetcher {
   }
 
   async fetchCodeLine(event, options = {}) {
-    const { file, location, id } = options;
+    const { file, location, id, value } = options;
 
     this.container = document.querySelector(".package-code");
     this.container.style.visibility = "visible";
+    const isJS = file.slice(-3) === ".js" || [".cjs", ".mjs"].includes(file.slice(-4));
+    const isJSON = file.slice(-5) === ".json";
 
     if (this.cache.has(id)) {
-      this.container.innerText = this.cache.get(id);
+      this.container.innerHTML = this.cache.get(id);
+      hljs.initLineNumbersOnLoad();
       event.stopPropagation();
 
       return;
@@ -52,10 +69,58 @@ export class CodeFetcher {
     this.container.innerText = kLoadingMessage;
     const code = await fetch(`${this.unpkgRoot}${file}`).then((response) => response.text());
 
-    this.container.innerText = code.length ?
-      CodeFetcher.getLineFromFile(code, location) :
-      "Line not found ...";
-    this.cache.set(id, this.container.innerText);
+    if (code.length) {
+      this.container.innerText = "";
+
+      const titleElement = document.createElement("div");
+      titleElement.classList.add("file");
+      titleElement.innerHTML = `<a href="${this.unpkgRoot}${file}" target="_blank">${file}</a>`;
+
+      const preElement = document.createElement("pre");
+      preElement.appendChild(titleElement);
+
+      const codeElement = document.createElement("code");
+      codeElement.textContent = CodeFetcher.getLineFromFile(code, location);
+      // eslint-disable-next-line no-nested-ternary
+      codeElement.classList.add(`language-${isJS ? "js" : isJSON ? "json" : "text"}`, "hljs");
+      codeElement.setAttribute("data-ln-start-from", location[0][0] >= 10 ? location[0][0] - 9 : 1);
+
+      preElement.appendChild(codeElement);
+      this.container.appendChild(preElement);
+      hljs.highlightElement(codeElement);
+      hljs.initLineNumbersOnLoad();
+
+      // Highlight the relevant lines / code
+      codeElement.innerHTML = codeElement.innerHTML.split("\n").map((line, index) => {
+        const withoutTags = removeTags(line);
+        if (withoutTags === false) {
+          return line;
+        }
+        const incriminedCodeSingleLine = code.split("\n").slice(location[0][0] - 1, location[0][0]);
+        const isMultiLine = location[0][0] < location[1][0];
+        const [[startLine]] = location;
+        const lineIndex = startLine >= 10 ? 9 : startLine - 1;
+        const isRelevantLine = isMultiLine ?
+          lineIndex <= index && index <= location[1][0] - 1 :
+          // eslint-disable-next-line max-len
+          incriminedCodeSingleLine.includes(value) || (!isMultiLine && lineIndex === index && withoutTags.includes(value)) || (!value && lineIndex === index);
+
+        if (isRelevantLine) {
+          if (!isMultiLine && value && line.includes(value)) {
+            return line.replace(value, `<span class="relevant-line">${value}</span>`);
+          }
+
+          return `<span class="relevant-line">${line}</span>`;
+        }
+
+        return line;
+      }).join("\n");
+    }
+    else {
+      this.container.innerText = "Line not found ...";
+    }
+
+    this.cache.set(id, this.container.innerHTML);
 
     event.stopPropagation();
   }

public/components/package/pannels/warnings/warnings.css

@@ -5,18 +5,85 @@
   min-width: 120px;
   max-width: 600px;
   max-height: 300px;
-  overflow-y: auto;
+  left: calc(50% + 500px);
   top: 50%;
-  left: 50%;
-  transform: translate(-50%);
-  background: #191919;
-  border: 1px solid #121212;
+  transform: translate(-50%, -50%);
   color: #FFF;
-  padding: 10px;
   border-radius: 4px;
   text-align: left;
   font-size: 14px;
   font-family: "mononoki";
   letter-spacing: 0.5px;
   word-wrap: break-word;
 }
+
+.package-code pre {
+  background: white;
+  margin: 0;
+  padding: 0;
+  box-shadow:  0px 5px 3px rgba(0, 0, 0, 0.2);
+}
+
+.package-code code {
+  scrollbar-width: thin;
+}
+
+.package-code pre code.hljs {
+  padding-top: 0;
+}
+
+.package-code pre div.file {
+  padding: 8px;
+  text-align: right;
+  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(232,232,232,1) 100%);
+  margin-bottom: 5px;
+}
+
+
+.package-code pre div a {
+  color: var(--secondary-darker);
+}
+
+.relevant-line {
+  background: rgb(255 221 124 / 27%);
+  padding: 2px 0px;
+}
+
+.hljs-ln-numbers {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  text-align: center;
+  color: #ccc;
+  border-right: 1px solid #CCC;
+  vertical-align: top;
+  padding-right: 10px !important;
+}
+
+.hljs-ln-code {
+  padding-left: 10px;
+}
+
+.hljs-ln-n {
+  text-align: right;
+}
+
+.package-code table, .package-code table tr {
+  width: auto;
+  background: white;
+  height: auto;
+  line-height: normal;
+}
+
+.package-code table tr, .package-code table td {
+  border: none;
+  padding: 0;
+  text-align: left;
+  height: auto;
+  line-height: normal;
+}
+

public/components/package/pannels/warnings/warnings.js

@@ -78,7 +78,7 @@ export class Warnings {
         const location = warning.kind === "encoded-literal" ? warning.location[0] : warning.location;
 
         viewMoreElement.addEventListener("click", (event) => {
-          codeFetcher.fetchCodeLine(event, { file: warning.file, location, id });
+          codeFetcher.fetchCodeLine(event, { file: warning.file, location, id, value: warning.value });
         });
       }
 

public/main.css

@@ -33,6 +33,7 @@ body {
 
 ::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
   border-radius: 4px;
 }