@jsenv/core 25.0.0-alpha.3 → 25.1.0

package/dist/build_manifest.js

@@ -7,6 +7,6 @@ export const COMPILE_PROXY_BUILD_URL = new URL("compile_proxy/compile_proxy_7ad5
 
 export const EVENT_SOURCE_CLIENT_BUILD_URL = new URL("event_source_client/event_source_client_80644aee.js", import.meta.url).href
 
-export const TOOLBAR_BUILD_URL = new URL("toolbar/toolbar_04ba410c.html", import.meta.url).href
+export const TOOLBAR_BUILD_URL = new URL("toolbar/toolbar_f7b8a263.html", import.meta.url).href
 
-export const TOOLBAR_INJECTOR_BUILD_URL = new URL("toolbar_injector/toolbar_injector_4a48bc53.js", import.meta.url).href
+export const TOOLBAR_INJECTOR_BUILD_URL = new URL("toolbar_injector/toolbar_injector_49e4756e.js", import.meta.url).href

package/dist/toolbar/asset-manifest.json

@@ -8,6 +8,6 @@
   "assets/settings.css.map": "assets/settings.css_61548139.map",
   "assets/toolbar.main.css.map": "assets/toolbar.main.css_269d7ce2.map",
   "assets/tooltip.css.map": "assets/tooltip.css_a94a8bdd.map",
-  "toolbar.html": "toolbar_04ba410c.html",
-  "toolbar.main2.js.map": "toolbar.main2_6c1b3d82.js.map"
+  "toolbar.html": "toolbar_f7b8a263.html",
+  "toolbar.main.js.map": "toolbar.main_6c1b3d82.js.map"
 }

package/dist/toolbar/{toolbar_04ba410c.html → toolbar_f7b8a263.html}

@@ -5010,7 +5010,7 @@ html[data-toolbar-visible] #toolbar-trigger {
   };
 });
 
-//# sourceMappingURL=toolbar.main2_6c1b3d82.js.map</script>
+//# sourceMappingURL=toolbar.main_6c1b3d82.js.map</script>
   
 
 </body></html>

package/dist/toolbar_injector/asset-manifest.json

@@ -1,5 +1,5 @@
 {
   "assets/jsenv-logo.svg": "assets/jsenv-logo_188b9ca6.svg",
-  "toolbar_injector.js": "toolbar_injector_4a48bc53.js",
-  "toolbar_injector.js.map": "toolbar_injector_4a48bc53.js.map"
+  "toolbar_injector.js": "toolbar_injector_49e4756e.js",
+  "toolbar_injector.js.map": "toolbar_injector_49e4756e.js.map"
 }

package/dist/toolbar_injector/{toolbar_injector_4a48bc53.js → toolbar_injector_49e4756e.js}

@@ -746,7 +746,7 @@
     return then ? value.then(then) : value;
   }
 
-  var TOOLBAR_BUILD_RELATIVE_URL = "dist/toolbar/toolbar_04ba410c.html";
+  var TOOLBAR_BUILD_RELATIVE_URL = "dist/toolbar/toolbar_f7b8a263.html";
 
   function _call(body, then, direct) {
     if (direct) {
@@ -970,4 +970,4 @@
 
 })();
 
-//# sourceMappingURL=toolbar_injector_4a48bc53.js.map
+//# sourceMappingURL=toolbar_injector_49e4756e.js.map

