@jsenv/core 25.1.1 → 25.3.0

package/src/internal/building/html/parseHtmlRessource.js

@@ -17,6 +17,8 @@ Or be sure to also reference this url somewhere in the html file like
 */
 
 import { urlToFilename, urlToRelativeUrl, resolveUrl } from "@jsenv/filesystem"
+import { applyAlgoToRepresentationData } from "@jsenv/integrity"
+
 
 import {
   parseHtmlString,
@@ -32,6 +34,7 @@ import {
   stringifySrcset,
   getHtmlNodeLocation,
   removeHtmlNode,
+  addHtmlNodeAttribute,
 } from "@jsenv/core/src/internal/compiling/compileHtml.js"
 import {
   getJavaScriptSourceMappingUrl,
@@ -172,20 +175,21 @@ const regularScriptSrcVisitor = (
   if (!srcAttribute) {
     return null
   }
-
+  const integrityAttribute = getHtmlNodeAttributeByName(script, "integrity")
+  const integrity = integrityAttribute ? integrityAttribute.value : ""
   const remoteScriptReference = notifyReferenceFound({
     referenceLabel: "html script",
     contentTypeExpected: "application/javascript",
     ressourceSpecifier: srcAttribute.value,
+    integrity,
+    ...crossoriginFromHtmlNode(script),
     ...referenceLocationFromHtmlNode(script, "src"),
   })
   return ({ getUrlRelativeToImporter }) => {
     const ressource = remoteScriptReference.ressource
-
     if (ressource.isExternal) {
       return
     }
-
     if (shouldInline({ ressource, htmlNode: script })) {
       removeHtmlNodeAttribute(script, srcAttribute)
       const { bufferAfterBuild } = ressource
@@ -200,14 +204,19 @@ const regularScriptSrcVisitor = (
         const sourcemapInlineUrl = urlToRelativeUrl(sourcemapBuildUrl, htmlUrl)
         jsString = setJavaScriptSourceMappingUrl(jsString, sourcemapInlineUrl)
       }
-
       setHtmlNodeText(script, jsString)
       remoteScriptReference.inlinedCallback()
       return
     }
-
     const urlRelativeToImporter = getUrlRelativeToImporter(ressource)
     srcAttribute.value = urlRelativeToImporter
+    if (integrityAttribute) {
+      const base64Value = applyAlgoToRepresentationData(
+        "sha256",
+        ressource.bufferAfterBuild,
+      )
+      integrityAttribute.value = `sha256-${base64Value}`
+    }
   }
 }
 
@@ -233,7 +242,6 @@ const regularScriptTextNodeVisitor = (
   if (!textNode) {
     return null
   }
-
   const scriptId = getIdForInlineHtmlNode(script, scripts)
   const ressourceSpecifier = `${urlToFilename(
     htmlRessource.url,
@@ -265,25 +273,25 @@ const moduleScriptSrcVisitor = (script, { format, notifyReferenceFound }) => {
   if (!srcAttribute) {
     return null
   }
-
+  const integrityAttribute = getHtmlNodeAttributeByName(script, "integrity")
+  const integrity = integrityAttribute ? integrityAttribute.value : ""
   const remoteScriptReference = notifyReferenceFound({
     referenceLabel: "html module script",
     contentTypeExpected: "application/javascript",
     ressourceSpecifier: srcAttribute.value,
+    integrity,
+    ...crossoriginFromHtmlNode(script),
     ...referenceLocationFromHtmlNode(script, "src"),
     isJsModule: true,
   })
   return ({ getUrlRelativeToImporter }) => {
     const { ressource } = remoteScriptReference
-
     if (format === "systemjs") {
       removeHtmlNodeAttribute(script, typeAttribute)
     }
-
     if (ressource.isExternal) {
       return
     }
-
     if (shouldInline({ ressource, htmlNode: script })) {
       // here put a warning if we cannot inline importmap because it would mess
       // the remapping (note that it's feasible) but not yet supported
@@ -298,15 +306,20 @@ const moduleScriptSrcVisitor = (script, { format, notifyReferenceFound }) => {
       // with these assumptions we can force the sourcemap url
       const sourcemapUrl = `${ressource.buildRelativeUrl}.map`
       jsString = setJavaScriptSourceMappingUrl(jsString, sourcemapUrl)
-
       setHtmlNodeText(script, jsString)
       remoteScriptReference.inlinedCallback()
       return
     }
-
     const urlRelativeToImporter = getUrlRelativeToImporter(ressource)
     const relativeUrlNotation = ensureRelativeUrlNotation(urlRelativeToImporter)
     srcAttribute.value = relativeUrlNotation
+    if (integrityAttribute) {
+      const base64Value = applyAlgoToRepresentationData(
+        "sha256",
+        ressource.bufferAfterBuild,
+      )
+      integrityAttribute.value = `sha256-${base64Value}`
+    }
   }
 }
 
@@ -331,7 +344,6 @@ const moduleScriptTextNodeVisitor = (
   if (!textNode) {
     return null
   }
-
   const scriptId = getIdForInlineHtmlNode(script, scripts)
   const ressourceSpecifier = `${urlToFilename(
     htmlRessource.url,
@@ -371,24 +383,24 @@ const importmapScriptSrcVisitor = (
   if (!srcAttribute) {
     return null
   }
-
+  const integrityAttribute = getHtmlNodeAttributeByName(script, "integrity")
+  const integrity = integrityAttribute ? integrityAttribute.value : ""
   const importmapReference = notifyReferenceFound({
     referenceLabel: "html importmap",
     contentTypeExpected: "application/importmap+json",
     ressourceSpecifier: srcAttribute.value,
+    integrity,
+    ...crossoriginFromHtmlNode(script),
     ...referenceLocationFromHtmlNode(script, "src"),
   })
   return ({ getUrlRelativeToImporter }) => {
     const { ressource } = importmapReference
-
     if (format === "systemjs") {
       typeAttribute.value = "systemjs-importmap"
     }
-
     if (ressource.isExternal) {
       return
     }
-
     if (
       // for esmodule we always inline the importmap
       // as it's the only thing supported by Chrome
@@ -402,22 +414,22 @@ const importmapScriptSrcVisitor = (
       // here put a warning if we cannot inline importmap because it would mess
       // the remapping (note that it's feasible) but not yet supported
       const { bufferAfterBuild } = ressource
-
       const importmapString = String(bufferAfterBuild)
-      replaceHtmlNode(
-        script,
-        `<script>
-${importmapString}</script>`,
-        {
-          attributesToIgnore: ["src"],
-        },
-      )
+      removeHtmlNodeAttribute(script, srcAttribute)
+      setHtmlNodeText(script, importmapString)
+      removeHtmlNodeAttribute(script, integrityAttribute)
       importmapReference.inlinedCallback()
       return
     }
-
     const urlRelativeToImporter = getUrlRelativeToImporter(ressource)
     srcAttribute.value = urlRelativeToImporter
+    if (integrityAttribute) {
+      const base64Value = applyAlgoToRepresentationData(
+        "sha256",
+        ressource.bufferAfterBuild,
+      )
+      integrityAttribute.value = `sha256-${base64Value}`
+    }
   }
 }
 
@@ -442,7 +454,6 @@ const importmapScriptTextNodeVisitor = (
   if (!textNode) {
     return null
   }
-
   const importmapScriptId = getIdForInlineHtmlNode(script, scripts)
   const importmapReference = notifyReferenceFound({
     referenceLabel: "html inline importmap",
@@ -459,7 +470,6 @@ const importmapScriptTextNodeVisitor = (
     if (format === "systemjs") {
       typeAttribute.value = "systemjs-importmap"
     }
-
     const { bufferAfterBuild } = importmapReference.ressource
     textNode.value = bufferAfterBuild
   }
@@ -481,38 +491,34 @@ const linkStylesheetHrefVisitor = (
   if (relAttribute.value !== "stylesheet") {
     return null
   }
-
+  const integrityAttribute = getHtmlNodeAttributeByName(link, "integrity")
+  const integrity = integrityAttribute ? integrityAttribute.value : ""
   const cssReference = notifyReferenceFound({
     referenceLabel: "html stylesheet link",
     contentTypeExpected: "text/css",
     ressourceSpecifier: hrefAttribute.value,
+    integrity,
+    ...crossoriginFromHtmlNode(link),
     ...referenceLocationFromHtmlNode(link, "href"),
   })
-  return async ({
-    getUrlRelativeToImporter,
-    precomputeBuildRelativeUrl,
-    buildDirectoryUrl,
-  }) => {
+  return async ({ getUrlRelativeToImporter, buildDirectoryUrl }) => {
     const { ressource } = cssReference
-
     if (ressource.isExternal) {
       return
     }
-
     if (shouldInline({ ressource, htmlNode: link })) {
       const { bufferAfterBuild } = ressource
       let code = String(bufferAfterBuild)
       const { buildRelativeUrl } = ressource
       const cssBuildUrl = resolveUrl(buildRelativeUrl, buildDirectoryUrl)
-      const htmlUrl = resolveUrl(
-        precomputeBuildRelativeUrl(htmlRessource),
+      const htmlBuildUrl = resolveUrl(
+        htmlRessource.buildRelativeUrlWithoutHash,
         buildDirectoryUrl,
       )
-
       const moveResult = await moveCssUrls({
         code,
         from: cssBuildUrl,
-        to: htmlUrl,
+        to: htmlBuildUrl,
         // moveCssUrls will change the css source code
         // Ideally we should update the sourcemap referenced by css
         // to target the one after css urls are moved.
@@ -523,24 +529,38 @@ const linkStylesheetHrefVisitor = (
         sourcemapMethod: null,
       })
       code = moveResult.code
-
       const sourcemapRelativeUrl = getCssSourceMappingUrl(code)
       if (sourcemapRelativeUrl) {
         const cssBuildUrl = resolveUrl(buildRelativeUrl, buildDirectoryUrl)
         const sourcemapBuildUrl = resolveUrl(sourcemapRelativeUrl, cssBuildUrl)
-        const sourcemapInlineUrl = urlToRelativeUrl(sourcemapBuildUrl, htmlUrl)
+        const sourcemapInlineUrl = urlToRelativeUrl(
+          sourcemapBuildUrl,
+          htmlBuildUrl,
+        )
         code = setCssSourceMappingUrl(code, sourcemapInlineUrl)
       }
-
       replaceHtmlNode(link, `<style>${code}</style>`, {
-        attributesToIgnore: ["href", "rel", "as", "crossorigin", "type"],
+        attributesToIgnore: [
+          "href",
+          "rel",
+          "as",
+          "crossorigin",
+          "type",
+          "integrity",
+        ],
       })
       cssReference.inlinedCallback()
       return
     }
-
     const urlRelativeToImporter = getUrlRelativeToImporter(ressource)
     hrefAttribute.value = urlRelativeToImporter
+    if (integrityAttribute) {
+      const base64Value = applyAlgoToRepresentationData(
+        "sha256",
+        ressource.bufferAfterBuild,
+      )
+      integrityAttribute.value = `sha256-${base64Value}`
+    }
   }
 }
 
@@ -552,7 +572,6 @@ const linkHrefVisitor = (
   if (!hrefAttribute) {
     return null
   }
-
   const href = hrefAttribute.value
   const relAttribute = getHtmlNodeAttributeByName(link, "rel")
   const rel = relAttribute ? relAttribute.value : undefined
@@ -563,7 +582,6 @@ const linkHrefVisitor = (
     "preload",
     "modulepreload",
   ].includes(rel)
-
   let contentTypeExpected
   const typeAttribute = getHtmlNodeAttributeByName(link, "type")
   const type = typeAttribute ? typeAttribute.value : ""
@@ -576,19 +594,21 @@ const linkHrefVisitor = (
     contentTypeExpected = "application/javascript"
     isJsModule = true
   }
-
+  const integrityAttribute = getHtmlNodeAttributeByName(link, "integrity")
+  const integrity = integrityAttribute ? integrityAttribute.value : ""
   const linkReference = notifyReferenceFound({
     referenceLabel: rel ? `html ${rel} link href` : `html link href`,
     isRessourceHint,
     contentTypeExpected,
     ressourceSpecifier: href,
+    integrity,
+    ...crossoriginFromHtmlNode(link),
     ...referenceLocationFromHtmlNode(link, "href"),
     urlVersioningDisabled: contentTypeExpected === "application/manifest+json",
     isJsModule,
   })
   return ({ getUrlRelativeToImporter }) => {
     const { ressource } = linkReference
-
     if (isRessourceHint) {
       if (isReferencedOnlyByRessourceHint(ressource)) {
         ressourceHintNeverUsedCallback({
@@ -600,36 +620,34 @@ const linkHrefVisitor = (
         // we could remove the HTML node but better keep it untouched and let user decide what to do
         return
       }
-
       ressource.inlinedCallbacks.push(() => {
         removeHtmlNode(link)
       })
     }
-
     if (ressource.isExternal) {
       return
     }
-
     if (format === "systemjs" && rel === "modulepreload") {
       const urlRelativeToImporter = getUrlRelativeToImporter(ressource)
-      replaceHtmlNode(
-        link,
-        `<link rel="preload" href="${urlRelativeToImporter}" as="script" />`,
-      )
+      relAttribute.value = "preload"
+      hrefAttribute.value = urlRelativeToImporter
+      addHtmlNodeAttribute(link, { name: "as", value: "script" })
       return
     }
-
     if (shouldInline({ ressource, htmlNode: link })) {
-      replaceHtmlNode(
-        link,
-        `<link href="${getRessourceAsBase64Url(ressource)}" />`,
-      )
+      removeHtmlNode(link)
       linkReference.inlinedCallback()
       return
     }
-
     const urlRelativeToImporter = getUrlRelativeToImporter(ressource)
     hrefAttribute.value = urlRelativeToImporter
+    if (integrityAttribute) {
+      const base64Value = applyAlgoToRepresentationData(
+        "sha256",
+        ressource.bufferAfterBuild,
+      )
+      integrityAttribute.value = `sha256-${base64Value}`
+    }
   }
 }
 
@@ -643,7 +661,6 @@ const styleTextNodeVisitor = (
   if (!textNode) {
     return null
   }
-
   const styleId = getIdForInlineHtmlNode(style, styles)
   const inlineStyleReference = notifyReferenceFound({
     referenceLabel: "html style",
@@ -667,10 +684,10 @@ const imgSrcVisitor = (img, { notifyReferenceFound }) => {
   if (!srcAttribute) {
     return null
   }
-
   const srcReference = notifyReferenceFound({
     referenceLabel: "html img src",
     ressourceSpecifier: srcAttribute.value,
+    ...crossoriginFromHtmlNode(img),
     ...referenceLocationFromHtmlNode(img, "src"),
   })
   return ({ getUrlRelativeToImporter }) => {
@@ -688,19 +705,18 @@ const srcsetVisitor = (htmlNode, { notifyReferenceFound }) => {
   if (!srcsetAttribute) {
     return null
   }
-
   const srcsetParts = parseSrcset(srcsetAttribute.value)
   const srcsetPartsReferences = srcsetParts.map(({ specifier }, index) =>
     notifyReferenceFound({
       referenceLabel: `html srcset ${index}`,
       ressourceSpecifier: specifier,
+      ...crossoriginFromHtmlNode(htmlNode),
       ...referenceLocationFromHtmlNode(htmlNode, "srcset"),
     }),
   )
   if (srcsetParts.length === 0) {
     return null
   }
-
   return ({ getUrlRelativeToImporter }) => {
     srcsetParts.forEach((srcsetPart, index) => {
       const reference = srcsetPartsReferences[index]
@@ -721,12 +737,12 @@ const sourceSrcVisitor = (source, { notifyReferenceFound }) => {
   if (!srcAttribute) {
     return null
   }
-
   const typeAttribute = getHtmlNodeAttributeByName(source, "type")
   const srcReference = notifyReferenceFound({
     referenceLabel: "html source",
     contentTypeExpected: typeAttribute ? typeAttribute.value : undefined,
     ressourceSpecifier: srcAttribute.value,
+    ...crossoriginFromHtmlNode(source),
     ...referenceLocationFromHtmlNode(source, "src"),
   })
   return ({ getUrlRelativeToImporter }) => {
@@ -751,6 +767,15 @@ const referenceToUrl = ({ reference, htmlNode, getUrlRelativeToImporter }) => {
   return getUrlRelativeToImporter(ressource)
 }
 
+const crossoriginFromHtmlNode = (htmlNode) => {
+  const crossOriginAttribute = getHtmlNodeAttributeByName(
+    htmlNode,
+    "crossorigin",
+  )
+  const crossorigin = crossOriginAttribute ? crossOriginAttribute.value : ""
+  return { crossorigin }
+}
+
 const referenceLocationFromHtmlNode = (htmlNode, htmlAttributeName) => {
   const locInfo = getHtmlNodeLocation(htmlNode, htmlAttributeName)
   return locInfo

package/src/internal/building/js/parseJsRessource.js

@@ -1,6 +1,7 @@
 import { urlToFilename, resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
 
 import {
+  generateSourcemapUrl,
   getJavaScriptSourceMappingUrl,
   setJavaScriptSourceMappingUrl,
 } from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
@@ -32,7 +33,7 @@ export const parseJsRessource = async (
     sourcemapReference = notifyReferenceFound({
       referenceLabel: "js sourcemapping comment",
       contentType: "application/octet-stream",
-      ressourceSpecifier: `${urlToFilename(jsUrl)}.map`,
+      ressourceSpecifier: urlToRelativeUrl(generateSourcemapUrl(jsUrl), jsUrl),
       isPlaceholder: true,
       isSourcemap: true,
     })
@@ -40,7 +41,6 @@ export const parseJsRessource = async (
 
   return async ({ buildDirectoryUrl }) => {
     const sourcemapRessource = sourcemapReference.ressource
-
     let code
     let map
     if (!sourcemapRessource.isPlaceholder) {
@@ -92,15 +92,12 @@ export const parseJsRessource = async (
       jsRessource.buildRelativeUrl,
       buildDirectoryUrl,
     )
-    const sourcemapPrecomputedBuildUrl = resolveUrl(
-      `${urlToFilename(jsBuildUrl)}.map`,
-      jsBuildUrl,
-    )
+    const sourcemapPrecomputedBuildUrl = generateSourcemapUrl(jsBuildUrl)
     map.file = urlToFilename(jsBuildUrl)
     if (map.sources) {
       map.sources = map.sources.map((source) => {
         const sourceUrl = resolveUrl(source, jsUrl)
-        const sourceOriginalUrl = asOriginalUrl(sourceUrl)
+        const sourceOriginalUrl = asOriginalUrl(sourceUrl) || sourceUrl
         const sourceUrlRelativeToSourceMap = urlToRelativeUrl(
           sourceOriginalUrl,
           sourcemapPrecomputedBuildUrl,

package/src/internal/building/parseRessource.js

@@ -27,6 +27,7 @@ export const parseRessource = async (
   notifiers,
   {
     projectDirectoryUrl,
+    jsenvRemoteDirectory,
     format,
     systemJsUrl,
     asProjectUrl,
@@ -125,6 +126,7 @@ export const parseRessource = async (
 
   if (contentType === "text/css") {
     return parseCssRessource(ressource, notifiers, {
+      jsenvRemoteDirectory,
       asProjectUrl,
       asOriginalUrl,
       asOriginalServerUrl,
@@ -156,6 +158,7 @@ export const parseRessource = async (
   ) {
     return parseJsRessource(ressource, notifiers, {
       projectDirectoryUrl,
+      jsenvRemoteDirectory,
       asProjectUrl,
       asOriginalUrl,
       asOriginalServerUrl,