@jsenv/plugin-supervisor 1.8.7 → 1.8.9

package/dist/js/supervisor.js

@@ -921,14 +921,16 @@ window.__supervisor__ = (() => {
       } : () => {};
     }
     const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay";
+    const JSENV_WARNING_OVERLAY_TAGNAME = "jsenv-warning-overlay";
     let displayJsenvErrorOverlay;
+    let displayJsenvWarningOverlay;
     {
       displayJsenvErrorOverlay = params => {
         if (logs) {
           console.log("display jsenv error overlay", params);
         }
         let jsenvErrorOverlay = new JsenvErrorOverlay(params);
-        document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach(node => {
+        document.querySelectorAll("".concat(JSENV_ERROR_OVERLAY_TAGNAME, ",").concat(JSENV_WARNING_OVERLAY_TAGNAME)).forEach(node => {
           node.parentNode.removeChild(node);
         });
         const appendIntoRespectingLineBreaksAndIndentation = (node, parentNode, {
@@ -967,7 +969,8 @@ window.__supervisor__ = (() => {
           const tips = [];
           tips.push("Click outside to close.");
           const tip = tips.join("\n    <br />\n    ");
-          root.innerHTML = "\n<style>\n  ".concat(overlayCSS, "\n</style>\n<div class=\"backdrop\"></div>\n<div class=\"overlay\" data-theme=\"dark\">\n  <h1 class=\"title\">\n    An error occured\n  </h1>\n  <pre class=\"text\"></pre>\n  <div class=\"tip\">\n    ").concat(tip, "\n  </div>\n</div>");
+          root.innerHTML = "\n<style>\n  ".concat(overlayCSS, "\n</style>\n<div class=\"backdrop\"></div>\n<div class=\"overlay\" data-theme=\"dark\" data-level=\"error\">\n  <button class=\"copy\" type=\"button\">Copy</button>\n  <h1 class=\"title\">\n    An error occured\n  </h1>\n  <pre class=\"text\"></pre>\n  <div class=\"tip\">\n    ").concat(tip, "\n  </div>\n</div>");
+          enableCopyButton(root);
           root.querySelector(".backdrop").onclick = () => {
             if (!this.parentNode) {
               // not in document anymore
@@ -1057,6 +1060,77 @@ window.__supervisor__ = (() => {
           }
         }
       }
+      /*
+       * Same overlay, lower stakes: something the developer should act on but
+       * that does not prevent the page from running. An error always wins over
+       * a warning, never the other way around.
+       */
+      class JsenvWarningOverlay extends HTMLElement {
+        constructor({
+          title,
+          text,
+          details = []
+        }) {
+          super();
+          const root = this.attachShadow({
+            mode: "open"
+          });
+          root.innerHTML = "\n<style>\n  ".concat(overlayCSS, "\n</style>\n<div class=\"backdrop\"></div>\n<div class=\"overlay\" data-theme=\"dark\" data-level=\"warning\">\n  <button class=\"copy\" type=\"button\">Copy</button>\n  <h1 class=\"title\">\n    ").concat(escapeHtml(title), "\n  </h1>\n  <pre class=\"text\">").concat(escapeHtml(text), "</pre>\n  <div class=\"details\">\n    ").concat(details.map(detail => "<p>".concat(escapeHtml(detail), "</p>")).join("\n    "), "\n  </div>\n  <div class=\"tip\">\n    Click outside to close.\n  </div>\n</div>");
+          enableCopyButton(root);
+          root.querySelector(".backdrop").onclick = () => {
+            if (!this.parentNode) {
+              // not in document anymore
+              return;
+            }
+            root.querySelector(".backdrop").onclick = null;
+            this.parentNode.removeChild(this);
+          };
+        }
+      }
+
+      // the text is meant to be pasted as-is in a chat: a title line, the
+      // location, then the raw text inside a fenced code block
+      const enableCopyButton = root => {
+        const button = root.querySelector(".copy");
+        const overlay = root.querySelector(".overlay");
+        let resetTimeout;
+        button.onclick = async () => {
+          const detailsNode = overlay.querySelector(".details");
+          const parts = ["[jsenv] ".concat(overlay.querySelector(".title").textContent.trim()), "Page: ".concat(window.location.href), "```", overlay.querySelector(".text").textContent.trim(), "```"];
+          if (detailsNode) {
+            for (const paragraph of detailsNode.querySelectorAll("p")) {
+              parts.push(paragraph.textContent.trim());
+            }
+          }
+          const copied = await writeTextToClipboard(parts.join("\n"));
+          button.textContent = copied ? "Copied" : "Copy failed";
+          clearTimeout(resetTimeout);
+          resetTimeout = setTimeout(() => {
+            button.textContent = "Copy";
+          }, 2000);
+        };
+      };
+      const writeTextToClipboard = async text => {
+        try {
+          await window.navigator.clipboard.writeText(text);
+          return true;
+        } catch (_unused4) {
+          // the clipboard API needs a secure context, fallback for plain http origins
+        }
+        try {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.style.position = "fixed";
+          textarea.style.opacity = "0";
+          document.body.appendChild(textarea);
+          textarea.select();
+          const copied = document.execCommand("copy");
+          document.body.removeChild(textarea);
+          return copied;
+        } catch (_unused5) {
+          return false;
+        }
+      };
       const generateClickableText = text => {
         const textWithHtmlLinks = makeLinksClickable(text, {
           createLink: ({
@@ -1133,12 +1207,48 @@ window.__supervisor__ = (() => {
         href,
         text = href
       }) => "<a href=\"".concat(href, "\">").concat(text, "</a>");
+      displayJsenvWarningOverlay = params => {
+        if (logs) {
+          console.log("display jsenv warning overlay", params);
+        }
+        if (document.querySelector(JSENV_ERROR_OVERLAY_TAGNAME)) {
+          return () => {};
+        }
+        document.querySelectorAll(JSENV_WARNING_OVERLAY_TAGNAME).forEach(node => {
+          node.parentNode.removeChild(node);
+        });
+        let jsenvWarningOverlay = new JsenvWarningOverlay(params);
+        document.body.appendChild(jsenvWarningOverlay);
+        return () => {
+          if (jsenvWarningOverlay && jsenvWarningOverlay.parentNode) {
+            jsenvWarningOverlay.parentNode.removeChild(jsenvWarningOverlay);
+            jsenvWarningOverlay = null;
+          }
+        };
+      };
       if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
         customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay);
       }
-      const overlayCSS = /* css */"\n        :host {\n          position: fixed;\n          top: 0;\n          left: 0;\n          z-index: 99999;\n          width: 100%;\n          height: 100%;\n          /* overflow-y: scroll; */\n          margin: 0;\n          background: rgba(0, 0, 0, 0.66);\n        }\n\n        .backdrop {\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n        }\n\n        .overlay {\n          position: relative;\n          box-sizing: border-box;\n          width: 800px;\n          max-width: 100vw;\n          margin: 30px auto;\n          padding: 25px 40px;\n          padding-top: 0;\n          font-family: monospace;\n          direction: ltr;\n          background: rgba(0, 0, 0, 0.95);\n          border-radius: 4px 8px;\n          box-shadow:\n            0 20px 40px rgb(0 0 0 / 30%),\n            0 15px 12px rgb(0 0 0 / 20%);\n          overflow: hidden; /* for h1 margins */\n        }\n\n        h1 {\n          color: red;\n          text-align: center;\n        }\n\n        pre {\n          max-width: 100%;\n          /* padding is nice + prevents scrollbar from hiding the text behind it */\n          /* does not work nicely on firefox though https://bugzilla.mozilla.org/show_bug.cgi?id=748518 */\n          padding: 20px;\n          overflow: auto;\n        }\n\n        .tip {\n          padding-top: 12px;\n          border-top: 1px solid #999;\n        }\n\n        [data-theme=\"dark\"] {\n          color: #999;\n        }\n        [data-theme=\"dark\"] pre {\n          color: #eee;\n          background: #111;\n          border: 1px solid #333;\n        }\n\n        [data-theme=\"light\"] {\n          color: #eeeeee;\n        }\n        [data-theme=\"light\"] pre {\n          color: #eeeeee;\n          background: #1e1e1e;\n          border: 1px solid white;\n        }\n\n        pre a {\n          color: inherit;\n        }\n      ";
+      if (customElements && !customElements.get(JSENV_WARNING_OVERLAY_TAGNAME)) {
+        customElements.define(JSENV_WARNING_OVERLAY_TAGNAME, JsenvWarningOverlay);
+      }
+      const overlayCSS = /* css */"\n        :host {\n          position: fixed;\n          top: 0;\n          left: 0;\n          z-index: 99999;\n          width: 100%;\n          height: 100%;\n          /* overflow-y: scroll; */\n          margin: 0;\n          background: rgba(0, 0, 0, 0.66);\n        }\n\n        .backdrop {\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n        }\n\n        .overlay {\n          position: relative;\n          box-sizing: border-box;\n          width: 800px;\n          /* keep a margin visible on every side, the content scrolls rather\n             than the overlay growing edge to edge */\n          max-width: 98dvw;\n          max-height: calc(100dvh - 60px);\n          margin: 30px auto;\n          padding: 25px 40px;\n          padding-top: 0;\n          font-family: monospace;\n          direction: ltr;\n          background: rgba(0, 0, 0, 0.95);\n          border-radius: 4px 8px;\n          box-shadow:\n            0 20px 40px rgb(0 0 0 / 30%),\n            0 15px 12px rgb(0 0 0 / 20%);\n          overflow: auto; /* creates a block formatting context, for h1 margins */\n        }\n\n        h1 {\n          color: red;\n          text-align: center;\n        }\n\n        [data-level=\"warning\"] h1 {\n          color: #ffab40;\n        }\n\n        .copy {\n          position: absolute;\n          top: 12px;\n          right: 12px;\n          padding: 4px 10px;\n          color: inherit;\n          font-size: 12px;\n          font-family: inherit;\n          background: transparent;\n          border: 1px solid currentColor;\n          border-radius: 4px;\n          opacity: 0.7;\n          cursor: pointer;\n        }\n        .copy:hover {\n          opacity: 1;\n        }\n\n        .details {\n          padding: 0 20px 16px;\n          line-height: 1.5;\n        }\n        .details p {\n          margin: 0 0 8px;\n        }\n        .details p:last-child {\n          margin-bottom: 0;\n        }\n\n        pre {\n          max-width: 100%;\n          /* padding is nice + prevents scrollbar from hiding the text behind it */\n          /* does not work nicely on firefox though https://bugzilla.mozilla.org/show_bug.cgi?id=748518 */\n          padding: 20px;\n          overflow: auto;\n        }\n\n        .tip {\n          padding-top: 12px;\n          border-top: 1px solid #999;\n        }\n\n        [data-theme=\"dark\"] {\n          color: #999;\n        }\n        [data-theme=\"dark\"] pre {\n          color: #eee;\n          background: #111;\n          border: 1px solid #333;\n        }\n\n        [data-theme=\"light\"] {\n          color: #eeeeee;\n        }\n        [data-theme=\"light\"] pre {\n          color: #eeeeee;\n          background: #1e1e1e;\n          border: 1px solid white;\n        }\n\n        pre a {\n          color: inherit;\n        }\n      ";
     }
     supervisor.createException = createException;
+    supervisor.reportWarning = ({
+      title,
+      text,
+      details
+    }) => {
+      if (!errorOverlay) {
+        return () => {};
+      }
+      return displayJsenvWarningOverlay({
+        title,
+        text,
+        details
+      });
+    };
     supervisor.reportException = exception => {
       if (errorOverlay) {
         const removeErrorOverlay = displayJsenvErrorOverlay(exception);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-supervisor",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "type": "module",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/ast": "6.8.4",
+    "@jsenv/ast": "6.8.5",
     "@jsenv/sourcemap": "1.4.2"
   },
   "devDependencies": {

package/src/client/supervisor.js

@@ -900,7 +900,9 @@ window.__supervisor__ = (() => {
     }
 
     const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay";
+    const JSENV_WARNING_OVERLAY_TAGNAME = "jsenv-warning-overlay";
     let displayJsenvErrorOverlay;
+    let displayJsenvWarningOverlay;
     error_overlay: {
       displayJsenvErrorOverlay = (params) => {
         if (logs) {
@@ -908,7 +910,9 @@ window.__supervisor__ = (() => {
         }
         let jsenvErrorOverlay = new JsenvErrorOverlay(params);
         document
-          .querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME)
+          .querySelectorAll(
+            `${JSENV_ERROR_OVERLAY_TAGNAME},${JSENV_WARNING_OVERLAY_TAGNAME}`,
+          )
           .forEach((node) => {
             node.parentNode.removeChild(node);
           });
@@ -961,7 +965,8 @@ window.__supervisor__ = (() => {
   ${overlayCSS}
 </style>
 <div class="backdrop"></div>
-<div class="overlay" data-theme="dark">
+<div class="overlay" data-theme="dark" data-level="error">
+  <button class="copy" type="button">Copy</button>
   <h1 class="title">
     An error occured
   </h1>
@@ -970,6 +975,7 @@ window.__supervisor__ = (() => {
     ${tip}
   </div>
 </div>`;
+          enableCopyButton(root);
           root.querySelector(".backdrop").onclick = () => {
             if (!this.parentNode) {
               // not in document anymore
@@ -1095,6 +1101,95 @@ window.__supervisor__ = (() => {
           }
         }
       }
+      /*
+       * Same overlay, lower stakes: something the developer should act on but
+       * that does not prevent the page from running. An error always wins over
+       * a warning, never the other way around.
+       */
+      class JsenvWarningOverlay extends HTMLElement {
+        constructor({ title, text, details = [] }) {
+          super();
+          const root = this.attachShadow({ mode: "open" });
+          root.innerHTML = `
+<style>
+  ${overlayCSS}
+</style>
+<div class="backdrop"></div>
+<div class="overlay" data-theme="dark" data-level="warning">
+  <button class="copy" type="button">Copy</button>
+  <h1 class="title">
+    ${escapeHtml(title)}
+  </h1>
+  <pre class="text">${escapeHtml(text)}</pre>
+  <div class="details">
+    ${details.map((detail) => `<p>${escapeHtml(detail)}</p>`).join("\n    ")}
+  </div>
+  <div class="tip">
+    Click outside to close.
+  </div>
+</div>`;
+          enableCopyButton(root);
+          root.querySelector(".backdrop").onclick = () => {
+            if (!this.parentNode) {
+              // not in document anymore
+              return;
+            }
+            root.querySelector(".backdrop").onclick = null;
+            this.parentNode.removeChild(this);
+          };
+        }
+      }
+
+      // the text is meant to be pasted as-is in a chat: a title line, the
+      // location, then the raw text inside a fenced code block
+      const enableCopyButton = (root) => {
+        const button = root.querySelector(".copy");
+        const overlay = root.querySelector(".overlay");
+        let resetTimeout;
+        button.onclick = async () => {
+          const detailsNode = overlay.querySelector(".details");
+          const parts = [
+            `[jsenv] ${overlay.querySelector(".title").textContent.trim()}`,
+            `Page: ${window.location.href}`,
+            "```",
+            overlay.querySelector(".text").textContent.trim(),
+            "```",
+          ];
+          if (detailsNode) {
+            for (const paragraph of detailsNode.querySelectorAll("p")) {
+              parts.push(paragraph.textContent.trim());
+            }
+          }
+          const copied = await writeTextToClipboard(parts.join("\n"));
+          button.textContent = copied ? "Copied" : "Copy failed";
+          clearTimeout(resetTimeout);
+          resetTimeout = setTimeout(() => {
+            button.textContent = "Copy";
+          }, 2000);
+        };
+      };
+      const writeTextToClipboard = async (text) => {
+        try {
+          await window.navigator.clipboard.writeText(text);
+          return true;
+        } catch {
+          // the clipboard API needs a secure context, fallback for plain http origins
+        }
+        try {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.style.position = "fixed";
+          textarea.style.opacity = "0";
+          document.body.appendChild(textarea);
+          textarea.select();
+          const copied = document.execCommand("copy");
+          document.body.removeChild(textarea);
+          return copied;
+        } catch {
+          return false;
+        }
+      };
+
       const generateClickableText = (text) => {
         const textWithHtmlLinks = makeLinksClickable(text, {
           createLink: ({ url, line, column }) => {
@@ -1158,9 +1253,40 @@ window.__supervisor__ = (() => {
       };
       const link = ({ href, text = href }) => `<a href="${href}">${text}</a>`;
 
+      displayJsenvWarningOverlay = (params) => {
+        if (logs) {
+          console.log("display jsenv warning overlay", params);
+        }
+        if (document.querySelector(JSENV_ERROR_OVERLAY_TAGNAME)) {
+          return () => {};
+        }
+        document
+          .querySelectorAll(JSENV_WARNING_OVERLAY_TAGNAME)
+          .forEach((node) => {
+            node.parentNode.removeChild(node);
+          });
+        let jsenvWarningOverlay = new JsenvWarningOverlay(params);
+        document.body.appendChild(jsenvWarningOverlay);
+        return () => {
+          if (jsenvWarningOverlay && jsenvWarningOverlay.parentNode) {
+            jsenvWarningOverlay.parentNode.removeChild(jsenvWarningOverlay);
+            jsenvWarningOverlay = null;
+          }
+        };
+      };
+
       if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
         customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay);
       }
+      if (
+        customElements &&
+        !customElements.get(JSENV_WARNING_OVERLAY_TAGNAME)
+      ) {
+        customElements.define(
+          JSENV_WARNING_OVERLAY_TAGNAME,
+          JsenvWarningOverlay,
+        );
+      }
 
       const overlayCSS = /* css */ `
         :host {
@@ -1187,7 +1313,10 @@ window.__supervisor__ = (() => {
           position: relative;
           box-sizing: border-box;
           width: 800px;
-          max-width: 100vw;
+          /* keep a margin visible on every side, the content scrolls rather
+             than the overlay growing edge to edge */
+          max-width: 98dvw;
+          max-height: calc(100dvh - 60px);
           margin: 30px auto;
           padding: 25px 40px;
           padding-top: 0;
@@ -1198,7 +1327,7 @@ window.__supervisor__ = (() => {
           box-shadow:
             0 20px 40px rgb(0 0 0 / 30%),
             0 15px 12px rgb(0 0 0 / 20%);
-          overflow: hidden; /* for h1 margins */
+          overflow: auto; /* creates a block formatting context, for h1 margins */
         }
 
         h1 {
@@ -1206,6 +1335,39 @@ window.__supervisor__ = (() => {
           text-align: center;
         }
 
+        [data-level="warning"] h1 {
+          color: #ffab40;
+        }
+
+        .copy {
+          position: absolute;
+          top: 12px;
+          right: 12px;
+          padding: 4px 10px;
+          color: inherit;
+          font-size: 12px;
+          font-family: inherit;
+          background: transparent;
+          border: 1px solid currentColor;
+          border-radius: 4px;
+          opacity: 0.7;
+          cursor: pointer;
+        }
+        .copy:hover {
+          opacity: 1;
+        }
+
+        .details {
+          padding: 0 20px 16px;
+          line-height: 1.5;
+        }
+        .details p {
+          margin: 0 0 8px;
+        }
+        .details p:last-child {
+          margin-bottom: 0;
+        }
+
         pre {
           max-width: 100%;
           /* padding is nice + prevents scrollbar from hiding the text behind it */
@@ -1244,6 +1406,12 @@ window.__supervisor__ = (() => {
     }
 
     supervisor.createException = createException;
+    supervisor.reportWarning = ({ title, text, details }) => {
+      if (!errorOverlay) {
+        return () => {};
+      }
+      return displayJsenvWarningOverlay({ title, text, details });
+    };
     supervisor.reportException = (exception) => {
       if (errorOverlay) {
         const removeErrorOverlay = displayJsenvErrorOverlay(exception);