@jsenv/core 41.4.17 → 41.4.19

package/dist/build/build.js

@@ -1,10 +1,10 @@
-import { parseHtml, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst, applyBabelPlugins, generateUrlForInlineContent, injectJsenvScript, parseJsWithAcorn, visitHtmlNodes, analyzeScriptNode, getHtmlNodeText, getHtmlNodeAttribute, getHtmlNodePosition, getUrlForContentInsideHtml, setHtmlNodeAttributes, setHtmlNodeText, parseCssUrls, getHtmlNodeAttributePosition, parseSrcSet, removeHtmlNodeText, parseJsUrls, getUrlForContentInsideJs, analyzeLinkNode, findHtmlNode, removeHtmlNode, insertHtmlNodeAfter } from "@jsenv/ast";
+import { parseHtml, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst, applyBabelPlugins, generateUrlForInlineContent, injectJsenvScript, parseJsWithAcorn, visitHtmlNodes, analyzeScriptNode, getHtmlNodeText, getHtmlNodeAttribute, getHtmlNodePosition, getUrlForContentInsideHtml, setHtmlNodeAttributes, setHtmlNodeText, parseCssUrls, getHtmlNodeAttributePosition, parseSrcSet, removeHtmlNodeText, parseJsUrls, getUrlForContentInsideJs, visitJsAst, getImportMetaPropertyName, visitJsAstUntil, analyzeLinkNode, findHtmlNode, removeHtmlNode, insertHtmlNodeAfter } from "@jsenv/ast";
 import { bundleJsModules, jsenvPluginBundling } from "@jsenv/plugin-bundling";
 import { jsenvPluginMinification } from "@jsenv/plugin-minification";
 import { jsenvPluginTranspilation, jsenvPluginJsModuleFallback } from "@jsenv/plugin-transpilation";
 import { memoryUsage } from "node:process";
-import { readFileSync, existsSync, readdirSync, lstatSync, realpathSync } from "node:fs";
-import { lookupPackageDirectory, registerDirectoryLifecycle, urlToRelativeUrl, createDetailedMessage, stringifyUrlSite, generateContentFrame, validateResponseIntegrity, urlIsOrIsInsideOf, ensureWindowsDriveLetter, setUrlFilename, moveUrl, getCallerPosition, urlToBasename, urlToExtension, asSpecifierWithoutSearch, asUrlWithoutSearch, injectQueryParamsIntoSpecifier, bufferToEtag, isFileSystemPath, urlToPathname, setUrlBasename, urlToFileSystemPath, writeFileSync, createLogger, URL_META, applyNodeEsmResolution, normalizeUrl, ANSI, RUNTIME_COMPAT, CONTENT_TYPE, readPackageAtOrNull, urlToFilename, DATA_URL, errorToHTML, normalizeImportMap, composeTwoImportMaps, resolveImport, JS_QUOTES, readCustomConditionsFromProcessArgs, collectFiles, readEntryStatSync, ensurePathnameTrailingSlash, compareFileUrls, applyFileSystemMagicResolution, getExtensionsToTry, setUrlExtension, isSpecifierForNodeBuiltin, injectQueryParams, renderDetails, humanizeDuration, humanizeFileSize, renderTable, renderBigSection, distributePercentages, humanizeMemory, comparePathnames, UNICODE, escapeRegexpSpecialChars, injectQueryParamIntoSpecifierWithoutEncoding, renderUrlOrRelativeUrlFilename, assertAndNormalizeDirectoryUrl, Abort, raceProcessTeardownEvents, startMonitoringCpuUsage, startMonitoringMemoryUsage, inferRuntimeCompatFromClosestPackage, browserDefaultRuntimeCompat, nodeDefaultRuntimeCompat, clearDirectorySync, createTaskLog, createLookupPackageDirectory, ensureEmptyDirectory, updateJsonFileSync, createDynamicLog } from "./jsenv_core_packages.js";
+import { readFileSync, existsSync, realpathSync, readdirSync, lstatSync, statSync } from "node:fs";
+import { lookupPackageDirectory, urlIsOrIsInsideOf, registerDirectoryLifecycle, urlToRelativeUrl, createDetailedMessage, stringifyUrlSite, generateContentFrame, validateResponseIntegrity, ensureWindowsDriveLetter, setUrlFilename, moveUrl, getCallerPosition, urlToBasename, urlToExtension, asSpecifierWithoutSearch, asUrlWithoutSearch, injectQueryParamsIntoSpecifier, bufferToEtag, isFileSystemPath, urlToPathname, setUrlBasename, urlToFileSystemPath, writeFileSync, createLogger, URL_META, applyNodeEsmResolution, normalizeUrl, ANSI, RUNTIME_COMPAT, CONTENT_TYPE, readPackageAtOrNull, urlToFilename, DATA_URL, errorToHTML, normalizeImportMap, composeTwoImportMaps, resolveImport, JS_QUOTES, readCustomConditionsFromProcessArgs, collectFiles, readEntryStatSync, applyFileSystemMagicResolution, getExtensionsToTry, ensurePathnameTrailingSlash, compareFileUrls, setUrlExtension, isSpecifierForNodeBuiltin, injectQueryParams, renderDetails, humanizeDuration, humanizeFileSize, renderTable, renderBigSection, distributePercentages, humanizeMemory, comparePathnames, UNICODE, escapeRegexpSpecialChars, injectQueryParamIntoSpecifierWithoutEncoding, renderUrlOrRelativeUrlFilename, assertAndNormalizeDirectoryUrl, Abort, raceProcessTeardownEvents, startMonitoringMemoryUsage, inferRuntimeCompatFromClosestPackage, browserDefaultRuntimeCompat, nodeDefaultRuntimeCompat, clearDirectorySync, createTaskLog, createLookupPackageDirectory, ensureEmptyDirectory, updateJsonFileSync, createDynamicLog } from "./jsenv_core_packages.js";
 import { pathToFileURL } from "node:url";
 import { generateSourcemapFileUrl, createMagicSource, composeTwoSourcemaps, generateSourcemapDataUrl, SOURCEMAP } from "@jsenv/sourcemap";
 import { createPluginsController } from "@jsenv/server/src/plugins_controller.js";
