@jsenv/core 27.4.0 → 27.5.0

package/dist/js/html_supervisor_installer.js

@@ -13,9 +13,12 @@ const unevalException = value => {
 const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay";
 const displayErrorInDocument = (error, {
   rootDirectoryUrl,
+  openInEditor,
   url,
   line,
-  column
+  column,
+  reportedBy,
+  requestedRessource
 }) => {
   document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach(node => {
     node.parentNode.removeChild(node);
@@ -24,40 +27,87 @@ const displayErrorInDocument = (error, {
     theme,
     title,
     message,
-    stack
+    stack,
+    tip
   } = errorToHTML(error, {
     url,
     line,
-    column
+    column,
+    reportedBy,
+    requestedRessource
   });
-  const jsenvErrorOverlay = new JsenvErrorOverlay({
+  let jsenvErrorOverlay = new JsenvErrorOverlay({
     theme,
     title,
-    stack: stack ? `${replaceLinks(message, {
-      rootDirectoryUrl
-    })}\n${replaceLinks(stack, {
-      rootDirectoryUrl
-    })}` : replaceLinks(message, {
-      rootDirectoryUrl
-    })
+    text: createErrorText({
+      rootDirectoryUrl,
+      openInEditor,
+      message,
+      stack
+    }),
+    tip
   });
   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;
+};
+
+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,
-    stack,
-    theme = "dark"
+    text,
+    tip
   }) {
     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) {
@@ -68,6 +118,11 @@ class JsenvErrorOverlay extends HTMLElement {
       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;
   }
 
 }
@@ -156,8 +211,8 @@ pre a {
 <div class="backdrop"></div>
 <div class="overlay">
   <h1 class="title"></h1>
-  <pre class="stack"></pre>
-  <div class="tip">Click outside to close.</div>
+  <pre class="text"></pre>
+  <div class="tip"></div>
 </div>
 `;
 
@@ -242,7 +297,9 @@ const getErrorStackWithoutErrorMessage = error => {
 const errorToHTML = (error, {
   url,
   line,
-  column
+  column,
+  reportedBy,
+  requestedRessource
 }) => {
   let {
     message,
@@ -258,16 +315,35 @@ const errorToHTML = (error, {
     }
   }
 
+  let tip = formatTip({
+    reportedBy,
+    requestedRessource
+  });
   return {
     theme: error && error.cause && error.cause.code === "PARSE_ERROR" ? "light" : "dark",
     title: "An error occured",
     message,
-    stack
+    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
+  rootDirectoryUrl,
+  openInEditor
 }) => {
   // normalize line breaks
   string = string.replace(/\n/g, "\n");
@@ -296,7 +372,7 @@ const replaceLinks = (string, {
           column
         });
         return link({
-          href: `javascript:window.fetch('/__open_in_editor__/${fileUrl}')`,
+          href: openInEditor ? `javascript:window.fetch('/__open_in_editor__/${fileUrl}')` : fileUrl,
           text: fileUrl
         });
       };
@@ -432,10 +508,13 @@ const displayErrorNotification = typeof Notification === "function" ? displayErr
 const {
   __html_supervisor__
 } = window;
+const supervisedScripts = [];
 const installHtmlSupervisor = ({
+  rootDirectoryUrl,
   logs,
   measurePerf,
-  rootDirectoryUrl
+  errorOverlay,
+  openInEditor
 }) => {
 
   const scriptExecutionResults = {};
@@ -471,8 +550,7 @@ const installHtmlSupervisor = ({
 
   const onExecutionError = (executionResult, {
     currentScript,
-    errorExposureInNotification = false,
-    errorExposureInDocument = false
+    errorExposureInNotification = false
   }) => {
     const error = executionResult.error;
 
@@ -494,12 +572,6 @@ const installHtmlSupervisor = ({
       displayErrorNotification(error);
     }
 
-    if (errorExposureInDocument) {
-      displayErrorInDocument(error, {
-        rootDirectoryUrl
-      });
-    }
-
     executionResult.exceptionSource = unevalException(error);
     delete executionResult.error;
   };
@@ -518,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}`);
     }
@@ -529,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;
@@ -593,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
@@ -652,60 +742,118 @@ 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
+        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: 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)
   });
 };
 

package/dist/js/html_supervisor_setup.js

