@jsenv/core 27.4.0 → 27.5.0

package/src/plugins/html_supervisor/client/{error_in_document.js → error_overlay.js}

@@ -2,36 +2,72 @@ const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay"
 
 export const displayErrorInDocument = (
   error,
-  { rootDirectoryUrl, url, line, column },
+  {
+    rootDirectoryUrl,
+    openInEditor,
+    url,
+    line,
+    column,
+    reportedBy,
+    requestedRessource,
+  },
 ) => {
   document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach((node) => {
     node.parentNode.removeChild(node)
   })
-  const { theme, title, message, stack } = errorToHTML(error, {
+  const { theme, title, message, stack, tip } = errorToHTML(error, {
     url,
     line,
     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({ title, stack, theme = "dark" }) {
+  constructor({ theme, title, 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) {
         // not in document anymore
@@ -40,6 +76,10 @@ 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
   }
 }
 
@@ -127,8 +167,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>
 `
 
@@ -197,13 +237,17 @@ const getErrorStackWithoutErrorMessage = (error) => {
   return stack
 }
 
-const errorToHTML = (error, { url, line, column }) => {
+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 })}`
     }
   }
+  let tip = formatTip({ reportedBy, requestedRessource })
   return {
     theme:
       error && error.cause && error.cause.code === "PARSE_ERROR"
@@ -212,10 +256,20 @@ const errorToHTML = (error, { url, line, column }) => {
     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 }) => {
+const replaceLinks = (string, { rootDirectoryUrl, openInEditor }) => {
   // normalize line breaks
   string = string.replace(/\n/g, "\n")
   string = escapeHtml(string)
@@ -240,7 +294,9 @@ const replaceLinks = (string, { rootDirectoryUrl }) => {
           column,
         })
         return link({
-          href: `javascript:window.fetch('/__open_in_editor__/${fileUrl}')`,
+          href: openInEditor
+            ? `javascript:window.fetch('/__open_in_editor__/${fileUrl}')`
+            : fileUrl,
           text: fileUrl,
         })
       }

package/src/plugins/html_supervisor/client/html_supervisor_installer.js

@@ -1,13 +1,17 @@
 import { unevalException } from "./uneval_exception.js"
-import { displayErrorInDocument } from "./error_in_document.js"
+import { displayErrorInDocument } from "./error_overlay.js"
 import { displayErrorNotification } from "./error_in_notification.js"
 
 const { __html_supervisor__ } = window
 
+const supervisedScripts = []
+
 export const installHtmlSupervisor = ({
+  rootDirectoryUrl,
   logs,
   measurePerf,
-  rootDirectoryUrl,
+  errorOverlay,
+  openInEditor,
 }) => {
   const errorTransformer = null // could implement error stack remapping if needed
   const scriptExecutionResults = {}
@@ -36,11 +40,7 @@ export const installHtmlSupervisor = ({
   }
   const onExecutionError = (
     executionResult,
-    {
-      currentScript,
-      errorExposureInNotification = false,
-      errorExposureInDocument = false,
-    },
+    { currentScript, errorExposureInNotification = false },
   ) => {
     const error = executionResult.error
     if (error && error.code === "NETWORK_FAILURE") {
@@ -59,9 +59,6 @@ export const installHtmlSupervisor = ({
     if (errorExposureInNotification) {
       displayErrorNotification(error)
     }
-    if (errorExposureInDocument) {
-      displayErrorInDocument(error, { rootDirectoryUrl })
-    }
     executionResult.exceptionSource = unevalException(error)
     delete executionResult.error
   }
@@ -73,13 +70,16 @@ export const installHtmlSupervisor = ({
     }
   }
 
-  const performExecution = async ({
-    src,
-    type,
-    currentScript,
-    execute,
-    // https://developer.mozilla.org/en-US/docs/web/html/element/script
-  }) => {
+  const performExecution = async (
+    {
+      src,
+      type,
+      currentScript,
+      execute,
+      // https://developer.mozilla.org/en-US/docs/web/html/element/script
+    },
+    { reload = false } = {},
+  ) => {
     if (logs) {
       console.group(`[jsenv] loading ${type} ${src}`)
     }
@@ -88,7 +88,11 @@ export const installHtmlSupervisor = ({
     let result
     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
@@ -156,12 +160,19 @@ export 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"
+      scriptToExecute.defer || scriptToExecute.type === "module"
     if (useDeferQueue) {
       // defer must wait for classic script to be done
       const classicExecutionPromise = classicExecutionQueue.getPromise()
@@ -207,51 +218,113 @@ export const installHtmlSupervisor = ({
     __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
+      }
+      const { error } = errorEvent
+      displayErrorInDocument(error, {
+        rootDirectoryUrl,
+        openInEditor,
+        url: errorEvent.filename,
+        line: errorEvent.lineno,
+        column: errorEvent.colno,
+        reportedBy: "browser",
+      })
     })
-  })
-  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,
+    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)
         },
-      )
+      })
     }
-    window.__jsenv_event_source_client__.addEventCallbacks({
-      file_not_found: onServerErrorEvent,
-      parse_error: onServerErrorEvent,
-      unexpected_error: onServerErrorEvent,
-    })
+  }
+}
+
+__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()
   }
 }
 
 export 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/src/plugins/html_supervisor/client/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/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -26,6 +26,8 @@ import { requireFromJsenv } from "@jsenv/core/src/require_from_jsenv.js"
 export const jsenvPluginHtmlSupervisor = ({
   logs = false,
   measurePerf = false,
+  errorOverlay = true,
+  openInEditor = true,
 }) => {
   const htmlSupervisorSetupFileUrl = new URL(
     "./client/html_supervisor_setup.js?js_classic",
@@ -68,14 +70,14 @@ export const jsenvPluginHtmlSupervisor = ({
         const scriptsToSupervise = []
 
         const handleInlineScript = (node, htmlNodeText) => {
-          const scriptCategory = analyzeScriptNode(node)
+          const { type, extension } = analyzeScriptNode(node)
           const { line, column, lineEnd, columnEnd, isOriginal } =
             getHtmlNodePosition(node, {
               preferOriginal: true,
             })
           let inlineScriptUrl = generateInlineContentUrl({
             url,
-            extension: ".js",
+            extension: extension || ".js",
             line,
             column,
             lineEnd,
@@ -83,9 +85,7 @@ export const jsenvPluginHtmlSupervisor = ({
           })
           const [inlineScriptReference] = context.referenceUtils.foundInline({
             type: "script_src",
-            expectedType: { classic: "js_classic", module: "js_module" }[
-              scriptCategory
-            ],
+            expectedType: type,
             isOriginalPosition: isOriginal,
             specifierLine: line - 1,
             specifierColumn: column,
@@ -94,15 +94,20 @@ export const jsenvPluginHtmlSupervisor = ({
             content: htmlNodeText,
           })
           removeHtmlNodeText(node)
+          if (extension) {
+            setHtmlNodeAttributes(node, {
+              type: type === "js_module" ? "module" : undefined,
+            })
+          }
           scriptsToSupervise.push({
             node,
             isInline: true,
-            type: scriptCategory,
+            type,
             src: inlineScriptReference.generatedSpecifier,
           })
         }
         const handleScriptWithSrc = (node, src) => {
-          const scriptCategory = analyzeScriptNode(node)
+          const { type } = analyzeScriptNode(node)
           const integrity = getHtmlNodeAttribute(node, "integrity")
           const crossorigin =
             getHtmlNodeAttribute(node, "crossorigin") !== undefined
@@ -113,7 +118,7 @@ export const jsenvPluginHtmlSupervisor = ({
           })
           scriptsToSupervise.push({
             node,
-            type: scriptCategory,
+            type,
             src,
             defer,
             async,
@@ -123,8 +128,8 @@ export const jsenvPluginHtmlSupervisor = ({
         }
         visitHtmlNodes(htmlAst, {
           script: (node) => {
-            const scriptCategory = analyzeScriptNode(node)
-            if (scriptCategory !== "classic" && scriptCategory !== "module") {
+            const { type } = analyzeScriptNode(node)
+            if (type !== "js_classic" && type !== "js_module") {
               return
             }
             const injectedBy = getHtmlNodeAttribute(node, "injected-by")
@@ -167,9 +172,11 @@ export const jsenvPluginHtmlSupervisor = ({
       }
       installHtmlSupervisor(${JSON.stringify(
         {
+          rootDirectoryUrl: context.rootDirectoryUrl,
           logs,
           measurePerf,
-          rootDirectoryUrl: context.rootDirectoryUrl,
+          errorOverlay,
+          openInEditor,
         },
         null,
         "        ",
@@ -252,7 +259,7 @@ const generateCodeToSuperviseScript = ({
     integrity,
     crossorigin,
   })
-  if (type === "module") {
+  if (type === "js_module") {
     return `
       import { superviseScriptTypeModule } from ${htmlSupervisorInstallerSpecifier}
       superviseScriptTypeModule(${paramsAsJson})