@jsenv/core 24.2.2 → 24.3.1

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

@@ -51,6 +51,7 @@ import {
 import { collectNodesMutations } from "../parsing.utils.js"
 
 import { collectSvgMutations } from "../svg/parseSvgRessource.js"
+import { moveCssUrls } from "../css/moveCssUrls.js"
 
 export const parseHtmlRessource = async (
   htmlRessource,
@@ -144,11 +145,12 @@ export const parseHtmlRessource = async (
   ]
 
   return async (params) => {
-    htmlMutations.forEach((mutationCallback) => {
-      mutationCallback({
+    await htmlMutations.reduce(async (previous, mutationCallback) => {
+      await previous
+      await mutationCallback({
         ...params,
       })
-    })
+    }, Promise.resolve())
 
     const htmlAfterTransformation = htmlAstToHtmlString(htmlAst)
     const html = minify
@@ -507,7 +509,11 @@ const linkStylesheetHrefVisitor = (
     ressourceSpecifier: hrefAttribute.value,
     ...referenceLocationFromHtmlNode(link, "href"),
   })
-  return ({ getUrlRelativeToImporter }) => {
+  return async ({
+    getUrlRelativeToImporter,
+    precomputeBuildRelativeUrl,
+    buildDirectoryUrl,
+  }) => {
     const { ressource } = cssReference
 
     if (ressource.isExternal) {
@@ -516,18 +522,38 @@ const linkStylesheetHrefVisitor = (
 
     if (shouldInline({ ressource, htmlNode: link })) {
       const { bufferAfterBuild } = ressource
-      let cssString = String(bufferAfterBuild)
-      const sourcemapRelativeUrl = getCssSourceMappingUrl(cssString)
+      let code = String(bufferAfterBuild)
+      const { buildRelativeUrl } = ressource
+      const cssBuildUrl = resolveUrl(buildRelativeUrl, buildDirectoryUrl)
+      const htmlUrl = resolveUrl(
+        precomputeBuildRelativeUrl(htmlRessource),
+        buildDirectoryUrl,
+      )
+
+      const moveResult = await moveCssUrls({
+        code,
+        from: cssBuildUrl,
+        to: htmlUrl,
+        // moveCssUrls will change the css source code
+        // Ideally we should update the sourcemap referenced by css
+        // to target the one after css urls are moved.
+        // It means we should force sourcemap ressource to the new one
+        // until it's supported we prevent postcss from updating the
+        // sourcemap comment, othwise css would reference a sourcemap
+        // that won't by in the build directory
+        sourcemapMethod: null,
+      })
+      code = moveResult.code
+
+      const sourcemapRelativeUrl = getCssSourceMappingUrl(code)
       if (sourcemapRelativeUrl) {
-        const { buildRelativeUrl } = ressource
-        const cssBuildUrl = resolveUrl(buildRelativeUrl, "file:///")
+        const cssBuildUrl = resolveUrl(buildRelativeUrl, buildDirectoryUrl)
         const sourcemapBuildUrl = resolveUrl(sourcemapRelativeUrl, cssBuildUrl)
-        const htmlUrl = resolveUrl(htmlRessource.fileNamePattern, "file:///")
         const sourcemapInlineUrl = urlToRelativeUrl(sourcemapBuildUrl, htmlUrl)
-        cssString = setCssSourceMappingUrl(cssString, sourcemapInlineUrl)
+        code = setCssSourceMappingUrl(code, sourcemapInlineUrl)
       }
 
-      replaceHtmlNode(link, `<style>${cssString}</style>`, {
+      replaceHtmlNode(link, `<style>${code}</style>`, {
         attributesToIgnore: ["href", "rel", "as", "crossorigin", "type"],
       })
       cssReference.inlinedCallback()

package/src/internal/building/parseRessource.js

@@ -39,6 +39,7 @@ export const parseRessource = (
     minifyJs,
     minifyHtml,
     minifyCssOptions,
+    cssConcatenation,
   },
 ) => {
   const { contentType } = ressource
@@ -124,10 +125,12 @@ export const parseRessource = (
 
   if (contentType === "text/css") {
     return parseCssRessource(ressource, notifiers, {
+      asProjectUrl,
       asOriginalUrl,
       asOriginalServerUrl,
       minify,
       minifyCssOptions,
+      cssConcatenation,
     })
   }
 

package/src/internal/building/ressource_builder.js

@@ -49,6 +49,7 @@ export const createRessourceBuilder = (
     entryUrl,
     entryBuffer,
     entryBuildRelativeUrl,
+    urlVersionningForEntryPoints,
   }) => {
     // The entry point is conceptually referenced by code passing "entryPointMap"
     // to buildProject. So we analyse stack trace to put this function caller
@@ -68,8 +69,12 @@ export const createRessourceBuilder = (
       isEntryPoint: true,
 
       // don't hash asset entry points
-      urlVersioningDisabled: true,
-      fileNamePattern: entryBuildRelativeUrl,
+      ...(urlVersionningForEntryPoints
+        ? {}
+        : {
+            urlVersioningDisabled: true,
+            fileNamePattern: entryBuildRelativeUrl,
+          }),
     })
     entryReference.isProgrammatic = true
 
@@ -567,6 +572,10 @@ export const createRessourceBuilder = (
       )
       await transform({
         buildDirectoryUrl,
+        precomputeBuildRelativeUrl: (ressource) =>
+          precomputeBuildRelativeUrlForRessource(ressource, {
+            lineBreakNormalization,
+          }),
         getUrlRelativeToImporter: (referencedRessource) => {
           const ressourceImporter = ressource
 
@@ -1021,7 +1030,7 @@ const isEmitChunkNeeded = ({ ressource, reference }) => {
  *
  * see also:
  * - https://rollupjs.org/guide/en/#thisemitfileemittedfile-emittedchunk--emittedasset--string
- * -https://github.com/rollup/rollup/issues/2872
+ * - https://github.com/rollup/rollup/issues/2872
  */
 const referenceShouldBeIgnoredWarning = ({
   isJsModule,

package/src/internal/compiling/babel_plugin_import_assertions.js

@@ -10,8 +10,7 @@ export const babelPluginImportAssertions = (
   return {
     ...babelPluginImportVisitor(
       babel,
-      // During the build we throw when for import call expression where
-      // sepcifier or type is dynamic.
+      // During build we throw on import call expression where "specifier" or "type" is dynamic
       // Here there is no strong need to throw because keeping the source code intact
       // will throw an error when browser will execute the code
       ({ importPath, specifierPath }) => {

package/src/internal/compiling/html_source_file_service.js

@@ -21,14 +21,12 @@ import {
 import { moveImportMap } from "@jsenv/importmap"
 import { createDetailedMessage } from "@jsenv/logger"
 
-import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
-import { jsenvBrowserSystemFileInfo } from "@jsenv/core/src/internal/jsenvInternalFiles.js"
-import { redirectorHtmlFileInfo } from "@jsenv/core/src/internal/dev_server/redirector/redirector_file_info.js"
-import { eventSourceClientFileInfo } from "@jsenv/core/src/internal/dev_server/event_source_client/event_source_client_file_info.js"
 import {
-  toolbarInjectorFileInfo,
-  toolbarHtmlFileInfo,
-} from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
+  BROWSER_RUNTIME_BUILD_URL,
+  EVENT_SOURCE_CLIENT_BUILD_URL,
+  TOOLBAR_INJECTOR_BUILD_URL,
+} from "@jsenv/core/dist/build_manifest.js"
+import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { stringifyDataUrl } from "@jsenv/core/src/internal/dataUrl.utils.js"
 import {
   parseHtmlString,
@@ -43,6 +41,9 @@ import {
   setHtmlNodeText,
   getUniqueNameForInlineHtmlNode,
 } from "./compileHtml.js"
+import { jsenvCoreDirectoryUrl } from "../jsenvCoreDirectoryUrl.js"
+
+const jsenvDistDirectoryUrl = new URL("./dist/", jsenvCoreDirectoryUrl).href
 
 export const createTransformHtmlSourceFileService = ({
   logger,
@@ -70,6 +71,10 @@ export const createTransformHtmlSourceFileService = ({
     const relativeUrl = ressource.slice(1)
     const fileUrl = resolveUrl(relativeUrl, projectDirectoryUrl)
 
+    if (urlIsInsideOf(fileUrl, jsenvDistDirectoryUrl)) {
+      return null
+    }
+
     const inlineScript = htmlInlineScriptMap.get(fileUrl)
     if (inlineScript) {
       return {
@@ -159,41 +164,38 @@ const transformHTMLSourceFile = async ({
     })
   }
 
-  const jsenvBrowserBuildUrlRelativeToProject = urlToRelativeUrl(
-    jsenvBrowserSystemFileInfo.jsenvBuildUrl,
+  const browserRuntimeBuildUrlRelativeToProject = urlToRelativeUrl(
+    BROWSER_RUNTIME_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
-    eventSourceClientFileInfo.buildUrl,
+    EVENT_SOURCE_CLIENT_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
-    toolbarInjectorFileInfo.buildUrl,
+    TOOLBAR_INJECTOR_BUILD_URL,
     projectDirectoryUrl,
   )
+
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvScriptInjection
+      ...(jsenvScriptInjection
         ? [
             {
-              src: `/${jsenvBrowserBuildUrlRelativeToProject}`,
+              src: `/${browserRuntimeBuildUrlRelativeToProject}`,
             },
           ]
         : []),
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvEventSourceClientInjection
+      ...(jsenvEventSourceClientInjection
         ? [
             {
               src: `/${eventSourceClientBuildRelativeUrlForProject}`,
             },
           ]
         : []),
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvToolbarInjection
+      ...(jsenvToolbarInjection
         ? [
             {
               src: `/${toolbarInjectorBuildRelativeUrlForProject}`,

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -2,14 +2,14 @@ import { resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
 import { moveImportMap, composeTwoImportMaps } from "@jsenv/importmap"
 import { createDetailedMessage } from "@jsenv/logger"
 
-import { jsenvBrowserSystemFileInfo } from "@jsenv/core/src/internal/jsenvInternalFiles.js"
-import { eventSourceClientFileInfo } from "@jsenv/core/src/internal/dev_server/event_source_client/event_source_client_file_info.js"
 import {
-  toolbarInjectorFileInfo,
-  toolbarHtmlFileInfo,
-} from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
+  BROWSER_RUNTIME_BUILD_URL,
+  EVENT_SOURCE_CLIENT_BUILD_URL,
+  TOOLBAR_INJECTOR_BUILD_URL,
+} from "@jsenv/core/dist/build_manifest.js"
 import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { getDefaultImportMap } from "@jsenv/core/src/internal/import-resolution/importmap-default.js"
+
 import {
   setJavaScriptSourceMappingUrl,
   sourcemapToBase64Url,
@@ -54,16 +54,18 @@ export const compileHtml = async ({
   jsenvToolbarInjection,
   onHtmlImportmapInfo,
 }) => {
-  const jsenvBrowserBuildUrlRelativeToProject = urlToRelativeUrl(
-    jsenvBrowserSystemFileInfo.jsenvBuildUrl,
+  const browserRuntimeBuildUrlRelativeToProject = urlToRelativeUrl(
+    BROWSER_RUNTIME_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
-    eventSourceClientFileInfo.buildUrl,
+    EVENT_SOURCE_CLIENT_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
-    toolbarInjectorFileInfo.buildUrl,
+    TOOLBAR_INJECTOR_BUILD_URL,
     projectDirectoryUrl,
   )
 
@@ -74,26 +76,23 @@ export const compileHtml = async ({
     await mutateRessourceHints(htmlAst)
   }
 
-  const urlNoSearch = urlWithoutSearch(url)
-
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl && jsenvScriptInjection
+      ...(jsenvScriptInjection
         ? [
             {
-              src: `/${jsenvBrowserBuildUrlRelativeToProject}`,
+              src: `/${browserRuntimeBuildUrlRelativeToProject}`,
             },
           ]
         : []),
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl &&
-      jsenvEventSourceClientInjection
+      ...(jsenvEventSourceClientInjection
         ? [
             {
               src: `/${eventSourceClientBuildRelativeUrlForProject}`,
             },
           ]
         : []),
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl && jsenvToolbarInjection
+      ...(jsenvToolbarInjection
         ? [
             {
               src: `/${toolbarInjectorBuildRelativeUrlForProject}`,
@@ -405,9 +404,3 @@ const mutateRessourceHints = async (htmlAst) => {
   )
   mutations.forEach((mutation) => mutation())
 }
-
-const urlWithoutSearch = (url) => {
-  const urlObject = new URL(url)
-  urlObject.search = ""
-  return urlObject.href
-}

package/src/internal/compiling/startCompileServer.js

@@ -29,12 +29,16 @@ import {
   createCallbackListNotifiedOnce,
 } from "@jsenv/abort"
 
+import {
+  TOOLBAR_INJECTOR_BUILD_URL,
+  EVENT_SOURCE_CLIENT_BUILD_URL,
+  BROWSER_RUNTIME_BUILD_URL,
+} from "@jsenv/core/dist/build_manifest.js"
 import { generateGroupMap } from "@jsenv/core/src/internal/generateGroupMap/generateGroupMap.js"
 import { isBrowserPartOfSupportedRuntimes } from "@jsenv/core/src/internal/generateGroupMap/runtime_support.js"
 import { loadBabelPluginMapFromFile } from "./load_babel_plugin_map_from_file.js"
 import { extractSyntaxBabelPluginMap } from "./babel_plugins.js"
 import {
-  jsenvCompileProxyFileInfo,
   sourcemapMainFileInfo,
   sourcemapMappingFileInfo,
 } from "../jsenvInternalFiles.js"
@@ -295,9 +299,6 @@ export const startCompileServer = async ({
       outDirectoryUrl,
       compileServerMetaFileInfo,
     }),
-    "service: compile proxy": createCompileProxyService({
-      projectDirectoryUrl,
-    }),
     "service:compiled file": createCompiledFileService({
       logger,
 
@@ -913,15 +914,24 @@ const createSourceFileService = ({
     const relativeUrl = request.pathname.slice(1)
     projectFileRequestedCallback(relativeUrl, request)
 
-    const responsePromise = fetchFileSystem(
-      new URL(request.ressource.slice(1), projectDirectoryUrl),
-      {
-        headers: request.headers,
-        etagEnabled: projectFileCacheStrategy === "etag",
-        mtimeEnabled: projectFileCacheStrategy === "mtime",
-      },
+    const fileUrl = new URL(request.ressource.slice(1), projectDirectoryUrl)
+      .href
+    const fileIsInsideJsenvDistDirectory = urlIsInsideOf(
+      fileUrl,
+      new URL("./dist/", jsenvCoreDirectoryUrl),
     )
 
+    const responsePromise = fetchFileSystem(fileUrl, {
+      headers: request.headers,
+      etagEnabled: projectFileCacheStrategy === "etag",
+      mtimeEnabled: projectFileCacheStrategy === "mtime",
+      ...(fileIsInsideJsenvDistDirectory
+        ? {
+            cacheControl: `private,max-age=${60 * 60 * 24 * 30},immutable`,
+          }
+        : {}),
+    })
+
     return responsePromise
   }
 }
@@ -965,6 +975,12 @@ const createCompileServerMetaFileInfo = ({
     sourcemapMappingFileInfo.url,
     projectDirectoryUrl,
   )
+  // The object below must list everything that can influence how the
+  // compiled files are generated. So that the cahce for those generated files is
+  // not reused when it should not
+  // In some cases the parameters influences only a subset of files and ideally
+  // this parameter should somehow invalidate a subset of the cache
+  // To keep things simple these parameters currently invalidates the whole cache
   const compileServerMeta = {
     jsenvDirectoryRelativeUrl,
     outDirectoryRelativeUrl,
@@ -983,8 +999,15 @@ const createCompileServerMetaFileInfo = ({
     sourcemapMappingFileRelativeUrl,
     errorStackRemapping: true,
 
+    // used to consider the logic generating files may have changed
     jsenvCorePackageVersion,
+
+    // impact only HTML files
     jsenvToolbarInjection,
+    TOOLBAR_INJECTOR_BUILD_URL,
+    EVENT_SOURCE_CLIENT_BUILD_URL,
+    BROWSER_RUNTIME_BUILD_URL,
+
     env,
   }
   return {
@@ -1054,27 +1077,6 @@ const createCompileServerMetaService = ({
   }
 }
 
-const createCompileProxyService = ({ projectDirectoryUrl }) => {
-  const jsenvCompileProxyRelativeUrlForProject = urlToRelativeUrl(
-    jsenvCompileProxyFileInfo.jsenvBuildUrl,
-    projectDirectoryUrl,
-  )
-
-  return (request) => {
-    if (request.ressource === "/.jsenv/jsenv_compile_proxy.js") {
-      const jsenvCompileProxyBuildServerUrl = `${request.origin}/${jsenvCompileProxyRelativeUrlForProject}`
-      return {
-        status: 307,
-        headers: {
-          location: jsenvCompileProxyBuildServerUrl,
-        },
-      }
-    }
-
-    return null
-  }
-}
-
 const readPackage = (packagePath) => {
   const buffer = readFileSync(packagePath)
   const string = String(buffer)

package/src/internal/dev_server/event_source_client/event_source_connection.js

@@ -11,21 +11,34 @@ export const createEventSourceConnection = (
   }
 
   const eventSourceOrigin = new URL(eventSourceUrl).origin
+  Object.keys(events).forEach((eventName) => {
+    const eventCallback = events[eventName]
+    events[eventName] = (e) => {
+      if (e.origin === eventSourceOrigin) {
+        if (e.lastEventId) {
+          lastEventId = e.lastEventId
+        }
+        eventCallback(e)
+      }
+    }
+  })
 
   let connectionStatus = "default"
   let connectionStatusChangeCallback = () => {}
-  let disconnect = () => {}
+  let _disconnect = () => {}
 
   const goToStatus = (newStatus) => {
-    connectionStatus = newStatus
-    connectionStatusChangeCallback()
+    if (newStatus !== connectionStatus) {
+      connectionStatus = newStatus
+      connectionStatusChangeCallback()
+    }
   }
 
   const attemptConnection = (url) => {
     const eventSource = new EventSource(url, {
       withCredentials: true,
     })
-    disconnect = () => {
+    _disconnect = () => {
       if (
         connectionStatus !== "connecting" &&
         connectionStatus !== "connected"
@@ -37,6 +50,9 @@ export const createEventSourceConnection = (
       }
       eventSource.onerror = undefined
       eventSource.close()
+      Object.keys(events).forEach((eventName) => {
+        eventSource.removeEventListener(eventName, events[eventName])
+      })
       goToStatus("disconnected")
     }
     let retryCount = 0
@@ -45,7 +61,7 @@ export const createEventSourceConnection = (
       if (errorEvent.target.readyState === EventSource.CONNECTING) {
         if (retryCount > retryMaxAttempt) {
           console.info(`could not connect after ${retryMaxAttempt} attempt`)
-          disconnect()
+          _disconnect()
           return
         }
 
@@ -57,7 +73,7 @@ export const createEventSourceConnection = (
             console.info(
               `could not connect in less than ${retryAllocatedMs} ms`,
             )
-            disconnect()
+            _disconnect()
             return
           }
         }
@@ -68,7 +84,7 @@ export const createEventSourceConnection = (
       }
 
       if (errorEvent.target.readyState === EventSource.CLOSED) {
-        disconnect()
+        _disconnect()
         return
       }
     }
@@ -76,14 +92,7 @@ export const createEventSourceConnection = (
       goToStatus("connected")
     }
     Object.keys(events).forEach((eventName) => {
-      eventSource.addEventListener(eventName, (e) => {
-        if (e.origin === eventSourceOrigin) {
-          if (e.lastEventId) {
-            lastEventId = e.lastEventId
-          }
-          events[eventName](e)
-        }
-      })
+      eventSource.addEventListener(eventName, events[eventName])
     })
     if (!events.hasOwnProperty("welcome")) {
       eventSource.addEventListener("welcome", (e) => {
@@ -107,21 +116,21 @@ export const createEventSourceConnection = (
   }
 
   const removePageUnloadListener = listenPageUnload(() => {
-    disconnect()
+    _disconnect()
   })
 
   const destroy = () => {
     removePageUnloadListener()
-    disconnect()
+    _disconnect()
   }
 
   return {
     getConnectionStatus: () => connectionStatus,
-    setConnectionStatusCallback: (callback) => {
+    setConnectionStatusChangeCallback: (callback) => {
       connectionStatusChangeCallback = callback
     },
     connect,
-    disconnect,
+    disconnect: () => _disconnect(),
     destroy,
   }
 }

package/src/internal/dev_server/exploring/exploring.html

@@ -35,7 +35,12 @@
           <div id="explorables-header">
             <div id="explorables_header_and_menu">
               <h2 style="white-space: nowrap">
-                <svg id="fileIconSvgConfig" viewBox="0 0 24 24">
+                <svg
+                  id="fileIconSvgConfig"
+                  viewBox="0 0 24 24"
+                  width="32"
+                  height="32"
+                >
                   <path d="M0 0h24v24H0V0z" fill="none" />
                   <path
                     d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"
@@ -69,6 +74,6 @@
         </section>
       </article>
     </div>
-    <script src="/.jsenv/exploring.index.js"></script>
+    <script type="module" src="./exploring.js"></script>
   </body>
 </html>

package/src/internal/dev_server/exploring/fetchExploringJson.js

@@ -1,6 +1,4 @@
-import { createDetailedMessage } from "@jsenv/logger"
-
-import { fetchJson } from "../../browser-utils/fetchJson.js"
+import { fetchJson } from "../../browser_utils/fetchJson.js"
 
 export const fetchExploringJson = async ({ signal } = {}) => {
   try {
@@ -13,12 +11,9 @@ export const fetchExploringJson = async ({ signal } = {}) => {
       throw e
     }
     throw new Error(
-      createDetailedMessage(
-        `Cannot communicate with exploring server due to a network error`,
-        {
-          ["error stack"]: e.stack,
-        },
-      ),
+      `Cannot communicate with exploring server due to a network error
+--- error stack ---
+${e.stack}`,
     )
   }
 }

package/src/internal/dev_server/redirector/redirector.html

@@ -1,13 +1,48 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Exploring redirector</title>
+    <title>Jsenv redirector</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="utf-8" />
     <link rel="icon" href="data:," />
   </head>
 
   <body>
-    <script src="/.jsenv/redirector.js"></script>
+    <script
+      type="importmap"
+      src="../../../../node_resolution.importmap"
+    ></script>
+    <script type="module">
+      import { scanBrowserRuntimeFeatures } from "../../browser_feature_detection/browser_feature_detection.js"
+
+      const redirect = async () => {
+        const redirectTarget = new URLSearchParams(window.location.search).get(
+          "redirect",
+        )
+        const browserRuntimeFeaturesReport = await scanBrowserRuntimeFeatures({
+          failFastOnFeatureDetection: true,
+        })
+
+        const href = `${getDirectoryUrl(
+          browserRuntimeFeaturesReport,
+        )}${redirectTarget}`
+        // It's IMPORTANT to use location.replace and NOT location.href = url
+        // otherwise it would break the back button
+        window.location.replace(href)
+      }
+
+      const getDirectoryUrl = ({
+        canAvoidCompilation,
+        outDirectoryRelativeUrl,
+        compileId,
+      }) => {
+        if (canAvoidCompilation) {
+          return `/`
+        }
+        return `/${outDirectoryRelativeUrl}${compileId}/`
+      }
+
+      redirect()
+    </script>
   </body>
 </html>