@jsenv/core 27.5.1 → 27.5.2

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

@@ -1,33 +1,43 @@
+import { formatError } from "./error_formatter.js"
+
 const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay"
 
 export const displayErrorInDocument = (
   error,
   {
     rootDirectoryUrl,
+    errorBaseUrl,
     openInEditor,
     url,
     line,
     column,
+    codeFrame,
     reportedBy,
     requestedRessource,
   },
 ) => {
-  document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach((node) => {
-    node.parentNode.removeChild(node)
-  })
-  const { theme, title, message, stack, tip } = errorToHTML(error, {
+  const { theme, title, text, codeFramePromise, tip } = formatError(error, {
+    rootDirectoryUrl,
+    errorBaseUrl,
+    openInEditor,
     url,
     line,
     column,
+    codeFrame,
     reportedBy,
     requestedRessource,
   })
+
   let jsenvErrorOverlay = new JsenvErrorOverlay({
     theme,
     title,
-    text: createErrorText({ rootDirectoryUrl, openInEditor, message, stack }),
+    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) {
@@ -45,29 +55,24 @@ export const displayErrorInDocument = (
   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, text, tip }) {
+  constructor({ theme, title, text, codeFramePromise, tip }) {
     super()
     this.root = this.attachShadow({ mode: "open" })
-    this.root.innerHTML = overlayHtml
+    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
@@ -76,10 +81,13 @@ 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
+    if (codeFramePromise) {
+      codeFramePromise.then((codeFrame) => {
+        if (this.parentNode) {
+          this.root.querySelector(".text").innerHTML += `\n\n${codeFrame}`
+        }
+      })
+    }
   }
 }
 
@@ -87,8 +95,7 @@ if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
   customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay)
 }
 
-const overlayHtml = `
-<style>
+const overlayCSS = `
 :host {
   position: fixed;
   z-index: 99999;
@@ -162,240 +169,4 @@ pre {
 
 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,
-    }
-  }
-  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),
-  }
-}
-
-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, 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"
-        ? "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 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)
-// at postOrderExec (http://127.0.0.1:3000/src/__test__/file-throw.js:448:16)
-// at http://127.0.0.1:3000/src/__test__/file-throw.js:399:18`.replace(/(?:https?|ftp|file):\/\/(.*+)$/gm, (...args) => {
-//   debugger
-// })
-const stringToStringWithLink = (
-  source,
-  {
-    transform = (url) => {
-      return {
-        href: url,
-        text: url,
-      }
-    },
-  } = {},
-) => {
-  return source.replace(/(?:https?|ftp|file):\/\/\S+/gm, (match) => {
-    let linkHTML = ""
-
-    const lastChar = match[match.length - 1]
-
-    // hotfix because our url regex sucks a bit
-    const endsWithSeparationChar = lastChar === ")" || lastChar === ":"
-    if (endsWithSeparationChar) {
-      match = match.slice(0, -1)
-    }
-
-    const lineAndColumnPattern = /:([0-9]+):([0-9]+)$/
-    const lineAndColumMatch = match.match(lineAndColumnPattern)
-    if (lineAndColumMatch) {
-      const lineAndColumnString = lineAndColumMatch[0]
-      const lineNumber = lineAndColumMatch[1]
-      const columnNumber = lineAndColumMatch[2]
-      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]
-        linkHTML = transform(match.slice(0, -lineString.length), {
-          line: lineNumber,
-        })
-      } else {
-        linkHTML = transform(match, {})
-      }
-    }
-    if (endsWithSeparationChar) {
-      return `${linkHTML}${lastChar}`
-    }
-    return linkHTML
-  })
-}
-
-const link = ({ href, text = href }) => `<a href="${href}">${text}</a>`
+}`

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

@@ -11,6 +11,7 @@ export const installHtmlSupervisor = ({
   logs,
   measurePerf,
   errorOverlay,
+  errorBaseUrl,
   openInEditor,
 }) => {
   const errorTransformer = null // could implement error stack remapping if needed
@@ -227,6 +228,7 @@ export const installHtmlSupervisor = ({
       const { error } = errorEvent
       displayErrorInDocument(error, {
         rootDirectoryUrl,
+        errorBaseUrl,
         openInEditor,
         url: errorEvent.filename,
         line: errorEvent.lineno,
@@ -276,21 +278,16 @@ export const installHtmlSupervisor = ({
             displayErrorInDocument(
               {
                 message,
-                stack:
-                  stack && traceMessage
-                    ? `${stack}\n\n${traceMessage}`
-                    : stack
-                    ? stack
-                    : traceMessage
-                    ? `\n${traceMessage}`
-                    : "",
+                stack,
               },
               {
                 rootDirectoryUrl,
+                errorBaseUrl,
                 openInEditor,
                 url: traceUrl,
                 line: traceLine,
                 column: traceColumn,
+                codeFrame: traceMessage,
                 reportedBy: "server",
                 requestedRessource,
               },

package/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -19,7 +19,7 @@ import {
   removeHtmlNodeText,
   setHtmlNodeText,
 } from "@jsenv/ast"
-import { generateInlineContentUrl } from "@jsenv/urls"
+import { generateInlineContentUrl, stringifyUrlSite } from "@jsenv/urls"
 
 import { requireFromJsenv } from "@jsenv/core/src/require_from_jsenv.js"
 
@@ -28,6 +28,7 @@ export const jsenvPluginHtmlSupervisor = ({
   measurePerf = false,
   errorOverlay = true,
   openInEditor = true,
+  errorBaseUrl,
 }) => {
   const htmlSupervisorSetupFileUrl = new URL(
     "./client/html_supervisor_setup.js?js_classic",
@@ -45,24 +46,60 @@ 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) {
+    serve: (request, context) => {
+      if (request.ressource.startsWith("/__open_in_editor__/")) {
+        const file = request.ressource.slice("/__open_in_editor__/".length)
+        if (!file) {
+          return {
+            status: 400,
+            body: "Missing file in url",
+          }
+        }
+        const launch = requireFromJsenv("launch-editor")
+        launch(fileURLToPath(file), () => {
+          // ignore error for now
+        })
         return {
-          status: 400,
-          body: 'Missing "file" in url search params',
+          status: 200,
+          headers: {
+            "cache-control": "no-store",
+          },
         }
       }
-      const launch = requireFromJsenv("launch-editor")
-      launch(fileURLToPath(file), () => {
-        // ignore error for now
-      })
-      return {
-        status: 200,
+      if (request.ressource.startsWith("/__get_code_frame__/")) {
+        const url = request.ressource.slice("/__get_code_frame__/".length)
+        const match = url.match(/:([0-9]+):([0-9]+)$/)
+        if (!match) {
+          return {
+            status: 400,
+            body: "Missing line and column in url",
+          }
+        }
+        const file = url.slice(0, match.index)
+        const line = parseInt(match[1])
+        const column = parseInt(match[2])
+        const urlInfo = context.urlGraph.getUrlInfo(file)
+        if (!urlInfo) {
+          return {
+            status: 404,
+          }
+        }
+        const codeFrame = stringifyUrlSite({
+          url: file,
+          line,
+          column,
+          content: urlInfo.originalContent,
+        })
+        return {
+          status: 200,
+          headers: {
+            "content-type": "text/plain",
+            "content-length": Buffer.byteLength(codeFrame),
+          },
+          body: codeFrame,
+        }
       }
+      return null
     },
     transformUrlContent: {
       html: ({ url, content }, context) => {
@@ -173,6 +210,7 @@ export const jsenvPluginHtmlSupervisor = ({
       installHtmlSupervisor(${JSON.stringify(
         {
           rootDirectoryUrl: context.rootDirectoryUrl,
+          errorBaseUrl,
           logs,
           measurePerf,
           errorOverlay,