@jsenv/core 41.5.21 → 41.5.22

package/dist/client/server_events/server_events_client.js

@@ -4,7 +4,7 @@ let createEventsManager;
     const callbacksMap = new Map();
     let cleanup;
     const addCallbacks = (namedCallbacks) => {
-      let callbacksMapSize = callbacksMap.size;
+      const sizeBeforeAdd = callbacksMap.size;
       Object.keys(namedCallbacks).forEach((eventName) => {
         const callback = namedCallbacks[eventName];
         const existingCallbacks = callbacksMap.get(eventName);
@@ -17,7 +17,10 @@ let createEventsManager;
         }
         callbacks.push(callback);
       });
-      if (effect && callbacksMapSize === 0 && callbacksMapSize.size > 0) {
+      // the effect owns whatever the callbacks need to exist (the connection),
+      // so it runs on the edge into "someone is listening" and its cleanup runs
+      // on the edge back out of it
+      if (sizeBeforeAdd === 0 && callbacksMap.size > 0) {
         cleanup = effect();
       }
 
@@ -25,7 +28,7 @@ let createEventsManager;
       return () => {
         if (removed) return;
         removed = true;
-        callbacksMapSize = callbacksMap.size;
+        const sizeBeforeRemove = callbacksMap.size;
         Object.keys(namedCallbacks).forEach((eventName) => {
           const callback = namedCallbacks[eventName];
           const callbacks = callbacksMap.get(eventName);
@@ -40,12 +43,7 @@ let createEventsManager;
           }
         });
         namedCallbacks = null; // allow garbage collect
-        if (
-          cleanup &&
-          typeof cleanup === "function" &&
-          callbacksMapSize > 0 &&
-          callbacksMapSize.size === 0
-        ) {
+        if (cleanup && sizeBeforeRemove > 0 && callbacksMap.size === 0) {
           cleanup();
           cleanup = null;
         }
@@ -85,9 +83,14 @@ let createConnectionManager;
     CLOSED: "closed",
   };
 
+  // The peer is a dev server being restarted, not a flaky network: there is no
+  // attempt count or time budget past which giving up would be correct. Attempts
+  // space out to retryAfterMax and never stop, and the moments where the server
+  // is most likely to be back already (tab visible, window focused, network
+  // back) skip the wait instead of leaving a detached page on screen.
   createConnectionManager = (
     attemptConnection,
-    { logs, retry, retryAfter, retryMaxAttempt, retryAllocatedMs },
+    { logs, retry, retryAfter, retryAfterMax },
   ) => {
     const readyState = {
       value: READY_STATES.CLOSED,
@@ -102,6 +105,7 @@ let createConnectionManager;
     };
 
     let _disconnect = () => {};
+    let _retryNow = () => {};
     const connect = () => {
       if (
         readyState.value === READY_STATES.CONNECTING ||
@@ -110,11 +114,11 @@ let createConnectionManager;
         return;
       }
 
-      let retryCount = 0;
-      let msSpent = 0;
+      let retryDelay = retryAfter;
+      let retryTimeout = null;
       const attempt = () => {
+        retryTimeout = null;
         readyState.goTo(READY_STATES.CONNECTING);
-        let timeout;
         const cancelAttempt = attemptConnection({
           onClosed: () => {
             if (!retry) {
@@ -124,24 +128,6 @@ let createConnectionManager;
               }
               return;
             }
-            if (retryCount > retryMaxAttempt) {
-              readyState.goTo(READY_STATES.CLOSED);
-              if (logs) {
-                console.info(
-                  `[jsenv] could not connect to server after ${retryMaxAttempt} attempt`,
-                );
-              }
-              return;
-            }
-            if (retryAllocatedMs && msSpent > retryAllocatedMs) {
-              readyState.goTo(READY_STATES.CLOSED);
-              if (logs) {
-                console.info(
-                  `[jsenv] could not connect to server in less than ${retryAllocatedMs}ms`,
-                );
-              }
-              return;
-            }
             // if closed while open -> connection lost
             // otherwise it's the attempt to connect for the first time
             // or to reconnect
@@ -152,22 +138,31 @@ let createConnectionManager;
                 );
               }
             }
-            retryCount++;
-            timeout = setTimeout(() => {
-              msSpent += retryAfter;
-              attempt();
-            }, retryAfter);
+            retryTimeout = setTimeout(attempt, retryDelay);
+            const nextRetryDelay = retryDelay * 2;
+            retryDelay =
+              nextRetryDelay > retryAfterMax ? retryAfterMax : nextRetryDelay;
           },
           onOpen: () => {
+            retryDelay = retryAfter;
             readyState.goTo(READY_STATES.OPEN);
           },
         });
         _disconnect = () => {
           cancelAttempt();
-          clearTimeout(timeout);
+          clearTimeout(retryTimeout);
+          retryTimeout = null;
           readyState.goTo(READY_STATES.CLOSED);
         };
       };
