@jsenv/core 25.1.1 → 25.2.0

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -1,7 +1,6 @@
 import {
   resolveUrl,
   urlToFilename,
-  urlToBasename,
   urlToRelativeUrl,
   urlIsInsideOf,
 } from "@jsenv/filesystem"
@@ -18,6 +17,7 @@ import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { getDefaultImportmap } from "@jsenv/core/src/internal/import-resolution/importmap_default.js"
 
 import {
+  generateSourcemapUrl,
   setJavaScriptSourceMappingUrl,
   sourcemapToBase64Url,
 } from "../sourceMappingURLUtils.js"
@@ -34,44 +34,42 @@ import {
   removeHtmlNodeAttribute,
   setHtmlNodeText,
   visitHtmlAst,
-  replaceHtmlNode,
+  addHtmlNodeAttribute,
 } from "./compileHtml.js"
-import { generateCompiledFileAssetUrl } from "./compile-directory/compile-asset.js"
+import { generateCompilationAssetUrl } from "./compile-directory/compile-asset.js"
 
 export const compileHtml = async ({
   // cancellationToken,
   logger,
-  // request,
-  code,
   url,
   compiledUrl,
   projectDirectoryUrl,
+  jsenvRemoteDirectory,
   compileServerOrigin,
   outDirectoryRelativeUrl,
-  compileId,
 
+  compileId,
   babelPluginMap,
   moduleOutFormat,
   importMetaFormat,
   topLevelAwait,
-
-  sourcemapMethod,
-
   jsenvScriptInjection = true,
   jsenvEventSourceClientInjection,
   jsenvToolbarInjection,
   onHtmlImportmapInfo,
+
+  sourcemapMethod,
+  code,
 }) => {
+  const compileDirectoryUrl = `${projectDirectoryUrl}${outDirectoryRelativeUrl}${compileId}/`
   const browserRuntimeBuildUrlRelativeToProject = urlToRelativeUrl(
     BROWSER_RUNTIME_BUILD_URL,
     projectDirectoryUrl,
   )
-
   const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
     EVENT_SOURCE_CLIENT_BUILD_URL,
     projectDirectoryUrl,
   )
-
   const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
     TOOLBAR_INJECTOR_BUILD_URL,
     projectDirectoryUrl,
