@jsenv/core 41.5.20 → 41.5.22

package/dist/build/build.js

@@ -8184,6 +8184,140 @@ const asInheritedInjections = (injections) => {
   return inheritedInjections;
 };
 
+/*
+ * Text patches applied to files as they are served and built, keyed by file:
+ *
+ *   patches: {
+ *     "preact/dist/preact.mjs": [{ from: "a&&b", to: "a&&b&&c" }],
+ *   }
+ *
+ * A key is a url pattern relative to the root directory ("./main.js",
+ * "**\/*.css"), or a path inside a package ("preact/dist/preact.mjs") found by
+ * walking up from the root directory into node_modules, the way node does,
+ * so the key holds wherever the package manager hoists the package.
+ *
+ * Every `from` must occur exactly once in the file, otherwise the file fails
+ * to cook and says which patch did not apply: a dependency update that moved
+ * the patched code must be looked at, never silently unpatched.
+ */
+
+
+const jsenvPluginPatches = (rawPatches) => {
+  if (!rawPatches || Object.keys(rawPatches).length === 0) {
+    return [];
+  }
+  let findPatches;
+  const patchesPlugin = {
+    name: "jsenv:patches",
+    appliesDuring: "*",
+    init: (context) => {
+      const { rootDirectoryUrl } = context;
+      const patchesByPattern = {};
+      for (const key of Object.keys(rawPatches)) {
+        const patches = rawPatches[key];
+        assertPatches(patches, key);
+        patchesByPattern[resolvePatchKey(key, rootDirectoryUrl)] = patches;
+      }
+      const associations = URL_META.resolveAssociations(
+        { patches: patchesByPattern },
+        rootDirectoryUrl,
+      );
+      findPatches = (url) => {
+        const { patches } = URL_META.applyAssociations({
+          url: asUrlWithoutSearch(url),
+          associations,
+        });
+        return patches;
+      };
+    },
+    transformUrlContent: (urlInfo) => {
+      const patches = findPatches(urlInfo.url);
+      if (!patches) {
+        return null;
+      }
+      const { content } = urlInfo;
+      const magicSource = createMagicSource(content);
+      for (const { from, to } of patches) {
+        const start = content.indexOf(from);
+        const occurrenceCount =
+          start === -1 ? 0 : content.indexOf(from, start + 1) === -1 ? 1 : 2;
+        if (occurrenceCount !== 1) {
+          const fileRelativeUrl = urlToRelativeUrl(
+            urlInfo.url,
+            urlInfo.context.rootDirectoryUrl,
+          );
+          throw new Error(
+            `patch cannot apply on "${fileRelativeUrl}": ${JSON.stringify(from)} found ${occurrenceCount === 0 ? "nowhere" : "more than once"} in the file. The file may have changed since the patch was written.`,
+          );
+        }
+        magicSource.replace({
+          start,
+          end: start + from.length,
+          replacement: to,
+        });
+      }
+      return magicSource.toContentAndSourcemap();
+    },
+  };
+  return [patchesPlugin];
+};
+
+const assertPatches = (patches, key) => {
+  if (!Array.isArray(patches)) {
+    throw new TypeError(
+      `patches["${key}"] must be an array of { from, to }, got ${patches}`,
+    );
+  }
+  for (const patch of patches) {
+    if (
+      !patch ||
+      typeof patch.from !== "string" ||
+      patch.from === "" ||
+      typeof patch.to !== "string"
+    ) {
+      throw new TypeError(
+        `patches["${key}"] entries must be { from: string, to: string } with a non-empty "from"`,
+      );
+    }
+  }
+};
+
+// "./x", "../x", "/x", "file:///x" and "**/x" are url patterns; anything
+// else names a path inside a package, looked up in node_modules
+const resolvePatchKey = (key, rootDirectoryUrl) => {
+  if (
+    key.startsWith("./") ||
+    key.startsWith("../") ||
+    key.startsWith("/") ||
+    key.startsWith("file:") ||
+    key.startsWith("*")
+  ) {
+    return key;
+  }
+  const segments = key.split("/");
+  const packageName = key.startsWith("@")
+    ? `${segments[0]}/${segments[1]}`
+    : segments[0];
+  const pathInsidePackage = key.slice(packageName.length);
+  let directoryUrl = new URL(rootDirectoryUrl);
+  while (true) {
+    const packageDirectoryUrl = new URL(
+      `./node_modules/${packageName}/`,
+      directoryUrl,
+    );
+    if (existsSync(packageDirectoryUrl)) {
+      return String(new URL(`.${pathInsidePackage}`, packageDirectoryUrl));
+    }
+    const parentDirectoryUrl = new URL("../", directoryUrl);
+    if (parentDirectoryUrl.href === directoryUrl.href) {
+      throw new Error(
+        `patches["${key}"]: package "${packageName}" not found in any node_modules above ${rootDirectoryUrl}`,
+      );
+    }
+    directoryUrl = parentDirectoryUrl;
+  }
+};
+
 /*
  * 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:
@@ -10320,6 +10454,7 @@ const getCorePlugins = ({
   directoryListing = true,
   directoryReferenceEffect,
   supervisor,
+  patches,
   injections,
   transpilation = true,
   inlining = true,
@@ -10361,6 +10496,9 @@ const getCorePlugins = ({
     ...(packageBundle
       ? [jsenvPluginWorkspaceBundle({ packageDirectory })]
       : []),
+    // before everything else: what the other plugins read must be the
+    // patched file
+    ...jsenvPluginPatches(patches),
     // before reference analysis: an url written by an injection must hold its
     // final value when references are analyzed
     jsenvPluginInjections(injections),
@@ -12645,6 +12783,17 @@ const jsenvPluginMappings = (mappings) => {
  *          }
  *
  *        See startDevServer "ribbon" param for the full list of options.
+ * @param {object} [entryPoint.patches]
+ *        Text patches applied to files as they are built, as { file: [{ from, to }] }.
+ *        A key is a url pattern relative to sourceDirectoryUrl ("./main.js") or a path
+ *        inside a package ("preact/dist/preact.mjs", found in node_modules the way node does):
+ *
+ *          patches: {
+ *            "preact/dist/preact.mjs": [{ from: "a&&b", to: "a&&b&&c" }],
+ *          }
+ *
+ *        Each `from` must occur exactly once in the file, otherwise the build fails
+ *        and says which patch did not apply.
  * @param {object} [entryPoint.injections]
  *        Values to inject into files, as { urlPattern: getInjections }.
  *        Keys are url patterns relative to sourceDirectoryUrl ("./index.html", "**\/*.js"),
@@ -13510,6 +13659,7 @@ const entryPointDefaultParams = {
   directoryReferenceEffect: undefined,
   scenarioPlaceholders: undefined,
   ribbon: false,
+  patches: undefined,
   injections: undefined,
   transpilation: {},
   preserveComments: undefined,
@@ -13566,6 +13716,7 @@ const prepareEntryPointBuild = async (
     directoryReferenceEffect,
     scenarioPlaceholders,
     ribbon,
+    patches,
     injections,
     transpilation,
     preserveComments,
@@ -13734,6 +13885,7 @@ const prepareEntryPointBuild = async (
       magicExtensions,
       magicDirectoryIndex,
       directoryReferenceEffect,
+      patches,
       injections,
       transpilation: {
         babelHelpersAsImport: !explicitJsModuleConversion,

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 } =