@jsenv/core 27.3.4 → 27.4.0

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

@@ -1,73 +1,269 @@
-export 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"
 
-    .jsenv-console h1 {
-      color: red;
-      display: flex;
-      align-items: center;
-    }
+export 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)
+}
 
-    #button-close-jsenv-console {
-      margin-left: 10px;
+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
+      }
+      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)
+}
 
-    .jsenv-console pre[data-theme="dark"] {
-      background: #111;
-      border: 1px solid #333;
-      color: #eee;
-    }
+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;
+}
 
-    .jsenv-console pre[data-theme="light"] {
-      background: #1E1E1E;
-      border: 1px solid white;
-      color: #EEEEEE;
+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",
+    }
+  }
+  if (error === null) {
+    return {
+      message: "null",
+    }
+  }
+  if (typeof error === "string") {
+    return {
+      message: error,
+    }
+  }
+  if (error instanceof Error) {
+    if (error.name === "SyntaxError") {
+      return {
+        message: error.message,
+      }
+    }
+    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),
+      }
+    }
+    return {
+      message: error.message,
+      stack: error.stack ? `  ${error.stack}` : null,
+    }
+  }
+  if (typeof error === "object") {
+    return error
+  }
+  return {
+    message: JSON.stringify(error),
+  }
+}
 
-    .jsenv-console pre a {
-      color: inherit;
+const getErrorStackWithoutErrorMessage = (error) => {
+  let stack = error.stack
+  const messageInStack = `${error.name}: ${error.message}`
+  if (stack.startsWith(messageInStack)) {
+    stack = stack.slice(messageInStack.length)
+  }
+  const nextLineIndex = stack.indexOf("\n")
+  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 })}`
     }
-    `
-  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 {
+    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 string
+}
+
 const escapeHtml = (string) => {
   return string
     .replace(/&/g, "&amp;")
@@ -77,36 +273,14 @@ const escapeHtml = (string) => {
     .replace(/'/g, "&#039;")
 }
 
-const errorToHTML = (error) => {
-  let html
-
-  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}`)
-    }
-  } else if (typeof error === "string") {
-    html = error
-  } else if (error === undefined) {
-    html = "undefined"
-  } else {
-    html = JSON.stringify(error)
+const appendLineAndColumn = (url, { line, column }) => {
+  if (line !== undefined && column !== undefined) {
+    return `${url}:${line}:${column}`
   }
-
-  const htmlWithCorrectLineBreaks = html.replace(/\n/g, "\n")
-  const htmlWithLinks = stringToStringWithLink(htmlWithCorrectLineBreaks, {
-    transform: (url) => {
-      return { href: url, text: url }
-    },
-  })
-  return htmlWithLinks
+  if (line !== undefined) {
+    return `${url}:${line}`
+  }
+  return url
 }
 
 // `Error: yo
@@ -144,28 +318,23 @@ const stringToStringWithLink = (
       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]+)$/
       const lineMatch = match.match(linePattern)
       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, {})
       }
     }
-
     if (endsWithSeparationChar) {
       return `${linkHTML}${lastChar}`
     }
@@ -174,25 +343,3 @@ const stringToStringWithLink = (
 }
 
 const link = ({ href, 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++
-    }
-  }
-}

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

@@ -4,7 +4,11 @@ import { displayErrorNotification } from "./error_in_notification.js"
 
 const { __html_supervisor__ } = window
 
