@jsenv/core 41.4.9 → 41.4.11

package/dist/build/build.js

@@ -196,12 +196,21 @@ const createStatus = (
     declaredVersion,
     declaredBy,
     installedVersion: null,
+    // the file telling this dependency apart; it is what an install rewrites and
+    // what the dev server looks at to know the dependency became the declared one
+    watchedPath: null,
     state: "missing",
   };
   const installedDirectoryUrl = findInstalledDirectoryUrl(
     declaringDirectoryUrl,
     packageName,
   );
+  status.watchedPath = watchedPathFromDirectoryUrl(
+    packageDirectory,
+    // not installed yet: name the place where it is expected to appear
+    installedDirectoryUrl ||
+      `${declaringDirectoryUrl}node_modules/${packageName}/`,
+  );
   if (!installedDirectoryUrl) {
     return status;
   }
@@ -220,6 +229,14 @@ const createStatus = (
   return status;
 };
 
+const watchedPathFromDirectoryUrl = (packageDirectory, directoryUrl) => {
+  const packageJsonUrl = `${directoryUrl}package.json`;
+  if (!packageDirectory.url) {
+    return packageJsonUrl;
+  }
+  return urlToRelativeUrl(packageJsonUrl, packageDirectory.url);
+};
+
 const findInstalledDirectoryUrl = (declaringDirectoryUrl, packageName) => {
   let directoryUrl = declaringDirectoryUrl;
   while (directoryUrl) {
@@ -4119,7 +4136,9 @@ const jsenvPluginDirectoryReferenceEffect = (
       } else if (reference.specifierPathname.endsWith("./")) ; else {
         const directoryRelativeUrl = urlToRelativeUrl(
           reference.url,
-          reference.ownerUrlInfo.originalUrl,
+          // the root url info has no originalUrl; it owns the reference
+          // created for an incoming request ("http_request")
+          reference.ownerUrlInfo.originalUrl || reference.ownerUrlInfo.url,
         );
         reference.filenameHint = directoryRelativeUrl;
       }
@@ -7242,6 +7261,9 @@ const jsenvPluginFsRedirection = ({
       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";
@@ -7271,20 +7293,16 @@ const jsenvPluginFsRedirection = ({
             // url has an extension, we assume it's a file request -> let 404 happen
             return null;
           }
-          const { requestedUrl, rootDirectoryUrl, mainFilePath } =
-            reference.ownerUrlInfo.context;
-          if (!requestedUrl) {
-            // the SPA fallback answers a request; during build there is none
+          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 closestHtmlRootFile = getClosestHtmlRootFile(
-            requestedUrl,
-            rootDirectoryUrl,
-          );
-          if (closestHtmlRootFile) {
-            return closestHtmlRootFile;
+          const spaFallbackUrl = getSpaFallbackUrl(reference);
+          if (spaFallbackUrl) {
+            return spaFallbackUrl;
           }
-          return new URL(mainFilePath, rootDirectoryUrl);
+          return null;
         }
         if (fsStat.isDirectory()) {
           // When requesting a directory, check if we have an HTML entry file for that directory
@@ -7293,6 +7311,21 @@ const jsenvPluginFsRedirection = ({
             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) {
@@ -7355,6 +7388,22 @@ const getDirectoryEntryFileUrl = (directoryUrl) => {
   }
   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) {
@@ -9266,6 +9315,7 @@ const clientFileUrl = import.meta.resolve("../js/dependency_status.js");
 const jsenvPluginDependencyStatus = ({
   dependencyProblemEventEmitter,
   getDependencyProblems,
+  getDependencyWatchInfo = () => ({}),
 }) => {
   return {
     name: "jsenv:dependency_status",
@@ -9302,7 +9352,10 @@ const jsenvPluginDependencyStatus = ({
           src: clientReference.generatedSpecifier,
           initCall: {
             callee: "initDependencyStatus",
-            params: { problems: getDependencyProblems() },
+            params: {
+              problems: getDependencyProblems(),
+              watchInfo: getDependencyWatchInfo(),
+            },
           },
           pluginName: "jsenv:dependency_status",
         });

package/dist/js/dependency_status.js

@@ -3,11 +3,22 @@
  *
  * A missing dependency is not handled here: it makes the import fail, so the
  * error overlay already says it, with more precision (which import, where).
+ *
+ * The overlay does not only describe the problem, it shows the dev server
+ * watching for the fix: the paths being looked at are named and kept alive on
+ * screen, so waiting for "npm install" feels like waiting for something that is
+ * actually going to happen.
  */
 
 let removeOverlay = () => {};
+let watchInfoFromServer = {};
+// packages listed as outdated at some point, and the path watched for each;
+// what leaves this map has been installed while the overlay was open, which is
+// worth showing as such
+const outdatedPathMap = new Map();
 
-const initDependencyStatus = ({ problems }) => {
+const initDependencyStatus = ({ problems, watchInfo }) => {
+  watchInfoFromServer = watchInfo || {};
   render(problems);
   // without the server events channel the page only knows the state it was
   // served with, which is still better than nothing
@@ -24,9 +35,19 @@ const render = (problems) => {
   const outdatedList = problems.filter(({ state }) => state === "outdated");
   removeOverlay();
   removeOverlay = () => {};
+  const installedList = [];
+  for (const [packageName, watchedPath] of outdatedPathMap) {
+    if (!outdatedList.some((problem) => problem.packageName === packageName)) {
+      installedList.push({ packageName, watchedPath });
+    }
+  }
   if (outdatedList.length === 0) {
+    outdatedPathMap.clear();
     return;
   }
+  for (const { packageName, watchedPath } of outdatedList) {
+    outdatedPathMap.set(packageName, watchedPath);
+  }
   const supervisor = window.__supervisor__;
   if (!supervisor || !supervisor.reportWarning) {
     console.warn(summarize(outdatedList));
@@ -41,8 +62,8 @@ const render = (problems) => {
     details: [
       "The page is running with what is installed in node_modules, which is not what package.json asks for. It may work, but it is not the code the project expects.",
       "Run npm install to fix it. If an install is already running, there is nothing to do but wait.",
-      "This page reloads on its own as soon as node_modules matches package.json.",
     ],
+    node: createWatchNode(outdatedList, installedList),
   });
 };
 
@@ -58,4 +79,214 @@ const summarize = (outdatedList) => {
     .join(", ")}`;
 };
 
+const createWatchNode = (outdatedList, installedList) => {
+  const { packageJsonPath = "package.json", pollInterval } =
+    watchInfoFromServer;
+  const node = document.createElement("div");
+  node.className = "dependency_watch";
+  const rows = [];
+  rows.push(
+    createRow({
+      state: "watching",
+      path: packageJsonPath,
+      // a file watcher, not a poll: an edit here is what puts a dependency out
+      // of date in the first place
+      note: "on every change",
+      pollInterval,
+    }),
+  );
+  for (const { packageName, declaredVersion, watchedPath } of outdatedList) {
+    rows.push(
+      createRow({
+        state: "watching",
+        path: watchedPath || `node_modules/${packageName}/package.json`,
+        note: pollInterval
+          ? `waiting for ${declaredVersion}, read every ${pollInterval}ms`
+          : `waiting for ${declaredVersion}`,
+        pollInterval,
+      }),
+    );
+  }
+  for (const { packageName, watchedPath } of installedList) {
+    rows.push(
+      createRow({
+        state: "done",
+        path: watchedPath || `node_modules/${packageName}/package.json`,
+        note: "installed",
+      }),
+    );
+  }
+  node.innerHTML = `
+<style>
+  ${watchCSS}
+</style>
+<div class="dependency_watch_head">
+  <span class="dependency_watch_live">
+    <span class="dependency_watch_live_dot"></span>watching
+  </span>
+  <span class="dependency_watch_head_text">
+    the files that will tell the install is over
+  </span>
+</div>
+<div class="dependency_watch_rows">
+  ${rows.join("\n  ")}
+</div>
+<div class="dependency_watch_effect" data-copy-line>
+  As soon as node_modules matches package.json, this page reloads by itself.
+</div>`;
+  return node;
+};
+
+const createRow = ({ state, path, note, pollInterval }) => {
+  const sweepStyle = pollInterval
+    ? ` style="animation-duration: ${pollInterval}ms"`
+    : "";
+  return `<div class="dependency_watch_row" data-state="${state}">
+    <span class="dependency_watch_row_icon"></span>
+    <code class="dependency_watch_row_path">${escapeHtml(path)}</code>
+    <span class="dependency_watch_row_note">${escapeHtml(note)}</span>
+    ${
+      state === "watching"
+        ? `<span class="dependency_watch_row_sweep"${sweepStyle}></span>`
+        : ""
+    }
+  </div>`;
+};
+
+const escapeHtml = (string) => {
+  return String(string)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
+
+const watchCSS = /* css */ `
+  .dependency_watch_head {
+    display: flex;
+    margin-bottom: 8px;
+    align-items: center;
+    gap: 8px;
+  }
+  .dependency_watch_live {
+    display: flex;
+    padding: 2px 8px;
+    align-items: center;
+    gap: 6px;
+    color: #ffab40;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    border: 1px solid currentColor;
+    border-radius: 999px;
+  }
+  .dependency_watch_live_dot {
+    width: 7px;
+    height: 7px;
+    background: currentColor;
+    border-radius: 50%;
+    animation: dependency_watch_pulse 1.4s ease-in-out infinite;
+  }
+  @keyframes dependency_watch_pulse {
+    0%,
+    100% {
+      opacity: 0.25;
+      transform: scale(0.8);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.15);
+    }
+  }
+  .dependency_watch_head_text {
+    font-size: 13px;
+  }
+
+  .dependency_watch_rows {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .dependency_watch_row {
+    position: relative;
+    display: flex;
+    padding: 6px 10px;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid #333;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .dependency_watch_row_icon {
+    width: 8px;
+    height: 8px;
+    flex: none;
+    border: 1px solid #ffab40;
+    border-radius: 50%;
+  }
+  .dependency_watch_row[data-state="done"] .dependency_watch_row_icon {
+    background: #7fd67f;
+    border-color: #7fd67f;
+  }
+  .dependency_watch_row_path {
+    color: #eee;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .dependency_watch_row_note {
+    margin-left: auto;
+    padding-left: 8px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0.8;
+  }
+  .dependency_watch_row[data-state="done"] .dependency_watch_row_note {
+    color: #7fd67f;
+    opacity: 1;
+  }
+  /* the sweep is the watching made visible: one pass per read */
+  .dependency_watch_row_sweep {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 35%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 171, 64, 0.16),
+      transparent
+    );
+    animation: dependency_watch_sweep 2s linear infinite;
+    pointer-events: none;
+  }
+  @keyframes dependency_watch_sweep {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(340%);
+    }
+  }
+
+  .dependency_watch_effect {
+    margin-top: 8px;
+    color: #ffab40;
+    font-size: 13px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dependency_watch_live_dot {
+      animation: none;
+    }
+    .dependency_watch_row_sweep {
+      display: none;
+    }
+  }
+`;
+
 export { initDependencyStatus };

package/dist/start_dev_server/start_dev_server.js

@@ -1,6 +1,6 @@
 import { WebSocketResponse, pickContentType, ServerEvents, serverPluginErrorHandler, composeTwoResponses, fetchDirectory, serverPluginCORS, jsenvAccessControlAllowedHeaders, startServer } from "@jsenv/server";
 import { existsSync, readFileSync, readdirSync, lstatSync, realpathSync } from "node:fs";
-import { registerFileLifecycle, lookupPackageDirectory, readPackageAtOrNull, generateContentFrame, urlToRelativeUrl, errorToHTML, DATA_URL, CONTENT_TYPE, normalizeImportMap, composeTwoImportMaps, resolveImport, JS_QUOTES, urlToExtension, urlToBasename, applyNodeEsmResolution, URL_META, readCustomConditionsFromProcessArgs, urlIsOrIsInsideOf, collectFiles, registerDirectoryLifecycle, asUrlWithoutSearch, readEntryStatSync, ensurePathnameTrailingSlash, compareFileUrls, urlToFilename, applyFileSystemMagicResolution, getExtensionsToTry, setUrlExtension, createDetailedMessage, stringifyUrlSite, injectQueryParamsIntoSpecifier, isSpecifierForNodeBuiltin, injectQueryParams, urlToFileSystemPath, writeFileSync, moveUrl, ensureWindowsDriveLetter, validateResponseIntegrity, setUrlFilename, getCallerPosition, asSpecifierWithoutSearch, bufferToEtag, isFileSystemPath, urlToPathname, setUrlBasename, createLogger, normalizeUrl, ANSI, RUNTIME_COMPAT, formatError, assertAndNormalizeDirectoryUrl, createTaskLog } from "./jsenv_core_packages.js";
+import { urlToRelativeUrl, registerFileLifecycle, lookupPackageDirectory, readPackageAtOrNull, generateContentFrame, errorToHTML, DATA_URL, CONTENT_TYPE, normalizeImportMap, composeTwoImportMaps, resolveImport, JS_QUOTES, urlToExtension, urlToBasename, applyNodeEsmResolution, URL_META, readCustomConditionsFromProcessArgs, urlIsOrIsInsideOf, collectFiles, registerDirectoryLifecycle, asUrlWithoutSearch, readEntryStatSync, ensurePathnameTrailingSlash, compareFileUrls, urlToFilename, applyFileSystemMagicResolution, getExtensionsToTry, setUrlExtension, createDetailedMessage, stringifyUrlSite, injectQueryParamsIntoSpecifier, isSpecifierForNodeBuiltin, injectQueryParams, urlToFileSystemPath, writeFileSync, moveUrl, ensureWindowsDriveLetter, validateResponseIntegrity, setUrlFilename, getCallerPosition, asSpecifierWithoutSearch, bufferToEtag, isFileSystemPath, urlToPathname, setUrlBasename, createLogger, normalizeUrl, ANSI, RUNTIME_COMPAT, formatError, assertAndNormalizeDirectoryUrl, createTaskLog } from "./jsenv_core_packages.js";
 import { createPluginsController } from "@jsenv/server/src/plugins_controller.js";
 import { parseHtml, injectJsenvScript, stringifyHtmlAst, parseCssUrls, getHtmlNodeAttribute, getHtmlNodePosition, getHtmlNodeAttributePosition, setHtmlNodeAttributes, parseSrcSet, getUrlForContentInsideHtml, removeHtmlNodeText, setHtmlNodeText, getHtmlNodeText, analyzeScriptNode, visitHtmlNodes, parseJsUrls, getUrlForContentInsideJs, applyBabelPlugins, analyzeLinkNode, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, generateUrlForInlineContent, parseJsWithAcorn } from "@jsenv/ast";
 import { jsenvPluginSupervisor } from "@jsenv/plugin-supervisor";
@@ -144,12 +144,21 @@ const createStatus = (
     declaredVersion,
     declaredBy,
     installedVersion: null,
+    // the file telling this dependency apart; it is what an install rewrites and
+    // what the dev server looks at to know the dependency became the declared one
+    watchedPath: null,
     state: "missing",
   };
   const installedDirectoryUrl = findInstalledDirectoryUrl(
     declaringDirectoryUrl,
     packageName,
   );
+  status.watchedPath = watchedPathFromDirectoryUrl(
+    packageDirectory,
+    // not installed yet: name the place where it is expected to appear
+    installedDirectoryUrl ||
+      `${declaringDirectoryUrl}node_modules/${packageName}/`,
+  );
   if (!installedDirectoryUrl) {
     return status;
   }
@@ -168,6 +177,14 @@ const createStatus = (
   return status;
 };
 
+const watchedPathFromDirectoryUrl = (packageDirectory, directoryUrl) => {
+  const packageJsonUrl = `${directoryUrl}package.json`;
+  if (!packageDirectory.url) {
+    return packageJsonUrl;
+  }
+  return urlToRelativeUrl(packageJsonUrl, packageDirectory.url);
+};
+
 const findInstalledDirectoryUrl = (declaringDirectoryUrl, packageName) => {
   let directoryUrl = declaringDirectoryUrl;
   while (directoryUrl) {
@@ -232,8 +249,13 @@ const watchDependencies = (
   { onProblem, onInstalled, onChange, pollInterval = POLL_INTERVAL },
 ) => {
   let problemMap = new Map();
+  // every path given to the browser is relative to the package directory, the
+  // one holding the package.json being watched
+  const packageJsonPath = "package.json";
   const watcher = {
     getProblems: () => Array.from(problemMap.values()),
+    // what the browser needs to display the watching in progress
+    getWatchInfo: () => ({ packageJsonPath, pollInterval }),
     stop: () => {},
   };
   if (!packageDirectory.url) {
@@ -4075,6 +4097,9 @@ const jsenvPluginFsRedirection = ({
       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";
@@ -4104,20 +4129,16 @@ const jsenvPluginFsRedirection = ({
             // url has an extension, we assume it's a file request -> let 404 happen
             return null;
           }
-          const { requestedUrl, rootDirectoryUrl, mainFilePath } =
-            reference.ownerUrlInfo.context;
-          if (!requestedUrl) {
-            // the SPA fallback answers a request; during build there is none
+          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 closestHtmlRootFile = getClosestHtmlRootFile(
-            requestedUrl,
-            rootDirectoryUrl,
-          );
-          if (closestHtmlRootFile) {
-            return closestHtmlRootFile;
+          const spaFallbackUrl = getSpaFallbackUrl(reference);
+          if (spaFallbackUrl) {
+            return spaFallbackUrl;
           }
-          return new URL(mainFilePath, rootDirectoryUrl);
+          return null;
         }
         if (fsStat.isDirectory()) {
           // When requesting a directory, check if we have an HTML entry file for that directory
@@ -4126,6 +4147,21 @@ const jsenvPluginFsRedirection = ({
             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) {
@@ -4188,6 +4224,22 @@ const getDirectoryEntryFileUrl = (directoryUrl) => {
   }
   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) {
@@ -4995,7 +5047,9 @@ const jsenvPluginDirectoryReferenceEffect = (
       } else if (reference.specifierPathname.endsWith("./")) ; else {
         const directoryRelativeUrl = urlToRelativeUrl(
           reference.url,
-          reference.ownerUrlInfo.originalUrl,
+          // the root url info has no originalUrl; it owns the reference
+          // created for an incoming request ("http_request")
+          reference.ownerUrlInfo.originalUrl || reference.ownerUrlInfo.url,
         );
         reference.filenameHint = directoryRelativeUrl;
       }
@@ -7090,6 +7144,7 @@ const clientFileUrl = import.meta.resolve("../js/dependency_status.js");
 const jsenvPluginDependencyStatus = ({
   dependencyProblemEventEmitter,
   getDependencyProblems,
+  getDependencyWatchInfo = () => ({}),
 }) => {
   return {
     name: "jsenv:dependency_status",
@@ -7126,7 +7181,10 @@ const jsenvPluginDependencyStatus = ({
           src: clientReference.generatedSpecifier,
           initCall: {
             callee: "initDependencyStatus",
-            params: { problems: getDependencyProblems() },
+            params: {
+              problems: getDependencyProblems(),
+              watchInfo: getDependencyWatchInfo(),
+            },
           },
           pluginName: "jsenv:dependency_status",
         });
@@ -11421,6 +11479,14 @@ const devServerPluginServeSourceFiles = ({
               !inlineParentUrlInfo &&
               !urlInfo.response &&
               urlInfo.content !== undefined &&
+              // content can be defined while a cook is still in flight (a file
+              // watcher invalidation re-cooking in the background, for
+              // instance): at that point it holds the raw fetched content,
+              // transformations not applied yet. Serving that would send an
+              // html without any of the injected scripts. Only finalized
+              // content is a complete response; anything else must go through
+              // cook() below, which joins the pending cook (see debounceCook).
+              urlInfo.contentFinalized &&
               !cacheIsDisabledInResponseHeader(urlInfo) &&
               // a "?hot" request exists to bypass every cache, this one
               // included: it must be cooked, because cooking is what rewrites
@@ -11465,7 +11531,10 @@ const devServerPluginServeSourceFiles = ({
             }
             response = {
               url: reference.url,
-              status: 200,
+              // a plugin can cook a complete response body for an url that is
+              // not a 200: the directory listing does this to answer a request
+              // for a file that does not exist with the explorer page
+              status: urlInfo.status,
               headers: {
                 // when we send eTag to the client the next request to the server
                 // will send etag in request headers.
@@ -11839,6 +11908,7 @@ const startDevServer = async ({
       dependencyStatus: {
         dependencyProblemEventEmitter,
         getDependencyProblems: dependencyWatcher.getProblems,
+        getDependencyWatchInfo: dependencyWatcher.getWatchInfo,
       },
       cacheControl,
       ribbon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "41.4.9",
+  "version": "41.4.11",
   "type": "module",
   "description": "Tool to develop, test and build js projects",
   "repository": {

package/src/dev/dev_server_plugins/dev_server_plugin_serve_source_files.js

@@ -317,6 +317,14 @@ export const devServerPluginServeSourceFiles = ({
               !inlineParentUrlInfo &&
               !urlInfo.response &&
               urlInfo.content !== undefined &&
+              // content can be defined while a cook is still in flight (a file
+              // watcher invalidation re-cooking in the background, for
+              // instance): at that point it holds the raw fetched content,
+              // transformations not applied yet. Serving that would send an
+              // html without any of the injected scripts. Only finalized
+              // content is a complete response; anything else must go through
+              // cook() below, which joins the pending cook (see debounceCook).
+              urlInfo.contentFinalized &&
               !cacheIsDisabledInResponseHeader(urlInfo) &&
               // a "?hot" request exists to bypass every cache, this one
               // included: it must be cooked, because cooking is what rewrites
@@ -361,7 +369,10 @@ export const devServerPluginServeSourceFiles = ({
             }
             response = {
               url: reference.url,
-              status: 200,
+              // a plugin can cook a complete response body for an url that is
+              // not a 200: the directory listing does this to answer a request
+              // for a file that does not exist with the explorer page
+              status: urlInfo.status,
               headers: {
                 // when we send eTag to the client the next request to the server
                 // will send etag in request headers.

package/src/dev/start_dev_server.js

@@ -265,6 +265,7 @@ export const startDevServer = async ({
       dependencyStatus: {
         dependencyProblemEventEmitter,
         getDependencyProblems: dependencyWatcher.getProblems,
+        getDependencyWatchInfo: dependencyWatcher.getWatchInfo,
       },
       cacheControl,
       ribbon,

package/src/helpers/watch_dependencies.js

@@ -23,8 +23,13 @@ export const watchDependencies = (
   { onProblem, onInstalled, onChange, pollInterval = POLL_INTERVAL },
 ) => {
   let problemMap = new Map();
+  // every path given to the browser is relative to the package directory, the
+  // one holding the package.json being watched
+  const packageJsonPath = "package.json";
   const watcher = {
     getProblems: () => Array.from(problemMap.values()),
+    // what the browser needs to display the watching in progress
+    getWatchInfo: () => ({ packageJsonPath, pollInterval }),
     stop: () => {},
   };
   if (!packageDirectory.url) {