@jsenv/core 39.12.0 → 39.13.0

package/dist/jsenv_core.js

@@ -1467,6 +1467,7 @@ const pathnameToExtension$1 = (pathname) => {
 };
 
 const asUrlWithoutSearch = (url) => {
+  url = String(url);
   if (url.includes("?")) {
     const urlObject = new URL(url);
     urlObject.search = "";
@@ -1618,6 +1619,15 @@ const setUrlFilename = (url, filename) => {
   });
 };
 
+const setUrlBasename = (url, basename) => {
+  return setUrlFilename(url, (filename) => {
+    if (typeof basename === "function") {
+      basename = basename(filenameToBasename(filename));
+    }
+    return `${basename}${urlToExtension$1(url)}`;
+  });
+};
+
 const transformUrlPathname = (url, transformer) => {
   if (typeof url === "string") {
     const urlObject = new URL(url);
@@ -5003,6 +5013,17 @@ const fromNodeRequest = (
   nodeRequest,
   { serverOrigin, signal, requestBodyLifetime },
 ) => {
+  const handleRequestOperation = Abort.startOperation();
+  if (signal) {
+    handleRequestOperation.addAbortSignal(signal);
+  }
+  handleRequestOperation.addAbortSource((abort) => {
+    nodeRequest.once("close", abort);
+    return () => {
+      nodeRequest.removeListener("close", abort);
+    };
+  });
+
   const headers = headersFromObject(nodeRequest.headers);
   const body = observableFromNodeStream(nodeRequest, {
     readableStreamLifetime: requestBodyLifetime,
@@ -5024,7 +5045,7 @@ const fromNodeRequest = (
   }
 
   return Object.freeze({
-    signal,
+    signal: handleRequestOperation.signal,
     http2: Boolean(nodeRequest.stream),
     origin: requestOrigin,
     ...getPropertiesFromResource({
@@ -6924,6 +6945,15 @@ const startServer = async ({
     status = "stopped";
     stoppedResolve(reason);
   });
+  let stopAbortSignal;
+  {
+    let stopAbortController = new AbortController();
+    stopCallbackSet.add(() => {
+      stopAbortController.abort();
+      stopAbortController = undefined;
+    });
+    stopAbortSignal = stopAbortController.signal;
+  }
 
   const cancelProcessTeardownRace = raceProcessTeardownEvents(
     processTeardownEvents,
@@ -6991,6 +7021,9 @@ const startServer = async ({
       }
 
       const receiveRequestOperation = Abort.startOperation();
+      receiveRequestOperation.addAbortSignal(stopAbortSignal);
+      const sendResponseOperation = Abort.startOperation();
+      sendResponseOperation.addAbortSignal(stopAbortSignal);
       receiveRequestOperation.addAbortSource((abort) => {
         const closeEventCallback = () => {
           if (nodeRequest.complete) {
@@ -7005,19 +7038,11 @@ const startServer = async ({
           nodeRequest.removeListener("close", closeEventCallback);
         };
       });
-      receiveRequestOperation.addAbortSource((abort) => {
-        return stopCallbackSet.add(abort);
-      });
-
-      const sendResponseOperation = Abort.startOperation();
       sendResponseOperation.addAbortSignal(receiveRequestOperation.signal);
-      sendResponseOperation.addAbortSource((abort) => {
-        return stopCallbackSet.add(abort);
-      });
 
       const request = fromNodeRequest(nodeRequest, {
+        signal: stopAbortSignal,
         serverOrigin,
-        signal: receiveRequestOperation.signal,
       });
 
       // Handling request is asynchronous, we buffer logs for that request
@@ -7591,13 +7616,16 @@ const startServer = async ({
           socket,
           head,
           async (websocket) => {
+            const websocketAbortController = new AbortController();
             websocketClients.add(websocket);
+            websocket.signal = websocketAbortController.signal;
             websocket.once("close", () => {
               websocketClients.delete(websocket);
+              websocketAbortController.abort();
             });
             const request = fromNodeRequest(nodeRequest, {
+              signal: stopAbortSignal,
               serverOrigin: websocketOrigin,
-              signal: new AbortController().signal,
               requestBodyLifetime,
             });
             serviceController.callAsyncHooksUntil(
@@ -11711,7 +11739,7 @@ const generateHtmlForSyntaxError = (
     errorLinkText: `${htmlRelativeUrl}:${line}:${column}`,
     syntaxError: escapeHtml(htmlErrorContentFrame),
   };
-  const html = replacePlaceholders$2(htmlForSyntaxError, replacers);
+  const html = replacePlaceholders$1(htmlForSyntaxError, replacers);
   return html;
 };
 const escapeHtml = (string) => {
@@ -11722,7 +11750,7 @@ const escapeHtml = (string) => {
     .replace(/"/g, """)
     .replace(/'/g, "'");
 };
-const replacePlaceholders$2 = (html, replacers) => {
+const replacePlaceholders$1 = (html, replacers) => {
   return html.replace(/\$\{(\w+)\}/g, (match, name) => {
     const replacer = replacers[name];
     if (replacer === undefined) {
@@ -11738,6 +11766,7 @@ const replacePlaceholders$2 = (html, replacers) => {
 const HOOK_NAMES = [
   "init",
   "serve", // is called only during dev/tests
+  "serveWebsocket",
   "resolveReference",
   "redirectReference",
   "transformReferenceSearchParams",
@@ -11750,6 +11779,7 @@ const HOOK_NAMES = [
   "cooked",
   "augmentResponse", // is called only during dev/tests
   "destroy",
+  "effect",
 ];
 
 const createPluginController = (
@@ -11763,19 +11793,18 @@ const createPluginController = (
     return value;
   };
 
-  const plugins = [];
-  // precompute a list of hooks per hookName for one major reason:
-  // - When debugging, there is less iteration
-  // also it should increase perf as there is less work to do
-  const hookGroups = {};
-  const addPlugin = (plugin, { position = "end" }) => {
+  const pluginCandidates = [];
+  const activeEffectSet = new Set();
+  const activePlugins = [];
+  // precompute a list of hooks per hookName because:
+  // 1. [MAJOR REASON] when debugging, there is less iteration (so much better)
+  // 2. [MINOR REASON] it should increase perf as there is less work to do
+  const hookSetMap = new Map();
+  const addPlugin = (plugin, options) => {
     if (Array.isArray(plugin)) {
-      if (position === "start") {
-        plugin = plugin.slice().reverse();
+      for (const value of plugin) {
+        addPlugin(value);
       }
-      plugin.forEach((plugin) => {
-        addPlugin(plugin, { position });
-      });
       return;
     }
     if (plugin === null || typeof plugin !== "object") {
@@ -11785,65 +11814,10 @@ const createPluginController = (
       plugin.name = "anonymous";
     }
     if (!testAppliesDuring(plugin) || !initPlugin(plugin)) {
-      if (plugin.destroy) {
-        plugin.destroy();
-      }
+      plugin.destroy?.();
       return;
     }
-    plugins.push(plugin);
-    for (const key of Object.keys(plugin)) {
-      if (key === "meta") {
-        const value = plugin[key];
-        if (typeof value !== "object" || value === null) {
-          console.warn(`plugin.meta must be an object, got ${value}`);
-          continue;
-        }
-        Object.assign(pluginsMeta, value);
-        // any extension/modification on plugin.meta
-        // won't be taken into account so we freeze object
-        // to throw in case it happen
-        Object.freeze(value);
-        continue;
-      }
-
-      if (
-        key === "name" ||
-        key === "appliesDuring" ||
-        key === "init" ||
-        key === "serverEvents" ||
-        key === "mustStayFirst"
-      ) {
-        continue;
-      }
-      const isHook = HOOK_NAMES.includes(key);
-      if (!isHook) {
-        console.warn(`Unexpected "${key}" property on "${plugin.name}" plugin`);
-        continue;
-      }
-      const hookName = key;
-      const hookValue = plugin[hookName];
-      if (hookValue) {
-        const group = hookGroups[hookName] || (hookGroups[hookName] = []);
-        const hook = {
-          plugin,
-          name: hookName,
-          value: hookValue,
-        };
-        if (position === "start") {
-          let i = 0;
-          while (i < group.length) {
-            const before = group[i];
-            if (!before.plugin.mustStayFirst) {
-              break;
-            }
-            i++;
-          }
-          group.splice(i, 0, hook);
-        } else {
-          group.push(hook);
-        }
-      }
-    }
+    pluginCandidates.push(plugin);
   };
   const testAppliesDuring = (plugin) => {
     const { appliesDuring } = plugin;
@@ -11882,22 +11856,131 @@ const createPluginController = (
     );
   };
   const initPlugin = (plugin) => {
-    if (plugin.init) {
-      const initReturnValue = plugin.init(kitchenContext, plugin);
-      if (initReturnValue === false) {
-        return false;
-      }
-      if (typeof initReturnValue === "function" && !plugin.destroy) {
-        plugin.destroy = initReturnValue;
-      }
+    const { init } = plugin;
+    if (!init) {
+      return true;
+    }
+    const initReturnValue = init(kitchenContext, { plugin });
+    if (initReturnValue === false) {
+      return false;
+    }
+    if (typeof initReturnValue === "function" && !plugin.destroy) {
+      plugin.destroy = initReturnValue;
     }
     return true;
   };
-  const pushPlugin = (plugin) => {
-    addPlugin(plugin, { position: "end" });
+  const pushPlugin = (...args) => {
+    for (const arg of args) {
+      addPlugin(arg);
+    }
+    updateActivePlugins();
   };
-  const unshiftPlugin = (plugin) => {
-    addPlugin(plugin, { position: "start" });
+  const updateActivePlugins = () => {
+    // construct activePlugins and hooks according
+    // to the one present in candidates and their effects
+    // 1. active plugins is an empty array
+    // 2. all active effects are cleaned-up
+    // 3. all effects are re-activated if still relevant
+    // 4. hooks are precomputed according to plugin order
+
+    // 1.
+    activePlugins.length = 0;
+    // 2.
+    for (const { cleanup } of activeEffectSet) {
+      cleanup();
+    }
+    activeEffectSet.clear();
+    for (const pluginCandidate of pluginCandidates) {
+      const effect = pluginCandidate.effect;
+      if (!effect) {
+        activePlugins.push(pluginCandidate);
+        continue;
+      }
+    }
+    // 3.
+    for (const pluginCandidate of pluginCandidates) {
+      const effect = pluginCandidate.effect;
+      if (!effect) {
+        continue;
+      }
+      const returnValue = effect({
+        kitchenContext,
+        otherPlugins: activePlugins,
+      });
+      if (!returnValue) {
+        continue;
+      }
+      activePlugins.push(pluginCandidate);
+      activeEffectSet.add({
+        plugin: pluginCandidate,
+        cleanup: typeof returnValue === "function" ? returnValue : () => {},
+      });
+    }
+    // 4.
+    activePlugins.sort((a, b) => {
+      return pluginCandidates.indexOf(a) - pluginCandidates.indexOf(b);
+    });
+    hookSetMap.clear();
+    for (const activePlugin of activePlugins) {
+      for (const key of Object.keys(activePlugin)) {
+        if (key === "meta") {
+          const value = activePlugin[key];
+          if (typeof value !== "object" || value === null) {
+            console.warn(`plugin.meta must be an object, got ${value}`);
+            continue;
+          }
+          Object.assign(pluginsMeta, value);
+          // any extension/modification on plugin.meta
+          // won't be taken into account so we freeze object
+          // to throw in case it happen
+          Object.freeze(value);
+          continue;
+        }
+        if (
+          key === "name" ||
+          key === "appliesDuring" ||
+          key === "init" ||
+          key === "serverEvents" ||
+          key === "mustStayFirst" ||
+          key === "effect"
+        ) {
+          continue;
+        }
+        const isHook = HOOK_NAMES.includes(key);
+        if (!isHook) {
+          console.warn(
+            `Unexpected "${key}" property on "${activePlugin.name}" plugin`,
+          );
+          continue;
+        }
+        const hookName = key;
+        const hookValue = activePlugin[hookName];
+        if (hookValue) {
+          let hookSet = hookSetMap.get(hookName);
+          if (!hookSet) {
+            hookSet = new Set();
+            hookSetMap.set(hookName, hookSet);
+          }
+          const hook = {
+            plugin: activePlugin,
+            name: hookName,
+            value: hookValue,
+          };
+          // if (position === "start") {
+          //   let i = 0;
+          //   while (i < group.length) {
+          //     const before = group[i];
+          //     if (!before.plugin.mustStayFirst) {
+          //       break;
+          //     }
+          //     i++;
+          //   }
+          //   group.splice(i, 0, hook);
+          // } else {
+          hookSet.add(hook);
+        }
+      }
+    }
   };
 
   let lastPluginUsed = null;
@@ -11950,64 +12033,66 @@ const createPluginController = (
   };
 
   const callHooks = (hookName, info, callback) => {
-    const hooks = hookGroups[hookName];
-    if (hooks) {
-      const setHookParams = (firstArg = info) => {
-        info = firstArg;
-      };
-      for (const hook of hooks) {
-        const returnValue = callHook(hook, info);
-        if (returnValue && callback) {
-          callback(returnValue, hook.plugin, setHookParams);
-        }
+    const hookSet = hookSetMap.get(hookName);
+    if (!hookSet) {
+      return;
+    }
+    const setHookParams = (firstArg = info) => {
+      info = firstArg;
+    };
+    for (const hook of hookSet) {
+      const returnValue = callHook(hook, info);
+      if (returnValue && callback) {
+        callback(returnValue, hook.plugin, setHookParams);
       }
     }
   };
   const callAsyncHooks = async (hookName, info, callback, options) => {
-    const hooks = hookGroups[hookName];
-    if (hooks) {
-      for (const hook of hooks) {
-        const returnValue = await callAsyncHook(hook, info);
-        if (returnValue && callback) {
-          await callback(returnValue, hook.plugin);
-        }
+    const hookSet = hookSetMap.get(hookName);
+    if (!hookSet) {
+      return;
+    }
+    for (const hook of hookSet) {
+      const returnValue = await callAsyncHook(hook, info);
+      if (returnValue && callback) {
+        await callback(returnValue, hook.plugin);
       }
     }
   };
 
   const callHooksUntil = (hookName, info) => {
-    const hooks = hookGroups[hookName];
-    if (hooks) {
-      for (const hook of hooks) {
-        const returnValue = callHook(hook, info);
-        if (returnValue) {
-          return returnValue;
-        }
+    const hookSet = hookSetMap.get(hookName);
+    if (!hookSet) {
+      return null;
+    }
+    for (const hook of hookSet) {
+      const returnValue = callHook(hook, info);
+      if (returnValue) {
+        return returnValue;
       }
     }
     return null;
   };
   const callAsyncHooksUntil = async (hookName, info, options) => {
-    const hooks = hookGroups[hookName];
-    if (!hooks) {
+    const hookSet = hookSetMap.get(hookName);
+    if (!hookSet) {
       return null;
     }
-    if (hooks.length === 0) {
+    if (hookSet.size === 0) {
       return null;
     }
+    const iterator = hookSet.values()[Symbol.iterator]();
     let result;
-    let index = 0;
     const visit = async () => {
-      if (index >= hooks.length) {
+      const { done, value: hook } = iterator.next();
+      if (done) {
         return;
       }
-      const hook = hooks[index];
       const returnValue = await callAsyncHook(hook, info);
       if (returnValue) {
         result = returnValue;
         return;
       }
-      index++;
       await visit();
     };
     await visit();
@@ -12016,9 +12101,8 @@ const createPluginController = (
 
   return {
     pluginsMeta,
-    plugins,
+    activePlugins,
     pushPlugin,
-    unshiftPlugin,
     getHookFunction,
     callHook,
     callAsyncHook,
@@ -12614,11 +12698,12 @@ const determineFileUrlForOutDirectory = (urlInfo) => {
   if (filenameHint) {
     url = setUrlFilename(url, filenameHint);
   }
-  return moveUrl({
+  const outUrl = moveUrl({
     url,
     from: rootDirectoryUrl,
     to: outDirectoryUrl,
   });
+  return outUrl;
 };
 
 const determineSourcemapFileUrl = (urlInfo) => {
@@ -12910,7 +12995,7 @@ const createDependencies = (ownerUrlInfo) => {
     const injectAsBannerCodeBeforeFinalize = (urlInfoReceiver) => {
       const basename = urlToBasename(sideEffectFileUrl);
       const inlineUrl = generateUrlForInlineContent({
-        url: urlInfoReceiver.url,
+        url: urlInfoReceiver.originalUrl || urlInfoReceiver.url,
         basename,
         extension: urlToExtension$1(sideEffectFileUrl),
       });
@@ -13073,6 +13158,7 @@ const createReference = ({
   specifierColumn,
   baseUrl,
   isOriginalPosition,
+  isDirectRequest = false,
   isEntryPoint = false,
   isResourceHint = false,
   // implicit references are not real references
@@ -13147,6 +13233,7 @@ const createReference = ({
     specifierColumn,
     isOriginalPosition,
     baseUrl,
+    isDirectRequest,
     isEntryPoint,
     isResourceHint,
     isImplicit,
@@ -13982,6 +14069,7 @@ const createUrlInfo = (url, context) => {
     writable: false,
     value: url,
   });
+  urlInfo.pathname = new URL(url).pathname;
   urlInfo.searchParams = new URL(url).searchParams;
 
   urlInfo.dependencies = createDependencies(urlInfo);
@@ -14570,7 +14658,15 @@ const createUrlInfoTransformer = ({
       contentIsInlined = false;
     }
     if (!contentIsInlined) {
-      writeFileSync(new URL(generatedUrl), urlInfo.content, { force: true });
+      const generatedUrlObject = new URL(generatedUrl);
+      let baseName = urlToBasename(generatedUrlObject);
+      for (const [key, value] of generatedUrlObject.searchParams) {
+        baseName += `7${encodeFilePathComponent(key)}=${encodeFilePathComponent(value)}`;
+      }
+      const outFileUrl = setUrlBasename(generatedUrlObject, baseName);
+      let outFilePath = urlToFileSystemPath(outFileUrl);
+      outFilePath = truncate(outFilePath, 2055); // for windows
+      writeFileSync(outFilePath, urlInfo.content, { force: true });
     }
     const { sourcemapGeneratedUrl, sourcemapReference } = urlInfo;
     if (sourcemapGeneratedUrl && sourcemapReference) {
@@ -14689,6 +14785,26 @@ const createUrlInfoTransformer = ({
   };
 };
 
+// https://gist.github.com/barbietunnie/7bc6d48a424446c44ff4
+const illegalRe = /[/?<>\\:*|"]/g;
+// eslint-disable-next-line no-control-regex
+const controlRe = /[\x00-\x1f\x80-\x9f]/g;
+const reservedRe = /^\.+$/;
+const windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i;
+const encodeFilePathComponent = (input, replacement = "") => {
+  const encoded = input
+    .replace(illegalRe, replacement)
+    .replace(controlRe, replacement)
+    .replace(reservedRe, replacement)
+    .replace(windowsReservedRe, replacement);
+  return encoded;
+};
+const truncate = (sanitized, length) => {
+  const uint8Array = new TextEncoder().encode(sanitized);
+  const truncated = uint8Array.slice(0, length);
+  return new TextDecoder().decode(truncated);
+};
+
 const shouldUpdateSourcemapComment = (urlInfo, sourcemaps) => {
   if (urlInfo.context.buildStep === "shape") {
     return false;
@@ -14698,7 +14814,6 @@ const shouldUpdateSourcemapComment = (urlInfo, sourcemaps) => {
   }
   return false;
 };
-
 const mayHaveSourcemap = (urlInfo) => {
   if (urlInfo.url.startsWith("data:")) {
     return false;
@@ -14708,7 +14823,6 @@ const mayHaveSourcemap = (urlInfo) => {
   }
   return true;
 };
-
 const shouldHandleSourcemap = (urlInfo) => {
   const { sourcemaps } = urlInfo.context;
   if (
@@ -14792,10 +14906,7 @@ const createKitchen = ({
     initialPluginsMeta,
   );
   kitchen.pluginController = pluginController;
-  pluginController.pushPlugin(jsenvPluginHtmlSyntaxErrorFallback());
-  plugins.forEach((pluginEntry) => {
-    pluginController.pushPlugin(pluginEntry);
-  });
+  pluginController.pushPlugin(jsenvPluginHtmlSyntaxErrorFallback(), ...plugins);
 
   const urlInfoTransformer = createUrlInfoTransformer({
     logger,
@@ -14901,6 +15012,25 @@ ${ANSI.color(reference.url, ANSI.YELLOW)}
 `);
         }
       }
+      const request = kitchen.context.request;
+      if (request) {
+        let requestResource = request.resource;
+        let requestedUrl;
+        if (requestResource.startsWith("/@fs/")) {
+          const fsRootRelativeUrl = requestResource.slice("/@fs/".length);
+          requestedUrl = `file:///${fsRootRelativeUrl}`;
+        } else {
+          const requestedUrlObject = new URL(
+            requestResource === "/" ? mainFilePath : requestResource.slice(1),
+            rootDirectoryUrl,
+          );
+          requestedUrlObject.searchParams.delete("hot");
+          requestedUrl = requestedUrlObject.href;
+        }
+        if (requestedUrl === reference.url) {
+          reference.isDirectRequest = true;
+        }
+      }
       redirect: {
         if (reference.isImplicit && reference.isWeak) {
           // not needed for implicit references that are not rendered anywhere
@@ -15808,10 +15938,11 @@ const jsenvPluginInliningIntoHtml = () => {
           const { line, column, isOriginal } = getHtmlNodePosition(linkNode, {
             preferOriginal: true,
           });
-          const linkInlineUrl = getUrlForContentInsideHtml(linkNode, {
-            htmlUrl: urlInfo.url,
-            url: linkReference.url,
-          });
+          const linkInlineUrl = getUrlForContentInsideHtml(
+            linkNode,
+            urlInfo,
+            linkReference,
+          );
           const linkReferenceInlined = linkReference.inline({
             line,
             column,
@@ -15860,10 +15991,11 @@ const jsenvPluginInliningIntoHtml = () => {
           const { line, column, isOriginal } = getHtmlNodePosition(scriptNode, {
             preferOriginal: true,
           });
-          const scriptInlineUrl = getUrlForContentInsideHtml(scriptNode, {
-            htmlUrl: urlInfo.url,
-            url: scriptReference.url,
-          });
+          const scriptInlineUrl = getUrlForContentInsideHtml(
+            scriptNode,
+            urlInfo,
+            scriptReference,
+          );
           const scriptReferenceInlined = scriptReference.inline({
             line,
             column,
@@ -17052,9 +17184,11 @@ const jsenvPluginHtmlReferenceAnalysis = ({
             const { line, column, isOriginal } = getHtmlNodePosition(node, {
               preferOriginal: true,
             });
-            const inlineContentUrl = getUrlForContentInsideHtml(node, {
-              htmlUrl: urlInfo.url,
-            });
+            const inlineContentUrl = getUrlForContentInsideHtml(
+              node,
+              urlInfo,
+              null,
+            );
             const debug =
               getHtmlNodeAttribute(node, "jsenv-debug") !== undefined;
             const inlineReference = urlInfo.dependencies.foundInline({
@@ -17195,9 +17329,8 @@ const jsenvPluginHtmlReferenceAnalysis = ({
                   );
                   const importmapInlineUrl = getUrlForContentInsideHtml(
                     scriptNode,
-                    {
-                      htmlUrl: urlInfo.url,
-                    },
+                    urlInfo,
+                    importmapReference,
                   );
                   const importmapReferenceInlined = importmapReference.inline({
                     line,
@@ -17481,9 +17614,7 @@ const parseAndTransformJsReferences = async (
     Object.keys(urlInfo.context.runtimeCompat).toString() === "node";
 
   const onInlineReference = (inlineReferenceInfo) => {
-    const inlineUrl = getUrlForContentInsideJs(inlineReferenceInfo, {
-      url: urlInfo.url,
-    });
+    const inlineUrl = getUrlForContentInsideJs(inlineReferenceInfo, urlInfo);
     let { quote } = inlineReferenceInfo;
     if (quote === "`" && !canUseTemplateLiterals) {
       // if quote is "`" and template literals are not supported
@@ -17726,23 +17857,7 @@ const jsenvPluginInlineContentFetcher = () => {
       if (!urlInfo.isInline) {
         return null;
       }
-      let isDirectRequestToFile;
-      if (urlInfo.context.request) {
-        let requestResource = urlInfo.context.request.resource;
-        let requestedUrl;
-        if (requestResource.startsWith("/@fs/")) {
-          const fsRootRelativeUrl = requestResource.slice("/@fs/".length);
-          requestedUrl = `file:///${fsRootRelativeUrl}`;
-        } else {
-          const requestedUrlObject = new URL(
-            requestResource.slice(1),
-            urlInfo.context.rootDirectoryUrl,
-          );
-          requestedUrlObject.searchParams.delete("hot");
-          requestedUrl = requestedUrlObject.href;
-        }
-        isDirectRequestToFile = requestedUrl === urlInfo.url;
-      }
+      const { isDirectRequest } = urlInfo.lastReference;
       /*
        * We want to find inline content but it's not straightforward
        *
@@ -17771,7 +17886,7 @@ const jsenvPluginInlineContentFetcher = () => {
           originalContent = reference.content;
         }
         lastInlineReference = reference;
-        if (isDirectRequestToFile) {
+        if (isDirectRequest) {
           break;
         }
       }
@@ -19184,71 +19299,581 @@ const jsenvPluginVersionSearchParam = () => {
   };
 };
 
-const jsenvPluginFsRedirection = ({
-  directoryContentMagicName,
-  magicExtensions = ["inherit", ".js"],
-  magicDirectoryIndex = true,
-  preserveSymlinks = false,
-}) => {
+const FILE_AND_SERVER_URLS_CONVERTER = {
+  asServerUrl: (fileUrl, serverRootDirectoryUrl) => {
+    if (fileUrl === serverRootDirectoryUrl) {
+      return "/";
+    }
+    if (urlIsInsideOf(fileUrl, serverRootDirectoryUrl)) {
+      const urlRelativeToServer = urlToRelativeUrl(
+        fileUrl,
+        serverRootDirectoryUrl,
+      );
+      return `/${urlRelativeToServer}`;
+    }
+    const urlRelativeToFilesystemRoot = String(fileUrl).slice(
+      "file:///".length,
+    );
+    return `/@fs/${urlRelativeToFilesystemRoot}`;
+  },
+  asFileUrl: (urlRelativeToServer, serverRootDirectoryUrl) => {
+    if (urlRelativeToServer.startsWith("/@fs/")) {
+      const urlRelativeToFilesystemRoot = urlRelativeToServer.slice(
+        "/@fs/".length,
+      );
+      return `file:///${urlRelativeToFilesystemRoot}`;
+    }
+    if (urlRelativeToServer[0] === "/") {
+      return new URL(urlRelativeToServer.slice(1), serverRootDirectoryUrl).href;
+    }
+    return new URL(urlRelativeToServer, serverRootDirectoryUrl).href;
+  },
+};
+
+const jsenvPluginInjections = (rawAssociations) => {
+  let resolvedAssociations;
+
   return {
-    name: "jsenv:fs_redirection",
+    name: "jsenv:injections",
     appliesDuring: "*",
-    redirectReference: (reference) => {
-      // http, https, data, about, ...
-      if (!reference.url.startsWith("file:")) {
-        return null;
-      }
-      if (reference.isInline) {
+    init: (context) => {
+      resolvedAssociations = URL_META.resolveAssociations(
+        { injectionsGetter: rawAssociations },
+        context.rootDirectoryUrl,
+      );
+    },
+    transformUrlContent: async (urlInfo) => {
+      const { injectionsGetter } = URL_META.applyAssociations({
+        url: asUrlWithoutSearch(urlInfo.url),
+        associations: resolvedAssociations,
+      });
+      if (!injectionsGetter) {
         return null;
       }
-      if (reference.url === "file:///" || reference.url === "file://") {
-        return `ignore:file:///`;
+      if (typeof injectionsGetter !== "function") {
+        throw new TypeError("injectionsGetter must be a function");
       }
-      // ignore all new URL second arg
-      if (reference.subtype === "new_url_second_arg") {
-        return `ignore:${reference.url}`;
+      const injections = await injectionsGetter(urlInfo);
+      if (!injections) {
+        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;
+      const keys = Object.keys(injections);
+      if (keys.length === 0) {
+        return null;
       }
-      // 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 = "";
-      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) {
+      return replacePlaceholders(urlInfo.content, injections, urlInfo);
+    },
+  };
+};
+
+const injectionSymbol = Symbol.for("jsenv_injection");
+const INJECTIONS = {
+  optional: (value) => {
+    return { [injectionSymbol]: "optional", value };
+  },
+};
+
+// we export this because it is imported by jsenv_plugin_placeholder.js and unit test
+const replacePlaceholders = (content, replacements, urlInfo) => {
+  const magicSource = createMagicSource(content);
+  for (const key of Object.keys(replacements)) {
+    let index = content.indexOf(key);
+    const replacement = replacements[key];
+    let isOptional;
+    let value;
+    if (replacement && replacement[injectionSymbol]) {
+      const valueBehindSymbol = replacement[injectionSymbol];
+      isOptional = valueBehindSymbol === "optional";
+      value = replacement.value;
+    } else {
+      value = replacement;
+    }
+    if (index === -1) {
+      if (!isOptional) {
+        urlInfo.context.logger.warn(
+          `placeholder "${key}" not found in ${urlInfo.url}.
+--- suggestion a ---
+Add "${key}" in that file.
+--- suggestion b ---
+Fix eventual typo in "${key}"?
+--- suggestion c ---
+Mark injection as optional using INJECTIONS.optional():
+import { INJECTIONS } from "@jsenv/core";
+
+return {
+  "${key}": INJECTIONS.optional(${JSON.stringify(value)}),
+};`,
+        );
+      }
+      continue;
+    }
+
+    while (index !== -1) {
+      const start = index;
+      const end = index + key.length;
+      magicSource.replace({
+        start,
+        end,
+        replacement:
+          urlInfo.type === "js_classic" ||
+          urlInfo.type === "js_module" ||
+          urlInfo.type === "html"
+            ? JSON.stringify(value, null, "  ")
+            : value,
+      });
+      index = content.indexOf(key, end);
+    }
+  }
+  return magicSource.toContentAndSourcemap();
+};
+
+/*
+ * NICE TO HAVE:
+ * 
+ * - when visiting urls outside server root directory the UI is messed up
+ * 
+ * Let's say I visit file outside the server root directory that is in 404
+ * We must update the enoent message and maybe other things to take into account
+ * that url is no longer /something but "@fs/project_root/something" in the browser url bar
+ * 
+ * - watching directory might result into things that are not properly handled:
+ * 1. the existing directory is deleted
+ *    -> we should update the whole page to use a new "firstExistingDirectoryUrl"
+ * 2. the enoent is impacted
+ *    -> we should update the ENOENT message
+ * It means the websocket should contain more data and we can't assume firstExistingDirectoryUrl won't change
+ *
+
+ */
+
+
+const htmlFileUrlForDirectory = new URL(
+  "./html/directory_listing.html",
+  import.meta.url,
+);
+
+const jsenvPluginDirectoryListing = ({
+  directoryContentMagicName,
+  directoryListingUrlMocks,
+  autoreload = true,
+}) => {
+  return {
+    name: "jsenv:directory_listing",
+    appliesDuring: "dev",
+    redirectReference: (reference) => {
+      if (reference.isInline) {
+        return null;
+      }
+      const url = reference.url;
+      if (!url.startsWith("file:")) {
+        return null;
+      }
+      let { fsStat } = reference;
+      if (!fsStat) {
+        fsStat = readEntryStatSync(url, { nullIfNotFound: true });
+        reference.fsStat = fsStat;
+      }
+      const { request } = reference.ownerUrlInfo.context;
+      if (!fsStat) {
+        if (
+          reference.isDirectRequest &&
+          request &&
+          request.headers["sec-fetch-dest"] === "document"
+        ) {
+          return `${htmlFileUrlForDirectory}?url=${encodeURIComponent(url)}&enoent`;
+        }
+        return null;
+      }
+      const isDirectory = fsStat?.isDirectory();
+      if (!isDirectory) {
+        return null;
+      }
+      if (reference.type === "filesystem") {
+        // TODO: we should redirect to something like /...json
+        // and any file name ...json is a special file serving directory content as json
+        return null;
+      }
+      const acceptsHtml = request
+        ? pickContentType(request, ["text/html"])
+        : false;
+      if (!acceptsHtml) {
+        return null;
+      }
+      reference.fsStat = null; // reset fsStat, now it's not a directory anyor
+      return `${htmlFileUrlForDirectory}?url=${encodeURIComponent(url)}`;
+    },
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const urlWithoutSearch = asUrlWithoutSearch(urlInfo.url);
+        if (urlWithoutSearch !== String(htmlFileUrlForDirectory)) {
+          return null;
+        }
+        const requestedUrl = urlInfo.searchParams.get("url");
+        if (!requestedUrl) {
+          return null;
+        }
+        urlInfo.headers["cache-control"] = "no-cache";
+        const enoent = urlInfo.searchParams.has("enoent");
+        if (enoent) {
+          urlInfo.status = 404;
+          urlInfo.headers["cache-control"] = "no-cache";
+        }
+        const request = urlInfo.context.request;
+        const { rootDirectoryUrl, mainFilePath } = urlInfo.context;
+        return replacePlaceholders(
+          urlInfo.content,
+          {
+            ...generateDirectoryListingInjection(requestedUrl, {
+              autoreload,
+              request,
+              directoryListingUrlMocks,
+              directoryContentMagicName,
+              rootDirectoryUrl,
+              mainFilePath,
+              enoent,
+            }),
+          },
+          urlInfo,
+        );
+      },
+    },
+    serveWebsocket: ({ websocket, request, context }) => {
+      if (!autoreload) {
+        return false;
+      }
+      const secProtocol = request.headers["sec-websocket-protocol"];
+      if (secProtocol !== "watch-directory") {
+        return false;
+      }
+      const { rootDirectoryUrl, mainFilePath } = context;
+      const requestedUrl = FILE_AND_SERVER_URLS_CONVERTER.asFileUrl(
+        request.pathname,
+        rootDirectoryUrl,
+      );
+      const closestDirectoryUrl = getFirstExistingDirectoryUrl(requestedUrl);
+      const sendMessage = (message) => {
+        websocket.send(JSON.stringify(message));
+      };
+      const generateItems = () => {
+        const firstExistingDirectoryUrl = getFirstExistingDirectoryUrl(
+          requestedUrl,
+          rootDirectoryUrl,
+        );
+        const items = getDirectoryContentItems({
+          serverRootDirectoryUrl: rootDirectoryUrl,
+          mainFilePath,
+          requestedUrl,
+          firstExistingDirectoryUrl,
+        });
+        return items;
+      };
+
+      const unwatch = registerDirectoryLifecycle(closestDirectoryUrl, {
+        added: ({ relativeUrl }) => {
+          sendMessage({
+            type: "change",
+            reason: `${relativeUrl} added`,
+            items: generateItems(),
+          });
+        },
+        updated: ({ relativeUrl }) => {
+          sendMessage({
+            type: "change",
+            reason: `${relativeUrl} updated`,
+            items: generateItems(),
+          });
+        },
+        removed: ({ relativeUrl }) => {
+          sendMessage({
+            type: "change",
+            reason: `${relativeUrl} removed`,
+            items: generateItems(),
+          });
+        },
+      });
+      websocket.signal.addEventListener("abort", () => {
+        unwatch();
+      });
+      return true;
+    },
+  };
+};
+
+const generateDirectoryListingInjection = (
+  requestedUrl,
+  {
+    rootDirectoryUrl,
+    mainFilePath,
+    request,
+    directoryListingUrlMocks,
+    directoryContentMagicName,
+    autoreload,
+    enoent,
+  },
+) => {
+  let serverRootDirectoryUrl = rootDirectoryUrl;
+  const firstExistingDirectoryUrl = getFirstExistingDirectoryUrl(
+    requestedUrl,
+    serverRootDirectoryUrl,
+  );
+  const directoryContentItems = getDirectoryContentItems({
+    serverRootDirectoryUrl,
+    mainFilePath,
+    requestedUrl,
+    firstExistingDirectoryUrl,
+  });
+  package_workspaces: {
+    const packageDirectoryUrl = lookupPackageDirectory(serverRootDirectoryUrl);
+    if (!packageDirectoryUrl) {
+      break package_workspaces;
+    }
+    if (String(packageDirectoryUrl) === String(serverRootDirectoryUrl)) {
+      break package_workspaces;
+    }
+    rootDirectoryUrl = packageDirectoryUrl;
+    // if (String(firstExistingDirectoryUrl) === String(serverRootDirectoryUrl)) {
+    //   let packageContent;
+    //   try {
+    //     packageContent = JSON.parse(
+    //       readFileSync(new URL("package.json", packageDirectoryUrl), "utf8"),
+    //     );
+    //   } catch {
+    //     break package_workspaces;
+    //   }
+    //   const { workspaces } = packageContent;
+    //   if (Array.isArray(workspaces)) {
+    //     for (const workspace of workspaces) {
+    //       const workspaceUrlObject = new URL(workspace, packageDirectoryUrl);
+    //       const workspaceUrl = workspaceUrlObject.href;
+    //       if (workspaceUrl.endsWith("*")) {
+    //         const directoryUrl = ensurePathnameTrailingSlash(
+    //           workspaceUrl.slice(0, -1),
+    //         );
+    //         fileUrls.push(new URL(directoryUrl));
+    //       } else {
+    //         fileUrls.push(ensurePathnameTrailingSlash(workspaceUrlObject));
+    //       }
+    //     }
+    //   }
+    // }
+  }
+  const directoryUrlRelativeToServer =
+    FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(
+      firstExistingDirectoryUrl,
+      serverRootDirectoryUrl,
+    );
+  const websocketScheme = request.protocol === "https" ? "wss" : "ws";
+  const { host } = new URL(request.url);
+  const websocketUrl = `${websocketScheme}://${host}${directoryUrlRelativeToServer}`;
+
+  const navItems = [];
+  {
+    const lastItemUrl = firstExistingDirectoryUrl;
+    const lastItemRelativeUrl = urlToRelativeUrl(lastItemUrl, rootDirectoryUrl);
+    const rootDirectoryUrlName = urlToFilename$1(rootDirectoryUrl);
+    let parts;
+    if (lastItemRelativeUrl) {
+      parts = `${rootDirectoryUrlName}/${lastItemRelativeUrl}`.split("/");
+    } else {
+      parts = [rootDirectoryUrlName];
+    }
+
+    let i = 0;
+    while (i < parts.length) {
+      const part = parts[i];
+      const isLastPart = i === parts.length - 1;
+      if (isLastPart && part === "") {
+        // ignore trailing slash
+        break;
+      }
+      let navItemRelativeUrl = `${parts.slice(1, i + 1).join("/")}`;
+      let navItemUrl =
+        navItemRelativeUrl === ""
+          ? rootDirectoryUrl
+          : new URL(navItemRelativeUrl, rootDirectoryUrl).href;
+      if (!isLastPart) {
+        navItemUrl = ensurePathnameTrailingSlash(navItemUrl);
+      }
+      let urlRelativeToServer = FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(
+        navItemUrl,
+        serverRootDirectoryUrl,
+      );
+      let urlRelativeToDocument = urlToRelativeUrl(navItemUrl, requestedUrl);
+      const isServerRootDirectory = navItemUrl === serverRootDirectoryUrl;
+      if (isServerRootDirectory) {
+        urlRelativeToServer = `/${directoryContentMagicName}`;
+        urlRelativeToDocument = `/${directoryContentMagicName}`;
+      }
+      const name = part;
+      const isCurrent = navItemUrl === String(firstExistingDirectoryUrl);
+      navItems.push({
+        url: navItemUrl,
+        urlRelativeToServer,
+        urlRelativeToDocument,
+        isServerRootDirectory,
+        isCurrent,
+        name,
+      });
+      i++;
+    }
+  }
+
+  let enoentDetails = null;
+  if (enoent) {
+    const fileRelativeUrl = urlToRelativeUrl(
+      requestedUrl,
+      serverRootDirectoryUrl,
+    );
+    let filePathExisting;
+    let filePathNotFound;
+    const existingIndex = String(firstExistingDirectoryUrl).length;
+    filePathExisting = urlToRelativeUrl(
+      firstExistingDirectoryUrl,
+      serverRootDirectoryUrl,
+    );
+    filePathNotFound = requestedUrl.slice(existingIndex);
+    enoentDetails = {
+      fileUrl: requestedUrl,
+      fileRelativeUrl,
+      filePathExisting: `/${filePathExisting}`,
+      filePathNotFound,
+    };
+  }
+
+  return {
+    __DIRECTORY_LISTING__: {
+      enoentDetails,
+      navItems,
+      directoryListingUrlMocks,
+      directoryContentMagicName,
+      directoryUrl: firstExistingDirectoryUrl,
+      serverRootDirectoryUrl,
+      rootDirectoryUrl,
+      mainFilePath,
+      directoryContentItems,
+      websocketUrl,
+      autoreload,
+    },
+  };
+};
+const getFirstExistingDirectoryUrl = (requestedUrl, serverRootDirectoryUrl) => {
+  let firstExistingDirectoryUrl = new URL("./", requestedUrl);
+  while (!existsSync(firstExistingDirectoryUrl)) {
+    firstExistingDirectoryUrl = new URL("../", firstExistingDirectoryUrl);
+    if (!urlIsInsideOf(firstExistingDirectoryUrl, serverRootDirectoryUrl)) {
+      firstExistingDirectoryUrl = new URL(serverRootDirectoryUrl);
+      break;
+    }
+  }
+  return firstExistingDirectoryUrl;
+};
+const getDirectoryContentItems = ({
+  serverRootDirectoryUrl,
+  mainFilePath,
+  firstExistingDirectoryUrl,
+}) => {
+  const directoryContentArray = readdirSync(new URL(firstExistingDirectoryUrl));
+  const fileUrls = [];
+  for (const filename of directoryContentArray) {
+    const fileUrlObject = new URL(filename, firstExistingDirectoryUrl);
+    if (lstatSync(fileUrlObject).isDirectory()) {
+      fileUrls.push(ensurePathnameTrailingSlash(fileUrlObject));
+    } else {
+      fileUrls.push(fileUrlObject);
+    }
+  }
+  fileUrls.sort((a, b) => {
+    return comparePathnames(a.pathname, b.pathname);
+  });
+  const items = [];
+  for (const fileUrl of fileUrls) {
+    const urlRelativeToCurrentDirectory = urlToRelativeUrl(
+      fileUrl,
+      firstExistingDirectoryUrl,
+    );
+    const urlRelativeToServer = FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(
+      fileUrl,
+      serverRootDirectoryUrl,
+    );
+    const url = String(fileUrl);
+    const mainFileUrl = new URL(mainFilePath, serverRootDirectoryUrl).href;
+    const isMainFile = url === mainFileUrl;
+
+    items.push({
+      url,
+      urlRelativeToCurrentDirectory,
+      urlRelativeToServer,
+      isMainFile,
+    });
+  }
+  return items;
+};
+
+const jsenvPluginFsRedirection = ({
+  directoryContentMagicName,
+  magicExtensions = ["inherit", ".js"],
+  magicDirectoryIndex = true,
+  preserveSymlinks = false,
+}) => {
+  return {
+    name: "jsenv:fs_redirection",
+    appliesDuring: "*",
+    redirectReference: (reference) => {
+      // http, https, data, about, ...
+      if (!reference.url.startsWith("file:")) {
+        return null;
+      }
+      if (reference.isInline) {
+        return null;
+      }
+      if (reference.url === "file:///" || reference.url === "file://") {
+        return `ignore:file:///`;
+      }
+      // ignore all new URL second arg
+      if (reference.subtype === "new_url_second_arg") {
+        return `ignore:${reference.url}`;
+      }
+      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 = "";
+      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;
@@ -19318,17 +19943,10 @@ const resolveSymlink = (fileUrl) => {
   return realUrlObject.href;
 };
 
-const html404AndAncestorDirFileUrl = new URL(
-  "./html/html_404_and_ancestor_dir.html",
-  import.meta.url,
-);
-const htmlFileUrlForDirectory = new URL(
-  "./html/directory.html",
-  import.meta.url,
-);
 const directoryContentMagicName = "...";
 
 const jsenvPluginProtocolFile = ({
+  supervisorEnabled,
   magicExtensions,
   magicDirectoryIndex,
   preserveSymlinks,
@@ -19363,8 +19981,7 @@ const jsenvPluginProtocolFile = ({
       appliesDuring: "dev",
       resolveReference: (reference) => {
         if (reference.specifier.startsWith("/@fs/")) {
-          const fsRootRelativeUrl = reference.specifier.slice("/@fs/".length);
-          return `file:///${fsRootRelativeUrl}`;
+          return FILE_AND_SERVER_URLS_CONVERTER.asFileUrl(reference.specifier);
         }
         return null;
       },
@@ -19383,382 +20000,71 @@ const jsenvPluginProtocolFile = ({
           }
         }
         const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
-        if (urlIsInsideOf(generatedUrl, rootDirectoryUrl)) {
-          const result = `/${urlToRelativeUrl(generatedUrl, rootDirectoryUrl)}`;
-          return result;
-        }
-        const result = `/@fs/${generatedUrl.slice("file:///".length)}`;
-        return result;
+        return FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(
+          generatedUrl,
+          rootDirectoryUrl,
+        );
       },
     },
+    jsenvPluginDirectoryListing({
+      supervisorEnabled,
+      directoryContentMagicName,
+      directoryListingUrlMocks,
+    }),
     {
-      name: "jsenv:file_url_fetching",
+      name: "jsenv:directory_as_json",
       appliesDuring: "*",
       fetchUrlContent: (urlInfo) => {
-        if (!urlInfo.url.startsWith("file:")) {
-          return null;
-        }
         const { firstReference } = urlInfo;
-        const { mainFilePath } = urlInfo.context;
         let { fsStat } = firstReference;
         if (!fsStat) {
           fsStat = readEntryStatSync(urlInfo.url, { nullIfNotFound: true });
         }
-        const isDirectory = fsStat?.isDirectory();
-        const { rootDirectoryUrl, request } = urlInfo.context;
-        const serveFile = (url) => {
-          const contentType = CONTENT_TYPE.fromUrlExtension(url);
-          const fileBuffer = readFileSync(new URL(url));
-          const content = CONTENT_TYPE.isTextual(contentType)
-            ? String(fileBuffer)
-            : fileBuffer;
-          return {
-            content,
-            contentType,
-            contentLength: fileBuffer.length,
-          };
-        };
-
         if (!fsStat) {
-          if (request && request.headers["sec-fetch-dest"] === "document") {
-            const directoryContentItems = generateDirectoryContentItems(
-              urlInfo.url,
-              rootDirectoryUrl,
-            );
-            const html = generateHtmlForENOENT(
-              urlInfo.url,
-              directoryContentItems,
-              directoryListingUrlMocks,
-              { mainFilePath },
-            );
-            return {
-              status: 404,
-              contentType: "text/html",
-              content: html,
-              headers: {
-                "cache-control": "no-cache",
-              },
-            };
-          }
+          return null;
         }
-        if (isDirectory) {
-          const directoryContentArray = readdirSync(new URL(urlInfo.url));
-          if (firstReference.type === "filesystem") {
-            const content = JSON.stringify(directoryContentArray, null, "  ");
-            return {
-              type: "directory",
-              contentType: "application/json",
-              content,
-            };
-          }
-          const acceptsHtml = request
-            ? pickContentType(request, ["text/html"])
-            : false;
-          if (acceptsHtml) {
-            firstReference.expectedType = "html";
-            const directoryUrl = urlInfo.url;
-            const directoryContentItems = generateDirectoryContentItems(
-              directoryUrl,
-              rootDirectoryUrl,
-            );
-            const html = generateHtmlForDirectory(directoryContentItems, {
-              mainFilePath,
-            });
-            return {
-              type: "html",
-              contentType: "text/html",
-              content: html,
-            };
-          }
-          return {
-            type: "directory",
-            contentType: "application/json",
-            content: JSON.stringify(directoryContentArray, null, "  "),
-          };
+        const isDirectory = fsStat.isDirectory();
+        if (!isDirectory) {
+          return null;
         }
-        return serveFile(urlInfo.url);
+        const directoryContentArray = readdirSync(new URL(urlInfo.url));
+        const content = JSON.stringify(directoryContentArray, null, "  ");
+        return {
+          type: "directory",
+          contentType: "application/json",
+          content,
+        };
       },
     },
-  ];
-};
-
-const generateHtmlForDirectory = (directoryContentItems, { mainFilePath }) => {
-  let directoryUrl = directoryContentItems.firstExistingDirectoryUrl;
-  const rootDirectoryUrl = directoryContentItems.rootDirectoryUrl;
-  directoryUrl = assertAndNormalizeDirectoryUrl(directoryUrl);
-
-  const htmlForDirectory = String(readFileSync(htmlFileUrlForDirectory));
-  const replacers = {
-    directoryUrl,
-    directoryNav: () =>
-      generateDirectoryNav(directoryUrl, {
-        rootDirectoryUrl,
-        rootDirectoryUrlForServer:
-          directoryContentItems.rootDirectoryUrlForServer,
-        mainFilePath,
-      }),
-    directoryContent: () =>
-      generateDirectoryContent(directoryContentItems, { mainFilePath }),
-  };
-  const html = replacePlaceholders$1(htmlForDirectory, replacers);
-  return html;
-};
-const generateHtmlForENOENT = (
-  url,
-  directoryContentItems,
-  directoryListingUrlMocks,
-  { mainFilePath },
-) => {
-  const ancestorDirectoryUrl = directoryContentItems.firstExistingDirectoryUrl;
-  const rootDirectoryUrl = directoryContentItems.rootDirectoryUrl;
-
-  const htmlFor404AndAncestorDir = String(
-    readFileSync(html404AndAncestorDirFileUrl),
-  );
-  const fileRelativeUrl = urlToRelativeUrl(url, rootDirectoryUrl);
-  const ancestorDirectoryRelativeUrl = urlToRelativeUrl(
-    ancestorDirectoryUrl,
-    rootDirectoryUrl,
-  );
-  const replacers = {
-    fileUrl: directoryListingUrlMocks
-      ? `@jsenv/core/${urlToRelativeUrl(url, jsenvCoreDirectoryUrl)}`
-      : url,
-    fileRelativeUrl,
-    ancestorDirectoryUrl,
-    ancestorDirectoryRelativeUrl,
-    ancestorDirectoryNav: () =>
-      generateDirectoryNav(ancestorDirectoryUrl, {
-        rootDirectoryUrl,
-        rootDirectoryUrlForServer:
-          directoryContentItems.rootDirectoryUrlForServer,
-        mainFilePath,
-      }),
-    ancestorDirectoryContent: () =>
-      generateDirectoryContent(directoryContentItems, { mainFilePath }),
-  };
-  const html = replacePlaceholders$1(htmlFor404AndAncestorDir, replacers);
-  return html;
-};
-const generateDirectoryNav = (
-  entryDirectoryUrl,
-  { rootDirectoryUrl, rootDirectoryUrlForServer, mainFilePath },
-) => {
-  const entryDirectoryRelativeUrl = urlToRelativeUrl(
-    entryDirectoryUrl,
-    rootDirectoryUrl,
-  );
-  const isDir =
-    entryDirectoryRelativeUrl === "" || entryDirectoryRelativeUrl.endsWith("/");
-  const rootDirectoryUrlName = urlToFilename$1(rootDirectoryUrl);
-  const items = [];
-  let dirPartsHtml = "";
-  const parts = entryDirectoryRelativeUrl
-    ? `${rootDirectoryUrlName}/${entryDirectoryRelativeUrl.slice(0, -1)}`.split(
-        "/",
-      )
-    : [rootDirectoryUrlName];
-  let i = 0;
-  while (i < parts.length) {
-    const part = parts[i];
-    const directoryRelativeUrl = `${parts.slice(1, i + 1).join("/")}`;
-    const directoryUrl =
-      directoryRelativeUrl === ""
-        ? rootDirectoryUrl
-        : new URL(`${directoryRelativeUrl}/`, rootDirectoryUrl).href;
-    let href =
-      directoryUrl === rootDirectoryUrlForServer ||
-      urlIsInsideOf(directoryUrl, rootDirectoryUrlForServer)
-        ? urlToRelativeUrl(directoryUrl, rootDirectoryUrlForServer)
-        : directoryUrl;
-    if (href === "") {
-      href = `/${directoryContentMagicName}`;
-    } else {
-      href = `/${href}`;
-    }
-    const text = part;
-    items.push({
-      href,
-      text,
-    });
-    i++;
-  }
-  i = 0;
-
-  const renderDirNavItem = ({ isCurrent, href, text }) => {
-    const isServerRootDir = href === `/${directoryContentMagicName}`;
-    if (isServerRootDir) {
-      if (isCurrent) {
-        return `
-        <span class="directory_nav_item" data-current>
-          <a class="directory_root_for_server" hot-decline href="/${mainFilePath}"></a>
-          <span class="directory_name">${text}</span>
-        </span>`;
-      }
-      return `
-        <span class="directory_nav_item">
-          <a class="directory_root_for_server" hot-decline href="/${mainFilePath}"></a>
-          <a class="directory_name" hot-decline href="${href}">${text}</a>
-        </span>`;
-    }
-    if (isCurrent) {
-      return `
-      <span class="directory_nav_item" data-current>
-        <span class="directory_text">${text}</span>
-      </span>`;
-    }
-    return `
-      <span class="directory_nav_item">
-        <a class="directory_text" hot-decline href="${href}">${text}</a>
-      </span>`;
-  };
-
-  for (const { href, text } of items) {
-    const isLastPart = i === items.length - 1;
-    dirPartsHtml += renderDirNavItem({
-      isCurrent: isLastPart,
-      href,
-      text,
-    });
-    if (isLastPart) {
-      break;
-    }
-    dirPartsHtml += `
-      <span class="directory_separator">/</span>`;
-    i++;
-  }
-  if (isDir) {
-    dirPartsHtml += `
-      <span class="directory_separator">/</span>`;
-  }
-  return dirPartsHtml;
-};
-const generateDirectoryContentItems = (
-  directoryUrl,
-  rootDirectoryUrlForServer,
-) => {
-  let firstExistingDirectoryUrl = new URL("./", directoryUrl);
-  while (!existsSync(firstExistingDirectoryUrl)) {
-    firstExistingDirectoryUrl = new URL("../", firstExistingDirectoryUrl);
-    if (!urlIsInsideOf(firstExistingDirectoryUrl, rootDirectoryUrlForServer)) {
-      firstExistingDirectoryUrl = new URL(rootDirectoryUrlForServer);
-      break;
-    }
-  }
-  const directoryContentArray = readdirSync(firstExistingDirectoryUrl);
-  const fileUrls = [];
-  for (const filename of directoryContentArray) {
-    const fileUrlObject = new URL(filename, firstExistingDirectoryUrl);
-    fileUrls.push(fileUrlObject);
-  }
-  let rootDirectoryUrl = rootDirectoryUrlForServer;
-  package_workspaces: {
-    const packageDirectoryUrl = lookupPackageDirectory(
-      rootDirectoryUrlForServer,
-    );
-    if (!packageDirectoryUrl) {
-      break package_workspaces;
-    }
-    if (String(packageDirectoryUrl) === String(rootDirectoryUrlForServer)) {
-      break package_workspaces;
-    }
-    rootDirectoryUrl = packageDirectoryUrl;
-    if (
-      String(firstExistingDirectoryUrl) === String(rootDirectoryUrlForServer)
-    ) {
-      let packageContent;
-      try {
-        packageContent = JSON.parse(
-          readFileSync(new URL("package.json", packageDirectoryUrl), "utf8"),
-        );
-      } catch {
-        break package_workspaces;
-      }
-      const { workspaces } = packageContent;
-      if (Array.isArray(workspaces)) {
-        for (const workspace of workspaces) {
-          const workspaceUrlObject = new URL(workspace, packageDirectoryUrl);
-          const workspaceUrl = workspaceUrlObject.href;
-          if (workspaceUrl.endsWith("*")) {
-            const directoryUrl = ensurePathnameTrailingSlash(
-              workspaceUrl.slice(0, -1),
-            );
-            fileUrls.push(new URL(directoryUrl));
-          } else {
-            fileUrls.push(ensurePathnameTrailingSlash(workspaceUrlObject));
-          }
-        }
-      }
-    }
-  }
-
-  const sortedUrls = [];
-  for (let fileUrl of fileUrls) {
-    if (lstatSync(fileUrl).isDirectory()) {
-      sortedUrls.push(ensurePathnameTrailingSlash(fileUrl));
-    } else {
-      sortedUrls.push(fileUrl);
-    }
-  }
-  sortedUrls.sort((a, b) => {
-    return comparePathnames(a.pathname, b.pathname);
-  });
-
-  const items = [];
-  for (const sortedUrl of sortedUrls) {
-    const fileUrlRelativeToParent = urlToRelativeUrl(
-      sortedUrl,
-      firstExistingDirectoryUrl,
-    );
-    const fileUrlRelativeToServer = urlToRelativeUrl(
-      sortedUrl,
-      rootDirectoryUrlForServer,
-    );
-    const type = fileUrlRelativeToParent.endsWith("/") ? "dir" : "file";
-    items.push({
-      type,
-      fileUrlRelativeToParent,
-      fileUrlRelativeToServer,
-    });
-  }
-  items.rootDirectoryUrlForServer = rootDirectoryUrlForServer;
-  items.rootDirectoryUrl = rootDirectoryUrl;
-  items.firstExistingDirectoryUrl = firstExistingDirectoryUrl;
-  return items;
-};
-const generateDirectoryContent = (directoryContentItems, { mainFilePath }) => {
-  if (directoryContentItems.length === 0) {
-    return `<p class="directory_empty_message">Directory is empty</p>`;
-  }
-  let html = `<ul class="directory_content">`;
-  for (const directoryContentItem of directoryContentItems) {
-    const { type, fileUrlRelativeToParent, fileUrlRelativeToServer } =
-      directoryContentItem;
-    let href = fileUrlRelativeToServer;
-    if (href === "") {
-      href = `${directoryContentMagicName}`;
-    }
-    const isMainFile = href === mainFilePath;
-    const mainFileAttr = isMainFile ? ` data-main-file` : "";
-    html += `
-      <li class="directory_child" data-type="${type}"${mainFileAttr}>
-        <a href="/${href}" hot-decline>${fileUrlRelativeToParent}</a>
-      </li>`;
-  }
-  html += `\n  </ul>`;
-  return html;
-};
-const replacePlaceholders$1 = (html, replacers) => {
-  return html.replace(/\$\{(\w+)\}/g, (match, name) => {
-    const replacer = replacers[name];
-    if (replacer === undefined) {
-      return match;
-    }
-    if (typeof replacer === "function") {
-      return replacer();
-    }
-    return replacer;
-  });
+    {
+      name: "jsenv:file_url_fetching",
+      appliesDuring: "*",
+      fetchUrlContent: (urlInfo) => {
+        if (!urlInfo.url.startsWith("file:")) {
+          return null;
+        }
+        const { firstReference } = urlInfo;
+        let { fsStat } = firstReference;
+        if (!fsStat) {
+          fsStat = readEntryStatSync(urlInfo.url, { nullIfNotFound: true });
+        }
+        const serveFile = (url) => {
+          const contentType = CONTENT_TYPE.fromUrlExtension(url);
+          const fileBuffer = readFileSync(new URL(url));
+          const content = CONTENT_TYPE.isTextual(contentType)
+            ? String(fileBuffer)
+            : fileBuffer;
+          return {
+            content,
+            contentType,
+            contentLength: fileBuffer.length,
+          };
+        };
+
+        return serveFile(urlInfo.url);
+      },
+    },
+  ];
 };
 
 const jsenvPluginProtocolHttp = ({ include }) => {
@@ -19815,10 +20121,11 @@ const jsenvPluginProtocolHttp = ({ include }) => {
       return fileUrl;
     },
     fetchUrlContent: async (urlInfo) => {
-      if (!urlInfo.originalUrl.startsWith("http")) {
+      const originalUrl = urlInfo.originalUrl;
+      if (!originalUrl.startsWith("http")) {
         return null;
       }
-      const response = await fetch(urlInfo.originalUrl);
+      const response = await fetch(originalUrl);
       const responseStatus = response.status;
       if (responseStatus < 200 || responseStatus > 299) {
         throw new Error(`unexpected response status ${responseStatus}`);
@@ -19851,103 +20158,6 @@ const asValidFilename = (string) => {
   return string;
 };
 
-const jsenvPluginInjections = (rawAssociations) => {
-  let resolvedAssociations;
-
-  return {
-    name: "jsenv:injections",
-    appliesDuring: "*",
-    init: (context) => {
-      resolvedAssociations = URL_META.resolveAssociations(
-        { injectionsGetter: rawAssociations },
-        context.rootDirectoryUrl,
-      );
-    },
-    transformUrlContent: async (urlInfo) => {
-      const { injectionsGetter } = URL_META.applyAssociations({
-        url: asUrlWithoutSearch(urlInfo.url),
-        associations: resolvedAssociations,
-      });
-      if (!injectionsGetter) {
-        return null;
-      }
-      if (typeof injectionsGetter !== "function") {
-        throw new TypeError("injectionsGetter must be a function");
-      }
-      const injections = await injectionsGetter(urlInfo);
-      if (!injections) {
-        return null;
-      }
-      const keys = Object.keys(injections);
-      if (keys.length === 0) {
-        return null;
-      }
-      return replacePlaceholders(urlInfo.content, injections, urlInfo);
-    },
-  };
-};
-
-const injectionSymbol = Symbol.for("jsenv_injection");
-const INJECTIONS = {
-  optional: (value) => {
-    return { [injectionSymbol]: "optional", value };
-  },
-};
-
-// we export this because it is imported by jsenv_plugin_placeholder.js and unit test
-const replacePlaceholders = (content, replacements, urlInfo) => {
-  const magicSource = createMagicSource(content);
-  for (const key of Object.keys(replacements)) {
-    let index = content.indexOf(key);
-    const replacement = replacements[key];
-    let isOptional;
-    let value;
-    if (replacement && replacement[injectionSymbol]) {
-      const valueBehindSymbol = replacement[injectionSymbol];
-      isOptional = valueBehindSymbol === "optional";
-      value = replacement.value;
-    } else {
-      value = replacement;
-    }
-    if (index === -1) {
-      if (!isOptional) {
-        urlInfo.context.logger.warn(
-          `placeholder "${key}" not found in ${urlInfo.url}.
---- suggestion a ---
-Add "${key}" in that file.
---- suggestion b ---
-Fix eventual typo in "${key}"?
---- suggestion c ---
-Mark injection as optional using INJECTIONS.optional():
-import { INJECTIONS } from "@jsenv/core";
-
-return {
-  "${key}": INJECTIONS.optional(${JSON.stringify(value)}),
-};`,
-        );
-      }
-      continue;
-    }
-
-    while (index !== -1) {
-      const start = index;
-      const end = index + key.length;
-      magicSource.replace({
-        start,
-        end,
-        replacement:
-          urlInfo.type === "js_classic" ||
-          urlInfo.type === "js_module" ||
-          urlInfo.type === "html"
-            ? JSON.stringify(value, null, "  ")
-            : value,
-      });
-      index = content.indexOf(key, end);
-    }
-  }
-  return magicSource.toContentAndSourcemap();
-};
-
 /*
  * Some code uses globals specific to Node.js in code meant to run in browsers...
  * This plugin will replace some node globals to things compatible with web:
@@ -21269,8 +21479,8 @@ const getCorePlugins = ({
     jsenvPluginReferenceAnalysis(referenceAnalysis),
     ...(injections ? [jsenvPluginInjections(injections)] : []),
     jsenvPluginTranspilation(transpilation),
+    // "jsenvPluginInlining" must be very soon because all other plugins will react differently once they see the file is inlined
     ...(inlining ? [jsenvPluginInlining()] : []),
-    ...(supervisor ? [jsenvPluginSupervisor(supervisor)] : []), // after inline as it needs inline script to be cooked
 
     /* When resolving references the following applies by default:
        - http urls are resolved by jsenvPluginHttpUrls
@@ -21284,7 +21494,6 @@ const getCorePlugins = ({
       magicDirectoryIndex,
       directoryListingUrlMocks,
     }),
-
     {
       name: "jsenv:resolve_root_as_main",
       appliesDuring: "*",
@@ -21303,12 +21512,14 @@ const getCorePlugins = ({
       : []),
     jsenvPluginWebResolution(),
     jsenvPluginDirectoryReferenceEffect(directoryReferenceEffect),
-
     jsenvPluginVersionSearchParam(),
+
+    // "jsenvPluginSupervisor" MUST be after "jsenvPluginInlining" as it needs inline script to be cooked
+    ...(supervisor ? [jsenvPluginSupervisor(supervisor)] : []),
+
     jsenvPluginCommonJsGlobals(),
     jsenvPluginImportMetaScenarios(),
     ...(scenarioPlaceholders ? [jsenvPluginGlobalScenarios()] : []),
-
     jsenvPluginNodeRuntime({ runtimeCompat }),
 
     jsenvPluginImportMetaHot(),
@@ -21868,7 +22079,6 @@ const createBuildSpecifierManager = ({
           type: reference.type,
           expectedType: reference.expectedType,
           specifier: reference.specifier,
-          specifierPathname: reference.specifierPathname,
           specifierLine: reference.specifierLine,
           specifierColumn: reference.specifierColumn,
           specifierStart: reference.specifierStart,
@@ -23317,33 +23527,33 @@ build ${entryPointKeys.length} entry points`);
 
     const bundlers = {};
     {
-      rawKitchen.pluginController.plugins.forEach((plugin) => {
+      for (const plugin of rawKitchen.pluginController.activePlugins) {
         const bundle = plugin.bundle;
         if (!bundle) {
-          return;
+          continue;
         }
         if (typeof bundle !== "object") {
           throw new Error(
             `bundle must be an object, found "${bundle}" on plugin named "${plugin.name}"`,
           );
         }
-        Object.keys(bundle).forEach((type) => {
+        for (const type of Object.keys(bundle)) {
           const bundleFunction = bundle[type];
           if (!bundleFunction) {
-            return;
+            continue;
           }
           const bundlerForThatType = bundlers[type];
           if (bundlerForThatType) {
             // first plugin to define a bundle hook wins
-            return;
+            continue;
           }
           bundlers[type] = {
             plugin,
             bundleFunction: bundle[type],
             urlInfoMap: new Map(),
           };
-        });
-      });
+        }
+      }
       const addToBundlerIfAny = (rawUrlInfo) => {
         const bundler = bundlers[rawUrlInfo.type];
         if (bundler) {
@@ -23663,43 +23873,6 @@ const WEB_URL_CONVERTER = {
   },
 };
 
-/*
- * This plugin is very special because it is here
- * to provide "serverEvents" used by other plugins
- */
-
-
-const serverEventsClientFileUrl = new URL(
-  "./js/server_events_client.js",
-  import.meta.url,
-).href;
-
-const jsenvPluginServerEventsClientInjection = ({ logs = true }) => {
-  return {
-    name: "jsenv:server_events_client_injection",
-    appliesDuring: "*",
-    transformUrlContent: {
-      html: (urlInfo) => {
-        const htmlAst = parseHtml({
-          html: urlInfo.content,
-          url: urlInfo.url,
-        });
-        injectJsenvScript(htmlAst, {
-          src: serverEventsClientFileUrl,
-          initCall: {
-            callee: "window.__server_events__.setup",
-            params: {
-              logs,
-            },
-          },
-          pluginName: "jsenv:server_events_client_injection",
-        });
-        return stringifyHtmlAst(htmlAst);
-      },
-    },
-  };
-};
-
 const createServerEventsDispatcher = () => {
   const clients = [];
   const MAX_CLIENTS = 100;
@@ -23795,6 +23968,105 @@ const createServerEventsDispatcher = () => {
   };
 };
 
+/*
+ * This plugin is very special because it is here
+ * to provide "serverEvents" used by other plugins
+ */
+
+
+const serverEventsClientFileUrl = new URL(
+  "./js/server_events_client.js",
+  import.meta.url,
+).href;
+
+const jsenvPluginServerEvents = ({ clientAutoreload }) => {
+  let serverEventsDispatcher;
+
+  const { clientServerEventsConfig } = clientAutoreload;
+  const { logs = true } = clientServerEventsConfig;
+
+  return {
+    name: "jsenv:server_events",
+    appliesDuring: "dev",
+    effect: ({ kitchenContext, otherPlugins }) => {
+      const allServerEvents = {};
+      for (const otherPlugin of otherPlugins) {
+        const { serverEvents } = otherPlugin;
+        if (!serverEvents) {
+          continue;
+        }
+        for (const serverEventName of Object.keys(serverEvents)) {
+          // we could throw on serverEvent name conflict
+          // we could throw if serverEvents[serverEventName] is not a function
+          allServerEvents[serverEventName] = serverEvents[serverEventName];
+        }
+      }
+      const serverEventNames = Object.keys(allServerEvents);
+      if (serverEventNames.length === 0) {
+        return false;
+      }
+      serverEventsDispatcher = createServerEventsDispatcher();
+      const onabort = () => {
+        serverEventsDispatcher.destroy();
+      };
+      kitchenContext.signal.addEventListener("abort", onabort);
+      for (const serverEventName of Object.keys(allServerEvents)) {
+        const serverEventInfo = {
+          ...kitchenContext,
+          // serverEventsDispatcher variable is safe, we can disable esling warning
+          // eslint-disable-next-line no-loop-func
+          sendServerEvent: (data) => {
+            if (!serverEventsDispatcher) {
+              // this can happen if a plugin wants to send a server event but
+              // server is closing or the plugin got destroyed but still wants to do things
+              // if plugin code is correctly written it is never supposed to happen
+              // because it means a plugin is still trying to do stuff after being destroyed
+              return;
+            }
+            serverEventsDispatcher.dispatch({
+              type: serverEventName,
+              data,
+            });
+          },
+        };
+        const serverEventInit = allServerEvents[serverEventName];
+        serverEventInit(serverEventInfo);
+      }
+      return () => {
+        kitchenContext.signal.removeEventListener("abort", onabort);
+        serverEventsDispatcher.destroy();
+        serverEventsDispatcher = undefined;
+      };
+    },
+    serveWebsocket: async ({ websocket, request }) => {
+      if (request.headers["sec-websocket-protocol"] !== "jsenv") {
+        return false;
+      }
+      serverEventsDispatcher.addWebsocket(websocket, request);
+      return true;
+    },
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const htmlAst = parseHtml({
+          html: urlInfo.content,
+          url: urlInfo.url,
+        });
+        injectJsenvScript(htmlAst, {
+          src: serverEventsClientFileUrl,
+          initCall: {
+            callee: "window.__server_events__.setup",
+            params: {
+              logs,
+            },
+          },
+          pluginName: "jsenv:server_events",
+        });
+        return stringifyHtmlAst(htmlAst);
+      },
+    },
+  };
+};
+
 const memoizeByFirstArgument = (compute) => {
   const urlCache = new Map();
 
@@ -23952,10 +24224,11 @@ const startDevServer = async ({
   });
 
   const serverStopCallbackSet = new Set();
-  const serverEventsDispatcher = createServerEventsDispatcher();
+  const serverStopAbortController = new AbortController();
   serverStopCallbackSet.add(() => {
-    serverEventsDispatcher.destroy();
+    serverStopAbortController.abort();
   });
+  const serverStopAbortSignal = serverStopAbortController.signal;
   const kitchenCache = new Map();
 
   const finalServices = [];
@@ -24058,7 +24331,7 @@ const startDevServer = async ({
 
       kitchen = createKitchen({
         name: runtimeId,
-        signal,
+        signal: serverStopAbortSignal,
         logLevel,
         rootDirectoryUrl: sourceDirectoryUrl,
         mainFilePath: sourceMainFilePath,
@@ -24067,6 +24340,7 @@ const startDevServer = async ({
         runtimeCompat,
         clientRuntimeCompat,
         plugins: [
+          jsenvPluginServerEvents({ clientAutoreload }),
           ...plugins,
           ...getCorePlugins({
             rootDirectoryUrl: sourceDirectoryUrl,
@@ -24142,7 +24416,17 @@ const startDevServer = async ({
           for (const implicitUrl of urlInfoCreated.implicitUrlSet) {
             const implicitUrlInfo =
               urlInfoCreated.graph.getUrlInfo(implicitUrl);
-            if (implicitUrlInfo && !implicitUrlInfo.isValid()) {
+            if (!implicitUrlInfo) {
+              continue;
+            }
+            if (implicitUrlInfo.content === undefined) {
+              // happens when we explicitely load an url with a search param
+              // - it creates an implicit url info to the url without params
+              // - we never explicitely request the url without search param so it has no content
+              // in that case the underlying urlInfo cannot be invalidate by the implicit
+              continue;
+            }
+            if (!implicitUrlInfo.isValid()) {
               return false;
             }
           }
@@ -24161,41 +24445,6 @@ const startDevServer = async ({
       serverStopCallbackSet.add(() => {
         kitchen.pluginController.callHooks("destroy", kitchen.context);
       });
-      {
-        const allServerEvents = {};
-        kitchen.pluginController.plugins.forEach((plugin) => {
-          const { serverEvents } = plugin;
-          if (serverEvents) {
-            Object.keys(serverEvents).forEach((serverEventName) => {
-              // we could throw on serverEvent name conflict
-              // we could throw if serverEvents[serverEventName] is not a function
-              allServerEvents[serverEventName] = serverEvents[serverEventName];
-            });
-          }
-        });
-        const serverEventNames = Object.keys(allServerEvents);
-        if (serverEventNames.length > 0) {
-          Object.keys(allServerEvents).forEach((serverEventName) => {
-            const serverEventInfo = {
-              ...kitchen.context,
-              sendServerEvent: (data) => {
-                serverEventsDispatcher.dispatch({
-                  type: serverEventName,
-                  data,
-                });
-              },
-            };
-            const serverEventInit = allServerEvents[serverEventName];
-            serverEventInit(serverEventInfo);
-          });
-          kitchen.pluginController.unshiftPlugin(
-            jsenvPluginServerEventsClientInjection(
-              clientAutoreload.clientServerEventsConfig,
-            ),
-          );
-        }
-      }
-
       kitchenCache.set(runtimeId, kitchen);
       onKitchenCreated(kitchen);
       return kitchen;
@@ -24280,9 +24529,10 @@ const startDevServer = async ({
               // If they match jsenv bypass cooking and returns 304
               // This must not happen when a plugin uses "no-store" or "no-cache" as it means
               // plugin logic wants to happens for every request to this url
-              ...(urlInfo.headers["cache-control"] === "no-store" ||
-              urlInfo.headers["cache-control"] === "no-cache"
-                ? {}
+              ...(cacheIsDisabledInResponseHeader(urlInfoTargetedByCache)
+                ? {
+                    "cache-control": "no-store", // for inline file we force no-store when parent is no-store
+                  }
                 : {
                     "cache-control": `private,max-age=0,must-revalidate`,
                     // it's safe to use "_" separator because etag is encoded with base64 (see https://stackoverflow.com/a/13195197)
@@ -24383,13 +24633,20 @@ ${error.trace?.message}`);
           };
         }
       },
-      handleWebsocket: (websocket, { request }) => {
+      handleWebsocket: async (websocket, { request }) => {
         // if (true || logLevel === "debug") {
         //   console.log("handleWebsocket", websocket, request.headers);
         // }
-        if (request.headers["sec-websocket-protocol"] === "jsenv") {
-          serverEventsDispatcher.addWebsocket(websocket, request);
-        }
+        const kitchen = getOrCreateKitchen(request);
+        const serveWebsocketHookInfo = {
+          request,
+          websocket,
+          context: kitchen.context,
+        };
+        await kitchen.pluginController.callAsyncHooksUntil(
+          "serveWebsocket",
+          serveWebsocketHookInfo,
+        );
       },
     });
   }
@@ -24483,6 +24740,13 @@ ${error.trace?.message}`);
   };
 };
 
+const cacheIsDisabledInResponseHeader = (urlInfo) => {
+  return (
+    urlInfo.headers["cache-control"] === "no-store" ||
+    urlInfo.headers["cache-control"] === "no-cache"
+  );
+};
+
 /*
  * startBuildServer is mean to interact with the build files;
  * files that will be deployed to production server(s).