feat: open editor when clicking error on overlay

Author: malcolm-kee

client-src/overlay.js

@@ -184,7 +184,7 @@ function formatProblem(type, item) {
 // Compilation with errors (e.g. syntax error or missing modules).
 /**
  * @param {string} type
- * @param {Array<string  | { file?: string, moduleName?: string, loc?: string, message?: string }>} messages
+ * @param {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
  * @param {string | null} trustedTypesPolicyName
  */
 function show(type, messages, trustedTypesPolicyName) {
@@ -203,6 +203,15 @@ function show(type, messages, trustedTypesPolicyName) {
       typeElement.innerText = header;
       applyStyle(typeElement, msgTypeStyle);
 
+      if (message.moduleIdentifier) {
+        applyStyle(typeElement, { cursor: "pointer" });
+        typeElement.addEventListener("click", () => {
+          fetch(
+            `/webpack-dev-server/open-editor?fileName=${message.moduleIdentifier}`
+          );
+        });
+      }
+
       // Make it look similar to our terminal.
       const text = ansiHTML(encode(body));
       const messageTextNode = document.createElement("div");

examples/client/overlay/app.js

@@ -2,5 +2,9 @@
 
 const target = document.querySelector("#target");
 
+// eslint-disable-next-line import/no-unresolved, import/extensions
+const invalid = require("./invalid.js");
+
+console.log(invalid);
 target.classList.add("pass");
 target.innerHTML = "Success!";

examples/client/overlay/webpack.config.js

@@ -7,7 +7,7 @@ const { setup } = require("../../util");
 module.exports = setup({
   context: __dirname,
   // create error for overlay
-  entry: "./invalid.js",
+  entry: "./app.js",
   devServer: {
     client: {
       overlay: true,

lib/Server.js

@@ -10,6 +10,7 @@ const defaultGateway = require("default-gateway");
 const express = require("express");
 const { validate } = require("schema-utils");
 const schema = require("./options.json");
+const launchEditor = require("./launchEditor");
 
 /** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
 /** @typedef {import("webpack").Compiler} Compiler */
@@ -2033,6 +2034,25 @@ class Server {
       }
     );
 
+    /** @type {import("express").Application} */
+    (app).get(
+      "/webpack-dev-server/open-editor",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @returns {void}
+       */
+      (req, res) => {
+        const fileName = req.query.fileName;
+
+        if (typeof fileName === "string") {
+          launchEditor(this.logger, fileName);
+        }
+
+        res.end();
+      }
+    );
+
     /** @type {import("express").Application} */
     (app).get(
       "/webpack-dev-server",

lib/launchEditor.js

@@ -69,6 +69,7 @@
     "schema-utils": "^4.0.0",
     "selfsigned": "^2.1.1",
     "serve-index": "^1.9.1",
+    "shell-quote": "^1.7.3",
     "sockjs": "^0.3.24",
     "spdy": "^4.0.2",
     "webpack-dev-middleware": "^5.3.1",
@@ -88,6 +89,7 @@
     "@types/default-gateway": "^3.0.1",
     "@types/node-forge": "^1.0.4",
     "@types/rimraf": "^3.0.2",
+    "@types/shell-quote": "^1.7.1",
     "@types/sockjs-client": "^1.5.1",
     "@types/trusted-types": "^2.0.2",
     "acorn": "^8.2.4",

package-lock.json

@@ -95,6 +95,7 @@ exports[`overlay should not show initially, then show on an error and allow to c
           font-size: 1.2em;
           margin-bottom: 1rem;
           font-family: sans-serif;
+          cursor: pointer;
         \\"
       >
         ERROR in ./foo.js 1:1
@@ -217,6 +218,7 @@ exports[`overlay should not show initially, then show on an error, then hide on
           font-size: 1.2em;
           margin-bottom: 1rem;
           font-family: sans-serif;
+          cursor: pointer;
         \\"
       >
         ERROR in ./foo.js 1:1
@@ -339,6 +341,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
           font-size: 1.2em;
           margin-bottom: 1rem;
           font-family: sans-serif;
+          cursor: pointer;
         \\"
       >
         ERROR in ./foo.js 1:1
@@ -424,6 +427,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
           font-size: 1.2em;
           margin-bottom: 1rem;
           font-family: sans-serif;
+          cursor: pointer;
         \\"
       >
         ERROR in ./foo.js 1:1