@jsenv/core 27.0.0-alpha.9 → 27.0.0-alpha.92

package/src/build/build.js

@@ -7,151 +7,249 @@
  */
 
 import {
-  assertAndNormalizeDirectoryUrl,
-  ensureEmptyDirectory,
+  injectQueryParams,
+  setUrlFilename,
+  asUrlUntilPathname,
+  normalizeUrl,
+  asUrlWithoutSearch,
+  ensurePathnameTrailingSlash,
   urlIsInsideOf,
   urlToBasename,
   urlToExtension,
   urlToRelativeUrl,
+} from "@jsenv/urls"
+import {
+  assertAndNormalizeDirectoryUrl,
+  ensureEmptyDirectory,
   writeFile,
+  registerDirectoryLifecycle,
 } from "@jsenv/filesystem"
-import { createLogger } from "@jsenv/logger"
-
-import { createTaskLog } from "@jsenv/utils/logs/task_log.js"
-import {
-  injectQueryParams,
-  setUrlFilename,
-} from "@jsenv/utils/urls/url_utils.js"
-import { createUrlVersionGenerator } from "@jsenv/utils/urls/url_version_generator.js"
-import { generateSourcemapUrl } from "@jsenv/utils/sourcemap/sourcemap_utils.js"
-import {
-  parseHtmlString,
-  stringifyHtmlAst,
-} from "@jsenv/utils/html_ast/html_ast.js"
+import { Abort, raceProcessTeardownEvents } from "@jsenv/abort"
+import { createLogger, loggerToLevels, createTaskLog } from "@jsenv/log"
+import { generateSourcemapFileUrl } from "@jsenv/sourcemap"
+import { parseHtmlString, stringifyHtmlAst } from "@jsenv/ast"
 
-import { defaultRuntimeSupport } from "../omega/runtime_support/default_runtime_support.js"
-import { jsenvPluginInline } from "../omega/core_plugins/inline/jsenv_plugin_inline.js"
+import { sortByDependencies } from "../omega/url_graph/sort_by_dependencies.js"
 import { createUrlGraph } from "../omega/url_graph.js"
-import { getCorePlugins } from "../omega/core_plugins.js"
+import { jsenvPluginUrlAnalysis } from "../plugins/url_analysis/jsenv_plugin_url_analysis.js"
+import { jsenvPluginInline } from "../plugins/inline/jsenv_plugin_inline.js"
+import { jsenvPluginAsJsClassic } from "../plugins/transpilation/as_js_classic/jsenv_plugin_as_js_classic.js"
+import { getCorePlugins } from "../plugins/plugins.js"
 import { createKitchen } from "../omega/kitchen.js"
 import { loadUrlGraph } from "../omega/url_graph/url_graph_load.js"
 import { createUrlGraphSummary } from "../omega/url_graph/url_graph_report.js"
-import { sortUrlGraphByDependencies } from "../omega/url_graph/url_graph_sort.js"
+import { isWebWorkerEntryPointReference } from "../omega/web_workers.js"
 
+import { GRAPH } from "./graph_utils.js"
 import { createBuilUrlsGenerator } from "./build_urls_generator.js"
-import { injectVersionMappings } from "./inject_version_mappings.js"
-import { jsenvPluginBundleJsModule } from "./plugins/bundle_js_module/jsenv_plugin_bundle_js_module.js"
-import { jsenvPluginMinifyJs } from "./plugins/minify_js/jsenv_plugin_minify_js.js"
-import { jsenvPluginMinifyHtml } from "./plugins/minify_html/jsenv_plugin_minify_html.js"
+import { injectGlobalVersionMapping } from "./inject_global_version_mappings.js"
+import { createVersionGenerator } from "./version_generator.js"
+import { injectServiceWorkerUrls } from "./inject_service_worker_urls.js"
+import { resyncRessourceHints } from "./resync_ressource_hints.js"
 
