@jsenv/core 27.3.3 → 27.5.0

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,9 +21,13 @@ 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,
+  errorOverlay = true,
+  openInEditor = true,
 }) => {
   const htmlSupervisorSetupFileUrl = new URL(
     "./client/html_supervisor_setup.js?js_classic",
@@ -40,30 +45,47 @@ 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 = []
 
         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,
             columnEnd,
           })
-          const [inlineScriptReference] = referenceUtils.foundInline({
+          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,
@@ -72,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
@@ -91,7 +118,7 @@ export const jsenvPluginHtmlSupervisor = ({
           })
           scriptsToSupervise.push({
             node,
-            type: scriptCategory,
+            type,
             src,
             defer,
             async,
@@ -101,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")
@@ -128,11 +155,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({
@@ -144,8 +172,11 @@ export const jsenvPluginHtmlSupervisor = ({
       }
       installHtmlSupervisor(${JSON.stringify(
         {
+          rootDirectoryUrl: context.rootDirectoryUrl,
           logs,
           measurePerf,
+          errorOverlay,
+          openInEditor,
         },
         null,
         "        ",
@@ -153,11 +184,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({
@@ -227,7 +259,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