@jsenv/core 27.4.0 → 27.5.2

package/dist/js/html_supervisor_installer.js

@@ -10,158 +10,169 @@ const unevalException = value => {
   });
 };
 
-const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay";
-const displayErrorInDocument = (error, {
+const formatError = (error, {
   rootDirectoryUrl,
+  errorBaseUrl,
+  openInEditor,
   url,
   line,
-  column
+  column,
+  codeFrame,
+  requestedRessource,
+  reportedBy
 }) => {
-  document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach(node => {
-    node.parentNode.removeChild(node);
-  });
-  const {
-    theme,
-    title,
+  let {
     message,
     stack
-  } = errorToHTML(error, {
+  } = normalizeErrorParts(error);
+  let codeFramePromiseReference = {
+    current: null
+  };
+  let tip = formatTip({
+    reportedBy,
+    requestedRessource
+  });
+  let errorUrlSite;
+
+  const resolveUrlSite = ({
     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);
-};
+  }) => {
+    const inlineUrlMatch = url.match(/@L([0-9]+)\-L([0-9]+)\.[\w]+$/);
+
+    if (inlineUrlMatch) {
+      const htmlUrl = url.slice(0, inlineUrlMatch.index);
+      const tagLine = parseInt(inlineUrlMatch[1]);
+      const tagColumn = parseInt(inlineUrlMatch[2]);
+      url = htmlUrl;
+      line = tagLine + parseInt(line) - 1;
+      column = tagColumn + parseInt(column);
+    }
 
-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;
+    let urlObject = new URL(url);
 
-    this.root.querySelector(".backdrop").onclick = () => {
-      if (!this.parentNode) {
-        // not in document anymore
-        return;
+    if (urlObject.origin === window.origin) {
+      urlObject = new URL(`${urlObject.pathname.slice(1)}${urlObject.search}`, rootDirectoryUrl);
+    }
+
+    if (urlObject.href.startsWith("file:")) {
+      const atFsIndex = urlObject.pathname.indexOf("/@fs/");
+
+      if (atFsIndex > -1) {
+        const afterAtFs = urlObject.pathname.slice(atFsIndex + "/@fs/".length);
+        url = new URL(afterAtFs, "file:///").href;
+      } else {
+        url = urlObject.href;
       }
+    } else {
+      url = urlObject.href;
+    }
 
-      this.root.querySelector(".backdrop").onclick = null;
-      this.parentNode.removeChild(this);
+    return {
+      url,
+      line,
+      column
     };
-  }
+  };
 
-}
+  const generateClickableText = text => {
+    const textWithHtmlLinks = makeLinksClickable(text, {
+      createLink: (url, {
+        line,
+        column
+      }) => {
+        const urlSite = resolveUrlSite({
+          url,
+          line,
+          column
+        });
 
-if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
-  customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay);
-}
+        if (!errorUrlSite && text === stack) {
+          onErrorLocated(urlSite);
+        }
 
-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);
-}
+        if (errorBaseUrl) {
+          if (urlSite.url.startsWith(rootDirectoryUrl)) {
+            urlSite.url = `${errorBaseUrl}${urlSite.url.slice(rootDirectoryUrl.length)}`;
+          } else {
+            urlSite.url = "file:///mocked_for_snapshots";
+          }
+        }
 
-.backdrop {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
+        const urlWithLineAndColumn = formatUrlWithLineAndColumn(urlSite);
+        return {
+          href: url.startsWith("file:") && openInEditor ? `javascript:window.fetch('/__open_in_editor__/${urlWithLineAndColumn}')` : urlSite.url,
+          text: urlWithLineAndColumn
+        };
+      }
+    });
+    return textWithHtmlLinks;
+  };
 
-.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;
-}
+  const onErrorLocated = urlSite => {
+    errorUrlSite = urlSite;
 
-h1 {
-  color: red;
-  text-align: center;
-}
+    if (codeFrame) {
+      return;
+    }
 
-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; 
-}
+    if (reportedBy !== "browser") {
+      return;
+    }
 
