@jsenv/core 27.0.0-alpha.22 → 27.0.0-alpha.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "27.0.0-alpha.22",
+  "version": "27.0.0-alpha.25",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -11,8 +11,7 @@
     "node": ">=16.13.0"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
+    "access": "public"
   },
   "type": "module",
   "imports": {},
@@ -111,4 +110,4 @@
     "redux": "4.1.2",
     "rollup": "2.70.1"
   }
-}
+}

package/src/build/build.js

@@ -349,10 +349,30 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
           //   - injecting "?as_js_classic" for the first time
           //   - injecting "?as_js_classic" because the parentUrl has it
           if (reference.original) {
+            const referenceOriginalUrl = reference.original.url
+            let originalBuildUrl
+            if (urlIsInsideOf(referenceOriginalUrl, buildDirectoryUrl)) {
+              originalBuildUrl = referenceOriginalUrl
+            } else {
+              originalBuildUrl = Object.keys(rawUrls).find(
+                (key) => rawUrls[key] === referenceOriginalUrl,
+              )
+            }
+            let rawUrl
+            if (urlIsInsideOf(reference.url, buildDirectoryUrl)) {
+              // rawUrl = rawUrls[reference.url] || reference.url
+              const originalBuildUrl =
+                buildUrlRedirections[referenceOriginalUrl]
+              rawUrl = originalBuildUrl
+                ? rawUrls[originalBuildUrl]
+                : reference.url
+            } else {
+              rawUrl = reference.url
+            }
             // the url info do not exists yet (it will be created after this "normalize" hook)
             // And the content will be generated when url is cooked by url graph loader.
             // Here we just want to reserve an url for that file
-            const buildUrl = buildUrlsGenerator.generate(reference.url, {
+            const buildUrl = buildUrlsGenerator.generate(rawUrl, {
               urlInfo: {
                 data: {
                   ...reference.data,
@@ -364,15 +384,8 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
                 filename: reference.filename,
               },
             })
-            const originalUrl = reference.original.url
-            const originalBuildUrl = urlIsInsideOf(
-              reference.url,
-              buildDirectoryUrl,
-            )
-              ? originalUrl
-              : Object.keys(rawUrls).find((key) => rawUrls[key] === originalUrl)
             buildUrlRedirections[originalBuildUrl] = buildUrl
-            rawUrls[buildUrl] = reference.url
+            rawUrls[buildUrl] = rawUrl
             return buildUrl
           }
           if (reference.isInline) {
@@ -811,7 +824,6 @@ ${Object.keys(finalGraph.urlInfos).join("\n")}`,
     finalGraph,
     rawUrls,
     buildUrls,
-    buildUrlRedirections,
   })
   const cleanupActions = []
   GRAPH.forEach(finalGraph, (urlInfo) => {

package/src/build/resync_ressource_hints.js

@@ -1,21 +1,24 @@
+/*
+ * Update <link rel="preload"> and friends after build (once we know everything)
+ *
+ * - Used to remove ressource hint targeting an url that is no longer used:
+ *   - Happens because of import assertions transpilation (file is inlined into JS)
+ */
+
 import {
   parseHtmlString,
   visitHtmlAst,
   stringifyHtmlAst,
   getHtmlNodeAttributeByName,
-  assignHtmlNodeAttributes,
   removeHtmlNode,
 } from "@jsenv/utils/html_ast/html_ast.js"
 
 import { GRAPH } from "./graph_utils.js"
 
-// update ressource hint that where targeting a file that has changed during build
-// (happens for import assertions and file modified by "?as_js_classic")
 export const resyncRessourceHints = async ({
   finalGraphKitchen,
   finalGraph,
   buildUrls,
-  buildUrlRedirections,
 }) => {
   const ressourceHintActions = []
   GRAPH.forEach(finalGraph, (urlInfo) => {
@@ -40,24 +43,6 @@ export const resyncRessourceHints = async ({
           removeHtmlNode(linkNode)
           return
         }
-        const buildUrlRedirected = buildUrlRedirections[buildUrl]
-        if (buildUrlRedirected) {
-          const urlInfoRedirected = finalGraph.getUrlInfo(buildUrlRedirected)
-          hrefAttribute.value = urlInfoRedirected.data.buildUrlSpecifier
-
-          if (
-            urlInfo.type === "js_module" &&
-            urlInfoRedirected.type === "js_classic"
-          ) {
-            const relAttribute = getHtmlNodeAttributeByName(linkNode, "rel")
-            if (relAttribute && relAttribute.value === "modulepreload") {
-              assignHtmlNodeAttributes(linkNode, {
-                rel: "preload",
-                as: "script",
-              })
-            }
-          }
-        }
       }
       visitHtmlAst(htmlAst, (node) => {
         if (node.nodeName !== "link") {

package/src/dev/start_dev_server.js

@@ -32,6 +32,7 @@ export const startDevServer = async ({
   injectedGlobals,
   nodeEsmResolution,
   fileSystemMagicResolution,
+  transpilation,
   autoreload = true,
   explorerGroups = {
     source: {
@@ -95,6 +96,7 @@ export const startDevServer = async ({
         injectedGlobals,
         nodeEsmResolution,
         fileSystemMagicResolution,
+        transpilation,
         autoreload,
       }),
       jsenvPluginExplorer({

package/src/execute/execute.js

@@ -23,6 +23,7 @@ export const execute = async ({
   collectConsole,
   collectCoverage,
   coverageTempDirectoryUrl,
+  collectPerformance = false,
   runtime,
   runtimeParams,
 
@@ -33,6 +34,7 @@ export const execute = async ({
   fileSystemMagicResolution,
   injectedGlobals,
   transpilation,
+  htmlSupervisor = true,
 
   port,
   protocol,
@@ -75,10 +77,14 @@ export const execute = async ({
       plugins: [
         ...plugins,
         ...getCorePlugins({
+          rootDirectoryUrl,
+          urlGraph,
           scenario,
+
+          htmlSupervisor,
+          injectedGlobals,
           nodeEsmResolution,
           fileSystemMagicResolution,
-          injectedGlobals,
           transpilation,
         }),
       ],
@@ -120,6 +126,7 @@ export const execute = async ({
     collectConsole,
     collectCoverage,
     coverageTempDirectoryUrl,
+    collectPerformance,
     runtime,
     runtimeParams,
   })

package/src/execute/run.js

@@ -11,8 +11,7 @@ export const run = async ({
   collectConsole = false,
   collectCoverage = false,
   coverageTempDirectoryUrl,
-  // measurePerformance,
-  // collectPerformance = false,
+  collectPerformance = false,
 
   runtime,
   runtimeParams,
@@ -117,6 +116,7 @@ export const run = async ({
                 signal: runOperation.signal,
                 logger,
                 ...runtimeParams,
+                collectPerformance,
                 keepRunning,
                 stopSignal,
                 onConsole: (log) => onConsoleRef.current(log),

package/src/execute/runtimes/browsers/from_playwright.js

@@ -35,7 +35,7 @@ export const createRuntimeFromPlaywright = ({
     server,
 
     // measurePerformance,
-    // collectPerformance,
+    collectPerformance,
     collectCoverage = false,
     coverageForceIstanbul,
     urlShouldBeCovered,
@@ -167,6 +167,39 @@ export const createRuntimeFromPlaywright = ({
         return result
       })
     }
+
+    if (collectPerformance) {
+      resultTransformer = composeTransformer(
+        resultTransformer,
+        async (result) => {
+          const performance = await page.evaluate(
+            /* eslint-disable no-undef */
+            /* istanbul ignore next */
+            () => {
+              const { performance } = window
+              if (!performance) {
+                return null
+              }
+              const measures = {}
+              const measurePerfEntries = performance.getEntriesByType("measure")
+              measurePerfEntries.forEach((measurePerfEntry) => {
+                measures[measurePerfEntry.name] = measurePerfEntry.duration
+              })
+              return {
+                timeOrigin: performance.timeOrigin,
+                timing: performance.timing.toJSON(),
+                navigation: performance.navigation.toJSON(),
+                measures,
+              }
+              /* eslint-enable no-undef */
+            },
+          )
+          result.performance = performance
+          return result
+        },
+      )
+    }
+
     const fileClientUrl = new URL(fileRelativeUrl, `${server.origin}/`).href
 
     // https://github.com/GoogleChrome/puppeteer/blob/v1.4.0/docs/api.md#event-console

package/src/execute/runtimes/node/controllable_file.mjs

@@ -1,17 +1,33 @@
 import v8 from "node:v8"
 import { uneval } from "@jsenv/uneval"
+import { startObservingPerformances } from "./node_execution_performance.js"
 
 const ACTIONS_AVAILABLE = {
-  "execute-using-dynamic-import": async ({ fileUrl }) => {
-    const namespace = await import(fileUrl)
-    const namespaceResolved = {}
-    await Promise.all([
-      ...Object.keys(namespace).map(async (key) => {
-        const value = await namespace[key]
-        namespaceResolved[key] = value
-      }),
-    ])
-    return namespaceResolved
+  "execute-using-dynamic-import": async ({ fileUrl, collectPerformance }) => {
+    const getNamespace = async () => {
+      const namespace = await import(fileUrl)
+      const namespaceResolved = {}
+      await Promise.all([
+        ...Object.keys(namespace).map(async (key) => {
+          const value = await namespace[key]
+          namespaceResolved[key] = value
+        }),
+      ])
+      return namespaceResolved
+    }
+    if (collectPerformance) {
+      const getPerformance = startObservingPerformances()
+      const namespace = await getNamespace()
+      const performance = await getPerformance()
+      return {
+        namespace,
+        performance,
+      }
+    }
+    const namespace = await getNamespace()
+    return {
+      namespace,
+    }
   },
   "execute-using-require": async ({ fileUrl }) => {
     const { createRequire } = await import("module")

package/src/execute/runtimes/node/node_execution_performance.js

@@ -0,0 +1,67 @@
+import { PerformanceObserver, performance } from "node:perf_hooks"
+
+export const startObservingPerformances = () => {
+  const measureEntries = []
+  // https://nodejs.org/dist/latest-v16.x/docs/api/perf_hooks.html
+  const perfObserver = new PerformanceObserver(
+    (
+      // https://nodejs.org/dist/latest-v16.x/docs/api/perf_hooks.html#perf_hooks_class_performanceobserverentrylist
+      list,
+    ) => {
+      const perfMeasureEntries = list.getEntriesByType("measure")
+      measureEntries.push(...perfMeasureEntries)
+    },
+  )
+  perfObserver.observe({
+    entryTypes: ["measure"],
+  })
+  return async () => {
+    // wait for node to call the performance observer
+    await new Promise((resolve) => {
+      setTimeout(resolve)
+    })
+    performance.clearMarks()
+    perfObserver.disconnect()
+    return {
+      ...readNodePerformance(),
+      measures: measuresFromMeasureEntries(measureEntries),
+    }
+  }
+}
+
+const readNodePerformance = () => {
+  const nodePerformance = {
+    nodeTiming: asPlainObject(performance.nodeTiming),
+    timeOrigin: performance.timeOrigin,
+    eventLoopUtilization: performance.eventLoopUtilization(),
+  }
+  return nodePerformance
+}
+
+// remove getters that cannot be stringified
+const asPlainObject = (objectWithGetters) => {
+  const objectWithoutGetters = {}
+  Object.keys(objectWithGetters).forEach((key) => {
+    objectWithoutGetters[key] = objectWithGetters[key]
+  })
+  return objectWithoutGetters
+}
+
+const measuresFromMeasureEntries = (measureEntries) => {
+  const measures = {}
+  // Sort to ensure measures order is predictable
+  // It seems to be already predictable on Node 16+ but
+  // it's not the case on Node 14.
+  measureEntries.sort((a, b) => {
+    return a.startTime - b.startTime
+  })
+  measureEntries.forEach(
+    (
+      // https://nodejs.org/dist/latest-v16.x/docs/api/perf_hooks.html#perf_hooks_class_performanceentry
+      perfMeasureEntry,
+    ) => {
+      measures[perfMeasureEntry.name] = perfMeasureEntry.duration
+    },
+  )
+  return measures
+}

package/src/execute/runtimes/node/node_process.js

@@ -35,10 +35,9 @@ nodeProcess.run = async ({
   stopSignal,
   onConsole,
 
-  measurePerformance,
-  collectPerformance,
   collectCoverage = false,
   coverageForceIstanbul,
+  collectPerformance,
 
   debugPort,
   debugMode,
@@ -191,9 +190,7 @@ nodeProcess.run = async ({
       actionType: "execute-using-dynamic-import",
       actionParams: {
         fileUrl: new URL(fileRelativeUrl, rootDirectoryUrl).href,
-        measurePerformance,
         collectPerformance,
-        collectCoverage,
       },
     })
     const winner = await winnerPromise
@@ -246,7 +243,7 @@ nodeProcess.run = async ({
     }
     return {
       status: "completed",
-      namespace: value,
+      ...value,
     }
   }
 

package/src/omega/kitchen.js

@@ -451,7 +451,7 @@ export const createKitchen = ({
           currentUrlInfo !== newUrlInfo &&
           currentUrlInfo.dependents.size === 0
         ) {
-          delete context.urlGraph.urlInfos[currentReference.url]
+          context.urlGraph.deleteUrlInfo(currentReference.url)
         }
         return [nextReference, newUrlInfo]
       },

package/src/omega/url_graph.js

@@ -4,7 +4,16 @@ import { urlToRelativeUrl } from "@jsenv/filesystem"
 export const createUrlGraph = () => {
   const urlInfos = {}
   const getUrlInfo = (url) => urlInfos[url]
-  const deleteUrlInfo = (url) => delete urlInfos[url]
+  const deleteUrlInfo = (url) => {
+    const urlInfo = urlInfos[url]
+    if (urlInfo) {
+      delete urlInfos[url]
+      if (urlInfo.sourcemapReference) {
+        deleteUrlInfo(urlInfo.sourcemapReference.url)
+      }
+    }
+  }
+
   const reuseOrCreateUrlInfo = (url) => {
     const existingUrlInfo = urlInfos[url]
     if (existingUrlInfo) return existingUrlInfo

package/src/plugins/transpilation/as_js_classic/jsenv_plugin_as_js_classic.js

@@ -15,15 +15,15 @@ import { createRequire } from "node:module"
 import { readFileSync, urlToFilename } from "@jsenv/filesystem"
 
 import { requireBabelPlugin } from "@jsenv/babel-plugins"
-
 import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
 import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
 import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
 import { composeTwoSourcemaps } from "@jsenv/utils/sourcemap/sourcemap_composition_v3.js"
+
+import { fetchOriginalUrlInfo } from "../fetch_original_url_info.js"
 import { babelPluginTransformImportMetaUrl } from "./helpers/babel_plugin_transform_import_meta_url.js"
 import { jsenvPluginScriptTypeModuleAsClassic } from "./jsenv_plugin_script_type_module_as_classic.js"
 import { jsenvPluginWorkersTypeModuleAsClassic } from "./jsenv_plugin_workers_type_module_as_classic.js"
-import { jsenvPluginTopLevelAwait } from "./jsenv_plugin_top_level_await.js"
 
 const require = createRequire(import.meta.url)
 
@@ -40,7 +40,6 @@ export const jsenvPluginAsJsClassic = ({ systemJsInjection }) => {
     jsenvPluginWorkersTypeModuleAsClassic({
       generateJsClassicFilename,
     }),
-    jsenvPluginTopLevelAwait(),
   ]
 }
 
@@ -72,28 +71,18 @@ const asJsClassic = ({ systemJsInjection, systemJsClientFileUrl }) => {
       return urlTransformed
     },
     fetchUrlContent: async (urlInfo, context) => {
-      const urlObject = new URL(urlInfo.url)
-      const { searchParams } = urlObject
-      if (!searchParams.has("as_js_classic")) {
-        return null
-      }
-      searchParams.delete("as_js_classic")
-      const originalUrl = urlObject.href
-      const originalReference = {
-        ...(context.reference.original || context.reference),
+      const originalUrlInfo = await fetchOriginalUrlInfo({
+        urlInfo,
+        context,
+        searchParam: "as_js_classic",
         // override the expectedType to "js_module"
         // because when there is ?as_js_classic it means the underlying ressource
         // is a js_module
         expectedType: "js_module",
-      }
-      originalReference.url = originalUrl
-      const originalUrlInfo = context.urlGraph.reuseOrCreateUrlInfo(
-        originalReference.url,
-      )
-      await context.fetchUrlContent({
-        reference: originalReference,
-        urlInfo: originalUrlInfo,
       })
+      if (!originalUrlInfo) {
+        return null
+      }
       const isJsEntryPoint =
         // in general html files are entry points
         // but during build js can be sepcified as an entry point

package/src/plugins/transpilation/as_js_classic/jsenv_plugin_script_type_module_as_classic.js

@@ -2,7 +2,8 @@ import {
   getHtmlNodeAttributeByName,
   getHtmlNodeTextNode,
   parseHtmlString,
-  removeHtmlNodeAttribute,
+  removeHtmlNodeAttributeByName,
+  assignHtmlNodeAttributes,
   stringifyHtmlAst,
   visitHtmlAst,
   htmlNodePosition,
@@ -30,51 +31,163 @@ export const jsenvPluginScriptTypeModuleAsClassic = ({
           return null
         }
         const htmlAst = parseHtmlString(urlInfo.content)
-        const actions = []
-        const jsModuleUrlInfos = []
-        const visitScriptTypeModule = (node) => {
+        const preloadAsScriptNodes = []
+        const modulePreloadNodes = []
+        const moduleScriptNodes = []
+        const classicScriptNodes = []
+        const visitLinkNodes = (node) => {
+          if (node.nodeName !== "link") {
+            return
+          }
+          const relAttribute = getHtmlNodeAttributeByName(node, "rel")
+          const rel = relAttribute ? relAttribute.value : undefined
+          if (rel === "modulepreload") {
+            modulePreloadNodes.push(node)
+            return
+          }
+          if (rel === "preload") {
+            const asAttribute = getHtmlNodeAttributeByName(node, "as")
+            const as = asAttribute ? asAttribute.value : undefined
+            if (as === "script") {
+              preloadAsScriptNodes.push(node)
+            }
+            return
+          }
+        }
+        const visitScriptNodes = (node) => {
           if (node.nodeName !== "script") {
             return
           }
           const typeAttribute = getHtmlNodeAttributeByName(node, "type")
-          if (!typeAttribute || typeAttribute.value !== "module") {
+          const type = typeAttribute ? typeAttribute.value : undefined
+          if (type === "module") {
+            moduleScriptNodes.push(node)
+            return
+          }
+          if (type === undefined || type === "text/javascript") {
+            classicScriptNodes.push(node)
             return
           }
-          const srcAttribute = getHtmlNodeAttributeByName(node, "src")
+        }
+        visitHtmlAst(htmlAst, (node) => {
+          visitLinkNodes(node)
+          visitScriptNodes(node)
+        })
+
+        const classicScriptUrls = []
+        const moduleScriptUrls = []
+        classicScriptNodes.forEach((classicScriptNode) => {
+          const srcAttribute = getHtmlNodeAttributeByName(
+            classicScriptNode,
+            "src",
+          )
+          if (srcAttribute) {
+            const url = new URL(srcAttribute.value, urlInfo.url).href
+            classicScriptUrls.push(url)
+          }
+        })
+        moduleScriptNodes.forEach((moduleScriptNode) => {
+          const srcAttribute = getHtmlNodeAttributeByName(
+            moduleScriptNode,
+            "src",
+          )
+          if (srcAttribute) {
+            const url = new URL(srcAttribute.value, urlInfo.url).href
+            moduleScriptUrls.push(url)
+          }
+        })
+
+        const jsModuleUrls = []
+        const getReferenceAsJsClassic = async (reference) => {
+          const [newReference, newUrlInfo] = context.referenceUtils.update(
+            reference,
+            {
+              expectedType: "js_classic",
+              specifier: injectQueryParamsIntoSpecifier(reference.specifier, {
+                as_js_classic: "",
+              }),
+              filename: generateJsClassicFilename(reference.url),
+            },
+          )
+          const jsModuleUrl = newUrlInfo.url
+          if (!jsModuleUrls.includes(jsModuleUrl)) {
+            jsModuleUrls.push(newUrlInfo.url)
+            // during dev it means js modules will be cooked before server sends the HTML
+            // it's ok because:
+            // - during dev script_type_module are supported (dev use a recent browser)
+            // - even if browser is not supported it still works it's jus a bit slower
+            //   because it needs to decide if systemjs will be injected or not
+            await context.cook({
+              reference: newReference,
+              urlInfo: newUrlInfo,
+            })
+          }
+          return [newReference, newUrlInfo]
+        }
+        const actions = []
+        preloadAsScriptNodes.forEach((preloadAsScriptNode) => {
+          const hrefAttribute = getHtmlNodeAttributeByName(
+            preloadAsScriptNode,
+            "href",
+          )
+          const href = hrefAttribute.value
+          const url = new URL(href, urlInfo.url).href
+          const expectedScriptType = moduleScriptUrls.includes(url)
+            ? "module"
+            : "classic"
+          // keep in mind:
+          // when the url is not referenced by a <script type="module">
+          // we assume we want to preload "classic" but it might not be the case
+          // but it's unlikely to happen and people should use "modulepreload" in that case anyway
+          if (expectedScriptType === "module") {
+            actions.push(async () => {
+              const [newReference] = await getReferenceAsJsClassic(
+                context.referenceUtils.findByGeneratedSpecifier(href),
+              )
+              assignHtmlNodeAttributes(preloadAsScriptNode, {
+                href: newReference.generatedSpecifier,
+              })
+              removeHtmlNodeAttributeByName(preloadAsScriptNode, "crossorigin")
+            })
+          }
+        })
+        modulePreloadNodes.forEach((modulePreloadNode) => {
+          const hrefAttribute = getHtmlNodeAttributeByName(
+            modulePreloadNode,
+            "href",
+          )
+          const href = hrefAttribute.value
+          actions.push(async () => {
+            const [newReference] = await getReferenceAsJsClassic(
+              context.referenceUtils.findByGeneratedSpecifier(href),
+            )
+            assignHtmlNodeAttributes(modulePreloadNode, {
+              rel: "preload",
+              as: "script",
+              href: newReference.generatedSpecifier,
+            })
+          })
+        })
+        moduleScriptNodes.forEach((moduleScriptNode) => {
+          const srcAttribute = getHtmlNodeAttributeByName(
+            moduleScriptNode,
+            "src",
+          )
           if (srcAttribute) {
             actions.push(async () => {
               const specifier = srcAttribute.value
-              const reference =
-                context.referenceUtils.findByGeneratedSpecifier(specifier)
-              const [newReference, newUrlInfo] = context.referenceUtils.update(
-                reference,
-                {
-                  expectedType: "js_classic",
-                  specifier: injectQueryParamsIntoSpecifier(specifier, {
-                    as_js_classic: "",
-                  }),
-                  filename: generateJsClassicFilename(reference.url),
-                },
+              const [newReference] = await getReferenceAsJsClassic(
+                context.referenceUtils.findByGeneratedSpecifier(specifier),
               )
-              removeHtmlNodeAttribute(node, typeAttribute)
+              removeHtmlNodeAttributeByName(moduleScriptNode, "type")
               srcAttribute.value = newReference.generatedSpecifier
-              // during dev it means js modules will be cooked before server sends the HTML
-              // it's ok because:
-              // - during dev script_type_module are supported (dev use a recent browser)
-              // - even if browser is not supported it still works it's jus a bit slower
-              //   because it needs to decide if systemjs will be injected or not
-              await context.cook({
-                reference: newReference,
-                urlInfo: newUrlInfo,
-              })
-              jsModuleUrlInfos.push(newUrlInfo)
             })
             return
           }
-          const textNode = getHtmlNodeTextNode(node)
+          const textNode = getHtmlNodeTextNode(moduleScriptNode)
           actions.push(async () => {
             const { line, column, lineEnd, columnEnd, isOriginal } =
-              htmlNodePosition.readNodePosition(node, {
+              htmlNodePosition.readNodePosition(moduleScriptNode, {
                 preferOriginal: true,
               })
             let inlineScriptUrl = generateInlineContentUrl({
@@ -86,7 +199,7 @@ export const jsenvPluginScriptTypeModuleAsClassic = ({
               columnEnd,
             })
             const [inlineReference] = context.referenceUtils.foundInline({
-              node,
+              node: moduleScriptNode,
               type: "script_src",
               expectedType: "js_module",
               // we remove 1 to the line because imagine the following html:
@@ -99,39 +212,26 @@ export const jsenvPluginScriptTypeModuleAsClassic = ({
               contentType: "application/javascript",
               content: textNode.value,
             })
-            const [newReference, newUrlInfo] = context.referenceUtils.update(
+            const [, newUrlInfo] = await getReferenceAsJsClassic(
               inlineReference,
-              {
-                expectedType: "js_classic",
-                specifier: injectQueryParamsIntoSpecifier(inlineScriptUrl, {
-                  as_js_classic: "",
-                }),
-                filename: generateJsClassicFilename(inlineReference.url),
-              },
             )
-            await context.cook({
-              reference: newReference,
-              urlInfo: newUrlInfo,
-            })
-            removeHtmlNodeAttribute(node, typeAttribute)
-            setHtmlNodeGeneratedText(node, {
+            removeHtmlNodeAttributeByName(moduleScriptNode, "type")
+            setHtmlNodeGeneratedText(moduleScriptNode, {
               generatedText: newUrlInfo.content,
               generatedBy: "jsenv:script_type_module_as_classic",
             })
-            jsModuleUrlInfos.push(newUrlInfo)
           })
-        }
-        visitHtmlAst(htmlAst, (node) => {
-          visitScriptTypeModule(node)
         })
+
         if (actions.length === 0) {
           return null
         }
         await Promise.all(actions.map((action) => action()))
         if (systemJsInjection) {
-          const needsSystemJs = jsModuleUrlInfos.some(
-            (jsModuleUrlInfo) =>
-              jsModuleUrlInfo.data.jsClassicFormat === "system",
+          const needsSystemJs = jsModuleUrls.some(
+            (jsModuleUrl) =>
+              context.urlGraph.getUrlInfo(jsModuleUrl).data.jsClassicFormat ===
+              "system",
           )
           if (needsSystemJs) {
             const [systemJsReference] = context.referenceUtils.inject({

package/src/plugins/transpilation/babel/helpers/babel_plugin_structure.js

@@ -31,9 +31,12 @@ export const getBaseBabelPluginStructure = ({ url, isSupported }) => {
       requireBabelPlugin("@babel/plugin-proposal-unicode-property-regex")
   }
   if (isBabelPluginNeeded("transform-async-to-promises")) {
-    babelPluginStructure["transform-async-to-promises"] = requireBabelPlugin(
-      "babel-plugin-transform-async-to-promises",
-    )
+    babelPluginStructure["transform-async-to-promises"] = [
+      requireBabelPlugin("babel-plugin-transform-async-to-promises"),
+      {
+        topLevelAwait: "ignore", // will be handled by "jsenv:top_level_await" plugin
+      },
+    ]
   }
   if (isBabelPluginNeeded("transform-arrow-functions")) {
     babelPluginStructure["transform-arrow-functions"] = requireBabelPlugin(

package/src/plugins/transpilation/fetch_original_url_info.js

@@ -0,0 +1,30 @@
+export const fetchOriginalUrlInfo = async ({
+  urlInfo,
+  context,
+  searchParam,
+  expectedType,
+}) => {
+  const urlObject = new URL(urlInfo.url)
+  const { searchParams } = urlObject
+  if (!searchParams.has(searchParam)) {
+    return null
+  }
+  searchParams.delete(searchParam)
+  const originalUrl = urlObject.href
+  const originalReference = {
+    ...(context.reference.original || context.reference),
+    expectedType,
+  }
+  originalReference.url = originalUrl
+  const originalUrlInfo = context.urlGraph.reuseOrCreateUrlInfo(
+    originalReference.url,
+  )
+  await context.fetchUrlContent({
+    reference: originalReference,
+    urlInfo: originalUrlInfo,
+  })
+  if (originalUrlInfo.dependents.size === 0) {
+    context.urlGraph.deleteUrlInfo(originalUrlInfo.url)
+  }
+  return originalUrlInfo
+}

package/src/plugins/transpilation/import_assertions/jsenv_plugin_import_assertions.js

@@ -5,6 +5,7 @@ import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
 import { injectQueryParamsIntoSpecifier } from "@jsenv/utils/urls/url_utils.js"
 import { JS_QUOTES } from "@jsenv/utils/string/js_quotes.js"
 
+import { fetchOriginalUrlInfo } from "../fetch_original_url_info.js"
 import { babelPluginMetadataImportAssertions } from "./helpers/babel_plugin_metadata_import_assertions.js"
 
 export const jsenvPluginImportAssertions = () => {
@@ -95,125 +96,106 @@ const jsenvPluginAsModules = () => {
   const asJsonModule = {
     name: `jsenv:as_json_module`,
     appliesDuring: "*",
-    fetchUrlContent: (urlInfo, context) => {
-      return fetchOriginalUrl({
+    fetchUrlContent: async (urlInfo, context) => {
+      const originalUrlInfo = await fetchOriginalUrlInfo({
         urlInfo,
         context,
         searchParam: "as_json_module",
-        convertToJsModule: (urlInfo) => {
-          // here we could `export default ${jsonText}`:
-          // but js engine are optimized to recognize JSON.parse
-          // and use a faster parsing strategy
-          return `export default JSON.parse(${JSON.stringify(
-            urlInfo.content.trim(),
-          )})`
-        },
+        expectedType: "json",
       })
+      if (!originalUrlInfo) {
+        return null
+      }
+      const jsonText = JSON.stringify(originalUrlInfo.content.trim())
+      return {
+        type: "js_module",
+        contentType: "text/javascript",
+        // here we could `export default ${jsonText}`:
+        // but js engine are optimized to recognize JSON.parse
+        // and use a faster parsing strategy
+        content: `export default JSON.parse(${jsonText})`,
+      }
     },
   }
 
   const asCssModule = {
     name: `jsenv:as_css_module`,
     appliesDuring: "*",
-    fetchUrlContent: (urlInfo, context) => {
-      return fetchOriginalUrl({
+    fetchUrlContent: async (urlInfo, context) => {
+      const originalUrlInfo = await fetchOriginalUrlInfo({
         urlInfo,
         context,
         searchParam: "as_css_module",
-        convertToJsModule: (urlInfo) => {
-          const cssText = JS_QUOTES.escapeSpecialChars(urlInfo.content, {
-            // If template string is choosen and runtime do not support template literals
-            // it's ok because "jsenv:new_inline_content" plugin executes after this one
-            // and convert template strings into raw strings
-            canUseTemplateString: true,
-          })
-          return `import { InlineContent } from ${JSON.stringify(
-            inlineContentClientFileUrl,
-          )}
-    
-const inlineContent = new InlineContent(${cssText}, { type: "text/css" })
-const stylesheet = new CSSStyleSheet()
-stylesheet.replaceSync(inlineContent.text)
-export default stylesheet`
-        },
+        expectedType: "css",
+      })
+      if (!originalUrlInfo) {
+        return null
+      }
+      const cssText = JS_QUOTES.escapeSpecialChars(originalUrlInfo.content, {
+        // If template string is choosen and runtime do not support template literals
+        // it's ok because "jsenv:new_inline_content" plugin executes after this one
+        // and convert template strings into raw strings
+        canUseTemplateString: true,
       })
+      return {
+        type: "js_module",
+        contentType: "text/javascript",
+        content: `import { InlineContent } from ${JSON.stringify(
+          inlineContentClientFileUrl,
+        )}
+  
+  const inlineContent = new InlineContent(${cssText}, { type: "text/css" })
+  const stylesheet = new CSSStyleSheet()
+  stylesheet.replaceSync(inlineContent.text)
+  export default stylesheet`,
+      }
     },
   }
 
   const asTextModule = {
     name: `jsenv:as_text_module`,
     appliesDuring: "*",
-    fetchUrlContent: (urlInfo, context) => {
-      return fetchOriginalUrl({
+    fetchUrlContent: async (urlInfo, context) => {
+      const originalUrlInfo = await fetchOriginalUrlInfo({
         urlInfo,
         context,
         searchParam: "as_text_module",
-        convertToJsModule: (urlInfo) => {
-          const textPlain = JS_QUOTES.escapeSpecialChars(urlInfo.content, {
-            // If template string is choosen and runtime do not support template literals
-            // it's ok because "jsenv:new_inline_content" plugin executes after this one
-            // and convert template strings into raw strings
-            canUseTemplateString: true,
-          })
-          return `import { InlineContent } from ${JSON.stringify(
-            inlineContentClientFileUrl,
-          )}
-    
-const inlineContent = new InlineContent(${textPlain}, { type: "text/plain" })
-export default inlineContent.text`
-        },
+        expectedType: "text",
+      })
+      if (!originalUrlInfo) {
+        return null
+      }
+      const textPlain = JS_QUOTES.escapeSpecialChars(urlInfo.content, {
+        // If template string is choosen and runtime do not support template literals
+        // it's ok because "jsenv:new_inline_content" plugin executes after this one
+        // and convert template strings into raw strings
+        canUseTemplateString: true,
       })
+      return {
+        type: "js_module",
+        contentType: "text/javascript",
+        content: `import { InlineContent } from ${JSON.stringify(
+          inlineContentClientFileUrl,
+        )}
+  
+const inlineContent = new InlineContent(${textPlain}, { type: "text/plain" })
+export default inlineContent.text`,
+      }
     },
   }
 
   return [asJsonModule, asCssModule, asTextModule]
 }
 
-const fetchOriginalUrl = async ({
-  urlInfo,
-  context,
-  searchParam,
-  expectedType,
-  convertToJsModule,
-}) => {
-  const urlObject = new URL(urlInfo.url)
-  const { searchParams } = urlObject
-  if (!searchParams.has(searchParam)) {
-    return null
-  }
-  searchParams.delete(searchParam)
-  const originalUrl = urlObject.href
-  const originalReference = {
-    ...(context.reference.original || context.reference),
-    expectedType,
-  }
-  originalReference.url = originalUrl
-  const originalUrlInfo = context.urlGraph.reuseOrCreateUrlInfo(
-    originalReference.url,
-  )
-  await context.fetchUrlContent({
-    reference: originalReference,
-    urlInfo: originalUrlInfo,
-  })
-  return {
-    type: "js_module",
-    contentType: "text/javascript",
-    content: convertToJsModule(originalUrlInfo, context),
-  }
-}
-
 const importAsInfos = {
   json: {
     searchParam: "as_json_module",
-    expectedType: "json",
   },
   css: {
     searchParam: "as_css_module",
-    expectedType: "css",
   },
   text: {
     searchParam: "as_text_module",
-    expectedType: "text",
   },
 }
 

package/src/plugins/transpilation/jsenv_plugin_transpilation.js

@@ -11,6 +11,7 @@ import { jsenvPluginCssParcel } from "./css_parcel/jsenv_plugin_css_parcel.js"
 import { jsenvPluginImportAssertions } from "./import_assertions/jsenv_plugin_import_assertions.js"
 import { jsenvPluginAsJsClassic } from "./as_js_classic/jsenv_plugin_as_js_classic.js"
 import { jsenvPluginBabel } from "./babel/jsenv_plugin_babel.js"
+import { jsenvPluginTopLevelAwait } from "./jsenv_plugin_top_level_await.js"
 
 export const jsenvPluginTranspilation = ({
   importAssertions = true,
@@ -35,6 +36,9 @@ export const jsenvPluginTranspilation = ({
     ...(jsModuleAsJsClassic
       ? [jsenvPluginAsJsClassic({ systemJsInjection })]
       : []),
+    // topLevelAwait must come after js_module_as_js_classic because it's related to the module format
+    // so we want to wait to know the module format before transforming things related to top level await
+    ...(topLevelAwait ? [jsenvPluginTopLevelAwait(topLevelAwait)] : []),
     ...(css ? [jsenvPluginCssParcel()] : []),
   ]
 }