@jsenv/core 25.0.0 → 25.2.0

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

@@ -24,7 +24,7 @@ import {
   replaceHtmlNode,
   getHtmlNodeAttributeByName,
   stringifyHtmlAst,
-  getUniqueNameForInlineHtmlNode,
+  getIdForInlineHtmlNode,
   removeHtmlNodeAttribute,
   setHtmlNodeText,
   getHtmlNodeTextNode,
@@ -32,6 +32,7 @@ import {
   stringifySrcset,
   getHtmlNodeLocation,
   removeHtmlNode,
+  addHtmlNodeAttribute,
 } from "@jsenv/core/src/internal/compiling/compileHtml.js"
 import {
   getJavaScriptSourceMappingUrl,
@@ -47,6 +48,7 @@ import { collectNodesMutations } from "../parsing.utils.js"
 
 import { collectSvgMutations } from "../svg/parseSvgRessource.js"
 import { moveCssUrls } from "../css/moveCssUrls.js"
+import { applyAlgoToRepresentationData } from "../../integrity/integrity_algorithms.js"
 
 export const parseHtmlRessource = async (
   htmlRessource,
@@ -172,20 +174,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 +203,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,12 +241,10 @@ const regularScriptTextNodeVisitor = (
   if (!textNode) {
     return null
   }
-
-  const ressourceSpecifier = getUniqueNameForInlineHtmlNode(
-    script,
-    scripts,
-    `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
-  )
+  const scriptId = getIdForInlineHtmlNode(script, scripts)
+  const ressourceSpecifier = `${urlToFilename(
+    htmlRessource.url,
+  )}__inline__${scriptId}.js`
   const jsReference = notifyReferenceFound({
     referenceLabel: "html inline script",
     contentTypeExpected: "application/javascript",
@@ -266,25 +272,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
@@ -299,15 +305,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}`
+    }
   }
 }
 
@@ -332,12 +343,10 @@ const moduleScriptTextNodeVisitor = (
   if (!textNode) {
     return null
   }
-
-  const ressourceSpecifier = getUniqueNameForInlineHtmlNode(
-    script,
-    scripts,
-    `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
-  )
+  const scriptId = getIdForInlineHtmlNode(script, scripts)
+  const ressourceSpecifier = `${urlToFilename(
+    htmlRessource.url,
+  )}__inline__${scriptId}.js`
   const jsReference = notifyReferenceFound({
     referenceLabel: "html inline module script",
     contentTypeExpected: "application/javascript",
@@ -373,24 +382,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
@@ -404,22 +413,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}`
+    }
   }
 }
 
@@ -444,17 +453,14 @@ const importmapScriptTextNodeVisitor = (
   if (!textNode) {
     return null
   }
-
+  const importmapScriptId = getIdForInlineHtmlNode(script, scripts)
   const importmapReference = notifyReferenceFound({
     referenceLabel: "html inline importmap",
     contentTypeExpected: "application/importmap+json",
-    ressourceSpecifier: getUniqueNameForInlineHtmlNode(
-      script,
-      scripts,
-      `${urlToFilename(htmlRessource.url)}__inline__[id].importmap`,
-    ),
+    ressourceSpecifier: `${urlToFilename(
+      htmlRessource.url,
+    )}__inline__${importmapScriptId}.importmap`,
     ...referenceLocationFromHtmlNode(script),
-
     contentType: "application/importmap+json",
     bufferBeforeBuild: Buffer.from(textNode.value),
     isInline: true,
@@ -463,7 +469,6 @@ const importmapScriptTextNodeVisitor = (
     if (format === "systemjs") {
       typeAttribute.value = "systemjs-importmap"
     }
-
     const { bufferAfterBuild } = importmapReference.ressource
     textNode.value = bufferAfterBuild
   }
@@ -485,38 +490,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.
@@ -527,24 +528,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}`
+    }
   }
 }
 
@@ -556,7 +571,6 @@ const linkHrefVisitor = (
   if (!hrefAttribute) {
     return null
   }
-
   const href = hrefAttribute.value
   const relAttribute = getHtmlNodeAttributeByName(link, "rel")
   const rel = relAttribute ? relAttribute.value : undefined
@@ -567,7 +581,6 @@ const linkHrefVisitor = (
     "preload",
     "modulepreload",
   ].includes(rel)
-
   let contentTypeExpected
   const typeAttribute = getHtmlNodeAttributeByName(link, "type")
   const type = typeAttribute ? typeAttribute.value : ""
@@ -580,19 +593,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({
@@ -604,36 +619,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}`
+    }
   }
 }
 
@@ -647,17 +660,14 @@ const styleTextNodeVisitor = (
   if (!textNode) {
     return null
   }
-
+  const styleId = getIdForInlineHtmlNode(style, styles)
   const inlineStyleReference = notifyReferenceFound({
     referenceLabel: "html style",
     contentTypeExpected: "text/css",
-    ressourceSpecifier: getUniqueNameForInlineHtmlNode(
-      style,
-      styles,
-      `${urlToFilename(htmlRessource.url)}__inline__[id].css`,
-    ),
+    ressourceSpecifier: `${urlToFilename(
+      htmlRessource.url,
+    )}__inline__${styleId}.css`,
     ...referenceLocationFromHtmlNode(style),
-
     contentType: "text/css",
     bufferBeforeBuild: Buffer.from(textNode.value),
     isInline: true,
@@ -673,10 +683,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 }) => {
@@ -694,19 +704,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]
@@ -727,12 +736,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 }) => {
@@ -757,6 +766,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"
@@ -14,8 +15,8 @@ export const parseJsRessource = async (
   const jsUrl = jsRessource.url
   const jsString = String(jsRessource.bufferBeforeBuild)
   const jsSourcemapUrl = getJavaScriptSourceMappingUrl(jsString)
-  let sourcemapReference
 
+  let sourcemapReference
   if (jsSourcemapUrl) {
     sourcemapReference = notifyReferenceFound({
       referenceLabel: "js sourcemapping comment",
@@ -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) {
@@ -76,13 +76,10 @@ export const parseJsRessource = async (
       code = result.code
       map = result.map
     }
-
     jsRessource.buildEnd(code)
-
     if (!map) {
       return
     }
-
     // In theory code should never be modified once buildEnd() is called
     // because buildRelativeUrl might be versioned based on file content
     // There is an exception for sourcemap because we want to update sourcemap.file
@@ -95,16 +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,
@@ -114,7 +107,6 @@ export const parseJsRessource = async (
     }
     const mapAsText = JSON.stringify(map, null, "  ")
     sourcemapRessource.buildEnd(mapAsText)
-
     const sourcemapBuildUrl = resolveUrl(
       sourcemapRessource.buildRelativeUrl,
       buildDirectoryUrl,

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,