+      _retryNow = () => {
+        if (retryTimeout === null) {
+          return;
+        }
+        clearTimeout(retryTimeout);
+        retryDelay = retryAfter;
+        attempt();
+      };
       attempt();
     };
 
@@ -194,6 +189,9 @@ let createConnectionManager;
         _disconnect();
       }
     });
+    const removeServerMightBeBackListeners = listenServerMightBeBack(() => {
+      _retryNow();
+    });
 
     return {
       readyState,
@@ -201,11 +199,31 @@ let createConnectionManager;
       disconnect,
       destroy: () => {
         removePageUnloadListener();
+        removeServerMightBeBackListeners();
         disconnect();
       },
     };
   };
 
+  const listenServerMightBeBack = (callback) => {
+    const removeOnlineListener = listenEvent(window, "online", callback);
+    const removeFocusListener = listenEvent(window, "focus", callback);
+    const removeVisibilityChangeListener = listenEvent(
+      document,
+      "visibilitychange",
+      () => {
+        if (document.visibilityState === "visible") {
+          callback();
+        }
+      },
+    );
+    return () => {
+      removeOnlineListener();
+      removeFocusListener();
+      removeVisibilityChangeListener();
+    };
+  };
+
   // const listenPageMightFreeze = (callback) => {
   //   const removePageHideListener = listenEvent(window, "pagehide", (pageHideEvent) => {
   //     if (pageHideEvent.persisted === true) {
@@ -271,8 +289,7 @@ let createWebSocketConnection;
       useEventsToManageConnection = true,
       retry = false,
       retryAfter = 1000,
-      retryMaxAttempt = Infinity,
-      retryAllocatedMs = Infinity,
+      retryAfterMax = 5000,
     } = {},
   ) => {
     const connectionManager = createConnectionManager(
@@ -315,7 +332,7 @@ let createWebSocketConnection;
           }
         };
       },
