@jsenv/core 25.0.0-alpha.4 → 25.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "25.0.0-alpha.4",
+  "version": "25.1.1",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "https://github.com/jsenv/jsenv-core"
   },
   "engines": {
-    "node": ">=14.9.0"
+    "node": ">=16.13.0"
   },
   "publishConfig": {
     "access": "public"

package/readme.md

@@ -1,10 +1,20 @@
 # jsenv [![npm package](https://img.shields.io/npm/v/@jsenv/core.svg?logo=npm&label=package)](https://www.npmjs.com/package/@jsenv/core) [![github main worflow](https://github.com/jsenv/jsenv-core/workflows/main/badge.svg)](https://github.com/jsenv/jsenv-core/actions?workflow=main) [![codecov coverage](https://codecov.io/gh/jsenv/jsenv-core/branch/master/graph/badge.svg)](https://codecov.io/gh/jsenv/jsenv-core)
 
-_@jsenv/core_ is a quick start pack to launch a js project.
+_@jsenv/core_ is a quick start pack to launch a js project. It provides what you need from the beginning: develoment, testing and building all in one.
 
-You don't have to pick a JavaScript framework: jsenv integrates naturally with standard HTML, CSS and JS. It provides what you need from the beginning: a dev server, a build tool and a test "framework", all in one.
+Jsenv integrates naturally with standard HTML, CSS and JS: you don't have to pick a JavaScript framework.
 
-# Test runner overview
+# Overview
+
+This section demos 3 things jsenv provides:
+
+1. A test runner
+2. A dev server
+3. A build script
+
+Don't be fooled by the apparent simplicity of the following demos, jsenv can be used on more complex scenarios as well.
+
+## Test runner overview
 
 Let's assume you want to test `countDogs` exported by _animals.js_ file.
 
@@ -94,7 +104,7 @@ total duration: 1.2 seconds
 
 To read more about testing in jsenv, check [jsenv test runner documentation](./docs/testing/readme.md#jsenv-test-runner).
 
-# Dev server overview
+## Dev server overview
 
 You want to execute the following _main.html_ file in a browser.
 
@@ -155,7 +165,7 @@ Browser navigates to _main.html_ and execute the file. Hello world is displayed
 
 To read more about jsenv dev server, check [jsenv dev server documentation](./docs/dev_server/readme.md#jsenv-dev-server).
 
-# Build overview
+## Build overview
 
 Following the steps below turns a `main.html` into an optimized `dist/main.prod.html`.
 Only the content of html files is shown below because the content of non-html files is trivial.
@@ -253,7 +263,7 @@ Jsenv was first created to write tests that could be executed in different runti
 - A test runner to execute test files
 - A build tool to optimize files for production
 
-Jsenv relies on standard web features. Each standard listed below is potentially supported natively by the browser. When browser supports all of them, jsenv will use source files without modification. Otherwise, the files are compiled to be executable in the browser.
+Jsenv relies on **standard web features**. Each standard listed below is potentially supported natively by the browser. When browser supports all of them, jsenv will use source files without modification. Otherwise, the files are compiled to be executable in the browser.
 
 - `<script type="module">`
 - `<script type="importmap">`
@@ -266,7 +276,7 @@ Jsenv relies on standard web features. Each standard listed below is potentially
 
 Amongst other use cases, the ease of use and flexibility of jsenv makes it a great tool to start and learn web development.
 
-First because jsenv is a tool that was built to run raw js, html and css. It starts from the **simplest form of coding** in JavaScript. If a browser can run your code, so can jsenv without configuration or things to learn. There is no magic that will bite you right away or later. Jsenv can be configured to add more stuff later, on demand.
+First because jsenv is a tool that was built to run raw js, html and css. It starts from the **simplest form of coding**. If a browser can run your code, so can jsenv without configuration or things to learn. There is no magic that will bite you right away or later. Jsenv can be configured to add more stuff later, on demand.
 
 Second because jsenv is compatible with the latest standards. Even some that are not yet mature in the js ecosystem, such as import maps. This will makes you at ease with technologies that will be part of the ecosystem once you are confortable with coding.
 
@@ -347,9 +357,12 @@ This file helps to see jsenv configuration quickly and share it between files. T
 
 ## babel.config.cjs
 
-When code needs to be transformed, the project must contain a [babel config file](https://babeljs.io/docs/en/config-files).
+You need a babel config file when:
+
+- Your code use non standard concepts. Examples: JSX, TypeScript.
+- You need to be compatible with browsers where some features used by your codebase are not available. Examples: `async/await`, destructuring.
 
-It's recommended to use the following _babel.config.cjs_
+It's recommended to start with the following _babel.config.cjs_
 
 ```js
 /*
@@ -364,14 +377,16 @@ module.exports = {
 }
 ```
 
+This babel config file will be used as explained in [Browser support](./docs/config/browser_support.md). It can also be used to enable [JSX](./docs/config/react.md#Using-JSX) and [TypeScript](./docs/config/typescript.md).
+
 # See also
 
 | Link                                                                                 | Description                                                               |
 | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
 | [Browser support](./docs/config/browser_support.md)                                  | Document how to configure browser support                                 |
 | [Web workers](./docs/config/web_workers.md)                                          | Document how to use web workers                                           |
+| [NPM package](./docs/config/npm_package.md)                                          | Document how to use a NPM package                                         |
 | [React](./docs/config/react.md)                                                      | Document how to enable react/preact and JSX                               |
-| [CommonJS modules](./docs/config/commonjs.md)                                        | Document how to use code written in CommonJS                              |
 | [TypeScript (Experimental)](./docs/config/typescript.md)                             | Document how to enable TypeScript                                         |
 | [@jsenv/template-pwa](https://github.com/jsenv/jsenv-template-pwa)                   | GitHub repository template for a progressive web application              |
 | [@jsenv/template-node-package](https://github.com/jsenv/jsenv-template-node-package) | GitHub repository template for a node package                             |

package/src/executeTestPlan.js

@@ -254,6 +254,17 @@ export const executeTestPlan = async ({
     await Promise.all(promises)
   }
 
+  // Sometimes on windows test plan scripts never ends
+  // I suspect it's some node process keeping the process alive
+  // because not properly killed for some reason.
+  // (It can be reproduced on @jsenv/importmap-node-module where playwright is not involved)
+  // The hotfix for now is to manually call process.exit() in on windows
+  if (process.platform === "win32") {
+    setTimeout(() => {
+      process.exit()
+    }, 2000).unref()
+  }
+
   return {
     testPlanAborted: result.aborted,
     testPlanSummary: result.planSummary,

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

@@ -24,7 +24,7 @@ import {
   replaceHtmlNode,
   getHtmlNodeAttributeByName,
   stringifyHtmlAst,
-  getUniqueNameForInlineHtmlNode,
+  getIdForInlineHtmlNode,
   removeHtmlNodeAttribute,
   setHtmlNodeText,
   getHtmlNodeTextNode,
@@ -234,11 +234,10 @@ const regularScriptTextNodeVisitor = (
     return null
   }
 
-  const ressourceSpecifier = getUniqueNameForInlineHtmlNode(
-    script,
-    scripts,
-    `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
-  )
+  const scriptId = getIdForInlineHtmlNode(script, scripts)
+  const ressourceSpecifier = `${urlToFilename(
+    htmlRessource.url,
+  )}__inline__${scriptId}.js`
   const jsReference = notifyReferenceFound({
     referenceLabel: "html inline script",
     contentTypeExpected: "application/javascript",
@@ -333,11 +332,10 @@ const moduleScriptTextNodeVisitor = (
     return null
   }
 
-  const ressourceSpecifier = getUniqueNameForInlineHtmlNode(
-    script,
-    scripts,
-    `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
-  )
+  const scriptId = getIdForInlineHtmlNode(script, scripts)
+  const ressourceSpecifier = `${urlToFilename(
+    htmlRessource.url,
+  )}__inline__${scriptId}.js`
   const jsReference = notifyReferenceFound({
     referenceLabel: "html inline module script",
     contentTypeExpected: "application/javascript",
@@ -445,16 +443,14 @@ const importmapScriptTextNodeVisitor = (
     return null
   }
 
+  const importmapScriptId = getIdForInlineHtmlNode(script, scripts)
   const importmapReference = notifyReferenceFound({
     referenceLabel: "html inline importmap",
     contentTypeExpected: "application/importmap+json",
-    ressourceSpecifier: getUniqueNameForInlineHtmlNode(
-      script,
-      scripts,
-      `${urlToFilename(htmlRessource.url)}__inline__[id].importmap`,
-    ),
+    ressourceSpecifier: `${urlToFilename(
+      htmlRessource.url,
+    )}__inline__${importmapScriptId}.importmap`,
     ...referenceLocationFromHtmlNode(script),
-
     contentType: "application/importmap+json",
     bufferBeforeBuild: Buffer.from(textNode.value),
     isInline: true,
@@ -648,16 +644,14 @@ const styleTextNodeVisitor = (
     return null
   }
 
+  const styleId = getIdForInlineHtmlNode(style, styles)
   const inlineStyleReference = notifyReferenceFound({
     referenceLabel: "html style",
     contentTypeExpected: "text/css",
-    ressourceSpecifier: getUniqueNameForInlineHtmlNode(
-      style,
-      styles,
-      `${urlToFilename(htmlRessource.url)}__inline__[id].css`,
-    ),
+    ressourceSpecifier: `${urlToFilename(
+      htmlRessource.url,
+    )}__inline__${styleId}.css`,
     ...referenceLocationFromHtmlNode(style),
-
     contentType: "text/css",
     bufferBeforeBuild: Buffer.from(textNode.value),
     isInline: true,

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

@@ -14,8 +14,8 @@ export const parseJsRessource = async (
   const jsUrl = jsRessource.url
   const jsString = String(jsRessource.bufferBeforeBuild)
   const jsSourcemapUrl = getJavaScriptSourceMappingUrl(jsString)
-  let sourcemapReference
 
+  let sourcemapReference
   if (jsSourcemapUrl) {
     sourcemapReference = notifyReferenceFound({
       referenceLabel: "js sourcemapping comment",
@@ -76,13 +76,10 @@ export const parseJsRessource = async (
       code = result.code
       map = result.map
     }
-
     jsRessource.buildEnd(code)
-
     if (!map) {
       return
     }
-
     // In theory code should never be modified once buildEnd() is called
     // because buildRelativeUrl might be versioned based on file content
     // There is an exception for sourcemap because we want to update sourcemap.file
@@ -99,7 +96,6 @@ export const parseJsRessource = async (
       `${urlToFilename(jsBuildUrl)}.map`,
       jsBuildUrl,
     )
-
     map.file = urlToFilename(jsBuildUrl)
     if (map.sources) {
       map.sources = map.sources.map((source) => {
@@ -114,7 +110,6 @@ export const parseJsRessource = async (
     }
     const mapAsText = JSON.stringify(map, null, "  ")
     sourcemapRessource.buildEnd(mapAsText)
-
     const sourcemapBuildUrl = resolveUrl(
       sourcemapRessource.buildRelativeUrl,
       buildDirectoryUrl,

package/src/internal/building/ressource_builder.js

@@ -948,8 +948,14 @@ export const createRessourceBuilder = (
     }
     return {
       ...htmlUrlSite,
-      line: htmlUrlSite.line + urlSite.line,
-      column: htmlUrlSite.column + urlSite.column,
+      line:
+        typeof urlSite.line === "number"
+          ? htmlUrlSite.line + urlSite.line
+          : htmlUrlSite.line,
+      column:
+        typeof urlSite.column === "number"
+          ? htmlUrlSite.column + urlSite.column
+          : htmlUrlSite.column,
     }
   }
 

package/src/internal/building/rollup_plugin_jsenv.js

@@ -690,6 +690,9 @@ export const createRollupPlugins = async ({
                     // we compile for rollup, let top level await untouched
                     // it will be converted, if needed, during "renderChunk" hook
                     topLevelAwait: "ignore",
+                    // if we put babel helpers, rollup might try to share them and a file
+                    // might try to import from an inline script resulting in 404.
+                    babelHelpersInjectionAsImport: false,
                   })
                   let code = transformResult.code
                   let map = transformResult.map

package/src/internal/building/url_versioning.js

@@ -65,8 +65,8 @@ const createAvailableNameGenerator = () => {
   const getAvailableNameForPattern = (name, pattern) => {
     let names = cache[pattern]
     if (!names) {
-      cache[pattern] = []
       names = []
+      cache[pattern] = names
     }
 
     let nameCandidate = name
@@ -133,7 +133,7 @@ const getFilenamePattern = ({
   }
 
   if (ressource.isJsModule) {
-    return "[name]_[hash][extname]"
+    return "[name]_[hash].js"
   }
 
   return ressource.urlVersioningDisabled

package/src/internal/compiling/compileHtml.js

@@ -495,35 +495,22 @@ export const createInlineScriptHash = (script) => {
   return hash.digest("hex").slice(0, 8)
 }
 
-export const getUniqueNameForInlineHtmlNode = (node, nodes, pattern) => {
-  return renderNamePattern(pattern, {
-    id: () => {
-      const idAttribute = getHtmlNodeAttributeByName(node, "id")
-      if (idAttribute) {
-        return idAttribute.value
-      }
-
-      const { line, column } = getHtmlNodeLocation(node) || {}
-      const lineTaken = nodes.some((nodeCandidate) => {
-        if (nodeCandidate === node) return false
-        const htmlNodeLocation = getHtmlNodeLocation(nodeCandidate)
-        if (!htmlNodeLocation) return false
-        return htmlNodeLocation.line === line
-      })
-      if (lineTaken) {
-        return `${line}.${column}`
-      }
-
-      return line
-    },
-  })
-}
-
-const renderNamePattern = (pattern, replacements) => {
-  return pattern.replace(/\[(\w+)\]/g, (_match, type) => {
-    const replacement = replacements[type]()
-    return replacement
+export const getIdForInlineHtmlNode = (node, nodes) => {
+  const idAttribute = getHtmlNodeAttributeByName(node, "id")
+  if (idAttribute) {
+    return idAttribute.value
+  }
+  const { line, column } = getHtmlNodeLocation(node) || {}
+  const lineTaken = nodes.some((nodeCandidate) => {
+    if (nodeCandidate === node) return false
+    const htmlNodeLocation = getHtmlNodeLocation(nodeCandidate)
+    if (!htmlNodeLocation) return false
+    return htmlNodeLocation.line === line
   })
+  if (lineTaken) {
+    return `${line}.${column}`
+  }
+  return line
 }
 
 const parseHtmlAsSingleElement = (html) => {

package/src/internal/compiling/html_source_file_service.js

@@ -41,7 +41,7 @@ import {
   removeHtmlNodeAttribute,
   getHtmlNodeTextNode,
   setHtmlNodeText,
-  getUniqueNameForInlineHtmlNode,
+  getIdForInlineHtmlNode,
 } from "./compileHtml.js"
 import { jsenvCoreDirectoryUrl } from "../jsenvCoreDirectoryUrl.js"
 
@@ -121,8 +121,8 @@ export const createTransformHtmlSourceFileService = ({
       jsenvScriptInjection,
       jsenvEventSourceClientInjection,
       jsenvToolbarInjection,
-      onInlineModuleScript: ({ scriptContent, scriptIdentifier }) => {
-        const inlineScriptUrl = resolveUrl(scriptIdentifier, fileUrl)
+      onInlineModuleScript: ({ scriptContent, scriptSpecifier }) => {
+        const inlineScriptUrl = resolveUrl(scriptSpecifier, fileUrl)
         htmlInlineScriptMap.set(inlineScriptUrl, {
           htmlFileUrl: fileUrl,
           scriptContent,
@@ -248,19 +248,18 @@ const transformHTMLSourceFile = async ({
       // inline
       const textNode = getHtmlNodeTextNode(script)
       if (typeAttribute && typeAttribute.value === "module" && textNode) {
-        const scriptIdentifier = getUniqueNameForInlineHtmlNode(
-          script,
-          scripts,
-          `${urlToFilename(fileUrl)}__inline__[id].js`,
-        )
+        const scriptId = getIdForInlineHtmlNode(script, scripts)
+        const scriptSpecifier = `${urlToFilename(
+          fileUrl,
+        )}__inline__${scriptId}.js`
         onInlineModuleScript({
           scriptContent: textNode.value,
-          scriptIdentifier,
+          scriptSpecifier,
         })
         setHtmlNodeText(
           script,
           `window.__jsenv__.executeFileUsingDynamicImport(${JSON.stringify(
-            `./${scriptIdentifier}`,
+            `./${scriptSpecifier}`,
           )})`,
         )
         return

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -1,7 +1,14 @@
-import { resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
+import {
+  resolveUrl,
+  urlToFilename,
+  urlToBasename,
+  urlToRelativeUrl,
+  urlIsInsideOf,
+} from "@jsenv/filesystem"
 import { moveImportMap, composeTwoImportMaps } from "@jsenv/importmap"
 import { createDetailedMessage } from "@jsenv/logger"
 
+import { jsenvDistDirectoryUrl } from "@jsenv/core/src/internal/jsenvCoreDirectoryUrl.js"
 import {
   BROWSER_RUNTIME_BUILD_URL,
   EVENT_SOURCE_CLIENT_BUILD_URL,
@@ -23,7 +30,7 @@ import {
   stringifyHtmlAst,
   getHtmlNodeAttributeByName,
   getHtmlNodeTextNode,
-  getUniqueNameForInlineHtmlNode,
+  getIdForInlineHtmlNode,
   removeHtmlNodeAttribute,
   setHtmlNodeText,
   visitHtmlAst,
@@ -39,6 +46,7 @@ export const compileHtml = async ({
   url,
   compiledUrl,
   projectDirectoryUrl,
+  compileServerOrigin,
   outDirectoryRelativeUrl,
   compileId,
 
@@ -104,248 +112,472 @@ export const compileHtml = async ({
     ],
   })
 
-  let sources = []
-  let sourcesContent = []
+  const sources = []
+  const sourcesContent = []
+  const assets = []
+  const assetsContent = []
+
+  const addHtmlSourceFile = ({ url, content }) => {
+    sources.push(url)
+    sourcesContent.push(content)
+  }
+  addHtmlSourceFile({ url, content: code })
+
   const { scripts } = parseHtmlAstRessources(htmlAst)
-  let importmapInfo = null
-  scripts.forEach((script) => {
-    const typeAttribute = getHtmlNodeAttributeByName(script, "type")
-    if (typeAttribute && typeAttribute.value === "importmap") {
-      if (importmapInfo) {
-        console.error("HTML file must contain max 1 importmap")
-      } else {
-        const srcAttribute = getHtmlNodeAttributeByName(script, "src")
-        const src = srcAttribute ? srcAttribute.value : ""
-        if (src) {
-          importmapInfo = {
-            script,
-            url: resolveUrl(src, url),
-            load: async () => {
-              const importMapResponse = await fetchUrl(importmapInfo.url)
-              if (importMapResponse.status === 200) {
-                const importmapAsText = await importMapResponse.text()
-                let htmlImportmap = JSON.parse(importmapAsText)
-                htmlImportmap = moveImportMap(
-                  htmlImportmap,
-                  importmapInfo.url,
-                  url,
-                )
-                sources.push(importmapInfo.url)
-                sourcesContent.push(importmapAsText)
-                return htmlImportmap
-              }
-              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 {}
-            },
-          }
-        } else {
-          importmapInfo = {
-            script,
-            url: compiledUrl,
-            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 importmap = await importmapInfo.load()
-    const importmapAsText = JSON.stringify(importmap, null, "  ")
-    replaceHtmlNode(
-      importmapInfo.script,
-      `<script type="${
-        moduleOutFormat === "systemjs" ? "systemjs-importmap" : "importmap"
-      }">${importmapAsText}</script>`,
-      {
-        attributesToIgnore: ["src"],
-      },
-    )
-    importmapInfo.inlinedFrom = importmapInfo.url
-    importmapInfo.text = importmapAsText
-  } else {
-    const defaultImportMap = getDefaultImportmap(compiledUrl, {
-      projectDirectoryUrl,
-      compileDirectoryUrl: `${projectDirectoryUrl}${outDirectoryRelativeUrl}${compileId}/`,
+  const htmlDependencies = collectHtmlDependenciesFromAst(htmlAst)
+
+  const htmlAssetGenerators = []
+  const htmlMutations = []
+  const addHtmlAssetGenerator = (htmlAssetGenerator) => {
+    htmlAssetGenerators.push(htmlAssetGenerator)
+  }
+  const addHtmlMutation = (htmlMutation) => {
+    htmlMutations.push(htmlMutation)
+  }
+  const addHtmlDependency = ({ htmlNode, specifier }) => {
+    htmlDependencies.push({
+      htmlNode,
+      specifier,
     })
-    const importmapAsText = JSON.stringify(defaultImportMap, null, "  ")
-    manipulateHtmlAst(htmlAst, {
-      scriptInjections: [
+  }
+
+  const importmapInfo = await visitImportmapScript({
+    logger,
+    url,
+    compiledUrl,
+    projectDirectoryUrl,
+    compileId,
+    outDirectoryRelativeUrl,
+    scripts,
+    addHtmlSourceFile,
+  })
+  const importmap = (await importmapInfo.load()) || {}
+  const importmapAsText = JSON.stringify(importmap, null, "  ")
+  importmapInfo.inlinedFrom = importmapInfo.url
+  importmapInfo.text = importmapAsText
+  addHtmlMutation(() => {
+    if (importmapInfo.needsInjection) {
+      manipulateHtmlAst(htmlAst, {
+        scriptInjections: [
+          {
+            type:
+              moduleOutFormat === "systemjs"
+                ? "systemjs-importmap"
+                : "importmap",
+            // in case there is no importmap, force the presence
+            // so that '@jsenv/core/' are still remapped
+            text: importmapAsText,
+          },
+        ],
+      })
+    } else {
+      replaceHtmlNode(
+        importmapInfo.script,
+        `<script type="${
+          moduleOutFormat === "systemjs" ? "systemjs-importmap" : "importmap"
+        }">${importmapAsText}</script>`,
         {
-          type:
-            moduleOutFormat === "systemjs" ? "systemjs-importmap" : "importmap",
-          // in case there is no importmap, force the presence
-          // so that '@jsenv/core/' are still remapped
-          text: importmapAsText,
+          attributesToIgnore: ["src"],
         },
-      ],
-    })
-    importmapInfo = {
-      url: compiledUrl,
-      text: importmapAsText,
+      )
     }
-  }
+  })
   onHtmlImportmapInfo({
     htmlUrl: url,
     importmapInfo,
   })
 
-  const htmlDependencies = collectHtmlDependenciesFromAst(htmlAst)
-  const inlineScriptsContentMap = {}
+  await visitScripts({
+    logger,
+    projectDirectoryUrl,
+    compileServerOrigin,
+    url,
+    compiledUrl,
+    scripts,
+    addHtmlSourceFile,
+    addHtmlAssetGenerator,
+    addHtmlMutation,
+    addHtmlDependency,
+
+    babelPluginMap,
+    moduleOutFormat,
+    importMetaFormat,
+    topLevelAwait,
+    sourcemapMethod,
+  })
+  await Promise.all(
+    htmlAssetGenerators.map(async (htmlAssetGenerator) => {
+      const assetInfos = await htmlAssetGenerator()
+      assetInfos.forEach((assetInfo) => {
+        assets.push(assetInfo.url)
+        assetsContent.push(assetInfo.content)
+      })
+    }),
+  )
+  htmlAssetGenerators.length = 0
+
+  htmlMutations.forEach((htmlMutation) => {
+    htmlMutation()
+  })
+  htmlMutations.length = 0
+  const htmlAfterTransformation = stringifyHtmlAst(htmlAst)
+
+  return {
+    contentType: "text/html",
+    compiledSource: htmlAfterTransformation,
+    sources,
+    sourcesContent,
+    assets,
+    assetsContent,
+    dependencies: htmlDependencies.map(({ specifier }) => {
+      return specifier
+    }),
+  }
+}
+
+const visitImportmapScript = async ({
+  logger,
+  url,
+  compiledUrl,
+  projectDirectoryUrl,
+  compileId,
+  outDirectoryRelativeUrl,
+  scripts,
+  addHtmlSourceFile,
+}) => {
+  const importmapScripts = scripts.filter((script) => {
+    const typeAttribute = getHtmlNodeAttributeByName(script, "type")
+    const type = typeAttribute ? typeAttribute.value : "application/javascript"
+    return type === "importmap"
+  })
+  if (importmapScripts.length === 0) {
+    return {
+      needsInjection: true,
+      url: compiledUrl,
+      load: () => {
+        const defaultImportMap = getDefaultImportmap(compiledUrl, {
+          projectDirectoryUrl,
+          compileDirectoryUrl: `${projectDirectoryUrl}${outDirectoryRelativeUrl}${compileId}/`,
+        })
+        return defaultImportMap
+      },
+    }
+  }
+
+  if (importmapScripts.length > 1) {
+    logger.error("HTML file must contain max 1 importmap")
+  }
+  const firstImportmapScript = importmapScripts[0]
+  const srcAttribute = getHtmlNodeAttributeByName(firstImportmapScript, "src")
+  const src = srcAttribute ? srcAttribute.value : ""
+  if (src) {
+    const importmapUrl = resolveUrl(src, url)
+    const importmapInfo = {
+      script: firstImportmapScript,
+      url: importmapUrl,
+      load: async () => {
+        const importMapResponse = await fetchUrl(importmapUrl)
+        if (importMapResponse.status === 200) {
+          const importmapAsText = await importMapResponse.text()
+          addHtmlSourceFile({
+            url: importmapUrl,
+            content: importmapAsText,
+          })
+          let htmlImportmap = JSON.parse(importmapAsText)
+          htmlImportmap = moveImportMap(htmlImportmap, importmapUrl, url)
+          return htmlImportmap
+        }
+        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 null
+      },
+    }
+    return importmapInfo
+  }
+  const importmapInfo = {
+    script: firstImportmapScript,
+    url: compiledUrl,
+    load: () => {
+      const jsenvImportmap = getDefaultImportmap(compiledUrl, {
+        projectDirectoryUrl,
+        compileDirectoryUrl: `${projectDirectoryUrl}${compileId}/${outDirectoryRelativeUrl}`,
+      })
+      const htmlImportmap = JSON.parse(
+        getHtmlNodeTextNode(firstImportmapScript).value,
+      )
+      const importmap = composeTwoImportMaps(jsenvImportmap, htmlImportmap)
+      return importmap
+    },
+  }
+  return importmapInfo
+}
+
+const visitScripts = async ({
+  logger,
+  projectDirectoryUrl,
+  compileServerOrigin,
+  url,
+  compiledUrl,
+  scripts,
+  addHtmlSourceFile,
+  addHtmlAssetGenerator,
+  addHtmlMutation,
+  addHtmlDependency,
+
+  babelPluginMap,
+  moduleOutFormat,
+  importMetaFormat,
+  topLevelAwait,
+  sourcemapMethod,
+}) => {
   scripts.forEach((script) => {
     const typeAttribute = getHtmlNodeAttributeByName(script, "type")
+    const type = typeAttribute ? typeAttribute.value : "application/javascript"
     const srcAttribute = getHtmlNodeAttributeByName(script, "src")
     const src = srcAttribute ? srcAttribute.value : ""
-    // remote module script
-    if (typeAttribute && typeAttribute.value === "module" && src) {
-      if (moduleOutFormat === "systemjs") {
-        removeHtmlNodeAttribute(script, typeAttribute)
-      }
-      removeHtmlNodeAttribute(script, srcAttribute)
-      const jsenvMethod =
-        moduleOutFormat === "systemjs"
-          ? "executeFileUsingSystemJs"
-          : "executeFileUsingDynamicImport"
-      setHtmlNodeText(
-        script,
-        `window.__jsenv__.${jsenvMethod}(${JSON.stringify(src)})`,
-      )
-      return
-    }
-
-    // inline module script
     const textNode = getHtmlNodeTextNode(script)
-    if (typeAttribute && typeAttribute.value === "module" && textNode) {
-      if (moduleOutFormat === "systemjs") {
-        removeHtmlNodeAttribute(script, typeAttribute)
+
+    if (type === "module") {
+      if (src) {
+        addHtmlMutation(() => {
+          if (moduleOutFormat === "systemjs") {
+            removeHtmlNodeAttribute(script, typeAttribute)
+          }
+          removeHtmlNodeAttribute(script, srcAttribute)
+          const jsenvMethod =
+            moduleOutFormat === "systemjs"
+              ? "executeFileUsingSystemJs"
+              : "executeFileUsingDynamicImport"
+          setHtmlNodeText(
+            script,
+            `window.__jsenv__.${jsenvMethod}(${JSON.stringify(src)})`,
+          )
+        })
+        return
       }
-      removeHtmlNodeAttribute(script, srcAttribute)
-      const scriptAssetUrl = generateCompiledFileAssetUrl(
+
+      const scriptId = getIdForInlineHtmlNode(script, scripts)
+      const inlineScriptName = `${scriptId}.js`
+      const scriptOriginalUrl = resolveUrl(inlineScriptName, url)
+      const scriptCompiledUrl = generateCompiledFileAssetUrl(
         compiledUrl,
-        getUniqueNameForInlineHtmlNode(script, scripts, `[id].js`),
-      )
-      const specifier = `./${urlToRelativeUrl(scriptAssetUrl, compiledUrl)}`
-      inlineScriptsContentMap[specifier] = textNode.value
-      const jsenvMethod =
-        moduleOutFormat === "systemjs"
-          ? "executeFileUsingSystemJs"
-          : "executeFileUsingDynamicImport"
-      setHtmlNodeText(
-        script,
-        `window.__jsenv__.${jsenvMethod}(${JSON.stringify(specifier)})`,
+        inlineScriptName,
       )
-      htmlDependencies.push({
+      addHtmlAssetGenerator(async () => {
+        return transformHtmlScript({
+          projectDirectoryUrl,
+          url: scriptOriginalUrl,
+          compiledUrl: scriptCompiledUrl,
+          code: textNode.value,
+
+          type: "module",
+          babelPluginMap,
+          moduleOutFormat,
+          importMetaFormat,
+          topLevelAwait,
+          sourcemapMethod,
+        })
+      })
+      const specifier = `./${urlToRelativeUrl(scriptCompiledUrl, compiledUrl)}`
+      addHtmlMutation(() => {
+        if (moduleOutFormat === "systemjs") {
+          removeHtmlNodeAttribute(script, typeAttribute)
+        }
+        removeHtmlNodeAttribute(script, srcAttribute)
+        const jsenvMethod =
+          moduleOutFormat === "systemjs"
+            ? "executeFileUsingSystemJs"
+            : "executeFileUsingDynamicImport"
+        setHtmlNodeText(
+          script,
+          `window.__jsenv__.${jsenvMethod}(${JSON.stringify(specifier)})`,
+        )
+      })
+      addHtmlDependency({
         htmlNode: script,
         specifier,
       })
       return
     }
-  })
-  const htmlAfterTransformation = stringifyHtmlAst(htmlAst)
 
-  let assets = []
-  let assetsContent = []
-  await Promise.all(
-    Object.keys(inlineScriptsContentMap).map(async (scriptSrc) => {
-      const scriptAssetUrl = resolveUrl(scriptSrc, compiledUrl)
-      const scriptBasename = urlToRelativeUrl(scriptAssetUrl, compiledUrl)
-      const scriptOriginalFileUrl = resolveUrl(scriptBasename, url)
-      const scriptCompiledFileUrl = resolveUrl(scriptBasename, compiledUrl)
-
-      const scriptBeforeCompilation = inlineScriptsContentMap[scriptSrc]
-      let scriptTransformResult
-      try {
-        scriptTransformResult = await transformJs({
-          code: scriptBeforeCompilation,
-          url: scriptOriginalFileUrl,
-          compiledUrl: scriptCompiledFileUrl,
+    if (type === "application/javascript" || type === "text/javascript") {
+      if (src) {
+        const htmlServerUrl = url.replace(
+          projectDirectoryUrl,
+          `${compileServerOrigin}/`,
+        )
+        const scriptOriginalServerUrl = resolveUrl(src, htmlServerUrl)
+        const scriptOriginalUrl = scriptOriginalServerUrl.replace(
+          `${compileServerOrigin}/`,
           projectDirectoryUrl,
+        )
+        const fileIsInsideJsenvDistDirectory = urlIsInsideOf(
+          scriptOriginalUrl,
+          jsenvDistDirectoryUrl,
+        )
+        if (fileIsInsideJsenvDistDirectory) {
+          return
+        }
+
+        const scriptCompiledUrl = generateCompiledFileAssetUrl(
+          compiledUrl,
+          urlToFilename(scriptOriginalUrl),
+        )
+        addHtmlAssetGenerator(async () => {
+          // we fetch scriptOriginalUrl on purpose because we do
+          // the transformation here and not in compile server
+          // (because compile server would think it's a module script
+          // and add things like systemjs)
+          const scriptResponse = await fetchUrl(scriptOriginalUrl)
+          if (scriptResponse.status !== 200) {
+            logger.warn(
+              createDetailedMessage(
+                scriptResponse.status === 404
+                  ? `script file cannot be found.`
+                  : `script file unexpected response status (${scriptResponse.status}).`,
+                {
+                  "script url": script.url,
+                  "html url": url,
+                },
+              ),
+            )
+            return []
+          }
+          const scriptAsText = await scriptResponse.text()
+          addHtmlSourceFile({
+            url: scriptOriginalUrl,
+            content: scriptAsText,
+          })
+          return transformHtmlScript({
+            projectDirectoryUrl,
+            url: scriptOriginalUrl,
+            compiledUrl: scriptCompiledUrl,
+            code: scriptAsText,
 
+            type: "classic",
+            babelPluginMap,
+            moduleOutFormat,
+            importMetaFormat,
+            topLevelAwait,
+            sourcemapMethod,
+          })
+        })
+        addHtmlMutation(() => {
+          srcAttribute.value = `./${urlToRelativeUrl(
+            scriptCompiledUrl,
+            compiledUrl,
+          )}`
+        })
+        return
+      }
+      const scriptId = getIdForInlineHtmlNode(script, scripts)
+      const inlineScriptName = `${scriptId}.js`
+      const scriptOriginalUrl = resolveUrl(inlineScriptName, url)
+      const scriptCompiledUrl = generateCompiledFileAssetUrl(
+        compiledUrl,
+        inlineScriptName,
+      )
+      addHtmlAssetGenerator(async () => {
+        const htmlAssets = await transformHtmlScript({
+          projectDirectoryUrl,
+          url: scriptOriginalUrl,
+          compiledUrl: scriptCompiledUrl,
+          code: textNode.value,
+
+          type: "classic",
           babelPluginMap,
           moduleOutFormat,
           importMetaFormat,
           topLevelAwait,
+          sourcemapMethod,
         })
-      } catch (e) {
-        // If there is a syntax error in inline script
-        // we put the raw script without transformation.
-        // when systemjs will try to instantiate to script it
-        // will re-throw this syntax error.
-        // Thanks to this we see the syntax error in the
-        // document and livereloading still works
-        // because we gracefully handle this error
-        if (e.code === "PARSE_ERROR") {
-          const code = scriptBeforeCompilation
-          assets = [...assets, scriptAssetUrl]
-          assetsContent = [...assetsContent, code]
-          return
-        }
-        throw e
-      }
-      const sourcemapFileUrl = resolveUrl(
-        `${scriptBasename}.map`,
-        scriptCompiledFileUrl,
-      )
+        addHtmlMutation(() => {
+          setHtmlNodeText(script, htmlAssets[0].content)
+        })
+        return htmlAssets
+      })
+      return
+    }
+  })
+}
 
-      let { code, map } = scriptTransformResult
-      const sourcemapFileRelativePathForModule = urlToRelativeUrl(
-        sourcemapFileUrl,
-        compiledUrl,
-      )
+const transformHtmlScript = async ({
+  projectDirectoryUrl,
+  url,
+  compiledUrl,
+  code,
+  type,
 
-      if (sourcemapMethod === "inline") {
-        code = setJavaScriptSourceMappingUrl(code, sourcemapToBase64Url(map))
-      } else {
-        // TODO: respect "sourcemapMethod" parameter
-        code = setJavaScriptSourceMappingUrl(
-          code,
-          sourcemapFileRelativePathForModule,
-        )
-        assets = [...assets, scriptAssetUrl, sourcemapFileUrl]
-        assetsContent = [
-          ...assetsContent,
-          code,
-          JSON.stringify(map, null, "  "),
-        ]
-      }
-    }),
-  )
-  sources.push(url)
-  sourcesContent.push(code)
+  babelPluginMap,
+  moduleOutFormat,
+  importMetaFormat,
+  topLevelAwait,
+  sourcemapMethod,
+}) => {
+  let transformResult
+  try {
+    transformResult = await transformJs({
+      code,
+      url,
+      compiledUrl,
+      projectDirectoryUrl,
 
-  return {
-    contentType: "text/html",
-    compiledSource: htmlAfterTransformation,
-    sources,
-    sourcesContent,
-    assets,
-    assetsContent,
-    dependencies: htmlDependencies.map(({ specifier }) => {
-      return specifier
-    }),
+      babelPluginMap,
+      moduleOutFormat: type === "module" ? moduleOutFormat : "global",
+      importMetaFormat,
+      topLevelAwait: type === "module" ? topLevelAwait : false,
+      babelHelpersInjectionAsImport: type === "module" ? undefined : false,
+    })
+  } catch (e) {
+    // If there is a syntax error in inline script
+    // we put the raw script without transformation.
+    // when systemjs will try to instantiate to script it
+    // will re-throw this syntax error.
+    // Thanks to this we see the syntax error in the
+    // document and livereloading still works
+    // because we gracefully handle this error
+    if (e.code === "PARSE_ERROR") {
+      return [{ url, content: code }]
+    }
+    throw e
   }
+
+  code = transformResult.code
+  let map = transformResult.map
+  const sourcemapUrl = resolveUrl(
+    `${urlToBasename(compiledUrl)}.map`,
+    compiledUrl,
+  )
+  if (sourcemapMethod === "inline") {
+    code = setJavaScriptSourceMappingUrl(code, sourcemapToBase64Url(map))
+    return [
+      {
+        url: compiledUrl,
+        content: code,
+      },
+    ]
+  }
+  const sourcemapSpecifier = urlToRelativeUrl(sourcemapUrl, compiledUrl)
+  code = setJavaScriptSourceMappingUrl(code, sourcemapSpecifier)
+  return [
+    {
+      url: compiledUrl,
+      content: code,
+    },
+    {
+      url: sourcemapUrl,
+      content: JSON.stringify(map, null, "  "),
+    },
+  ]
 }
 
 // transform <link type="modulepreload"> into <link type="preload">

package/src/internal/compiling/startCompileServer.js

@@ -42,7 +42,10 @@ import {
   sourcemapMainFileInfo,
   sourcemapMappingFileInfo,
 } from "../jsenvInternalFiles.js"
-import { jsenvCoreDirectoryUrl } from "../jsenvCoreDirectoryUrl.js"
+import {
+  jsenvCoreDirectoryUrl,
+  jsenvDistDirectoryUrl,
+} from "../jsenvCoreDirectoryUrl.js"
 import { babelPluginReplaceExpressions } from "../babel_plugin_replace_expressions.js"
 import { babelPluginGlobalThisAsJsenvImport } from "./babel_plugin_global_this_as_jsenv_import.js"
 import { babelPluginNewStylesheetAsJsenvImport } from "./babel_plugin_new_stylesheet_as_jsenv_import.js"
@@ -945,7 +948,7 @@ const createSourceFileService = ({
       .href
     const fileIsInsideJsenvDistDirectory = urlIsInsideOf(
       fileUrl,
-      new URL("./dist/", jsenvCoreDirectoryUrl),
+      jsenvDistDirectoryUrl,
     )
 
     const responsePromise = fetchFileSystem(fileUrl, {

package/src/internal/jsenvCoreDirectoryUrl.js

@@ -17,4 +17,6 @@ if (typeof __filename === "string") {
   )
 }
 
+export const jsenvDistDirectoryUrl = new URL("./dist/", jsenvCoreDirectoryUrl)
+
 export { jsenvCoreDirectoryUrl }