@jsenv/core 27.4.0 → 27.5.2

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

@@ -19,13 +19,16 @@ 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"
 
 export const jsenvPluginHtmlSupervisor = ({
   logs = false,
   measurePerf = false,
+  errorOverlay = true,
+  openInEditor = true,
+  errorBaseUrl,
 }) => {
   const htmlSupervisorSetupFileUrl = new URL(
     "./client/html_supervisor_setup.js?js_classic",
@@ -43,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) => {
@@ -68,14 +107,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 +122,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 +131,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 +155,7 @@ export const jsenvPluginHtmlSupervisor = ({
           })
           scriptsToSupervise.push({
             node,
-            type: scriptCategory,
+            type,
             src,
             defer,
             async,
@@ -123,8 +165,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 +209,12 @@ export const jsenvPluginHtmlSupervisor = ({
       }
       installHtmlSupervisor(${JSON.stringify(
         {
+          rootDirectoryUrl: context.rootDirectoryUrl,
+          errorBaseUrl,
           logs,
           measurePerf,
-          rootDirectoryUrl: context.rootDirectoryUrl,
+          errorOverlay,
+          openInEditor,
         },
         null,
         "        ",
@@ -252,7 +297,7 @@ const generateCodeToSuperviseScript = ({
     integrity,
     crossorigin,
   })
-  if (type === "module") {
+  if (type === "js_module") {
     return `
       import { superviseScriptTypeModule } from ${htmlSupervisorInstallerSpecifier}
       superviseScriptTypeModule(${paramsAsJson})

package/src/plugins/inline/jsenv_plugin_html_inline_content.js

@@ -20,129 +20,109 @@ export const jsenvPluginHtmlInlineContent = ({ analyzeConvertedScripts }) => {
       html: async (urlInfo, context) => {
         const htmlAst = parseHtmlString(urlInfo.content)
         const actions = []
-        const handleInlineStyle = (node) => {
-          const htmlNodeText = getHtmlNodeText(node)
-          if (!htmlNodeText) {
-            return
-          }
-          actions.push(async () => {
-            const { line, column, lineEnd, columnEnd, isOriginal } =
-              getHtmlNodePosition(node, {
-                preferOriginal: true,
+        visitHtmlNodes(htmlAst, {
+          style: (styleNode) => {
+            const styleNodeText = getHtmlNodeText(styleNode)
+            if (!styleNodeText) {
+              return
+            }
+            actions.push(async () => {
+              const { line, column, lineEnd, columnEnd, isOriginal } =
+                getHtmlNodePosition(styleNode, {
+                  preferOriginal: true,
+                })
+              const inlineStyleUrl = generateInlineContentUrl({
+                url: urlInfo.url,
+                extension: ".css",
+                line,
+                column,
+                lineEnd,
+                columnEnd,
               })
-            const inlineStyleUrl = generateInlineContentUrl({
-              url: urlInfo.url,
-              extension: ".css",
-              line,
-              column,
-              lineEnd,
-              columnEnd,
-            })
-            const [inlineStyleReference, inlineStyleUrlInfo] =
-              context.referenceUtils.foundInline({
-                type: "link_href",
-                expectedType: "css",
-                isOriginalPosition: isOriginal,
-                // we remove 1 to the line because imagine the following html:
-                // <style>body { color: red; }</style>
-                // -> content starts same line as <style>
-                specifierLine: line - 1,
-                specifierColumn: column,
-                specifier: inlineStyleUrl,
-                contentType: "text/css",
-                content: htmlNodeText,
+              const [inlineStyleReference, inlineStyleUrlInfo] =
+                context.referenceUtils.foundInline({
+                  node: styleNode,
+                  type: "link_href",
+                  expectedType: "css",
+                  isOriginalPosition: isOriginal,
+                  // we remove 1 to the line because imagine the following html:
+                  // <style>body { color: red; }</style>
+                  // -> content starts same line as <style>
+                  specifierLine: line - 1,
+                  specifierColumn: column,
+                  specifier: inlineStyleUrl,
+                  contentType: "text/css",
+                  content: styleNodeText,
+                })
+              await context.cook(inlineStyleUrlInfo, {
+                reference: inlineStyleReference,
               })
-            await context.cook(inlineStyleUrlInfo, {
-              reference: inlineStyleReference,
-            })
-            setHtmlNodeText(node, inlineStyleUrlInfo.content)
-            setHtmlNodeAttributes(node, {
-              "generated-by": "jsenv:html_inline_content",
-            })
-          })
-        }
-        const handleInlineScript = (node) => {
-          const htmlNodeText = getHtmlNodeText(node)
-          if (!htmlNodeText) {
-            return
-          }
-          // If the inline script was already handled by an other plugin, ignore it
-          // - we want to preserve inline scripts generated by html supervisor during dev
-          // - we want to avoid cooking twice a script during build
-          const generatedBy = getHtmlNodeAttribute(node, "generated-by")
-          if (
-            generatedBy === "jsenv:as_js_classic_html" &&
-            !analyzeConvertedScripts
-          ) {
-            return
-          }
-          if (generatedBy === "jsenv:html_supervisor") {
-            return
-          }
-          actions.push(async () => {
-            const scriptCategory = analyzeScriptNode(node)
-            const { line, column, lineEnd, columnEnd, isOriginal } =
-              getHtmlNodePosition(node, {
-                preferOriginal: true,
+              setHtmlNodeText(styleNode, inlineStyleUrlInfo.content)
+              setHtmlNodeAttributes(styleNode, {
+                "generated-by": "jsenv:html_inline_content",
               })
-            // from MDN about [type] attribute:
-            // "Any other value: The embedded content is treated as a data block
-            // which won't be processed by the browser. Developers must use a valid MIME type
-            // that is not a JavaScript MIME type to denote data blocks.
-            // The src attribute will be ignored."
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
-            const isJs =
-              scriptCategory === "classic" || scriptCategory === "module"
-            const isImportmap = scriptCategory === "importmap"
-            const contentType = isJs
-              ? "text/javascript"
-              : isImportmap
-              ? "application/importmap+json"
-              : scriptCategory
-
-            let inlineScriptUrl = generateInlineContentUrl({
-              url: urlInfo.url,
-              extension: CONTENT_TYPE.asFileExtension(contentType),
-              line,
-              column,
-              lineEnd,
-              columnEnd,
             })
-            const [inlineScriptReference, inlineScriptUrlInfo] =
-              context.referenceUtils.foundInline({
-                node,
-                type: "script_src",
-                expectedType: {
-                  classic: "js_classic",
-                  module: "js_module",
-                  importmap: "importmap",
-                }[scriptCategory],
-                // we remove 1 to the line because imagine the following html:
-                // <script>console.log('ok')</script>
-                // -> content starts same line as <script>
-                specifierLine: line - 1,
-                specifierColumn: column,
-                isOriginalPosition: isOriginal,
-                specifier: inlineScriptUrl,
-                contentType,
-                content: htmlNodeText,
+          },
+          script: (scriptNode) => {
+            const scriptNodeText = getHtmlNodeText(scriptNode)
+            if (!scriptNodeText) {
+              return
+            }
+            // If the inline script was already handled by an other plugin, ignore it
+            // - we want to preserve inline scripts generated by html supervisor during dev
+            // - we want to avoid cooking twice a script during build
+            const generatedBy = getHtmlNodeAttribute(scriptNode, "generated-by")
+            if (
+              generatedBy === "jsenv:as_js_classic_html" &&
+              !analyzeConvertedScripts
+            ) {
+              return
+            }
+            if (generatedBy === "jsenv:html_supervisor") {
+              return
+            }
+            actions.push(async () => {
+              const { type, contentType, extension } =
+                analyzeScriptNode(scriptNode)
+              const { line, column, lineEnd, columnEnd, isOriginal } =
+                getHtmlNodePosition(scriptNode, {
+                  preferOriginal: true,
+                })
+              let inlineScriptUrl = generateInlineContentUrl({
+                url: urlInfo.url,
+                extension:
+                  extension || CONTENT_TYPE.asFileExtension(contentType),
+                line,
+                column,
+                lineEnd,
+                columnEnd,
+              })
+              const [inlineScriptReference, inlineScriptUrlInfo] =
+                context.referenceUtils.foundInline({
+                  node: scriptNode,
+                  type: "script_src",
+                  expectedType: type,
+                  // we remove 1 to the line because imagine the following html:
+                  // <script>console.log('ok')</script>
+                  // -> content starts same line as <script>
+                  specifierLine: line - 1,
+                  specifierColumn: column,
+                  isOriginalPosition: isOriginal,
+                  specifier: inlineScriptUrl,
+                  contentType,
+                  content: scriptNodeText,
+                })
+              await context.cook(inlineScriptUrlInfo, {
+                reference: inlineScriptReference,
+              })
+              setHtmlNodeText(scriptNode, inlineScriptUrlInfo.content)
+              setHtmlNodeAttributes(scriptNode, {
+                "generated-by": "jsenv:html_inline_content",
+                ...(extension
+                  ? { type: type === "js_module" ? "module" : undefined }
+                  : {}),
               })
-
-            await context.cook(inlineScriptUrlInfo, {
-              reference: inlineScriptReference,
-            })
-            setHtmlNodeText(node, inlineScriptUrlInfo.content)
-            setHtmlNodeAttributes(node, {
-              "generated-by": "jsenv:html_inline_content",
             })
-          })
-        }
-        visitHtmlNodes(htmlAst, {
-          style: (node) => {
-            handleInlineStyle(node)
-          },
-          script: (node) => {
-            handleInlineScript(node)
           },
         })
         if (actions.length === 0) {

package/src/plugins/node_esm_resolution/jsenv_plugin_node_esm_resolution.js

@@ -17,72 +17,78 @@ import {
 } from "@jsenv/node-esm-resolution"
 
 export const jsenvPluginNodeEsmResolution = ({
-  rootDirectoryUrl,
-  urlGraph,
-  runtimeCompat,
   packageConditions,
   filesInvalidatingCache = ["package.json", "package-lock.json"],
 }) => {
-  const nodeRuntimeEnabled = Object.keys(runtimeCompat).includes("node")
-  // https://nodejs.org/api/esm.html#resolver-algorithm-specification
-  packageConditions = packageConditions || [
-    ...readCustomConditionsFromProcessArgs(),
-    nodeRuntimeEnabled ? "node" : "browser",
-    "import",
-  ]
-
-  const packageScopesCache = new Map()
-  const lookupPackageScope = (url) => {
-    const fromCache = packageScopesCache.get(url)
-    if (fromCache) {
-      return fromCache
-    }
-    const packageScope = defaultLookupPackageScope(url)
-    packageScopesCache.set(url, packageScope)
-    return packageScope
-  }
-  const packageJsonsCache = new Map()
-  const readPackageJson = (url) => {
-    const fromCache = packageJsonsCache.get(url)
-    if (fromCache) {
-      return fromCache
-    }
-    const packageJson = defaultReadPackageJson(url)
-    packageJsonsCache.set(url, packageJson)
-    return packageJson
-  }
-
   const unregisters = []
-  const onFileChange = () => {
-    packageScopesCache.clear()
-    packageJsonsCache.clear()
-    urlGraph.urlInfoMap.forEach((urlInfo) => {
-      if (urlInfo.dependsOnPackageJson) {
-        urlGraph.considerModified(urlInfo)
-      }
-    })
-  }
-  filesInvalidatingCache.forEach((file) => {
-    const unregister = registerFileLifecycle(new URL(file, rootDirectoryUrl), {
-      added: () => {
-        onFileChange()
-      },
-      updated: () => {
-        onFileChange()
-      },
-      removed: () => {
-        onFileChange()
-      },
-      keepProcessAlive: false,
-    })
-    unregisters.push(unregister)
-  })
+  let lookupPackageScope // defined in "init"
+  let readPackageJson // defined in "init"
 
   return {
     name: "jsenv:node_esm_resolution",
     appliesDuring: "*",
+    init: ({ rootDirectoryUrl, scenario, runtimeCompat, urlGraph }) => {
+      const nodeRuntimeEnabled = Object.keys(runtimeCompat).includes("node")
+      // https://nodejs.org/api/esm.html#resolver-algorithm-specification
+      packageConditions = packageConditions || [
+        ...readCustomConditionsFromProcessArgs(),
+        nodeRuntimeEnabled ? "node" : "browser",
+        "import",
+      ]
+
+      const packageScopesCache = new Map()
+      lookupPackageScope = (url) => {
+        const fromCache = packageScopesCache.get(url)
+        if (fromCache) {
+          return fromCache
+        }
+        const packageScope = defaultLookupPackageScope(url)
+        packageScopesCache.set(url, packageScope)
+        return packageScope
+      }
+      const packageJsonsCache = new Map()
+      readPackageJson = (url) => {
+        const fromCache = packageJsonsCache.get(url)
+        if (fromCache) {
+          return fromCache
+        }
+        const packageJson = defaultReadPackageJson(url)
+        packageJsonsCache.set(url, packageJson)
+        return packageJson
+      }
+
+      if (scenario === "dev") {
+        const onFileChange = () => {
+          packageScopesCache.clear()
+          packageJsonsCache.clear()
+          urlGraph.urlInfoMap.forEach((urlInfo) => {
+            if (urlInfo.dependsOnPackageJson) {
+              urlGraph.considerModified(urlInfo)
+            }
+          })
+        }
+        filesInvalidatingCache.forEach((file) => {
+          const unregister = registerFileLifecycle(
+            new URL(file, rootDirectoryUrl),
+            {
+              added: () => {
+                onFileChange()
+              },
+              updated: () => {
+                onFileChange()
+              },
+              removed: () => {
+                onFileChange()
+              },
+              keepProcessAlive: false,
+            },
+          )
+          unregisters.push(unregister)
+        })
+      }
+    },
     resolveUrl: {
-      js_import_export: (reference) => {
+      js_import_export: (reference, context) => {
         const { parentUrl, specifier } = reference
         const { type, url } = applyNodeEsmResolution({
           conditions: packageConditions,
@@ -100,7 +106,9 @@ export const jsenvPluginNodeEsmResolution = ({
           type !== "relative_specifier" &&
           type !== "absolute_specifier" &&
           type !== "node_builtin_specifier"
-        const relatedUrlInfos = urlGraph.getRelatedUrlInfos(reference.parentUrl)
+        const relatedUrlInfos = context.urlGraph.getRelatedUrlInfos(
+          reference.parentUrl,
+        )
         relatedUrlInfos.forEach((relatedUrlInfo) => {
           if (relatedUrlInfo.dependsOnPackageJson) {
             // the url may depend due to an other reference