@@ -20,18 +20,21 @@ import "node:util";
 const getDirectoryWatchPatterns = (
   directoryUrl,
   watchedDirectoryUrl,
-  { sourceFilesConfig },
+  { sourceFilesConfig, defaultPatterns = true },
 ) => {
   const directoryUrlRelativeToWatchedDirectory = urlToRelativeUrl(
     directoryUrl,
     watchedDirectoryUrl,
   );
-  const watchPatterns = {
-    [`${directoryUrlRelativeToWatchedDirectory}**/*`]: true, // by default watch everything inside the source directory
-    [`${directoryUrlRelativeToWatchedDirectory}**/.*`]: false, // file starting with a dot -> do not watch
-    [`${directoryUrlRelativeToWatchedDirectory}**/.*/`]: false, // directory starting with a dot -> do not watch
-    [`${directoryUrlRelativeToWatchedDirectory}**/node_modules/`]: false, // node_modules directory -> do not watch
-  };
+  const watchPatterns = {};
+  if (defaultPatterns) {
+    Object.assign(watchPatterns, {
+      [`${directoryUrlRelativeToWatchedDirectory}**/*`]: true, // by default watch everything inside the source directory
+      [`${directoryUrlRelativeToWatchedDirectory}**/.*`]: false, // file starting with a dot -> do not watch
+      [`${directoryUrlRelativeToWatchedDirectory}**/.*/`]: false, // directory starting with a dot -> do not watch
+      [`${directoryUrlRelativeToWatchedDirectory}**/node_modules/`]: false, // node_modules directory -> do not watch
+    });
+  }
   for (const key of Object.keys(sourceFilesConfig)) {
     watchPatterns[`${directoryUrlRelativeToWatchedDirectory}${key}`] =
       sourceFilesConfig[key];
@@ -52,11 +55,12 @@ const watchSourceFiles = (
   // And jsenv should not consider these as source files and watch them (to not hurt performances)
   const watchPatterns = {};
   let watchedDirectoryUrl = "";
-  const addDirectoryToWatch = (directoryUrl) => {
+  const addDirectoryToWatch = (directoryUrl, { defaultPatterns } = {}) => {
     Object.assign(
       watchPatterns,
       getDirectoryWatchPatterns(directoryUrl, watchedDirectoryUrl, {
         sourceFilesConfig,
+        defaultPatterns,
       }),
     );
   };
@@ -88,7 +92,6 @@ const watchSourceFiles = (
         },
       },
     );
-    stopWatchingSourceFiles.watchPatterns = watchPatterns;
     return stopWatchingSourceFiles;
   };
 
@@ -108,16 +111,18 @@ const watchSourceFiles = (
     }
     watchedDirectoryUrl = packageDirectoryUrl;
     for (const workspace of workspaces) {
-      if (workspace.endsWith("*")) {
-        const workspaceDirectoryUrl = new URL(
-          workspace.slice(0, -1),
-          packageDirectoryUrl,
-        );
-        addDirectoryToWatch(workspaceDirectoryUrl);
-      } else {
-        const workspaceRelativeUrl = new URL(workspace, packageDirectoryUrl);
-        addDirectoryToWatch(workspaceRelativeUrl);
-      }
+      const workspaceDirectoryUrl = workspace.endsWith("*")
+        ? new URL(workspace.slice(0, -1), packageDirectoryUrl)
+        : new URL(workspace, packageDirectoryUrl);
+      addDirectoryToWatch(workspaceDirectoryUrl, {
+        // The source directory patterns already cover a workspace inside it.
+        // Every pattern is tested against every file found while watching, so
+        // the same patterns rooted at each workspace only multiply that work.
+        defaultPatterns: !urlIsOrIsInsideOf(
+          workspaceDirectoryUrl,
+          sourceDirectoryUrl,
+        ),
+      });
     }
     // we are updating the root directory
     // we must make the patterns relative to source directory relative to the new root directory
@@ -905,10 +910,9 @@ const prependJsClassicInJsClassic = (jsUrlInfo, urlInfoToPrepend) => {
   const magicSource = createMagicSource(jsUrlInfo.content);
   magicSource.prepend(`${urlInfoToPrepend.content}\n\n`);
   const magicResult = magicSource.toContentAndSourcemap();
-  const sourcemap = composeTwoSourcemaps(
-    jsUrlInfo.sourcemap,
-    magicResult.sourcemap,
-  );
+  const sourcemap = jsUrlInfo.context.sourcemapsEnabled
+    ? composeTwoSourcemaps(jsUrlInfo.sourcemap, magicResult.sourcemap)
+    : null;
   jsUrlInfo.mutateContent({
     content: magicResult.content,
     sourcemap,
@@ -926,6 +930,7 @@ const prependJsClassicInJsModule = async (jsUrlInfo, urlInfoToPrepend) => {
     input: jsUrlInfo.content,
     inputIsJsModule: true,
     inputUrl: jsUrlInfo.originalUrl,
+    options: { sourceMaps: jsUrlInfo.context.sourcemapsEnabled },
   });
   jsUrlInfo.mutateContent({
     content: code,
@@ -1578,20 +1583,37 @@ const checkForDependencyRemovalEffects = (reference) => {
 };
 
 const traceFromUrlSite = (urlSite) => {
-  const codeFrame = urlSite.content
-    ? generateContentFrame({
-        content: urlSite.content,
-        line: urlSite.line,
-        column: urlSite.column,
-      })
-    : "";
-  return {
-    codeFrame,
-    message: stringifyUrlSite(urlSite),
-    url: urlSite.url,
-    line: urlSite.line,
-    column: urlSite.column,
+  const { url, line, column, content } = urlSite;
+  const trace = { url, line, column };
+  // A file references many urls and an error on one of them is rare: the code
+  // frame (and the message embedding it) is built the first time it is read,
+  // not for every reference found.
+  defineLazyProperty(trace, "codeFrame", () =>
+    content ? generateContentFrame({ content, line, column }) : "",
+  );
+  defineLazyProperty(trace, "message", () => stringifyUrlSite(urlSite));
+  return trace;
+};
+
+const defineLazyProperty = (object, property, compute) => {
+  const setValue = (value) => {
+    Object.defineProperty(object, property, {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value,
+    });
   };
+  Object.defineProperty(object, property, {
+    enumerable: true,
+    configurable: true,
+    get: () => {
+      const value = compute();
+      setValue(value);
+      return value;
+    },
+    set: setValue,
+  });
 };
 
 const adjustUrlSite = (urlInfo, { url, line, column }) => {
@@ -2090,7 +2112,6 @@ const createUrlInfo = (url, context) => {
     dereferencedTimestamp: 0,
     originalContentEtag: null,
     contentEtag: null,
-    isWatched: false,
     isValid: () => false,
     data: {}, // plugins can put whatever they want here
     referenceToOthersSet: new Set(),
@@ -2899,7 +2920,6 @@ const createUrlInfoTransformer = ({
       contentAst, // undefined most of the time
       contentEtag, // in practice always undefined
       contentLength,
-      sourcemap,
       sourcemapIsWrong,
       contentInjections,
     } = transformations;
@@ -2926,11 +2946,14 @@ const createUrlInfoTransformer = ({
         contentLength,
       });
     }
-    if (
-      sourcemap &&
-      mayHaveSourcemap(urlInfo) &&
-      shouldHandleSourcemap(urlInfo)
-    ) {
+    // "sourcemap" is read last, and only when it will be used: a plugin can
+    // hand it back as a getter that generates the map on first read, so that
+    // nothing is generated for a kitchen that throws sourcemaps away
+    const sourcemap =
+      mayHaveSourcemap(urlInfo) && shouldHandleSourcemap(urlInfo)
+        ? transformations.sourcemap
+        : null;
+    if (sourcemap) {
       const sourcemapNormalized = normalizeSourcemap(urlInfo, sourcemap);
       let currentSourcemap = urlInfo.sourcemap;
       const finalSourcemap = composeTwoSourcemaps(
@@ -2963,6 +2986,14 @@ const createUrlInfoTransformer = ({
     writeInsideOutDirectory(urlInfo);
   };
 
+  // Written synchronously on purpose, and measured: async is the tempting
+  // choice, but here it loses. A cold load cooks hundreds of files; their
+  // synchronous writes block the event loop ~160ms in total, while
+  // asynchronous writes queue in the threadpool behind tens of MB of content
+  // and sourcemaps, and a response that waits for its own write then waits
+  // ~36ms on average (18s summed over 500 responses). Not waiting is not an
+  // option either: the last write lands after the test that cooked it has
+  // ended, and the side-effect snapshots lose it.
   const writeInsideOutDirectory = (urlInfo) => {
     // writing result inside ".jsenv" directory (debug purposes)
     if (!outDirectoryUrl) {
@@ -3282,6 +3313,12 @@ const createKitchen = ({
       INJECTIONS,
       getPluginMeta: null,
       sourcemaps,
+      // a plugin producing a sourcemap can skip the work when it would be
+      // thrown away (see shouldHandleSourcemap in url_info_transformations.js)
+      sourcemapsEnabled:
+        sourcemaps === "inline" ||
+        sourcemaps === "file" ||
+        sourcemaps === "programmatic",
       outDirectoryUrl,
     },
     resolve: (specifier, importer = rootDirectoryUrl) => {
@@ -5751,8 +5788,7 @@ const parseAndTransformJsReferences = async (
   for (const sequentialAction of sequentialActions) {
     await sequentialAction();
   }
-  const { content, sourcemap } = magicSource.toContentAndSourcemap();
-  return { content, sourcemap };
+  return magicSource.toContentAndSourcemap();
 };
 
 const jsenvPluginReferenceExpectedTypes = () => {
@@ -6413,11 +6449,6 @@ const addRelationshipWithPackageJson = ({
       String(packageJsonContentAsBuffer),
     );
   }
-  // Checked on disk at every validation rather than trusted to the watcher:
-  // what this file decides (the package version, hence the ?v= importers
-  // embed) ends up in the browser's immutable cache, so a request racing the
-  // watcher must never be answered from a stale package.json.
-  packageJsonReference.urlInfo.revalidateOnFileSystem = true;
 };
 
 const createResolverWithFallbackOnError = (mainResolver, fallbackResolver) => {
@@ -6759,6 +6790,240 @@ const createHtmlPageLister = ({ rootDirectoryUrl }) => {
   };
 };
 
+const jsenvPluginFsRedirection = ({
+  spa,
+  directoryContentMagicName,
+  magicExtensions = ["inherit", ".js"],
+  magicDirectoryIndex = true,
+  preserveSymlinks = false,
+}) => {
+  return {
+    name: "jsenv:fs_redirection",
+    appliesDuring: "*",
+    redirectReference: (reference) => {
+      if (reference.url === "file:///") {
+        return `ignore:file:///`;
+      }
+      if (reference.url === "file://") {
+        return `ignore:file://`;
+      }
+      // ignore all new URL second arg
+      if (reference.subtype === "new_url_second_arg") {
+        if (reference.original) {
+          return `ignore:${reference.original.specifier}`;
+        }
+        return `ignore:${reference.specifier}`;
+      }
+      // http, https, data, about, ...
+      if (!reference.url.startsWith("file:")) {
+        return null;
+      }
+      if (reference.original && !reference.original.url.startsWith("file:")) {
+        return null;
+      }
+      if (reference.isInline) {
+        return null;
+      }
+
+      if (
+        reference.specifierPathname.endsWith(`/${directoryContentMagicName}`)
+      ) {
+        const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
+        const directoryUrl = new URL(
+          reference.specifierPathname
+            .replace(`/${directoryContentMagicName}`, "/")
+            .slice(1),
+          rootDirectoryUrl,
+        ).href;
+        return directoryUrl;
+      }
+      // ignore "./" on new URL("./")
+      // if (
+      //   reference.subtype === "new_url_first_arg" &&
+      //   reference.specifier === "./"
+      // ) {
+      //   return `ignore:${reference.url}`;
+      // }
+      const urlObject = new URL(reference.url);
+      let fsStat = readEntryStatSync(urlObject, { nullIfNotFound: true });
+      reference.fsStat = fsStat;
+      const { search, hash } = urlObject;
+      urlObject.search = "";
+      urlObject.hash = "";
+      // must be read before applyFsStatEffectsOnUrlObject which forces the
+      // trailing slash on directories
+      const specifierUsesTrailingSlash = urlObject.pathname.endsWith("/");
+      applyFsStatEffectsOnUrlObject(urlObject, fsStat);
+      const shouldApplyFilesystemMagicResolution =
+        reference.type === "js_import";
+      if (shouldApplyFilesystemMagicResolution) {
+        const filesystemResolution = applyFileSystemMagicResolution(
+          urlObject.href,
+          {
+            fileStat: fsStat,
+            magicDirectoryIndex,
+            magicExtensions: getExtensionsToTry(
+              magicExtensions,
+              reference.ownerUrlInfo.url,
+            ),
+          },
+        );
+        if (filesystemResolution.stat) {
+          fsStat = filesystemResolution.stat;
+          reference.fsStat = fsStat;
+          urlObject.href = filesystemResolution.url;
+          applyFsStatEffectsOnUrlObject(urlObject, fsStat);
+        }
+      }
+      if (spa) {
+        // for SPA we want to serve the root HTML file most of the time
+        if (!fsStat) {
+          if (urlToExtension(urlObject)) {
+            // url has an extension, we assume it's a file request -> let 404 happen
+            return null;
+          }
+          if (specifierUsesTrailingSlash) {
+            // the trailing slash asks for a directory and there is none here
+            // -> let 404 happen (same reasoning as the extension above)
+            return null;
+          }
+          const spaFallbackUrl = getSpaFallbackUrl(reference);
+          if (spaFallbackUrl) {
+            return spaFallbackUrl;
+          }
+          return null;
+        }
+        if (fsStat.isDirectory()) {
+          // When requesting a directory, check if we have an HTML entry file for that directory
+          const directoryEntryFileUrl = getDirectoryEntryFileUrl(urlObject);
+          if (directoryEntryFileUrl) {
+            reference.fsStat = readEntryStatSync(directoryEntryFileUrl);
+            return directoryEntryFileUrl;
+          }
+          if (!specifierUsesTrailingSlash) {
+            // the trailing slash is what tells a directory apart from a route:
+            // "/join/" is the directory, "/join" is a route owned by the SPA
+            // even when "join/" exists in the source files.
+            // Without this a source directory would shadow the route having
+            // the same name and the SPA would be unreachable in dev while
+            // being perfectly fine once built
+            const spaFallbackUrl = getSpaFallbackUrl(reference);
+            if (spaFallbackUrl) {
+              reference.fsStat = readEntryStatSync(spaFallbackUrl, {
+                nullIfNotFound: true,
+              });
+              return spaFallbackUrl;
+            }
+          }
+        }
+      }
+      if (!fsStat) {
+        return null;
+      }
+      const urlBeforeSymlinkResolution = urlObject.href;
+      if (preserveSymlinks) {
+        return `${urlBeforeSymlinkResolution}${search}${hash}`;
+      }
+      const urlAfterSymlinkResolution = resolveSymlink(
+        urlBeforeSymlinkResolution,
+      );
+      if (urlAfterSymlinkResolution !== urlBeforeSymlinkResolution) {
+        reference.leadsToASymlink = true;
+        // reference.baseUrl = urlBeforeSymlinkResolution;
+      }
+      const resolvedUrl = `${urlAfterSymlinkResolution}${search}${hash}`;
+      return resolvedUrl;
+    },
+  };
+};
+
+const applyFsStatEffectsOnUrlObject = (urlObject, fsStat) => {
+  if (!fsStat) {
+    return;
+  }
+  const { pathname } = urlObject;
+  const pathnameUsesTrailingSlash = pathname.endsWith("/");
+  // force trailing slash on directories
+  if (fsStat.isDirectory()) {
+    if (!pathnameUsesTrailingSlash) {
+      urlObject.pathname = `${pathname}/`;
+    }
+  } else if (pathnameUsesTrailingSlash) {
+    // otherwise remove trailing slash if any
+    // a warning here? (because it's strange to reference a file with a trailing slash)
+    urlObject.pathname = pathname.slice(0, -1);
+  }
+};
+
+const resolveSymlink = (fileUrl) => {
+  const urlObject = new URL(fileUrl);
+  const realpath = realpathSync(urlObject);
+  const realUrlObject = pathToFileURL(realpath);
+  if (urlObject.pathname.endsWith("/")) {
+    realUrlObject.pathname += `/`;
+  }
+  return realUrlObject.href;
+};
+
+const getDirectoryEntryFileUrl = (directoryUrl) => {
+  const indexHtmlFileUrl = new URL(`index.html`, directoryUrl);
+  if (existsSync(indexHtmlFileUrl)) {
+    return indexHtmlFileUrl.href;
+  }
+  const filename = urlToFilename(directoryUrl);
+  const htmlFileUrlCandidate = new URL(`${filename}.html`, directoryUrl);
+  if (existsSync(htmlFileUrlCandidate)) {
+    return htmlFileUrlCandidate.href;
+  }
+  return null;
+};
+const getSpaFallbackUrl = (reference) => {
+  const { requestedUrl, rootDirectoryUrl, mainFilePath } =
+    reference.ownerUrlInfo.context;
+  if (!requestedUrl) {
+    // the SPA fallback answers a request; during build there is none
+    return null;
+  }
+  const spaFallbackFileUrls = listSpaFallbackFileUrls(requestedUrl, {
+    rootDirectoryUrl,
+    mainFilePath,
+  });
+  for (const spaFallbackFileUrl of spaFallbackFileUrls) {
+    if (existsSync(new URL(spaFallbackFileUrl))) {
+      return spaFallbackFileUrl;
+    }
+  }
+  // none exists: the main file it is, and the 404 answering for it lists
+  // what was tried (see directory listing)
+  return new URL(mainFilePath, rootDirectoryUrl).href;
+};
+// The html files that can answer a route, closest first: the entry file of
+// the route's own directory ("index.html", then "<dirname>.html"), then of
+// each directory above it up to the server root, then the main file.
+const listSpaFallbackFileUrls = (
+  requestedUrl,
+  { rootDirectoryUrl, mainFilePath },
+) => {
+  const fileUrls = [];
+  let directoryUrl = new URL("./", requestedUrl).href;
+  while (urlIsOrIsInsideOf(directoryUrl, rootDirectoryUrl)) {
+    fileUrls.push(new URL("index.html", directoryUrl).href);
+    const filename = urlToFilename(directoryUrl);
+    if (filename) {
+      fileUrls.push(new URL(`${filename}.html`, directoryUrl).href);
+    }
+    if (directoryUrl === String(rootDirectoryUrl)) {
+      break;
+    }
+    directoryUrl = new URL("../", directoryUrl).href;
+  }
+  const mainFileUrl = new URL(mainFilePath, rootDirectoryUrl).href;
+  if (!fileUrls.includes(mainFileUrl)) {
+    fileUrls.push(mainFileUrl);
+  }
+  return fileUrls;
+};
+
 /*
  * NICE TO HAVE:
  * 
@@ -7136,6 +7401,24 @@ const generateDirectoryListingInjection = (
       filePathExisting: `/${filePathExisting}`,
       filePathNotFound,
     });
+    // a url without extension nor trailing slash is a route: in spa mode it
+    // was answered with the closest html file, the 404 means none was found
+    const urlNotFoundObject = new URL(urlNotFound);
+    if (
+      spa &&
+      !urlToExtension(urlNotFoundObject) &&
+      !urlNotFoundObject.pathname.endsWith("/")
+    ) {
+      enoentDetails.spaFallbackFilePaths = listSpaFallbackFileUrls(
+        urlNotFound,
+        { rootDirectoryUrl: serverRootDirectoryUrl, mainFilePath },
+      ).map((fileUrl) =>
+        FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(
+          fileUrl,
+          serverRootDirectoryUrl,
+        ),
+      );
+    }
   }
 
   return {
@@ -7207,223 +7490,6 @@ const getDirectoryContentItems = ({
   return items;
 };
 
-const jsenvPluginFsRedirection = ({
-  spa,
-  directoryContentMagicName,
-  magicExtensions = ["inherit", ".js"],
-  magicDirectoryIndex = true,
-  preserveSymlinks = false,
-}) => {
-  return {
-    name: "jsenv:fs_redirection",
-    appliesDuring: "*",
-    redirectReference: (reference) => {
-      if (reference.url === "file:///") {
-        return `ignore:file:///`;
-      }
-      if (reference.url === "file://") {
-        return `ignore:file://`;
-      }
-      // ignore all new URL second arg
-      if (reference.subtype === "new_url_second_arg") {
-        if (reference.original) {
-          return `ignore:${reference.original.specifier}`;
-        }
-        return `ignore:${reference.specifier}`;
-      }
-      // http, https, data, about, ...
-      if (!reference.url.startsWith("file:")) {
-        return null;
-      }
-      if (reference.original && !reference.original.url.startsWith("file:")) {
-        return null;
-      }
-      if (reference.isInline) {
-        return null;
-      }
-
-      if (
-        reference.specifierPathname.endsWith(`/${directoryContentMagicName}`)
-      ) {
-        const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
-        const directoryUrl = new URL(
-          reference.specifierPathname
-            .replace(`/${directoryContentMagicName}`, "/")
-            .slice(1),
-          rootDirectoryUrl,
-        ).href;
-        return directoryUrl;
-      }
-      // ignore "./" on new URL("./")
-      // if (
-      //   reference.subtype === "new_url_first_arg" &&
-      //   reference.specifier === "./"
-      // ) {
-      //   return `ignore:${reference.url}`;
-      // }
-      const urlObject = new URL(reference.url);
-      let fsStat = readEntryStatSync(urlObject, { nullIfNotFound: true });
-      reference.fsStat = fsStat;
-      const { search, hash } = urlObject;
-      urlObject.search = "";
-      urlObject.hash = "";
-      // must be read before applyFsStatEffectsOnUrlObject which forces the
-      // trailing slash on directories
-      const specifierUsesTrailingSlash = urlObject.pathname.endsWith("/");
-      applyFsStatEffectsOnUrlObject(urlObject, fsStat);
-      const shouldApplyFilesystemMagicResolution =
-        reference.type === "js_import";
-      if (shouldApplyFilesystemMagicResolution) {
-        const filesystemResolution = applyFileSystemMagicResolution(
-          urlObject.href,
-          {
-            fileStat: fsStat,
-            magicDirectoryIndex,
-            magicExtensions: getExtensionsToTry(
-              magicExtensions,
-              reference.ownerUrlInfo.url,
-            ),
-          },
-        );
-        if (filesystemResolution.stat) {
-          fsStat = filesystemResolution.stat;
-          reference.fsStat = fsStat;
-          urlObject.href = filesystemResolution.url;
-          applyFsStatEffectsOnUrlObject(urlObject, fsStat);
-        }
-      }
-      if (spa) {
-        // for SPA we want to serve the root HTML file most of the time
-        if (!fsStat) {
-          if (urlToExtension(urlObject)) {
-            // url has an extension, we assume it's a file request -> let 404 happen
-            return null;
-          }
-          if (specifierUsesTrailingSlash) {
-            // the trailing slash asks for a directory and there is none here
-            // -> let 404 happen (same reasoning as the extension above)
-            return null;
-          }
-          const spaFallbackUrl = getSpaFallbackUrl(reference);
-          if (spaFallbackUrl) {
-            return spaFallbackUrl;
-          }
-          return null;
-        }
-        if (fsStat.isDirectory()) {
-          // When requesting a directory, check if we have an HTML entry file for that directory
-          const directoryEntryFileUrl = getDirectoryEntryFileUrl(urlObject);
-          if (directoryEntryFileUrl) {
-            reference.fsStat = readEntryStatSync(directoryEntryFileUrl);
-            return directoryEntryFileUrl;
-          }
-          if (!specifierUsesTrailingSlash) {
-            // the trailing slash is what tells a directory apart from a route:
-            // "/join/" is the directory, "/join" is a route owned by the SPA
-            // even when "join/" exists in the source files.
-            // Without this a source directory would shadow the route having
-            // the same name and the SPA would be unreachable in dev while
-            // being perfectly fine once built
-            const spaFallbackUrl = getSpaFallbackUrl(reference);
-            if (spaFallbackUrl) {
-              reference.fsStat = readEntryStatSync(spaFallbackUrl, {
-                nullIfNotFound: true,
-              });
-              return spaFallbackUrl;
-            }
-          }
-        }
-      }
-      if (!fsStat) {
-        return null;
-      }
-      const urlBeforeSymlinkResolution = urlObject.href;
-      if (preserveSymlinks) {
-        return `${urlBeforeSymlinkResolution}${search}${hash}`;
-      }
-      const urlAfterSymlinkResolution = resolveSymlink(
-        urlBeforeSymlinkResolution,
-      );
-      if (urlAfterSymlinkResolution !== urlBeforeSymlinkResolution) {
-        reference.leadsToASymlink = true;
-        // reference.baseUrl = urlBeforeSymlinkResolution;
-      }
-      const resolvedUrl = `${urlAfterSymlinkResolution}${search}${hash}`;
-      return resolvedUrl;
-    },
-  };
-};
-
-const applyFsStatEffectsOnUrlObject = (urlObject, fsStat) => {
-  if (!fsStat) {
-    return;
-  }
-  const { pathname } = urlObject;
-  const pathnameUsesTrailingSlash = pathname.endsWith("/");
-  // force trailing slash on directories
-  if (fsStat.isDirectory()) {
-    if (!pathnameUsesTrailingSlash) {
-      urlObject.pathname = `${pathname}/`;
-    }
-  } else if (pathnameUsesTrailingSlash) {
-    // otherwise remove trailing slash if any
-    // a warning here? (because it's strange to reference a file with a trailing slash)
-    urlObject.pathname = pathname.slice(0, -1);
-  }
-};
-
-const resolveSymlink = (fileUrl) => {
-  const urlObject = new URL(fileUrl);
-  const realpath = realpathSync(urlObject);
-  const realUrlObject = pathToFileURL(realpath);
-  if (urlObject.pathname.endsWith("/")) {
-    realUrlObject.pathname += `/`;
-  }
-  return realUrlObject.href;
-};
-
-const getDirectoryEntryFileUrl = (directoryUrl) => {
-  const indexHtmlFileUrl = new URL(`index.html`, directoryUrl);
-  if (existsSync(indexHtmlFileUrl)) {
-    return indexHtmlFileUrl.href;
-  }
-  const filename = urlToFilename(directoryUrl);
-  const htmlFileUrlCandidate = new URL(`${filename}.html`, directoryUrl);
-  if (existsSync(htmlFileUrlCandidate)) {
-    return htmlFileUrlCandidate.href;
-  }
-  return null;
-};
-const getSpaFallbackUrl = (reference) => {
-  const { requestedUrl, rootDirectoryUrl, mainFilePath } =
-    reference.ownerUrlInfo.context;
-  if (!requestedUrl) {
-    // the SPA fallback answers a request; during build there is none
-    return null;
-  }
-  const closestHtmlRootFile = getClosestHtmlRootFile(
-    requestedUrl,
-    rootDirectoryUrl,
-  );
-  if (closestHtmlRootFile) {
-    return closestHtmlRootFile;
-  }
-  return String(new URL(mainFilePath, rootDirectoryUrl));
-};
-const getClosestHtmlRootFile = (requestedUrl, serverRootDirectoryUrl) => {
-  let directoryUrl = new URL("./", requestedUrl);
-  while (true) {
-    const directoryEntryFileUrl = getDirectoryEntryFileUrl(directoryUrl);
-    if (directoryEntryFileUrl) {
-      return directoryEntryFileUrl;
-    }
-    if (!urlIsOrIsInsideOf(directoryUrl, serverRootDirectoryUrl)) {
-      return null;
-    }
-    directoryUrl = new URL("../", directoryUrl);
-  }
-};
-
 const directoryContentMagicName = "...";
 
 const jsenvPluginProtocolFile = ({
@@ -7577,7 +7643,16 @@ const jsenvPluginProtocolFile = ({
         }
         const serveFile = (url) => {
           const contentType = CONTENT_TYPE.fromUrlExtension(url);
-          const fileBuffer = readFileSync(new URL(url));
+          const urlObject = new URL(url);
+          // taken before the read: a write landing in between moves the
+          // stat past this one, so the dev server sees the content as
+          // outdated (see isValid in the dev server) rather than the reverse
+          const fileStat = statSync(urlObject);
+          const fileBuffer = readFileSync(urlObject);
+          urlInfo.data.fileStat = {
+            mtimeMs: fileStat.mtimeMs,
+            size: fileStat.size,
+          };
           const content = CONTENT_TYPE.isTextual(contentType)
             ? String(fileBuffer)
             : fileBuffer;
@@ -8084,7 +8159,7 @@ const jsenvPluginImportMetaScenarios = () => {
     name: "jsenv:import_meta_scenario",
     appliesDuring: "*",
     transformUrlContent: {
-      js_module: async (urlInfo) => {
+      js_module: (urlInfo) => {
         // Do not scan node modules for import.meta.dev/import.meta.build
         // - node modules won't have this in their code
         // - ;or should use other an other technic as this one won't be available
@@ -8100,40 +8175,42 @@ const jsenvPluginImportMetaScenarios = () => {
         ) {
           return null;
         }
-        const { metadata } = await applyBabelPlugins({
-          babelPlugins: [babelPluginMetadataImportMetaScenarios],
-          input: urlInfo.content,
-          inputIsJsModule: true,
-          inputUrl: urlInfo.originalUrl,
-          outputUrl: urlInfo.generatedUrl,
+        const importMetaScenarioNodes = { dev: [], build: [] };
+        visitJsAst(urlInfo.contentAst, {
+          MemberExpression: (node) => {
+            const name = getImportMetaPropertyName(node);
+            if (name === "dev" || name === "build") {
+              importMetaScenarioNodes[name].push(node);
+            }
+          },
         });
-        const { dev = [], build = [] } = metadata.importMetaScenarios;
+        const { dev, build } = importMetaScenarioNodes;
         const replacements = [];
-        const replace = (path, value) => {
-          replacements.push({ path, value });
+        const replace = (node, value) => {
+          replacements.push({ node, value });
         };
         if (urlInfo.context.build) {
           // during build ensure replacement for tree-shaking
-          dev.forEach((path) => {
-            replace(path, "undefined");
+          dev.forEach((node) => {
+            replace(node, "undefined");
           });
-          build.forEach((path) => {
-            replace(path, "true");
+          build.forEach((node) => {
+            replace(node, "true");
           });
         } else {
           // during dev we can let "import.meta.build" untouched
           // it will be evaluated to undefined.
           // Moreover it can be surprising to see some "undefined"
           // when source file contains "import.meta.build"
-          dev.forEach((path) => {
-            replace(path, "true");
+          dev.forEach((node) => {
+            replace(node, "true");
           });
         }
         const magicSource = createMagicSource(urlInfo.content);
-        replacements.forEach(({ path, value }) => {
+        replacements.forEach(({ node, value }) => {
           magicSource.replace({
-            start: path.node.start,
-            end: path.node.end,
+            start: node.start,
+            end: node.end,
             replacement: value,
           });
         });
@@ -8143,42 +8220,6 @@ const jsenvPluginImportMetaScenarios = () => {
   };
 };
 
-const babelPluginMetadataImportMetaScenarios = () => {
-  return {
-    name: "metadata-import-meta-scenarios",
-    visitor: {
-      Program(programPath, state) {
-        const importMetas = {};
-        programPath.traverse({
-          MemberExpression(path) {
-            const { node } = path;
-            const { object } = node;
-            if (object.type !== "MetaProperty") {
-              return;
-            }
-            const { property: objectProperty } = object;
-            if (objectProperty.name !== "meta") {
-              return;
-            }
-            const { property } = node;
-            const { name } = property;
-            const importMetaPaths = importMetas[name];
-            if (importMetaPaths) {
-              importMetaPaths.push(path);
-            } else {
-              importMetas[name] = [path];
-            }
-          },
-        });
-        state.file.metadata.importMetaScenarios = {
-          dev: importMetas.dev,
-          build: importMetas.build,
-        };
-      },
-    },
-  };
-};
-
 /*
  * Source code can contain the following
  * - __DEV__
@@ -8277,15 +8318,10 @@ const jsenvPluginImportMetaCss = () => {
         if (!urlInfo.content.includes("import.meta.css")) {
           return null;
         }
-        const { metadata } = await applyBabelPlugins({
-          babelPlugins: [babelPluginMetadataUsesImportMetaCss],
-          input: urlInfo.content,
-          inputIsJsModule: true,
-          inputUrl: urlInfo.originalUrl,
-          outputUrl: urlInfo.generatedUrl,
+        const importMetaCssNode = visitJsAstUntil(urlInfo.contentAst, {
+          MemberExpression: (node) => getImportMetaPropertyName(node) === "css",
         });
-        const { usesImportMetaCss } = metadata;
-        if (!usesImportMetaCss) {
+        if (!importMetaCssNode) {
           return null;
         }
         if (urlInfo.context.build) {
@@ -8306,6 +8342,8 @@ const jsenvPluginImportMetaCss = () => {
             inputIsJsModule: true,
             inputUrl: urlInfo.originalUrl,
             outputUrl: urlInfo.generatedUrl,
+            // the map would be dropped: the content sent back carries none
+            options: { sourceMaps: false },
           });
           if (code === urlInfo.content) {
             // all assignments were already in array form (pre-built file) — nothing to do
@@ -8365,37 +8403,6 @@ const babelPluginRewriteImportMetaCssAssignment = (
   };
 };
 
-const babelPluginMetadataUsesImportMetaCss = () => {
-  return {
-    name: "metadata-uses-import-meta-css",
-    visitor: {
-      Program(programPath, state) {
-        let usesImportMetaCss = false;
-        programPath.traverse({
-          MemberExpression(path) {
-            const { node } = path;
-            const { object } = node;
-            if (object.type !== "MetaProperty") {
-              return;
-            }
-            const { property: objectProperty } = object;
-            if (objectProperty.name !== "meta") {
-              return;
-            }
-            const { property } = node;
-            const { name } = property;
-            if (name === "css") {
-              usesImportMetaCss = true;
-              path.stop();
-            }
-          },
-        });
-        state.file.metadata.usesImportMetaCss = usesImportMetaCss;
-      },
-    },
-  };
-};
-
 const injectImportMetaCss = (
   urlInfo,
   { content, importFrom, importName, importAs, hot },
@@ -8438,104 +8445,6 @@ ${importVariableName}(import.meta);
   };
 };
 
-// https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#toc-stages-of-babel
-// https://github.com/cfware/babel-plugin-bundled-import-meta/blob/master/index.js
-// https://github.com/babel/babel/blob/f4edf62f6beeab8ae9f2b7f0b82f1b3b12a581af/packages/babel-helper-module-imports/src/index.js#L7
-
-const babelPluginMetadataImportMetaHot = () => {
-  return {
-    name: "metadata-import-meta-hot",
-    visitor: {
-      Program(programPath, state) {
-        Object.assign(
-          state.file.metadata,
-          collectImportMetaHotProperties(programPath),
-        );
-      },
-    },
-  };
-};
-const collectImportMetaHotProperties = (programPath) => {
-  const importMetaHotPaths = [];
-  let hotDecline = false;
-  let hotAcceptSelf = false;
-  let hotAcceptDependencies = [];
-  programPath.traverse({
-    MemberExpression(path) {
-      const { node } = path;
-      const { object } = node;
-      if (object.type !== "MetaProperty") {
-        return;
-      }
-      const { property: objectProperty } = object;
-      if (objectProperty.name !== "meta") {
-        return;
-      }
-      const { property } = node;
-      const { name } = property;
-      if (name === "hot") {
-        importMetaHotPaths.push(path);
-      }
-    },
-    CallExpression(path) {
-      if (isImportMetaHotMethodCall(path, "accept")) {
-        const callNode = path.node;
-        const args = callNode.arguments;
-        if (args.length === 0) {
-          hotAcceptSelf = true;
-          return;
-        }
-        const firstArg = args[0];
-        if (firstArg.type === "StringLiteral") {
-          hotAcceptDependencies = [
-            {
-              specifierPath: path.get("arguments")[0],
-            },
-          ];
-          return;
-        }
-        if (firstArg.type === "ArrayExpression") {
-          const firstArgPath = path.get("arguments")[0];
-          hotAcceptDependencies = firstArg.elements.map((arrayNode, index) => {
-            if (arrayNode.type !== "StringLiteral") {
-              throw new Error(
-                `all array elements must be strings in "import.meta.hot.accept(array)"`,
-              );
-            }
-            return {
-              specifierPath: firstArgPath.get(String(index)),
-            };
-          });
-          return;
-        }
-        // accept first arg can be "anything" such as
-        // `const cb = () => {}; import.meta.accept(cb)`
-        hotAcceptSelf = true;
-      }
-      if (isImportMetaHotMethodCall(path, "decline")) {
-        hotDecline = true;
-      }
-    },
-  });
-  return {
-    importMetaHotPaths,
-    hotDecline,
-    hotAcceptSelf,
-    hotAcceptDependencies,
-  };
-};
-const isImportMetaHotMethodCall = (path, methodName) => {
-  const { property, object } = path.node.callee;
-  return (
-    property &&
-    property.name === methodName &&
-    object &&
-    object.property &&
-    object.property.name === "hot" &&
-    object.object.type === "MetaProperty"
-  );
-};
-
 // Some "smart" default applied to decide what should hot reload / fullreload:
 // By default:
 //   - hot reload on <img src="./image.png" />
@@ -8683,6 +8592,75 @@ const htmlNodeCanHotReload = (node) => {
   ].includes(node.nodeName);
 };
 
+const analyzeImportMetaHot = (ast) => {
+  const importMetaHotNodes = [];
+  let hotDecline = false;
+  let hotAcceptSelf = false;
+  let hotAcceptSpecifiers = [];
+  visitJsAst(ast, {
+    MemberExpression: (node) => {
+      if (getImportMetaPropertyName(node) === "hot") {
+        importMetaHotNodes.push(node);
+      }
+    },
+    CallExpression: (node) => {
+      const methodName = getImportMetaHotMethodName(node);
+      if (methodName === "accept") {
+        const args = node.arguments;
+        if (args.length === 0) {
+          hotAcceptSelf = true;
+          return;
+        }
+        const [firstArg] = args;
+        if (isStringLiteral(firstArg)) {
+          hotAcceptSpecifiers = [firstArg.value];
+          return;
+        }
+        if (firstArg.type === "ArrayExpression") {
+          hotAcceptSpecifiers = firstArg.elements.map((element) => {
+            if (!isStringLiteral(element)) {
+              throw new Error(
+                `all array elements must be strings in "import.meta.hot.accept(array)"`,
+              );
+            }
+            return element.value;
+          });
+          return;
+        }
+        // accept first arg can be "anything" such as
+        // `const cb = () => {}; import.meta.hot.accept(cb)`
+        hotAcceptSelf = true;
+        return;
+      }
+      if (methodName === "decline") {
+        hotDecline = true;
+      }
+    },
+  });
+  return {
+    importMetaHotNodes,
+    hotDecline,
+    hotAcceptSelf,
+    hotAcceptSpecifiers,
+  };
+};
+
+// "import.meta.hot.<method>(...)"
+const getImportMetaHotMethodName = (callNode) => {
+  const { callee } = callNode;
+  if (callee.type !== "MemberExpression" || callee.computed) {
+    return null;
+  }
+  if (getImportMetaPropertyName(callee.object) !== "hot") {
+    return null;
+  }
+  return callee.property.name;
+};
+
+const isStringLiteral = (node) => {
+  return node.type === "Literal" && typeof node.value === "string";
+};
+
 const jsenvPluginImportMetaHot = () => {
   const importMetaHotClientFileUrl = import.meta
     .resolve("../client/import_meta_hot/import_meta_hot.js");
@@ -8731,7 +8709,7 @@ const jsenvPluginImportMetaHot = () => {
         cssUrlInfo.data.hotAcceptSelf = false;
         cssUrlInfo.data.hotAcceptDependencies = [];
       },
-      js_module: async (urlInfo) => {
+      js_module: (urlInfo) => {
         // Do not scan node modules for import.meta.hot
         // - unlikely to be there
         // - we don't watch node modules (too expensive)
@@ -8743,27 +8721,22 @@ const jsenvPluginImportMetaHot = () => {
         if (!urlInfo.content.includes("import.meta.hot")) {
           return null;
         }
-        const { metadata } = await applyBabelPlugins({
-          babelPlugins: [babelPluginMetadataImportMetaHot],
-          input: urlInfo.content,
-          inputIsJsModule: true,
-          inputUrl: urlInfo.originalUrl,
-          outputUrl: urlInfo.generatedUrl,
-        });
         const {
-          importMetaHotPaths,
+          importMetaHotNodes,
           hotDecline,
           hotAcceptSelf,
-          hotAcceptDependencies,
-        } = metadata;
+          hotAcceptSpecifiers,
+        } = analyzeImportMetaHot(urlInfo.contentAst);
         urlInfo.data.hotDecline = hotDecline;
         urlInfo.data.hotAcceptSelf = hotAcceptSelf;
-        urlInfo.data.hotAcceptDependencies = hotAcceptDependencies;
-        if (importMetaHotPaths.length === 0) {
+        urlInfo.data.hotAcceptDependencies = hotAcceptSpecifiers.map(
+          (specifier) => resolveHotAcceptSpecifier(urlInfo, specifier),
+        );
+        if (importMetaHotNodes.length === 0) {
           return null;
         }
         if (urlInfo.context.build) {
-          return removeImportMetaHots(urlInfo, importMetaHotPaths);
+          return removeImportMetaHots(urlInfo, importMetaHotNodes);
         }
         return injectImportMetaHot(urlInfo, importMetaHotClientFileUrl);
       },
@@ -8771,12 +8744,32 @@ const jsenvPluginImportMetaHot = () => {
   };
 };
 
-const removeImportMetaHots = (urlInfo, importMetaHotPaths) => {
+// The specifier given to import.meta.hot.accept() is one the file imports,
+// so its url is known from that import (autoreload compares urls). A
+// specifier the file does not import accepts nothing: it is kept as a plain
+// url, never resolved as a dependency (that could throw on a bare specifier).
+const resolveHotAcceptSpecifier = (urlInfo, specifier) => {
+  for (const referenceToOther of urlInfo.referenceToOthersSet) {
+    if (
+      referenceToOther.type === "js_import" &&
+      referenceToOther.specifier === specifier
+    ) {
+      return referenceToOther.url;
+    }
+  }
+  try {
+    return new URL(specifier, urlInfo.url).href;
+  } catch {
+    return specifier;
+  }
+};
+
+const removeImportMetaHots = (urlInfo, importMetaHotNodes) => {
   const magicSource = createMagicSource(urlInfo.content);
-  importMetaHotPaths.forEach((path) => {
+  importMetaHotNodes.forEach((node) => {
     magicSource.replace({
-      start: path.node.start,
-      end: path.node.end,
+      start: node.start,
+      end: node.end,
       replacement: "undefined",
     });
   });
@@ -9305,6 +9298,132 @@ const jsenvPluginAutoreload = ({
   ];
 };
 
+/*
+ * Tells the browser the static import graph of a page's module scripts, as
+ * `Link: <url>; rel=modulepreload` response headers, so it can fetch every
+ * module as soon as the page's headers arrive, without waiting to discover
+ * them level by level (each level costing a round trip and, the first time,
+ * a cook).
+ *
+ * Only what the graph already knows is listed: a module never cooked has no
+ * known imports. The header is computed at each response from the graph as it
+ * is then: a page gets its full list from its second load on, the first load
+ * keeps the plain waterfall.
+ *
+ * Headers rather than <link> elements written into the page: the page content
+ * stays what it is (served from memory, revalidated by etag) and the list can
+ * grow without cooking the page again. And not references either: a reference
+ * from the html to every module would make the html a dependent of each of
+ * them, and a hot update propagating up the importers would reach the html
+ * (which declines) instead of stopping at the module accepting it.
+ *
+ * OFF BY DEFAULT, to be enabled once the dev server speaks http/2 or http/3.
+ * Over http/1.1 it makes pages slower — measured on a 500 modules page: first
+ * paint 32ms -> 868ms, load 626ms -> 985ms. Knowing the urls earlier gives the
+ * browser no extra resource: what it has is 6 connections per origin, and
+ * every request goes through them in the order it was learned.
+ * - Without the header, requests come in execution order: the parser asks
+ *   for the render-blocking supervisor script first and gets a connection at
+ *   once; transfer and execution overlap, a module executing and discovering
+ *   its imports while the others download. On localhost the server answers
+ *   from memory in 0.1ms, so the 6 connections are busy from the start.
+ * - With the header, hundreds of requests take the 6 connections before the
+ *   parser asks for the supervisor script, which then waits for a free
+ *   connection behind 1MB+ transfers (520ms measured, 2s with 20ms of RTT).
+ *   Meanwhile nothing renders and nothing executes: transfer, then execution,
+ *   serialized. http/1.1 cannot reprioritize a queued request, and a
+ *   modulepreload has the same priority as a script.
+ * - And there is nothing to hide: the discovery latency a preload removes is
+ *   ~1ms per graph level on localhost; with a real RTT a wide graph (more
+ *   than 6 modules pending at any time) keeps the 6 connections saturated
+ *   anyway, and the load takes requests / 6 * RTT whatever the order.
+ * It pays off for a deep and narrow graph (connections idle, waiting for a
+ * response to learn the next level), and over http/2 or http/3: no
+ * connection limit, and the browser prioritizes the blocking script.
+ */
+
+
+const jsenvPluginModulepreload = () => {
+  return {
+    name: "jsenv:modulepreload",
+    appliesDuring: "dev",
+    augmentResponse: ({ urlInfo }) => {
+      if (urlInfo.type !== "html") {
+        return null;
+      }
+      const hrefs = collectStaticImportHrefs(urlInfo);
+      if (hrefs.length === 0) {
+        return null;
+      }
+      return {
+        headers: {
+          link: hrefs.map((href) => `<${href}>; rel=modulepreload`).join(", "),
+        },
+      };
+    },
+  };
+};
+
+const collectStaticImportHrefs = (htmlUrlInfo) => {
+  const hrefSet = new Set();
+  const visitedSet = new Set();
+  const addHref = (reference) => {
+    const specifier = urlSpecifierEncoding.decode(reference);
+    if (typeof specifier !== "string") {
+      return;
+    }
+    // "?hot" belongs to the request that cooked the importer, the page loading
+    // now imports the url without it
+    hrefSet.add(injectQueryParamsIntoSpecifier(specifier, { hot: undefined }));
+  };
+  const visitJsModule = (jsModuleUrlInfo) => {
+    if (visitedSet.has(jsModuleUrlInfo)) {
+      return;
+    }
+    visitedSet.add(jsModuleUrlInfo);
+    for (const reference of jsModuleUrlInfo.referenceToOthersSet) {
+      if (
+        reference.type !== "js_import" ||
+        reference.isWeak ||
+        reference.isImplicit ||
+        !STATIC_IMPORT_SUBTYPES.includes(reference.subtype) ||
+        !reference.url.startsWith("file:")
+      ) {
+        continue;
+      }
+      const importedUrlInfo = reference.urlInfo;
+      // never cooked: its content, hence its own imports, are unknown
+      if (importedUrlInfo.type !== "js_module") {
+        continue;
+      }
+      addHref(reference);
+      visitJsModule(importedUrlInfo);
+    }
+  };
+  for (const reference of htmlUrlInfo.referenceToOthersSet) {
+    if (
+      reference.type !== "script" ||
+      reference.expectedType !== "js_module" ||
+      // the scripts jsenv adds to every page are few, small and in memory
+      reference.injected ||
+      reference.isWeak
+    ) {
+      continue;
+    }
+    const scriptUrlInfo = reference.urlInfo;
+    if (scriptUrlInfo.type !== "js_module") {
+      continue;
+    }
+    if (!reference.isInline && reference.url.startsWith("file:")) {
+      addHref(reference);
+    }
+    visitJsModule(scriptUrlInfo);
+  }
+  return Array.from(hrefSet);
+};
+
+const STATIC_IMPORT_SUBTYPES = ["import_static", "export_named", "export_all"];
+
 /*
  * Tells the browser about the dependencies declared in package.json that
  * node_modules does not match, so the page can say it is running with something
@@ -9946,6 +10065,7 @@ const getCorePlugins = ({
 
   clientAutoreload,
   clientAutoreloadOnServerRestart,
+  modulepreload = false,
   dependencyStatus,
   cacheControl,
   scenarioPlaceholders = true,
@@ -10047,6 +10167,7 @@ const getCorePlugins = ({
     ...(clientAutoreload && clientAutoreload.enabled
       ? [jsenvPluginAutoreload(clientAutoreload)]
       : []),
+    ...(modulepreload ? [jsenvPluginModulepreload()] : []),
     ...(dependencyStatus
       ? [jsenvPluginDependencyStatus(dependencyStatus)]
       : []),
@@ -10061,11 +10182,12 @@ const getCorePlugins = ({
   ];
 };
 
-const humanizeProcessCpuUsage = (ratio) => {
-  const percentageAsNumber = ratio * 100;
-  const percentageAsNumberRounded = Math.round(percentageAsNumber);
-  const percentage = `${percentageAsNumberRounded}%`;
-  return percentage;
+// a phase can be a few milliseconds long (refine, mostly): shown as such
+const humanizePhaseDuration = (ms) => {
+  if (ms < 1000) {
+    return `${Math.round(ms)}ms`;
+  }
+  return humanizeDuration(ms, { short: true });
 };
 const humanizeProcessMemoryUsage = (value) => {
   return humanizeMemory(value, { short: true, decimals: 0 });
@@ -10074,7 +10196,8 @@ const renderBuildDoneLog = ({
   entryPointArray,
   duration,
   buildFileContents,
-  processCpuUsage,
+  cpuUsage,
+  phaseTimings,
   processMemoryUsage,
 }) => {
   const buildContentReport = createBuildContentReport(buildFileContents);
@@ -10089,15 +10212,10 @@ const renderBuildDoneLog = ({
     title = `build done (${entryPointCount} entry points)`;
   }
 
-  // cpu usage
-  let cpuUsageLine = "cpu: ";
-  cpuUsageLine += `${humanizeProcessCpuUsage(processCpuUsage.end)}`;
-  cpuUsageLine += renderDetails({
-    med: humanizeProcessCpuUsage(processCpuUsage.median),
-    min: humanizeProcessCpuUsage(processCpuUsage.min),
-    max: humanizeProcessCpuUsage(processCpuUsage.max),
-  });
-  lines.push(cpuUsageLine);
+  // cpu: the process cpu time over the build duration, 100% being one core
+  // busy the whole time (more when a native module works on other threads)
+  const cpuMs = (cpuUsage.user + cpuUsage.system) / 1000;
+  lines.push(`cpu: ${Math.round((cpuMs / duration) * 100)}%`);
 
   // memory usage
   let memoryUsageLine = "memory: ";
@@ -10112,6 +10230,16 @@ const renderBuildDoneLog = ({
   // duration
   let durationLine = `duration: `;
   durationLine += humanizeDuration(duration, { short: true });
+  if (phaseTimings) {
+    durationLine += renderDetails(
+      Object.fromEntries(
+        Object.keys(phaseTimings).map((phaseName) => [
+          phaseName,
+          humanizePhaseDuration(phaseTimings[phaseName]),
+        ]),
+      ),
+    );
+  }
   lines.push(durationLine);
 
   // content
@@ -10302,6 +10430,8 @@ const createBuildContentReport = (buildFileContents) => {
 };
 
 const determineCategory = (buildRelativeUrl) => {
+  // a versioned url ("main.js?v=abc") is categorized by its file
+  buildRelativeUrl = buildRelativeUrl.replace(/[?#].*$/, "");
   if (buildRelativeUrl.endsWith(".map")) {
     return "sourcemap";
   }
@@ -11228,7 +11358,7 @@ const createBuildSpecifierManager = ({
           }
           if (mayUsePlaceholder(urlInfo)) {
             const contentBeforeReplace = urlInfo.content;
-            const { content, sourcemap } = placeholderAPI.replaceAll(
+            const replaceResult = placeholderAPI.replaceAll(
               contentBeforeReplace,
               (placeholder) => {
                 const reference = placeholderToReferenceMap.get(placeholder);
@@ -11236,7 +11366,7 @@ const createBuildSpecifierManager = ({
                 return value;
               },
             );
-            urlInfo.mutateContent({ content, sourcemap });
+            urlInfo.mutateContent(replaceResult);
           }
         },
       );
@@ -12477,13 +12607,12 @@ entryPoints: {
     });
   }
 
-  const cpuMonitoring = startMonitoringCpuUsage();
-  operation.addEndCallback(cpuMonitoring.stop);
-  const [processCpuUsageMonitoring] = cpuMonitoring;
+  // cpu is not sampled: cooking, rollup and terser hold the event loop for
+  // seconds at a time, a sampler only runs in the gaps and would report the
+  // idle time. What the build cost is process.cpuUsage() over its duration.
   const memoryMonitoring = startMonitoringMemoryUsage();
   const [processMemoryUsageMonitoring] = memoryMonitoring;
   const interval = setInterval(() => {
-    processCpuUsageMonitoring.measure();
     processMemoryUsageMonitoring.measure();
   }, 500).unref();
   operation.addEndCallback(() => {
@@ -12553,19 +12682,24 @@ entryPoints: {
     content += "\n";
     return content;
   };
-  const renderBuildEndLog = ({ duration, buildFileContents }) => {
+  const renderBuildEndLog = ({
+    duration,
+    buildFileContents,
+    cpuUsage,
+    phaseTimings,
+  }) => {
     // tell how many files are generated in build directory
     // tell the repartition?
     // this is not really useful for single build right?
 
-    processCpuUsageMonitoring.end();
     processMemoryUsageMonitoring.end();
 
     return renderBuildDoneLog({
       entryPointArray,
       duration,
       buildFileContents,
-      processCpuUsage: processCpuUsageMonitoring.info,
+      cpuUsage,
+      phaseTimings,
       processMemoryUsage: processMemoryUsageMonitoring.info,
     });
   };
@@ -12640,13 +12774,25 @@ entryPoints: {
             }, renderDynamicLog());
           };
         },
-        onBuildEnd: ({ buildFileContents, duration }) => {
+        onBuildEnd: ({
+          buildFileContents,
+          duration,
+          cpuUsage,
+          phaseTimings,
+        }) => {
           clearInterval(interval);
           dynamicLog.update("");
           dynamicLog.destroy();
           dynamicLog = null;
           logger.info("");
-          logger.info(renderBuildEndLog({ duration, buildFileContents }));
+          logger.info(
+            renderBuildEndLog({
+              duration,
+              buildFileContents,
+              cpuUsage,
+              phaseTimings,
+            }),
+          );
         },
       };
     };
@@ -12673,8 +12819,20 @@ entryPoints: {
             );
           };
         },
-        onBuildEnd: ({ buildFileContents, duration }) => {
-          logger.info(renderBuildEndLog({ duration, buildFileContents }));
+        onBuildEnd: ({
+          buildFileContents,
+          duration,
+          cpuUsage,
+          phaseTimings,
+        }) => {
+          logger.info(
+            renderBuildEndLog({
+              duration,
+              buildFileContents,
+              cpuUsage,
+              phaseTimings,
+            }),
+          );
         },
       };
     };
@@ -12723,6 +12881,7 @@ entryPoints: {
 
   const runBuild = async ({ signal }) => {
     const startDate = Date.now();
+    const cpuUsageAtStart = process.cpuUsage();
     const { onBuildEnd, onEntryPointBuildStart } = startBuildLogs();
 
     const buildUrlsGenerator = createBuildUrlsGenerator({
@@ -12831,6 +12990,7 @@ entryPoints: {
             entryBuildInfo.buildInlineContents = result.buildInlineContents;
             entryBuildInfo.buildManifest = result.buildManifest;
             entryBuildInfo.buildSideEffectFiles = result.buildSideEffectFiles;
+            entryBuildInfo.phaseTimings = result.phaseTimings;
             entryBuildInfo.duration = Date.now() - entryPointBuildStartMs;
             onEntryPointBuildEnd();
           })();
@@ -12935,11 +13095,19 @@ entryPoints: {
         }
       }
     }
+    // entry points are built concurrently, interleaved on the same thread:
+    // their phases overlap and only a single one can be told apart
+    const phaseTimings =
+      entryBuildInfoMap.size === 1
+        ? entryBuildInfoMap.values().next().value.phaseTimings
+        : null;
     onBuildEnd({
       buildFileContents,
       buildInlineContents,
       buildManifest,
       duration: Date.now() - startDate,
+      cpuUsage: process.cpuUsage(cpuUsageAtStart),
+      phaseTimings,
     });
     return {
       ...(returnBuildInlineContents ? { buildInlineContents } : {}),
@@ -13303,6 +13471,14 @@ const prepareEntryPointBuild = async (
   return {
     entryReference,
     buildEntryPoint: async ({ getOtherEntryBuildInfo }) => {
+      const phaseTimings = {};
+      let phaseStartMs = Date.now();
+      const endPhase = (name) => {
+        const nowMs = Date.now();
+        phaseTimings[name] = nowMs - phaseStartMs;
+        phaseStartMs = nowMs;
+      };
+
       {
         _getOtherEntryBuildInfo = getOtherEntryBuildInfo;
         if (outDirectoryUrl) {
@@ -13310,6 +13486,7 @@ const prepareEntryPointBuild = async (
         }
         await rawRootUrlInfo.cookDependencies({ operation: buildOperation });
       }
+      endPhase("craft");
 
       const finalKitchen = createKitchen({
         name: "shape",
@@ -13522,6 +13699,8 @@ const prepareEntryPointBuild = async (
         }
       }
 
+      endPhase("bundle");
+
       {
         finalKitchen.context.buildStep = "shape";
         if (outDirectoryUrl) {
@@ -13541,6 +13720,8 @@ const prepareEntryPointBuild = async (
         });
       }
 
+      endPhase("shape");
+
       const buildSideEffectFiles = [];
       {
         finalKitchen.context.buildStep = "refine";
@@ -13648,6 +13829,8 @@ const prepareEntryPointBuild = async (
           }
         }
       }
+      endPhase("refine");
+
       const {
         buildFileContents,
         buildFileVersions,
@@ -13667,6 +13850,7 @@ const prepareEntryPointBuild = async (
         buildInlineContents,
         buildManifest,
         buildSideEffectFiles,
+        phaseTimings,
       };
     },
   };