-.tip {
-  border-top: 1px solid #999;
-  padding-top: 12px;
-}
+    codeFramePromiseReference.current = (async () => {
+      const response = await window.fetch(`/__get_code_frame__/${formatUrlWithLineAndColumn(urlSite)}`);
+      const codeFrame = await response.text();
+      const codeFrameClickable = generateClickableText(codeFrame);
+      return codeFrameClickable;
+    })();
+  }; // error.stack is more reliable than url/line/column reported on window error events
+  // so use it only when error.stack is not available
 
-[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;
-}
+  if (url && !stack) {
+    onErrorLocated(resolveUrlSite({
+      url,
+      line,
+      column
+    }));
+  }
 
-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 => {
+  let text;
+
+  if (message && stack) {
+    text = `${generateClickableText(message)}\n${generateClickableText(stack)}`;
+  } else if (stack) {
+    text = generateClickableText(stack);
+  } else {
+    text = generateClickableText(message);
+  }
+
+  if (codeFrame) {
+    text += `\n\n${generateClickableText(codeFrame)}`;
+  }
+
+  return {
+    theme: error && error.cause && error.cause.code === "PARSE_ERROR" ? "light" : "dark",
+    title: "An error occured",
+    text,
+    codeFramePromise: codeFramePromiseReference.current,
+    tip: `${tip}
+    <br />
+    Click outside to close.`
+  };
+};
+
+const formatUrlWithLineAndColumn = ({
+  url,
+  line,
+  column
+}) => {
+  return line === undefined && column === undefined ? url : column === undefined ? `${url}:${line}` : `${url}:${line}:${column}`;
+};
+
+const normalizeErrorParts = error => {
   if (error === undefined) {
     return {
       message: "undefined"
@@ -239,35 +250,19 @@ const getErrorStackWithoutErrorMessage = error => {
   return stack;
 };
 
-const errorToHTML = (error, {
-  url,
-  line,
-  column
+const formatTip = ({
+  reportedBy,
+  requestedRessource
 }) => {
-  let {
-    message,
-    stack
-  } = parseErrorInfo(error);
-
-  if (url) {
-    if (!stack || error && error.name === "SyntaxError") {
-      stack = `  at ${appendLineAndColumn(url, {
-        line,
-        column
-      })}`;
-    }
+  if (reportedBy === "browser") {
+    return `Reported by the browser while executing <code>${window.location.pathname}${window.location.search}</code>.`;
   }
 
-  return {
-    theme: error && error.cause && error.cause.code === "PARSE_ERROR" ? "light" : "dark",
-    title: "An error occured",
-    message,
-    stack
-  };
+  return `Reported by the server while serving <code>${requestedRessource}</code>`;
 };
 
-const replaceLinks = (string, {
-  rootDirectoryUrl
+const makeLinksClickable = (string, {
+  createLink = url => url
 }) => {
   // normalize line breaks
   string = string.replace(/\n/g, "\n");
@@ -278,44 +273,16 @@ const replaceLinks = (string, {
       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);
-      }
-
+      const {
+        href,
+        text
+      } = createLink(url, {
+        line,
+        column
+      });
       return link({
-        href: url,
-        text: appendLineAndColumn(url, {
-          line,
-          column
-        })
+        href,
+        text
       });
     }
   });
@@ -324,21 +291,6 @@ const replaceLinks = (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)
@@ -405,6 +357,193 @@ const link = ({
   text = href
 }) => `<a href="${href}">${text}</a>`;
 
+const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay";
+const displayErrorInDocument = (error, {
+  rootDirectoryUrl,
+  errorBaseUrl,
+  openInEditor,
+  url,
+  line,
+  column,
+  codeFrame,
+  reportedBy,
+  requestedRessource
+}) => {
+  const {
+    theme,
+    title,
+    text,
+    codeFramePromise,
+    tip
+  } = formatError(error, {
+    rootDirectoryUrl,
+    errorBaseUrl,
+    openInEditor,
+    url,
+    line,
+    column,
+    codeFrame,
+    reportedBy,
+    requestedRessource
+  });
+  let jsenvErrorOverlay = new JsenvErrorOverlay({
+    theme,
+    title,
+    text,
+    codeFramePromise,
+    tip
+  });
+  document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach(node => {
+    node.parentNode.removeChild(node);
+  });
+  document.body.appendChild(jsenvErrorOverlay);
+
+  const removeErrorOverlay = () => {
+    if (jsenvErrorOverlay && jsenvErrorOverlay.parentNode) {
+      document.body.removeChild(jsenvErrorOverlay);
+      jsenvErrorOverlay = null;
+    }
+  };
+
+  if (window.__reloader__) {
+    window.__reloader__.onstatuschange = () => {
+      if (window.__reloader__.status === "reloading") {
+        removeErrorOverlay();
+      }
+    };
+  }
+
+  return removeErrorOverlay;
+};
+
+class JsenvErrorOverlay extends HTMLElement {
+  constructor({
+    theme,
+    title,
+    text,
+    codeFramePromise,
+    tip
+  }) {
+    super();
+    this.root = this.attachShadow({
+      mode: "open"
+    });
+    this.root.innerHTML = `
+<style>
+  ${overlayCSS}
+</style>
+<div class="backdrop"></div>
+<div class="overlay" data-theme=${theme}>
+  <h1 class="title">
+    ${title}
+  </h1>
+  <pre class="text">${text}</pre>
+  <div class="tip">
+    ${tip}
+  </div>
+</div>`;
+
+    this.root.querySelector(".backdrop").onclick = () => {
+      if (!this.parentNode) {
+        // not in document anymore
+        return;
+      }
+
+      this.root.querySelector(".backdrop").onclick = null;
+      this.parentNode.removeChild(this);
+    };
+
+    if (codeFramePromise) {
+      codeFramePromise.then(codeFrame => {
+        if (this.parentNode) {
+          this.root.querySelector(".text").innerHTML += `\n\n${codeFrame}`;
+        }
+      });
+    }
+  }
+
+}
+
+if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
+  customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay);
+}
+
+const overlayCSS = `
+: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;
+}`;
+
 const {
   Notification
 } = window;
@@ -432,10 +571,14 @@ const displayErrorNotification = typeof Notification === "function" ? displayErr
 const {
   __html_supervisor__
 } = window;
+const supervisedScripts = [];
 const installHtmlSupervisor = ({
+  rootDirectoryUrl,
   logs,
   measurePerf,
-  rootDirectoryUrl
+  errorOverlay,
+  errorBaseUrl,
+  openInEditor
 }) => {
 
   const scriptExecutionResults = {};
@@ -471,8 +614,7 @@ const installHtmlSupervisor = ({
 
   const onExecutionError = (executionResult, {
     currentScript,
-    errorExposureInNotification = false,
-    errorExposureInDocument = false
+    errorExposureInNotification = false
   }) => {
     const error = executionResult.error;
 
@@ -494,12 +636,6 @@ const installHtmlSupervisor = ({
       displayErrorNotification(error);
     }
 
-    if (errorExposureInDocument) {
-      displayErrorInDocument(error, {
-        rootDirectoryUrl
-      });
-    }
-
     executionResult.exceptionSource = unevalException(error);
     delete executionResult.error;
   };
@@ -518,7 +654,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}`);
     }
@@ -529,7 +667,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;
@@ -593,12 +737,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
@@ -652,60 +806,121 @@ 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 (errorOverlay) {
+    window.addEventListener("error", errorEvent => {
+      if (!errorEvent.isTrusted) {
+        // ignore custom error event (not sent by browser)
+        return;
+      }
 
-  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
-      }, {
+        error
+      } = errorEvent;
+      displayErrorInDocument(error, {
         rootDirectoryUrl,
-        url,
-        line,
-        column
+        errorBaseUrl,
+        openInEditor,
+        url: errorEvent.filename,
+        line: errorEvent.lineno,
+        column: errorEvent.colno,
+        reportedBy: "browser"
       });
-    };
-
-    window.__jsenv_event_source_client__.addEventCallbacks({
-      file_not_found: onServerErrorEvent,
-      parse_error: onServerErrorEvent,
-      unexpected_error: onServerErrorEvent
     });
+
+    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
+            }, {
+              rootDirectoryUrl,
+              errorBaseUrl,
+              openInEditor,
+              url: traceUrl,
+              line: traceLine,
+              column: traceColumn,
+              codeFrame: traceMessage,
+              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)
   });
 };