-export const installHtmlSupervisor = ({ logs, measurePerf }) => {
+export const installHtmlSupervisor = ({
+  logs,
+  measurePerf,
+  rootDirectoryUrl,
+}) => {
   const errorTransformer = null // could implement error stack remapping if needed
   const scriptExecutionResults = {}
   let collectCalled = false
@@ -35,14 +39,14 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
     {
       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")
@@ -56,7 +60,7 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
       displayErrorNotification(error)
     }
     if (errorExposureInDocument) {
-      displayErrorInDocument(error)
+      displayErrorInDocument(error, { rootDirectoryUrl })
     }
     executionResult.exceptionSource = unevalException(error)
     delete executionResult.error
@@ -202,6 +206,44 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
   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,
+    })
+  }
 }
 
 export const superviseScriptTypeModule = ({ src, isInline }) => {

package/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -4,6 +4,7 @@
  * - scripts are wrapped to be supervised
  */
 
+import { fileURLToPath } from "node:url"
 import {
   parseHtmlString,
   stringifyHtmlAst,
@@ -20,6 +21,8 @@ import {
 } from "@jsenv/ast"
 import { generateInlineContentUrl } from "@jsenv/urls"
 
+import { requireFromJsenv } from "@jsenv/core/src/require_from_jsenv.js"
+
 export const jsenvPluginHtmlSupervisor = ({
   logs = false,
   measurePerf = false,
@@ -40,8 +43,27 @@ export const jsenvPluginHtmlSupervisor = ({
       dev: true,
       test: true,
     },
+    serve: (request) => {
+      if (!request.ressource.startsWith("/__open_in_editor__/")) {
+        return null
+      }
+      const file = request.ressource.slice("/__open_in_editor__/".length)
+      if (!file) {
+        return {
+          status: 400,
+          body: 'Missing "file" in url search params',
+        }
+      }
+      const launch = requireFromJsenv("launch-editor")
+      launch(fileURLToPath(file), () => {
+        // ignore error for now
+      })
+      return {
+        status: 200,
+      }
+    },
     transformUrlContent: {
-      html: ({ url, content }, { referenceUtils }) => {
+      html: ({ url, content }, context) => {
         const htmlAst = parseHtmlString(content)
         const scriptsToSupervise = []
 
@@ -59,7 +81,7 @@ export const jsenvPluginHtmlSupervisor = ({
             lineEnd,
             columnEnd,
           })
-          const [inlineScriptReference] = referenceUtils.foundInline({
+          const [inlineScriptReference] = context.referenceUtils.foundInline({
             type: "script_src",
             expectedType: { classic: "js_classic", module: "js_module" }[
               scriptCategory
@@ -128,11 +150,12 @@ export const jsenvPluginHtmlSupervisor = ({
             }
           },
         })
-        const [htmlSupervisorInstallerFileReference] = referenceUtils.inject({
-          type: "js_import_export",
-          expectedType: "js_module",
-          specifier: htmlSupervisorInstallerFileUrl,
-        })
+        const [htmlSupervisorInstallerFileReference] =
+          context.referenceUtils.inject({
+            type: "js_import_export",
+            expectedType: "js_module",
+            specifier: htmlSupervisorInstallerFileUrl,
+          })
         injectScriptNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
@@ -146,6 +169,7 @@ export const jsenvPluginHtmlSupervisor = ({
         {
           logs,
           measurePerf,
+          rootDirectoryUrl: context.rootDirectoryUrl,
         },
         null,
         "        ",
@@ -153,11 +177,12 @@ export const jsenvPluginHtmlSupervisor = ({
             "injected-by": "jsenv:html_supervisor",
           }),
         )
-        const [htmlSupervisorSetupFileReference] = referenceUtils.inject({
-          type: "script_src",
-          expectedType: "js_classic",
-          specifier: htmlSupervisorSetupFileUrl,
-        })
+        const [htmlSupervisorSetupFileReference] =
+          context.referenceUtils.inject({
+            type: "script_src",
+            expectedType: "js_classic",
+            specifier: htmlSupervisorSetupFileUrl,
+          })
         injectScriptNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({

package/src/plugins/plugins.js

@@ -83,8 +83,6 @@ export const getCorePlugins = ({
       ? [
           jsenvPluginAutoreload({
             ...clientAutoreload,
-            rootDirectoryUrl,
-            urlGraph,
             scenario,
             clientFileChangeCallbackList,
             clientFilesPruneCallbackList,

package/src/plugins/url_analysis/jsenv_plugin_url_analysis.js

@@ -79,7 +79,9 @@ export const jsenvPluginUrlAnalysis = ({
             type: "filesystem",
             subtype: "directory_entry",
             specifier: directoryEntryName,
-            trace: `"${directoryRelativeUrl}${directoryEntryName}" entry in directory referenced by ${originalDirectoryReference.trace}`,
+            trace: {
+              message: `"${directoryRelativeUrl}${directoryEntryName}" entry in directory referenced by ${originalDirectoryReference.trace.message}`,
+            },
           })
         })
       },