-      { logs, retry, retryAfter, retryMaxAttempt, retryAllocatedMs },
+      { logs, retry, retryAfter, retryAfterMax },
     );
     const eventsManager = createEventsManager({
       effect: () => {
@@ -439,7 +456,6 @@ const serverEventsInterface = {
     const websocketConnection = createWebSocketConnection(websocketUrl, {
       logs,
       retry: true,
-      retryAllocatedMs: 10_000,
     });
 
     const { readyState, connect, disconnect, listenEvents } =

package/dist/start_dev_server/start_dev_server.js

@@ -236,17 +236,29 @@ const isExactVersion = (declaredVersion) => {
 };
 
 /*
- * Detects when "npm install" makes a missing or outdated dependency match what
- * the project package.json declares, so the browser can be reloaded at that
- * moment.
+ * Detects the moment "npm install" changes what the running pages get from
+ * node_modules, so the browser can be reloaded at that moment:
+ *
+ * - a declared dependency stops being missing or outdated: what package.json
+ *   asks for is there;
+ * - a package the pages were served changes version: the "?v=" baked into the
+ *   urls they evaluated names a version node_modules no longer holds. Left
+ *   alone, the next hot reload of a file importing that package resolves it to
+ *   the new version and the page evaluates a second copy of the package next
+ *   to the first, two module scopes for something meant to exist once.
  *
  * node_modules is deliberately not watched: it is far too big, and an install
  * rewrites, dedupes and moves package directories around, so a watcher placed
- * on one of them is unreliable. Instead the few packages known to be missing or
- * outdated are polled, which costs a couple of readFileSync and stops as soon as
- * they are all installed. The project package.json is watched though: it is a
- * single file, and editing it is what puts a dependency out of date in the first
- * place.
+ * on one of them is unreliable. Instead a few package.json files are polled,
+ * at the cost of a stat each: the packages known to be missing or outdated,
+ * and the packages the pages were served, whose package.json the url graph
+ * keeps (that is where "?v=" comes from). The project package.json is watched
+ * though: it is a single file, and editing it is what puts a dependency out of
+ * date in the first place.
+ *
+ * Both detections run in the same tick so that an install fixing an outdated
+ * package the page runs is reported once: two reports would be two reloads,
+ * the second one landing on the page that just came back.
  */
 
 
@@ -254,7 +266,13 @@ const POLL_INTERVAL = 500;
 
 const watchDependencies = (
   packageDirectory,
-  { onProblem, onInstalled, onChange, pollInterval = POLL_INTERVAL },
+  {
+    getKitchens = () => [],
+    onProblem,
+    onInstalled,
+    onChange,
+    pollInterval = POLL_INTERVAL,
+  },
 ) => {
   let problemMap = new Map();
   // every path given to the browser is relative to the package directory, the
@@ -269,11 +287,49 @@ const watchDependencies = (
   if (!packageDirectory.url) {
     return watcher;
   }
-  let timer = null;
 
-  const check = () => {
+  const checkServedVersions = (installMap) => {
+    for (const kitchen of getKitchens()) {
+      for (const urlInfo of kitchen.graph.urlInfoMap.values()) {
+        const served = readServedVersion(urlInfo);
+        if (!served) {
+          continue;
+        }
+        const installedPackageJson = readInstalledPackageJson(
+          packageDirectory,
+          served.directoryUrl,
+        );
+        if (!installedPackageJson) {
+          // the package is being rewritten, what it becomes is known once it is back
+          continue;
+        }
+        const installedVersion = installedPackageJson.version;
+        if (installedVersion === served.version) {
+          continue;
+        }
+        // the graph learns the file moved, as it would from a watcher: the
+        // files importing this package are cooked again with the new "?v="
+        // when the page comes back
+        urlInfo.onModified();
+        if (installMap.has(served.packageName)) {
+          continue;
+        }
+        installMap.set(served.packageName, {
+          packageName: served.packageName,
+          installedVersion,
+          servedVersion: served.version,
+          declaredVersion: null,
+          severity: "warning",
+        });
+      }
+    }
+  };
+
+  const checkDeclared = (installMap) => {
+    const statusMap = new Map();
     const nextProblemMap = new Map();
     for (const status of readDependencyStatuses(packageDirectory)) {
+      statusMap.set(status.packageName, status);
       if (status.state === "missing" || status.state === "outdated") {
         nextProblemMap.set(status.packageName, status);
       }
@@ -289,9 +345,21 @@ const watchDependencies = (
       }
     }
     for (const [packageName, previousStatus] of problemMap) {
-      if (!nextProblemMap.has(packageName)) {
-        onInstalled(previousStatus);
+      if (nextProblemMap.has(packageName)) {
+        continue;
+      }
+      const install = installMap.get(packageName);
+      if (install) {
+        install.declaredVersion = previousStatus.declaredVersion;
+        continue;
       }
+      installMap.set(packageName, {
+        packageName,
+        installedVersion: statusMap.get(packageName).installedVersion,
+        servedVersion: null,
+        declaredVersion: previousStatus.declaredVersion,
+        severity: previousStatus.severity,
+      });
     }
     const changed =
       nextProblemMap.size !== problemMap.size ||
@@ -309,45 +377,96 @@ const watchDependencies = (
     if (changed) {
       onChange(watcher.getProblems());
     }
-    if (problemMap.size === 0) {
-      stopPolling();
-    } else {
-      startPolling();
-    }
   };
 
-  const startPolling = () => {
-    if (timer) {
-      return;
+  // The declared dependencies are compared with node_modules only when
+  // something can have changed for them: the project package.json was edited,
+  // or a problem is known and an install may be fixing it. Comparing them at
+  // every tick would catch installs halfway and report a package as missing
+  // while it is being rewritten.
+  const check = ({ declared }) => {
+    const installMap = new Map();
+    checkServedVersions(installMap);
+    if (declared || problemMap.size > 0) {
+      checkDeclared(installMap);
     }
-    timer = setInterval(check, pollInterval);
-    timer.unref();
-  };
-  const stopPolling = () => {
-    if (!timer) {
-      return;
+    for (const install of installMap.values()) {
+      onInstalled(install);
     }
-    clearInterval(timer);
-    timer = null;
   };
 
   const unwatchPackageJson = registerFileLifecycle(
     new URL("package.json", packageDirectory.url),
     {
-      added: check,
-      updated: check,
+      added: () => check({ declared: true }),
+      updated: () => check({ declared: true }),
       keepProcessAlive: false,
     },
   );
-  check();
+  check({ declared: true });
+  const timer = setInterval(() => {
+    check({ declared: false });
+  }, pollInterval);
+  timer.unref();
 
   watcher.stop = () => {
-    stopPolling();
+    clearInterval(timer);
     unwatchPackageJson();
   };
   return watcher;
 };
 
+// The url graph keeps the content of every package.json it resolved a bare
+// specifier against, and that content holds the version the page received.
+// It is parsed once per content: the same string is seen at every tick.
+const servedVersionCache = new WeakMap();
+const readServedVersion = (urlInfo) => {
+  const { url, content } = urlInfo;
+  if (content === undefined) {
+    return null;
+  }
+  if (!url.startsWith("file:") || !url.endsWith("/package.json")) {
+    return null;
+  }
+  const nodeModulesIndex = url.lastIndexOf("/node_modules/");
+  if (nodeModulesIndex === -1) {
+    return null;
+  }
+  // dereferenced url infos stay in the graph; nothing imports this package anymore
+  if (urlInfo.referenceFromOthersSet.size === 0) {
+    return null;
+  }
+  const fromCache = servedVersionCache.get(urlInfo);
+  if (fromCache && fromCache.content === content) {
+    return fromCache;
+  }
+  let packageJson;
+  try {
+    packageJson = JSON.parse(content);
+  } catch {
+    return null;
+  }
+  const served = {
+    content,
+    directoryUrl: new URL("./", url).href,
+    packageName: packageNameFromSpecifier(
+      url.slice(nodeModulesIndex + "/node_modules/".length),
+    ),
+    version: packageJson.version,
+  };
+  servedVersionCache.set(urlInfo, served);
+  return served;
+};
+
+// an install in progress can be caught halfway, with a package.json not written yet
+const readInstalledPackageJson = (packageDirectory, directoryUrl) => {
+  try {
+    return packageDirectory.read(directoryUrl);
+  } catch {
+    return null;
+  }
+};
+
 const jsenvCoreDirectoryUrl = new URL("../", import.meta.url);
 
 const createPackageDirectory = ({
@@ -12584,6 +12703,7 @@ const startDevServer = async ({
   };
   const dependencyProblemEventEmitter = createEventEmitter();
   const dependencyWatcher = watchDependencies(packageDirectory, {
+    getKitchens: () => kitchenCache.values(),
     onChange: (problems) => {
       dependencyProblemEventEmitter.emit(problems);
     },
@@ -12605,11 +12725,30 @@ const startDevServer = async ({
         logger.info(message);
       }
     },
-    onInstalled: ({ packageName, declaredVersion, severity }) => {
-      logger.info(`"${packageName}@${declaredVersion}" is now installed`);
+    onInstalled: ({
+      packageName,
+      installedVersion,
+      servedVersion,
+      declaredVersion,
+      severity,
+    }) => {
+      if (servedVersion) {
+        logger.info(
+          `"${packageName}@${installedVersion}" is now installed, the page runs ${servedVersion}`,
+        );
+      } else {
+        logger.info(`"${packageName}@${declaredVersion}" is now installed`);
+      }
       if (severity !== "warning") {
         return;
       }
+      if (servedVersion) {
+        reloadRequestEventEmitter.emit({
+          cause: `${packageName} ${servedVersion} -> ${installedVersion} installed`,
+          reason: `a dependency the page runs changed version in node_modules`,
+        });
+        return;
+      }
       reloadRequestEventEmitter.emit({
         cause: `${packageName}@${declaredVersion} installed`,
         reason: `a dependency became available in node_modules`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "41.5.21",
+  "version": "41.5.22",
   "type": "module",
   "description": "Tool to develop, test and build js projects",
   "repository": {
@@ -79,7 +79,7 @@
     "@jsenv/plugin-minification": "1.7.22",
     "@jsenv/plugin-supervisor": "1.8.24",
     "@jsenv/plugin-transpilation": "1.7.9",
-    "@jsenv/server": "17.6.4",
+    "@jsenv/server": "17.6.5",
     "@jsenv/sourcemap": "1.4.9",
     "react-table": "7.8.0"
   },

package/src/dev/start_dev_server.js

@@ -229,6 +229,7 @@ export const startDevServer = async ({
   };
   const dependencyProblemEventEmitter = createEventEmitter();
   const dependencyWatcher = watchDependencies(packageDirectory, {
+    getKitchens: () => kitchenCache.values(),
     onChange: (problems) => {
       dependencyProblemEventEmitter.emit(problems);
     },
@@ -250,11 +251,30 @@ export const startDevServer = async ({
         logger.info(message);
       }
     },
-    onInstalled: ({ packageName, declaredVersion, severity }) => {
-      logger.info(`"${packageName}@${declaredVersion}" is now installed`);
+    onInstalled: ({
+      packageName,
+      installedVersion,
+      servedVersion,
+      declaredVersion,
+      severity,
+    }) => {
+      if (servedVersion) {
+        logger.info(
+          `"${packageName}@${installedVersion}" is now installed, the page runs ${servedVersion}`,
+        );
+      } else {
+        logger.info(`"${packageName}@${declaredVersion}" is now installed`);
+      }
       if (severity !== "warning") {
         return;
       }
+      if (servedVersion) {
+        reloadRequestEventEmitter.emit({
+          cause: `${packageName} ${servedVersion} -> ${installedVersion} installed`,
+          reason: `a dependency the page runs changed version in node_modules`,
+        });
+        return;
+      }
       reloadRequestEventEmitter.emit({
         cause: `${packageName}@${declaredVersion} installed`,
         reason: `a dependency became available in node_modules`,

package/src/helpers/watch_dependencies.js

@@ -1,26 +1,47 @@
 /*
- * Detects when "npm install" makes a missing or outdated dependency match what
- * the project package.json declares, so the browser can be reloaded at that
- * moment.
+ * Detects the moment "npm install" changes what the running pages get from
+ * node_modules, so the browser can be reloaded at that moment:
+ *
+ * - a declared dependency stops being missing or outdated: what package.json
+ *   asks for is there;
+ * - a package the pages were served changes version: the "?v=" baked into the
+ *   urls they evaluated names a version node_modules no longer holds. Left
+ *   alone, the next hot reload of a file importing that package resolves it to
+ *   the new version and the page evaluates a second copy of the package next
+ *   to the first, two module scopes for something meant to exist once.
  *
  * node_modules is deliberately not watched: it is far too big, and an install
  * rewrites, dedupes and moves package directories around, so a watcher placed
- * on one of them is unreliable. Instead the few packages known to be missing or
- * outdated are polled, which costs a couple of readFileSync and stops as soon as
- * they are all installed. The project package.json is watched though: it is a
- * single file, and editing it is what puts a dependency out of date in the first
- * place.
+ * on one of them is unreliable. Instead a few package.json files are polled,
+ * at the cost of a stat each: the packages known to be missing or outdated,
+ * and the packages the pages were served, whose package.json the url graph
+ * keeps (that is where "?v=" comes from). The project package.json is watched
+ * though: it is a single file, and editing it is what puts a dependency out of
+ * date in the first place.
+ *
+ * Both detections run in the same tick so that an install fixing an outdated
+ * package the page runs is reported once: two reports would be two reloads,
+ * the second one landing on the page that just came back.
  */
 
 import { registerFileLifecycle } from "@jsenv/filesystem";
 
-import { readDependencyStatuses } from "../kitchen/package_dependencies.js";
+import {
+  packageNameFromSpecifier,
+  readDependencyStatuses,
+} from "../kitchen/package_dependencies.js";
 
 const POLL_INTERVAL = 500;
 
 export const watchDependencies = (
   packageDirectory,
-  { onProblem, onInstalled, onChange, pollInterval = POLL_INTERVAL },
+  {
+    getKitchens = () => [],
+    onProblem,
+    onInstalled,
+    onChange,
+    pollInterval = POLL_INTERVAL,
+  },
 ) => {
   let problemMap = new Map();
   // every path given to the browser is relative to the package directory, the
@@ -35,11 +56,49 @@ export const watchDependencies = (
   if (!packageDirectory.url) {
     return watcher;
   }
-  let timer = null;
 
-  const check = () => {
+  const checkServedVersions = (installMap) => {
+    for (const kitchen of getKitchens()) {
+      for (const urlInfo of kitchen.graph.urlInfoMap.values()) {
+        const served = readServedVersion(urlInfo);
+        if (!served) {
+          continue;
+        }
+        const installedPackageJson = readInstalledPackageJson(
+          packageDirectory,
+          served.directoryUrl,
+        );
+        if (!installedPackageJson) {
+          // the package is being rewritten, what it becomes is known once it is back
+          continue;
+        }
+        const installedVersion = installedPackageJson.version;
+        if (installedVersion === served.version) {
+          continue;
+        }
+        // the graph learns the file moved, as it would from a watcher: the
+        // files importing this package are cooked again with the new "?v="
+        // when the page comes back
+        urlInfo.onModified();
+        if (installMap.has(served.packageName)) {
+          continue;
+        }
+        installMap.set(served.packageName, {
+          packageName: served.packageName,
+          installedVersion,
+          servedVersion: served.version,
+          declaredVersion: null,
+          severity: "warning",
+        });
+      }
+    }
+  };
+
+  const checkDeclared = (installMap) => {
+    const statusMap = new Map();
     const nextProblemMap = new Map();
     for (const status of readDependencyStatuses(packageDirectory)) {
+      statusMap.set(status.packageName, status);
       if (status.state === "missing" || status.state === "outdated") {
         nextProblemMap.set(status.packageName, status);
       }
@@ -55,9 +114,21 @@ export const watchDependencies = (
       }
     }
     for (const [packageName, previousStatus] of problemMap) {
-      if (!nextProblemMap.has(packageName)) {
-        onInstalled(previousStatus);
+      if (nextProblemMap.has(packageName)) {
+        continue;
       }
+      const install = installMap.get(packageName);
+      if (install) {
+        install.declaredVersion = previousStatus.declaredVersion;
+        continue;
+      }
+      installMap.set(packageName, {
+        packageName,
+        installedVersion: statusMap.get(packageName).installedVersion,
+        servedVersion: null,
+        declaredVersion: previousStatus.declaredVersion,
+        severity: previousStatus.severity,
+      });
     }
     const changed =
       nextProblemMap.size !== problemMap.size ||
@@ -75,41 +146,92 @@ export const watchDependencies = (
     if (changed) {
       onChange(watcher.getProblems());
     }
-    if (problemMap.size === 0) {
-      stopPolling();
-    } else {
-      startPolling();
-    }
   };
 
-  const startPolling = () => {
-    if (timer) {
-      return;
+  // The declared dependencies are compared with node_modules only when
+  // something can have changed for them: the project package.json was edited,
+  // or a problem is known and an install may be fixing it. Comparing them at
+  // every tick would catch installs halfway and report a package as missing
+  // while it is being rewritten.
+  const check = ({ declared }) => {
+    const installMap = new Map();
+    checkServedVersions(installMap);
+    if (declared || problemMap.size > 0) {
+      checkDeclared(installMap);
     }
-    timer = setInterval(check, pollInterval);
-    timer.unref();
-  };
-  const stopPolling = () => {
-    if (!timer) {
-      return;
+    for (const install of installMap.values()) {
+      onInstalled(install);
     }
-    clearInterval(timer);
-    timer = null;
   };
 
   const unwatchPackageJson = registerFileLifecycle(
     new URL("package.json", packageDirectory.url),
     {
-      added: check,
-      updated: check,
+      added: () => check({ declared: true }),
+      updated: () => check({ declared: true }),
       keepProcessAlive: false,
     },
   );
-  check();
+  check({ declared: true });
+  const timer = setInterval(() => {
+    check({ declared: false });
+  }, pollInterval);
+  timer.unref();
 
   watcher.stop = () => {
-    stopPolling();
+    clearInterval(timer);
     unwatchPackageJson();
   };
   return watcher;
 };
+
+// The url graph keeps the content of every package.json it resolved a bare
+// specifier against, and that content holds the version the page received.
+// It is parsed once per content: the same string is seen at every tick.
+const servedVersionCache = new WeakMap();
+const readServedVersion = (urlInfo) => {
+  const { url, content } = urlInfo;
+  if (content === undefined) {
+    return null;
+  }
+  if (!url.startsWith("file:") || !url.endsWith("/package.json")) {
+    return null;
+  }
+  const nodeModulesIndex = url.lastIndexOf("/node_modules/");
+  if (nodeModulesIndex === -1) {
+    return null;
+  }
+  // dereferenced url infos stay in the graph; nothing imports this package anymore
+  if (urlInfo.referenceFromOthersSet.size === 0) {
+    return null;
+  }
+  const fromCache = servedVersionCache.get(urlInfo);
+  if (fromCache && fromCache.content === content) {
+    return fromCache;
+  }
+  let packageJson;
+  try {
+    packageJson = JSON.parse(content);
+  } catch {
+    return null;
+  }
+  const served = {
+    content,
+    directoryUrl: new URL("./", url).href,
+    packageName: packageNameFromSpecifier(
+      url.slice(nodeModulesIndex + "/node_modules/".length),
+    ),
+    version: packageJson.version,
+  };
+  servedVersionCache.set(urlInfo, served);
+  return served;
+};
+
+// an install in progress can be caught halfway, with a package.json not written yet
+const readInstalledPackageJson = (packageDirectory, directoryUrl) => {
+  try {
+    return packageDirectory.read(directoryUrl);
+  } catch {
+    return null;
+  }
+};

package/src/plugins/server_events/client/server_events_client.js

@@ -4,7 +4,7 @@ events_manager: {
     const callbacksMap = new Map();
     let cleanup;
     const addCallbacks = (namedCallbacks) => {
-      let callbacksMapSize = callbacksMap.size;
+      const sizeBeforeAdd = callbacksMap.size;
       Object.keys(namedCallbacks).forEach((eventName) => {
         const callback = namedCallbacks[eventName];
         const existingCallbacks = callbacksMap.get(eventName);
@@ -17,7 +17,10 @@ events_manager: {
         }
         callbacks.push(callback);
       });
-      if (effect && callbacksMapSize === 0 && callbacksMapSize.size > 0) {
+      // the effect owns whatever the callbacks need to exist (the connection),
+      // so it runs on the edge into "someone is listening" and its cleanup runs
+      // on the edge back out of it
+      if (sizeBeforeAdd === 0 && callbacksMap.size > 0) {
         cleanup = effect();
       }
 
@@ -25,7 +28,7 @@ events_manager: {
       return () => {
         if (removed) return;
         removed = true;
-        callbacksMapSize = callbacksMap.size;
+        const sizeBeforeRemove = callbacksMap.size;
         Object.keys(namedCallbacks).forEach((eventName) => {
           const callback = namedCallbacks[eventName];
           const callbacks = callbacksMap.get(eventName);
@@ -40,12 +43,7 @@ events_manager: {
           }
         });
         namedCallbacks = null; // allow garbage collect
-        if (
-          cleanup &&
-          typeof cleanup === "function" &&
-          callbacksMapSize > 0 &&
-          callbacksMapSize.size === 0
-        ) {
+        if (cleanup && sizeBeforeRemove > 0 && callbacksMap.size === 0) {
           cleanup();
           cleanup = null;
         }
@@ -86,9 +84,14 @@ connection_manager: {
     CLOSED: "closed",
   };
 
+  // The peer is a dev server being restarted, not a flaky network: there is no
+  // attempt count or time budget past which giving up would be correct. Attempts
+  // space out to retryAfterMax and never stop, and the moments where the server
+  // is most likely to be back already (tab visible, window focused, network
+  // back) skip the wait instead of leaving a detached page on screen.
   createConnectionManager = (
     attemptConnection,
-    { logs, retry, retryAfter, retryMaxAttempt, retryAllocatedMs },
+    { logs, retry, retryAfter, retryAfterMax },
   ) => {
     const readyState = {
       value: READY_STATES.CLOSED,
@@ -103,6 +106,7 @@ connection_manager: {
     };
 
     let _disconnect = () => {};
+    let _retryNow = () => {};
     const connect = () => {
       if (
         readyState.value === READY_STATES.CONNECTING ||
@@ -111,11 +115,11 @@ connection_manager: {
         return;
       }
 
-      let retryCount = 0;
-      let msSpent = 0;
+      let retryDelay = retryAfter;
+      let retryTimeout = null;
       const attempt = () => {
+        retryTimeout = null;
         readyState.goTo(READY_STATES.CONNECTING);
-        let timeout;
         const cancelAttempt = attemptConnection({
           onClosed: () => {
             if (!retry) {
@@ -125,24 +129,6 @@ connection_manager: {
               }
               return;
             }
-            if (retryCount > retryMaxAttempt) {
-              readyState.goTo(READY_STATES.CLOSED);
-              if (logs) {
-                console.info(
-                  `[jsenv] could not connect to server after ${retryMaxAttempt} attempt`,
-                );
-              }
-              return;
-            }
-            if (retryAllocatedMs && msSpent > retryAllocatedMs) {
-              readyState.goTo(READY_STATES.CLOSED);
-              if (logs) {
-                console.info(
-                  `[jsenv] could not connect to server in less than ${retryAllocatedMs}ms`,
-                );
-              }
-              return;
-            }
             // if closed while open -> connection lost
             // otherwise it's the attempt to connect for the first time
             // or to reconnect
@@ -153,13 +139,13 @@ connection_manager: {
                 );
               }
             }
-            retryCount++;
-            timeout = setTimeout(() => {
-              msSpent += retryAfter;
-              attempt();
-            }, retryAfter);
+            retryTimeout = setTimeout(attempt, retryDelay);
+            const nextRetryDelay = retryDelay * 2;
+            retryDelay =
+              nextRetryDelay > retryAfterMax ? retryAfterMax : nextRetryDelay;
           },
           onOpen: () => {
+            retryDelay = retryAfter;
             readyState.goTo(READY_STATES.OPEN);
             if (logs) {
               // console.info(`[jsenv] connected to server`);
@@ -168,10 +154,19 @@ connection_manager: {
         });
         _disconnect = () => {
           cancelAttempt();
-          clearTimeout(timeout);
+          clearTimeout(retryTimeout);
+          retryTimeout = null;
           readyState.goTo(READY_STATES.CLOSED);
         };
       };
+      _retryNow = () => {
+        if (retryTimeout === null) {
+          return;
+        }
+        clearTimeout(retryTimeout);
+        retryDelay = retryAfter;
+        attempt();
+      };
       attempt();
     };
 
@@ -198,6 +193,9 @@ connection_manager: {
         _disconnect();
       }
     });
+    const removeServerMightBeBackListeners = listenServerMightBeBack(() => {
+      _retryNow();
+    });
 
     return {
       readyState,
@@ -205,11 +203,31 @@ connection_manager: {
       disconnect,
       destroy: () => {
         removePageUnloadListener();
+        removeServerMightBeBackListeners();
         disconnect();
       },
     };
   };
 
+  const listenServerMightBeBack = (callback) => {
+    const removeOnlineListener = listenEvent(window, "online", callback);
+    const removeFocusListener = listenEvent(window, "focus", callback);
+    const removeVisibilityChangeListener = listenEvent(
+      document,
+      "visibilitychange",
+      () => {
+        if (document.visibilityState === "visible") {
+          callback();
+        }
+      },
+    );
+    return () => {
+      removeOnlineListener();
+      removeFocusListener();
+      removeVisibilityChangeListener();
+    };
+  };
+
   // const listenPageMightFreeze = (callback) => {
   //   const removePageHideListener = listenEvent(window, "pagehide", (pageHideEvent) => {
   //     if (pageHideEvent.persisted === true) {
@@ -275,8 +293,7 @@ connection_using_websocket: {
       useEventsToManageConnection = true,
       retry = false,
       retryAfter = 1000,
-      retryMaxAttempt = Infinity,
-      retryAllocatedMs = Infinity,
+      retryAfterMax = 5000,
     } = {},
   ) => {
     const connectionManager = createConnectionManager(
@@ -319,7 +336,7 @@ connection_using_websocket: {
           }
         };
       },
-      { logs, retry, retryAfter, retryMaxAttempt, retryAllocatedMs },
+      { logs, retry, retryAfter, retryAfterMax },
     );
     const eventsManager = createEventsManager({
       effect: () => {
@@ -443,7 +460,6 @@ const serverEventsInterface = {
     const websocketConnection = createWebSocketConnection(websocketUrl, {
       logs,
       retry: true,
-      retryAllocatedMs: 10_000,
     });
 
     const { readyState, connect, disconnect, listenEvents } =