@jsenv/core 24.6.3 → 25.0.0-alpha.1

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

@@ -5,14 +5,13 @@ import { babelPluginTransformImportMeta } from "@jsenv/core/src/internal/babel_p
 import {
   getMinimalBabelPluginMap,
   babelPluginsFromBabelPluginMap,
-  extractSyntaxBabelPluginMap,
 } from "@jsenv/core/src/internal/compiling/babel_plugins.js"
 import { babelPluginImportMetadata } from "@jsenv/core/src/internal/compiling/babel_plugin_import_metadata.js"
 
-import { findAsyncPluginNameInBabelPluginMap } from "./findAsyncPluginNameInBabelPluginMap.js"
 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 ({
@@ -25,10 +24,10 @@ export const jsenvTransform = async ({
   babelPluginMap,
   moduleOutFormat,
   importMetaFormat = moduleOutFormat,
+  topLevelAwait,
 
   babelHelpersInjectionAsImport,
-  allowTopLevelAwait,
-  transformTopLevelAwait,
+  prependSystemJs,
   transformGenerator,
   regeneratorRuntimeImportPath,
   sourcemapEnabled,
@@ -50,7 +49,11 @@ export const jsenvTransform = async ({
     sourceFileName: inputPath,
     // https://babeljs.io/docs/en/options#parseropts
     parserOpts: {
-      allowAwaitOutsideFunction: allowTopLevelAwait,
+      allowAwaitOutsideFunction:
+        topLevelAwait === undefined ||
+        topLevelAwait === "return" ||
+        topLevelAwait === "simple" ||
+        topLevelAwait === "ignore",
     },
     generatorOpts: {
       compact: false,
@@ -76,7 +79,6 @@ export const jsenvTransform = async ({
       ],
     }
   }
-
   babelPluginMap = {
     ...getMinimalBabelPluginMap(),
     "transform-import-meta": [
@@ -146,75 +148,31 @@ export const jsenvTransform = async ({
       : {}),
     "import-metadata": [babelPluginImportMetadata],
   }
-
-  const asyncPluginName = findAsyncPluginNameInBabelPluginMap(babelPluginMap)
-
-  if (
-    moduleOutFormat === "systemjs" &&
-    transformTopLevelAwait &&
-    asyncPluginName
-  ) {
-    const babelPluginMapWithoutAsync = {
+  if (moduleOutFormat === "systemjs") {
+    babelPluginMap = {
       ...babelPluginMap,
       "proposal-dynamic-import": [proposalDynamicImport],
       "transform-modules-systemjs": [transformModulesSystemJs],
     }
-    delete babelPluginMapWithoutAsync[asyncPluginName]
-
-    // put body inside something like (async () => {})()
-    const result = await babelTransform({
-      ast,
-      code,
-      options: {
-        ...options,
-        plugins: babelPluginsFromBabelPluginMap(babelPluginMapWithoutAsync),
-      },
-    })
-
-    // we need to retranspile the await keywords now wrapped
-    // inside Systemjs function.
-    // They are ignored, at least by transform-async-to-promises
-    // see https://github.com/rpetrich/babel-plugin-transform-async-to-promises/issues/26
-    const { babelSyntaxPluginMap } = extractSyntaxBabelPluginMap(babelPluginMap)
-    const finalResult = await babelTransform({
-      // ast: result.ast,
-      code: result.code,
-      options: {
-        ...options,
-        // about inputSourceMap see
-        // https://github.com/babel/babel/blob/eac4c5bc17133c2857f2c94c1a6a8643e3b547a7/packages/babel-core/src/transformation/file/generate.js#L57
-        // https://github.com/babel/babel/blob/090c364a90fe73d36a30707fc612ce037bdbbb24/packages/babel-core/src/transformation/file/merge-map.js#L6s
-        inputSourceMap: result.map,
-        plugins: babelPluginsFromBabelPluginMap({
-          ...babelSyntaxPluginMap,
-          [asyncPluginName]: babelPluginMap[asyncPluginName],
-        }),
-      },
-    })
-
-    return {
-      ...result,
-      ...finalResult,
-      metadata: { ...result.metadata, ...finalResult.metadata },
+  }
+  if (prependSystemJs) {
+    babelPluginMap = {
+      ...babelPluginMap,
+      "systemjs-prepend": [babelPluginSystemJsPrepend],
     }
   }
 
+  const asyncToPromise = babelPluginMap["transform-async-to-promises"]
+  if (topLevelAwait && asyncToPromise) {
+    asyncToPromise.options.topLevelAwait = topLevelAwait
+  }
+
   const babelTransformReturnValue = await babelTransform({
     ast,
     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,8 +12,8 @@ export const transformJs = async ({
   moduleOutFormat = "esmodule",
   importMetaFormat = moduleOutFormat,
   babelHelpersInjectionAsImport = moduleOutFormat === "esmodule",
-  allowTopLevelAwait = true,
-  transformTopLevelAwait = true,
+  prependSystemJs,
+  topLevelAwait,
   transformGenerator = true,
   sourcemapEnabled = true,
 }) => {
@@ -52,8 +52,8 @@ export const transformJs = async ({
     importMetaFormat,
 
     babelHelpersInjectionAsImport,
-    allowTopLevelAwait,
-    transformTopLevelAwait,
+    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,
@@ -42,10 +42,10 @@ export const compileHtml = async ({
   outDirectoryRelativeUrl,
   compileId,
 
-  transformTopLevelAwait,
+  babelPluginMap,
   moduleOutFormat,
   importMetaFormat,
-  babelPluginMap,
+  topLevelAwait,
 
   sourcemapMethod,
 
@@ -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,
+              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,
+                  },
+                ),
               )
-              const compiledImportmapAsText = JSON.stringify(
-                importMapMoved,
-                null,
-                "  ",
-              )
-              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,
@@ -284,10 +283,10 @@ export const compileHtml = async ({
           compiledUrl: scriptCompiledFileUrl,
           projectDirectoryUrl,
 
-          transformTopLevelAwait,
+          babelPluginMap,
           moduleOutFormat,
           importMetaFormat,
-          babelPluginMap,
+          topLevelAwait,
         })
       } catch (e) {
         // If there is a syntax error in inline script

package/src/internal/compiling/jsenvCompilerForImportmap.js

@@ -1,89 +1,28 @@
-/**
- * allows the following:
- *
- * import "@jsenv/core/helpers/regenerator-runtime/regenerator-runtime.js"
- * -> searches a file inside @jsenv/core/*
- *
- */
-
-import { urlToRelativeUrl, urlIsInsideOf } from "@jsenv/filesystem"
 import { composeTwoImportMaps } from "@jsenv/importmap"
 
-import { jsenvCoreDirectoryUrl } from "../jsenvCoreDirectoryUrl.js"
-
-export const compileImportmap = async ({ code, url }) => {
-  const importMapForProject = JSON.parse(code)
-
-  const topLevelRemappingForJsenvCore = {
-    "@jsenv/core/": urlToRelativeUrlRemapping(jsenvCoreDirectoryUrl, url),
-  }
-
-  const importmapForSelfImport = {
-    imports: topLevelRemappingForJsenvCore,
-    scopes: generateJsenvCoreScopes({
-      importMapForProject,
-      topLevelRemappingForJsenvCore,
-    }),
-  }
-
-  const importMap = [importmapForSelfImport, importMapForProject].reduce(
-    (previous, current) => composeTwoImportMaps(previous, current),
-    {},
-  )
+import { getDefaultImportmap } from "@jsenv/core/src/internal/import-resolution/importmap_default.js"
 
-  const scopes = importMap.scopes || {}
-  const projectTopLevelMappings = importMapForProject.imports || {}
-  Object.keys(scopes).forEach((scope) => {
-    const scopedMappings = scopes[scope]
-    Object.keys(projectTopLevelMappings).forEach((key) => {
-      if (key in scopedMappings) {
-        scopedMappings[key] = projectTopLevelMappings[key]
-      }
-    })
+export const compileImportmap = async ({
+  code,
+  url,
+  compiledUrl,
+  projectDirectoryUrl,
+  outDirectoryRelativeUrl,
+  compileId,
+}) => {
+  const jsenvImportmap = getDefaultImportmap(compiledUrl, {
+    projectDirectoryUrl,
+    compileDirectoryUrl: `${projectDirectoryUrl}${outDirectoryRelativeUrl}${compileId}/`,
   })
+  const projectImportmap = JSON.parse(code)
+  const importmap = composeTwoImportMaps(jsenvImportmap, projectImportmap)
 
   return {
     contentType: "application/importmap+json",
-    compiledSource: JSON.stringify(importMap, null, "  "),
+    compiledSource: JSON.stringify(importmap, null, "  "),
     sources: [url],
     sourcesContent: [code],
     assets: [],
     assetsContent: [],
   }
 }
-
-// this function just here to ensure relative urls starts with './'
-// so that importmap do not consider them as bare specifiers
-const urlToRelativeUrlRemapping = (url, baseUrl) => {
-  const relativeUrl = urlToRelativeUrl(url, baseUrl)
-
-  if (urlIsInsideOf(url, baseUrl)) {
-    if (relativeUrl.startsWith("../")) return relativeUrl
-    if (relativeUrl.startsWith("./")) return relativeUrl
-    return `./${relativeUrl}`
-  }
-
-  return relativeUrl
-}
-
-const generateJsenvCoreScopes = ({
-  importMapForProject,
-  topLevelRemappingForJsenvCore,
-}) => {
-  const { scopes } = importMapForProject
-
-  if (!scopes) {
-    return undefined
-  }
-
-  // I must ensure jsenvCoreImports wins by default in every scope
-  // because scope may contains stuff like
-  // "/": "/"
-  // "/": "/folder/"
-  // to achieve this, we set jsenvCoreImports into every scope
-  const scopesForJsenvCore = {}
-  Object.keys(scopes).forEach((scopeKey) => {
-    scopesForJsenvCore[scopeKey] = topLevelRemappingForJsenvCore
-  })
-  return scopesForJsenvCore
-}

package/src/internal/compiling/jsenvCompilerForJavaScript.js

@@ -9,13 +9,21 @@ export const compileJavascript = async ({
   projectDirectoryUrl,
 
   babelPluginMap,
-  transformTopLevelAwait,
+  workerUrls,
+  serviceWorkerUrls,
   moduleOutFormat,
   importMetaFormat,
+  topLevelAwait,
+  prependSystemJs,
 
   sourcemapExcludeSources,
   sourcemapMethod,
 }) => {
+  if (prependSystemJs === undefined) {
+    prependSystemJs =
+      workerUrls.includes(url) || serviceWorkerUrls.includes(url)
+  }
+
   const transformResult = await transformJs({
     code,
     map,
@@ -24,9 +32,10 @@ export const compileJavascript = async ({
     projectDirectoryUrl,
 
     babelPluginMap,
-    transformTopLevelAwait,
     moduleOutFormat,
     importMetaFormat,
+    topLevelAwait,
+    prependSystemJs,
   })
 
   return transformResultToCompilationResult(