@@ -14,7 +14,7 @@ window.__html_supervisor__ = {
       type: "js_classic",
       isInline,
       currentScript: document.currentScript,
-      execute: () => {
+      execute: (url) => {
         return new Promise((resolve, reject) => {
           const script = document.createElement("script")
           if (crossorigin) {
@@ -23,8 +23,7 @@ window.__html_supervisor__ = {
           if (integrity) {
             script.integrity = integrity
           }
-          script.src = src
-          const scriptUrl = new URL(src, window.location).href
+          script.src = url
           let lastWindowErrorUrl
           let lastWindowError
           const windowErrorCallback = (e) => {
@@ -45,7 +44,7 @@ window.__html_supervisor__ = {
           })
           script.addEventListener("load", () => {
             cleanup()
-            if (lastWindowErrorUrl === scriptUrl) {
+            if (lastWindowErrorUrl === url) {
               reject(lastWindowError)
             } else {
               resolve()

package/dist/js/new_stylesheet.js

@@ -14,30 +14,6 @@
 
   var defineProperty = Object.defineProperty;
   var forEach = Array.prototype.forEach;
-
-  var hasBrokenRules = function () {
-    var style = bootstrapper.createElement("style");
-    style.textContent = '.x{content:"y"}';
-    bootstrapper.body.appendChild(style);
-    return style.sheet.cssRules[0].style.content !== '"y"';
-  }();
-
-  var brokenRulePatterns = [/content:\s*["']/gm];
-
-  function fixBrokenRules(content) {
-    return brokenRulePatterns.reduce(function (acc, pattern) {
-      return acc.replace(pattern, "$&%%%");
-    }, content);
-  }
-
-  var placeholderPatterns = [/(content:\s*["'])%%%/gm];
-  var getCssText = hasBrokenRules ? function (rule) {
-    return placeholderPatterns.reduce(function (acc, pattern) {
-      return acc.replace(pattern, "$1");
-    }, rule.cssText);
-  } : function (rule) {
-    return rule.cssText;
-  };
   var importPattern = /@import.+?;?$/gm;
 
   function rejectImports(contents) {
@@ -50,18 +26,6 @@
     return _contents.trim();
   }
 
-  function clearRules(sheet) {
-    for (var i = 0; i < sheet.cssRules.length; i++) {
-      sheet.deleteRule(0);
-    }
-  }
-
-  function insertAllRules(from, to) {
-    forEach.call(from.cssRules, function (rule, i) {
-      to.insertRule(getCssText(rule), i);
-    });
-  }
-
   function isElementConnected(element) {
     return "isConnected" in element ? element.isConnected : document.contains(element);
   }
@@ -106,9 +70,10 @@
     return typeof instance === "object" ? nonConstructedProto.isPrototypeOf(instance) : false;
   }
 
-  var $basicStyleSheet = new WeakMap();
+  var $basicStyleElement = new WeakMap();
   var $locations = new WeakMap();
   var $adoptersByLocation = new WeakMap();
+  var $appliedMethods = new WeakMap();
 
   function addAdopterLocation(sheet, location) {
     var adopter = document.createElement("style");
@@ -130,13 +95,15 @@
 
   function restyleAdopter(sheet, adopter) {
     requestAnimationFrame(function () {
-      clearRules(adopter.sheet);
-      insertAllRules($basicStyleSheet.get(sheet), adopter.sheet);
+      adopter.textContent = $basicStyleElement.get(sheet).textContent;
+      $appliedMethods.get(sheet).forEach(function (command) {
+        return adopter.sheet[command.method].apply(adopter.sheet, command.args);
+      });
     });
   }
 
   function checkInvocationCorrectness(self) {
-    if (!$basicStyleSheet.has(self)) {
+    if (!$basicStyleElement.has(self)) {
       throw new TypeError("Illegal invocation");
     }
   }
@@ -145,9 +112,10 @@
     var self = this;
     var style = document.createElement("style");
     bootstrapper.body.appendChild(style);
-    $basicStyleSheet.set(self, style.sheet);
+    $basicStyleElement.set(self, style);
     $locations.set(self, []);
     $adoptersByLocation.set(self, new WeakMap());
+    $appliedMethods.set(self, []);
   }
 
   var proto$1 = ConstructedStyleSheet.prototype;
@@ -166,9 +134,8 @@
 
     if (typeof contents === "string") {
       var self_1 = this;
-      var style = $basicStyleSheet.get(self_1).ownerNode;
-      style.textContent = hasBrokenRules ? fixBrokenRules(rejectImports(contents)) : rejectImports(contents);
-      $basicStyleSheet.set(self_1, style.sheet);
+      $basicStyleElement.get(self_1).textContent = rejectImports(contents);
+      $appliedMethods.set(self_1, []);
       $locations.get(self_1).forEach(function (location) {
         if (location.isConnected()) {
           restyleAdopter(self_1, getAdopterByLocation(self_1, location));
@@ -182,7 +149,15 @@
     enumerable: true,
     get: function cssRules() {
       checkInvocationCorrectness(this);
-      return $basicStyleSheet.get(this).cssRules;
+      return $basicStyleElement.get(this).sheet.cssRules;
+    }
+  });
+  defineProperty(proto$1, "media", {
+    configurable: true,
+    enumerable: true,
+    get: function media() {
+      checkInvocationCorrectness(this);
+      return $basicStyleElement.get(this).sheet.media;
     }
   });
   cssStyleSheetMethods.forEach(function (method) {
@@ -190,25 +165,18 @@
       var self = this;
       checkInvocationCorrectness(self);
       var args = arguments;
+      $appliedMethods.get(self).push({
+        method: method,
+        args: args
+      });
       $locations.get(self).forEach(function (location) {
         if (location.isConnected()) {
           var sheet = getAdopterByLocation(self, location).sheet;
           sheet[method].apply(sheet, args);
         }
       });
-
-      if (hasBrokenRules) {
-        if (method === "insertRule") {
-          args[0] = fixBrokenRules(args[0]);
-        }
-
-        if (method === "addRule") {
-          args[1] = fixBrokenRules(args[1]);
-        }
-      }
-
-      var basic = $basicStyleSheet.get(self);
-      return basic[method].apply(basic, args);
+      var basicSheet = $basicStyleElement.get(self).sheet;
+      return basicSheet[method].apply(basicSheet, args);
     };
   });
   defineProperty(ConstructedStyleSheet, Symbol.hasInstance, {