@jsenv/core 27.3.2 → 27.4.0

package/dist/js/html_supervisor_installer.js

@@ -10,109 +10,335 @@ const unevalException = value => {
   });
 };
 
-const displayErrorInDocument = error => {
-  const title = "An error occured";
-  let theme = error && error.cause && error.cause.code === "PARSE_ERROR" ? "light" : "dark";
-  let message = errorToHTML(error);
-  const css = `
-    .jsenv-console {
-      background: rgba(0, 0, 0, 0.95);
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      z-index: 1000;
-      box-sizing: border-box;
-      padding: 1em;
-    }
+const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay";
+const displayErrorInDocument = (error, {
+  rootDirectoryUrl,
+  url,
+  line,
+  column
+}) => {
+  document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach(node => {
+    node.parentNode.removeChild(node);
+  });
+  const {
+    theme,
+    title,
+    message,
+    stack
+  } = errorToHTML(error, {
+    url,
+    line,
+    column
+  });
+  const jsenvErrorOverlay = new JsenvErrorOverlay({
+    theme,
+    title,
+    stack: stack ? `${replaceLinks(message, {
+      rootDirectoryUrl
+    })}\n${replaceLinks(stack, {
+      rootDirectoryUrl
+    })}` : replaceLinks(message, {
+      rootDirectoryUrl
+    })
+  });
+  document.body.appendChild(jsenvErrorOverlay);
+};
 
-    .jsenv-console h1 {
-      color: red;
-      display: flex;
-      align-items: center;
-    }
+class JsenvErrorOverlay extends HTMLElement {
+  constructor({
+    title,
+    stack,
+    theme = "dark"
+  }) {
+    super();
+    this.root = this.attachShadow({
+      mode: "open"
+    });
+    this.root.innerHTML = overlayHtml;
+    this.root.querySelector(".overlay").setAttribute("data-theme", theme);
+    this.root.querySelector(".title").innerHTML = title;
+    this.root.querySelector(".stack").innerHTML = stack;
+
+    this.root.querySelector(".backdrop").onclick = () => {
+      if (!this.parentNode) {
+        // not in document anymore
+        return;
+      }
 
-    #button-close-jsenv-console {
-      margin-left: 10px;
-    }
+      this.root.querySelector(".backdrop").onclick = null;
+      this.parentNode.removeChild(this);
+    };
+  }
 
-    .jsenv-console pre {
-      overflow: auto;
-      max-width: 70em;
-      /* avoid scrollbar to hide the text behind it */
-      padding: 20px;
-    }
+}
+
+if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
+  customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay);
+}
+
+const overlayHtml = `
+<style>
+:host {
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  margin: 0;
+  background: rgba(0, 0, 0, 0.66);
+}
+
+.backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.overlay {
+  position: relative;
+  background: rgba(0, 0, 0, 0.95);
+  width: 800px;
+  margin: 30px auto;
+  padding: 25px 40px;
+  padding-top: 0;
+  overflow: hidden; /* for h1 margins */
+  border-radius: 4px 8px;
+  box-shadow: 0 20px 40px rgb(0 0 0 / 30%), 0 15px 12px rgb(0 0 0 / 20%);
+  box-sizing: border-box;
+  font-family: monospace;
+  direction: ltr;
+}
+
+h1 {
+  color: red;
+  text-align: center;
+}
+
+pre {
+  overflow: auto;
+  max-width: 100%;
+  /* padding is nice + prevents scrollbar from hiding the text behind it */
+  /* does not work nicely on firefox though https://bugzilla.mozilla.org/show_bug.cgi?id=748518 */
+  padding: 20px; 
+}
+
+.tip {
+  border-top: 1px solid #999;
+  padding-top: 12px;
+}
+
+[data-theme="dark"] {
+  color: #999;
+}
+[data-theme="dark"] pre {
+  background: #111;
+  border: 1px solid #333;
+  color: #eee;
+}
+
+[data-theme="light"] {
+  color: #EEEEEE;
+}
+[data-theme="light"] pre {
+  background: #1E1E1E;
+  border: 1px solid white;
+  color: #EEEEEE;
+}
+
+pre a {
+  color: inherit;
+}
+</style>
+<div class="backdrop"></div>
+<div class="overlay">
+  <h1 class="title"></h1>
+  <pre class="stack"></pre>
+  <div class="tip">Click outside to close.</div>
+</div>
+`;
+
+const parseErrorInfo = error => {
+  if (error === undefined) {
+    return {
+      message: "undefined"
+    };
+  }
 
-    .jsenv-console pre[data-theme="dark"] {
-      background: #111;
-      border: 1px solid #333;
-      color: #eee;
-    }
+  if (error === null) {
+    return {
+      message: "null"
+    };
+  }
 
-    .jsenv-console pre[data-theme="light"] {
-      background: #1E1E1E;
-      border: 1px solid white;
-      color: #EEEEEE;
+  if (typeof error === "string") {
+    return {
+      message: error
+    };
+  }
+
+  if (error instanceof Error) {
+    if (error.name === "SyntaxError") {
+      return {
+        message: error.message
+      };
     }
 
-    .jsenv-console pre a {
-      color: inherit;
+    if (error.cause && error.cause.code === "PARSE_ERROR") {
+      if (error.messageHTML) {
+        return {
+          message: error.messageHTML
+        };
+      }
+
+      return {
+        message: error.message
+      };
+    } // stackTrace formatted by V8
+
+
+    if (Error.captureStackTrace) {
+      return {
+        message: error.message,
+        stack: getErrorStackWithoutErrorMessage(error)
+      };
     }
-    `;
-  const html = `
-      <style type="text/css">${css}></style>
-      <div class="jsenv-console">
-        <h1>${title} <button id="button-close-jsenv-console">X</button></h1>
-        <pre data-theme="${theme}">${message}</pre>
-      </div>
-      `;
-  const removeJsenvConsole = appendHMTLInside(html, document.body);
-
-  document.querySelector("#button-close-jsenv-console").onclick = () => {
-    removeJsenvConsole();
+
+    return {
+      message: error.message,
+      stack: error.stack ? `  ${error.stack}` : null
+    };
+  }
+
+  if (typeof error === "object") {
+    return error;
+  }
+
+  return {
+    message: JSON.stringify(error)
   };
 };
 
