@jsenv/core 27.3.4 → 27.5.1

package/dist/js/html_supervisor_installer.js

@@ -10,109 +10,411 @@ 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,
+  openInEditor,
+  url,
+  line,
+  column,
+  reportedBy,
+  requestedRessource
+}) => {
+  document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach(node => {
+    node.parentNode.removeChild(node);
+  });
+  const {
+    theme,
+    title,
+    message,
+    stack,
+    tip
+  } = errorToHTML(error, {
+    url,
+    line,
+    column,
+    reportedBy,
+    requestedRessource
+  });
+  let jsenvErrorOverlay = new JsenvErrorOverlay({
+    theme,
+    title,
+    text: createErrorText({
+      rootDirectoryUrl,
+      openInEditor,
+      message,
+      stack
+    }),
+    tip
+  });
+  document.body.appendChild(jsenvErrorOverlay);
 
-    .jsenv-console h1 {
-      color: red;
-      display: flex;
-      align-items: center;
+  const removeErrorOverlay = () => {
+    if (jsenvErrorOverlay && jsenvErrorOverlay.parentNode) {
+      document.body.removeChild(jsenvErrorOverlay);
+      jsenvErrorOverlay = null;
     }
+  };
 
-    #button-close-jsenv-console {
-      margin-left: 10px;
-    }
+  if (window.__reloader__) {
+    window.__reloader__.onstatuschange = () => {
+      if (window.__reloader__.status === "reloading") {
+        removeErrorOverlay();
+      }
+    };
+  }
 
-    .jsenv-console pre {
-      overflow: auto;
-      max-width: 70em;
-      /* avoid scrollbar to hide the text behind it */
-      padding: 20px;
-    }
+  return removeErrorOverlay;
+};
 
-    .jsenv-console pre[data-theme="dark"] {
-      background: #111;
-      border: 1px solid #333;
-      color: #eee;
-    }
+const createErrorText = ({
+  rootDirectoryUrl,
+  openInEditor,
+  message,
+  stack
+}) => {
+  if (message && stack) {
+    return `${replaceLinks(message, {
+      rootDirectoryUrl,
+      openInEditor
+    })}\n${replaceLinks(stack, {
+      rootDirectoryUrl,
+      openInEditor
+    })}`;
+  }
+
+  if (stack) {
+    return replaceLinks(stack, {
+      rootDirectoryUrl,
+      openInEditor
+    });
+  }
+
+  return replaceLinks(message, {
+    rootDirectoryUrl,
+    openInEditor
+  });
+};
+
+class JsenvErrorOverlay extends HTMLElement {
+  constructor({
+    theme,
+    title,
+    text,
+    tip
+  }) {
+    super();
+    this.root = this.attachShadow({
+      mode: "open"
+    });
+    this.root.innerHTML = overlayHtml;
+
+    this.root.querySelector(".backdrop").onclick = () => {
+      if (!this.parentNode) {
+        // not in document anymore
+        return;
+      }
+
+      this.root.querySelector(".backdrop").onclick = null;
+      this.parentNode.removeChild(this);
+    };
+
+    this.root.querySelector(".overlay").setAttribute("data-theme", theme);
+    this.root.querySelector(".title").innerHTML = title;
+    this.root.querySelector(".text").innerHTML = text;
+    this.root.querySelector(".tip").innerHTML = tip;
+  }
+
+}
+
+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="text"></pre>
+  <div class="tip"></div>
+</div>
+`;
+
+const parseErrorInfo = error => {
+  if (error === undefined) {
+    return {
+      message: "undefined"
+    };
+  }
+
+  if (error === null) {
+    return {
+      message: "null"
+    };
+  }
+
+  if (typeof error === "string") {
+    return {
+      message: error
+    };
+  }
 
-    .jsenv-console pre[data-theme="light"] {
-      background: #1E1E1E;
-      border: 1px solid white;
-      color: #EEEEEE;
+  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}`;
 