package/dist/toolbar_injector/{toolbar_injector_4a48bc53.js.map → toolbar_injector_49e4756e.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "file": "toolbar_injector_4a48bc53.js",
+  "file": "toolbar_injector_49e4756e.js",
   "sources": [
     "../../helpers/babel/typeof/typeof.js",
     "../../helpers/babel/defineProperty/defineProperty.js",
@@ -25,7 +25,7 @@
     "import { fetchUrl } from \"./fetch-browser.js\"\n\nexport const fetchJson = async (url, options = {}) => {\n  const response = await fetchUrl(url, options)\n  const object = await response.json()\n  return object\n}\n",
     "import { fetchJson } from \"../../browser_utils/fetchJson.js\"\n\nexport const fetchExploringJson = async ({ signal } = {}) => {\n  try {\n    const exploringInfo = await fetchJson(\"/.jsenv/exploring.json\", {\n      signal,\n    })\n    return exploringInfo\n  } catch (e) {\n    if (signal && signal.aborted && e.name === \"AbortError\") {\n      throw e\n    }\n    throw new Error(\n      `Cannot communicate with exploring server due to a network error\n--- error stack ---\n${e.stack}`,\n    )\n  }\n}\n",
     "export const updateIframeOverflowOnParentWindow = () => {\n  if (!window.parent) {\n    // can happen while parent iframe reloads\n    return\n  }\n\n  const aTooltipIsOpened =\n    document.querySelector(\"[data-tooltip-visible]\") ||\n    document.querySelector(\"[data-tooltip-auto-visible]\")\n  const settingsAreOpened = document.querySelector(\"#settings[data-active]\")\n\n  if (aTooltipIsOpened || settingsAreOpened) {\n    enableIframeOverflowOnParentWindow()\n  } else {\n    disableIframeOverflowOnParentWindow()\n  }\n}\n\nlet iframeOverflowEnabled = false\nconst enableIframeOverflowOnParentWindow = () => {\n  if (iframeOverflowEnabled) return\n  iframeOverflowEnabled = true\n\n  const iframe = getToolbarIframe()\n  const transitionDuration = iframe.style.transitionDuration\n  setStyles(iframe, { \"height\": \"100%\", \"transition-duration\": \"0ms\" })\n  if (transitionDuration) {\n    setTimeout(() => {\n      setStyles(iframe, { \"transition-duration\": transitionDuration })\n    })\n  }\n}\n\nconst disableIframeOverflowOnParentWindow = () => {\n  if (!iframeOverflowEnabled) return\n  iframeOverflowEnabled = false\n\n  const iframe = getToolbarIframe()\n  const transitionDuration = iframe.style.transitionDuration\n  setStyles(iframe, { \"height\": \"40px\", \"transition-duration\": \"0ms\" })\n  if (transitionDuration) {\n    setTimeout(() => {\n      setStyles(iframe, { \"transition-duration\": transitionDuration })\n    })\n  }\n}\n\nexport const getToolbarIframe = () => {\n  const iframes = Array.from(window.parent.document.querySelectorAll(\"iframe\"))\n  return iframes.find((iframe) => iframe.contentWindow === window)\n}\n\nexport const forceHideElement = (element) => {\n  element.setAttribute(\"data-force-hide\", \"\")\n}\n\nexport const removeForceHideElement = (element) => {\n  element.removeAttribute(\"data-force-hide\")\n}\n\nexport const setStyles = (element, styles) => {\n  const elementStyle = element.style\n  const restoreStyles = Object.keys(styles).map((styleName) => {\n    let restore\n    if (styleName in elementStyle) {\n      const currentStyle = elementStyle[styleName]\n      restore = () => {\n        elementStyle[styleName] = currentStyle\n      }\n    } else {\n      restore = () => {\n        delete elementStyle[styleName]\n      }\n    }\n\n    elementStyle[styleName] = styles[styleName]\n\n    return restore\n  })\n  return () => {\n    restoreStyles.forEach((restore) => restore())\n  }\n}\n\nexport const setAttributes = (element, attributes) => {\n  Object.keys(attributes).forEach((name) => {\n    element.setAttribute(name, attributes[name])\n  })\n}\n\nexport const getDocumentScroll = () => {\n  return {\n    x: document.documentElement.scrollLeft,\n    y: document.documentElement.scrollTop,\n  }\n}\n\nexport const toolbarSectionIsActive = (element) => {\n  return element.hasAttribute(\"data-active\")\n}\n\nexport const activateToolbarSection = (element) => {\n  element.setAttribute(\"data-active\", \"\")\n}\n\nexport const deactivateToolbarSection = (element) => {\n  element.removeAttribute(\"data-active\")\n}\n",
-    "import { fetchExploringJson } from \"@jsenv/core/src/internal/dev_server/exploring/fetchExploringJson.js\"\nimport { setAttributes, setStyles } from \"./util/dom.js\"\n\n// eslint-disable-next-line no-undef\nconst TOOLBAR_BUILD_RELATIVE_URL = \"dist/toolbar/toolbar_04ba410c.html\"\nconst jsenvLogoSvgUrl = new URL(\"./jsenv-logo.svg\", import.meta.url)\n\nconst injectToolbar = async () => {\n  await new Promise((resolve) => {\n    if (window.requestIdleCallback) {\n      window.requestIdleCallback(resolve)\n    } else {\n      window.requestAnimationFrame(resolve)\n    }\n  })\n\n  const { jsenvDirectoryRelativeUrl } = await fetchExploringJson()\n  const jsenvDirectoryServerUrl = resolveUrl(\n    jsenvDirectoryRelativeUrl,\n    document.location.origin,\n  )\n\n  const placeholder = getToolbarPlaceholder()\n\n  const iframe = document.createElement(\"iframe\")\n  setAttributes(iframe, {\n    tabindex: -1,\n    // sandbox: \"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation\",\n    // allow: \"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr\",\n    allowtransparency: true,\n  })\n  setStyles(iframe, {\n    \"position\": \"fixed\",\n    \"zIndex\": 1000,\n    \"bottom\": 0,\n    \"left\": 0,\n    \"width\": \"100%\",\n    \"height\": 0,\n    /* ensure toolbar children are not focusable when hidden */\n    \"visibility\": \"hidden\",\n    \"transition-duration\": \"300ms\",\n    \"transition-property\": \"height, visibility\",\n    \"border\": \"none\",\n  })\n  const iframeLoadedPromise = iframeToLoadedPromise(iframe)\n  const jsenvToolbarHtmlServerUrl = resolveUrl(\n    TOOLBAR_BUILD_RELATIVE_URL,\n    jsenvDirectoryServerUrl,\n  )\n  // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)\n  iframe.setAttribute(\"src\", jsenvToolbarHtmlServerUrl)\n  placeholder.parentNode.replaceChild(iframe, placeholder)\n\n  await iframeLoadedPromise\n  iframe.removeAttribute(\"tabindex\")\n\n  const div = document.createElement(\"div\")\n  div.innerHTML = `\n<div id=\"jsenv-toolbar-trigger\">\n  <svg id=\"jsenv-toolbar-trigger-icon\">\n    <use xlink:href=\"${jsenvLogoSvgUrl}#jsenv-logo\"></use>\n  </svg>\n  <style>\n    #jsenv-toolbar-trigger {\n      display: block;\n      overflow: hidden;\n      position: fixed;\n      z-index: 1000;\n      bottom: -32px;\n      right: 20px;\n      height: 40px;\n      width: 40px;\n      padding: 0;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      background: transparent;\n      text-align: center;\n      transition: 600ms;\n    }\n\n    #jsenv-toolbar-trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv-toolbar-trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv-toolbar-trigger-icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv-toolbar-trigger[data-expanded] #jsenv-toolbar-trigger-icon {\n      opacity: 1;\n    }\n  </style>\n</div>`\n  const toolbarTrigger = div.firstElementChild\n  iframe.parentNode.appendChild(toolbarTrigger)\n\n  let timer\n  toolbarTrigger.onmouseenter = () => {\n    toolbarTrigger.setAttribute(\"data-animate\", \"\")\n    timer = setTimeout(expandToolbarTrigger, 500)\n  }\n  toolbarTrigger.onmouseleave = () => {\n    clearTimeout(timer)\n    collapseToolbarTrigger()\n  }\n  toolbarTrigger.onfocus = () => {\n    toolbarTrigger.removeAttribute(\"data-animate\")\n    expandToolbarTrigger()\n  }\n  toolbarTrigger.onblur = () => {\n    toolbarTrigger.removeAttribute(\"data-animate\")\n    clearTimeout(timer)\n    collapseToolbarTrigger()\n  }\n  toolbarTrigger.onclick = () => {\n    sendCommandToToolbar(iframe, \"showToolbar\")\n  }\n\n  const showToolbarTrigger = () => {\n    toolbarTrigger.style.display = \"block\"\n  }\n\n  const hideToolbarTrigger = () => {\n    toolbarTrigger.style.display = \"none\"\n  }\n\n  const expandToolbarTrigger = () => {\n    toolbarTrigger.setAttribute(\"data-expanded\", \"\")\n  }\n\n  const collapseToolbarTrigger = () => {\n    toolbarTrigger.removeAttribute(\"data-expanded\", \"\")\n  }\n\n  hideToolbarTrigger()\n  addToolbarEventCallback(iframe, \"toolbar-visibility-change\", (visible) => {\n    if (visible) {\n      hideToolbarTrigger()\n    } else {\n      showToolbarTrigger()\n    }\n  })\n  addToolbarEventCallback(iframe, \"toolbar_ready\", () => {\n    sendCommandToToolbar(iframe, \"renderToolbar\")\n  })\n\n  return iframe\n}\n\nconst addToolbarEventCallback = (iframe, eventName, callback) => {\n  const messageEventCallback = (messageEvent) => {\n    const { data } = messageEvent\n    if (typeof data !== \"object\") {\n      return\n    }\n    const { __jsenv__ } = data\n    if (!__jsenv__) {\n      return\n    }\n    if (__jsenv__.event !== eventName) {\n      return\n    }\n    callback(__jsenv__.data)\n  }\n\n  window.addEventListener(\"message\", messageEventCallback, false)\n  return () => {\n    window.removeEventListener(\"message\", messageEventCallback, false)\n  }\n}\n\nconst sendCommandToToolbar = (iframe, command, ...args) => {\n  iframe.contentWindow.postMessage(\n    {\n      __jsenv__: {\n        command,\n        args,\n      },\n    },\n    window.origin,\n  )\n}\n\nconst getToolbarPlaceholder = () => {\n  const placeholder = queryPlaceholder()\n  if (placeholder) {\n    if (document.body.contains(placeholder)) {\n      return placeholder\n    }\n    // otherwise iframe would not be visible because in <head>\n    console.warn(\n      \"element with [data-jsenv-toolbar-placeholder] must be inside document.body\",\n    )\n    return createTooolbarPlaceholder()\n  }\n  return createTooolbarPlaceholder()\n}\n\nconst queryPlaceholder = () => {\n  return document.querySelector(\"[data-jsenv-toolbar-placeholder]\")\n}\n\nconst createTooolbarPlaceholder = () => {\n  const placeholder = document.createElement(\"span\")\n  document.body.appendChild(placeholder)\n  return placeholder\n}\n\nconst iframeToLoadedPromise = (iframe) => {\n  return new Promise((resolve) => {\n    const onload = () => {\n      iframe.removeEventListener(\"load\", onload, true)\n      resolve()\n    }\n    iframe.addEventListener(\"load\", onload, true)\n  })\n}\n\nconst resolveUrl = (url, baseUrl) => String(new URL(url, baseUrl))\n\nif (document.readyState === \"complete\") {\n  injectToolbar()\n} else {\n  window.addEventListener(\"load\", injectToolbar)\n}\n"
+    "import { fetchExploringJson } from \"@jsenv/core/src/internal/dev_server/exploring/fetchExploringJson.js\"\nimport { setAttributes, setStyles } from \"./util/dom.js\"\n\n// eslint-disable-next-line no-undef\nconst TOOLBAR_BUILD_RELATIVE_URL = \"dist/toolbar/toolbar_f7b8a263.html\"\nconst jsenvLogoSvgUrl = new URL(\"./jsenv-logo.svg\", import.meta.url)\n\nconst injectToolbar = async () => {\n  await new Promise((resolve) => {\n    if (window.requestIdleCallback) {\n      window.requestIdleCallback(resolve)\n    } else {\n      window.requestAnimationFrame(resolve)\n    }\n  })\n\n  const { jsenvDirectoryRelativeUrl } = await fetchExploringJson()\n  const jsenvDirectoryServerUrl = resolveUrl(\n    jsenvDirectoryRelativeUrl,\n    document.location.origin,\n  )\n\n  const placeholder = getToolbarPlaceholder()\n\n  const iframe = document.createElement(\"iframe\")\n  setAttributes(iframe, {\n    tabindex: -1,\n    // sandbox: \"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation\",\n    // allow: \"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr\",\n    allowtransparency: true,\n  })\n  setStyles(iframe, {\n    \"position\": \"fixed\",\n    \"zIndex\": 1000,\n    \"bottom\": 0,\n    \"left\": 0,\n    \"width\": \"100%\",\n    \"height\": 0,\n    /* ensure toolbar children are not focusable when hidden */\n    \"visibility\": \"hidden\",\n    \"transition-duration\": \"300ms\",\n    \"transition-property\": \"height, visibility\",\n    \"border\": \"none\",\n  })\n  const iframeLoadedPromise = iframeToLoadedPromise(iframe)\n  const jsenvToolbarHtmlServerUrl = resolveUrl(\n    TOOLBAR_BUILD_RELATIVE_URL,\n    jsenvDirectoryServerUrl,\n  )\n  // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)\n  iframe.setAttribute(\"src\", jsenvToolbarHtmlServerUrl)\n  placeholder.parentNode.replaceChild(iframe, placeholder)\n\n  await iframeLoadedPromise\n  iframe.removeAttribute(\"tabindex\")\n\n  const div = document.createElement(\"div\")\n  div.innerHTML = `\n<div id=\"jsenv-toolbar-trigger\">\n  <svg id=\"jsenv-toolbar-trigger-icon\">\n    <use xlink:href=\"${jsenvLogoSvgUrl}#jsenv-logo\"></use>\n  </svg>\n  <style>\n    #jsenv-toolbar-trigger {\n      display: block;\n      overflow: hidden;\n      position: fixed;\n      z-index: 1000;\n      bottom: -32px;\n      right: 20px;\n      height: 40px;\n      width: 40px;\n      padding: 0;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      background: transparent;\n      text-align: center;\n      transition: 600ms;\n    }\n\n    #jsenv-toolbar-trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv-toolbar-trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv-toolbar-trigger-icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv-toolbar-trigger[data-expanded] #jsenv-toolbar-trigger-icon {\n      opacity: 1;\n    }\n  </style>\n</div>`\n  const toolbarTrigger = div.firstElementChild\n  iframe.parentNode.appendChild(toolbarTrigger)\n\n  let timer\n  toolbarTrigger.onmouseenter = () => {\n    toolbarTrigger.setAttribute(\"data-animate\", \"\")\n    timer = setTimeout(expandToolbarTrigger, 500)\n  }\n  toolbarTrigger.onmouseleave = () => {\n    clearTimeout(timer)\n    collapseToolbarTrigger()\n  }\n  toolbarTrigger.onfocus = () => {\n    toolbarTrigger.removeAttribute(\"data-animate\")\n    expandToolbarTrigger()\n  }\n  toolbarTrigger.onblur = () => {\n    toolbarTrigger.removeAttribute(\"data-animate\")\n    clearTimeout(timer)\n    collapseToolbarTrigger()\n  }\n  toolbarTrigger.onclick = () => {\n    sendCommandToToolbar(iframe, \"showToolbar\")\n  }\n\n  const showToolbarTrigger = () => {\n    toolbarTrigger.style.display = \"block\"\n  }\n\n  const hideToolbarTrigger = () => {\n    toolbarTrigger.style.display = \"none\"\n  }\n\n  const expandToolbarTrigger = () => {\n    toolbarTrigger.setAttribute(\"data-expanded\", \"\")\n  }\n\n  const collapseToolbarTrigger = () => {\n    toolbarTrigger.removeAttribute(\"data-expanded\", \"\")\n  }\n\n  hideToolbarTrigger()\n  addToolbarEventCallback(iframe, \"toolbar-visibility-change\", (visible) => {\n    if (visible) {\n      hideToolbarTrigger()\n    } else {\n      showToolbarTrigger()\n    }\n  })\n  addToolbarEventCallback(iframe, \"toolbar_ready\", () => {\n    sendCommandToToolbar(iframe, \"renderToolbar\")\n  })\n\n  return iframe\n}\n\nconst addToolbarEventCallback = (iframe, eventName, callback) => {\n  const messageEventCallback = (messageEvent) => {\n    const { data } = messageEvent\n    if (typeof data !== \"object\") {\n      return\n    }\n    const { __jsenv__ } = data\n    if (!__jsenv__) {\n      return\n    }\n    if (__jsenv__.event !== eventName) {\n      return\n    }\n    callback(__jsenv__.data)\n  }\n\n  window.addEventListener(\"message\", messageEventCallback, false)\n  return () => {\n    window.removeEventListener(\"message\", messageEventCallback, false)\n  }\n}\n\nconst sendCommandToToolbar = (iframe, command, ...args) => {\n  iframe.contentWindow.postMessage(\n    {\n      __jsenv__: {\n        command,\n        args,\n      },\n    },\n    window.origin,\n  )\n}\n\nconst getToolbarPlaceholder = () => {\n  const placeholder = queryPlaceholder()\n  if (placeholder) {\n    if (document.body.contains(placeholder)) {\n      return placeholder\n    }\n    // otherwise iframe would not be visible because in <head>\n    console.warn(\n      \"element with [data-jsenv-toolbar-placeholder] must be inside document.body\",\n    )\n    return createTooolbarPlaceholder()\n  }\n  return createTooolbarPlaceholder()\n}\n\nconst queryPlaceholder = () => {\n  return document.querySelector(\"[data-jsenv-toolbar-placeholder]\")\n}\n\nconst createTooolbarPlaceholder = () => {\n  const placeholder = document.createElement(\"span\")\n  document.body.appendChild(placeholder)\n  return placeholder\n}\n\nconst iframeToLoadedPromise = (iframe) => {\n  return new Promise((resolve) => {\n    const onload = () => {\n      iframe.removeEventListener(\"load\", onload, true)\n      resolve()\n    }\n    iframe.addEventListener(\"load\", onload, true)\n  })\n}\n\nconst resolveUrl = (url, baseUrl) => String(new URL(url, baseUrl))\n\nif (document.readyState === \"complete\") {\n  injectToolbar()\n} else {\n  window.addEventListener(\"load\", injectToolbar)\n}\n"
   ],
   "names": [
     "nativeTypeOf",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "25.0.0-alpha.3",
+  "version": "25.1.0",
   "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">`

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

@@ -10,20 +10,7 @@ export const createUrlVersioner = ({
   asOriginalUrl,
   lineBreakNormalization,
 }) => {
-  const names = []
-  const getFreeName = (name) => {
-    let nameCandidate = name
-    let integer = 1
-    // eslint-disable-next-line no-constant-condition
-    while (true) {
-      if (!names.includes(nameCandidate)) {
-        names.push(nameCandidate)
-        return nameCandidate
-      }
-      integer++
-      nameCandidate = `${name}${integer}`
-    }
-  }
+  const availableNameGenerator = createAvailableNameGenerator()
 
   const computeBuildRelativeUrl = (ressource, precomputation) => {
     const pattern = getFilenamePattern({
@@ -40,7 +27,11 @@ export const createUrlVersioner = ({
         pattern,
         getName: precomputation
           ? () => urlToBasename(ressource.url)
-          : () => getFreeName(urlToBasename(ressource.url)),
+          : () =>
+              availableNameGenerator.getAvailableNameForPattern(
+                urlToBasename(ressource.url),
+                pattern,
+              ),
         contentType: ressource.contentType,
         lineBreakNormalization,
       },
@@ -69,6 +60,33 @@ export const createUrlVersioner = ({
   }
 }
 
+const createAvailableNameGenerator = () => {
+  const cache = {}
+  const getAvailableNameForPattern = (name, pattern) => {
+    let names = cache[pattern]
+    if (!names) {
+      names = []
+      cache[pattern] = names
+    }
+
+    let nameCandidate = name
+    let integer = 1
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      if (!names.includes(nameCandidate)) {
+        names.push(nameCandidate)
+        return nameCandidate
+      }
+      integer++
+      nameCandidate = `${name}${integer}`
+    }
+  }
+
+  return {
+    getAvailableNameForPattern,
+  }
+}
+
 const getFilenamePattern = ({
   ressource,
   entryPointUrls,
@@ -115,7 +133,7 @@ const getFilenamePattern = ({
   }
 
   if (ressource.isJsModule) {
-    return "[name]_[hash][extname]"
+    return "[name]_[hash].js"
   }
 
   return ressource.urlVersioningDisabled

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 }