@jsenv/core 25.0.1 → 25.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "25.0.1",
+  "version": "25.1.0",
   "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",
   "exports": {
@@ -138,4 +137,4 @@
     "redux": "4.1.2",
     "rollup-plugin-import-assert": "1.1.1"
   }
-}
+}

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. It provides what you need from the beginning: a dev server, a build tool and a test "framework", all in one.
+_@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.
 
-Jsenv integrates naturally with **standard** HTML, CSS and JS: you don't have to pick a JavaScript framework.
+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.

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/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,
@@ -39,6 +46,7 @@ export const compileHtml = async ({
   url,
   compiledUrl,
   projectDirectoryUrl,
+  compileServerOrigin,
   outDirectoryRelativeUrl,
   compileId,
 
@@ -104,248 +112,478 @@ 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)
+    const textNode = getHtmlNodeTextNode(script)
+
+    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 jsenvMethod =
-        moduleOutFormat === "systemjs"
-          ? "executeFileUsingSystemJs"
-          : "executeFileUsingDynamicImport"
-      setHtmlNodeText(
+
+      const inlineScriptName = getUniqueNameForInlineHtmlNode(
         script,
-        `window.__jsenv__.${jsenvMethod}(${JSON.stringify(src)})`,
+        scripts,
+        `[id].js`,
       )
-      return
-    }
-
-    // inline module script
-    const textNode = getHtmlNodeTextNode(script)
-    if (typeAttribute && typeAttribute.value === "module" && textNode) {
-      if (moduleOutFormat === "systemjs") {
-        removeHtmlNodeAttribute(script, typeAttribute)
-      }
-      removeHtmlNodeAttribute(script, srcAttribute)
-      const scriptAssetUrl = generateCompiledFileAssetUrl(
+      const scriptOriginalUrl = resolveUrl(inlineScriptName, url)
+      const scriptCompiledUrl = generateCompiledFileAssetUrl(
         compiledUrl,
-        getUniqueNameForInlineHtmlNode(script, scripts, `[id].js`),
+        inlineScriptName,
       )
-      const specifier = `./${urlToRelativeUrl(scriptAssetUrl, compiledUrl)}`
-      inlineScriptsContentMap[specifier] = textNode.value
-      const jsenvMethod =
-        moduleOutFormat === "systemjs"
-          ? "executeFileUsingSystemJs"
-          : "executeFileUsingDynamicImport"
-      setHtmlNodeText(
-        script,
-        `window.__jsenv__.${jsenvMethod}(${JSON.stringify(specifier)})`,
-      )
-      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 inlineScriptName = getUniqueNameForInlineHtmlNode(
+        script,
+        scripts,
+        `[id].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 }