-const errorToHTML = error => {
-  let html;
+  if (stack.startsWith(messageInStack)) {
+    stack = stack.slice(messageInStack.length);
+  }
 
-  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}`);
+  const nextLineIndex = stack.indexOf("\n");
+
+  if (nextLineIndex > -1) {
+    stack = stack.slice(nextLineIndex + 1);
+  }
+
+  return stack;
+};
+
+const errorToHTML = (error, {
+  url,
+  line,
+  column,
+  reportedBy,
+  requestedRessource
+}) => {
+  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
+  let tip = formatTip({
+    reportedBy,
+    requestedRessource
+  });
+  return {
+    theme: error && error.cause && error.cause.code === "PARSE_ERROR" ? "light" : "dark",
+    title: "An error occured",
+    message,
+    stack,
+    tip: `${tip}
+<br />
+Click outside to close.`
+  };
+};
+
+const formatTip = ({
+  reportedBy,
+  requestedRessource
+}) => {
+  if (reportedBy === "browser") {
+    return `Reported by the browser while executing <code>${window.location.pathname}${window.location.search}</code>.`;
+  }
+
+  return `Reported by the server while serving <code>${requestedRessource}</code>`;
+};
+
+const replaceLinks = (string, {
+  rootDirectoryUrl,
+  openInEditor
+}) => {
+  // 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: openInEditor ? `javascript:window.fetch('/__open_in_editor__/${fileUrl}')` : 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 +449,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 +460,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 +481,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;
@@ -250,9 +508,13 @@ const displayErrorNotification = typeof Notification === "function" ? displayErr
 const {
   __html_supervisor__
 } = window;
+const supervisedScripts = [];
 const installHtmlSupervisor = ({
+  rootDirectoryUrl,
   logs,
-  measurePerf
+  measurePerf,
+  errorOverlay,
+  openInEditor
 }) => {
 
   const scriptExecutionResults = {};
@@ -288,15 +550,14 @@ const installHtmlSupervisor = ({
 
   const onExecutionError = (executionResult, {
     currentScript,
-    errorExposureInNotification = false,
-    errorExposureInDocument = true
+    errorExposureInNotification = 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");
@@ -311,10 +572,6 @@ const installHtmlSupervisor = ({
       displayErrorNotification(error);
     }
 
-    if (errorExposureInDocument) {
-      displayErrorInDocument(error);
-    }
-
     executionResult.exceptionSource = unevalException(error);
     delete executionResult.error;
   };
@@ -333,7 +590,9 @@ const installHtmlSupervisor = ({
     currentScript,
     execute // https://developer.mozilla.org/en-US/docs/web/html/element/script
 
-  }) => {
+  }, {
+    reload = false
+  } = {}) => {
     if (logs) {
       console.group(`[jsenv] loading ${type} ${src}`);
     }
@@ -344,7 +603,13 @@ const installHtmlSupervisor = ({
     let error;
 
     try {
-      result = await execute();
+      const urlObject = new URL(src, window.location);
+
+      if (reload) {
+        urlObject.searchParams.set("hmr", Date.now());
+      }
+
+      result = await execute(urlObject.href);
       completed = true;
     } catch (e) {
       completed = false;
@@ -408,12 +673,22 @@ const installHtmlSupervisor = ({
   }));
 
   __html_supervisor__.addScriptToExecute = async scriptToExecute => {
+    if (!supervisedScripts.includes(scriptToExecute)) {
+      supervisedScripts.push(scriptToExecute);
+
+      scriptToExecute.reload = () => {
+        return performExecution(scriptToExecute, {
+          reload: true
+        });
+      };
+    }
+
     if (scriptToExecute.async) {
       performExecution(scriptToExecute);
       return;
     }
 
-    const useDeferQueue = scriptToExecute.defer || scriptToExecute.type === "js_module";
+    const useDeferQueue = scriptToExecute.defer || scriptToExecute.type === "module";
 
     if (useDeferQueue) {
       // defer must wait for classic script to be done
@@ -467,16 +742,118 @@ const installHtmlSupervisor = ({
   copy.forEach(scriptToExecute => {
     __html_supervisor__.addScriptToExecute(scriptToExecute);
   });
+
+  if (errorOverlay) {
+    window.addEventListener("error", errorEvent => {
+      if (!errorEvent.isTrusted) {
+        // ignore custom error event (not sent by browser)
+        return;
+      }
+
+      const {
+        error
+      } = errorEvent;
+      displayErrorInDocument(error, {
+        rootDirectoryUrl,
+        openInEditor,
+        url: errorEvent.filename,
+        line: errorEvent.lineno,
+        column: errorEvent.colno,
+        reportedBy: "browser"
+      });
+    });
+
+    if (window.__server_events__) {
+      const isExecuting = () => {
+        if (pendingExecutionCount > 0) {
+          return true;
+        }
+
+        if (document.readyState === "loading" || document.readyState === "interactive") {
+          return true;
+        }
+
+        if (window.__reloader__ && window.__reloader__.status === "reloading") {
+          return true;
+        }
+
+        return false;
+      };
+
+      window.__server_events__.addEventCallbacks({
+        error_while_serving_file: serverErrorEvent => {
+          if (!isExecuting()) {
+            return;
+          }
+
+          const {
+            message,
+            stack,
+            traceUrl,
+            traceLine,
+            traceColumn,
+            traceMessage,
+            requestedRessource,
+            isFaviconAutoRequest
+          } = JSON.parse(serverErrorEvent.data);
+
+          if (isFaviconAutoRequest) {
+            return;
+          } // setTimeout is to ensure the error
+          // dispatched on window by browser is displayed first,
+          // then the server error replaces it (because it contains more information)
+
+
+          setTimeout(() => {
+            displayErrorInDocument({
+              message,
+              stack: stack && traceMessage ? `${stack}\n\n${traceMessage}` : stack ? stack : traceMessage ? `\n${traceMessage}` : ""
+            }, {
+              rootDirectoryUrl,
+              openInEditor,
+              url: traceUrl,
+              line: traceLine,
+              column: traceColumn,
+              reportedBy: "server",
+              requestedRessource
+            });
+          }, 10);
+        }
+      });
+    }
+  }
+};
+
+__html_supervisor__.reloadSupervisedScript = ({
+  type,
+  src
+}) => {
+  const supervisedScript = supervisedScripts.find(supervisedScriptCandidate => {
+    if (type && supervisedScriptCandidate.type !== type) {
+      return false;
+    }
+
+    if (supervisedScriptCandidate.src !== src) {
+      return false;
+    }
+
+    return true;
+  });
+
+  if (supervisedScript) {
+    supervisedScript.reload();
+  }
 };
+
 const superviseScriptTypeModule = ({
   src,
   isInline
 }) => {
   __html_supervisor__.addScriptToExecute({
     src,
-    type: "js_module",
+    type: "module",
     isInline,
-    execute: () => import(new URL(src, document.location.href).href)
+    execute: url => import(url)
   });
 };