@jsenv/core 25.0.0-alpha.0 → 25.0.0-alpha.1

package/src/internal/building/url_versioning.js

@@ -7,29 +7,40 @@ import {
 
 export const createUrlVersioner = ({
   entryPointUrls,
-  workerUrls,
-  classicWorkerUrls,
-  serviceWorkerUrls,
-  classicServiceWorkerUrls,
   asOriginalUrl,
   lineBreakNormalization,
 }) => {
-  const computeBuildRelativeUrl = (ressource) => {
+  const names = []
+  const getFreeName = (name) => {
+    let nameCandidate = name
+    let integer = 1
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      if (!names.includes(nameCandidate)) {
+        names.push(nameCandidate)
+        return nameCandidate
+      }
+      integer++
+      nameCandidate = `${name}${integer}`
+    }
+  }
+
+  const computeBuildRelativeUrl = (ressource, precomputation) => {
     const pattern = getFilenamePattern({
       ressource,
       entryPointUrls,
-      workerUrls,
-      classicWorkerUrls,
-      serviceWorkerUrls,
-      classicServiceWorkerUrls,
       asOriginalUrl,
       precomputeBuildRelativeUrl,
     })
+
     const buildRelativeUrl = generateBuildRelativeUrl(
       ressource.url,
       ressource.bufferAfterBuild,
       {
         pattern,
+        getName: precomputation
+          ? () => urlToBasename(ressource.url)
+          : () => getFreeName(urlToBasename(ressource.url)),
         contentType: ressource.contentType,
         lineBreakNormalization,
       },
@@ -46,7 +57,7 @@ export const createUrlVersioner = ({
     }
 
     ressource.bufferAfterBuild = bufferAfterBuild
-    const precomputedBuildRelativeUrl = computeBuildRelativeUrl(ressource)
+    const precomputedBuildRelativeUrl = computeBuildRelativeUrl(ressource, true)
     ressource.bufferAfterBuild = undefined
     ressource.precomputedBuildRelativeUrl = precomputedBuildRelativeUrl
     return precomputedBuildRelativeUrl
@@ -61,10 +72,6 @@ export const createUrlVersioner = ({
 const getFilenamePattern = ({
   ressource,
   entryPointUrls,
-  workerUrls,
-  classicWorkerUrls,
-  serviceWorkerUrls,
-  classicServiceWorkerUrls,
   asOriginalUrl,
   precomputeBuildRelativeUrl,
 }) => {
@@ -74,30 +81,6 @@ const getFilenamePattern = ({
     return entryPointBuildRelativeUrl
   }
 
-  // service worker:
-  // - MUST be at the root (same level than the HTML file)
-  //   otherwise it might be registered for the scope "/assets/" instead of "/"
-  // - MUST not be versioned
-  if (ressource.isServiceWorker) {
-    const originalUrl = asOriginalUrl(ressource.url)
-    const serviceWorkerBuildRelativeUrl = ressource.isJsModule
-      ? serviceWorkerUrls[originalUrl]
-      : classicServiceWorkerUrls[originalUrl]
-    // we could/should log a warning when service worker is not at the root
-    // we should also disable versioning for this file
-    // of the build directory
-    return serviceWorkerBuildRelativeUrl
-  }
-
-  // it's a module worker
-  if (ressource.isWorker) {
-    const originalUrl = asOriginalUrl(ressource.url)
-    const workerBuildRelativeUrl = ressource.isJsModule
-      ? workerUrls[originalUrl]
-      : classicWorkerUrls[originalUrl]
-    return workerBuildRelativeUrl
-  }
-
   // inline ressource inherits location
   if (ressource.isInline) {
     // inherit parent directory location because it's an inline file
@@ -119,8 +102,19 @@ const getFilenamePattern = ({
     return `${name}_[hash][extname]`
   }
 
+  // service worker:
+  // - MUST be at the root (same level than the HTML file)
+  //   otherwise it might be registered for the scope "/assets/" instead of "/"
+  // - MUST not be versioned
+  if (ressource.isServiceWorker) {
+    return "[name][extname]"
+  }
+
+  if (ressource.isWorker) {
+    return "[name]_[hash][extname]"
+  }
+
   if (ressource.isJsModule) {
-    // it's a js module
     return "[name]_[hash][extname]"
   }
 
@@ -133,8 +127,8 @@ const generateBuildRelativeUrl = (
   fileUrl,
   fileContent,
   {
-    name = urlToBasename(fileUrl),
-    pattern = "[name]-[hash][extname]",
+    getName,
+    pattern,
     contentType = "application/octet-stream",
     lineBreakNormalization = false,
   } = {},
@@ -143,7 +137,7 @@ const generateBuildRelativeUrl = (
   if (pattern.startsWith("./")) pattern = pattern.slice(2)
   const buildRelativeUrl = renderFileNamePattern(pattern, {
     dirname: () => urlToParentUrl(fileUrl),
-    name: () => name,
+    name: getName,
     hash: () =>
       generateContentHash(fileContent, {
         contentType,

package/src/internal/compiling/createCompiledFileService.js

@@ -6,10 +6,10 @@ import {
   urlToMeta,
 } from "@jsenv/filesystem"
 
-import { featuresCompatMap } from "@jsenv/core/src/internal/generateGroupMap/featuresCompatMap.js"
 import { createRuntimeCompat } from "@jsenv/core/src/internal/generateGroupMap/runtime_compat.js"
-
+import { shakeBabelPluginMap } from "@jsenv/core/src/internal/generateGroupMap/shake_babel_plugin_map.js"
 import { serverUrlToCompileInfo } from "@jsenv/core/src/internal/url_conversion.js"
+
 import { setUrlExtension } from "../url_utils.js"
 import {
   COMPILE_ID_BUILD_GLOBAL,
@@ -45,8 +45,12 @@ export const createCompiledFileService = ({
   moduleOutFormat,
   importMetaFormat,
   topLevelAwait,
+  prependSystemJs,
   groupMap,
   customCompilers,
+  workerUrls,
+  serviceWorkerUrls,
+  importMapInWebWorkers,
 
   jsenvEventSourceClientInjection,
   jsenvToolbarInjection,
@@ -60,6 +64,8 @@ export const createCompiledFileService = ({
   Object.keys(groupMap).forEach((groupName) => {
     compileIdModuleFormats[groupName] = canAvoidSystemJs({
       runtimeSupport: groupMap[groupName].minRuntimeVersions,
+      workerUrls,
+      importMapInWebWorkers,
     })
       ? "esmodule"
       : "systemjs"
@@ -183,18 +189,20 @@ export const createCompiledFileService = ({
           outDirectoryRelativeUrl,
           compileId,
           request,
-
-          runtimeSupport,
-          babelPluginMap: babelPluginMapFromCompileId(compileId, {
+          babelPluginMap: shakeBabelPluginMap({
             babelPluginMap,
-            groupMap,
+            missingFeatureNames: groupMap[compileId].missingFeatureNames,
           }),
+          runtimeSupport,
+          workerUrls,
+          serviceWorkerUrls,
           moduleOutFormat:
             moduleOutFormat === undefined
               ? compileIdModuleFormats[compileId]
               : moduleOutFormat,
           importMetaFormat,
           topLevelAwait,
+          prependSystemJs,
 
           sourcemapMethod,
           sourcemapExcludeSources,
@@ -210,18 +218,23 @@ export const createCompiledFileService = ({
   }
 }
 
-const canAvoidSystemJs = ({ runtimeSupport }) => {
+const canAvoidSystemJs = ({
+  runtimeSupport,
+  workerUrls,
+  importMapInWebWorkers,
+}) => {
   const runtimeCompatMap = createRuntimeCompat({
+    featureNames: [
+      "module",
+      "importmap",
+      "import_assertion_type_json",
+      "import_assertion_type_css",
+      ...(workerUrls.length > 0 ? ["worker_type_module"] : []),
+      ...(importMapInWebWorkers ? ["worker_importmap"] : []),
+    ],
     runtimeSupport,
-    pluginMap: {
-      module: true,
-      importmap: true,
-      import_assertion_type_json: true,
-      import_assertion_type_css: true,
-    },
-    pluginCompatMap: featuresCompatMap,
   })
-  return runtimeCompatMap.pluginRequiredNameArray.length === 0
+  return runtimeCompatMap.missingFeatureNames.length === 0
 }
 
 const getCompiler = ({ originalFileUrl, compileMeta }) => {
@@ -295,31 +308,6 @@ const contentTypeExtensions = {
   // "text/css": ".css",
 }
 
-const babelPluginMapFromCompileId = (
-  compileId,
-  { babelPluginMap, groupMap },
-) => {
-  const babelPluginMapForGroup = {}
-
-  groupMap[compileId].pluginRequiredNameArray.forEach((requiredPluginName) => {
-    const babelPlugin = babelPluginMap[requiredPluginName]
-    if (babelPlugin) {
-      babelPluginMapForGroup[requiredPluginName] = babelPlugin
-    }
-  })
-
-  Object.keys(babelPluginMap).forEach((key) => {
-    if (key.startsWith("syntax-")) {
-      babelPluginMapForGroup[key] = babelPluginMap[key]
-    }
-    if (key === "transform-replace-expressions") {
-      babelPluginMapForGroup[key] = babelPluginMap[key]
-    }
-  })
-
-  return babelPluginMapForGroup
-}
-
 const ressourceToPathname = (ressource) => {
   const searchSeparatorIndex = ressource.indexOf("?")
   const pathname =

package/src/internal/compiling/html_source_file_service.js

@@ -18,7 +18,7 @@ import {
   urlToFilename,
   urlIsInsideOf,
 } from "@jsenv/filesystem"
-import { moveImportMap } from "@jsenv/importmap"
+import { composeTwoImportMaps, moveImportMap } from "@jsenv/importmap"
 import { createDetailedMessage } from "@jsenv/logger"
 
 import {
@@ -28,6 +28,8 @@ import {
 } from "@jsenv/core/dist/build_manifest.js"
 import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { stringifyDataUrl } from "@jsenv/core/src/internal/dataUrl.utils.js"
+import { getDefaultImportmap } from "@jsenv/core/src/internal/import-resolution/importmap_default.js"
+
 import {
   parseHtmlString,
   parseHtmlAstRessources,
@@ -155,14 +157,13 @@ const transformHTMLSourceFile = async ({
   fileUrl = urlWithoutSearch(fileUrl)
 
   const htmlAst = parseHtmlString(fileContent)
-  if (inlineImportMapIntoHTML) {
-    await inlineImportmapScripts({
-      logger,
-      htmlAst,
-      htmlFileUrl: fileUrl,
-      projectDirectoryUrl,
-    })
-  }
+  await visitImportmapScripts({
+    logger,
+    htmlAst,
+    inlineImportMapIntoHTML,
+    htmlFileUrl: fileUrl,
+    projectDirectoryUrl,
+  })
 
   const browserRuntimeBuildUrlRelativeToProject = urlToRelativeUrl(
     BROWSER_RUNTIME_BUILD_URL,
@@ -277,59 +278,73 @@ const transformHTMLSourceFile = async ({
   return stringifyHtmlAst(htmlAst)
 }
 
-const inlineImportmapScripts = async ({ logger, htmlAst, htmlFileUrl }) => {
+const visitImportmapScripts = async ({
+  logger,
+  inlineImportMapIntoHTML,
+  htmlAst,
+  htmlFileUrl,
+  projectDirectoryUrl,
+}) => {
   const { scripts } = parseHtmlAstRessources(htmlAst)
-  const remoteImportmapScripts = scripts.filter((script) => {
+  const importmapScripts = scripts.filter((script) => {
     const typeAttribute = getHtmlNodeAttributeByName(script, "type")
-    const srcAttribute = getHtmlNodeAttributeByName(script, "src")
-    if (typeAttribute && typeAttribute.value === "importmap" && srcAttribute) {
+    if (typeAttribute && typeAttribute.value === "importmap") {
       return true
     }
     return false
   })
 
   await Promise.all(
-    remoteImportmapScripts.map(async (remoteImportmapScript) => {
-      const srcAttribute = getHtmlNodeAttributeByName(
-        remoteImportmapScript,
-        "src",
-      )
-      const importMapUrl = resolveUrl(srcAttribute.value, htmlFileUrl)
-      const importMapResponse = await fetchUrl(importMapUrl)
-      if (importMapResponse.status !== 200) {
-        logger.warn(
-          createDetailedMessage(
-            importMapResponse.status === 404
-              ? `Cannot inline importmap script because file cannot be found.`
-              : `Cannot inline importmap script due to unexpected response status (${importMapResponse.status}).`,
-            {
-              "importmap script src": srcAttribute.value,
-              "importmap url": importMapUrl,
-              "html url": htmlFileUrl,
-            },
-          ),
+    importmapScripts.map(async (importmapScript) => {
+      const srcAttribute = getHtmlNodeAttributeByName(importmapScript, "src")
+      if (srcAttribute && inlineImportMapIntoHTML) {
+        const importMapUrl = resolveUrl(srcAttribute.value, htmlFileUrl)
+        const importMapResponse = await fetchUrl(importMapUrl)
+        if (importMapResponse.status !== 200) {
+          logger.warn(
+            createDetailedMessage(
+              importMapResponse.status === 404
+                ? `Cannot inline importmap script because file cannot be found.`
+                : `Cannot inline importmap script due to unexpected response status (${importMapResponse.status}).`,
+              {
+                "importmap script src": srcAttribute.value,
+                "importmap url": importMapUrl,
+                "html url": htmlFileUrl,
+              },
+            ),
+          )
+          return
+        }
+
+        const importMapContent = await importMapResponse.json()
+        const importMapInlined = moveImportMap(
+          importMapContent,
+          importMapUrl,
+          htmlFileUrl,
         )
-        return
-      }
 
-      const importMapContent = await importMapResponse.json()
-      const importMapInlined = moveImportMap(
-        importMapContent,
-        importMapUrl,
-        htmlFileUrl,
-      )
+        replaceHtmlNode(
+          importmapScript,
+          `<script type="importmap">${JSON.stringify(
+            importMapInlined,
+            null,
+            "  ",
+          )}</script>`,
+          {
+            attributesToIgnore: ["src"],
+          },
+        )
+      }
 
-      replaceHtmlNode(
-        remoteImportmapScript,
-        `<script type="importmap">${JSON.stringify(
-          importMapInlined,
-          null,
-          "  ",
-        )}</script>`,
-        {
-          attributesToIgnore: ["src"],
-        },
-      )
+      const textNode = getHtmlNodeTextNode(importmapScript)
+      if (!srcAttribute && textNode) {
+        const jsenvImportmap = getDefaultImportmap(htmlFileUrl, {
+          projectDirectoryUrl,
+        })
+        const htmlImportmap = JSON.parse(textNode.value)
+        const importmap = composeTwoImportMaps(jsenvImportmap, htmlImportmap)
+        textNode.value = JSON.stringify(importmap, null, "  ")
+      }
     }),
   )
 }

package/src/internal/compiling/js-compilation-service/babel_plugin_systemjs_prepend.js

@@ -0,0 +1,23 @@
+import { readFileSync } from "node:fs"
+
+import { jsenvCoreDirectoryUrl } from "@jsenv/core/src/internal/jsenvCoreDirectoryUrl.js"
+
+export const babelPluginSystemJsPrepend = (api) => {
+  api.assertVersion(7)
+  const systemJsUrl = new URL(
+    "src/internal/runtime/s.js",
+    jsenvCoreDirectoryUrl,
+  )
+  return {
+    name: "systemjs-prepend",
+    visitor: {
+      Program: {
+        exit(path) {
+          const code = String(readFileSync(systemJsUrl))
+          const ast = api.template.ast`${code}`
+          path.node.body.unshift(ast)
+        },
+      },
+    },
+  }
+}

package/src/internal/compiling/js-compilation-service/jsenvTransform.js

@@ -11,6 +11,7 @@ import { babelPluginImportMetadata } from "@jsenv/core/src/internal/compiling/ba
 import { ansiToHTML } from "./ansiToHTML.js"
 import { babelPluginRegeneratorRuntimeAsJsenvImport } from "./babel_plugin_regenerator_runtime_as_jsenv_import.js"
 import { babelPluginBabelHelpersAsJsenvImports } from "./babel_plugin_babel_helpers_as_jsenv_imports.js"
+import { babelPluginSystemJsPrepend } from "./babel_plugin_systemjs_prepend.js"
 import { filePathToBabelHelperName } from "./babelHelper.js"
 
 export const jsenvTransform = async ({
@@ -26,6 +27,7 @@ export const jsenvTransform = async ({
   topLevelAwait,
 
   babelHelpersInjectionAsImport,
+  prependSystemJs,
   transformGenerator,
   regeneratorRuntimeImportPath,
   sourcemapEnabled,
@@ -77,7 +79,6 @@ export const jsenvTransform = async ({
       ],
     }
   }
-
   babelPluginMap = {
     ...getMinimalBabelPluginMap(),
     "transform-import-meta": [
@@ -147,6 +148,19 @@ export const jsenvTransform = async ({
       : {}),
     "import-metadata": [babelPluginImportMetadata],
   }
+  if (moduleOutFormat === "systemjs") {
+    babelPluginMap = {
+      ...babelPluginMap,
+      "proposal-dynamic-import": [proposalDynamicImport],
+      "transform-modules-systemjs": [transformModulesSystemJs],
+    }
+  }
+  if (prependSystemJs) {
+    babelPluginMap = {
+      ...babelPluginMap,
+      "systemjs-prepend": [babelPluginSystemJsPrepend],
+    }
+  }
 
   const asyncToPromise = babelPluginMap["transform-async-to-promises"]
   if (topLevelAwait && asyncToPromise) {
@@ -158,17 +172,7 @@ export const jsenvTransform = async ({
     code,
     options: {
       ...options,
-      plugins: babelPluginsFromBabelPluginMap({
-        ...babelPluginMap,
-        ...(moduleOutFormat === "systemjs"
-          ? {
-              "proposal-dynamic-import": [proposalDynamicImport],
-              ...(moduleOutFormat === "systemjs"
-                ? { "transform-modules-systemjs": [transformModulesSystemJs] }
-                : {}),
-            }
-          : {}),
-      }),
+      plugins: babelPluginsFromBabelPluginMap(babelPluginMap),
     },
   })
   code = babelTransformReturnValue.code

package/src/internal/compiling/js-compilation-service/transformJs.js

@@ -12,6 +12,7 @@ export const transformJs = async ({
   moduleOutFormat = "esmodule",
   importMetaFormat = moduleOutFormat,
   babelHelpersInjectionAsImport = moduleOutFormat === "esmodule",
+  prependSystemJs,
   topLevelAwait,
   transformGenerator = true,
   sourcemapEnabled = true,
@@ -51,6 +52,7 @@ export const transformJs = async ({
     importMetaFormat,
 
     babelHelpersInjectionAsImport,
+    prependSystemJs,
     topLevelAwait,
     transformGenerator,
     sourcemapEnabled,

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -8,7 +8,7 @@ import {
   TOOLBAR_INJECTOR_BUILD_URL,
 } from "@jsenv/core/dist/build_manifest.js"
 import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
-import { getDefaultImportMap } from "@jsenv/core/src/internal/import-resolution/importmap-default.js"
+import { getDefaultImportmap } from "@jsenv/core/src/internal/import-resolution/importmap_default.js"
 
 import {
   setJavaScriptSourceMappingUrl,
@@ -120,83 +120,82 @@ export const compileHtml = async ({
           importmapInfo = {
             script,
             url: resolveUrl(src, url),
-            loadAsText: async () => {
+            load: async () => {
               const importMapResponse = await fetchUrl(importmapInfo.url)
-              if (importMapResponse.status !== 200) {
-                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,
-                    },
-                  ),
+              if (importMapResponse.status === 200) {
+                const importmapAsText = await importMapResponse.text()
+                let htmlImportmap = JSON.parse(importmapAsText)
+                htmlImportmap = moveImportMap(
+                  htmlImportmap,
+                  importmapInfo.url,
+                  url,
                 )
-                return "{}"
+                sources.push(importmapInfo.url)
+                sourcesContent.push(importmapAsText)
+                return htmlImportmap
               }
-              const importmapAsText = await importMapResponse.text()
-              sources.push(importmapInfo.url)
-              sourcesContent.push(importmapAsText)
-
-              const importMapMoved = moveImportMap(
-                JSON.parse(importmapAsText),
-                importmapInfo.url,
-                url,
-              )
-              const compiledImportmapAsText = JSON.stringify(
-                importMapMoved,
-                null,
-                "  ",
+              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,
+                  },
+                ),
               )
-              return compiledImportmapAsText
+              return {}
             },
           }
         } else {
           importmapInfo = {
             script,
             url: compiledUrl,
-            loadAsText: () => getHtmlNodeTextNode(script).value,
+            load: () => {
+              const jsenvImportmap = getDefaultImportmap(compiledUrl, {
+                projectDirectoryUrl,
+                compileDirectoryUrl: `${projectDirectoryUrl}${compileId}/${outDirectoryRelativeUrl}`,
+              })
+              const htmlImportmap = JSON.parse(
+                getHtmlNodeTextNode(script).value,
+              )
+              const importmap = composeTwoImportMaps(
+                jsenvImportmap,
+                htmlImportmap,
+              )
+              return importmap
+            },
           }
         }
       }
     }
   })
   if (importmapInfo) {
-    const htmlImportMap = JSON.parse(await importmapInfo.loadAsText())
-    const importMapFromJsenv = getDefaultImportMap({
-      importMapFileUrl: compiledUrl,
-      projectDirectoryUrl,
-      compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
-    })
-    const mappings = composeTwoImportMaps(importMapFromJsenv, htmlImportMap)
-    const importmapAsText = JSON.stringify(mappings, null, "  ")
+    const importmap = await importmapInfo.load()
+    const importmapAsText = JSON.stringify(importmap, null, "  ")
     replaceHtmlNode(
       importmapInfo.script,
       `<script type="${
-        moduleOutFormat === "systemjs" ? "jsenv-importmap" : "importmap"
+        moduleOutFormat === "systemjs" ? "systemjs-importmap" : "importmap"
       }">${importmapAsText}</script>`,
       {
         attributesToIgnore: ["src"],
       },
     )
     importmapInfo.inlinedFrom = importmapInfo.url
-    importmapInfo.url = compiledUrl
     importmapInfo.text = importmapAsText
   } else {
-    // inject a default importmap
-    const defaultImportMap = getDefaultImportMap({
-      importMapFileUrl: compiledUrl,
+    const defaultImportMap = getDefaultImportmap(compiledUrl, {
       projectDirectoryUrl,
-      compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
+      compileDirectoryUrl: `${projectDirectoryUrl}${outDirectoryRelativeUrl}${compileId}/`,
     })
     const importmapAsText = JSON.stringify(defaultImportMap, null, "  ")
     manipulateHtmlAst(htmlAst, {
       scriptInjections: [
         {
           type:
-            moduleOutFormat === "systemjs" ? "jsenv-importmap" : "importmap",
+            moduleOutFormat === "systemjs" ? "systemjs-importmap" : "importmap",
           // in case there is no importmap, force the presence
           // so that '@jsenv/core/' are still remapped
           text: importmapAsText,