@@ -79,11 +77,6 @@ export const compileHtml = async ({
 
   // ideally we should try/catch html syntax error
   const htmlAst = parseHtmlString(code)
-
-  if (moduleOutFormat !== "esmodule") {
-    await mutateRessourceHints(htmlAst)
-  }
-
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
       ...(jsenvScriptInjection
@@ -140,70 +133,45 @@ export const compileHtml = async ({
       specifier,
     })
   }
-
-  const importmapInfo = await visitImportmapScript({
+  if (moduleOutFormat !== "esmodule") {
+    const ressourceHints = collectRessourceHints(htmlAst)
+    await visitRessourceHints({
+      ressourceHints,
+      addHtmlMutation,
+    })
+  }
+  await visitImportmapScript({
+    htmlAst,
     logger,
     url,
     compiledUrl,
     projectDirectoryUrl,
-    compileId,
-    outDirectoryRelativeUrl,
+    compileDirectoryUrl,
+    moduleOutFormat,
     scripts,
+    addHtmlMutation,
     addHtmlSourceFile,
+    onHtmlImportmapInfo,
   })
-  const importmap = (await importmapInfo.load()) || {}
-  const importmapAsText = JSON.stringify(importmap, null, "  ")
-  importmapInfo.inlinedFrom = importmapInfo.url
-  importmapInfo.text = importmapAsText
-  addHtmlMutation(() => {
-    if (importmapInfo.needsInjection) {
-      manipulateHtmlAst(htmlAst, {
-        scriptInjections: [
-          {
-            type:
-              moduleOutFormat === "systemjs"
-                ? "systemjs-importmap"
-                : "importmap",
-            // in case there is no importmap, force the presence
-            // so that '@jsenv/core/' are still remapped
-            text: importmapAsText,
-          },
-        ],
-      })
-    } else {
-      replaceHtmlNode(
-        importmapInfo.script,
-        `<script type="${
-          moduleOutFormat === "systemjs" ? "systemjs-importmap" : "importmap"
-        }">${importmapAsText}</script>`,
-        {
-          attributesToIgnore: ["src"],
-        },
-      )
-    }
-  })
-  onHtmlImportmapInfo({
-    htmlUrl: url,
-    importmapInfo,
-  })
-
   await visitScripts({
     logger,
     projectDirectoryUrl,
+    jsenvRemoteDirectory,
     compileServerOrigin,
     url,
     compiledUrl,
-    scripts,
-    addHtmlSourceFile,
-    addHtmlAssetGenerator,
-    addHtmlMutation,
-    addHtmlDependency,
 
     babelPluginMap,
     moduleOutFormat,
     importMetaFormat,
     topLevelAwait,
     sourcemapMethod,
+
+    scripts,
+    addHtmlSourceFile,
+    addHtmlAssetGenerator,
+    addHtmlMutation,
+    addHtmlDependency,
   })
   await Promise.all(
     htmlAssetGenerators.map(async (htmlAssetGenerator) => {
@@ -215,13 +183,11 @@ export const compileHtml = async ({
     }),
   )
   htmlAssetGenerators.length = 0
-
   htmlMutations.forEach((htmlMutation) => {
     htmlMutation()
   })
   htmlMutations.length = 0
   const htmlAfterTransformation = stringifyHtmlAst(htmlAst)
-
   return {
     contentType: "text/html",
     compiledSource: htmlAfterTransformation,
@@ -235,35 +201,95 @@ export const compileHtml = async ({
   }
 }
 
+// transform <link type="modulepreload"> into <link type="preload">
+// also remove integrity attributes because we don't know in advance
+// the result of the file compilation
+const visitRessourceHints = async ({ ressourceHints, addHtmlMutation }) => {
+  await Promise.all(
+    ressourceHints.map(async (ressourceHint) => {
+      const hrefAttribute = getHtmlNodeAttributeByName(ressourceHint, "href")
+      const href = hrefAttribute ? hrefAttribute.value : ""
+      if (!href) {
+        return
+      }
+      const integrityAttribute = getHtmlNodeAttributeByName(
+        ressourceHint,
+        "integrity",
+      )
+      if (integrityAttribute) {
+        addHtmlMutation(() => {
+          removeHtmlNodeAttribute(ressourceHint, integrityAttribute)
+        })
+      }
+      const relAttribute = getHtmlNodeAttributeByName(ressourceHint, "rel")
+      const asAttribute = getHtmlNodeAttributeByName(ressourceHint, "as")
+      // - "modulepreload" -> "preload" because it's now regular js script
+      if (ressourceHint.rel === "modulepreload") {
+        addHtmlMutation(() => {
+          relAttribute.value = "preload"
+          if (asAttribute) {
+            asAttribute.value = "script"
+          } else {
+            addHtmlNodeAttribute(ressourceHint, { name: "as", value: "script" })
+          }
+        })
+        return
+      }
+      // if (asAttribute && asAttribute.value === "script") {
+      //   addHtmlMutation(() => {
+      //     replaceHtmlNode(htmlNode, `<link as="script" />`)
+      //   })
+      //   return
+      // }
+    }),
+  )
+}
+
 const visitImportmapScript = async ({
+  htmlAst,
   logger,
   url,
   compiledUrl,
   projectDirectoryUrl,
-  compileId,
-  outDirectoryRelativeUrl,
+  compileDirectoryUrl,
+  moduleOutFormat,
   scripts,
+  addHtmlMutation,
   addHtmlSourceFile,
+  onHtmlImportmapInfo,
 }) => {
   const importmapScripts = scripts.filter((script) => {
     const typeAttribute = getHtmlNodeAttributeByName(script, "type")
     const type = typeAttribute ? typeAttribute.value : "application/javascript"
     return type === "importmap"
   })
+  // in case there is no importmap, force the presence
+  // so that '@jsenv/core/' are still remapped
   if (importmapScripts.length === 0) {
-    return {
-      needsInjection: true,
+    const defaultImportMap = getDefaultImportmap(compiledUrl, {
+      projectDirectoryUrl,
+      compileDirectoryUrl,
+    })
+    const defaultImportMapAsText = JSON.stringify(defaultImportMap, null, "  ")
+    onHtmlImportmapInfo({
       url: compiledUrl,
-      load: () => {
-        const defaultImportMap = getDefaultImportmap(compiledUrl, {
-          projectDirectoryUrl,
-          compileDirectoryUrl: `${projectDirectoryUrl}${outDirectoryRelativeUrl}${compileId}/`,
-        })
-        return defaultImportMap
-      },
-    }
+      text: defaultImportMapAsText,
+    })
+    addHtmlMutation(() => {
+      manipulateHtmlAst(htmlAst, {
+        scriptInjections: [
+          {
+            type:
+              moduleOutFormat === "systemjs"
+                ? "systemjs-importmap"
+                : "importmap",
+            text: defaultImportMapAsText,
+          },
+        ],
+      })
+    })
+    return
   }
-
   if (importmapScripts.length > 1) {
     logger.error("HTML file must contain max 1 importmap")
   }
@@ -272,94 +298,131 @@ const visitImportmapScript = async ({
   const src = srcAttribute ? srcAttribute.value : ""
   if (src) {
     const importmapUrl = resolveUrl(src, url)
-    const importmapInfo = {
-      script: firstImportmapScript,
+    const importMapResponse = await fetchUrl(importmapUrl)
+    let importmap
+    if (importMapResponse.status === 200) {
+      const importmapAsText = await importMapResponse.text()
+      addHtmlSourceFile({
+        url: importmapUrl,
+        content: importmapAsText,
+      })
+      let htmlImportmap = JSON.parse(importmapAsText)
+      importmap = moveImportMap(htmlImportmap, importmapUrl, url)
+    } else {
+      logger.warn(
+        createDetailedMessage(
+          importMapResponse.status === 404
+            ? `importmap script file cannot be found.`
+            : `importmap script file unexpected response status (${importMapResponse.status}).`,
+          {
+            "importmap url": importmapUrl,
+            "html url": url,
+          },
+        ),
+      )
+      importmap = {}
+    }
+    const importmapAsText = JSON.stringify(importmap, null, "  ")
+    onHtmlImportmapInfo({
       url: importmapUrl,
-      load: async () => {
-        const importMapResponse = await fetchUrl(importmapUrl)
-        if (importMapResponse.status === 200) {
-          const importmapAsText = await importMapResponse.text()
-          addHtmlSourceFile({
-            url: importmapUrl,
-            content: importmapAsText,
-          })
-          let htmlImportmap = JSON.parse(importmapAsText)
-          htmlImportmap = moveImportMap(htmlImportmap, importmapUrl, url)
-          return htmlImportmap
-        }
-        logger.warn(
-          createDetailedMessage(
-            importMapResponse.status === 404
-              ? `importmap script file cannot be found.`
-              : `importmap script file unexpected response status (${importMapResponse.status}).`,
-            {
-              "importmap url": importmapInfo.url,
-              "html url": url,
-            },
-          ),
+      text: importmapAsText,
+    })
+    addHtmlMutation(() => {
+      removeHtmlNodeAttribute(firstImportmapScript, srcAttribute)
+      setHtmlNodeText(firstImportmapScript, importmapAsText)
+      if (moduleOutFormat === "systemjs") {
+        const typeAttribute = getHtmlNodeAttributeByName(
+          firstImportmapScript,
+          "type",
         )
-        return null
-      },
-    }
-    return importmapInfo
+        typeAttribute.value = "systemjs-importmap"
+      }
+    })
+    return
   }
-  const importmapInfo = {
-    script: firstImportmapScript,
+
+  const jsenvImportmap = getDefaultImportmap(compiledUrl, {
+    projectDirectoryUrl,
+    compileDirectoryUrl,
+  })
+  const htmlImportmap = JSON.parse(
+    getHtmlNodeTextNode(firstImportmapScript).value,
+  )
+  const importmap = composeTwoImportMaps(jsenvImportmap, htmlImportmap)
+  const importmapAsText = JSON.stringify(importmap, null, "  ")
+  onHtmlImportmapInfo({
     url: compiledUrl,
-    load: () => {
-      const jsenvImportmap = getDefaultImportmap(compiledUrl, {
-        projectDirectoryUrl,
-        compileDirectoryUrl: `${projectDirectoryUrl}${compileId}/${outDirectoryRelativeUrl}`,
-      })
-      const htmlImportmap = JSON.parse(
-        getHtmlNodeTextNode(firstImportmapScript).value,
+    text: importmapAsText,
+  })
+  addHtmlMutation(() => {
+    removeHtmlNodeAttribute(firstImportmapScript, srcAttribute)
+    setHtmlNodeText(firstImportmapScript, importmapAsText)
+    if (moduleOutFormat === "systemjs") {
+      const typeAttribute = getHtmlNodeAttributeByName(
+        firstImportmapScript,
+        "type",
       )
-      const importmap = composeTwoImportMaps(jsenvImportmap, htmlImportmap)
-      return importmap
-    },
-  }
-  return importmapInfo
+      typeAttribute.value = "systemjs-importmap"
+    }
+  })
+  return
 }
 
 const visitScripts = async ({
   logger,
   projectDirectoryUrl,
   compileServerOrigin,
+  jsenvRemoteDirectory,
   url,
   compiledUrl,
-  scripts,
-  addHtmlSourceFile,
-  addHtmlAssetGenerator,
-  addHtmlMutation,
-  addHtmlDependency,
 
   babelPluginMap,
   moduleOutFormat,
   importMetaFormat,
   topLevelAwait,
   sourcemapMethod,
+
+  scripts,
+  addHtmlSourceFile,
+  addHtmlAssetGenerator,
+  addHtmlMutation,
+  addHtmlDependency,
 }) => {
   scripts.forEach((script) => {
     const typeAttribute = getHtmlNodeAttributeByName(script, "type")
     const type = typeAttribute ? typeAttribute.value : "application/javascript"
     const srcAttribute = getHtmlNodeAttributeByName(script, "src")
     const src = srcAttribute ? srcAttribute.value : ""
+    const integrityAttribute = getHtmlNodeAttributeByName(script, "integrity")
     const textNode = getHtmlNodeTextNode(script)
-
     if (type === "module") {
       if (src) {
         addHtmlMutation(() => {
           if (moduleOutFormat === "systemjs") {
             removeHtmlNodeAttribute(script, typeAttribute)
           }
+          if (integrityAttribute) {
+            removeHtmlNodeAttribute(script, integrityAttribute)
+          }
           removeHtmlNodeAttribute(script, srcAttribute)
           const jsenvMethod =
             moduleOutFormat === "systemjs"
               ? "executeFileUsingSystemJs"
               : "executeFileUsingDynamicImport"
+          let specifier
+          if (
+            jsenvRemoteDirectory.isRemoteUrl(src) &&
+            !jsenvRemoteDirectory.isPreservedUrl(src)
+          ) {
+            const fileUrl = jsenvRemoteDirectory.fileUrlFromRemoteUrl(src)
+            const fileUrlRelativeToHtml = urlToRelativeUrl(fileUrl, url)
+            specifier = `./${fileUrlRelativeToHtml}`
+          } else {
+            specifier = src
+          }
           setHtmlNodeText(
             script,
-            `window.__jsenv__.${jsenvMethod}(${JSON.stringify(src)})`,
+            `window.__jsenv__.${jsenvMethod}(${JSON.stringify(specifier)})`,
           )
         })
         return
@@ -368,23 +431,25 @@ const visitScripts = async ({
       const scriptId = getIdForInlineHtmlNode(script, scripts)
       const inlineScriptName = `${scriptId}.js`
       const scriptOriginalUrl = resolveUrl(inlineScriptName, url)
-      const scriptCompiledUrl = generateCompiledFileAssetUrl(
+      const scriptCompiledUrl = generateCompilationAssetUrl(
         compiledUrl,
         inlineScriptName,
       )
       addHtmlAssetGenerator(async () => {
         return transformHtmlScript({
           projectDirectoryUrl,
+          jsenvRemoteDirectory,
           url: scriptOriginalUrl,
           compiledUrl: scriptCompiledUrl,
-          code: textNode.value,
 
           type: "module",
           babelPluginMap,
           moduleOutFormat,
           importMetaFormat,
           topLevelAwait,
+
           sourcemapMethod,
+          code: textNode.value,
         })
       })
       const specifier = `./${urlToRelativeUrl(scriptCompiledUrl, compiledUrl)}`
@@ -408,7 +473,6 @@ const visitScripts = async ({
       })
       return
     }
-
     if (type === "application/javascript" || type === "text/javascript") {
       if (src) {
         const htmlServerUrl = url.replace(
@@ -428,7 +492,7 @@ const visitScripts = async ({
           return
         }
 
-        const scriptCompiledUrl = generateCompiledFileAssetUrl(
+        const scriptCompiledUrl = generateCompilationAssetUrl(
           compiledUrl,
           urlToFilename(scriptOriginalUrl),
         )
@@ -459,19 +523,24 @@ const visitScripts = async ({
           })
           return transformHtmlScript({
             projectDirectoryUrl,
+            jsenvRemoteDirectory,
             url: scriptOriginalUrl,
             compiledUrl: scriptCompiledUrl,
-            code: scriptAsText,
 
             type: "classic",
             babelPluginMap,
             moduleOutFormat,
             importMetaFormat,
             topLevelAwait,
+
             sourcemapMethod,
+            code: scriptAsText,
           })
         })
         addHtmlMutation(() => {
+          if (integrityAttribute) {
+            removeHtmlNodeAttribute(script, integrityAttribute)
+          }
           srcAttribute.value = `./${urlToRelativeUrl(
             scriptCompiledUrl,
             compiledUrl,
@@ -482,22 +551,24 @@ const visitScripts = async ({
       const scriptId = getIdForInlineHtmlNode(script, scripts)
       const inlineScriptName = `${scriptId}.js`
       const scriptOriginalUrl = resolveUrl(inlineScriptName, url)
-      const scriptCompiledUrl = generateCompiledFileAssetUrl(
+      const scriptCompiledUrl = generateCompilationAssetUrl(
         compiledUrl,
         inlineScriptName,
       )
       addHtmlAssetGenerator(async () => {
         const htmlAssets = await transformHtmlScript({
           projectDirectoryUrl,
+          jsenvRemoteDirectory,
           url: scriptOriginalUrl,
           compiledUrl: scriptCompiledUrl,
-          code: textNode.value,
 
           type: "classic",
           babelPluginMap,
           moduleOutFormat,
           importMetaFormat,
           topLevelAwait,
+
+          code: textNode.value,
           sourcemapMethod,
         })
         addHtmlMutation(() => {
@@ -512,30 +583,34 @@ const visitScripts = async ({
 
 const transformHtmlScript = async ({
   projectDirectoryUrl,
+  jsenvRemoteDirectory,
   url,
   compiledUrl,
-  code,
-  type,
 
+  type,
   babelPluginMap,
   moduleOutFormat,
   importMetaFormat,
   topLevelAwait,
+
+  code,
   sourcemapMethod,
 }) => {
   let transformResult
   try {
     transformResult = await transformJs({
-      code,
+      projectDirectoryUrl,
+      jsenvRemoteDirectory,
       url,
       compiledUrl,
-      projectDirectoryUrl,
 
       babelPluginMap,
       moduleOutFormat: type === "module" ? moduleOutFormat : "global",
       importMetaFormat,
       topLevelAwait: type === "module" ? topLevelAwait : false,
       babelHelpersInjectionAsImport: type === "module" ? undefined : false,
+
+      code,
     })
   } catch (e) {
     // If there is a syntax error in inline script
@@ -553,10 +628,7 @@ const transformHtmlScript = async ({
 
   code = transformResult.code
   let map = transformResult.map
-  const sourcemapUrl = resolveUrl(
-    `${urlToBasename(compiledUrl)}.map`,
-    compiledUrl,
-  )
+  const sourcemapUrl = generateSourcemapUrl(compiledUrl)
   if (sourcemapMethod === "inline") {
     code = setJavaScriptSourceMappingUrl(code, sourcemapToBase64Url(map))
     return [
@@ -580,11 +652,12 @@ const transformHtmlScript = async ({
   ]
 }
 
-// transform <link type="modulepreload"> into <link type="preload">
-const mutateRessourceHints = async (htmlAst) => {
+const collectRessourceHints = (htmlAst) => {
   const ressourceHints = []
   visitHtmlAst(htmlAst, (htmlNode) => {
-    if (htmlNode.nodeName !== "link") return
+    if (htmlNode.nodeName !== "link") {
+      return
+    }
     const relAttribute = getHtmlNodeAttributeByName(htmlNode, "rel")
     const rel = relAttribute ? relAttribute.value : ""
     const isRessourceHint = [
@@ -594,44 +667,10 @@ const mutateRessourceHints = async (htmlAst) => {
       "preload",
       "modulepreload",
     ].includes(rel)
-    if (!isRessourceHint) return
-
-    ressourceHints.push({ rel, htmlNode })
+    if (!isRessourceHint) {
+      return
+    }
+    ressourceHints.push(htmlNode)
   })
-
-  const mutations = []
-  await Promise.all(
-    ressourceHints.map(async (ressourceHint) => {
-      const hrefAttribute = getHtmlNodeAttributeByName(
-        ressourceHint.htmlNode,
-        "href",
-      )
-      const href = hrefAttribute ? hrefAttribute.value : ""
-      if (!href) return
-
-      // - "modulepreload" -> "preload" because it's now regular js script
-      const asAttribute = getHtmlNodeAttributeByName(
-        ressourceHint.htmlNode,
-        "as",
-      )
-
-      if (ressourceHint.rel === "modulepreload") {
-        mutations.push(() => {
-          replaceHtmlNode(
-            ressourceHint.htmlNode,
-            `<link rel="preload" as="script" />`,
-          )
-        })
-        return
-      }
-
-      if (asAttribute && asAttribute.value === "script") {
-        mutations.push(() => {
-          replaceHtmlNode(ressourceHint.htmlNode, `<link as="script" />`)
-        })
-        return
-      }
-    }),
-  )
-  mutations.forEach((mutation) => mutation())
+  return ressourceHints
 }