-const escapeHtml = string => {
-  return string.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-};
+const getErrorStackWithoutErrorMessage = error => {
+  let stack = error.stack;
+  const messageInStack = `${error.name}: ${error.message}`;
+
+  if (stack.startsWith(messageInStack)) {
+    stack = stack.slice(messageInStack.length);
+  }
 
-const errorToHTML = error => {
-  let html;
+  const nextLineIndex = stack.indexOf("\n");
 
-  if (error && error instanceof Error) {
-    if (error.cause && error.cause.code === "PARSE_ERROR") {
-      html = error.messageHTML || escapeHtml(error.message);
-    } // stackTrace formatted by V8
-    else if (Error.captureStackTrace) {
-      html = escapeHtml(error.stack);
-    } else {
-      // other stack trace such as firefox do not contain error.message
-      html = escapeHtml(`${error.message}
-  ${error.stack}`);
+  if (nextLineIndex > -1) {
+    stack = stack.slice(nextLineIndex + 1);
+  }
+
+  return stack;
+};
+
+const errorToHTML = (error, {
+  url,
+  line,
+  column
+}) => {
+  let {
+    message,
+    stack
+  } = parseErrorInfo(error);
+
+  if (url) {
+    if (!stack || error && error.name === "SyntaxError") {
+      stack = `  at ${appendLineAndColumn(url, {
+        line,
+        column
+      })}`;
     }
-  } else if (typeof error === "string") {
-    html = error;
-  } else if (error === undefined) {
-    html = "undefined";
-  } else {
-    html = JSON.stringify(error);
   }
 
-  const htmlWithCorrectLineBreaks = html.replace(/\n/g, "\n");
-  const htmlWithLinks = stringToStringWithLink(htmlWithCorrectLineBreaks, {
-    transform: url => {
-      return {
-        href: url,
-        text: url
+  return {
+    theme: error && error.cause && error.cause.code === "PARSE_ERROR" ? "light" : "dark",
+    title: "An error occured",
+    message,
+    stack
+  };
+};
+
+const replaceLinks = (string, {
+  rootDirectoryUrl
+}) => {
+  // normalize line breaks
+  string = string.replace(/\n/g, "\n");
+  string = escapeHtml(string); // render links
+
+  string = stringToStringWithLink(string, {
+    transform: (url, {
+      line,
+      column
+    }) => {
+      const urlObject = new URL(url);
+
+      const onFileUrl = fileUrlObject => {
+        const atFsIndex = fileUrlObject.pathname.indexOf("/@fs/");
+        let fileUrl;
+
+        if (atFsIndex > -1) {
+          const afterAtFs = fileUrlObject.pathname.slice(atFsIndex + "/@fs/".length);
+          fileUrl = new URL(afterAtFs, "file:///").href;
+        } else {
+          fileUrl = fileUrlObject.href;
+        }
+
+        fileUrl = appendLineAndColumn(fileUrl, {
+          line,
+          column
+        });
+        return link({
+          href: `javascript:window.fetch('/__open_in_editor__/${fileUrl}')`,
+          text: fileUrl
+        });
       };
+
+      if (urlObject.origin === window.origin) {
+        const fileUrlObject = new URL(`${urlObject.pathname.slice(1)}${urlObject.search}`, rootDirectoryUrl);
+        return onFileUrl(fileUrlObject);
+      }
+
+      if (urlObject.href.startsWith("file:")) {
+        return onFileUrl(urlObject);
+      }
+
+      return link({
+        href: url,
+        text: appendLineAndColumn(url, {
+          line,
+          column
+        })
+      });
     }
   });
-  return htmlWithLinks;
+  return string;
+};
+
+const escapeHtml = string => {
+  return string.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+};
+
+const appendLineAndColumn = (url, {
+  line,
+  column
+}) => {
+  if (line !== undefined && column !== undefined) {
+    return `${url}:${line}:${column}`;
+  }
+
+  if (line !== undefined) {
+    return `${url}:${line}`;
+  }
+
+  return url;
 }; // `Error: yo
 // at Object.execute (http://127.0.0.1:57300/build/src/__test__/file-throw.js:9:13)
 // at doExec (http://127.0.0.1:3000/src/__test__/file-throw.js:452:38)
@@ -147,14 +373,9 @@ const stringToStringWithLink = (source, {
       const lineAndColumnString = lineAndColumMatch[0];
       const lineNumber = lineAndColumMatch[1];
       const columnNumber = lineAndColumMatch[2];
-      const url = match.slice(0, -lineAndColumnString.length);
-      const {
-        href,
-        text
-      } = transform(url);
-      linkHTML = link({
-        href,
-        text: `${text}:${lineNumber}:${columnNumber}`
+      linkHTML = transform(match.slice(0, -lineAndColumnString.length), {
+        line: lineNumber,
+        column: columnNumber
       });
     } else {
       const linePattern = /:([0-9]+)$/;
@@ -163,25 +384,11 @@ const stringToStringWithLink = (source, {
       if (lineMatch) {
         const lineString = lineMatch[0];
         const lineNumber = lineMatch[1];
-        const url = match.slice(0, -lineString.length);
-        const {
-          href,
-          text
-        } = transform(url);
-        linkHTML = link({
-          href,
-          text: `${text}:${lineNumber}`
+        linkHTML = transform(match.slice(0, -lineString.length), {
+          line: lineNumber
         });
       } else {
-        const url = match;
-        const {
-          href,
-          text
-        } = transform(url);
-        linkHTML = link({
-          href,
-          text
-        });
+        linkHTML = transform(match, {});
       }
     }
 
@@ -198,31 +405,6 @@ const link = ({
   text = href
 }) => `<a href="${href}">${text}</a>`;
 
-const appendHMTLInside = (html, parentNode) => {
-  const temoraryParent = document.createElement("div");
-  temoraryParent.innerHTML = html;
-  return transferChildren(temoraryParent, parentNode);
-};
-
-const transferChildren = (fromNode, toNode) => {
-  const childNodes = [].slice.call(fromNode.childNodes, 0);
-  let i = 0;
-
-  while (i < childNodes.length) {
-    toNode.appendChild(childNodes[i]);
-    i++;
-  }
-
-  return () => {
-    let c = 0;
-
-    while (c < childNodes.length) {
-      fromNode.appendChild(childNodes[c]);
-      c++;
-    }
-  };
-};
-
 const {
   Notification
 } = window;
@@ -252,7 +434,8 @@ const {
 } = window;
 const installHtmlSupervisor = ({
   logs,
-  measurePerf
+  measurePerf,
+  rootDirectoryUrl
 }) => {
 
   const scriptExecutionResults = {};
@@ -289,14 +472,14 @@ const installHtmlSupervisor = ({
   const onExecutionError = (executionResult, {
     currentScript,
     errorExposureInNotification = false,
-    errorExposureInDocument = true
+    errorExposureInDocument = false
   }) => {
     const error = executionResult.error;
 
     if (error && error.code === "NETWORK_FAILURE") {
       if (currentScript) {
-        const errorEvent = new Event("error");
-        currentScript.dispatchEvent(errorEvent);
+        const currentScriptErrorEvent = new Event("error");
+        currentScript.dispatchEvent(currentScriptErrorEvent);
       }
     } else if (typeof error === "object") {
       const globalErrorEvent = new Event("error");
@@ -312,7 +495,9 @@ const installHtmlSupervisor = ({
     }
 
     if (errorExposureInDocument) {
-      displayErrorInDocument(error);
+      displayErrorInDocument(error, {
+        rootDirectoryUrl
+      });
     }
 
     executionResult.exceptionSource = unevalException(error);
@@ -467,6 +652,50 @@ const installHtmlSupervisor = ({
   copy.forEach(scriptToExecute => {
     __html_supervisor__.addScriptToExecute(scriptToExecute);
   });
+  window.addEventListener("error", errorEvent => {
+    if (!errorEvent.isTrusted) {
+      // ignore custom error event (not sent by browser)
+      return;
+    }
+
+    const {
+      error
+    } = errorEvent;
+    displayErrorInDocument(error, {
+      rootDirectoryUrl,
+      url: errorEvent.filename,
+      line: errorEvent.lineno,
+      column: errorEvent.colno
+    });
+  });
+
+  if (window.__jsenv_event_source_client__) {
+    const onServerErrorEvent = serverErrorEvent => {
+      const {
+        reason,
+        stack,
+        url,
+        line,
+        column,
+        contentFrame
+      } = JSON.parse(serverErrorEvent.data);
+      displayErrorInDocument({
+        message: reason,
+        stack: stack ? `${stack}\n\n${contentFrame}` : contentFrame
+      }, {
+        rootDirectoryUrl,
+        url,
+        line,
+        column
+      });
+    };
+
+    window.__jsenv_event_source_client__.addEventCallbacks({
+      file_not_found: onServerErrorEvent,
+      parse_error: onServerErrorEvent,
+      unexpected_error: onServerErrorEvent
+    });
+  }
 };
 const superviseScriptTypeModule = ({
   src,