vite: reduce network calls for route modules during HMR

by piggybacking on Vite's HMR runtime that already receives the updated module
remix-run · Jan 24, 2024 · b9632ca · b9632ca
1 parent 464966f
commit b9632ca
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
@@ -1467,29 +1467,28 @@ function isEqualJson(v1: unknown, v2: unknown) {
 }
 
 function addRefreshWrapper(
-  pluginConfig: ResolvedVitePluginConfig,
+  remixConfig: ResolvedVitePluginConfig,
   code: string,
   id: string
 ): string {
-  let isRoute =
-    id.endsWith(CLIENT_ROUTE_QUERY_STRING) || getRoute(pluginConfig, id);
-  let acceptExports = isRoute
-    ? [
-        "clientAction",
-        "clientLoader",
-        "handle",
-        "meta",
-        "links",
-        "shouldRevalidate",
-      ]
-    : [];
+  let route = getRoute(remixConfig, id);
+  let acceptExports =
+    route || id.endsWith(CLIENT_ROUTE_QUERY_STRING)
+      ? [
+          "clientAction",
+          "clientLoader",
+          "handle",
+          "meta",
+          "links",
+          "shouldRevalidate",
+        ]
+      : [];
   return (
     REACT_REFRESH_HEADER.replace("__SOURCE__", JSON.stringify(id)) +
     code +
-    REACT_REFRESH_FOOTER.replace("__SOURCE__", JSON.stringify(id)).replace(
-      "__ACCEPT_EXPORTS__",
-      JSON.stringify(acceptExports)
-    )
+    REACT_REFRESH_FOOTER.replace("__SOURCE__", JSON.stringify(id))
+      .replace("__ACCEPT_EXPORTS__", JSON.stringify(acceptExports))
+      .replaceAll("__ROUTE_ID__", JSON.stringify(route && route.id))
   );
 }
 
@@ -1523,6 +1522,7 @@ if (import.meta.hot && !inWebWorker && window.__remixLiveReloadEnabled) {
     RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
     import.meta.hot.accept((nextExports) => {
       if (!nextExports) return;
+      __ROUTE_ID__ && window.__remixRouteModuleUpdates.set(__ROUTE_ID__, nextExports);
       const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports, __ACCEPT_EXPORTS__);
       if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
     });

diff --git a/packages/remix-dev/vite/static/refresh-utils.cjs b/packages/remix-dev/vite/static/refresh-utils.cjs
@@ -17,8 +17,9 @@ const enqueueUpdate = debounce(async () => {
 
     for (let route of routeUpdates.values()) {
       manifest.routes[route.id] = route;
-
-      let imported = await __hmr_import(route.url + "?t=" + Date.now());
+      let imported =
+        window.__remixRouteModuleUpdates.get(route.id) ??
+        (await __hmr_import(route.url + "?t=" + Date.now()));
       let routeModule = {
         ...imported,
         // react-refresh takes care of updating these in-place,
@@ -53,6 +54,7 @@ const enqueueUpdate = debounce(async () => {
     );
     __remixRouter._internalSetRoutes(routes);
     routeUpdates.clear();
+    window.__remixRouteModuleUpdates.clear();
   }
 
   await revalidate();
@@ -138,6 +140,7 @@ function __hmr_import(module) {
 }
 
 const routeUpdates = new Map();
+window.__remixRouteModuleUpdates = new Map();
 
 async function revalidate() {
   let { promise, resolve } = channel();