+/**
+ * Generate an optimized version of source files into a directory
+ * @param {Object} buildParameters
+ * @param {string|url} buildParameters.rootDirectoryUrl
+ *        Directory containing source files
+ * @param {string|url} buildParameters.buildDirectoryUrl
+ *        Directory where optimized files will be written
+ * @param {object} buildParameters.entryPoints
+ *        Describe entry point paths and control their names in the build directory
+ * @param {object} buildParameters.runtimeCompat
+ *        Code generated will be compatible with these runtimes
+ * @param {string="/"} buildParameters.baseUrl
+ *        All urls in build file contents are prefixed with this url
+ * @param {boolean|object} [buildParameters.minification=true]
+ *        Minify build file contents
+ * @param {boolean} [buildParameters.versioning=true]
+ *        Controls if url in build file contents are versioned
+ * @param {('search_param'|'filename')} [buildParameters.versioningMethod="search_param"]
+ *        Controls how url are versioned
+ * @param {boolean|string} [buildParameters.sourcemaps=false]
+ *        Generate sourcemaps in the build directory
+ * @return {Object} buildReturnValue
+ * @return {Object} buildReturnValue.buildFileContents
+ *        Contains all build file paths relative to the build directory and their content
+ * @return {Object} buildReturnValue.buildInlineContents
+ *        Contains content that is inline into build files
+ * @return {Object} buildReturnValue.buildManifest
+ *        Map build file paths without versioning to versioned file paths
+ */
 export const build = async ({
   signal = new AbortController().signal,
+  handleSIGINT = true,
   logLevel = "info",
   rootDirectoryUrl,
   buildDirectoryUrl,
   entryPoints = {},
-  // for now it's here but I think preview will become an other script
-  // that will just pass different options to build project
-  // and this function will be agnostic about "preview" concept
-  isPreview = false,
+  baseUrl = "/",
+
+  // default runtimeCompat corresponds to dynamic import
+  // (meaning we can keep <script type="module">)
+  runtimeCompat = {
+    // android: "8",
+    chrome: "63",
+    edge: "79",
+    firefox: "67",
+    ios: "11.3",
+    opera: "50",
+    safari: "11.3",
+    samsung: "8.2",
+  },
   plugins = [],
-  htmlSupervisor,
+  sourcemaps = false,
+  sourcemapsSourcesContent,
+  urlAnalysis = {},
   nodeEsmResolution,
   fileSystemMagicResolution,
-  babel,
-  runtimeSupport = defaultRuntimeSupport,
-  sourcemaps = isPreview ? "file" : false,
-
+  directoryReferenceAllowed,
+  transpilation = {},
   bundling = true,
-  minify = true,
-  versioning = "filename", //  "filename", "search_param", "none"
+  minification = true,
+  versioning = true,
+  versioningMethod = "search_param", // "filename", "search_param"
   lineBreakNormalization = process.platform === "win32",
 
-  writeOnFileSystem = true,
+  clientFiles = {
+    "./src/": true,
+  },
+  cooldownBetweenFileEvents,
+  watch = false,
+
   buildDirectoryClean = true,
-  baseUrl = "/",
+  writeOnFileSystem = true,
+  writeGeneratedFiles = false,
   assetManifest = true,
   assetManifestFileRelativeUrl = "asset-manifest.json",
 }) => {
-  const logger = createLogger({ logLevel })
+  const operation = Abort.startOperation()
+  operation.addAbortSignal(signal)
+  if (handleSIGINT) {
+    operation.addAbortSource((abort) => {
+      return raceProcessTeardownEvents(
+        {
+          SIGINT: true,
+        },
+        abort,
+      )
+    })
+  }
+
   rootDirectoryUrl = assertAndNormalizeDirectoryUrl(rootDirectoryUrl)
   buildDirectoryUrl = assertAndNormalizeDirectoryUrl(buildDirectoryUrl)
   assertEntryPoints({ entryPoints })
-  if (!["filename", "search_param", "none"].includes(versioning)) {
+  if (!["filename", "search_param"].includes(versioningMethod)) {
     throw new Error(
-      `Unexpected "versioning": must be "filename", "search_param" or "none"; got ${versioning}`,
+      `Unexpected "versioningMethod": must be "filename", "search_param"; got ${versioning}`,
     )
   }
 
-  const entryPointKeys = Object.keys(entryPoints)
-  if (entryPointKeys.length === 1) {
-    logger.info(`
+  const runBuild = async ({ signal, logLevel }) => {
+    const logger = createLogger({ logLevel })
+    const buildOperation = Abort.startOperation()
+    const infoLogsAreDisabled = !loggerToLevels(logger).info
+    buildOperation.addAbortSignal(signal)
+    const entryPointKeys = Object.keys(entryPoints)
+    if (entryPointKeys.length === 1) {
+      logger.info(`
 build "${entryPointKeys[0]}"`)
-  } else {
-    logger.info(`
+    } else {
+      logger.info(`
 build ${entryPointKeys.length} entry points`)
-  }
-  const rawGraph = createUrlGraph()
-  const prebuildTask = createTaskLog(logger, "prebuild")
-  let urlCount = 0
-  const rawGraphKitchen = createKitchen({
-    signal,
-    logger,
-    rootDirectoryUrl,
-    urlGraph: rawGraph,
-    plugins: [
-      ...plugins,
-      {
-        name: "jsenv:build_log",
-        appliesDuring: { build: true },
-        cooked: () => {
-          urlCount++
-          prebuildTask.setRightText(urlCount)
-        },
-      },
-      ...getCorePlugins({
-        htmlSupervisor,
-        nodeEsmResolution,
-        fileSystemMagicResolution,
-        babel,
-      }),
-      jsenvPluginBundleJsModule(),
-      ...(minify ? [jsenvPluginMinifyJs(), jsenvPluginMinifyHtml()] : []),
-    ],
-    scenario: "build",
-    sourcemaps,
-  })
-  const entryUrls = []
-  try {
-    await loadUrlGraph({
+    }
+    const useExplicitJsClassicConversion = entryPointKeys.some((key) =>
+      entryPoints[key].includes("?as_js_classic"),
+    )
+
+    const rawGraph = createUrlGraph()
+    const prebuildTask = createTaskLog("prebuild", {
+      disabled: infoLogsAreDisabled,
+    })
+    const prebuildRedirections = new Map()
+    const rawGraphKitchen = createKitchen({
+      signal,
+      logger,
+      rootDirectoryUrl,
       urlGraph: rawGraph,
-      kitchen: rawGraphKitchen,
-      outDirectoryUrl: new URL(`.jsenv/build/`, rootDirectoryUrl),
-      runtimeSupport,
-      startLoading: (cookEntryFile) => {
-        Object.keys(entryPoints).forEach((key) => {
-          const [, entryUrlInfo] = cookEntryFile({
-            trace: `"${key}" in entryPoints parameter`,
-            type: "entry_point",
-            specifier: key,
-          })
-          entryUrls.push(entryUrlInfo.url)
-        })
-      },
+      scenario: "build",
+      sourcemaps,
+      sourcemapsSourcesContent,
+      runtimeCompat,
+      writeGeneratedFiles,
+      plugins: [
+        ...plugins,
+        {
+          appliesDuring: "build",
+          fetchUrlContent: (urlInfo, context) => {
+            if (context.reference.original) {
+              prebuildRedirections.set(
+                context.reference.original.url,
+                context.reference.url,
+              )
+            }
+          },
+          formatUrl: (reference) => {
+            if (!reference.shouldHandle) {
+              return `ignore:${reference.specifier}`
+            }
+            return null
+          },
+        },
+        ...getCorePlugins({
+          rootDirectoryUrl,
+          urlGraph: rawGraph,
+          scenario: "build",
+          runtimeCompat,
+
+          urlAnalysis,
+          nodeEsmResolution,
+          fileSystemMagicResolution,
+          directoryReferenceAllowed,
+          transpilation: {
+            ...transpilation,
+            babelHelpersAsImport: !useExplicitJsClassicConversion,
+            jsModuleAsJsClassic: false,
+          },
+          minification,
+          bundling,
+        }),
+      ],
     })
-  } catch (e) {
-    prebuildTask.fail()
-    throw e
-  }
-  // here we can perform many checks such as ensuring ressource hints are used
-  prebuildTask.done()
-  logger.debug(
-    `raw graph urls:
-${Object.keys(rawGraph.urlInfos).join("\n")}`,
-  )
+    const entryUrls = []
+    try {
+      await loadUrlGraph({
+        operation: buildOperation,
+        urlGraph: rawGraph,
+        kitchen: rawGraphKitchen,
+        writeGeneratedFiles,
+        outDirectoryUrl: new URL(`.jsenv/build/`, rootDirectoryUrl),
+        startLoading: (cookEntryFile) => {
+          Object.keys(entryPoints).forEach((key) => {
+            const [, entryUrlInfo] = cookEntryFile({
+              trace: `"${key}" in entryPoints parameter`,
+              type: "entry_point",
+              specifier: key,
+            })
+            entryUrls.push(entryUrlInfo.url)
+            entryUrlInfo.filename = entryPoints[key]
+            // entryUrlInfo.data.entryPointKey = key
+          })
+        },
+      })
+    } catch (e) {
+      prebuildTask.fail()
+      throw e
+    }
+    prebuildTask.done()
 
-  const bundleUrlInfos = {}
-  if (bundling) {
+    const buildUrlsGenerator = createBuilUrlsGenerator({
+      buildDirectoryUrl,
+    })
+    const rawUrls = {}
+    const bundleRedirections = {}
+    const buildUrls = {}
+    const bundleUrlInfos = {}
     const bundlers = {}
     rawGraphKitchen.pluginController.plugins.forEach((plugin) => {
       const bundle = plugin.bundle
@@ -164,6 +262,10 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
         )
       }
       Object.keys(bundle).forEach((type) => {
+        const bundleFunction = bundle[type]
+        if (!bundleFunction) {
+          return
+        }
         const bundlerForThatType = bundlers[type]
         if (bundlerForThatType) {
           // first plugin to define a bundle hook wins
@@ -183,8 +285,7 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
         return
       }
     }
-    Object.keys(rawGraph.urlInfos).forEach((rawUrl) => {
-      const rawUrlInfo = rawGraph.getUrlInfo(rawUrl)
+    GRAPH.forEach(rawGraph, (rawUrlInfo) => {
       if (rawUrlInfo.data.isEntryPoint) {
         addToBundlerIfAny(rawUrlInfo)
         if (rawUrlInfo.type === "html") {
@@ -195,7 +296,10 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
                 // bundle inline script type module deps
                 dependencyUrlInfo.references.forEach((inlineScriptRef) => {
                   if (inlineScriptRef.type === "js_import_export") {
-                    addToBundlerIfAny(rawGraph.getUrlInfo(inlineScriptRef.url))
+                    const inlineUrlInfo = rawGraph.getUrlInfo(
+                      inlineScriptRef.url,
+                    )
+                    addToBundlerIfAny(inlineUrlInfo)
                   }
                 })
               }
@@ -204,6 +308,21 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
             }
             addToBundlerIfAny(dependencyUrlInfo)
           })
+          rawUrlInfo.references.forEach((reference) => {
+            if (
+              reference.isRessourceHint &&
+              reference.expectedType === "js_module"
+            ) {
+              const referencedUrlInfo = rawGraph.getUrlInfo(reference.url)
+              if (
+                referencedUrlInfo &&
+                // something else than the ressource hint is using this url
+                referencedUrlInfo.dependents.size > 0
+              ) {
+                addToBundlerIfAny(referencedUrlInfo)
+              }
+            }
+          })
           return
         }
       }
@@ -212,13 +331,14 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
       // For instance we will bundle service worker/workers detected like this
       if (rawUrlInfo.type === "js_module") {
         rawUrlInfo.references.forEach((reference) => {
-          if (reference.type === "js_import_meta_url_pattern") {
+          if (reference.type === "js_url_specifier") {
             const urlInfo = rawGraph.getUrlInfo(reference.url)
             addToBundlerIfAny(urlInfo)
           }
         })
       }
     })
+    const bundleInternalRedirections = {}
     await Object.keys(bundlers).reduce(async (previous, type) => {
       await previous
       const bundler = bundlers[type]
@@ -226,7 +346,9 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
       if (urlInfosToBundle.length === 0) {
         return
       }
-      const bundleTask = createTaskLog(logger, `bundle "${type}"`)
+      const bundleTask = createTaskLog(`bundle "${type}"`, {
+        disabled: infoLogsAreDisabled,
+      })
       try {
         const bundlerGeneratedUrlInfos =
           await rawGraphKitchen.pluginController.callAsyncHook(
@@ -237,27 +359,46 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
             },
             urlInfosToBundle,
             {
-              signal,
-              logger,
-              rootDirectoryUrl,
+              ...rawGraphKitchen.kitchenContext,
               buildDirectoryUrl,
-              urlGraph: rawGraph,
-              runtimeSupport,
-              sourcemaps,
             },
           )
         Object.keys(bundlerGeneratedUrlInfos).forEach((url) => {
-          const bundleUrlInfo = bundlerGeneratedUrlInfos[url]
           const rawUrlInfo = rawGraph.getUrlInfo(url)
-          bundleUrlInfos[url] = {
+          const bundlerGeneratedUrlInfo = bundlerGeneratedUrlInfos[url]
+          const bundleUrlInfo = {
             type,
-            ...bundleUrlInfo,
+            subtype: rawUrlInfo ? rawUrlInfo.subtype : undefined,
+            filename: rawUrlInfo ? rawUrlInfo.filename : undefined,
+            originalUrl: rawUrlInfo ? rawUrlInfo.originalUrl : undefined,
+            originalContent: rawUrlInfo
+              ? rawUrlInfo.originalContent
+              : undefined,
+            ...bundlerGeneratedUrlInfo,
             data: {
               ...(rawUrlInfo ? rawUrlInfo.data : {}),
-              ...bundleUrlInfo.data,
+              ...bundlerGeneratedUrlInfo.data,
               fromBundle: true,
             },
           }
+          const buildUrl = buildUrlsGenerator.generate(url, {
+            urlInfo: bundleUrlInfo,
+          })
+          bundleRedirections[url] = buildUrl
+          rawUrls[buildUrl] = url
+          bundleUrlInfos[buildUrl] = bundleUrlInfo
+          if (buildUrl.includes("?")) {
+            bundleUrlInfos[asUrlWithoutSearch(buildUrl)] = bundleUrlInfo
+          }
+          if (bundlerGeneratedUrlInfo.data.bundleRelativeUrl) {
+            const urlForBundler = new URL(
+              bundlerGeneratedUrlInfo.data.bundleRelativeUrl,
+              buildDirectoryUrl,
+            ).href
+            if (urlForBundler !== buildUrl) {
+              bundleInternalRedirections[urlForBundler] = buildUrl
+            }
+          }
         })
       } catch (e) {
         bundleTask.fail()
@@ -265,482 +406,817 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
       }
       bundleTask.done()
     }, Promise.resolve())
-  }
 
-  const buildUrlsGenerator = createBuilUrlsGenerator({
-    buildDirectoryUrl,
-  })
-  const rawUrls = {}
-  const buildUrls = {}
-  const finalGraph = createUrlGraph()
-  const optimizeHooks = rawGraphKitchen.pluginController.addHook("optimize")
-  const finalGraphKitchen = createKitchen({
-    logger,
-    rootDirectoryUrl,
-    urlGraph: finalGraph,
-    // Inline content, such as <script> inside html, is transformed during the previous phase.
-    // If we read the inline content it would be considered as the original content.
-    // - It could be "fixed" by taking into account sourcemap and consider sourcemap sources
-    //   as the original content.
-    //   - But it would not work when sourcemap are not generated
-    //   - would be a bit slower
-    // - So instead of reading the inline content directly, we search into raw graph
-    //   to get "originalContent" and "sourcemap"
-    loadInlineUrlInfos: (finalUrlInfo) => {
-      const rawUrl = finalUrlInfo.data.rawUrl
-      const bundleUrlInfo = bundleUrlInfos[rawUrl]
-      const urlInfo = bundleUrlInfo || finalUrlInfo
-      const rawUrlInfo = rawGraph.getUrlInfo(rawUrl)
-      return {
-        originalContent: rawUrlInfo ? rawUrlInfo.originalContent : undefined,
-        sourcemap: bundleUrlInfo
-          ? bundleUrlInfo.sourcemap
-          : rawUrlInfo
-          ? rawUrlInfo.sourcemap
-          : undefined,
-        contentType: urlInfo.contentType,
-        content: urlInfo.content,
-      }
-    },
-    plugins: [
-      jsenvPluginInline(),
-      {
-        name: "jsenv:postbuild",
-        appliesDuring: { build: true },
-        resolve: (reference) => {
-          if (reference.specifier[0] === "/") {
-            const url = new URL(reference.specifier.slice(1), rootDirectoryUrl)
-              .href
-            return url
-          }
-          const parentUrlInfo = finalGraph.getUrlInfo(reference.parentUrl)
-          if (parentUrlInfo && parentUrlInfo.data.fromBundle) {
-            // code generated by rollup contains specifier relative
-            // to the generated file.
-            // This file does not exists yet we must resolve against the raw url, not the build url
-            const parentRawUrl = parentUrlInfo.data.rawUrl
-            const rawUrl = new URL(reference.specifier, parentRawUrl).href
-            return rawUrl
-          }
-          return new URL(reference.specifier, reference.parentUrl).href
-        },
-        normalize: (reference) => {
-          if (!reference.url.startsWith("file:")) {
-            return null
-          }
-          // already a build url
-          const rawUrl = rawUrls[reference.url]
-          if (rawUrl) {
-            reference.data.rawUrl = rawUrl
-            return reference.url
-          }
-          const bundleUrlInfo = bundleUrlInfos[reference.url]
-          // from rollup or postcss
-          if (bundleUrlInfo) {
-            const buildUrl = buildUrlsGenerator.generate(
-              reference.url,
-              bundleUrlInfo,
-            )
-            reference.data.rawUrl = reference.url
-            rawUrls[buildUrl] = reference.url
-            return buildUrl
-          }
-          const rawUrlInfo = rawGraph.getUrlInfo(reference.url)
-          // files from root directory but not given to rollup nor postcss
-          if (rawUrlInfo) {
-            const buildUrl = buildUrlsGenerator.generate(
-              reference.url,
-              rawUrlInfo,
-            )
-            reference.data.rawUrl = reference.url
-            rawUrls[buildUrl] = reference.url
-            return buildUrl
-          }
-          if (reference.isInline) {
-            const rawUrl = Object.keys(rawGraph.urlInfos).find((url) => {
-              const rawUrlInfo = rawGraph.urlInfos[url]
-              if (!rawUrlInfo.isInline) {
-                return false
+    const urlAnalysisPlugin = jsenvPluginUrlAnalysis({
+      rootDirectoryUrl,
+      ...urlAnalysis,
+    })
+    const postBuildRedirections = {}
+    const finalGraph = createUrlGraph()
+    const optimizeUrlContentHooks =
+      rawGraphKitchen.pluginController.addHook("optimizeUrlContent")
+    const finalGraphKitchen = createKitchen({
+      logger,
+      rootDirectoryUrl,
+      urlGraph: finalGraph,
+      scenario: "build",
+      sourcemaps,
+      sourcemapsSourcesContent,
+      sourcemapsRelativeSources: !versioning,
+      runtimeCompat,
+      writeGeneratedFiles,
+      plugins: [
+        urlAnalysisPlugin,
+        jsenvPluginAsJsClassic({ systemJsInjection: true }),
+        jsenvPluginInline({ fetchInlineUrls: false }),
+        {
+          name: "jsenv:postbuild",
+          appliesDuring: "build",
+          resolveUrl: (reference) => {
+            const performInternalRedirections = (url) => {
+              const prebuildRedirection = prebuildRedirections.get(url)
+              if (prebuildRedirection) {
+                logger.debug(
+                  `\nprebuild redirection\n${url} ->\n${prebuildRedirection}\n`,
+                )
+                url = prebuildRedirection
               }
-              if (rawUrlInfo.content === reference.content) {
-                return true
+              const bundleRedirection = bundleRedirections[url]
+              if (bundleRedirection) {
+                logger.debug(
+                  `\nbundler redirection\n${url} ->\n${bundleRedirection}\n`,
+                )
+                url = bundleRedirection
               }
-              return false
-            })
-            if (!rawUrl) {
-              throw new Error(`cannot find raw url`)
+              const bundleInternalRedirection = bundleInternalRedirections[url]
+              if (bundleInternalRedirection) {
+                logger.debug(
+                  `\nbundler internal redirection\n${url} ->\n${bundleInternalRedirection}\n`,
+                )
+                url = bundleInternalRedirection
+              }
+              return url
             }
-            const rawUrlInfo = rawGraph.getUrlInfo(rawUrl)
-            const parentUrlInfo = finalGraph.getUrlInfo(reference.parentUrl)
-            const buildUrl = buildUrlsGenerator.generate(
-              reference.url,
-              rawUrlInfo,
-              parentUrlInfo,
-            )
-            rawUrls[buildUrl] = reference.url
-            reference.data.rawUrl = rawUrl
-            return buildUrl
-          }
-          if (reference.type === "sourcemap_comment") {
-            // inherit parent build url
-            return generateSourcemapUrl(reference.parentUrl)
-          }
-          // files generated during the final graph (sourcemaps)
-          // const finalUrlInfo = finalGraph.getUrlInfo(url)
-          const buildUrl = buildUrlsGenerator.generate(reference.url, {
-            data: {},
-            type: "asset",
-          })
-          return buildUrl
-        },
-        formatReferencedUrl: (reference) => {
-          if (!reference.url.startsWith("file:")) {
-            return null
-          }
-          if (!urlIsInsideOf(reference.url, buildDirectoryUrl)) {
-            throw new Error(
-              `urls should be inside build directory at this stage, found "${reference.url}"`,
-            )
-          }
-          // if a file is in the same directory we could prefer the relative notation
-          // but to keep things simple let's keep the notation relative to baseUrl for now
-          const specifier = `${baseUrl}${urlToRelativeUrl(
-            reference.url,
-            buildDirectoryUrl,
-          )}`
-          buildUrls[specifier] = reference.url
-          return specifier
-        },
-        load: (finalUrlInfo) => {
-          const rawUrl = finalUrlInfo.data.rawUrl
-          const bundleUrlInfo = bundleUrlInfos[rawUrl]
-          const urlInfo = bundleUrlInfo || rawGraph.getUrlInfo(rawUrl)
-          return {
-            data: bundleUrlInfo ? bundleUrlInfo.data : undefined,
-            originalContent: urlInfo.originalContent,
-            contentType: urlInfo.contentType,
-            content: urlInfo.content,
-            sourcemap: urlInfo.sourcemap,
-          }
-        },
-        transform: {
-          html: (urlInfo) => {
-            const htmlAst = parseHtmlString(urlInfo.content, {
-              storeOriginalPositions: false,
-            })
-            return {
-              content: stringifyHtmlAst(htmlAst, {
-                removeOriginalPositionAttributes: true,
-              }),
+
+            if (reference.type === "filesystem") {
+              const parentRawUrl = rawUrls[reference.parentUrl]
+              const baseUrl = ensurePathnameTrailingSlash(parentRawUrl)
+              return performInternalRedirections(
+                new URL(reference.specifier, baseUrl).href,
+              )
             }
+            if (reference.specifier[0] === "/") {
+              return performInternalRedirections(
+                new URL(reference.specifier.slice(1), buildDirectoryUrl).href,
+              )
+            }
+            return performInternalRedirections(
+              new URL(
+                reference.specifier,
+                reference.baseUrl || reference.parentUrl,
+              ).href,
+            )
           },
-        },
-      },
-      {
-        name: "jsenv:optimize",
-        appliesDuring: { build: true },
-        transform: async (urlInfo, context) => {
-          if (optimizeHooks.length) {
-            await rawGraphKitchen.pluginController.callAsyncHooks(
-              "optimize",
-              urlInfo,
-              context,
-              async (optimizeReturnValue) => {
-                await finalGraphKitchen.urlInfoTransformer.applyFinalTransformations(
-                  urlInfo,
-                  optimizeReturnValue,
+          // redirecting urls into the build directory
+          redirectUrl: (reference) => {
+            if (!reference.url.startsWith("file:")) {
+              return null
+            }
+            // already a build url
+            const rawUrl = rawUrls[reference.url]
+            if (rawUrl) {
+              return reference.url
+            }
+            // from "js_module_as_js_classic":
+            //   - injecting "?as_js_classic" for the first time
+            //   - injecting "?as_js_classic" because the parentUrl has it
+            if (reference.original) {
+              const referenceOriginalUrl = reference.original.url
+              let originalBuildUrl
+              if (urlIsInsideOf(referenceOriginalUrl, buildDirectoryUrl)) {
+                originalBuildUrl = referenceOriginalUrl
+              } else {
+                originalBuildUrl = Object.keys(rawUrls).find(
+                  (key) => rawUrls[key] === referenceOriginalUrl,
                 )
-              },
-            )
-          }
-        },
-      },
-    ],
-    scenario: "build",
-    sourcemaps,
-  })
-  const buildTask = createTaskLog(logger, "build")
-  const postBuildEntryUrls = []
-  try {
-    await loadUrlGraph({
-      urlGraph: finalGraph,
-      kitchen: finalGraphKitchen,
-      outDirectoryUrl: new URL(".jsenv/postbuild/", rootDirectoryUrl),
-      runtimeSupport,
-      startLoading: (cookEntryFile) => {
-        entryUrls.forEach((entryUrl) => {
-          const [, postBuildEntryUrlInfo] = cookEntryFile({
-            trace: `entryPoint`,
-            type: "entry_point",
-            specifier: entryUrl,
-          })
-          postBuildEntryUrls.push(postBuildEntryUrlInfo.url)
-        })
-      },
-    })
-  } catch (e) {
-    buildTask.fail()
-    throw e
-  }
-  buildTask.done()
-
-  logger.debug(
-    `graph urls pre-versioning:
-${Object.keys(finalGraph.urlInfos).join("\n")}`,
-  )
-  if (versioning !== "none") {
-    const versioningTask = createTaskLog(logger, "inject version in urls")
-    try {
-      const urlsSorted = sortUrlGraphByDependencies(finalGraph)
-      urlsSorted.forEach((url) => {
-        if (url.startsWith("data:")) {
-          return
-        }
-        const urlInfo = finalGraph.getUrlInfo(url)
-        if (urlInfo.type === "sourcemap") {
-          return
-        }
-        if (urlInfo.isInline) {
-          return
-        }
-        const urlVersionGenerator = createUrlVersionGenerator()
-        urlVersionGenerator.augmentWithContent({
-          content: urlInfo.content,
-          contentType: urlInfo.contentType,
-          lineBreakNormalization,
-        })
-        urlInfo.dependencies.forEach((dependencyUrl) => {
-          const dependencyUrlInfo = finalGraph.getUrlInfo(dependencyUrl)
-          if (dependencyUrlInfo.isInline) {
-            // this content is part of the file, no need to take into account twice
-            return
-          }
-          if (dependencyUrlInfo.data.version) {
-            urlVersionGenerator.augmentWithDependencyVersion(
-              dependencyUrlInfo.data.version,
-            )
-          } else {
-            // because all dependencies are know, if the dependency has no version
-            // it means there is a circular dependency between this file
-            // and it's dependency
-            // in that case we'll use the dependency content
-            urlVersionGenerator.augmentWithContent({
-              content: dependencyUrlInfo.content,
-              contentType: dependencyUrlInfo.contentType,
-              lineBreakNormalization,
-            })
-          }
-        })
-        urlInfo.data.version = urlVersionGenerator.generate()
-        urlInfo.data.versionedUrl = injectVersionIntoBuildUrl({
-          buildUrl: urlInfo.url,
-          version: urlInfo.data.version,
-          versioning,
-        })
-      })
-      const versionMappings = {}
-      const usedVersionMappings = []
-      const versioningKitchen = createKitchen({
-        logger,
-        rootDirectoryUrl: buildDirectoryUrl,
-        urlGraph: finalGraph,
-        loadInlineUrlInfos: (versionedUrlInfo) => {
-          const rawUrlInfo = rawGraph.getUrlInfo(versionedUrlInfo.data.rawUrl)
-          const finalUrlInfo = finalGraph.getUrlInfo(versionedUrlInfo.url)
-          return {
-            originalContent: rawUrlInfo
-              ? rawUrlInfo.originalContent
-              : undefined,
-            sourcemap: finalUrlInfo ? finalUrlInfo.sourcemap : undefined,
-            contentType: versionedUrlInfo.contentType,
-            content: versionedUrlInfo.content,
-          }
-        },
-        plugins: [
-          jsenvPluginInline({
-            allowEscapeForVersioning: true,
-          }),
-          {
-            name: "jsenv:versioning",
-            appliesDuring: { build: true },
-            resolve: (reference) => {
-              const buildUrl = buildUrls[reference.specifier]
-              if (buildUrl) {
-                return buildUrl
               }
-              const url = new URL(reference.specifier, reference.parentUrl).href
-              return url
-            },
-            formatReferencedUrl: (reference) => {
-              if (reference.isInline) {
-                return null
+              let rawUrl
+              if (urlIsInsideOf(reference.url, buildDirectoryUrl)) {
+                const originalBuildUrl =
+                  postBuildRedirections[referenceOriginalUrl]
+                rawUrl = originalBuildUrl
+                  ? rawUrls[originalBuildUrl]
+                  : reference.url
+              } else {
+                rawUrl = reference.url
               }
-              // specifier comes from "normalize" hook done a bit earlier in this file
-              // we want to get back their build url to access their infos
-              const referencedUrlInfo = finalGraph.getUrlInfo(reference.url)
-              if (referencedUrlInfo.data.isEntryPoint) {
-                return reference.specifier
+              // the url info do not exists yet (it will be created after this "normalize" hook)
+              // And the content will be generated when url is cooked by url graph loader.
+              // Here we just want to reserve an url for that file
+              const buildUrl = buildUrlsGenerator.generate(rawUrl, {
+                urlInfo: {
+                  data: {
+                    ...reference.data,
+                    isWebWorkerEntryPoint:
+                      isWebWorkerEntryPointReference(reference),
+                  },
+                  type: reference.expectedType,
+                  subtype: reference.expectedSubtype,
+                  filename: reference.filename,
+                },
+              })
+              postBuildRedirections[originalBuildUrl] = buildUrl
+              rawUrls[buildUrl] = rawUrl
+              return buildUrl
+            }
+            if (reference.isInline) {
+              const rawUrlInfo = GRAPH.find(rawGraph, (rawUrlInfo) => {
+                if (!rawUrlInfo.isInline) {
+                  return false
+                }
+                if (rawUrlInfo.content === reference.content) {
+                  return true
+                }
+                if (rawUrlInfo.originalContent === reference.content) {
+                  return true
+                }
+                return false
+              })
+              const parentUrlInfo = finalGraph.getUrlInfo(reference.parentUrl)
+              if (!rawUrlInfo) {
+                // generated during final graph
+                // (happens for JSON.parse injected for import assertions for instance)
+                // throw new Error(`cannot find raw url for "${reference.url}"`)
+                return reference.url
               }
-              // data:* urls and so on
-              if (!referencedUrlInfo.url.startsWith("file:")) {
-                return null
+              const buildUrl = buildUrlsGenerator.generate(reference.url, {
+                urlInfo: rawUrlInfo,
+                parentUrlInfo,
+              })
+              rawUrls[buildUrl] = rawUrlInfo.url
+              return buildUrl
+            }
+            // from "js_module_as_js_classic":
+            //   - to inject "s.js"
+            if (reference.injected) {
+              const buildUrl = buildUrlsGenerator.generate(reference.url, {
+                urlInfo: {
+                  data: {},
+                  type: "js_classic",
+                },
+              })
+              rawUrls[buildUrl] = reference.url
+              return buildUrl
+            }
+            const rawUrlInfo = rawGraph.getUrlInfo(reference.url)
+            const parentUrlInfo = finalGraph.getUrlInfo(reference.parentUrl)
+            // files from root directory but not given to rollup nor postcss
+            if (rawUrlInfo) {
+              const buildUrl = buildUrlsGenerator.generate(reference.url, {
+                urlInfo: rawUrlInfo,
+                parentUrlInfo,
+              })
+              rawUrls[buildUrl] = rawUrlInfo.url
+              if (buildUrl.includes("?")) {
+                rawUrls[asUrlWithoutSearch(buildUrl)] = rawUrlInfo.url
               }
-              const versionedUrl = referencedUrlInfo.data.versionedUrl
-              if (!versionedUrl) {
-                // happens for sourcemap
-                return `${baseUrl}${urlToRelativeUrl(
-                  referencedUrlInfo.url,
-                  buildDirectoryUrl,
-                )}`
+              return buildUrl
+            }
+            if (reference.type === "sourcemap_comment") {
+              // inherit parent build url
+              return generateSourcemapFileUrl(reference.parentUrl)
+            }
+            // files generated during the final graph:
+            // - sourcemaps
+            // const finalUrlInfo = finalGraph.getUrlInfo(url)
+            const buildUrl = buildUrlsGenerator.generate(reference.url, {
+              urlInfo: {
+                data: {},
+                type: "asset",
+              },
+            })
+            return buildUrl
+          },
+          formatUrl: (reference) => {
+            if (!reference.generatedUrl.startsWith("file:")) {
+              if (!versioning && reference.generatedUrl.startsWith("ignore:")) {
+                return reference.generatedUrl.slice("ignore:".length)
               }
-              const versionedSpecifier = `${baseUrl}${urlToRelativeUrl(
-                versionedUrl,
+              return null
+            }
+            if (!urlIsInsideOf(reference.generatedUrl, buildDirectoryUrl)) {
+              throw new Error(
+                `urls should be inside build directory at this stage, found "${reference.url}"`,
+              )
+            }
+            if (reference.isRessourceHint) {
+              // return the raw url, we will resync at the end
+              return rawUrls[reference.url]
+            }
+            // remove eventual search params and hash
+            const urlUntilPathname = asUrlUntilPathname(reference.generatedUrl)
+            let specifier
+            if (baseUrl === "./") {
+              const relativeUrl = urlToRelativeUrl(
+                urlUntilPathname,
+                reference.parentUrl === rootDirectoryUrl
+                  ? buildDirectoryUrl
+                  : reference.parentUrl,
+              )
+              // ensure "./" on relative url (otherwise it could be a "bare specifier")
+              specifier =
+                relativeUrl[0] === "." ? relativeUrl : `./${relativeUrl}`
+            } else {
+              // if a file is in the same directory we could prefer the relative notation
+              // but to keep things simple let's keep the "absolutely relative" to baseUrl for now
+              specifier = `${baseUrl}${urlToRelativeUrl(
+                urlUntilPathname,
                 buildDirectoryUrl,
               )}`
-              versionMappings[reference.specifier] = versionedSpecifier
-              const parentUrlInfo = finalGraph.getUrlInfo(reference.parentUrl)
-              if (parentUrlInfo.jsQuote) {
-                // the url is inline inside js quotes
-                usedVersionMappings.push(reference.specifier)
-                return () =>
-                  `${parentUrlInfo.jsQuote}+__v__(${JSON.stringify(
-                    reference.specifier,
-                  )})+${parentUrlInfo.jsQuote}`
+            }
+            buildUrls[specifier] = reference.generatedUrl
+            return specifier
+          },
+          fetchUrlContent: async (finalUrlInfo, context) => {
+            const fromBundleOrRawGraph = (url) => {
+              const bundleUrlInfo = bundleUrlInfos[url]
+              if (bundleUrlInfo) {
+                logger.debug(`fetching from bundle ${url}`)
+                return bundleUrlInfo
               }
-              if (
-                reference.type === "js_import_meta_url_pattern" ||
-                reference.subtype === "import_dynamic"
-              ) {
-                usedVersionMappings.push(reference.specifier)
-                return () => `__v__(${JSON.stringify(reference.specifier)})`
+              const rawUrl = rawUrls[url] || url
+              const rawUrlInfo = rawGraph.getUrlInfo(rawUrl)
+              if (!rawUrlInfo) {
+                throw new Error(`Cannot find url`)
               }
-              return versionedSpecifier
-            },
-            load: ({ url }) => {
-              const urlInfo = finalGraph.getUrlInfo(url)
-              return {
-                originalContent: urlInfo.originalContent,
-                contentType: urlInfo.contentType,
-                content: urlInfo.content,
-                sourcemap: urlInfo.sourcemap,
+              logger.debug(`fetching from raw graph ${url}`)
+              if (rawUrlInfo.isInline) {
+                // Inline content, such as <script> inside html, is transformed during the previous phase.
+                // If we read the inline content it would be considered as the original content.
+                // - It could be "fixed" by taking into account sourcemap and consider sourcemap sources
+                //   as the original content.
+                //   - But it would not work when sourcemap are not generated
+                //   - would be a bit slower
+                // - So instead of reading the inline content directly, we search into raw graph
+                //   to get "originalContent" and "sourcemap"
+                finalUrlInfo.type = rawUrlInfo.type
+                finalUrlInfo.subtype = rawUrlInfo.subtype
+                return rawUrlInfo
               }
-            },
+              return rawUrlInfo
+            }
+            // reference injected during "postbuild":
+            // - happens for "as_js_classic" injecting "s.js"
+            if (context.reference.injected) {
+              const [ref, rawUrlInfo] = rawGraphKitchen.injectReference({
+                type: context.reference.type,
+                expectedType: context.reference.expectedType,
+                expectedSubtype: context.reference.expectedSubtype,
+                parentUrl: rawUrls[context.reference.parentUrl],
+                specifier: context.reference.specifier,
+                injected: true,
+              })
+              await rawGraphKitchen.cook(rawUrlInfo, { reference: ref })
+              return rawUrlInfo
+            }
+            // reference updated during "postbuild":
+            // - happens for "as_js_classic"
+            if (context.reference.original) {
+              return fromBundleOrRawGraph(context.reference.original.url)
+            }
+            return fromBundleOrRawGraph(finalUrlInfo.url)
           },
-        ],
-        scenario: "build",
-        sourcemaps,
-      })
-      // arrange state before reloading all files
-      Object.keys(finalGraph.urlInfos).forEach((url) => {
-        const urlInfo = finalGraph.urlInfos[url]
-        urlInfo.data.promise = null
-      })
+        },
+        {
+          name: "jsenv:optimize",
+          appliesDuring: "build",
+          finalizeUrlContent: async (urlInfo, context) => {
+            if (optimizeUrlContentHooks.length) {
+              await rawGraphKitchen.pluginController.callAsyncHooks(
+                "optimizeUrlContent",
+                urlInfo,
+                context,
+                async (optimizeReturnValue) => {
+                  await finalGraphKitchen.urlInfoTransformer.applyFinalTransformations(
+                    urlInfo,
+                    optimizeReturnValue,
+                  )
+                },
+              )
+            }
+          },
+        },
+      ],
+    })
+    const buildTask = createTaskLog("build", { disabled: infoLogsAreDisabled })
+    const postBuildEntryUrls = []
+    try {
       await loadUrlGraph({
+        operation: buildOperation,
         urlGraph: finalGraph,
-        kitchen: versioningKitchen,
-        runtimeSupport,
+        kitchen: finalGraphKitchen,
+        outDirectoryUrl: new URL(".jsenv/postbuild/", rootDirectoryUrl),
+        writeGeneratedFiles,
+        skipRessourceHint: true,
         startLoading: (cookEntryFile) => {
-          postBuildEntryUrls.forEach((postBuildEntryUrl) => {
-            cookEntryFile({
+          entryUrls.forEach((entryUrl) => {
+            const [, postBuildEntryUrlInfo] = cookEntryFile({
               trace: `entryPoint`,
               type: "entry_point",
-              specifier: postBuildEntryUrl,
+              specifier: entryUrl,
             })
+            postBuildEntryUrls.push(postBuildEntryUrlInfo.url)
           })
         },
       })
-      if (usedVersionMappings.length) {
-        const versionMappingsNeeded = {}
-        usedVersionMappings.forEach((specifier) => {
-          versionMappingsNeeded[specifier] = versionMappings[specifier]
-        })
-        await Promise.all(
-          Object.keys(finalGraph.urlInfos).map(async (buildUrl) => {
-            const buildUrlInfo = finalGraph.getUrlInfo(buildUrl)
-            if (!buildUrlInfo.data.isEntryPoint) {
-              return
-            }
-            await injectVersionMappings(buildUrlInfo, {
-              kitchen: finalGraphKitchen,
-              versionMappings: versionMappingsNeeded,
-            })
-          }),
-        )
-      }
     } catch (e) {
-      versioningTask.fail()
+      buildTask.fail()
       throw e
     }
-    versioningTask.done()
-  }
+    buildTask.done()
 
-  const buildFileContents = {}
-  const buildInlineFileContents = {}
-  const buildManifest = {}
-  Object.keys(finalGraph.urlInfos).forEach((url) => {
-    if (!url.startsWith("file:")) {
-      return
-    }
-    const buildUrlInfo = finalGraph.getUrlInfo(url)
-    const versionedUrl = buildUrlInfo.data.versionedUrl
-    const useVersionedUrl = versionedUrl && !buildUrlInfo.data.isEntryPoint
-    const buildUrl = useVersionedUrl ? versionedUrl : buildUrlInfo.url
-    if (!urlIsInsideOf(buildUrl, buildDirectoryUrl)) {
-      throw new Error(`build url outside build directory`)
-    }
-    const buildRelativeUrl = urlToRelativeUrl(buildUrl, buildDirectoryUrl)
-    if (buildUrlInfo.isInline) {
-      buildInlineFileContents[buildRelativeUrl] = buildUrlInfo.content
-    } else {
-      buildFileContents[buildRelativeUrl] = buildUrlInfo.content
+    logger.debug(
+      `graph urls pre-versioning:
+${Object.keys(finalGraph.urlInfos).join("\n")}`,
+    )
+    if (versioning) {
+      await applyUrlVersioning({
+        buildOperation,
+        logger,
+        infoLogsAreDisabled,
+        buildDirectoryUrl,
+        rawUrls,
+        buildUrls,
+        baseUrl,
+        postBuildEntryUrls,
+        sourcemaps,
+        sourcemapsSourcesContent,
+        runtimeCompat,
+        writeGeneratedFiles,
+        rawGraph,
+        urlAnalysisPlugin,
+        finalGraph,
+        finalGraphKitchen,
+        lineBreakNormalization,
+        versioningMethod,
+      })
     }
-    if (useVersionedUrl) {
-      const buildRelativeUrlWithoutVersioning = urlToRelativeUrl(
-        buildUrlInfo.url,
+    GRAPH.forEach(finalGraph, (urlInfo) => {
+      if (!urlInfo.shouldHandle) {
+        return
+      }
+      if (!urlInfo.url.startsWith("file:")) {
+        return
+      }
+      if (urlInfo.type === "html") {
+        const htmlAst = parseHtmlString(urlInfo.content, {
+          storeOriginalPositions: false,
+        })
+        urlInfo.content = stringifyHtmlAst(htmlAst, {
+          removeOriginalPositionAttributes: true,
+        })
+      }
+      const version = urlInfo.data.version
+      const useVersionedUrl = version && canUseVersionedUrl(urlInfo, finalGraph)
+      const buildUrl = useVersionedUrl ? urlInfo.data.versionedUrl : urlInfo.url
+      const buildUrlSpecifier = Object.keys(buildUrls).find(
+        (key) => buildUrls[key] === buildUrl,
+      )
+      urlInfo.data.buildUrl = buildUrl
+      urlInfo.data.buildUrlIsVersioned = useVersionedUrl
+      urlInfo.data.buildUrlSpecifier = buildUrlSpecifier
+    })
+    await resyncRessourceHints({
+      logger,
+      finalGraphKitchen,
+      finalGraph,
+      rawUrls,
+      postBuildRedirections,
+    })
+    buildOperation.throwIfAborted()
+    const cleanupActions = []
+    GRAPH.forEach(finalGraph, (urlInfo) => {
+      // nothing uses this url anymore
+      // - versioning update inline content
+      // - file converted for import assertion of js_classic conversion
+      if (
+        !urlInfo.data.isEntryPoint &&
+        urlInfo.type !== "sourcemap" &&
+        urlInfo.dependents.size === 0
+      ) {
+        cleanupActions.push(() => {
+          finalGraph.deleteUrlInfo(urlInfo.url)
+        })
+      }
+    })
+    cleanupActions.forEach((cleanupAction) => cleanupAction())
+    await injectServiceWorkerUrls({
+      finalGraphKitchen,
+      finalGraph,
+      lineBreakNormalization,
+    })
+    buildOperation.throwIfAborted()
+
+    const buildManifest = {}
+    const buildFileContents = {}
+    const buildInlineContents = {}
+    GRAPH.forEach(finalGraph, (urlInfo) => {
+      if (!urlInfo.shouldHandle) {
+        return
+      }
+      if (!urlInfo.url.startsWith("file:")) {
+        return
+      }
+      if (urlInfo.type === "directory") {
+        return
+      }
+      const buildRelativeUrl = urlToRelativeUrl(
+        urlInfo.data.buildUrl,
         buildDirectoryUrl,
       )
-      buildManifest[buildRelativeUrlWithoutVersioning] = buildRelativeUrl
+      if (urlInfo.isInline) {
+        buildInlineContents[buildRelativeUrl] = urlInfo.content
+      } else {
+        buildFileContents[buildRelativeUrl] = urlInfo.content
+        const buildRelativeUrlWithoutVersioning = urlToRelativeUrl(
+          urlInfo.url,
+          buildDirectoryUrl,
+        )
+        buildManifest[buildRelativeUrlWithoutVersioning] = buildRelativeUrl
+      }
+    })
+    if (writeOnFileSystem) {
+      if (buildDirectoryClean) {
+        await ensureEmptyDirectory(buildDirectoryUrl)
+      }
+      const buildRelativeUrls = Object.keys(buildFileContents)
+      await Promise.all(
+        buildRelativeUrls.map(async (buildRelativeUrl) => {
+          await writeFile(
+            new URL(buildRelativeUrl, buildDirectoryUrl),
+            buildFileContents[buildRelativeUrl],
+          )
+        }),
+      )
+      if (versioning && assetManifest && Object.keys(buildManifest).length) {
+        await writeFile(
+          new URL(assetManifestFileRelativeUrl, buildDirectoryUrl),
+          JSON.stringify(buildManifest, null, "  "),
+        )
+      }
+    }
+    logger.info(createUrlGraphSummary(finalGraph, { title: "build files" }))
+    return {
+      buildFileContents,
+      buildInlineContents,
+      buildManifest,
     }
+  }
+
+  if (!watch) {
+    return runBuild({ signal: operation.signal, logLevel })
+  }
+
+  let resolveFirstBuild
+  let rejectFirstBuild
+  const firstBuildPromise = new Promise((resolve, reject) => {
+    resolveFirstBuild = resolve
+    rejectFirstBuild = reject
   })
-  logger.debug(
-    `graph urls post-versioning:
-${Object.keys(finalGraph.urlInfos).join("\n")}`,
-  )
+  let buildAbortController
+  let watchFilesTask
+  const startBuild = async () => {
+    const buildTask = createTaskLog("build")
+    buildAbortController = new AbortController()
+    try {
+      const result = await runBuild({
+        signal: buildAbortController.signal,
+        logLevel: "warn",
+      })
+      buildTask.done()
+      resolveFirstBuild(result)
+      watchFilesTask = createTaskLog("watch files")
+    } catch (e) {
+      if (Abort.isAbortError(e)) {
+        buildTask.fail(`build aborted`)
+      } else if (e.code === "PARSE_ERROR") {
+        buildTask.fail()
+        console.error(e.stack)
+        watchFilesTask = createTaskLog("watch files")
+      } else {
+        buildTask.fail()
+        rejectFirstBuild(e)
+        throw e
+      }
+    }
+  }
 
-  if (writeOnFileSystem) {
-    if (buildDirectoryClean) {
-      await ensureEmptyDirectory(buildDirectoryUrl)
+  startBuild()
+  let startTimeout
+  const clientFileChangeCallback = ({ relativeUrl, event }) => {
+    const url = new URL(relativeUrl, rootDirectoryUrl).href
+    if (watchFilesTask) {
+      watchFilesTask.happen(`${url.slice(rootDirectoryUrl.length)} ${event}`)
+      watchFilesTask = null
     }
-    const buildRelativeUrls = Object.keys(buildFileContents)
-    await Promise.all(
-      buildRelativeUrls.map(async (buildRelativeUrl) => {
-        await writeFile(
-          new URL(buildRelativeUrl, buildDirectoryUrl),
-          buildFileContents[buildRelativeUrl],
-        )
-      }),
-    )
-    if (
-      versioning !== "none" &&
-      assetManifest &&
-      Object.keys(buildManifest).length
-    ) {
-      await writeFile(
-        new URL(assetManifestFileRelativeUrl, buildDirectoryUrl),
-        JSON.stringify(buildManifest, null, "  "),
+    buildAbortController.abort()
+    // setTimeout is to ensure the abortController.abort() above
+    // is properly taken into account so that logs about abort comes first
+    // then logs about re-running the build happens
+    clearTimeout(startTimeout)
+    startTimeout = setTimeout(startBuild, 20)
+  }
+  const stopWatchingClientFiles = registerDirectoryLifecycle(rootDirectoryUrl, {
+    watchPatterns: clientFiles,
+    cooldownBetweenFileEvents,
+    keepProcessAlive: true,
+    recursive: true,
+    added: ({ relativeUrl }) => {
+      clientFileChangeCallback({ relativeUrl, event: "added" })
+    },
+    updated: ({ relativeUrl }) => {
+      clientFileChangeCallback({ relativeUrl, event: "modified" })
+    },
+    removed: ({ relativeUrl }) => {
+      clientFileChangeCallback({ relativeUrl, event: "removed" })
+    },
+  })
+  operation.addAbortCallback(() => {
+    stopWatchingClientFiles()
+  })
+  await firstBuildPromise
+  return stopWatchingClientFiles
+}
+
+const applyUrlVersioning = async ({
+  buildOperation,
+  logger,
+  infoLogsAreDisabled,
+  buildDirectoryUrl,
+  rawUrls,
+  buildUrls,
+  baseUrl,
+  postBuildEntryUrls,
+  sourcemaps,
+  sourcemapsSourcesContent,
+  runtimeCompat,
+  writeGeneratedFiles,
+  rawGraph,
+  urlAnalysisPlugin,
+  finalGraph,
+  finalGraphKitchen,
+  lineBreakNormalization,
+  versioningMethod,
+}) => {
+  const versioningTask = createTaskLog("inject version in urls", {
+    disabled: infoLogsAreDisabled,
+  })
+  try {
+    const urlsSorted = sortByDependencies(finalGraph.urlInfos)
+    urlsSorted.forEach((url) => {
+      if (url.startsWith("data:")) {
+        return
+      }
+      const urlInfo = finalGraph.getUrlInfo(url)
+      if (urlInfo.type === "sourcemap") {
+        return
+      }
+      // ignore:
+      // - inline files:
+      //   they are already taken into account in the file where they appear
+      // - ignored files:
+      //   we don't know their content
+      // - unused files without reference
+      //   File updated such as style.css -> style.css.js or file.js->file.es5.js
+      //   Are used at some point just to be discarded later because they need to be converted
+      //   There is no need to version them and we could not because the file have been ignored
+      //   so their content is unknown
+      if (urlInfo.isInline) {
+        return
+      }
+      if (!urlInfo.shouldHandle) {
+        return
+      }
+      if (!urlInfo.data.isEntryPoint && urlInfo.dependents.size === 0) {
+        return
+      }
+
+      const urlContent =
+        urlInfo.type === "html"
+          ? stringifyHtmlAst(
+              parseHtmlString(urlInfo.content, {
+                storeOriginalPositions: false,
+              }),
+              { removeOriginalPositionAttributes: true },
+            )
+          : urlInfo.content
+      const versionGenerator = createVersionGenerator()
+      versionGenerator.augmentWithContent({
+        content: urlContent,
+        contentType: urlInfo.contentType,
+        lineBreakNormalization,
+      })
+      urlInfo.dependencies.forEach((dependencyUrl) => {
+        // this dependency is inline
+        if (dependencyUrl.startsWith("data:")) {
+          return
+        }
+        const dependencyUrlInfo = finalGraph.getUrlInfo(dependencyUrl)
+        if (
+          // this content is part of the file, no need to take into account twice
+          dependencyUrlInfo.isInline ||
+          // this dependency content is not known
+          !dependencyUrlInfo.shouldHandle
+        ) {
+          return
+        }
+        if (dependencyUrlInfo.data.version) {
+          versionGenerator.augmentWithDependencyVersion(
+            dependencyUrlInfo.data.version,
+          )
+        } else {
+          // because all dependencies are know, if the dependency has no version
+          // it means there is a circular dependency between this file
+          // and it's dependency
+          // in that case we'll use the dependency content
+          versionGenerator.augmentWithContent({
+            content: dependencyUrlInfo.content,
+            contentType: dependencyUrlInfo.contentType,
+            lineBreakNormalization,
+          })
+        }
+      })
+      urlInfo.data.version = versionGenerator.generate()
+
+      urlInfo.data.versionedUrl = normalizeUrl(
+        injectVersionIntoBuildUrl({
+          buildUrl: urlInfo.url,
+          version: urlInfo.data.version,
+          versioningMethod,
+        }),
       )
+    })
+    const versionMappings = {}
+    const usedVersionMappings = []
+    const versioningKitchen = createKitchen({
+      logger,
+      rootDirectoryUrl: buildDirectoryUrl,
+      urlGraph: finalGraph,
+      scenario: "build",
+      sourcemaps,
+      sourcemapsSourcesContent,
+      sourcemapsRelativeSources: true,
+      runtimeCompat,
+      writeGeneratedFiles,
+      plugins: [
+        urlAnalysisPlugin,
+        jsenvPluginInline({
+          fetchInlineUrls: false,
+          analyzeConvertedScripts: true, // to be able to version their urls
+          allowEscapeForVersioning: true,
+        }),
+        {
+          name: "jsenv:versioning",
+          appliesDuring: { build: true },
+          resolveUrl: (reference) => {
+            const buildUrl = buildUrls[reference.specifier]
+            if (buildUrl) {
+              return buildUrl
+            }
+            const urlObject = new URL(
+              reference.specifier,
+              reference.baseUrl || reference.parentUrl,
+            )
+            const url = urlObject.href
+            // during versioning we revisit the deps
+            // but the code used to enforce trailing slash on directories
+            // is not applied because "jsenv:file_url_resolution" is not used
+            // so here we search if the url with a trailing slash exists
+            if (
+              reference.type === "filesystem" &&
+              !urlObject.pathname.endsWith("/")
+            ) {
+              const urlWithTrailingSlash = `${url}/`
+              const specifier = Object.keys(buildUrls).find(
+                (key) => buildUrls[key] === urlWithTrailingSlash,
+              )
+              if (specifier) {
+                return urlWithTrailingSlash
+              }
+            }
+            return url
+          },
+          formatUrl: (reference) => {
+            if (!reference.shouldHandle) {
+              if (reference.generatedUrl.startsWith("ignore:")) {
+                return reference.generatedUrl.slice("ignore:".length)
+              }
+              return null
+            }
+            if (reference.isInline || reference.url.startsWith("data:")) {
+              return null
+            }
+            if (reference.isRessourceHint) {
+              return null
+            }
+            // specifier comes from "normalize" hook done a bit earlier in this file
+            // we want to get back their build url to access their infos
+            const referencedUrlInfo = finalGraph.getUrlInfo(reference.url)
+            if (!canUseVersionedUrl(referencedUrlInfo)) {
+              return reference.specifier
+            }
+            if (!referencedUrlInfo.shouldHandle) {
+              return null
+            }
+            const versionedUrl = referencedUrlInfo.data.versionedUrl
+            if (!versionedUrl) {
+              // happens for sourcemap
+              return `${baseUrl}${urlToRelativeUrl(
+                referencedUrlInfo.url,
+                buildDirectoryUrl,
+              )}`
+            }
+            const versionedSpecifier = `${baseUrl}${urlToRelativeUrl(
+              versionedUrl,
+              buildDirectoryUrl,
+            )}`
+            versionMappings[reference.specifier] = versionedSpecifier
+            buildUrls[versionedSpecifier] = versionedUrl
+
+            const parentUrlInfo = finalGraph.getUrlInfo(reference.parentUrl)
+            if (parentUrlInfo.jsQuote) {
+              // the url is inline inside js quotes
+              usedVersionMappings.push(reference.specifier)
+              return () =>
+                `${parentUrlInfo.jsQuote}+__v__(${JSON.stringify(
+                  reference.specifier,
+                )})+${parentUrlInfo.jsQuote}`
+            }
+            if (
+              reference.type === "js_url_specifier" ||
+              reference.subtype === "import_dynamic"
+            ) {
+              usedVersionMappings.push(reference.specifier)
+              return () => `__v__(${JSON.stringify(reference.specifier)})`
+            }
+            return versionedSpecifier
+          },
+          fetchUrlContent: (versionedUrlInfo) => {
+            if (versionedUrlInfo.isInline) {
+              const rawUrlInfo = rawGraph.getUrlInfo(
+                rawUrls[versionedUrlInfo.url],
+              )
+              const finalUrlInfo = finalGraph.getUrlInfo(versionedUrlInfo.url)
+              return {
+                content: versionedUrlInfo.content,
+                contentType: versionedUrlInfo.contentType,
+                originalContent: rawUrlInfo
+                  ? rawUrlInfo.originalContent
+                  : undefined,
+                sourcemap: finalUrlInfo ? finalUrlInfo.sourcemap : undefined,
+              }
+            }
+            return versionedUrlInfo
+          },
+        },
+      ],
+    })
+    await loadUrlGraph({
+      operation: buildOperation,
+      urlGraph: finalGraph,
+      kitchen: versioningKitchen,
+      skipRessourceHint: true,
+      writeGeneratedFiles,
+      startLoading: (cookEntryFile) => {
+        postBuildEntryUrls.forEach((postBuildEntryUrl) => {
+          cookEntryFile({
+            trace: `entryPoint`,
+            type: "entry_point",
+            specifier: postBuildEntryUrl,
+          })
+        })
+      },
+    })
+    if (usedVersionMappings.length) {
+      const versionMappingsNeeded = {}
+      usedVersionMappings.forEach((specifier) => {
+        versionMappingsNeeded[specifier] = versionMappings[specifier]
+      })
+      await injectGlobalVersionMapping({
+        finalGraphKitchen,
+        finalGraph,
+        versionMappings: versionMappingsNeeded,
+      })
     }
+  } catch (e) {
+    versioningTask.fail()
+    throw e
   }
-  logger.info(createUrlGraphSummary(finalGraph, { title: "build files" }))
-  return {
-    buildFileContents,
-    buildInlineFileContents,
-    buildManifest,
-  }
+  versioningTask.done()
 }
 
-const injectVersionIntoBuildUrl = ({ buildUrl, version, versioning }) => {
-  if (versioning === "search_param") {
+const injectVersionIntoBuildUrl = ({ buildUrl, version, versioningMethod }) => {
+  if (versioningMethod === "search_param") {
     return injectQueryParams(buildUrl, {
       v: version,
     })
@@ -776,3 +1252,16 @@ const assertEntryPoints = ({ entryPoints }) => {
     }
   })
 }
+
+const canUseVersionedUrl = (urlInfo) => {
+  if (urlInfo.data.isEntryPoint) {
+    return false
+  }
+  if (urlInfo.type === "webmanifest") {
+    return false
+  }
+  if (urlInfo.subtype === "service_worker") {
+    return !urlInfo.data.isWebWorkerEntryPoint
+  }
+  return true
+}