@jsenv/core 24.4.1 → 24.4.3

package/src/internal/building/createJsenvRollupPlugin.js

@@ -1,4 +1,5 @@
 import { extname } from "node:path"
+import MagicString from "magic-string"
 import { normalizeImportMap } from "@jsenv/importmap"
 import { isSpecifierForNodeCoreModule } from "@jsenv/importmap/src/isSpecifierForNodeCoreModule.js"
 import { createDetailedMessage, loggerToLogLevel } from "@jsenv/logger"
@@ -205,7 +206,14 @@ export const createJsenvRollupPlugin = async ({
       fileName,
     })
   }
+  // rollup expects an input option, if we provide only an html file
+  // without any script type module in it, we won't emit "chunk" and rollup will throw.
+  // It is valid to build an html not referencing any js (rare but valid)
+  // In that case jsenv emits an empty chunk and discards rollup warning about it
+  // This chunk is later ignored in "generateBundle" hook
+  let atleastOneChunkEmitted = false
   const emitChunk = (chunk) => {
+    atleastOneChunkEmitted = true
     return rollupEmitFile({
       type: "chunk",
       ...chunk,
@@ -444,12 +452,6 @@ export const createJsenvRollupPlugin = async ({
         })
       }
 
-      // rollup expects an input option, if we provide only an html file
-      // without any script type module in it, we won't emit "chunk" and rollup will throw.
-      // It is valid to build an html not referencing any js (rare but valid)
-      // In that case jsenv emits an empty chunk and discards rollup warning about it
-      // This chunk is later ignored in "generateBundle" hook
-      let atleastOneChunkEmitted = false
       ressourceBuilder = createRessourceBuilder(
         {
           urlFetcher,
@@ -555,15 +557,11 @@ export const createJsenvRollupPlugin = async ({
           emitChunk,
           emitAsset,
           setAssetSource,
-          onJsModuleReference: ({
-            jsModuleUrl,
-            jsModuleIsInline,
-            jsModuleSource,
-          }) => {
-            atleastOneChunkEmitted = true
+          onJsModule: ({ ressource, jsModuleUrl, jsModuleIsInline }) => {
             if (jsModuleIsInline) {
-              inlineModuleScripts[jsModuleUrl] = jsModuleSource
+              inlineModuleScripts[jsModuleUrl] = ressource
             }
+
             urlImporterMap[jsModuleUrl] = {
               url: resolveUrl(
                 entryPointsPrepared[0].entryProjectRelativeUrl,
@@ -573,6 +571,15 @@ export const createJsenvRollupPlugin = async ({
               column: undefined,
             }
             jsModulesFromEntry[asRollupUrl(jsModuleUrl)] = true
+            const name = urlToBasename(jsModuleUrl)
+            const rollupReferenceId = emitChunk({
+              id: asRollupUrl(jsModuleUrl),
+              name,
+            })
+            return {
+              name,
+              rollupReferenceId,
+            }
           },
           lineBreakNormalization,
         },
@@ -587,7 +594,6 @@ export const createJsenvRollupPlugin = async ({
             entryBuffer,
           }) => {
             if (entryContentType === "application/javascript") {
-              atleastOneChunkEmitted = true
               emitChunk({
                 id: ensureRelativeUrlNotation(entryProjectRelativeUrl),
                 name: urlToBasename(`file:///${entryBuildRelativeUrl}`),
@@ -620,6 +626,7 @@ export const createJsenvRollupPlugin = async ({
           },
         ),
       )
+
       if (!atleastOneChunkEmitted) {
         emitChunk({
           id: EMPTY_CHUNK_URL,
@@ -790,6 +797,7 @@ export const createJsenvRollupPlugin = async ({
         // otherwise rollup would never concat module together
         referenceShouldNotEmitChunk: jsConcatenation,
         contentTypeExpected: "application/javascript",
+        referenceLabel: "static or dynamic import",
         referenceUrl: importer.url,
         referenceColumn: importer.column,
         referenceLine: importer.line,
@@ -826,6 +834,7 @@ export const createJsenvRollupPlugin = async ({
           const { line, column } = importNode.loc.start
           const reference =
             await ressourceBuilder.createReferenceFoundInJsModule({
+              referenceLabel: "URL + import.meta.url",
               jsUrl: url,
               jsLine: line,
               jsColumn: column,
@@ -939,6 +948,7 @@ export const createJsenvRollupPlugin = async ({
             if (importAssertionSupportedByRuntime) {
               const reference =
                 await ressourceBuilder.createReferenceFoundInJsModule({
+                  referenceLabel: "import assertion",
                   isImportAssertion: true,
                   jsUrl: url,
                   jsLine: line,
@@ -991,7 +1001,6 @@ export const createJsenvRollupPlugin = async ({
         },
       })
       if (mutations.length > 0) {
-        const { default: MagicString } = await import("magic-string")
         const magicString = new MagicString(code)
         mutations.forEach((mutation) => {
           mutation(magicString)
@@ -1071,30 +1080,32 @@ export const createJsenvRollupPlugin = async ({
       // as rollup rightfully prevent late js emission
       Object.keys(rollupResult).forEach((fileName) => {
         const file = rollupResult[fileName]
-        if (file.type !== "chunk") {
-          return
-        }
 
-        const { facadeModuleId } = file
-        if (facadeModuleId === EMPTY_CHUNK_URL) {
+        // there is 3 types of file: "placeholder", "asset", "chunk"
+        if (file.type === "asset") {
           return
         }
 
-        const fileCopy = { ...file }
-        if (facadeModuleId) {
-          fileCopy.url = asServerUrl(facadeModuleId)
-        } else {
-          const sourcePath = file.map.sources[file.map.sources.length - 1]
-          const fileBuildUrl = resolveUrl(file.fileName, buildDirectoryUrl)
-          const originalProjectUrl = resolveUrl(sourcePath, fileBuildUrl)
-          fileCopy.url = asCompiledServerUrl(originalProjectUrl, {
-            projectDirectoryUrl,
-            compileServerOrigin,
-            compileDirectoryRelativeUrl,
-          })
+        if (file.type === "chunk") {
+          const { facadeModuleId } = file
+          if (facadeModuleId === EMPTY_CHUNK_URL) {
+            return
+          }
+          const fileCopy = { ...file }
+          if (facadeModuleId) {
+            fileCopy.url = asServerUrl(facadeModuleId)
+          } else {
+            const sourcePath = file.map.sources[file.map.sources.length - 1]
+            const fileBuildUrl = resolveUrl(file.fileName, buildDirectoryUrl)
+            const originalProjectUrl = resolveUrl(sourcePath, fileBuildUrl)
+            fileCopy.url = asCompiledServerUrl(originalProjectUrl, {
+              projectDirectoryUrl,
+              compileServerOrigin,
+              compileDirectoryRelativeUrl,
+            })
+          }
+          jsChunks[fileName] = fileCopy
         }
-
-        jsChunks[fileName] = fileCopy
       })
       await ensureTopLevelAwaitTranspilationIfNeeded({
         format,
@@ -1110,6 +1121,16 @@ export const createJsenvRollupPlugin = async ({
           urlVersionningForEntryPoints ||
           !file.isEntry
 
+        if (file.url in inlineModuleScripts && format === "systemjs") {
+          const magicString = new MagicString(file.code)
+          magicString.overwrite(
+            0,
+            "System.register([".length,
+            `System.register("${fileName}", [`,
+          )
+          file.code = magicString.toString()
+        }
+
         if (urlVersioning) {
           if (canBeVersioned && useImportMapToMaximizeCacheReuse) {
             buildRelativeUrl = computeBuildRelativeUrl(
@@ -1134,18 +1155,20 @@ export const createJsenvRollupPlugin = async ({
           originalProjectUrl,
           projectDirectoryUrl,
         )
-
-        jsModuleBuild[buildRelativeUrl] = file
-
         const jsRessource = ressourceBuilder.findRessource(
           (ressource) => ressource.url === file.url,
         )
         if (jsRessource && jsRessource.isInline) {
+          if (format === "systemjs") {
+            markBuildRelativeUrlAsUsedByJs(buildRelativeUrl)
+          }
           buildInlineFileContents[buildRelativeUrl] = file.code
         } else {
           markBuildRelativeUrlAsUsedByJs(buildRelativeUrl)
           buildMappings[originalProjectRelativeUrl] = buildRelativeUrl
         }
+
+        jsModuleBuild[buildRelativeUrl] = file
       })
 
       // it's important to do this to emit late asset
@@ -1239,10 +1262,13 @@ export const createJsenvRollupPlugin = async ({
       Object.keys(rollupBuild).forEach((buildRelativeUrl) => {
         const rollupFileInfo = rollupBuild[buildRelativeUrl]
         const ressource = ressourceBuilder.findRessource((ressource) => {
-          return (
-            ressource.buildRelativeUrl === buildRelativeUrl ||
-            rollupFileInfo.facadeModuleId === ressource.url
-          )
+          if (ressource.buildRelativeUrl === buildRelativeUrl) {
+            return true
+          }
+          if (ressource.url === rollupFileInfo.url) {
+            return true
+          }
+          return false
         })
         if (ressource && ressource.isInline) {
           const fileName = buildRelativeUrlToFileName(buildRelativeUrl)

package/src/internal/building/css/parseCssRessource.js

@@ -27,6 +27,7 @@ export const parseCssRessource = async (
   let sourcemapReference
   if (cssSourcemapUrl) {
     sourcemapReference = notifyReferenceFound({
+      referenceLabel: "css sourcemaping comment",
       contentTypeExpected: ["application/json", "application/octet-stream"],
       ressourceSpecifier: cssSourcemapUrl,
       // we don't really know the line or column
@@ -39,6 +40,7 @@ export const parseCssRessource = async (
     map = JSON.parse(String(sourcemapReference.ressource.bufferBeforeBuild))
   } else {
     sourcemapReference = notifyReferenceFound({
+      referenceLabel: "css sourcemaping comment",
       contentType: "application/octet-stream",
       ressourceSpecifier: `${urlToFilename(cssRessource.url)}.map`,
       isPlaceholder: true,
@@ -54,6 +56,7 @@ export const parseCssRessource = async (
   const atImportReferences = []
   atImports.forEach((atImport) => {
     const importReference = notifyReferenceFound({
+      referenceLabel: "css @import",
       ressourceSpecifier: atImport.specifier,
       ...cssNodeToReferenceLocation(atImport.urlDeclarationNode),
     })
@@ -64,8 +67,8 @@ export const parseCssRessource = async (
     if (urlDeclaration.specifier[0] === "#") {
       return
     }
-
     const urlReference = notifyReferenceFound({
+      referenceLabel: "css url",
       ressourceSpecifier: urlDeclaration.specifier,
       ...cssNodeToReferenceLocation(urlDeclaration.urlDeclarationNode),
     })

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

@@ -179,6 +179,7 @@ const regularScriptSrcVisitor = (
   }
 
   const remoteScriptReference = notifyReferenceFound({
+    referenceLabel: "html script",
     contentTypeExpected: "application/javascript",
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(script, "src"),
@@ -244,6 +245,7 @@ const regularScriptTextNodeVisitor = (
     `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
   )
   const jsReference = notifyReferenceFound({
+    referenceLabel: "html inline script",
     contentTypeExpected: "application/javascript",
     ressourceSpecifier,
     ...referenceLocationFromHtmlNode(script),
@@ -271,6 +273,7 @@ const moduleScriptSrcVisitor = (script, { format, notifyReferenceFound }) => {
   }
 
   const remoteScriptReference = notifyReferenceFound({
+    referenceLabel: "html module script",
     contentTypeExpected: "application/javascript",
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(script, "src"),
@@ -295,7 +298,7 @@ const moduleScriptSrcVisitor = (script, { format, notifyReferenceFound }) => {
       let jsString = String(bufferAfterBuild)
 
       // at this stage, for some reason the sourcemap url is not in the js
-      // (it will be added sshortly after by "injectSourcemapInRollupBuild")
+      // (it will be added shortly after by "injectSourcemapInRollupBuild")
       // but we know that a script type module have a sourcemap
       // and will be next to html file
       // with these assumptions we can force the sourcemap url
@@ -341,6 +344,7 @@ const moduleScriptTextNodeVisitor = (
     `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
   )
   const jsReference = notifyReferenceFound({
+    referenceLabel: "html inline module script",
     contentTypeExpected: "application/javascript",
     ressourceSpecifier,
     ...referenceLocationFromHtmlNode(script),
@@ -378,6 +382,7 @@ const importmapScriptSrcVisitor = (
   }
 
   const importmapReference = notifyReferenceFound({
+    referenceLabel: "html importmap",
     contentTypeExpected: "application/importmap+json",
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(script, "src"),
@@ -465,6 +470,7 @@ const importmapScriptTextNodeVisitor = (
   }
 
   const importmapReference = notifyReferenceFound({
+    referenceLabel: "html inline importmap",
     contentTypeExpected: "application/importmap+json",
     ressourceSpecifier: getUniqueNameForInlineHtmlNode(
       script,
@@ -505,6 +511,7 @@ const linkStylesheetHrefVisitor = (
   }
 
   const cssReference = notifyReferenceFound({
+    referenceLabel: "html stylesheet link",
     contentTypeExpected: "text/css",
     ressourceSpecifier: hrefAttribute.value,
     ...referenceLocationFromHtmlNode(link, "href"),
@@ -574,6 +581,7 @@ const linkHrefVisitor = (
     return null
   }
 
+  const href = hrefAttribute.value
   const relAttribute = getHtmlNodeAttributeByName(link, "rel")
   const rel = relAttribute ? relAttribute.value : undefined
   const isRessourceHint = [
@@ -598,9 +606,10 @@ const linkHrefVisitor = (
   }
 
   const linkReference = notifyReferenceFound({
+    referenceLabel: rel ? `html ${rel} link href` : `html link href`,
     isRessourceHint,
     contentTypeExpected,
-    ressourceSpecifier: hrefAttribute.value,
+    ressourceSpecifier: href,
     ...referenceLocationFromHtmlNode(link, "href"),
     urlVersioningDisabled: contentTypeExpected === "application/manifest+json",
     isJsModule,
@@ -664,6 +673,7 @@ const styleTextNodeVisitor = (
   }
 
   const inlineStyleReference = notifyReferenceFound({
+    referenceLabel: "html style",
     contentTypeExpected: "text/css",
     ressourceSpecifier: getUniqueNameForInlineHtmlNode(
       style,
@@ -689,6 +699,7 @@ const imgSrcVisitor = (img, { notifyReferenceFound }) => {
   }
 
   const srcReference = notifyReferenceFound({
+    referenceLabel: "html img src",
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(img, "src"),
   })
@@ -709,8 +720,9 @@ const srcsetVisitor = (htmlNode, { notifyReferenceFound }) => {
   }
 
   const srcsetParts = parseSrcset(srcsetAttribute.value)
-  const srcsetPartsReferences = srcsetParts.map(({ specifier }) =>
+  const srcsetPartsReferences = srcsetParts.map(({ specifier }, index) =>
     notifyReferenceFound({
+      referenceLabel: `html srcset ${index}`,
       ressourceSpecifier: specifier,
       ...referenceLocationFromHtmlNode(htmlNode, "srcset"),
     }),
@@ -742,6 +754,7 @@ const sourceSrcVisitor = (source, { notifyReferenceFound }) => {
 
   const typeAttribute = getHtmlNodeAttributeByName(source, "type")
   const srcReference = notifyReferenceFound({
+    referenceLabel: "html source",
     contentTypeExpected: typeAttribute ? typeAttribute.value : undefined,
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(source, "src"),

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

@@ -18,6 +18,7 @@ export const parseJsRessource = async (
 
   if (jsSourcemapUrl) {
     sourcemapReference = notifyReferenceFound({
+      referenceLabel: "js sourcemapping comment",
       contentTypeExpected: ["application/json", "application/octet-stream"],
       ressourceSpecifier: jsSourcemapUrl,
       // we don't really know the line or column
@@ -29,6 +30,7 @@ export const parseJsRessource = async (
     })
   } else {
     sourcemapReference = notifyReferenceFound({
+      referenceLabel: "js sourcemapping comment",
       contentType: "application/octet-stream",
       ressourceSpecifier: `${urlToFilename(jsUrl)}.map`,
       isPlaceholder: true,

package/src/internal/building/ressource_builder.js

@@ -3,7 +3,6 @@ import {
   urlToRelativeUrl,
   urlIsInsideOf,
   urlToParentUrl,
-  urlToBasename,
   urlToFilename,
 } from "@jsenv/filesystem"
 import { createLogger } from "@jsenv/logger"
@@ -34,10 +33,9 @@ export const createRessourceBuilder = (
     asOriginalServerUrl,
     urlToHumanUrl,
 
-    emitChunk,
     emitAsset,
     setAssetSource,
-    onJsModuleReference = () => {},
+    onJsModule,
     resolveRessourceUrl,
     lineBreakNormalization,
   },
@@ -122,6 +120,7 @@ export const createRessourceBuilder = (
   }
 
   const createReferenceFoundInJsModule = async ({
+    referenceLabel,
     jsUrl,
     jsLine,
     jsColumn,
@@ -136,6 +135,7 @@ export const createRessourceBuilder = (
       isImportAssertion,
       ressourceSpecifier,
       contentTypeExpected,
+      referenceLabel,
       referenceUrl: jsUrl,
       referenceLine: jsLine,
       referenceColumn: jsColumn,
@@ -168,6 +168,7 @@ export const createRessourceBuilder = (
     isImportAssertion,
     contentTypeExpected,
     ressourceSpecifier,
+    referenceLabel,
     referenceUrl,
     referenceColumn,
     referenceLine,
@@ -302,6 +303,7 @@ export const createRessourceBuilder = (
       isRessourceHint,
       isImportAssertion,
       contentTypeExpected,
+      referenceLabel,
       referenceUrl,
       referenceColumn,
       referenceLine,
@@ -321,12 +323,21 @@ export const createRessourceBuilder = (
 
     reference.ressource = ressource
     if (fromRollup && ressourceImporter.isEntryPoint) {
-      // do not add that reference, it's already know and would duplicate the html referencing a js file
-      // but do apply its effects
-      ressource.applyReferenceEffects(reference, { isJsModule })
+      // When HTML references JS, ressource builder has emitted the js chunk.
+      // so it already knows it exists and is part of references
+      // -> no need to push into reference (would incorrectly consider html references js twice)
+      // -> no need to log the js ressource (already logged during the HTML parsing)
     } else {
       ressource.references.push(reference)
-      ressource.applyReferenceEffects(reference, { isJsModule })
+      const effects = ressource.applyReferenceEffects(reference, { isJsModule })
+      logger.debug(
+        formatFoundReference({
+          reference,
+          referenceEffects: effects,
+          showReferenceSourceLocation,
+          shortenUrl,
+        }),
+      )
     }
 
     return reference
@@ -452,6 +463,7 @@ export const createRessourceBuilder = (
         isRessourceHint,
         contentTypeExpected,
         ressourceSpecifier,
+        referenceLabel,
         referenceLine,
         referenceColumn,
 
@@ -472,6 +484,7 @@ export const createRessourceBuilder = (
 
         const dependencyReference = createReference({
           ressourceSpecifier,
+          referenceLabel,
           referenceUrl: ressource.url,
           referenceLine,
           referenceColumn,
@@ -648,18 +661,12 @@ export const createRessourceBuilder = (
       }
     }
 
-    const onReference = (reference, infoFromReference) => {
+    const applyReferenceEffects = (reference, infoFromReference) => {
       const effects = []
       if (ressource.isEntryPoint) {
         if (ressource.contentType === "text/html") {
           effects.push(`parse html to find references`)
         }
-      } else {
-        effects.push(
-          `mark ${urlToHumanUrl(
-            ressource.url,
-          )} as referenced by ${urlToHumanUrl(reference.referenceUrl)}`,
-        )
       }
 
       if (reference.isRessourceHint) {
@@ -708,22 +715,18 @@ export const createRessourceBuilder = (
         }
 
         const jsModuleUrl = ressource.url
-
-        onJsModuleReference({
+        const rollupChunk = onJsModule({
+          ressource,
           jsModuleUrl,
           jsModuleIsInline: ressource.isInline,
           jsModuleSource: String(bufferBeforeBuild),
           line: reference.referenceLine,
           column: reference.referenceColumn,
         })
-
-        const name = urlToBasename(jsModuleUrl)
-        const rollupReferenceId = emitChunk({
-          id: jsModuleUrl,
-          name,
-        })
-        ressource.rollupReferenceId = rollupReferenceId
-        effects.push(`emit rollup chunk "${name}" (${rollupReferenceId})`)
+        ressource.rollupReferenceId = rollupChunk.rollupReferenceId
+        effects.push(
+          `emit rollup chunk "${rollupChunk.name}" (${rollupChunk.rollupReferenceId})`,
+        )
         return effects
       }
 
@@ -739,22 +742,9 @@ export const createRessourceBuilder = (
       effects.push(
         `emit rollup asset "${ressource.relativeUrl}" (${rollupReferenceId})`,
       )
-
       return effects
     }
 
-    const applyReferenceEffects = (reference, infoFromReference) => {
-      const referenceEffects = onReference(reference, infoFromReference)
-
-      logger.debug(
-        formatFoundReference({
-          reference,
-          referenceEffects,
-          showReferenceSourceLocation,
-        }),
-      )
-    }
-
     Object.assign(ressource, {
       applyReferenceEffects,
       getBufferAvailablePromise,