From df0d4a0960e94a99190e6a8ecd603b118115bed8 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 25 Jan 2023 15:41:46 -0500
Subject: [PATCH 01/66] wip

---
 packages/remix-dev/compiler/compileBrowser.ts | 57 ++++++++++++++++++-
 packages/remix-dev/compiler/remixCompiler.ts  |  9 ++-
 packages/remix-dev/compiler/watch.ts          | 18 ++++--
 packages/remix-dev/devServer2.ts              |  8 ++-
 packages/remix-dev/liveReload.ts              |  6 +-
 5 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 826310843e3..10f413d0fed 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -31,7 +31,9 @@ import invariant from "../invariant";
 
 export type BrowserCompiler = {
   // produce ./public/build/
-  compile: (manifestChannel: WriteChannel<AssetsManifest>) => Promise<void>;
+  compile: (
+    manifestChannel: WriteChannel<AssetsManifest>
+  ) => Promise<unknown[] | undefined>;
   dispose: () => void;
 };
 
@@ -173,7 +175,7 @@ export const createBrowserCompiler = (
 ): BrowserCompiler => {
   let appCompiler: esbuild.BuildIncremental;
   let cssCompiler: esbuild.BuildIncremental;
-
+  let prevMetafile: esbuild.Metafile;
   let compile = async (manifestChannel: WriteChannel<AssetsManifest>) => {
     let appBuildTask = async () => {
       appCompiler = await (!appCompiler
@@ -188,6 +190,7 @@ export const createBrowserCompiler = (
         appCompiler.metafile,
         "Expected app compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
       );
+      return appCompiler.metafile;
     };
 
     let cssBuildTask = async () => {
@@ -270,7 +273,11 @@ export const createBrowserCompiler = (
       return cssBundlePath;
     };
 
-    let [cssBundlePath] = await Promise.all([cssBuildTask(), appBuildTask()]);
+    let [cssBundlePath, metafile] = await Promise.all([
+      cssBuildTask(),
+      appBuildTask(),
+    ]);
+    // TODO map outputs to public paths
 
     let manifest = await createAssetsManifest({
       config: remixConfig,
@@ -279,6 +286,50 @@ export const createBrowserCompiler = (
     });
     manifestChannel.write(manifest);
     await writeAssetsManifest(remixConfig, manifest);
+
+    if (prevMetafile !== undefined) {
+      let create_input2output = (
+        metafile: esbuild.Metafile
+      ): Record<string, string> => {
+        let inputs = new Set(Object.keys(metafile.inputs));
+        let input2output: Record<string, string> = {};
+        for (let [outputPath, output] of Object.entries(metafile.outputs)) {
+          for (let x of Object.keys(output.inputs)) {
+            if (inputs.has(x)) {
+              input2output[x] = outputPath;
+            }
+          }
+        }
+        return input2output;
+      };
+      let updates = [];
+      let prev_i2o = create_input2output(prevMetafile);
+      let i2o = create_input2output(metafile);
+      console.log(
+        JSON.stringify(
+          {
+            prev_i2o,
+            i2o,
+          },
+          undefined,
+          2
+        )
+      );
+      for (let input of Object.keys(metafile.inputs)) {
+        let prev_o = prev_i2o[input];
+        let o = i2o[input];
+        if (prev_o !== o) {
+          updates.push({
+            // TODO replace /public/build with /build, but respect remix config settings for those
+            id: input,
+            url: "",
+          });
+        }
+      }
+      prevMetafile = metafile;
+      return updates;
+    }
+    prevMetafile = metafile;
   };
 
   return {
diff --git a/packages/remix-dev/compiler/remixCompiler.ts b/packages/remix-dev/compiler/remixCompiler.ts
index 4b7250cc87e..5c10f63cd87 100644
--- a/packages/remix-dev/compiler/remixCompiler.ts
+++ b/packages/remix-dev/compiler/remixCompiler.ts
@@ -28,15 +28,18 @@ export const compile = async (
   options: {
     onCompileFailure?: OnCompileFailure;
   } = {}
-): Promise<AssetsManifest | undefined> => {
+): Promise<
+  { assetsManifest?: AssetsManifest; hmrUpdates: unknown } | undefined
+> => {
   try {
     let assetsManifestChannel = createChannel<AssetsManifest>();
     let browserPromise = compiler.browser.compile(assetsManifestChannel);
     let serverPromise = compiler.server.compile(assetsManifestChannel);
-    await Promise.all([browserPromise, serverPromise]);
-    return assetsManifestChannel.read();
+    let [hmrUpdates] = await Promise.all([browserPromise, serverPromise]);
+    return { assetsManifest: await assetsManifestChannel.read(), hmrUpdates };
   } catch (error: unknown) {
     options.onCompileFailure?.(error as Error);
+    return undefined;
   }
 };
 
diff --git a/packages/remix-dev/compiler/watch.ts b/packages/remix-dev/compiler/watch.ts
index f8bad392d21..43d7165692f 100644
--- a/packages/remix-dev/compiler/watch.ts
+++ b/packages/remix-dev/compiler/watch.ts
@@ -23,7 +23,11 @@ function isEntryPoint(config: RemixConfig, file: string): boolean {
 export type WatchOptions = Partial<CompileOptions> & {
   reloadConfig?(root: string): Promise<RemixConfig>;
   onRebuildStart?(): void;
-  onRebuildFinish?(durationMs: number, assetsManifest?: AssetsManifest): void;
+  onRebuildFinish?(
+    durationMs: number,
+    assetsManifest?: AssetsManifest,
+    hmrEvent?: unknown
+  ): void;
   onFileCreated?(file: string): void;
   onFileChanged?(file: string): void;
   onFileDeleted?(file: string): void;
@@ -77,15 +81,19 @@ export async function watch(
     }
 
     compiler = createRemixCompiler(config, options);
-    let assetsManifest = await compile(compiler, { onCompileFailure });
-    onRebuildFinish?.(Date.now() - start, assetsManifest);
+    let { assetsManifest, hmrUpdates } =
+      (await compile(compiler, { onCompileFailure })) ?? {};
+    onRebuildFinish?.(Date.now() - start, assetsManifest, hmrUpdates);
   }, 500);
 
   let rebuild = debounce(async () => {
     onRebuildStart?.();
     let start = Date.now();
-    let assetsManifest = await compile(compiler, { onCompileFailure });
-    onRebuildFinish?.(Date.now() - start, assetsManifest);
+    let { assetsManifest, hmrUpdates } =
+      (await compile(compiler, {
+        onCompileFailure,
+      })) ?? {};
+    onRebuildFinish?.(Date.now() - start, assetsManifest, hmrUpdates);
   }, 100);
 
   let toWatch = [config.appDirectory];
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 43772ead8f6..48f907b71e8 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -120,10 +120,16 @@ export let serve = async (
       clean(config);
       socket.log("Rebuilding...");
     },
-    onRebuildFinish: async (durationMs, assetsManifest) => {
+    onRebuildFinish: async (durationMs, assetsManifest, hmrUpdates) => {
       if (!assetsManifest) return;
       socket.log(`Rebuilt in ${prettyMs(durationMs)}`);
 
+      console.log({ hmrUpdates });
+      if (hmrUpdates) {
+        socket.hmr(hmrUpdates);
+        return;
+      }
+
       info(`Waiting for ${appServerOrigin}...`);
       let start = Date.now();
       await waitForAppServer(assetsManifest.version);
diff --git a/packages/remix-dev/liveReload.ts b/packages/remix-dev/liveReload.ts
index 81c16a34758..6905739df24 100644
--- a/packages/remix-dev/liveReload.ts
+++ b/packages/remix-dev/liveReload.ts
@@ -23,5 +23,9 @@ export let serve = (options: { port: number }) => {
     broadcast({ type: "LOG", message: _message });
   };
 
-  return { reload, log, close: wss.close };
+  let hmr = (event: unknown) => {
+    log(`[HMR] sending event: ${JSON.stringify(event)}`);
+  };
+
+  return { reload, hmr, log, close: wss.close };
 };

From 6a9a5ff9c8b3c53a35b7684ee4e52cf42e5202d6 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 25 Jan 2023 16:07:09 -0500
Subject: [PATCH 02/66] wip

---
 packages/remix-dev/compiler/compileBrowser.ts |  25 ++--
 .../remix-dev/compiler/plugins/hmrPlugin.ts   | 107 ++++++++++++++++++
 2 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 packages/remix-dev/compiler/plugins/hmrPlugin.ts

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 10f413d0fed..703110af24f 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -125,6 +125,15 @@ const createEsbuildConfig = (
     NodeModulesPolyfillPlugin(),
   ].filter(isNotNull);
 
+  if (mode === "development") {
+    // TODO do this for all deps in package.json
+    entryPoints["react"] = "react";
+    entryPoints["react-dom"] = "react-dom";
+    entryPoints["react-dom/client"] = "react-dom/client";
+    entryPoints["react-refresh/runtime"] = "react-refresh/runtime";
+    entryPoints["remix:hmr"] = "remix:hmr";
+  }
+
   return {
     entryPoints,
     outdir: config.assetsBuildDirectory,
@@ -305,24 +314,16 @@ export const createBrowserCompiler = (
       let updates = [];
       let prev_i2o = create_input2output(prevMetafile);
       let i2o = create_input2output(metafile);
-      console.log(
-        JSON.stringify(
-          {
-            prev_i2o,
-            i2o,
-          },
-          undefined,
-          2
-        )
-      );
       for (let input of Object.keys(metafile.inputs)) {
         let prev_o = prev_i2o[input];
         let o = i2o[input];
         if (prev_o !== o) {
+          let url =
+            remixConfig.publicPath +
+            path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
           updates.push({
-            // TODO replace /public/build with /build, but respect remix config settings for those
             id: input,
-            url: "",
+            url,
           });
         }
       }
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
new file mode 100644
index 00000000000..f0c4df1f54b
--- /dev/null
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -0,0 +1,107 @@
+import type { Plugin } from "esbuild";
+
+export let hmrPlugin = (): Plugin => {
+  return {
+    name: "remix-hmr",
+    setup: (build) => {
+      build.onResolve({ filter: /^remix:hmr$/ }, (args) => {
+        return {
+          namespace: "remix-hmr",
+          path: args.path,
+        };
+      });
+      build.onLoad({ filter: /.*/, namespace: "remix-hmr" }, () => {
+        let contents = `
+        if (!window.__hmr__) {
+  window.__hmr__ = {
+    contexts: {},
+  };
+
+  const socketURL = new URL(
+    "/__hmr__",
+    window.location.href.replace(/^http(s)?:/, "ws$1:")
+  );
+  const socket = (window.__hmr__.socket = new WebSocket(socketURL.href));
+  socket.addEventListener("message", async (event) => {
+    const payload = JSON.parse(event.data);
+
+    switch (payload?.type) {
+      case "reload":
+        window.location.reload();
+        break;
+      case "hmr":
+        if (!payload.updates?.length) return;
+
+        let anyAccepted = false;
+        for (const update of payload.updates) {
+          if (window.__hmr__.contexts[update.id]) {
+            const accepted = window.__hmr__.contexts[update.id].emit(
+              await import(update.url + "?t=" + Date.now())
+            );
+            if (accepted) {
+              console.log("[HMR] Updated accepted by", update.id);
+              anyAccepted = true;
+            }
+          }
+        }
+
+        if (!anyAccepted) {
+          console.log("[HMR] Updated rejected, reloading...");
+          window.location.reload();
+        }
+        break;
+    }
+  });
+}
+
+export function createHotContext(id: string): ImportMetaHot {
+  let callback: undefined | ((mod: ModuleNamespace) => void);
+  let disposed = false;
+
+  const hot = {
+    accept: (cb) => {
+      if (disposed) {
+        throw new Error("import.meta.hot.accept() called after dispose()");
+      }
+      if (callback) {
+        throw new Error("import.meta.hot.accept() already called");
+      }
+      callback = cb;
+    },
+    dispose: () => {
+      disposed = true;
+      callback = undefined;
+    },
+    emit(self: ModuleNamespace) {
+      if (disposed) {
+        throw new Error("import.meta.hot.emit() called after dispose()");
+      }
+
+      if (callback) {
+        callback(self);
+        return true;
+      }
+      return false;
+    },
+  };
+
+  if (window.__hmr__.contexts[id]) {
+    window.__hmr__.contexts[id].dispose();
+    window.__hmr__.contexts[id] = undefined;
+  }
+  window.__hmr__.contexts[id] = hot;
+
+  return hot;
+}
+
+declare global {
+  interface Window {
+    __hmr__: any;
+  }
+}
+        `;
+        return { loader: "ts", contents };
+      });
+    },
+  };
+};

From 44c1fbb95375fb77bcc7e96ee9cfb6ef1f3c2d4a Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 25 Jan 2023 16:23:38 -0500
Subject: [PATCH 03/66] wip

---
 packages/remix-dev/compiler/compileBrowser.ts |  2 ++
 packages/remix-dev/package.json               |  2 ++
 packages/remix-react/components.tsx           | 10 +++++++
 yarn.lock                                     | 29 +++++++++++++++++++
 4 files changed, 43 insertions(+)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 703110af24f..a0b15520e9f 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -28,6 +28,7 @@ import {
 } from "./plugins/cssBundleEntryModulePlugin";
 import { writeFileSafe } from "./utils/fs";
 import invariant from "../invariant";
+import { hmrPlugin } from "./plugins/hmrPlugin";
 
 export type BrowserCompiler = {
   // produce ./public/build/
@@ -132,6 +133,7 @@ const createEsbuildConfig = (
     entryPoints["react-dom/client"] = "react-dom/client";
     entryPoints["react-refresh/runtime"] = "react-refresh/runtime";
     entryPoints["remix:hmr"] = "remix:hmr";
+    plugins.push(hmrPlugin());
   }
 
   return {
diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json
index 5ab257046d1..1c9e613a4c7 100644
--- a/packages/remix-dev/package.json
+++ b/packages/remix-dev/package.json
@@ -44,6 +44,7 @@
     "fs-extra": "^10.0.0",
     "get-port": "^5.1.1",
     "gunzip-maybe": "^1.4.2",
+    "http-proxy": "^1.18.1",
     "inquirer": "^8.2.1",
     "jsesc": "3.0.2",
     "json5": "^2.2.1",
@@ -60,6 +61,7 @@
     "prettier": "2.7.1",
     "pretty-ms": "^7.0.1",
     "proxy-agent": "^5.0.0",
+    "react-refresh": "^0.14.0",
     "recast": "^0.21.5",
     "remark-frontmatter": "4.0.1",
     "remark-mdx-frontmatter": "^1.0.1",
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 272119db822..05d47b137c2 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -902,6 +902,7 @@ export function Scripts(props: ScriptProps) {
           ? `__remixContext.a=${deferredScripts.length};`
           : "");
 
+    // TODO: change to be dynamic imports for routes
     let routeModulesScript = !isStatic
       ? " "
       : `${matches
@@ -1547,6 +1548,15 @@ function convertRouterFetcherToRemixFetcher(
   return fetcher;
 }
 
+export let Hmr = () => {
+  let [hydrated, setHydrated] = React.useState(false);
+  React.useEffect(() => {
+    setHydrated(true);
+  }, []);
+  if (!hydrated) return null;
+  return <script src={window.__remixContext.dev.hmrRuntime} />;
+};
+
 // Dead Code Elimination magic for production builds.
 // This way devs don't have to worry about doing the NODE_ENV check themselves.
 // If running an un-bundled server outside of `remix dev` you will still need
diff --git a/yarn.lock b/yarn.lock
index d318cafb547..20900c046aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6234,6 +6234,11 @@ eventemitter2@^6.4.3:
   resolved "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz"
   integrity sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==
 
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
 events@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/events/-/events-1.1.1.tgz"
@@ -6537,6 +6542,11 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz"
   integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
 
+follow-redirects@^1.0.0:
+  version "1.15.2"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz"
@@ -7096,6 +7106,15 @@ http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
+http-proxy@^1.18.1:
+  version "1.18.1"
+  resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  dependencies:
+    eventemitter3 "^4.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz"
@@ -10716,6 +10735,11 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-refresh@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
+  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
+
 react-router-dom@6.8.1:
   version "6.8.1"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz#7e136b67d9866f55999e9a8482c7008e3c575ac9"
@@ -11043,6 +11067,11 @@ requireindex@^1.2.0, requireindex@~1.2.0:
   resolved "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz"
   integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz"

From 2c2b32272dab1a30c1f3ae65edc564d4e04551b5 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 25 Jan 2023 15:35:25 -0800
Subject: [PATCH 04/66] IT LIVES

---
 packages/remix-dev/compiler/assets.ts         |  12 +-
 packages/remix-dev/compiler/compileBrowser.ts | 271 +++++++++---------
 .../remix-dev/compiler/plugins/hmrPlugin.ts   | 232 +++++++++++----
 packages/remix-dev/compiler/remixCompiler.ts  |   2 +-
 packages/remix-dev/compiler/watch.ts          |   2 +-
 packages/remix-dev/devServer2.ts              |  23 +-
 packages/remix-dev/liveReload.ts              |   9 +-
 packages/remix-react/browser.tsx              |   4 +
 packages/remix-react/components.tsx           |  62 ++--
 packages/remix-react/entry.ts                 |   1 +
 packages/remix-server-runtime/entry.ts        |   1 +
 11 files changed, 399 insertions(+), 220 deletions(-)

diff --git a/packages/remix-dev/compiler/assets.ts b/packages/remix-dev/compiler/assets.ts
index 96c103e3f9f..fd72a2d5760 100644
--- a/packages/remix-dev/compiler/assets.ts
+++ b/packages/remix-dev/compiler/assets.ts
@@ -32,6 +32,7 @@ export interface AssetsManifest {
     };
   };
   cssBundleHref?: string;
+  hmrRuntime?: string;
 }
 
 export async function createAssetsManifest({
@@ -119,7 +120,16 @@ export async function createAssetsManifest({
 
   let cssBundleHref = cssBundlePath ? resolveUrl(cssBundlePath) : undefined;
 
-  return { version, entry, routes, cssBundleHref };
+  let hmrRuntime: string | undefined;
+  for (const [outputPath, output] of Object.entries(metafile.outputs)) {
+    if (Object.keys(output.inputs).includes("remix-hmr:remix:hmr")) {
+      hmrRuntime =
+        config.publicPath +
+        path.relative(config.assetsBuildDirectory, path.resolve(outputPath));
+    }
+  }
+
+  return { version, entry, routes, cssBundleHref, hmrRuntime };
 }
 
 type ImportsCache = { [routeId: string]: string[] };
diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index a0b15520e9f..27ab1a582b2 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -132,8 +132,8 @@ const createEsbuildConfig = (
     entryPoints["react-dom"] = "react-dom";
     entryPoints["react-dom/client"] = "react-dom/client";
     entryPoints["react-refresh/runtime"] = "react-refresh/runtime";
-    entryPoints["remix:hmr"] = "remix:hmr";
-    plugins.push(hmrPlugin());
+    // entryPoints["remix:hmr"] = "remix:hmr";
+    plugins.push(hmrPlugin({ remixConfig: config }));
   }
 
   return {
@@ -177,6 +177,9 @@ const createEsbuildConfig = (
     jsx: "automatic",
     jsxDev: options.mode !== "production",
     plugins,
+    supported: {
+      "import-meta": true,
+    },
   };
 };
 
@@ -188,151 +191,155 @@ export const createBrowserCompiler = (
   let cssCompiler: esbuild.BuildIncremental;
   let prevMetafile: esbuild.Metafile;
   let compile = async (manifestChannel: WriteChannel<AssetsManifest>) => {
-    let appBuildTask = async () => {
-      appCompiler = await (!appCompiler
-        ? esbuild.build({
-            ...createEsbuildConfig("app", remixConfig, options),
-            metafile: true,
-            incremental: true,
-          })
-        : appCompiler.rebuild());
-
-      invariant(
-        appCompiler.metafile,
-        "Expected app compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
-      );
-      return appCompiler.metafile;
-    };
+    try {
+      let appBuildTask = async () => {
+        appCompiler = await (!appCompiler
+          ? esbuild.build({
+              ...createEsbuildConfig("app", remixConfig, options),
+              metafile: true,
+              incremental: true,
+            })
+          : appCompiler.rebuild());
+
+        invariant(
+          appCompiler.metafile,
+          "Expected app compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
+        );
+        return appCompiler.metafile;
+      };
 
-    let cssBuildTask = async () => {
-      if (!isCssBundlingEnabled(remixConfig)) {
-        return;
-      }
+      let cssBuildTask = async () => {
+        if (!isCssBundlingEnabled(remixConfig)) {
+          return;
+        }
 
-      // The types aren't great when combining write: false and incremental: true
-      //  so we need to assert that it's an incremental build
-      cssCompiler = (await (!cssCompiler
-        ? esbuild.build({
-            ...createEsbuildConfig("css", remixConfig, options),
-            metafile: true,
-            incremental: true,
-            write: false,
-          })
-        : cssCompiler.rebuild())) as esbuild.BuildIncremental;
-
-      invariant(
-        cssCompiler.metafile,
-        "Expected CSS compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
-      );
-
-      let outputFiles = cssCompiler.outputFiles || [];
-
-      let isCssBundleFile = (
-        outputFile: esbuild.OutputFile,
-        extension: ".css" | ".css.map"
-      ): boolean => {
-        return (
-          path.dirname(outputFile.path) === remixConfig.assetsBuildDirectory &&
-          path.basename(outputFile.path).startsWith("css-bundle") &&
-          outputFile.path.endsWith(extension)
+        // The types aren't great when combining write: false and incremental: true
+        //  so we need to assert that it's an incremental build
+        cssCompiler = (await (!cssCompiler
+          ? esbuild.build({
+              ...createEsbuildConfig("css", remixConfig, options),
+              metafile: true,
+              incremental: true,
+              write: false,
+            })
+          : cssCompiler.rebuild())) as esbuild.BuildIncremental;
+
+        invariant(
+          cssCompiler.metafile,
+          "Expected CSS compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
         );
-      };
 
-      let cssBundleFile = outputFiles.find((outputFile) =>
-        isCssBundleFile(outputFile, ".css")
-      );
+        let outputFiles = cssCompiler.outputFiles || [];
+
+        let isCssBundleFile = (
+          outputFile: esbuild.OutputFile,
+          extension: ".css" | ".css.map"
+        ): boolean => {
+          return (
+            path.dirname(outputFile.path) ===
+              remixConfig.assetsBuildDirectory &&
+            path.basename(outputFile.path).startsWith("css-bundle") &&
+            outputFile.path.endsWith(extension)
+          );
+        };
+
+        let cssBundleFile = outputFiles.find((outputFile) =>
+          isCssBundleFile(outputFile, ".css")
+        );
 
-      if (!cssBundleFile) {
-        return;
-      }
+        if (!cssBundleFile) {
+          return;
+        }
 
-      let cssBundlePath = cssBundleFile.path;
-
-      let { css, map } = await postcss([
-        // We need to discard duplicate rules since "composes"
-        // in CSS Modules can result in duplicate styles
-        postcssDiscardDuplicates(),
-      ]).process(cssBundleFile.text, {
-        from: cssBundlePath,
-        to: cssBundlePath,
-        map: options.sourcemap && {
-          prev: outputFiles.find((outputFile) =>
-            isCssBundleFile(outputFile, ".css.map")
-          )?.text,
-          inline: false,
-          annotation: false,
-          sourcesContent: true,
-        },
-      });
+        let cssBundlePath = cssBundleFile.path;
+
+        let { css, map } = await postcss([
+          // We need to discard duplicate rules since "composes"
+          // in CSS Modules can result in duplicate styles
+          postcssDiscardDuplicates(),
+        ]).process(cssBundleFile.text, {
+          from: cssBundlePath,
+          to: cssBundlePath,
+          map: options.sourcemap && {
+            prev: outputFiles.find((outputFile) =>
+              isCssBundleFile(outputFile, ".css.map")
+            )?.text,
+            inline: false,
+            annotation: false,
+            sourcesContent: true,
+          },
+        });
+
+        await fse.ensureDir(path.dirname(cssBundlePath));
+
+        await Promise.all([
+          fse.writeFile(cssBundlePath, css),
+          options.mode !== "production" && map
+            ? fse.writeFile(`${cssBundlePath}.map`, map.toString()) // Write our updated source map rather than esbuild's
+            : null,
+          ...outputFiles
+            .filter((outputFile) => !/\.(css|js|map)$/.test(outputFile.path))
+            .map(async (asset) => {
+              await fse.ensureDir(path.dirname(asset.path));
+              await fse.writeFile(asset.path, asset.contents);
+            }),
+        ]);
+
+        // Return the CSS bundle path so we can use it to generate the manifest
+        return cssBundlePath;
+      };
 
-      await fse.ensureDir(path.dirname(cssBundlePath));
-
-      await Promise.all([
-        fse.writeFile(cssBundlePath, css),
-        options.mode !== "production" && map
-          ? fse.writeFile(`${cssBundlePath}.map`, map.toString()) // Write our updated source map rather than esbuild's
-          : null,
-        ...outputFiles
-          .filter((outputFile) => !/\.(css|js|map)$/.test(outputFile.path))
-          .map(async (asset) => {
-            await fse.ensureDir(path.dirname(asset.path));
-            await fse.writeFile(asset.path, asset.contents);
-          }),
+      let [cssBundlePath, metafile] = await Promise.all([
+        cssBuildTask(),
+        appBuildTask(),
       ]);
 
-      // Return the CSS bundle path so we can use it to generate the manifest
-      return cssBundlePath;
-    };
-
-    let [cssBundlePath, metafile] = await Promise.all([
-      cssBuildTask(),
-      appBuildTask(),
-    ]);
-    // TODO map outputs to public paths
-
-    let manifest = await createAssetsManifest({
-      config: remixConfig,
-      metafile: appCompiler.metafile!,
-      cssBundlePath,
-    });
-    manifestChannel.write(manifest);
-    await writeAssetsManifest(remixConfig, manifest);
-
-    if (prevMetafile !== undefined) {
-      let create_input2output = (
-        metafile: esbuild.Metafile
-      ): Record<string, string> => {
-        let inputs = new Set(Object.keys(metafile.inputs));
-        let input2output: Record<string, string> = {};
-        for (let [outputPath, output] of Object.entries(metafile.outputs)) {
-          for (let x of Object.keys(output.inputs)) {
-            if (inputs.has(x)) {
-              input2output[x] = outputPath;
+      let manifest = await createAssetsManifest({
+        config: remixConfig,
+        metafile: appCompiler.metafile!,
+        cssBundlePath,
+      });
+      manifestChannel.write(manifest);
+      await writeAssetsManifest(remixConfig, manifest);
+
+      if (prevMetafile !== undefined) {
+        let create_input2output = (
+          metafile: esbuild.Metafile
+        ): Record<string, string> => {
+          let inputs = new Set(Object.keys(metafile.inputs));
+          let input2output: Record<string, string> = {};
+          for (let [outputPath, output] of Object.entries(metafile.outputs)) {
+            for (let x of Object.keys(output.inputs)) {
+              if (inputs.has(x)) {
+                input2output[x] = outputPath;
+              }
             }
           }
+          return input2output;
+        };
+        let updates = [];
+        let prev_i2o = create_input2output(prevMetafile);
+        let i2o = create_input2output(metafile);
+        for (let input of Object.keys(metafile.inputs)) {
+          let prev_o = prev_i2o[input];
+          let o = i2o[input];
+          if (prev_o !== o) {
+            let url =
+              remixConfig.publicPath +
+              path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
+            updates.push({
+              id: input,
+              url,
+            });
+          }
         }
-        return input2output;
-      };
-      let updates = [];
-      let prev_i2o = create_input2output(prevMetafile);
-      let i2o = create_input2output(metafile);
-      for (let input of Object.keys(metafile.inputs)) {
-        let prev_o = prev_i2o[input];
-        let o = i2o[input];
-        if (prev_o !== o) {
-          let url =
-            remixConfig.publicPath +
-            path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
-          updates.push({
-            id: input,
-            url,
-          });
-        }
+        prevMetafile = metafile;
+        return updates;
       }
       prevMetafile = metafile;
-      return updates;
+    } catch (reason) {
+      console.error("HMR update failed", reason);
     }
-    prevMetafile = metafile;
   };
 
   return {
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index f0c4df1f54b..a256dc1e417 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -1,64 +1,67 @@
-import type { Plugin } from "esbuild";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import * as esbuild from "esbuild";
 
-export let hmrPlugin = (): Plugin => {
+import type { RemixConfig } from "../../config";
+
+export let hmrPlugin = ({
+  remixConfig,
+}: {
+  remixConfig: RemixConfig;
+}): esbuild.Plugin => {
   return {
     name: "remix-hmr",
-    setup: (build) => {
+    setup: async (build) => {
+      let babel = await import("@babel/core");
+      // @ts-expect-error
+      let reactRefresh = await import("react-refresh/babel");
+
+      let IS_FAST_REFRESH_ENABLED = /\$RefreshReg\$\(/;
+
       build.onResolve({ filter: /^remix:hmr$/ }, (args) => {
         return {
-          namespace: "remix-hmr",
+          namespace: "remix-runtime",
           path: args.path,
         };
       });
-      build.onLoad({ filter: /.*/, namespace: "remix-hmr" }, () => {
+      build.onLoad({ filter: /.*/, namespace: "remix-runtime" }, () => {
         let contents = `
-        if (!window.__hmr__) {
-  window.__hmr__ = {
-    contexts: {},
-  };
+import RefreshRuntime from "react-refresh/runtime";
 
-  const socketURL = new URL(
-    "/__hmr__",
-    window.location.href.replace(/^http(s)?:/, "ws$1:")
-  );
-  const socket = (window.__hmr__.socket = new WebSocket(socketURL.href));
-  socket.addEventListener("message", async (event) => {
-    const payload = JSON.parse(event.data);
+declare global {
+  interface Window {
+    $RefreshReg$: any;
+    $RefreshSig$: any;
+  }
+}
 
-    switch (payload?.type) {
-      case "reload":
-        window.location.reload();
-        break;
-      case "hmr":
-        if (!payload.updates?.length) return;
+var prevRefreshReg = window.$RefreshReg$;
+var prevRefreshSig = window.$RefreshSig$;
 
-        let anyAccepted = false;
-        for (const update of payload.updates) {
-          if (window.__hmr__.contexts[update.id]) {
-            const accepted = window.__hmr__.contexts[update.id].emit(
-              await import(update.url + "?t=" + Date.now())
-            );
-            if (accepted) {
-              console.log("[HMR] Updated accepted by", update.id);
-              anyAccepted = true;
-            }
-          }
-        }
+window.$RefreshReg$ = (type, id) => {
+  const fullId = id;
+  RefreshRuntime.register(type, fullId);
+};
+window.$RefreshReg$ = prevRefreshReg;
+window.$RefreshSig$ = prevRefreshSig;
+window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
+window.$RefreshRuntime$ = RefreshRuntime;
 
-        if (!anyAccepted) {
-          console.log("[HMR] Updated rejected, reloading...");
-          window.location.reload();
-        }
-        break;
-    }
-  });
+window.$RefreshRuntime$.injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => {};
+window.$RefreshSig$ = () => (type) => type;
+
+if (!window.__hmr__) {
+  window.__hmr__ = {
+    contexts: {},
+  };
 }
 
 export function createHotContext(id: string): ImportMetaHot {
   let callback: undefined | ((mod: ModuleNamespace) => void);
   let disposed = false;
 
-  const hot = {
+  let hot = {
     accept: (cb) => {
       if (disposed) {
         throw new Error("import.meta.hot.accept() called after dispose()");
@@ -70,13 +73,8 @@ export function createHotContext(id: string): ImportMetaHot {
     },
     dispose: () => {
       disposed = true;
-      callback = undefined;
     },
     emit(self: ModuleNamespace) {
-      if (disposed) {
-        throw new Error("import.meta.hot.emit() called after dispose()");
-      }
-
       if (callback) {
         callback(self);
         return true;
@@ -99,8 +97,146 @@ declare global {
     __hmr__: any;
   }
 }
+
+function remixLiveReloadConnect(config) {
+  let protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  let host = location.hostname;
+  let port = process.env.REMIX_DEV_SERVER_WS_PORT;
+  let socketPath = protocol + "//" + host + ":" + port + "/socket";
+  let ws = new WebSocket(socketPath);
+  ws.onmessage = async (event) => {
+    let payload = JSON.parse(event.data);
+
+    switch (payload?.type) {
+      case "LOG":
+        console.log(payload.message);
+        break;
+      case "RELOAD":
+        window.location.reload();
+        break;
+      case "HMR":
+        if (!payload.updates?.length) return;
+
+        let anyAccepted = false;
+        for (let update of payload.updates) {
+          if (window.__hmr__.contexts[update.id]) {
+            let accepted = window.__hmr__.contexts[update.id].emit(
+              await import(update.url + "?t=" + Date.now())
+            );
+            if (accepted) {
+              console.log("[HMR] Updated accepted by", update.id);
+              anyAccepted = true;
+            }
+          }
+        }
+
+        if (!anyAccepted) {
+          console.log("[HMR] Updated rejected, reloading...");
+          window.location.reload();
+        }
+        break;
+    }
+  };
+  ws.onopen = () => {
+    if (config && typeof config.onOpen === "function") {
+      config.onOpen();
+    }
+  };
+  ws.onclose = (event) => {
+    if (event.code === 1006) {
+      console.log("Remix dev asset server web socket closed. Reconnecting...");
+      setTimeout(
+        () =>
+          remixLiveReloadConnect({
+            onOpen: () => window.location.reload(),
+          }),
+      5000
+      );
+    }
+  };
+  ws.onerror = (error) => {
+    console.log("Remix dev asset server web socket error:");
+    console.error(error);
+  };
+}
+remixLiveReloadConnect();
         `;
-        return { loader: "ts", contents };
+        return { loader: "ts", contents, resolveDir: remixConfig.appDirectory };
+      });
+
+      build.onLoad({ filter: /.*/, namespace: "file" }, (args) => {
+        if (
+          !args.path.match(/\.[tj]sx?$/) ||
+          !fs.existsSync(args.path) ||
+          !args.path.startsWith(remixConfig.appDirectory)
+        ) {
+          return undefined;
+        }
+
+        let hmrId = JSON.stringify(
+          path.relative(remixConfig.rootDirectory, args.path)
+        );
+        let hmrPrefix = `import * as __hmr__ from "remix:hmr";
+if (import.meta) {
+  import.meta.hot = __hmr__.createHotContext(
+    //@ts-expect-error
+    $id$
+  );
+}`.replace(/\$id\$/g, hmrId);
+        let sourceCode = fs.readFileSync(args.path, "utf8");
+
+        let sourceCodeWithHMR = hmrPrefix + sourceCode;
+
+        let jsWithHMR = esbuild.transformSync(sourceCodeWithHMR, {
+          loader: args.path.endsWith("x") ? "tsx" : "ts",
+          format: args.pluginData?.format || "esm",
+          jsx: "automatic",
+        }).code;
+        let resultCode = jsWithHMR;
+
+        let transformResult = babel.transformSync(jsWithHMR, {
+          filename: args.path,
+          ast: false,
+          compact: false,
+          sourceMaps: build.initialOptions.sourcemap ? "inline" : false,
+          configFile: false,
+          babelrc: false,
+          plugins: [[reactRefresh.default, { skipEnvCheck: true }]],
+        });
+
+        let jsWithReactRefresh = transformResult?.code || jsWithHMR;
+
+        if (IS_FAST_REFRESH_ENABLED.test(jsWithReactRefresh)) {
+          resultCode =
+            `
+              if (!window.$RefreshReg$ || !window.$RefreshSig$ || !window.$RefreshRuntime$) {
+                console.warn('@remix-run/react-refresh: HTML setup script not run. React Fast Refresh only works when Remix serves your HTML routes. You may want to remove this plugin.');
+              } else {
+                var prevRefreshReg = window.$RefreshReg$;
+                var prevRefreshSig = window.$RefreshSig$;
+                window.$RefreshReg$ = (type, id) => {
+                  window.$RefreshRuntime$.register(type, ${JSON.stringify(
+                    hmrId
+                  )} + id);
+                }
+                window.$RefreshSig$ = window.$RefreshRuntime$.createSignatureFunctionForTransform;
+              }
+            ` +
+            jsWithReactRefresh +
+            `
+              window.$RefreshReg$ = prevRefreshReg;
+              window.$RefreshSig$ = prevRefreshSig;
+              import.meta.hot.accept(({ module }) => {
+                window.$RefreshRuntime$.performReactRefresh();
+              });
+            `;
+        }
+
+        return {
+          contents: resultCode,
+          loader: args.path.endsWith("x") ? "tsx" : "ts",
+          resolveDir: path.dirname(args.path),
+        };
       });
     },
   };
diff --git a/packages/remix-dev/compiler/remixCompiler.ts b/packages/remix-dev/compiler/remixCompiler.ts
index 5c10f63cd87..08afb447027 100644
--- a/packages/remix-dev/compiler/remixCompiler.ts
+++ b/packages/remix-dev/compiler/remixCompiler.ts
@@ -29,7 +29,7 @@ export const compile = async (
     onCompileFailure?: OnCompileFailure;
   } = {}
 ): Promise<
-  { assetsManifest?: AssetsManifest; hmrUpdates: unknown } | undefined
+  { assetsManifest?: AssetsManifest; hmrUpdates?: unknown[] } | undefined
 > => {
   try {
     let assetsManifestChannel = createChannel<AssetsManifest>();
diff --git a/packages/remix-dev/compiler/watch.ts b/packages/remix-dev/compiler/watch.ts
index 43d7165692f..ec297f97a11 100644
--- a/packages/remix-dev/compiler/watch.ts
+++ b/packages/remix-dev/compiler/watch.ts
@@ -26,7 +26,7 @@ export type WatchOptions = Partial<CompileOptions> & {
   onRebuildFinish?(
     durationMs: number,
     assetsManifest?: AssetsManifest,
-    hmrEvent?: unknown
+    hmrUpdates?: unknown[]
   ): void;
   onFileCreated?(file: string): void;
   onFileChanged?(file: string): void;
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 48f907b71e8..731f4d12358 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -38,7 +38,7 @@ let findPort = async (portPreference?: number) =>
       // prettier-ignore
       portPreference ? Number(portPreference) :
         process.env.PORT ? Number(process.env.PORT) :
-          makeRange(3001, 3100),
+          makeRange(8002, 8100),
   });
 
 let fetchAssetsManifest = async (
@@ -57,15 +57,20 @@ let fetchAssetsManifest = async (
 
 let resolveDev = (
   dev: RemixConfig["future"]["unstable_dev"],
-  flags: { port?: number; appServerPort?: number }
+  flags: { port?: number; appServerPort?: number },
+  fallbackPort = 8002
 ) => {
   if (dev === false)
     throw Error("The new dev server requires 'unstable_dev' to be set");
 
-  let port = flags.port ?? (dev === true ? undefined : dev.port);
+  let port = fallbackPort;
+  // if (typeof flags.port === "number") {
+  //   port = flags.port;
+  // }
+
   let appServerPort =
     flags.appServerPort ?? (dev === true || dev.appServerPort == undefined)
-      ? 3000
+      ? fallbackPort
       : dev.appServerPort;
   let remixRequestHandlerPath =
     dev === true || dev.remixRequestHandlerPath === undefined
@@ -91,7 +96,7 @@ export let serve = async (
   clean(config);
   await loadEnv(config.rootDirectory);
 
-  let dev = resolveDev(config.future.unstable_dev, flags);
+  let dev = resolveDev(config.future.unstable_dev, flags, config.devServerPort);
 
   let host = getHost();
   let appServerOrigin = `http://${host ?? "localhost"}:${dev.appServerPort}`;
@@ -110,11 +115,10 @@ export let serve = async (
   };
 
   // watch and live reload on rebuilds
-  let port = await findPort(dev.port);
-  let socket = LiveReload.serve({ port });
+  let socket = LiveReload.serve({ port: dev.port });
   let dispose = await Compiler.watch(config, {
     mode: "development",
-    liveReloadPort: port,
+    liveReloadPort: dev.port,
     onInitialBuild: (durationMs) => info(`Built in ${prettyMs(durationMs)}`),
     onRebuildStart: () => {
       clean(config);
@@ -124,8 +128,7 @@ export let serve = async (
       if (!assetsManifest) return;
       socket.log(`Rebuilt in ${prettyMs(durationMs)}`);
 
-      console.log({ hmrUpdates });
-      if (hmrUpdates) {
+      if (hmrUpdates && hmrUpdates.length > 0) {
         socket.hmr(hmrUpdates);
         return;
       }
diff --git a/packages/remix-dev/liveReload.ts b/packages/remix-dev/liveReload.ts
index 6905739df24..d4f1e06d9ea 100644
--- a/packages/remix-dev/liveReload.ts
+++ b/packages/remix-dev/liveReload.ts
@@ -1,6 +1,9 @@
 import WebSocket from "ws";
 
-type Message = { type: "RELOAD" } | { type: "LOG"; message: string };
+type Message =
+  | { type: "RELOAD" }
+  | { type: "HMR"; updates: unknown[] }
+  | { type: "LOG"; message: string };
 
 type Broadcast = (message: Message) => void;
 
@@ -23,8 +26,8 @@ export let serve = (options: { port: number }) => {
     broadcast({ type: "LOG", message: _message });
   };
 
-  let hmr = (event: unknown) => {
-    log(`[HMR] sending event: ${JSON.stringify(event)}`);
+  let hmr = (updates: unknown[]) => {
+    broadcast({ type: "HMR", updates });
   };
 
   return { reload, hmr, log, close: wss.close };
diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index d101cc924b9..e352de59e0f 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -22,6 +22,10 @@ declare global {
     future: FutureConfig;
     // The number of active deferred keys rendered on the server
     a?: number;
+    dev?: {
+      liveReloadPort?: number;
+      hmrRuntime?: string;
+    }
   };
   var __remixRouteModules: RouteModules;
   var __remixManifest: EntryContext["manifest"];
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 05d47b137c2..9d858644e9d 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -902,25 +902,48 @@ export function Scripts(props: ScriptProps) {
           ? `__remixContext.a=${deferredScripts.length};`
           : "");
 
-    // TODO: change to be dynamic imports for routes
-    let routeModulesScript = !isStatic
-      ? " "
-      : `${matches
-          .map(
-            (match, index) =>
-              `import ${JSON.stringify(manifest.url)};
+    let routeModulesScript;
+    if (manifest.hmrRuntime) {
+      routeModulesScript = !isStatic
+        ? " "
+        : `import ${JSON.stringify(manifest.url)};
+import(${JSON.stringify(manifest.hmrRuntime)}).then(() => Promise.all([
+  ${matches
+    .map(
+      (match) =>
+        `import(${JSON.stringify(manifest.routes[match.route.id].module)})`
+    )
+    .join(",")}
+]).then(([${matches.map((_, index) => `route${index}`).join(",")}]) => {
+  window.__remixRouteModules = {${matches
+    .map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`)
+    .join(",")}};
+  
+  return import(${JSON.stringify(manifest.entry.module)});
+}));
+`;
+    } else {
+      routeModulesScript = !isStatic
+        ? " "
+        : `import ${JSON.stringify(manifest.url)};
+${matches
+  .map(
+    (match, index) =>
+      `import ${JSON.stringify(manifest.url)};
 import * as route${index} from ${JSON.stringify(
-                manifest.routes[match.route.id].module
-              )};`
-          )
-          .join("\n")}
+        manifest.routes[match.route.id].module
+      )};`
+  )
+  .join("\n")}
 window.__remixRouteModules = {${matches
-          .map(
-            (match, index) => `${JSON.stringify(match.route.id)}:route${index}`
-          )
-          .join(",")}};
+            .map(
+              (match, index) =>
+                `${JSON.stringify(match.route.id)}:route${index}`
+            )
+            .join(",")}};
 
 import(${JSON.stringify(manifest.entry.module)});`;
+    }
 
     return (
       <>
@@ -1548,15 +1571,6 @@ function convertRouterFetcherToRemixFetcher(
   return fetcher;
 }
 
-export let Hmr = () => {
-  let [hydrated, setHydrated] = React.useState(false);
-  React.useEffect(() => {
-    setHydrated(true);
-  }, []);
-  if (!hydrated) return null;
-  return <script src={window.__remixContext.dev.hmrRuntime} />;
-};
-
 // Dead Code Elimination magic for production builds.
 // This way devs don't have to worry about doing the NODE_ENV check themselves.
 // If running an un-bundled server outside of `remix dev` you will still need
diff --git a/packages/remix-react/entry.ts b/packages/remix-react/entry.ts
index cc715485c78..a6f52924b4e 100644
--- a/packages/remix-react/entry.ts
+++ b/packages/remix-react/entry.ts
@@ -46,4 +46,5 @@ export interface AssetsManifest {
   routes: RouteManifest<EntryRoute>;
   url: string;
   version: string;
+  hmrRuntime?: string;
 }
diff --git a/packages/remix-server-runtime/entry.ts b/packages/remix-server-runtime/entry.ts
index f5519ea7c5a..2d5136ce977 100644
--- a/packages/remix-server-runtime/entry.ts
+++ b/packages/remix-server-runtime/entry.ts
@@ -38,6 +38,7 @@ export interface AssetsManifest {
   routes: RouteManifest<EntryRoute>;
   url: string;
   version: string;
+  hmrRuntime?: string;
 }
 
 export function createEntryRouteModules(

From 5b31a3edbb3df3b71a2b76ec0d345e9f32638886 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 25 Jan 2023 15:42:24 -0800
Subject: [PATCH 05/66] revert port

---
 packages/remix-dev/devServer2.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 731f4d12358..8549a16186f 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -70,7 +70,7 @@ let resolveDev = (
 
   let appServerPort =
     flags.appServerPort ?? (dev === true || dev.appServerPort == undefined)
-      ? fallbackPort
+      ? 3000
       : dev.appServerPort;
   let remixRequestHandlerPath =
     dev === true || dev.remixRequestHandlerPath === undefined
@@ -128,6 +128,7 @@ export let serve = async (
       if (!assetsManifest) return;
       socket.log(`Rebuilt in ${prettyMs(durationMs)}`);
 
+      console.log({ hmrUpdates });
       if (hmrUpdates && hmrUpdates.length > 0) {
         socket.hmr(hmrUpdates);
         return;

From fd5bd1d5e791de056c24d545696a96ef3412a846 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 25 Jan 2023 17:45:09 -0800
Subject: [PATCH 06/66] Updated to completely strip server methods from route
 modules instead of relying on treeshaking. This allows us to easily detect
 browser vs server code changes and perform the relevant reload task.

---
 packages/remix-dev/compiler/compileBrowser.ts |  14 +-
 .../plugins/browserRouteModulesPlugin.ts      | 152 +++++++++----
 .../remix-dev/compiler/plugins/hmrPlugin.ts   | 144 ++++++------
 packages/remix-dev/package.json               |   1 +
 yarn.lock                                     | 213 +++++++++---------
 5 files changed, 307 insertions(+), 217 deletions(-)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 27ab1a582b2..7ce6e8faadf 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -327,8 +327,20 @@ export const createBrowserCompiler = (
             let url =
               remixConfig.publicPath +
               path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
+            let id = input;
+            if (id.startsWith("browser-route-module:")) {
+              id = path.relative(
+                remixConfig.rootDirectory,
+                path.join(
+                  remixConfig.appDirectory,
+                  id
+                    .replace(/^browser-route-module:/, "")
+                    .replace(/\?browser$/, "")
+                )
+              );
+            }
             updates.push({
-              id: input,
+              id,
               url,
             });
           }
diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index b8fdd1c88b8..7879ebf88da 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -1,20 +1,12 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
 import type esbuild from "esbuild";
+import ts from "typescript";
 
 import type { RemixConfig } from "../../config";
-import { getRouteModuleExports } from "../routeExports";
-import invariant from "../../invariant";
+import { applyHMR } from "./hmrPlugin";
 
-type Route = RemixConfig["routes"][string];
-
-const browserSafeRouteExports: { [name: string]: boolean } = {
-  CatchBoundary: true,
-  ErrorBoundary: true,
-  default: true,
-  handle: true,
-  links: true,
-  meta: true,
-  shouldRevalidate: true,
-};
+const serverOnlyExports = new Set(["action", "loader"]);
 
 /**
  * This plugin loads route modules for the browser build, using module shims
@@ -27,15 +19,6 @@ export function browserRouteModulesPlugin(
   return {
     name: "browser-route-modules",
     async setup(build) {
-      let routesByFile: Map<string, Route> = Object.keys(config.routes).reduce(
-        (map, key) => {
-          let route = config.routes[key];
-          map.set(route.file, route);
-          return map;
-        },
-        new Map()
-      );
-
       build.onResolve({ filter: suffixMatcher }, (args) => {
         return {
           path: args.path,
@@ -46,40 +29,111 @@ export function browserRouteModulesPlugin(
       build.onLoad(
         { filter: suffixMatcher, namespace: "browser-route-module" },
         async (args) => {
-          let theExports;
           let file = args.path.replace(suffixMatcher, "");
-          let route = routesByFile.get(file);
-
-          try {
-            invariant(route, `Cannot get route by path: ${args.path}`);
-
-            theExports = (await getRouteModuleExports(config, route.id)).filter(
-              (ex) => !!browserSafeRouteExports[ex]
-            );
-          } catch (error: any) {
-            return {
-              errors: [
-                {
-                  text: error.message,
-                  pluginName: "browser-route-module",
-                },
-              ],
-            };
-          }
-
-          let contents = "module.exports = {};";
-          if (theExports.length !== 0) {
-            let spec = `{ ${theExports.join(", ")} }`;
-            contents = `export ${spec} from ${JSON.stringify(`./${file}`)};`;
-          }
+          let routeFile = path.join(config.appDirectory, file);
+
+          let sourceCode = fs.readFileSync(routeFile, "utf8");
+
+          let contents = removeServerExports(sourceCode, routeFile);
+          console.log({ contents });
+
+          contents = await applyHMR(
+            contents,
+            {
+              ...args,
+              path: routeFile,
+            },
+            config,
+            !!build.initialOptions.sourcemap
+          );
 
           return {
             contents,
-            resolveDir: config.appDirectory,
-            loader: "js",
+            loader: path.extname(routeFile).slice(1) as esbuild.Loader,
+            resolveDir: path.dirname(routeFile),
           };
         }
       );
     },
   };
 }
+
+function removeServerExports(sourceCode: string, fileName: string) {
+  let { outputText, sourceMapText } = ts.transpileModule(sourceCode, {
+    fileName,
+    compilerOptions: {
+      jsx: ts.JsxEmit.Preserve,
+      module: ts.ModuleKind.ESNext,
+      target: ts.ScriptTarget.ESNext,
+    },
+    transformers: {
+      before: [
+        (context) => {
+          let visit: ts.Visitor = (node) => {
+            let modifiers = ts.getModifiers(node as ts.HasModifiers);
+
+            if (ts.isExportDeclaration(node) && node.exportClause) {
+              if ("elements" in node.exportClause) {
+                let elements = node.exportClause.elements.filter(
+                  (n) => !serverOnlyExports.has(n.name.escapedText as string)
+                );
+                if (elements.length === 0) {
+                  return ts.factory.createEmptyStatement();
+                }
+
+                return ts.factory.createExportDeclaration(
+                  ts.getModifiers(node),
+                  node.isTypeOnly,
+                  ts.factory.createNamedExports(elements),
+                  node.moduleSpecifier,
+                  node.assertClause
+                );
+              }
+            }
+
+            if (
+              modifiers &&
+              modifiers.some((m) => m.kind === ts.SyntaxKind.ExportKeyword) &&
+              !modifiers.some((m) => m.kind === ts.SyntaxKind.DefaultKeyword)
+            ) {
+              if (ts.isFunctionDeclaration(node) && node.name) {
+                if (serverOnlyExports.has(node.name.escapedText as string)) {
+                  return ts.factory.createEmptyStatement();
+                }
+              }
+
+              if (ts.isVariableStatement(node)) {
+                let declarations = node.declarationList.declarations.filter(
+                  (d) =>
+                    !d.name ||
+                    !("escapedText" in d.name) ||
+                    !serverOnlyExports.has(d.name.escapedText as string)
+                );
+
+                if (declarations.length === 0) {
+                  return ts.factory.createEmptyStatement();
+                }
+
+                return ts.factory.createVariableStatement(
+                  node.modifiers,
+                  ts.factory.createVariableDeclarationList(
+                    declarations,
+                    node.declarationList.flags
+                  )
+                );
+              }
+            }
+
+            if (ts.isSourceFile(node)) {
+              return ts.visitEachChild(node, (child) => visit(child), context);
+            }
+            return node;
+          };
+          return (node) => ts.visitNode(node, visit);
+        },
+      ],
+    },
+  });
+
+  return outputText + (sourceMapText || "");
+}
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index a256dc1e417..ade01aa1029 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -12,12 +12,6 @@ export let hmrPlugin = ({
   return {
     name: "remix-hmr",
     setup: async (build) => {
-      let babel = await import("@babel/core");
-      // @ts-expect-error
-      let reactRefresh = await import("react-refresh/babel");
-
-      let IS_FAST_REFRESH_ENABLED = /\$RefreshReg\$\(/;
-
       build.onResolve({ filter: /^remix:hmr$/ }, (args) => {
         return {
           namespace: "remix-runtime",
@@ -164,7 +158,7 @@ remixLiveReloadConnect();
         return { loader: "ts", contents, resolveDir: remixConfig.appDirectory };
       });
 
-      build.onLoad({ filter: /.*/, namespace: "file" }, (args) => {
+      build.onLoad({ filter: /.*/, namespace: "file" }, async (args) => {
         if (
           !args.path.match(/\.[tj]sx?$/) ||
           !fs.existsSync(args.path) ||
@@ -173,64 +167,14 @@ remixLiveReloadConnect();
           return undefined;
         }
 
-        let hmrId = JSON.stringify(
-          path.relative(remixConfig.rootDirectory, args.path)
-        );
-        let hmrPrefix = `import * as __hmr__ from "remix:hmr";
-if (import.meta) {
-  import.meta.hot = __hmr__.createHotContext(
-    //@ts-expect-error
-    $id$
-  );
-}`.replace(/\$id\$/g, hmrId);
         let sourceCode = fs.readFileSync(args.path, "utf8");
 
-        let sourceCodeWithHMR = hmrPrefix + sourceCode;
-
-        let jsWithHMR = esbuild.transformSync(sourceCodeWithHMR, {
-          loader: args.path.endsWith("x") ? "tsx" : "ts",
-          format: args.pluginData?.format || "esm",
-          jsx: "automatic",
-        }).code;
-        let resultCode = jsWithHMR;
-
-        let transformResult = babel.transformSync(jsWithHMR, {
-          filename: args.path,
-          ast: false,
-          compact: false,
-          sourceMaps: build.initialOptions.sourcemap ? "inline" : false,
-          configFile: false,
-          babelrc: false,
-          plugins: [[reactRefresh.default, { skipEnvCheck: true }]],
-        });
-
-        let jsWithReactRefresh = transformResult?.code || jsWithHMR;
-
-        if (IS_FAST_REFRESH_ENABLED.test(jsWithReactRefresh)) {
-          resultCode =
-            `
-              if (!window.$RefreshReg$ || !window.$RefreshSig$ || !window.$RefreshRuntime$) {
-                console.warn('@remix-run/react-refresh: HTML setup script not run. React Fast Refresh only works when Remix serves your HTML routes. You may want to remove this plugin.');
-              } else {
-                var prevRefreshReg = window.$RefreshReg$;
-                var prevRefreshSig = window.$RefreshSig$;
-                window.$RefreshReg$ = (type, id) => {
-                  window.$RefreshRuntime$.register(type, ${JSON.stringify(
-                    hmrId
-                  )} + id);
-                }
-                window.$RefreshSig$ = window.$RefreshRuntime$.createSignatureFunctionForTransform;
-              }
-            ` +
-            jsWithReactRefresh +
-            `
-              window.$RefreshReg$ = prevRefreshReg;
-              window.$RefreshSig$ = prevRefreshSig;
-              import.meta.hot.accept(({ module }) => {
-                window.$RefreshRuntime$.performReactRefresh();
-              });
-            `;
-        }
+        let resultCode = await applyHMR(
+          sourceCode,
+          args,
+          remixConfig,
+          !!build.initialOptions.sourcemap
+        );
 
         return {
           contents: resultCode,
@@ -241,3 +185,77 @@ if (import.meta) {
     },
   };
 };
+
+export async function applyHMR(
+  sourceCode: string,
+  args: esbuild.OnLoadArgs,
+  remixConfig: RemixConfig,
+  sourcemap: boolean
+) {
+  let babel = await import("@babel/core");
+  // @ts-expect-error
+  let reactRefresh = await import("react-refresh/babel");
+
+  let IS_FAST_REFRESH_ENABLED = /\$RefreshReg\$\(/;
+
+  let argsPath = args.path;
+  let hmrId = JSON.stringify(
+    path.relative(remixConfig.rootDirectory, argsPath)
+  );
+  let hmrPrefix = `import * as __hmr__ from "remix:hmr";
+if (import.meta) {
+import.meta.hot = __hmr__.createHotContext(
+//@ts-expect-error
+$id$
+);
+}`.replace(/\$id\$/g, hmrId);
+
+  let sourceCodeWithHMR = hmrPrefix + sourceCode;
+
+  let jsWithHMR = esbuild.transformSync(sourceCodeWithHMR, {
+    loader: argsPath.endsWith("x") ? "tsx" : "ts",
+    format: args.pluginData?.format || "esm",
+    jsx: "automatic",
+  }).code;
+  let resultCode = jsWithHMR;
+
+  let transformResult = babel.transformSync(jsWithHMR, {
+    filename: argsPath,
+    ast: false,
+    compact: false,
+    sourceMaps: sourcemap,
+    configFile: false,
+    babelrc: false,
+    plugins: [[reactRefresh.default, { skipEnvCheck: true }]],
+  });
+
+  let jsWithReactRefresh = transformResult?.code || jsWithHMR;
+
+  if (IS_FAST_REFRESH_ENABLED.test(jsWithReactRefresh)) {
+    resultCode =
+      `
+        if (!window.$RefreshReg$ || !window.$RefreshSig$ || !window.$RefreshRuntime$) {
+          console.warn('@remix-run/react-refresh: HTML setup script not run. React Fast Refresh only works when Remix serves your HTML routes. You may want to remove this plugin.');
+        } else {
+          var prevRefreshReg = window.$RefreshReg$;
+          var prevRefreshSig = window.$RefreshSig$;
+          window.$RefreshReg$ = (type, id) => {
+            window.$RefreshRuntime$.register(type, ${JSON.stringify(
+              hmrId
+            )} + id);
+          }
+          window.$RefreshSig$ = window.$RefreshRuntime$.createSignatureFunctionForTransform;
+        }
+      ` +
+      jsWithReactRefresh +
+      `
+        window.$RefreshReg$ = prevRefreshReg;
+        window.$RefreshSig$ = prevRefreshSig;
+        import.meta.hot.accept(({ module }) => {
+          window.$RefreshRuntime$.performReactRefresh();
+        });
+      `;
+  }
+
+  return resultCode;
+}
diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json
index 1c9e613a4c7..4414d9ecb54 100644
--- a/packages/remix-dev/package.json
+++ b/packages/remix-dev/package.json
@@ -69,6 +69,7 @@
     "sort-package-json": "^1.55.0",
     "tar-fs": "^2.1.1",
     "tsconfig-paths": "^4.0.0",
+    "typescript": "^4.9.4",
     "ws": "^7.4.5",
     "xdm": "^2.0.0"
   },
diff --git a/yarn.lock b/yarn.lock
index 20900c046aa..37c514b8e55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11,7 +11,7 @@
 
 "@architect/functions@^5.2.0":
   version "5.3.3"
-  resolved "https://registry.npmjs.org/@architect/functions/-/functions-5.3.3.tgz#b70d20c723e62dd984da90b23a51495ebbdc551e"
+  resolved "https://registry.npmjs.org/@architect/functions/-/functions-5.3.3.tgz"
   integrity sha512-q9ePtpw7SIl14B0KFIJGm4StL6jOWWYgGpD1HR7zkTKKiUIL/W0tkrAZnBhU8WPXRHPmpf5BcEjIXHQKyvz9Hg==
   dependencies:
     cookie "^0.5.0"
@@ -160,7 +160,7 @@
 
 "@babel/generator@^7.18.6":
   version "7.20.5"
-  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.20.5.tgz#cb25abee3178adf58d6814b68517c62bdbfdda95"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.20.5.tgz"
   integrity sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA==
   dependencies:
     "@babel/types" "^7.20.5"
@@ -394,7 +394,7 @@
 
 "@babel/helper-plugin-utils@^7.19.0":
   version "7.20.2"
-  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz"
   integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
 
 "@babel/helper-remap-async-to-generator@^7.18.6":
@@ -512,7 +512,7 @@
 
 "@babel/parser@^7.18.6":
   version "7.20.5"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz"
   integrity sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==
 
 "@babel/parser@^7.19.1":
@@ -735,7 +735,7 @@
 
 "@babel/plugin-syntax-jsx@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
   integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
@@ -805,7 +805,7 @@
 
 "@babel/plugin-syntax-typescript@^7.20.0":
   version "7.20.0"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz#4e9a0cfc769c85689b77a2e642d24e9f697fc8c7"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz"
   integrity sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
@@ -1330,7 +1330,7 @@
 
 "@babel/types@^7.20.5":
   version "7.20.5"
-  resolved "https://registry.npmjs.org/@babel/types/-/types-7.20.5.tgz#e206ae370b5393d94dfd1d04cd687cace53efa84"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.20.5.tgz"
   integrity sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==
   dependencies:
     "@babel/helper-string-parser" "^7.19.4"
@@ -1353,7 +1353,7 @@
 
 "@changesets/apply-release-plan@^6.1.2":
   version "6.1.2"
-  resolved "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.2.tgz#cfb7da323f34e9e9173ffd9bf9f03c0b8cecc8fe"
+  resolved "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.2.tgz"
   integrity sha512-H8TV9E/WtJsDfoDVbrDGPXmkZFSv7W2KLqp4xX4MKZXshb0hsQZUNowUa8pnus9qb/5OZrFFRVsUsDCVHNW/AQ==
   dependencies:
     "@babel/runtime" "^7.10.4"
@@ -1372,7 +1372,7 @@
 
 "@changesets/assemble-release-plan@^5.2.2":
   version "5.2.2"
-  resolved "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.2.tgz#9824f14a7a6e411c7153f1ccc2a42bbe35688129"
+  resolved "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.2.tgz"
   integrity sha512-B1qxErQd85AeZgZFZw2bDKyOfdXHhG+X5S+W3Da2yCem8l/pRy4G/S7iOpEcMwg6lH8q2ZhgbZZwZ817D+aLuQ==
   dependencies:
     "@babel/runtime" "^7.10.4"
@@ -1384,14 +1384,14 @@
 
 "@changesets/changelog-git@^0.1.13":
   version "0.1.13"
-  resolved "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.13.tgz#182e130add456255d8ee2b4c8eaf88048944aaaf"
+  resolved "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.13.tgz"
   integrity sha512-zvJ50Q+EUALzeawAxax6nF2WIcSsC5PwbuLeWkckS8ulWnuPYx8Fn/Sjd3rF46OzeKA8t30loYYV6TIzp4DIdg==
   dependencies:
     "@changesets/types" "^5.2.0"
 
 "@changesets/cli@^2.25.2":
   version "2.25.2"
-  resolved "https://registry.npmjs.org/@changesets/cli/-/cli-2.25.2.tgz#fc5e894aa6f85c60749a035352dec3dcbd275c71"
+  resolved "https://registry.npmjs.org/@changesets/cli/-/cli-2.25.2.tgz"
   integrity sha512-ACScBJXI3kRyMd2R8n8SzfttDHi4tmKSwVwXBazJOylQItSRSF4cGmej2E4FVf/eNfGy6THkL9GzAahU9ErZrA==
   dependencies:
     "@babel/runtime" "^7.10.4"
@@ -1430,7 +1430,7 @@
 
 "@changesets/config@^2.2.0":
   version "2.2.0"
-  resolved "https://registry.npmjs.org/@changesets/config/-/config-2.2.0.tgz#382f6cd801fa56273942659114c8060378dfe066"
+  resolved "https://registry.npmjs.org/@changesets/config/-/config-2.2.0.tgz"
   integrity sha512-GGaokp3nm5FEDk/Fv2PCRcQCOxGKKPRZ7prcMqxEr7VSsG75MnChQE8plaW1k6V8L2bJE+jZWiRm19LbnproOw==
   dependencies:
     "@changesets/errors" "^0.1.4"
@@ -1450,7 +1450,7 @@
 
 "@changesets/get-dependents-graph@^1.3.4":
   version "1.3.4"
-  resolved "https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.4.tgz#d8bf537f45a7ff773da99143675f49e250996838"
+  resolved "https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.4.tgz"
   integrity sha512-+C4AOrrFY146ydrgKOo5vTZfj7vetNu1tWshOID+UjPUU9afYGDXI8yLnAeib1ffeBXV3TuGVcyphKpJ3cKe+A==
   dependencies:
     "@changesets/types" "^5.2.0"
@@ -1469,7 +1469,7 @@
 
 "@changesets/get-release-plan@^3.0.15":
   version "3.0.15"
-  resolved "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.15.tgz#55577b235b785125a462d5d2a2dffe4dbf94e590"
+  resolved "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.15.tgz"
   integrity sha512-W1tFwxE178/en+zSj/Nqbc3mvz88mcdqUMJhRzN1jDYqN3QI4ifVaRF9mcWUU+KI0gyYEtYR65tour690PqTcA==
   dependencies:
     "@babel/runtime" "^7.10.4"
@@ -1487,7 +1487,7 @@
 
 "@changesets/git@^1.5.0":
   version "1.5.0"
-  resolved "https://registry.npmjs.org/@changesets/git/-/git-1.5.0.tgz#71bbcf11f3b346d56eeaf3d3201e6dc3e270ea5a"
+  resolved "https://registry.npmjs.org/@changesets/git/-/git-1.5.0.tgz"
   integrity sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==
   dependencies:
     "@babel/runtime" "^7.10.4"
@@ -1506,7 +1506,7 @@
 
 "@changesets/parse@^0.3.15":
   version "0.3.15"
-  resolved "https://registry.npmjs.org/@changesets/parse/-/parse-0.3.15.tgz#1bc74f8c43b0861d71f4fccf78950411004ba308"
+  resolved "https://registry.npmjs.org/@changesets/parse/-/parse-0.3.15.tgz"
   integrity sha512-3eDVqVuBtp63i+BxEWHPFj2P1s3syk0PTrk2d94W9JD30iG+OER0Y6n65TeLlY8T2yB9Fvj6Ev5Gg0+cKe/ZUA==
   dependencies:
     "@changesets/types" "^5.2.0"
@@ -1514,7 +1514,7 @@
 
 "@changesets/pre@^1.0.13":
   version "1.0.13"
-  resolved "https://registry.npmjs.org/@changesets/pre/-/pre-1.0.13.tgz#49c3ae8bb444a1ce3e0fe4cb21f238318b6763e9"
+  resolved "https://registry.npmjs.org/@changesets/pre/-/pre-1.0.13.tgz"
   integrity sha512-jrZc766+kGZHDukjKhpBXhBJjVQMied4Fu076y9guY1D3H622NOw8AQaLV3oQsDtKBTrT2AUFjt9Z2Y9Qx+GfA==
   dependencies:
     "@babel/runtime" "^7.10.4"
@@ -1525,7 +1525,7 @@
 
 "@changesets/read@^0.5.8":
   version "0.5.8"
-  resolved "https://registry.npmjs.org/@changesets/read/-/read-0.5.8.tgz#84e24fd12e6759cef090088261c08b1dfe0f350e"
+  resolved "https://registry.npmjs.org/@changesets/read/-/read-0.5.8.tgz"
   integrity sha512-eYaNfxemgX7f7ELC58e7yqQICW5FB7V+bd1lKt7g57mxUrTveYME+JPaBPpYx02nP53XI6CQp6YxnR9NfmFPKw==
   dependencies:
     "@babel/runtime" "^7.10.4"
@@ -1549,12 +1549,12 @@
 
 "@changesets/types@^5.2.0":
   version "5.2.0"
-  resolved "https://registry.npmjs.org/@changesets/types/-/types-5.2.0.tgz#c4927f5bf9668f778c12b4226cfd07a1f5b79c9b"
+  resolved "https://registry.npmjs.org/@changesets/types/-/types-5.2.0.tgz"
   integrity sha512-km/66KOqJC+eicZXsm2oq8A8bVTSpkZJ60iPV/Nl5Z5c7p9kk8xxh6XGRTlnludHldxOOfudhnDN2qPxtHmXzA==
 
 "@changesets/write@^0.2.2":
   version "0.2.2"
-  resolved "https://registry.npmjs.org/@changesets/write/-/write-0.2.2.tgz#f3ffb1be06f7c31265eb4ec3d7166b91f9c25c9b"
+  resolved "https://registry.npmjs.org/@changesets/write/-/write-0.2.2.tgz"
   integrity sha512-kCYNHyF3xaId1Q/QE+DF3UTrHTyg3Cj/f++T8S8/EkC+jh1uK2LFnM9h+EzV+fsmnZDrs7r0J4LLpeI/VWC5Hg==
   dependencies:
     "@babel/runtime" "^7.10.4"
@@ -1631,7 +1631,7 @@
 
 "@emotion/hash@^0.9.0":
   version "0.9.0"
-  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz"
   integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
 
 "@esbuild-plugins/node-modules-polyfill@^0.1.4":
@@ -1679,7 +1679,7 @@
 
 "@esbuild/darwin-arm64@0.16.3":
   version "0.16.3"
-  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.3.tgz#92d1826ed2f21dcac5830b70d7215c6afbb744e2"
+  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.3.tgz"
   integrity sha512-DO8WykMyB+N9mIDfI/Hug70Dk1KipavlGAecxS3jDUwAbTpDXj0Lcwzw9svkhxfpCagDmpaTMgxWK8/C/XcXvw==
 
 "@esbuild/darwin-x64@0.16.17":
@@ -2369,7 +2369,7 @@
 
 "@playwright/test@^1.28.1":
   version "1.28.1"
-  resolved "https://registry.npmjs.org/@playwright/test/-/test-1.28.1.tgz#e5be297e024a3256610cac2baaa9347fd57c7860"
+  resolved "https://registry.npmjs.org/@playwright/test/-/test-1.28.1.tgz"
   integrity sha512-xN6spdqrNlwSn9KabIhqfZR7IWjPpFK1835tFNgjrlysaSezuX8PYUwaz38V/yI8TJLG9PkAMEXoHRXYXlpTPQ==
   dependencies:
     "@types/node" "*"
@@ -2400,7 +2400,7 @@
 
 "@remix-run/web-fetch@^4.3.2":
   version "4.3.2"
-  resolved "https://registry.npmjs.org/@remix-run/web-fetch/-/web-fetch-4.3.2.tgz#193758bb7a301535540f0e3a86c743283f81cf56"
+  resolved "https://registry.npmjs.org/@remix-run/web-fetch/-/web-fetch-4.3.2.tgz"
   integrity sha512-aRNaaa0Fhyegv/GkJ/qsxMhXvyWGjPNgCKrStCvAvV1XXphntZI0nQO/Fl02LIQg3cGL8lDiOXOS1gzqDOlG5w==
   dependencies:
     "@remix-run/web-blob" "^3.0.4"
@@ -2982,7 +2982,7 @@
 
 "@types/node@^18.11.9":
   version "18.11.9"
-  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz"
   integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
 
 "@types/normalize-package-data@^2.4.0":
@@ -3024,7 +3024,7 @@
 
 "@types/react-dom@^18.0.8":
   version "18.0.8"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.8.tgz#d2606d855186cd42cc1b11e63a71c39525441685"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.8.tgz"
   integrity sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==
   dependencies:
     "@types/react" "*"
@@ -3056,7 +3056,7 @@
 
 "@types/react@^18.0.24":
   version "18.0.24"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.24.tgz#2f79ed5b27f08d05107aab45c17919754cc44c20"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.24.tgz"
   integrity sha512-wRJWT6ouziGUy+9uX0aW4YOJxAY0bG6/AOk5AW5QSvZqI7dk6VBIbXvcVgIw/W5Jrl24f77df98GEKTJGOLx7Q==
   dependencies:
     "@types/prop-types" "*"
@@ -3200,7 +3200,7 @@
 
 "@types/use-sync-external-store@^0.0.3":
   version "0.0.3"
-  resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
 "@types/ws@^7.4.1":
@@ -3364,7 +3364,7 @@
 
 "@vanilla-extract/css@^1.9.2":
   version "1.9.2"
-  resolved "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.9.2.tgz#2c4bcc58f3c7441a1d041083c76bf5c3e2c77675"
+  resolved "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.9.2.tgz"
   integrity sha512-CE5+R89LOl9XG5dRwEIvVyl/YcS2GkqjdE/XnGJ+p7Fp6Exu08fifv7tY87XxFeCIRAbc9psM+h4lF+wC3Y0fg==
   dependencies:
     "@emotion/hash" "^0.9.0"
@@ -3414,7 +3414,7 @@
 
 "@vanilla-extract/private@^1.0.3":
   version "1.0.3"
-  resolved "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz#7ec72bc2ff6fe51f9d650f962e8d1989b073690f"
+  resolved "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz"
   integrity sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==
 
 "@vercel/build-utils@5.0.1":
@@ -3464,7 +3464,7 @@
 
 "@yarnpkg/lockfile@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  resolved "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz"
   integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
 
 "@zxing/text-encoding@0.9.0":
@@ -3512,7 +3512,7 @@ acorn-jsx@^5.0.0, acorn-jsx@^5.3.2:
 
 acorn-node@^1.8.2:
   version "1.8.2"
-  resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz"
   integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
   dependencies:
     acorn "^7.0.0"
@@ -3561,7 +3561,7 @@ aggregate-error@^3.0.0:
 
 ahocorasick@1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/ahocorasick/-/ahocorasick-1.0.2.tgz#9eee93aef9d02bfb476d9b648d9b7a40ef2fd500"
+  resolved "https://registry.npmjs.org/ahocorasick/-/ahocorasick-1.0.2.tgz"
   integrity sha512-hCOfMzbFx5IDutmWLAt6MZwOUjIfSM9G9FyVxytmE4Rs/5YDPWQrD/+IR1w+FweD9H2oOZEnv36TmkjhNURBVA==
 
 ajv@8.6.3:
@@ -3880,7 +3880,7 @@ arg@^5.0.1:
 
 arg@^5.0.2:
   version "5.0.2"
-  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
 argparse@^1.0.7:
@@ -4444,7 +4444,7 @@ callsites@^3.0.0:
 
 camelcase-css@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 camelcase-keys@^6.2.2:
@@ -4599,7 +4599,7 @@ choices-separator@^2.0.0:
 
 chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.3:
   version "3.5.3"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
   dependencies:
     anymatch "~3.1.2"
@@ -4624,7 +4624,7 @@ chownr@^2.0.0:
 
 ci-info@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
 ci-info@^3.1.0:
@@ -4894,7 +4894,7 @@ cookie@0.4.2, cookie@^0.4.1, cookie@^0.4.2:
 
 cookie@^0.5.0:
   version "0.5.0"
-  resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
 cookiejar@^2.1.2:
@@ -4995,7 +4995,7 @@ css@^3.0.0:
 
 cssesc@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
 cssom@^0.4.4:
@@ -5022,7 +5022,7 @@ csstype@^3.0.2:
 
 csstype@^3.0.7:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
 csv-generate@^3.4.3:
@@ -5217,7 +5217,7 @@ deep-is@^0.1.3, deep-is@~0.1.3:
 
 deep-object-diff@^1.1.0:
   version "1.1.9"
-  resolved "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595"
+  resolved "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.9.tgz"
   integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==
 
 deepmerge@^4.2.2:
@@ -5281,7 +5281,7 @@ define-property@^2.0.2:
 
 defined@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz#c0b9db27bfaffd95d6f61399419b893df0f91ebf"
+  resolved "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz"
   integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
 
 degenerator@^3.0.2:
@@ -5336,7 +5336,7 @@ detect-newline@3.1.0, detect-newline@^3.0.0:
 
 detective@^5.2.1:
   version "5.2.1"
-  resolved "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
+  resolved "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz"
   integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
   dependencies:
     acorn-node "^1.8.2"
@@ -5345,7 +5345,7 @@ detective@^5.2.1:
 
 didyoumean@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
 diff-sequences@^27.5.1:
@@ -5372,7 +5372,7 @@ dir-glob@^3.0.1:
 
 dlv@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
 doctrine@^2.1.0:
@@ -5757,7 +5757,7 @@ esbuild@0.14.47:
 
 esbuild@0.16.3:
   version "0.16.3"
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.16.3.tgz#5868632fa23f7a8547f2a4ea359c44e946515c94"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.16.3.tgz"
   integrity sha512-71f7EjPWTiSguen8X/kxEpkAS7BFHwtQKisCDDV3Y4GLGWBaoSCyD5uXkaUew6JDzA9FEN1W23mdnSwW9kqCeg==
   optionalDependencies:
     "@esbuild/android-arm" "0.16.3"
@@ -6219,7 +6219,7 @@ etag@~1.8.1:
 
 eval@0.1.6:
   version "0.1.6"
-  resolved "https://registry.npmjs.org/eval/-/eval-0.1.6.tgz#9620d7d8c85515e97e6b47c5814f46ae381cb3cc"
+  resolved "https://registry.npmjs.org/eval/-/eval-0.1.6.tgz"
   integrity sha512-o0XUw+5OGkXw4pJZzQoXUk+H87DHuC+7ZE//oSrRGtatTmr12oTnLfg6QOq9DyTt0c/p4TwzgmkKrBzWTSizyQ==
   dependencies:
     require-like ">= 0.1.1"
@@ -6236,7 +6236,7 @@ eventemitter2@^6.4.3:
 
 eventemitter3@^4.0.0:
   version "4.0.7"
-  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
 events@1.1.1:
@@ -6402,7 +6402,7 @@ fast-glob@3.2.11, fast-glob@^3.0.3, fast-glob@^3.2.7, fast-glob@^3.2.9:
 
 fast-glob@^3.2.11, fast-glob@^3.2.12:
   version "3.2.12"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
@@ -6524,7 +6524,7 @@ find-yarn-workspace-root2@1.2.16:
 
 find-yarn-workspace-root@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
+  resolved "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz"
   integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
   dependencies:
     micromatch "^4.0.2"
@@ -6544,7 +6544,7 @@ flatted@^3.1.0:
 
 follow-redirects@^1.0.0:
   version "1.15.2"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
 for-in@^0.1.3:
@@ -6701,7 +6701,7 @@ functions-have-names@^1.2.2:
 
 generic-names@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz#0bd8a2fd23fe8ea16cbd0a279acd69c06933d9a3"
+  resolved "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz"
   integrity sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==
   dependencies:
     loader-utils "^3.2.0"
@@ -7108,7 +7108,7 @@ http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
 
 http-proxy@^1.18.1:
   version "1.18.1"
-  resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz"
   integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
   dependencies:
     eventemitter3 "^4.0.0"
@@ -7177,7 +7177,7 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
 
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
-  resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
 ieee754@1.1.13, ieee754@^1.1.13, ieee754@^1.1.4:
@@ -7390,7 +7390,7 @@ is-callable@^1.1.4, is-callable@^1.2.4:
 
 is-ci@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  resolved "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz"
   integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
   dependencies:
     ci-info "^2.0.0"
@@ -7733,7 +7733,7 @@ is-windows@^1.0.0, is-windows@^1.0.1:
 
 is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
   dependencies:
     is-docker "^2.0.0"
@@ -7812,7 +7812,7 @@ istanbul-reports@^3.1.3:
 
 javascript-stringify@^2.0.1:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
+  resolved "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz"
   integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==
 
 jest-changed-files@^27.5.1:
@@ -8463,7 +8463,7 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
 
 klaw-sync@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  resolved "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz"
   integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
   dependencies:
     graceful-fs "^4.1.11"
@@ -8559,7 +8559,7 @@ levn@~0.3.0:
 
 lilconfig@^2.0.5, lilconfig@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
 lines-and-columns@^1.1.6:
@@ -8612,7 +8612,7 @@ loader-utils@^2.0.0:
 
 loader-utils@^3.2.0:
   version "3.2.1"
-  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz#4fb104b599daafd82ef3e1a41fb9265f87e1f576"
+  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz"
   integrity sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==
 
 locate-path@^5.0.0:
@@ -8631,7 +8631,7 @@ locate-path@^6.0.0:
 
 lodash.camelcase@^4.3.0:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
 lodash.debounce@^4.0.8:
@@ -8744,7 +8744,7 @@ lru-cache@^6.0.0:
 
 lru-cache@^7.14.1:
   version "7.14.1"
-  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz#8da8d2f5f59827edb388e63e459ac23d6d408fea"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz"
   integrity sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==
 
 lz-string@^1.4.4:
@@ -9013,7 +9013,7 @@ mdurl@^1.0.0:
 
 media-query-parser@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/media-query-parser/-/media-query-parser-2.0.2.tgz#ff79e56cee92615a304a1c2fa4f2bd056c0a1d29"
+  resolved "https://registry.npmjs.org/media-query-parser/-/media-query-parser-2.0.2.tgz"
   integrity sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -9665,7 +9665,7 @@ mute-stream@0.0.8:
 
 nanoid@^3.3.4:
   version "3.3.4"
-  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
 natural-compare@^1.4.0:
@@ -9806,7 +9806,7 @@ object-copy@^0.1.0:
 
 object-hash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
 object-inspect@^1.11.0, object-inspect@^1.9.0:
@@ -9914,7 +9914,7 @@ onetime@^5.1.0, onetime@^5.1.2:
 
 open@^7.4.2:
   version "7.4.2"
-  resolved "https://registry.npmjs.org/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  resolved "https://registry.npmjs.org/open/-/open-7.4.2.tgz"
   integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
   dependencies:
     is-docker "^2.0.0"
@@ -9985,7 +9985,7 @@ outdent@^0.5.0:
 
 outdent@^0.8.0:
   version "0.8.0"
-  resolved "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0"
+  resolved "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz"
   integrity sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==
 
 outvariant@^1.2.1:
@@ -10152,7 +10152,7 @@ parseurl@^1.3.3, parseurl@~1.3.3:
 
 patch-package@^6.5.0:
   version "6.5.0"
-  resolved "https://registry.npmjs.org/patch-package/-/patch-package-6.5.0.tgz#feb058db56f0005da59cfa316488321de585e88a"
+  resolved "https://registry.npmjs.org/patch-package/-/patch-package-6.5.0.tgz"
   integrity sha512-tC3EqJmo74yKqfsMzELaFwxOAu6FH6t+FzFOsnWAuARm7/n2xB5AOeOueE221eM9gtMuIKMKpF9tBy/X2mNP0Q==
   dependencies:
     "@yarnpkg/lockfile" "^1.1.0"
@@ -10298,7 +10298,7 @@ pkg-dir@^4.2.0:
 
 playwright-core@1.28.1:
   version "1.28.1"
-  resolved "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.1.tgz#8400be9f4a8d1c0489abdb9e75a4cc0ffc3c00cb"
+  resolved "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.1.tgz"
   integrity sha512-3PixLnGPno0E8rSBJjtwqTwJe3Yw72QwBBBxNoukIj3lEeBNXwbNiKrNuB1oyQgTBw5QHUhNO3SteEtHaMK6ag==
 
 pointer-symbol@^1.0.0:
@@ -10308,12 +10308,12 @@ pointer-symbol@^1.0.0:
 
 postcss-discard-duplicates@^5.1.0:
   version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz#9eb4fe8456706a4eebd6d3b7b777d07bad03e848"
+  resolved "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz"
   integrity sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==
 
 postcss-import@^14.1.0:
   version "14.1.0"
-  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
+  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
   integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
   dependencies:
     postcss-value-parser "^4.0.0"
@@ -10322,14 +10322,14 @@ postcss-import@^14.1.0:
 
 postcss-js@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz"
   integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
   dependencies:
     camelcase-css "^2.0.1"
 
 postcss-load-config@^3.1.4:
   version "3.1.4"
-  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz"
   integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
   dependencies:
     lilconfig "^2.0.5"
@@ -10337,7 +10337,7 @@ postcss-load-config@^3.1.4:
 
 postcss-load-config@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz"
   integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
   dependencies:
     lilconfig "^2.0.5"
@@ -10345,12 +10345,12 @@ postcss-load-config@^4.0.1:
 
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  resolved "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz"
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
 postcss-modules-local-by-default@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
+  resolved "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz"
   integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
   dependencies:
     icss-utils "^5.0.0"
@@ -10359,21 +10359,21 @@ postcss-modules-local-by-default@^4.0.0:
 
 postcss-modules-scope@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  resolved "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz"
   integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
   dependencies:
     postcss-selector-parser "^6.0.4"
 
 postcss-modules-values@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  resolved "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz"
   integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
   dependencies:
     icss-utils "^5.0.0"
 
 postcss-modules@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules/-/postcss-modules-6.0.0.tgz#cac283dbabbbdc2558c45391cbd0e2df9ec50118"
+  resolved "https://registry.npmjs.org/postcss-modules/-/postcss-modules-6.0.0.tgz"
   integrity sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==
   dependencies:
     generic-names "^4.0.0"
@@ -10387,14 +10387,14 @@ postcss-modules@^6.0.0:
 
 postcss-nested@6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
+  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz"
   integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
   dependencies:
     postcss-selector-parser "^6.0.10"
 
 postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.0.11"
-  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz"
   integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
   dependencies:
     cssesc "^3.0.0"
@@ -10402,12 +10402,12 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selecto
 
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss@^8.4.18:
   version "8.4.21"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz"
   integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
   dependencies:
     nanoid "^3.3.4"
@@ -10416,7 +10416,7 @@ postcss@^8.4.18:
 
 postcss@^8.4.19:
   version "8.4.19"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz"
   integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
   dependencies:
     nanoid "^3.3.4"
@@ -10450,7 +10450,7 @@ prettier@2.7.1:
 
 prettier@^2.7.1:
   version "2.8.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz#4e1fd11c34e2421bc1da9aea9bd8127cd0a35efc"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz"
   integrity sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==
 
 pretty-bytes@5.6.0, pretty-bytes@^5.6.0:
@@ -10737,7 +10737,7 @@ react-is@^17.0.1:
 
 react-refresh@^0.14.0:
   version "0.14.0"
-  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
+  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
 react-router-dom@6.8.1:
@@ -10764,7 +10764,7 @@ react@^18.2.0:
 
 read-cache@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
   integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
   dependencies:
     pify "^2.3.0"
@@ -10999,7 +10999,7 @@ remark-parse@^10.0.0:
 
 remark-parse@^10.0.1:
   version "10.0.1"
-  resolved "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz#6f60ae53edbf0cf38ea223fe643db64d112e0775"
+  resolved "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz"
   integrity sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==
   dependencies:
     "@types/mdast" "^3.0.0"
@@ -11054,7 +11054,7 @@ require-from-string@^2.0.2:
 
 "require-like@>= 0.1.1":
   version "0.1.2"
-  resolved "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz#ad6f30c13becd797010c468afa775c0c0a6b47fa"
+  resolved "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz"
   integrity sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==
 
 require-main-filename@^2.0.0:
@@ -11069,7 +11069,7 @@ requireindex@^1.2.0, requireindex@~1.2.0:
 
 requires-port@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
 resolve-alpn@^1.0.0:
@@ -11110,7 +11110,7 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.14.2, resolve@^1.19
 
 resolve@^1.1.7, resolve@^1.22.0, resolve@^1.22.1:
   version "1.22.1"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
   dependencies:
     is-core-module "^2.9.0"
@@ -11152,7 +11152,7 @@ rfdc@^1.3.0:
 
 rimraf@^2.6.3:
   version "2.7.1"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
     glob "^7.1.3"
@@ -11446,7 +11446,7 @@ sisteransi@^1.0.5:
 
 slash@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  resolved "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz"
   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 
 slash@^3.0.0:
@@ -11530,7 +11530,7 @@ sort-package-json@^1.55.0:
 
 source-map-js@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 source-map-resolve@^0.6.0:
@@ -11686,7 +11686,7 @@ strict-event-emitter@^0.2.0:
 
 string-hash@^1.1.1:
   version "1.1.3"
-  resolved "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+  resolved "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz"
   integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
 
 string-length@^4.0.1:
@@ -11923,7 +11923,7 @@ synckit@^0.8.3:
 
 tailwindcss@^3.1.8:
   version "3.2.4"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz"
   integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==
   dependencies:
     arg "^5.0.2"
@@ -12355,9 +12355,14 @@ typescript@^4.7.4:
 
 typescript@^4.8.4:
   version "4.8.4"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
+typescript@^4.9.4:
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
+  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
+
 uid-safe@2.1.5, uid-safe@^2.1.5:
   version "2.1.5"
   resolved "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz"
@@ -12487,7 +12492,7 @@ unist-util-remove-position@^4.0.0:
 
 unist-util-remove@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-3.1.0.tgz#8042577e151dac989b7517976bfe4bac58f76ccd"
+  resolved "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-3.1.0.tgz"
   integrity sha512-rO/sIghl13eN8irs5OBN2a4RC10MsJdiePCfwrvnzGtgIbHcDXr2REr0qi9F2r/CIb1r9FyyFmcMRIGs+EyUFw==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -12526,7 +12531,7 @@ unist-util-visit-parents@^5.0.0:
 
 unist-util-visit-parents@^5.1.1:
   version "5.1.1"
-  resolved "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.1.tgz#868f353e6fce6bf8fa875b251b0f4fec3be709bb"
+  resolved "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.1.tgz"
   integrity sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -12552,7 +12557,7 @@ unist-util-visit@^4.0.0, unist-util-visit@^4.1.0:
 
 unist-util-visit@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.1.tgz#1c4842d70bd3df6cc545276f5164f933390a9aad"
+  resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.1.tgz"
   integrity sha512-n9KN3WV9k4h1DxYR1LoajgN93wpEi/7ZplVe02IoB4gH5ctI1AaF2670BLHQYbwj+pY83gFtyeySFiyMHJklrg==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -12609,7 +12614,7 @@ url@0.10.3:
 
 use-sync-external-store@1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
@@ -12987,7 +12992,7 @@ xregexp@2.0.0:
 
 xtend@^4.0.2, xtend@~4.0.1:
   version "4.0.2"
-  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 y18n@^4.0.0:
@@ -13017,12 +13022,12 @@ yallist@^4.0.0:
 
 yaml@^1.10.2:
   version "1.10.2"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.1.1:
   version "2.2.1"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz#3014bf0482dcd15147aa8e56109ce8632cd60ce4"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz"
   integrity sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==
 
 yargs-parser@^18.1.2, yargs-parser@^18.1.3:

From cbccdcf6c2e067e5f3061ab87a5f4f5383bf91e8 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 25 Jan 2023 19:19:37 -0800
Subject: [PATCH 07/66] - remove logs - allow hot.accept("id", cb) - surface
 manifest through HMR as "remix:manifest" - start plumbing for router updates

---
 .../plugins/browserRouteModulesPlugin.ts      |  1 -
 .../remix-dev/compiler/plugins/hmrPlugin.ts   | 34 +++++++++++++---
 packages/remix-dev/devServer2.ts              |  3 +-
 packages/remix-dev/liveReload.ts              |  8 ++--
 packages/remix-react/browser.tsx              | 39 ++++++++++++++++++-
 5 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index 7879ebf88da..80c74419c69 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -35,7 +35,6 @@ export function browserRouteModulesPlugin(
           let sourceCode = fs.readFileSync(routeFile, "utf8");
 
           let contents = removeServerExports(sourceCode, routeFile);
-          console.log({ contents });
 
           contents = await applyHMR(
             contents,
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index ade01aa1029..249abc3d01f 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -56,7 +56,19 @@ export function createHotContext(id: string): ImportMetaHot {
   let disposed = false;
 
   let hot = {
-    accept: (cb) => {
+    accept: (dep, cb) => {
+      if (typeof dep !== "string") {
+        cb = dep;
+        dep = undefined;
+      }
+      if (dep) {
+        if (window.__hmr__.contexts[dep]) {
+          window.__hmr__.contexts[dep].dispose();
+        }
+        window.__hmr__.contexts[dep] = createHotContext(dep);
+        window.__hmr__.contexts[dep].accept(cb);
+        return;
+      }
       if (disposed) {
         throw new Error("import.meta.hot.accept() called after dispose()");
       }
@@ -79,7 +91,6 @@ export function createHotContext(id: string): ImportMetaHot {
 
   if (window.__hmr__.contexts[id]) {
     window.__hmr__.contexts[id].dispose();
-    window.__hmr__.contexts[id] = undefined;
   }
   window.__hmr__.contexts[id] = hot;
 
@@ -124,6 +135,16 @@ function remixLiveReloadConnect(config) {
           }
         }
 
+        if (payload.assetsManifest && window.__hmr__.contexts["remix:manifest"]) {
+          let accepted = window.__hmr__.contexts["remix:manifest"].emit(
+            payload.assetsManifest
+          );
+          if (accepted && !anyAccepted) {
+            console.log("[HMR] Only the manifest update was accepted, your application may be out of sync.");
+            anyAccepted = true;
+          }
+        }
+
         if (!anyAccepted) {
           console.log("[HMR] Updated rejected, reloading...");
           window.location.reload();
@@ -160,9 +181,12 @@ remixLiveReloadConnect();
 
       build.onLoad({ filter: /.*/, namespace: "file" }, async (args) => {
         if (
-          !args.path.match(/\.[tj]sx?$/) ||
-          !fs.existsSync(args.path) ||
-          !args.path.startsWith(remixConfig.appDirectory)
+          !args.path.match(
+            /@remix-run[/\\]react[/\\]dist[/\\]esm[/\\]browser.js$/
+          ) &&
+          (!args.path.match(/\.[tj]sx?$/) ||
+            !fs.existsSync(args.path) ||
+            !args.path.startsWith(remixConfig.appDirectory))
         ) {
           return undefined;
         }
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 8549a16186f..93eaf0fcc11 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -128,9 +128,8 @@ export let serve = async (
       if (!assetsManifest) return;
       socket.log(`Rebuilt in ${prettyMs(durationMs)}`);
 
-      console.log({ hmrUpdates });
       if (hmrUpdates && hmrUpdates.length > 0) {
-        socket.hmr(hmrUpdates);
+        socket.hmr(assetsManifest, hmrUpdates);
         return;
       }
 
diff --git a/packages/remix-dev/liveReload.ts b/packages/remix-dev/liveReload.ts
index d4f1e06d9ea..1da0abead19 100644
--- a/packages/remix-dev/liveReload.ts
+++ b/packages/remix-dev/liveReload.ts
@@ -1,8 +1,10 @@
 import WebSocket from "ws";
 
+import type { AssetsManifest } from "./compiler/assets";
+
 type Message =
   | { type: "RELOAD" }
-  | { type: "HMR"; updates: unknown[] }
+  | { type: "HMR"; assetsManifest: AssetsManifest; updates: unknown[] }
   | { type: "LOG"; message: string };
 
 type Broadcast = (message: Message) => void;
@@ -26,8 +28,8 @@ export let serve = (options: { port: number }) => {
     broadcast({ type: "LOG", message: _message });
   };
 
-  let hmr = (updates: unknown[]) => {
-    broadcast({ type: "HMR", updates });
+  let hmr = (assetsManifest: AssetsManifest, updates: unknown[]) => {
+    broadcast({ type: "HMR", assetsManifest, updates });
   };
 
   return { reload, hmr, log, close: wss.close };
diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index e352de59e0f..557e1674872 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -25,7 +25,7 @@ declare global {
     dev?: {
       liveReloadPort?: number;
       hmrRuntime?: string;
-    }
+    };
   };
   var __remixRouteModules: RouteModules;
   var __remixManifest: EntryContext["manifest"];
@@ -34,8 +34,45 @@ declare global {
 
 export interface RemixBrowserProps {}
 
+declare global {
+  interface ImportMeta {
+    hot: any;
+  }
+}
+
 let router: Router;
 
+if (import.meta && import.meta.hot) {
+  import.meta.hot.accept(
+    "remix:manifest",
+    async (newManifest: EntryContext["manifest"]) => {
+      let routeModules = Object.fromEntries(
+        (
+          await Promise.all(
+            Object.entries(__remixRouteModules).map(async ([key, value]) => {
+              if (!newManifest.routes[key]) {
+                return null;
+              }
+
+              return [key, await import(newManifest.routes[key].module)];
+            })
+          )
+        ).filter(Boolean) as [string, RouteModules[string]][]
+      );
+
+      let routes = createClientRoutes(
+        newManifest.routes,
+        routeModules,
+        window.__remixContext.future
+      );
+
+      console.log({ routes });
+
+      // router.updateRoutes(routes); ???
+    }
+  );
+}
+
 /**
  * The entry point for a Remix app when it is rendered in the browser (in
  * `app/entry.client.js`). This component is used by React to hydrate the HTML

From f3d499294ab16be015c8dd9fcffc00dc1f9664c9 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 25 Jan 2023 21:48:17 -0800
Subject: [PATCH 08/66] - added a few comments - updated warning message

---
 packages/remix-dev/compiler/plugins/hmrPlugin.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index 249abc3d01f..b90ef632ba9 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -14,11 +14,11 @@ export let hmrPlugin = ({
     setup: async (build) => {
       build.onResolve({ filter: /^remix:hmr$/ }, (args) => {
         return {
-          namespace: "remix-runtime",
+          namespace: "hmr-runtime",
           path: args.path,
         };
       });
-      build.onLoad({ filter: /.*/, namespace: "remix-runtime" }, () => {
+      build.onLoad({ filter: /.*/, namespace: "hmr-runtime" }, () => {
         let contents = `
 import RefreshRuntime from "react-refresh/runtime";
 
@@ -222,6 +222,7 @@ export async function applyHMR(
 
   let IS_FAST_REFRESH_ENABLED = /\$RefreshReg\$\(/;
 
+  // add import.meta.hot to the module
   let argsPath = args.path;
   let hmrId = JSON.stringify(
     path.relative(remixConfig.rootDirectory, argsPath)
@@ -233,9 +234,9 @@ import.meta.hot = __hmr__.createHotContext(
 $id$
 );
 }`.replace(/\$id\$/g, hmrId);
-
   let sourceCodeWithHMR = hmrPrefix + sourceCode;
 
+  // turn the source code into JS for babel
   let jsWithHMR = esbuild.transformSync(sourceCodeWithHMR, {
     loader: argsPath.endsWith("x") ? "tsx" : "ts",
     format: args.pluginData?.format || "esm",
@@ -243,6 +244,7 @@ $id$
   }).code;
   let resultCode = jsWithHMR;
 
+  // run babel to add react-refresh
   let transformResult = babel.transformSync(jsWithHMR, {
     filename: argsPath,
     ast: false,
@@ -255,11 +257,13 @@ $id$
 
   let jsWithReactRefresh = transformResult?.code || jsWithHMR;
 
+  // auto opt-in to accepting fast refresh updates if the module
+  // has react components
   if (IS_FAST_REFRESH_ENABLED.test(jsWithReactRefresh)) {
     resultCode =
       `
         if (!window.$RefreshReg$ || !window.$RefreshSig$ || !window.$RefreshRuntime$) {
-          console.warn('@remix-run/react-refresh: HTML setup script not run. React Fast Refresh only works when Remix serves your HTML routes. You may want to remove this plugin.');
+          console.warn('remix:hmr: React Fast Refresh only works when the Remix compiler is running in development mode.');
         } else {
           var prevRefreshReg = window.$RefreshReg$;
           var prevRefreshSig = window.$RefreshSig$;

From 29c20f36e0499cc51ed208397d4e2ce0f234e653 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 26 Jan 2023 14:48:27 -0500
Subject: [PATCH 09/66] consistent timestamps for entry and routes

---
 packages/remix-dev/compiler/assets.ts          |  6 ++++--
 packages/remix-dev/compiler/compileBrowser.ts  | 18 +++++++++++++++++-
 .../remix-dev/compiler/plugins/hmrPlugin.ts    |  2 +-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/remix-dev/compiler/assets.ts b/packages/remix-dev/compiler/assets.ts
index fd72a2d5760..b8091b3fca0 100644
--- a/packages/remix-dev/compiler/assets.ts
+++ b/packages/remix-dev/compiler/assets.ts
@@ -39,10 +39,12 @@ export async function createAssetsManifest({
   config,
   metafile,
   cssBundlePath,
+  timestamp,
 }: {
   config: RemixConfig;
   metafile: esbuild.Metafile;
   cssBundlePath?: string;
+  timestamp?: number;
 }): Promise<AssetsManifest> {
   function resolveUrl(outputPath: string): string {
     return createUrl(
@@ -56,7 +58,7 @@ export async function createAssetsManifest({
   ): string[] {
     return imports
       .filter((im) => im.kind === "import-statement")
-      .map((im) => resolveUrl(im.path));
+      .map((im) => resolveUrl(im.path) + (timestamp ? `?t=${timestamp}` : ""));
   }
 
   let routesByFile: Map<string, Route[]> = Object.keys(config.routes).reduce(
@@ -121,7 +123,7 @@ export async function createAssetsManifest({
   let cssBundleHref = cssBundlePath ? resolveUrl(cssBundlePath) : undefined;
 
   let hmrRuntime: string | undefined;
-  for (const [outputPath, output] of Object.entries(metafile.outputs)) {
+  for (let [outputPath, output] of Object.entries(metafile.outputs)) {
     if (Object.keys(output.inputs).includes("remix-hmr:remix:hmr")) {
       hmrRuntime =
         config.publicPath +
diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 7ce6e8faadf..9ae956f5fcd 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -294,15 +294,31 @@ export const createBrowserCompiler = (
         appBuildTask(),
       ]);
 
+      let timestamp = Date.now();
       let manifest = await createAssetsManifest({
         config: remixConfig,
         metafile: appCompiler.metafile!,
         cssBundlePath,
+        timestamp: options.mode === "development" ? timestamp : undefined,
       });
       manifestChannel.write(manifest);
       await writeAssetsManifest(remixConfig, manifest);
 
       if (prevMetafile !== undefined) {
+        manifest.entry.module = manifest.entry.module + `?t=${timestamp}`;
+        manifest.entry.imports = manifest.entry.imports.map(
+          (imp) => imp + `?t=${timestamp}`
+        );
+        for (let routeId of Object.keys(manifest.routes)) {
+          let route = manifest.routes[routeId];
+          manifest.routes[routeId] = {
+            ...route,
+            module: route.module + `?t=${timestamp}`,
+            imports: (route.imports ?? []).map(
+              (imp) => imp + `?t=${timestamp}`
+            ),
+          };
+        }
         let create_input2output = (
           metafile: esbuild.Metafile
         ): Record<string, string> => {
@@ -311,7 +327,7 @@ export const createBrowserCompiler = (
           for (let [outputPath, output] of Object.entries(metafile.outputs)) {
             for (let x of Object.keys(output.inputs)) {
               if (inputs.has(x)) {
-                input2output[x] = outputPath;
+                input2output[x] = outputPath + `?t=${timestamp}`;
               }
             }
           }
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index b90ef632ba9..a2dc72feade 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -126,7 +126,7 @@ function remixLiveReloadConnect(config) {
         for (let update of payload.updates) {
           if (window.__hmr__.contexts[update.id]) {
             let accepted = window.__hmr__.contexts[update.id].emit(
-              await import(update.url + "?t=" + Date.now())
+              await import(update.url)
             );
             if (accepted) {
               console.log("[HMR] Updated accepted by", update.id);

From 0430bec825e48f43c8e0057cf3343f7527f0a3b5 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 26 Jan 2023 16:13:31 -0500
Subject: [PATCH 10/66] wip

---
 packages/remix-dev/compiler/compileBrowser.ts | 31 +++++++++++++++++++
 packages/remix-dev/devServer2.ts              |  9 +++---
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 9ae956f5fcd..5869f1a8464 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -190,6 +190,7 @@ export const createBrowserCompiler = (
   let appCompiler: esbuild.BuildIncremental;
   let cssCompiler: esbuild.BuildIncremental;
   let prevMetafile: esbuild.Metafile;
+  let prevAssetsManifest: AssetsManifest;
   let compile = async (manifestChannel: WriteChannel<AssetsManifest>) => {
     try {
       let appBuildTask = async () => {
@@ -304,6 +305,36 @@ export const createBrowserCompiler = (
       manifestChannel.write(manifest);
       await writeAssetsManifest(remixConfig, manifest);
 
+      let shouldReload = false;
+      let newRouteIds = new Set(Object.keys(manifest.routes));
+      let oldRouteIds = new Set(Object.keys(prevAssetsManifest?.routes ?? {}));
+      let routeIds = new Set([...newRouteIds, ...oldRouteIds]);
+      for (let rid of routeIds) {
+        // any new not in old -> added -> reload
+        if (!newRouteIds.has(rid)) {
+          shouldReload = true;
+          break;
+        }
+        // any old routes not in new -> removed -> full reload
+        if (!oldRouteIds.has(rid)) {
+          shouldReload = true;
+          break;
+        }
+        // any false->true has loader (hasloader)
+        let prevRoute = prevAssetsManifest.routes[rid];
+        let route = manifest.routes[rid];
+        if (!prevRoute.hasLoader && route.hasLoader) {
+          shouldReload = true;
+          break;
+        }
+      }
+
+      if (shouldReload) {
+        prevAssetsManifest = manifest;
+        return;
+      }
+      prevAssetsManifest = manifest;
+
       if (prevMetafile !== undefined) {
         manifest.entry.module = manifest.entry.module + `?t=${timestamp}`;
         manifest.entry.imports = manifest.entry.imports.map(
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 93eaf0fcc11..3d6fd32f115 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -128,16 +128,15 @@ export let serve = async (
       if (!assetsManifest) return;
       socket.log(`Rebuilt in ${prettyMs(durationMs)}`);
 
-      if (hmrUpdates && hmrUpdates.length > 0) {
-        socket.hmr(assetsManifest, hmrUpdates);
-        return;
-      }
-
       info(`Waiting for ${appServerOrigin}...`);
       let start = Date.now();
       await waitForAppServer(assetsManifest.version);
       info(`${appServerOrigin} ready in ${prettyMs(Date.now() - start)}`);
 
+      if (hmrUpdates && hmrUpdates.length > 0) {
+        socket.hmr(assetsManifest, hmrUpdates);
+        return;
+      }
       socket.reload();
     },
     onFileCreated: (file) => socket.log(`File created: ${relativePath(file)}`),

From 56df8768746b9764d94967f89bb61e1125650184 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 26 Jan 2023 16:41:10 -0500
Subject: [PATCH 11/66] smart hmr: live reload when server needs it, otherwise
 hmr

---
 packages/remix-dev/compiler/compileBrowser.ts | 1 +
 packages/remix-dev/devServer2.ts              | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 5869f1a8464..4f816ee9b06 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -330,6 +330,7 @@ export const createBrowserCompiler = (
       }
 
       if (shouldReload) {
+        prevMetafile = metafile;
         prevAssetsManifest = manifest;
         return;
       }
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 3d6fd32f115..f0320016a55 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -132,7 +132,13 @@ export let serve = async (
       let start = Date.now();
       await waitForAppServer(assetsManifest.version);
       info(`${appServerOrigin} ready in ${prettyMs(Date.now() - start)}`);
+      await new Promise((resolve) => {
+        setTimeout(resolve, -1);
+      });
 
+      console.log({
+        hmrUpdates,
+      });
       if (hmrUpdates && hmrUpdates.length > 0) {
         socket.hmr(assetsManifest, hmrUpdates);
         return;

From 5cb03a4d3c35a94801f1f91dbeab790350397ba0 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 27 Jan 2023 19:02:56 -0800
Subject: [PATCH 12/66] =?UTF-8?q?CSS=20HMR=20=E2=9C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../remix-dev/compiler/plugins/hmrPlugin.ts   |  7 ++--
 packages/remix-react/browser.tsx              | 32 +++++++++++++++++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index a2dc72feade..a69d93073c0 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -139,8 +139,7 @@ function remixLiveReloadConnect(config) {
           let accepted = window.__hmr__.contexts["remix:manifest"].emit(
             payload.assetsManifest
           );
-          if (accepted && !anyAccepted) {
-            console.log("[HMR] Only the manifest update was accepted, your application may be out of sync.");
+          if (accepted) {
             anyAccepted = true;
           }
         }
@@ -184,6 +183,7 @@ remixLiveReloadConnect();
           !args.path.match(
             /@remix-run[/\\]react[/\\]dist[/\\]esm[/\\]browser.js$/
           ) &&
+          !args.path.match(/react-router[-dom]?[/\\]$/) &&
           (!args.path.match(/\.[tj]sx?$/) ||
             !fs.existsSync(args.path) ||
             !args.path.startsWith(remixConfig.appDirectory))
@@ -279,9 +279,6 @@ $id$
       `
         window.$RefreshReg$ = prevRefreshReg;
         window.$RefreshSig$ = prevRefreshSig;
-        import.meta.hot.accept(({ module }) => {
-          window.$RefreshRuntime$.performReactRefresh();
-        });
       `;
   }
 
diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index 557e1674872..5abac128d38 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -54,7 +54,21 @@ if (import.meta && import.meta.hot) {
                 return null;
               }
 
-              return [key, await import(newManifest.routes[key].module)];
+              let imported = await import(newManifest.routes[key].module);
+              return [
+                key,
+                {
+                  ...imported,
+                  default:
+                    window.__remixRouteModules[key].default || imported.default,
+                  CatchBoundary:
+                    window.__remixRouteModules[key].CatchBoundary ||
+                    imported.CatchBoundary,
+                  ErrorBoundary:
+                    window.__remixRouteModules[key].ErrorBoundary ||
+                    imported.ErrorBoundary,
+                },
+              ];
             })
           )
         ).filter(Boolean) as [string, RouteModules[string]][]
@@ -66,9 +80,21 @@ if (import.meta && import.meta.hot) {
         window.__remixContext.future
       );
 
-      console.log({ routes });
+      let donePromise = new Promise<void>((resolve) => {
+        let unsub = router.subscribe((state) => {
+          if (state.revalidation === "idle") {
+            unsub();
+            resolve();
+          }
+        });
+      });
 
-      // router.updateRoutes(routes); ???
+      Object.assign(window.__remixManifest, newManifest);
+      Object.assign(window.__remixRouteModules, routeModules);
+      router.setNewRoutes(routes);
+      await donePromise;
+
+      window.$RefreshRuntime$.performReactRefresh();
     }
   );
 }

From 78ea28dc392338084a3135118b693821465c4fa4 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 27 Jan 2023 19:19:14 -0800
Subject: [PATCH 13/66] update in better location to avoid race conditions

---
 packages/remix-react/browser.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index 5abac128d38..4e2f0345e0e 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -83,14 +83,15 @@ if (import.meta && import.meta.hot) {
       let donePromise = new Promise<void>((resolve) => {
         let unsub = router.subscribe((state) => {
           if (state.revalidation === "idle") {
+            Object.assign(window.__remixManifest, newManifest);
+            Object.assign(window.__remixRouteModules, routeModules);
             unsub();
             resolve();
           }
         });
       });
 
-      Object.assign(window.__remixManifest, newManifest);
-      Object.assign(window.__remixRouteModules, routeModules);
+      // This is temporary API and will be more granular before release
       router.setNewRoutes(routes);
       await donePromise;
 

From faa371c78521e050a66cbae543ffa0f1863ffe8e Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 27 Jan 2023 19:24:21 -0800
Subject: [PATCH 14/66] comment things a bit

---
 packages/remix-react/browser.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index 4e2f0345e0e..9a09ed8b1b0 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -46,6 +46,7 @@ if (import.meta && import.meta.hot) {
   import.meta.hot.accept(
     "remix:manifest",
     async (newManifest: EntryContext["manifest"]) => {
+      // Load new route modules that we've seen.
       let routeModules = Object.fromEntries(
         (
           await Promise.all(
@@ -53,12 +54,13 @@ if (import.meta && import.meta.hot) {
               if (!newManifest.routes[key]) {
                 return null;
               }
-
               let imported = await import(newManifest.routes[key].module);
               return [
                 key,
                 {
                   ...imported,
+                  // react-refresh takes care of updating these in-place,
+                  // if we don't preserve existing values we'll loose state.
                   default:
                     window.__remixRouteModules[key].default || imported.default,
                   CatchBoundary:
@@ -74,28 +76,26 @@ if (import.meta && import.meta.hot) {
         ).filter(Boolean) as [string, RouteModules[string]][]
       );
 
+      // Create new routes
       let routes = createClientRoutes(
         newManifest.routes,
         routeModules,
         window.__remixContext.future
       );
 
-      let donePromise = new Promise<void>((resolve) => {
-        let unsub = router.subscribe((state) => {
-          if (state.revalidation === "idle") {
-            Object.assign(window.__remixManifest, newManifest);
-            Object.assign(window.__remixRouteModules, routeModules);
-            unsub();
-            resolve();
-          }
-        });
+      // Wait for router to be idle before updating the manifest and route modules
+      // and triggering a react-refresh
+      let unsub = router.subscribe((state) => {
+        if (state.revalidation === "idle") {
+          Object.assign(window.__remixManifest, newManifest);
+          Object.assign(window.__remixRouteModules, routeModules);
+          window.$RefreshRuntime$.performReactRefresh();
+          unsub();
+        }
       });
 
       // This is temporary API and will be more granular before release
       router.setNewRoutes(routes);
-      await donePromise;
-
-      window.$RefreshRuntime$.performReactRefresh();
     }
   );
 }

From 22fc2c988e880cc0b164b4ed5b84421f95113b21 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 27 Jan 2023 19:27:46 -0800
Subject: [PATCH 15/66] more comments

---
 packages/remix-react/browser.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index 9a09ed8b1b0..17d01971112 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -87,10 +87,12 @@ if (import.meta && import.meta.hot) {
       // and triggering a react-refresh
       let unsub = router.subscribe((state) => {
         if (state.revalidation === "idle") {
+          unsub();
+          // TODO: Handle race conditions here. Should abort if a new update
+          // comes in while we're waiting for the router to be idle.
           Object.assign(window.__remixManifest, newManifest);
           Object.assign(window.__remixRouteModules, routeModules);
           window.$RefreshRuntime$.performReactRefresh();
-          unsub();
         }
       });
 

From e01b9e55c127c034c94c3437f2285a2cbae9344c Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Sat, 28 Jan 2023 00:35:08 -0800
Subject: [PATCH 16/66] always HMR, full reloads are no longer needed

---
 packages/remix-dev/devServer2.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index f0320016a55..92e0753df50 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -139,7 +139,7 @@ export let serve = async (
       console.log({
         hmrUpdates,
       });
-      if (hmrUpdates && hmrUpdates.length > 0) {
+      if (hmrUpdates) {
         socket.hmr(assetsManifest, hmrUpdates);
         return;
       }

From cf7ec3fd82fab4ce7969ad2df6c3eb1575467b40 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 2 Feb 2023 16:07:11 -0500
Subject: [PATCH 17/66] detect loader changes for router self-revalidation

---
 packages/remix-dev/compiler/compileBrowser.ts | 153 +++++++++++-------
 .../plugins/browserRouteModulesPlugin.ts      |  31 +++-
 2 files changed, 127 insertions(+), 57 deletions(-)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 4f816ee9b06..c97a3e42aae 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -79,7 +79,8 @@ const isCssBundlingEnabled = (config: RemixConfig) =>
 const createEsbuildConfig = (
   build: "app" | "css",
   config: RemixConfig,
-  options: CompileOptions
+  options: CompileOptions,
+  onLoader: (filename: string, code: string) => void
 ): esbuild.BuildOptions | esbuild.BuildIncremental => {
   let isCssBuild = build === "css";
   let entryPoints: esbuild.BuildOptions["entryPoints"];
@@ -121,7 +122,7 @@ const createEsbuildConfig = (
     cssFilePlugin({ config, options }),
     urlImportsPlugin(),
     mdxPlugin(config),
-    browserRouteModulesPlugin(config, /\?browser$/),
+    browserRouteModulesPlugin(config, /\?browser$/, onLoader),
     emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/),
     NodeModulesPolyfillPlugin(),
   ].filter(isNotNull);
@@ -191,12 +192,20 @@ export const createBrowserCompiler = (
   let cssCompiler: esbuild.BuildIncremental;
   let prevMetafile: esbuild.Metafile;
   let prevAssetsManifest: AssetsManifest;
+
+  let prevLoaderHashes: Record<string, string>;
+  let loaderHashes: Record<string, string> = {};
+  let onLoader = (filename: string, code: string) => {
+    let key = path.relative(remixConfig.appDirectory, filename);
+    loaderHashes[key] = code;
+  };
+
   let compile = async (manifestChannel: WriteChannel<AssetsManifest>) => {
     try {
       let appBuildTask = async () => {
         appCompiler = await (!appCompiler
           ? esbuild.build({
-              ...createEsbuildConfig("app", remixConfig, options),
+              ...createEsbuildConfig("app", remixConfig, options, onLoader),
               metafile: true,
               incremental: true,
             })
@@ -218,7 +227,7 @@ export const createBrowserCompiler = (
         //  so we need to assert that it's an incremental build
         cssCompiler = (await (!cssCompiler
           ? esbuild.build({
-              ...createEsbuildConfig("css", remixConfig, options),
+              ...createEsbuildConfig("css", remixConfig, options, onLoader),
               metafile: true,
               incremental: true,
               write: false,
@@ -305,35 +314,35 @@ export const createBrowserCompiler = (
       manifestChannel.write(manifest);
       await writeAssetsManifest(remixConfig, manifest);
 
-      let shouldReload = false;
-      let newRouteIds = new Set(Object.keys(manifest.routes));
-      let oldRouteIds = new Set(Object.keys(prevAssetsManifest?.routes ?? {}));
-      let routeIds = new Set([...newRouteIds, ...oldRouteIds]);
-      for (let rid of routeIds) {
-        // any new not in old -> added -> reload
-        if (!newRouteIds.has(rid)) {
-          shouldReload = true;
-          break;
-        }
-        // any old routes not in new -> removed -> full reload
-        if (!oldRouteIds.has(rid)) {
-          shouldReload = true;
-          break;
-        }
-        // any false->true has loader (hasloader)
-        let prevRoute = prevAssetsManifest.routes[rid];
-        let route = manifest.routes[rid];
-        if (!prevRoute.hasLoader && route.hasLoader) {
-          shouldReload = true;
-          break;
-        }
-      }
-
-      if (shouldReload) {
-        prevMetafile = metafile;
-        prevAssetsManifest = manifest;
-        return;
-      }
+      // let shouldReload = false;
+      // let newRouteIds = new Set(Object.keys(manifest.routes));
+      // let oldRouteIds = new Set(Object.keys(prevAssetsManifest?.routes ?? {}));
+      // let routeIds = new Set([...newRouteIds, ...oldRouteIds]);
+      // for (let rid of routeIds) {
+      //   // any new not in old -> added -> reload
+      //   if (!newRouteIds.has(rid)) {
+      //     shouldReload = true;
+      //     break;
+      //   }
+      //   // any old routes not in new -> removed -> full reload
+      //   if (!oldRouteIds.has(rid)) {
+      //     shouldReload = true;
+      //     break;
+      //   }
+      //   // any false->true has loader (hasloader)
+      //   let prevRoute = prevAssetsManifest.routes[rid];
+      //   let route = manifest.routes[rid];
+      //   if (!prevRoute.hasLoader && route.hasLoader) {
+      //     shouldReload = true;
+      //     break;
+      //   }
+      // }
+      //
+      // if (shouldReload) {
+      //   prevMetafile = metafile;
+      //   prevAssetsManifest = manifest;
+      //   return;
+      // }
       prevAssetsManifest = manifest;
 
       if (prevMetafile !== undefined) {
@@ -365,38 +374,74 @@ export const createBrowserCompiler = (
           }
           return input2output;
         };
+
+        // TODO: probably want another map to correlate every input file to the
+        // routes that consume it
+        // ^check if route chunk hash changes when its dependencies change, even in different chunks
+        let filename2id = new Map<string, string>(
+          Object.values(remixConfig.routes).map((r) => [r.file, r.id])
+        );
+        console.log("filename2id");
+        console.log(filename2id.entries());
+        console.log({
+          prevLoaderHashes,
+        });
         let updates = [];
-        let prev_i2o = create_input2output(prevMetafile);
+        // let prev_i2o = create_input2output(prevMetafile);
         let i2o = create_input2output(metafile);
         for (let input of Object.keys(metafile.inputs)) {
-          let prev_o = prev_i2o[input];
+          // let prev_o = prev_i2o[input];
           let o = i2o[input];
-          if (prev_o !== o) {
-            let url =
-              remixConfig.publicPath +
-              path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
-            let id = input;
-            if (id.startsWith("browser-route-module:")) {
-              id = path.relative(
-                remixConfig.rootDirectory,
-                path.join(
-                  remixConfig.appDirectory,
-                  id
-                    .replace(/^browser-route-module:/, "")
-                    .replace(/\?browser$/, "")
-                )
-              );
+          if (o === undefined) {
+            console.warn(`o is undefined: [input=${input}]`);
+            continue;
+          }
+          let url =
+            remixConfig.publicPath +
+            path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
+          let id = input;
+          let revalidate: string[] = [];
+          console.log({ input, id });
+          if (id.startsWith("browser-route-module:")) {
+            let filename = id
+              .replace(/^browser-route-module:/, "")
+              .replace(/\?browser$/, "");
+            id = path.relative(
+              remixConfig.rootDirectory,
+              path.join(remixConfig.appDirectory, filename)
+            );
+            if (prevLoaderHashes) {
+              let prevLoader = prevLoaderHashes[filename];
+              let loader = loaderHashes[filename];
+              console.log({
+                prevLoader,
+                loader,
+                id,
+                filename,
+                url,
+              });
+              if (loader !== prevLoader) {
+                let routeId = filename2id.get(filename);
+                if (routeId) {
+                  revalidate.push(routeId);
+                }
+              }
             }
-            updates.push({
-              id,
-              url,
-            });
           }
+          updates.push({
+            id,
+            url,
+            revalidate,
+          });
         }
         prevMetafile = metafile;
+        prevLoaderHashes = loaderHashes;
+        loaderHashes = {};
         return updates;
       }
       prevMetafile = metafile;
+      prevLoaderHashes = loaderHashes;
+      loaderHashes = {};
     } catch (reason) {
       console.error("HMR update failed", reason);
     }
diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index 80c74419c69..04ce404f57e 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -8,13 +8,16 @@ import { applyHMR } from "./hmrPlugin";
 
 const serverOnlyExports = new Set(["action", "loader"]);
 
+type OnLoader = (filename: string, code: string) => void;
+
 /**
  * This plugin loads route modules for the browser build, using module shims
  * that re-export only the route module exports that are safe for the browser.
  */
 export function browserRouteModulesPlugin(
   config: RemixConfig,
-  suffixMatcher: RegExp
+  suffixMatcher: RegExp,
+  onLoader: OnLoader
 ): esbuild.Plugin {
   return {
     name: "browser-route-modules",
@@ -34,7 +37,7 @@ export function browserRouteModulesPlugin(
 
           let sourceCode = fs.readFileSync(routeFile, "utf8");
 
-          let contents = removeServerExports(sourceCode, routeFile);
+          let contents = removeServerExports(sourceCode, routeFile, onLoader);
 
           contents = await applyHMR(
             contents,
@@ -57,7 +60,11 @@ export function browserRouteModulesPlugin(
   };
 }
 
-function removeServerExports(sourceCode: string, fileName: string) {
+function removeServerExports(
+  sourceCode: string,
+  fileName: string,
+  onLoader: OnLoader
+) {
   let { outputText, sourceMapText } = ts.transpileModule(sourceCode, {
     fileName,
     compilerOptions: {
@@ -68,9 +75,17 @@ function removeServerExports(sourceCode: string, fileName: string) {
     transformers: {
       before: [
         (context) => {
+          let sourceFile: ts.SourceFile;
           let visit: ts.Visitor = (node) => {
+            if (ts.isSourceFile(node)) {
+              sourceFile = node;
+            }
             let modifiers = ts.getModifiers(node as ts.HasModifiers);
 
+            // TODO: if loader changes and its being re-exported or imported in some other route,
+            // need to crawl import graph for all such routes and consider them to have changed their loader too.
+            // consider diffing hashes from esbuild output files and comparing server to browser to prev browser etc.
+            // ^ maybe we can use that to detect these cases
             if (ts.isExportDeclaration(node) && node.exportClause) {
               if ("elements" in node.exportClause) {
                 let elements = node.exportClause.elements.filter(
@@ -97,6 +112,16 @@ function removeServerExports(sourceCode: string, fileName: string) {
             ) {
               if (ts.isFunctionDeclaration(node) && node.name) {
                 if (serverOnlyExports.has(node.name.escapedText as string)) {
+                  if (node.name.escapedText === "loader") {
+                    let printer = ts.createPrinter();
+                    let code = printer.printNode(
+                      ts.EmitHint.Unspecified,
+                      node,
+                      sourceFile
+                    );
+                    // printed = hash of loader
+                    onLoader(fileName, code);
+                  }
                   return ts.factory.createEmptyStatement();
                 }
               }

From 628062b8d578b481ec86b727fa2c579d5efc12f5 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 3 Feb 2023 22:22:01 -0500
Subject: [PATCH 18/66] refactor: compiler returns assets manifest and
 metafiles for browser/server

---
 packages/remix-dev/compiler/assets.ts         |  18 +-
 packages/remix-dev/compiler/compileBrowser.ts | 374 ++++++------------
 packages/remix-dev/compiler/compilerServer.ts |  10 +-
 packages/remix-dev/compiler/index.ts          |   1 +
 packages/remix-dev/compiler/remixCompiler.ts  |  23 +-
 packages/remix-dev/compiler/watch.ts          |  22 +-
 packages/remix-dev/devServer2.ts              |  16 +-
 packages/remix-dev/hmr.ts                     | 101 +++++
 packages/remix-dev/liveReload.ts              |   8 +-
 9 files changed, 286 insertions(+), 287 deletions(-)
 create mode 100644 packages/remix-dev/hmr.ts

diff --git a/packages/remix-dev/compiler/assets.ts b/packages/remix-dev/compiler/assets.ts
index b8091b3fca0..09f6a1a180c 100644
--- a/packages/remix-dev/compiler/assets.ts
+++ b/packages/remix-dev/compiler/assets.ts
@@ -32,7 +32,10 @@ export interface AssetsManifest {
     };
   };
   cssBundleHref?: string;
-  hmrRuntime?: string;
+  hmr?: {
+    runtime: string;
+    routes: Record<string, { loaderHash: string }>;
+  };
 }
 
 export async function createAssetsManifest({
@@ -40,11 +43,13 @@ export async function createAssetsManifest({
   metafile,
   cssBundlePath,
   timestamp,
+  hmr,
 }: {
   config: RemixConfig;
   metafile: esbuild.Metafile;
   cssBundlePath?: string;
   timestamp?: number;
+  hmr?: AssetsManifest["hmr"];
 }): Promise<AssetsManifest> {
   function resolveUrl(outputPath: string): string {
     return createUrl(
@@ -122,16 +127,7 @@ export async function createAssetsManifest({
 
   let cssBundleHref = cssBundlePath ? resolveUrl(cssBundlePath) : undefined;
 
-  let hmrRuntime: string | undefined;
-  for (let [outputPath, output] of Object.entries(metafile.outputs)) {
-    if (Object.keys(output.inputs).includes("remix-hmr:remix:hmr")) {
-      hmrRuntime =
-        config.publicPath +
-        path.relative(config.assetsBuildDirectory, path.resolve(outputPath));
-    }
-  }
-
-  return { version, entry, routes, cssBundleHref, hmrRuntime };
+  return { version, entry, routes, cssBundleHref, hmr };
 }
 
 type ImportsCache = { [routeId: string]: string[] };
diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index c97a3e42aae..143f6c65279 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -34,7 +34,7 @@ export type BrowserCompiler = {
   // produce ./public/build/
   compile: (
     manifestChannel: WriteChannel<AssetsManifest>
-  ) => Promise<unknown[] | undefined>;
+  ) => Promise<esbuild.Metafile>;
   dispose: () => void;
 };
 
@@ -133,7 +133,7 @@ const createEsbuildConfig = (
     entryPoints["react-dom"] = "react-dom";
     entryPoints["react-dom/client"] = "react-dom/client";
     entryPoints["react-refresh/runtime"] = "react-refresh/runtime";
-    // entryPoints["remix:hmr"] = "remix:hmr";
+
     plugins.push(hmrPlugin({ remixConfig: config }));
   }
 
@@ -190,261 +190,145 @@ export const createBrowserCompiler = (
 ): BrowserCompiler => {
   let appCompiler: esbuild.BuildIncremental;
   let cssCompiler: esbuild.BuildIncremental;
-  let prevMetafile: esbuild.Metafile;
-  let prevAssetsManifest: AssetsManifest;
-
-  let prevLoaderHashes: Record<string, string>;
-  let loaderHashes: Record<string, string> = {};
-  let onLoader = (filename: string, code: string) => {
-    let key = path.relative(remixConfig.appDirectory, filename);
-    loaderHashes[key] = code;
-  };
 
   let compile = async (manifestChannel: WriteChannel<AssetsManifest>) => {
-    try {
-      let appBuildTask = async () => {
-        appCompiler = await (!appCompiler
-          ? esbuild.build({
-              ...createEsbuildConfig("app", remixConfig, options, onLoader),
-              metafile: true,
-              incremental: true,
-            })
-          : appCompiler.rebuild());
-
-        invariant(
-          appCompiler.metafile,
-          "Expected app compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
+    let hmrRoutes: Record<string, { loaderHash: string }> = {};
+    let onLoader = (filename: string, code: string) => {
+      let key = path.relative(remixConfig.appDirectory, filename);
+      hmrRoutes[key] = { loaderHash: code };
+    };
+
+    let appBuildTask = async () => {
+      appCompiler = await (!appCompiler
+        ? esbuild.build({
+            ...createEsbuildConfig("app", remixConfig, options, onLoader),
+            metafile: true,
+            incremental: true,
+          })
+        : appCompiler.rebuild());
+
+      invariant(
+        appCompiler.metafile,
+        "Expected app compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
+      );
+      return appCompiler.metafile;
+    };
+
+    let cssBuildTask = async () => {
+      if (!isCssBundlingEnabled(remixConfig)) {
+        return;
+      }
+
+      // The types aren't great when combining write: false and incremental: true
+      //  so we need to assert that it's an incremental build
+      cssCompiler = (await (!cssCompiler
+        ? esbuild.build({
+            ...createEsbuildConfig("css", remixConfig, options, onLoader),
+            metafile: true,
+            incremental: true,
+            write: false,
+          })
+        : cssCompiler.rebuild())) as esbuild.BuildIncremental;
+
+      invariant(
+        cssCompiler.metafile,
+        "Expected CSS compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
+      );
+
+      let outputFiles = cssCompiler.outputFiles || [];
+
+      let isCssBundleFile = (
+        outputFile: esbuild.OutputFile,
+        extension: ".css" | ".css.map"
+      ): boolean => {
+        return (
+          path.dirname(outputFile.path) === remixConfig.assetsBuildDirectory &&
+          path.basename(outputFile.path).startsWith("css-bundle") &&
+          outputFile.path.endsWith(extension)
         );
-        return appCompiler.metafile;
       };
 
-      let cssBuildTask = async () => {
-        if (!isCssBundlingEnabled(remixConfig)) {
-          return;
-        }
-
-        // The types aren't great when combining write: false and incremental: true
-        //  so we need to assert that it's an incremental build
-        cssCompiler = (await (!cssCompiler
-          ? esbuild.build({
-              ...createEsbuildConfig("css", remixConfig, options, onLoader),
-              metafile: true,
-              incremental: true,
-              write: false,
-            })
-          : cssCompiler.rebuild())) as esbuild.BuildIncremental;
-
-        invariant(
-          cssCompiler.metafile,
-          "Expected CSS compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
-        );
+      let cssBundleFile = outputFiles.find((outputFile) =>
+        isCssBundleFile(outputFile, ".css")
+      );
 
-        let outputFiles = cssCompiler.outputFiles || [];
-
-        let isCssBundleFile = (
-          outputFile: esbuild.OutputFile,
-          extension: ".css" | ".css.map"
-        ): boolean => {
-          return (
-            path.dirname(outputFile.path) ===
-              remixConfig.assetsBuildDirectory &&
-            path.basename(outputFile.path).startsWith("css-bundle") &&
-            outputFile.path.endsWith(extension)
-          );
-        };
-
-        let cssBundleFile = outputFiles.find((outputFile) =>
-          isCssBundleFile(outputFile, ".css")
-        );
+      if (!cssBundleFile) {
+        return;
+      }
 
-        if (!cssBundleFile) {
-          return;
-        }
-
-        let cssBundlePath = cssBundleFile.path;
-
-        let { css, map } = await postcss([
-          // We need to discard duplicate rules since "composes"
-          // in CSS Modules can result in duplicate styles
-          postcssDiscardDuplicates(),
-        ]).process(cssBundleFile.text, {
-          from: cssBundlePath,
-          to: cssBundlePath,
-          map: options.sourcemap && {
-            prev: outputFiles.find((outputFile) =>
-              isCssBundleFile(outputFile, ".css.map")
-            )?.text,
-            inline: false,
-            annotation: false,
-            sourcesContent: true,
-          },
-        });
-
-        await fse.ensureDir(path.dirname(cssBundlePath));
-
-        await Promise.all([
-          fse.writeFile(cssBundlePath, css),
-          options.mode !== "production" && map
-            ? fse.writeFile(`${cssBundlePath}.map`, map.toString()) // Write our updated source map rather than esbuild's
-            : null,
-          ...outputFiles
-            .filter((outputFile) => !/\.(css|js|map)$/.test(outputFile.path))
-            .map(async (asset) => {
-              await fse.ensureDir(path.dirname(asset.path));
-              await fse.writeFile(asset.path, asset.contents);
-            }),
-        ]);
-
-        // Return the CSS bundle path so we can use it to generate the manifest
-        return cssBundlePath;
-      };
+      let cssBundlePath = cssBundleFile.path;
+
+      let { css, map } = await postcss([
+        // We need to discard duplicate rules since "composes"
+        // in CSS Modules can result in duplicate styles
+        postcssDiscardDuplicates(),
+      ]).process(cssBundleFile.text, {
+        from: cssBundlePath,
+        to: cssBundlePath,
+        map: options.sourcemap && {
+          prev: outputFiles.find((outputFile) =>
+            isCssBundleFile(outputFile, ".css.map")
+          )?.text,
+          inline: false,
+          annotation: false,
+          sourcesContent: true,
+        },
+      });
 
-      let [cssBundlePath, metafile] = await Promise.all([
-        cssBuildTask(),
-        appBuildTask(),
+      await fse.ensureDir(path.dirname(cssBundlePath));
+
+      await Promise.all([
+        fse.writeFile(cssBundlePath, css),
+        options.mode !== "production" && map
+          ? fse.writeFile(`${cssBundlePath}.map`, map.toString()) // Write our updated source map rather than esbuild's
+          : null,
+        ...outputFiles
+          .filter((outputFile) => !/\.(css|js|map)$/.test(outputFile.path))
+          .map(async (asset) => {
+            await fse.ensureDir(path.dirname(asset.path));
+            await fse.writeFile(asset.path, asset.contents);
+          }),
       ]);
 
-      let timestamp = Date.now();
-      let manifest = await createAssetsManifest({
-        config: remixConfig,
-        metafile: appCompiler.metafile!,
-        cssBundlePath,
-        timestamp: options.mode === "development" ? timestamp : undefined,
-      });
-      manifestChannel.write(manifest);
-      await writeAssetsManifest(remixConfig, manifest);
-
-      // let shouldReload = false;
-      // let newRouteIds = new Set(Object.keys(manifest.routes));
-      // let oldRouteIds = new Set(Object.keys(prevAssetsManifest?.routes ?? {}));
-      // let routeIds = new Set([...newRouteIds, ...oldRouteIds]);
-      // for (let rid of routeIds) {
-      //   // any new not in old -> added -> reload
-      //   if (!newRouteIds.has(rid)) {
-      //     shouldReload = true;
-      //     break;
-      //   }
-      //   // any old routes not in new -> removed -> full reload
-      //   if (!oldRouteIds.has(rid)) {
-      //     shouldReload = true;
-      //     break;
-      //   }
-      //   // any false->true has loader (hasloader)
-      //   let prevRoute = prevAssetsManifest.routes[rid];
-      //   let route = manifest.routes[rid];
-      //   if (!prevRoute.hasLoader && route.hasLoader) {
-      //     shouldReload = true;
-      //     break;
-      //   }
-      // }
-      //
-      // if (shouldReload) {
-      //   prevMetafile = metafile;
-      //   prevAssetsManifest = manifest;
-      //   return;
-      // }
-      prevAssetsManifest = manifest;
-
-      if (prevMetafile !== undefined) {
-        manifest.entry.module = manifest.entry.module + `?t=${timestamp}`;
-        manifest.entry.imports = manifest.entry.imports.map(
-          (imp) => imp + `?t=${timestamp}`
-        );
-        for (let routeId of Object.keys(manifest.routes)) {
-          let route = manifest.routes[routeId];
-          manifest.routes[routeId] = {
-            ...route,
-            module: route.module + `?t=${timestamp}`,
-            imports: (route.imports ?? []).map(
-              (imp) => imp + `?t=${timestamp}`
-            ),
-          };
-        }
-        let create_input2output = (
-          metafile: esbuild.Metafile
-        ): Record<string, string> => {
-          let inputs = new Set(Object.keys(metafile.inputs));
-          let input2output: Record<string, string> = {};
-          for (let [outputPath, output] of Object.entries(metafile.outputs)) {
-            for (let x of Object.keys(output.inputs)) {
-              if (inputs.has(x)) {
-                input2output[x] = outputPath + `?t=${timestamp}`;
-              }
-            }
-          }
-          return input2output;
-        };
-
-        // TODO: probably want another map to correlate every input file to the
-        // routes that consume it
-        // ^check if route chunk hash changes when its dependencies change, even in different chunks
-        let filename2id = new Map<string, string>(
-          Object.values(remixConfig.routes).map((r) => [r.file, r.id])
+      // Return the CSS bundle path so we can use it to generate the manifest
+      return cssBundlePath;
+    };
+
+    let [cssBundlePath, metafile] = await Promise.all([
+      cssBuildTask(),
+      appBuildTask(),
+    ]);
+
+    let timestamp = Date.now();
+
+    let hmr: AssetsManifest["hmr"] | undefined = undefined;
+    if (options.mode === "development") {
+      let hmrRuntimeOutput = Object.entries(metafile.outputs).find(
+        ([_, output]) => output.inputs["remix-hmr:remix:hmr"]
+      )?.[0];
+      invariant(hmrRuntimeOutput, "Expected to find HMR runtime in outputs");
+      let hmrRuntime =
+        remixConfig.publicPath +
+        path.relative(
+          remixConfig.assetsBuildDirectory,
+          path.resolve(hmrRuntimeOutput)
         );
-        console.log("filename2id");
-        console.log(filename2id.entries());
-        console.log({
-          prevLoaderHashes,
-        });
-        let updates = [];
-        // let prev_i2o = create_input2output(prevMetafile);
-        let i2o = create_input2output(metafile);
-        for (let input of Object.keys(metafile.inputs)) {
-          // let prev_o = prev_i2o[input];
-          let o = i2o[input];
-          if (o === undefined) {
-            console.warn(`o is undefined: [input=${input}]`);
-            continue;
-          }
-          let url =
-            remixConfig.publicPath +
-            path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
-          let id = input;
-          let revalidate: string[] = [];
-          console.log({ input, id });
-          if (id.startsWith("browser-route-module:")) {
-            let filename = id
-              .replace(/^browser-route-module:/, "")
-              .replace(/\?browser$/, "");
-            id = path.relative(
-              remixConfig.rootDirectory,
-              path.join(remixConfig.appDirectory, filename)
-            );
-            if (prevLoaderHashes) {
-              let prevLoader = prevLoaderHashes[filename];
-              let loader = loaderHashes[filename];
-              console.log({
-                prevLoader,
-                loader,
-                id,
-                filename,
-                url,
-              });
-              if (loader !== prevLoader) {
-                let routeId = filename2id.get(filename);
-                if (routeId) {
-                  revalidate.push(routeId);
-                }
-              }
-            }
-          }
-          updates.push({
-            id,
-            url,
-            revalidate,
-          });
-        }
-        prevMetafile = metafile;
-        prevLoaderHashes = loaderHashes;
-        loaderHashes = {};
-        return updates;
-      }
-      prevMetafile = metafile;
-      prevLoaderHashes = loaderHashes;
-      loaderHashes = {};
-    } catch (reason) {
-      console.error("HMR update failed", reason);
+      hmr = {
+        runtime: hmrRuntime,
+        routes: hmrRoutes,
+      };
     }
+
+    let manifest = await createAssetsManifest({
+      config: remixConfig,
+      metafile: appCompiler.metafile!,
+      cssBundlePath,
+      timestamp: options.mode === "development" ? timestamp : undefined,
+      hmr,
+    });
+    manifestChannel.write(manifest);
+    await writeAssetsManifest(remixConfig, manifest);
+    return metafile;
   };
 
   return {
diff --git a/packages/remix-dev/compiler/compilerServer.ts b/packages/remix-dev/compiler/compilerServer.ts
index 01bb2f1e273..061a1383130 100644
--- a/packages/remix-dev/compiler/compilerServer.ts
+++ b/packages/remix-dev/compiler/compilerServer.ts
@@ -3,6 +3,7 @@ import * as esbuild from "esbuild";
 import * as fse from "fs-extra";
 import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
 
+import invariant from "../invariant";
 import type { ReadChannel } from "../channel";
 import type { RemixConfig } from "../config";
 import type { AssetsManifest } from "./assets";
@@ -23,7 +24,9 @@ import { urlImportsPlugin } from "./plugins/urlImportsPlugin";
 
 export type ServerCompiler = {
   // produce ./build/index.js
-  compile: (manifestChannel: ReadChannel<AssetsManifest>) => Promise<void>;
+  compile: (
+    manifestChannel: ReadChannel<AssetsManifest>
+  ) => Promise<esbuild.Metafile>;
   dispose: () => void;
 };
 
@@ -170,11 +173,14 @@ export const createServerCompiler = (
       manifestChannel,
       options
     );
-    let { outputFiles } = await esbuild.build({
+    let { metafile, outputFiles } = await esbuild.build({
       ...esbuildConfig,
       write: false,
+      metafile: true,
     });
+    invariant(metafile, "Expected metafile to be defined.");
     await writeServerBuildResult(remixConfig, outputFiles!);
+    return metafile;
   };
   return {
     compile,
diff --git a/packages/remix-dev/compiler/index.ts b/packages/remix-dev/compiler/index.ts
index 52360cac441..75da2f2c65b 100644
--- a/packages/remix-dev/compiler/index.ts
+++ b/packages/remix-dev/compiler/index.ts
@@ -3,3 +3,4 @@ export { type WatchOptions, watch } from "./watch";
 
 export { type CompileOptions, parseMode } from "./options";
 export { logCompileFailure } from "./onCompileFailure";
+export { CompileResult } from "./remixCompiler";
diff --git a/packages/remix-dev/compiler/remixCompiler.ts b/packages/remix-dev/compiler/remixCompiler.ts
index 08afb447027..bf63dda0447 100644
--- a/packages/remix-dev/compiler/remixCompiler.ts
+++ b/packages/remix-dev/compiler/remixCompiler.ts
@@ -1,3 +1,5 @@
+import type esbuild from "esbuild";
+
 import { createChannel } from "../channel";
 import type { RemixConfig } from "../config";
 import type { AssetsManifest } from "./assets";
@@ -23,20 +25,31 @@ export const createRemixCompiler = (
   };
 };
 
+export type CompileResult = {
+  assetsManifest: AssetsManifest;
+  metafile: {
+    browser: esbuild.Metafile;
+    server: esbuild.Metafile;
+  };
+};
+
 export const compile = async (
   compiler: RemixCompiler,
   options: {
     onCompileFailure?: OnCompileFailure;
   } = {}
-): Promise<
-  { assetsManifest?: AssetsManifest; hmrUpdates?: unknown[] } | undefined
-> => {
+): Promise<CompileResult | undefined> => {
   try {
     let assetsManifestChannel = createChannel<AssetsManifest>();
     let browserPromise = compiler.browser.compile(assetsManifestChannel);
     let serverPromise = compiler.server.compile(assetsManifestChannel);
-    let [hmrUpdates] = await Promise.all([browserPromise, serverPromise]);
-    return { assetsManifest: await assetsManifestChannel.read(), hmrUpdates };
+    return {
+      assetsManifest: await assetsManifestChannel.read(),
+      metafile: {
+        browser: await browserPromise,
+        server: await serverPromise,
+      },
+    };
   } catch (error: unknown) {
     options.onCompileFailure?.(error as Error);
     return undefined;
diff --git a/packages/remix-dev/compiler/watch.ts b/packages/remix-dev/compiler/watch.ts
index ec297f97a11..24871fe2bb5 100644
--- a/packages/remix-dev/compiler/watch.ts
+++ b/packages/remix-dev/compiler/watch.ts
@@ -4,9 +4,9 @@ import * as path from "path";
 
 import type { RemixConfig } from "../config";
 import { readConfig } from "../config";
-import type { AssetsManifest } from "./assets";
 import { logCompileFailure } from "./onCompileFailure";
 import type { CompileOptions } from "./options";
+import type { CompileResult } from "./remixCompiler";
 import { compile, createRemixCompiler, dispose } from "./remixCompiler";
 import { warnOnce } from "./warnings";
 
@@ -23,11 +23,7 @@ function isEntryPoint(config: RemixConfig, file: string): boolean {
 export type WatchOptions = Partial<CompileOptions> & {
   reloadConfig?(root: string): Promise<RemixConfig>;
   onRebuildStart?(): void;
-  onRebuildFinish?(
-    durationMs: number,
-    assetsManifest?: AssetsManifest,
-    hmrUpdates?: unknown[]
-  ): void;
+  onRebuildFinish?(durationMs: number, result?: CompileResult): void;
   onFileCreated?(file: string): void;
   onFileChanged?(file: string): void;
   onFileDeleted?(file: string): void;
@@ -81,19 +77,17 @@ export async function watch(
     }
 
     compiler = createRemixCompiler(config, options);
-    let { assetsManifest, hmrUpdates } =
-      (await compile(compiler, { onCompileFailure })) ?? {};
-    onRebuildFinish?.(Date.now() - start, assetsManifest, hmrUpdates);
+    let result = await compile(compiler, { onCompileFailure });
+    onRebuildFinish?.(Date.now() - start, result);
   }, 500);
 
   let rebuild = debounce(async () => {
     onRebuildStart?.();
     let start = Date.now();
-    let { assetsManifest, hmrUpdates } =
-      (await compile(compiler, {
-        onCompileFailure,
-      })) ?? {};
-    onRebuildFinish?.(Date.now() - start, assetsManifest, hmrUpdates);
+    let result = await compile(compiler, {
+      onCompileFailure,
+    });
+    onRebuildFinish?.(Date.now() - start, result);
   }, 100);
 
   let toWatch = [config.appDirectory];
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 92e0753df50..6b65601c2be 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -11,6 +11,7 @@ import * as Compiler from "./compiler";
 import { type RemixConfig } from "./config";
 import { loadEnv } from "./env";
 import * as LiveReload from "./liveReload";
+import * as HMR from "./hmr";
 
 let info = (message: string) => console.info(`💿 ${message}`);
 
@@ -116,6 +117,7 @@ export let serve = async (
 
   // watch and live reload on rebuilds
   let socket = LiveReload.serve({ port: dev.port });
+  let prevResult: Compiler.CompileResult | undefined = undefined;
   let dispose = await Compiler.watch(config, {
     mode: "development",
     liveReloadPort: dev.port,
@@ -124,8 +126,9 @@ export let serve = async (
       clean(config);
       socket.log("Rebuilding...");
     },
-    onRebuildFinish: async (durationMs, assetsManifest, hmrUpdates) => {
-      if (!assetsManifest) return;
+    onRebuildFinish: async (durationMs, result) => {
+      if (!result) return;
+      let { assetsManifest } = result;
       socket.log(`Rebuilt in ${prettyMs(durationMs)}`);
 
       info(`Waiting for ${appServerOrigin}...`);
@@ -136,14 +139,13 @@ export let serve = async (
         setTimeout(resolve, -1);
       });
 
-      console.log({
-        hmrUpdates,
-      });
-      if (hmrUpdates) {
-        socket.hmr(assetsManifest, hmrUpdates);
+      if (assetsManifest.hmr && prevResult) {
+        let updates = HMR.updates(result, prevResult);
+        socket.hmr(assetsManifest, updates);
         return;
       }
       socket.reload();
+      prevResult = result;
     },
     onFileCreated: (file) => socket.log(`File created: ${relativePath(file)}`),
     onFileChanged: (file) => socket.log(`File changed: ${relativePath(file)}`),
diff --git a/packages/remix-dev/hmr.ts b/packages/remix-dev/hmr.ts
new file mode 100644
index 00000000000..a62c2792c03
--- /dev/null
+++ b/packages/remix-dev/hmr.ts
@@ -0,0 +1,101 @@
+import type esbuild from "esbuild";
+import path from "node:path";
+
+import type { RemixConfig } from "./config";
+import type { CompileResult } from "./compiler";
+
+export let updates = (result: CompileResult, prevResult: CompileResult) => {
+  let timestamp: number = 1;
+  let remixConfig: RemixConfig = {} as any;
+
+  // TODO update code below to use `result` and `prevResult`
+  // instead of outdated references
+
+  manifest.entry.module = manifest.entry.module + `?t=${timestamp}`;
+  manifest.entry.imports = manifest.entry.imports.map(
+    (imp) => imp + `?t=${timestamp}`
+  );
+  for (let routeId of Object.keys(manifest.routes)) {
+    let route = manifest.routes[routeId];
+    manifest.routes[routeId] = {
+      ...route,
+      module: route.module + `?t=${timestamp}`,
+      imports: (route.imports ?? []).map((imp) => imp + `?t=${timestamp}`),
+    };
+  }
+  let create_input2output = (
+    metafile: esbuild.Metafile
+  ): Record<string, string> => {
+    let inputs = new Set(Object.keys(metafile.inputs));
+    let input2output: Record<string, string> = {};
+    for (let [outputPath, output] of Object.entries(metafile.outputs)) {
+      for (let x of Object.keys(output.inputs)) {
+        if (inputs.has(x)) {
+          input2output[x] = outputPath + `?t=${timestamp}`;
+        }
+      }
+    }
+    return input2output;
+  };
+
+  // TODO: probably want another map to correlate every input file to the
+  // routes that consume it
+  // ^check if route chunk hash changes when its dependencies change, even in different chunks
+  let filename2id = new Map<string, string>(
+    Object.values(remixConfig.routes).map((r) => [r.file, r.id])
+  );
+  console.log("filename2id");
+  console.log(filename2id.entries());
+  console.log({
+    prevLoaderHashes,
+  });
+  let updates = [];
+  // let prev_i2o = create_input2output(prevMetafile);
+  let i2o = create_input2output(metafile);
+  for (let input of Object.keys(metafile.inputs)) {
+    // let prev_o = prev_i2o[input];
+    let o = i2o[input];
+    if (o === undefined) {
+      console.warn(`o is undefined: [input=${input}]`);
+      continue;
+    }
+    let url =
+      remixConfig.publicPath +
+      path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
+    let id = input;
+    let revalidate: string[] = [];
+    console.log({ input, id });
+    if (id.startsWith("browser-route-module:")) {
+      let filename = id
+        .replace(/^browser-route-module:/, "")
+        .replace(/\?browser$/, "");
+      id = path.relative(
+        remixConfig.rootDirectory,
+        path.join(remixConfig.appDirectory, filename)
+      );
+      if (prevLoaderHashes) {
+        let prevLoader = prevLoaderHashes[filename];
+        let loader = loaderHashes[filename];
+        console.log({
+          prevLoader,
+          loader,
+          id,
+          filename,
+          url,
+        });
+        if (loader !== prevLoader) {
+          let routeId = filename2id.get(filename);
+          if (routeId) {
+            revalidate.push(routeId);
+          }
+        }
+      }
+    }
+    updates.push({
+      id,
+      url,
+      revalidate,
+    });
+  }
+  return updates;
+};
diff --git a/packages/remix-dev/liveReload.ts b/packages/remix-dev/liveReload.ts
index 1da0abead19..4c0843e5043 100644
--- a/packages/remix-dev/liveReload.ts
+++ b/packages/remix-dev/liveReload.ts
@@ -2,10 +2,12 @@ import WebSocket from "ws";
 
 import type { AssetsManifest } from "./compiler/assets";
 
+type HMR_Update = {};
+
 type Message =
   | { type: "RELOAD" }
-  | { type: "HMR"; assetsManifest: AssetsManifest; updates: unknown[] }
-  | { type: "LOG"; message: string };
+  | { type: "LOG"; message: string }
+  | { type: "HMR"; assetsManifest: AssetsManifest; updates: HMR_Update[] };
 
 type Broadcast = (message: Message) => void;
 
@@ -28,7 +30,7 @@ export let serve = (options: { port: number }) => {
     broadcast({ type: "LOG", message: _message });
   };
 
-  let hmr = (assetsManifest: AssetsManifest, updates: unknown[]) => {
+  let hmr = (assetsManifest: AssetsManifest, updates: HMR_Update[]) => {
     broadcast({ type: "HMR", assetsManifest, updates });
   };
 

From de9e5cd92971b039612180a29963b8d78b30ae5c Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Mon, 6 Feb 2023 15:18:45 -0500
Subject: [PATCH 19/66] refactor: basing hmr updates off of assets manifest
 routes

punting on individual module hmr for mvp
right now, we only do hmr updates at the route level based on manifest
changes
---
 packages/remix-dev/compiler/assets.ts         |  10 +-
 packages/remix-dev/compiler/compileBrowser.ts |  17 +-
 .../remix-dev/compiler/plugins/hmrPlugin.ts   |   1 +
 packages/remix-dev/compiler/watch.ts          |   6 +-
 packages/remix-dev/devServer2.ts              |  12 +-
 packages/remix-dev/hmr.ts                     | 146 ++++++++----------
 packages/remix-dev/liveReload.ts              |   7 +-
 7 files changed, 91 insertions(+), 108 deletions(-)

diff --git a/packages/remix-dev/compiler/assets.ts b/packages/remix-dev/compiler/assets.ts
index 09f6a1a180c..f78227690c8 100644
--- a/packages/remix-dev/compiler/assets.ts
+++ b/packages/remix-dev/compiler/assets.ts
@@ -52,9 +52,11 @@ export async function createAssetsManifest({
   hmr?: AssetsManifest["hmr"];
 }): Promise<AssetsManifest> {
   function resolveUrl(outputPath: string): string {
-    return createUrl(
-      config.publicPath,
-      path.relative(config.assetsBuildDirectory, path.resolve(outputPath))
+    return (
+      createUrl(
+        config.publicPath,
+        path.relative(config.assetsBuildDirectory, path.resolve(outputPath))
+      ) + (timestamp ? `?t=${timestamp}` : "")
     );
   }
 
@@ -63,7 +65,7 @@ export async function createAssetsManifest({
   ): string[] {
     return imports
       .filter((im) => im.kind === "import-statement")
-      .map((im) => resolveUrl(im.path) + (timestamp ? `?t=${timestamp}` : ""));
+      .map((im) => resolveUrl(im.path));
   }
 
   let routesByFile: Map<string, Route[]> = Object.keys(config.routes).reduce(
diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 143f6c65279..a5adda1c2cd 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -191,13 +191,14 @@ export const createBrowserCompiler = (
   let appCompiler: esbuild.BuildIncremental;
   let cssCompiler: esbuild.BuildIncremental;
 
-  let compile = async (manifestChannel: WriteChannel<AssetsManifest>) => {
-    let hmrRoutes: Record<string, { loaderHash: string }> = {};
-    let onLoader = (filename: string, code: string) => {
-      let key = path.relative(remixConfig.appDirectory, filename);
-      hmrRoutes[key] = { loaderHash: code };
-    };
+  let hmrRoutes: Record<string, { loaderHash: string }> = {};
+  let onLoader = (filename: string, code: string) => {
+    let key = path.relative(remixConfig.rootDirectory, filename);
+    hmrRoutes[key] = { loaderHash: code };
+  };
 
+  let compile = async (manifestChannel: WriteChannel<AssetsManifest>) => {
+    hmrRoutes = {};
     let appBuildTask = async () => {
       appCompiler = await (!appCompiler
         ? esbuild.build({
@@ -304,7 +305,7 @@ export const createBrowserCompiler = (
     let hmr: AssetsManifest["hmr"] | undefined = undefined;
     if (options.mode === "development") {
       let hmrRuntimeOutput = Object.entries(metafile.outputs).find(
-        ([_, output]) => output.inputs["remix-hmr:remix:hmr"]
+        ([_, output]) => output.inputs["hmr-runtime:remix:hmr"]
       )?.[0];
       invariant(hmrRuntimeOutput, "Expected to find HMR runtime in outputs");
       let hmrRuntime =
@@ -326,8 +327,8 @@ export const createBrowserCompiler = (
       timestamp: options.mode === "development" ? timestamp : undefined,
       hmr,
     });
-    manifestChannel.write(manifest);
     await writeAssetsManifest(remixConfig, manifest);
+    manifestChannel.write(manifest);
     return metafile;
   };
 
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index a69d93073c0..531d380b273 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -19,6 +19,7 @@ export let hmrPlugin = ({
         };
       });
       build.onLoad({ filter: /.*/, namespace: "hmr-runtime" }, () => {
+        console.log("HMR!!!!");
         let contents = `
 import RefreshRuntime from "react-refresh/runtime";
 
diff --git a/packages/remix-dev/compiler/watch.ts b/packages/remix-dev/compiler/watch.ts
index 24871fe2bb5..7d6dfefef72 100644
--- a/packages/remix-dev/compiler/watch.ts
+++ b/packages/remix-dev/compiler/watch.ts
@@ -27,7 +27,7 @@ export type WatchOptions = Partial<CompileOptions> & {
   onFileCreated?(file: string): void;
   onFileChanged?(file: string): void;
   onFileDeleted?(file: string): void;
-  onInitialBuild?(durationMs: number): void;
+  onInitialBuild?(durationMs: number, result?: CompileResult): void;
 };
 
 export async function watch(
@@ -61,8 +61,8 @@ export async function watch(
   let compiler = createRemixCompiler(config, options);
 
   // initial build
-  await compile(compiler, { onCompileFailure });
-  onInitialBuild?.(Date.now() - start);
+  let result = await compile(compiler, { onCompileFailure });
+  onInitialBuild?.(Date.now() - start, result);
 
   let restart = debounce(async () => {
     onRebuildStart?.();
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 6b65601c2be..8d6c4ec5bc0 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -121,7 +121,10 @@ export let serve = async (
   let dispose = await Compiler.watch(config, {
     mode: "development",
     liveReloadPort: dev.port,
-    onInitialBuild: (durationMs) => info(`Built in ${prettyMs(durationMs)}`),
+    onInitialBuild: (durationMs, result) => {
+      info(`Built in ${prettyMs(durationMs)}`);
+      prevResult = result;
+    },
     onRebuildStart: () => {
       clean(config);
       socket.log("Rebuilding...");
@@ -140,11 +143,12 @@ export let serve = async (
       });
 
       if (assetsManifest.hmr && prevResult) {
-        let updates = HMR.updates(result, prevResult);
+        let updates = HMR.updates(config, result, prevResult);
+        console.log({ updates });
         socket.hmr(assetsManifest, updates);
-        return;
+      } else {
+        socket.reload();
       }
-      socket.reload();
       prevResult = result;
     },
     onFileCreated: (file) => socket.log(`File created: ${relativePath(file)}`),
diff --git a/packages/remix-dev/hmr.ts b/packages/remix-dev/hmr.ts
index a62c2792c03..c52cd8b3dac 100644
--- a/packages/remix-dev/hmr.ts
+++ b/packages/remix-dev/hmr.ts
@@ -1,101 +1,77 @@
-import type esbuild from "esbuild";
 import path from "node:path";
 
 import type { RemixConfig } from "./config";
 import type { CompileResult } from "./compiler";
 
-export let updates = (result: CompileResult, prevResult: CompileResult) => {
-  let timestamp: number = 1;
-  let remixConfig: RemixConfig = {} as any;
-
-  // TODO update code below to use `result` and `prevResult`
-  // instead of outdated references
+export type Update = {
+  id: string;
+  url: string;
+  revalidate: string[];
+};
 
-  manifest.entry.module = manifest.entry.module + `?t=${timestamp}`;
-  manifest.entry.imports = manifest.entry.imports.map(
-    (imp) => imp + `?t=${timestamp}`
-  );
-  for (let routeId of Object.keys(manifest.routes)) {
-    let route = manifest.routes[routeId];
-    manifest.routes[routeId] = {
-      ...route,
-      module: route.module + `?t=${timestamp}`,
-      imports: (route.imports ?? []).map((imp) => imp + `?t=${timestamp}`),
-    };
-  }
-  let create_input2output = (
-    metafile: esbuild.Metafile
-  ): Record<string, string> => {
-    let inputs = new Set(Object.keys(metafile.inputs));
-    let input2output: Record<string, string> = {};
-    for (let [outputPath, output] of Object.entries(metafile.outputs)) {
-      for (let x of Object.keys(output.inputs)) {
-        if (inputs.has(x)) {
-          input2output[x] = outputPath + `?t=${timestamp}`;
-        }
-      }
-    }
-    return input2output;
-  };
+let stripTimestamp = (x: string): string => x.replace(/\?t=\d+$/, "");
 
+// route id: filepaths relative to app/ dir without extension
+// filename: absolute or relative to root for things we don't handle
+// for things we handle: relative to app dir
+export let updates = (
+  config: RemixConfig,
+  result: CompileResult,
+  prevResult: CompileResult
+): Update[] => {
   // TODO: probably want another map to correlate every input file to the
   // routes that consume it
   // ^check if route chunk hash changes when its dependencies change, even in different chunks
-  let filename2id = new Map<string, string>(
-    Object.values(remixConfig.routes).map((r) => [r.file, r.id])
-  );
-  console.log("filename2id");
-  console.log(filename2id.entries());
-  console.log({
-    prevLoaderHashes,
-  });
-  let updates = [];
-  // let prev_i2o = create_input2output(prevMetafile);
-  let i2o = create_input2output(metafile);
-  for (let input of Object.keys(metafile.inputs)) {
-    // let prev_o = prev_i2o[input];
-    let o = i2o[input];
-    if (o === undefined) {
-      console.warn(`o is undefined: [input=${input}]`);
+
+  let updates: Update[] = [];
+  for (let [routeId, route] of Object.entries(result.assetsManifest.routes)) {
+    let prevRoute = prevResult.assetsManifest.routes[routeId] as
+      | typeof route
+      | undefined;
+    let file = config.routes[routeId].file;
+    let moduleId = path.relative(
+      config.rootDirectory,
+      path.join(config.appDirectory, file)
+    );
+
+    // new route
+    if (!prevRoute) {
+      updates.push({
+        id: moduleId,
+        url: route.module,
+        revalidate: [routeId],
+      });
       continue;
     }
-    let url =
-      remixConfig.publicPath +
-      path.relative(remixConfig.assetsBuildDirectory, path.resolve(o));
-    let id = input;
-    let revalidate: string[] = [];
-    console.log({ input, id });
-    if (id.startsWith("browser-route-module:")) {
-      let filename = id
-        .replace(/^browser-route-module:/, "")
-        .replace(/\?browser$/, "");
-      id = path.relative(
-        remixConfig.rootDirectory,
-        path.join(remixConfig.appDirectory, filename)
-      );
-      if (prevLoaderHashes) {
-        let prevLoader = prevLoaderHashes[filename];
-        let loader = loaderHashes[filename];
-        console.log({
-          prevLoader,
-          loader,
-          id,
-          filename,
-          url,
-        });
-        if (loader !== prevLoader) {
-          let routeId = filename2id.get(filename);
-          if (routeId) {
-            revalidate.push(routeId);
-          }
-        }
-      }
+
+    // when loaders are diff
+    let loaderHash = result.assetsManifest.hmr?.routes[moduleId]?.loaderHash;
+    let prevLoaderHash =
+      prevResult.assetsManifest.hmr?.routes[moduleId]?.loaderHash;
+    if (loaderHash !== prevLoaderHash) {
+      updates.push({
+        id: moduleId,
+        url: route.module,
+        revalidate: [routeId],
+      });
+      continue;
+    }
+
+    // when routes are diff
+    let diffModule =
+      stripTimestamp(route.module) !== stripTimestamp(prevRoute.module);
+    let xorImports = new Set(route.imports?.map(stripTimestamp) ?? []);
+    prevRoute.imports
+      ?.map(stripTimestamp)
+      .forEach(xorImports.delete.bind(xorImports));
+    if (diffModule || xorImports.size > 0) {
+      updates.push({
+        id: moduleId,
+        url: route.module,
+        revalidate: [],
+      });
+      continue;
     }
-    updates.push({
-      id,
-      url,
-      revalidate,
-    });
   }
   return updates;
 };
diff --git a/packages/remix-dev/liveReload.ts b/packages/remix-dev/liveReload.ts
index 4c0843e5043..20be705786b 100644
--- a/packages/remix-dev/liveReload.ts
+++ b/packages/remix-dev/liveReload.ts
@@ -1,13 +1,12 @@
 import WebSocket from "ws";
 
 import type { AssetsManifest } from "./compiler/assets";
-
-type HMR_Update = {};
+import type * as HMR from "./hmr";
 
 type Message =
   | { type: "RELOAD" }
   | { type: "LOG"; message: string }
-  | { type: "HMR"; assetsManifest: AssetsManifest; updates: HMR_Update[] };
+  | { type: "HMR"; assetsManifest: AssetsManifest; updates: HMR.Update[] };
 
 type Broadcast = (message: Message) => void;
 
@@ -30,7 +29,7 @@ export let serve = (options: { port: number }) => {
     broadcast({ type: "LOG", message: _message });
   };
 
-  let hmr = (assetsManifest: AssetsManifest, updates: HMR_Update[]) => {
+  let hmr = (assetsManifest: AssetsManifest, updates: HMR.Update[]) => {
     broadcast({ type: "HMR", assetsManifest, updates });
   };
 

From e9d81ff56453d7818ee9d274d8e0d31660ed30b1 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 7 Feb 2023 10:21:55 -0500
Subject: [PATCH 20/66] fix: update react scripts component to use
 `hmr.runtime`

---
 packages/remix-react/components.tsx | 4 ++--
 packages/remix-react/entry.ts       | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 9d858644e9d..766e7618d81 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -903,11 +903,11 @@ export function Scripts(props: ScriptProps) {
           : "");
 
     let routeModulesScript;
-    if (manifest.hmrRuntime) {
+    if (manifest.hmr?.runtime) {
       routeModulesScript = !isStatic
         ? " "
         : `import ${JSON.stringify(manifest.url)};
-import(${JSON.stringify(manifest.hmrRuntime)}).then(() => Promise.all([
+import(${JSON.stringify(manifest.hmr.runtime)}).then(() => Promise.all([
   ${matches
     .map(
       (match) =>
diff --git a/packages/remix-react/entry.ts b/packages/remix-react/entry.ts
index a6f52924b4e..ceaa820db34 100644
--- a/packages/remix-react/entry.ts
+++ b/packages/remix-react/entry.ts
@@ -46,5 +46,7 @@ export interface AssetsManifest {
   routes: RouteManifest<EntryRoute>;
   url: string;
   version: string;
-  hmrRuntime?: string;
+  hmr?: {
+    runtime: string;
+  };
 }

From 8ba7b32cc342a1f3c840695a40470ff4774cec8c Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 7 Feb 2023 18:21:19 -0500
Subject: [PATCH 21/66] refactor: manifest timestamp

---
 packages/remix-dev/compiler/assets.ts         | 11 ++++-------
 packages/remix-dev/compiler/compileBrowser.ts |  4 +---
 packages/remix-dev/devServer2.ts              |  1 -
 packages/remix-dev/hmr.ts                     | 11 +++--------
 packages/remix-dev/liveReload.ts              |  6 +++++-
 packages/remix-react/browser.tsx              |  5 ++++-
 packages/remix-react/entry.ts                 |  1 +
 7 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/remix-dev/compiler/assets.ts b/packages/remix-dev/compiler/assets.ts
index f78227690c8..62b72e9143e 100644
--- a/packages/remix-dev/compiler/assets.ts
+++ b/packages/remix-dev/compiler/assets.ts
@@ -33,6 +33,7 @@ export interface AssetsManifest {
   };
   cssBundleHref?: string;
   hmr?: {
+    timestamp: number;
     runtime: string;
     routes: Record<string, { loaderHash: string }>;
   };
@@ -42,21 +43,17 @@ export async function createAssetsManifest({
   config,
   metafile,
   cssBundlePath,
-  timestamp,
   hmr,
 }: {
   config: RemixConfig;
   metafile: esbuild.Metafile;
   cssBundlePath?: string;
-  timestamp?: number;
   hmr?: AssetsManifest["hmr"];
 }): Promise<AssetsManifest> {
   function resolveUrl(outputPath: string): string {
-    return (
-      createUrl(
-        config.publicPath,
-        path.relative(config.assetsBuildDirectory, path.resolve(outputPath))
-      ) + (timestamp ? `?t=${timestamp}` : "")
+    return createUrl(
+      config.publicPath,
+      path.relative(config.assetsBuildDirectory, path.resolve(outputPath))
     );
   }
 
diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index a5adda1c2cd..512db7127c3 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -300,8 +300,6 @@ export const createBrowserCompiler = (
       appBuildTask(),
     ]);
 
-    let timestamp = Date.now();
-
     let hmr: AssetsManifest["hmr"] | undefined = undefined;
     if (options.mode === "development") {
       let hmrRuntimeOutput = Object.entries(metafile.outputs).find(
@@ -317,6 +315,7 @@ export const createBrowserCompiler = (
       hmr = {
         runtime: hmrRuntime,
         routes: hmrRoutes,
+        timestamp: Date.now(),
       };
     }
 
@@ -324,7 +323,6 @@ export const createBrowserCompiler = (
       config: remixConfig,
       metafile: appCompiler.metafile!,
       cssBundlePath,
-      timestamp: options.mode === "development" ? timestamp : undefined,
       hmr,
     });
     await writeAssetsManifest(remixConfig, manifest);
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 8d6c4ec5bc0..0f759921686 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -144,7 +144,6 @@ export let serve = async (
 
       if (assetsManifest.hmr && prevResult) {
         let updates = HMR.updates(config, result, prevResult);
-        console.log({ updates });
         socket.hmr(assetsManifest, updates);
       } else {
         socket.reload();
diff --git a/packages/remix-dev/hmr.ts b/packages/remix-dev/hmr.ts
index c52cd8b3dac..d335551fbff 100644
--- a/packages/remix-dev/hmr.ts
+++ b/packages/remix-dev/hmr.ts
@@ -9,8 +9,6 @@ export type Update = {
   revalidate: string[];
 };
 
-let stripTimestamp = (x: string): string => x.replace(/\?t=\d+$/, "");
-
 // route id: filepaths relative to app/ dir without extension
 // filename: absolute or relative to root for things we don't handle
 // for things we handle: relative to app dir
@@ -58,12 +56,9 @@ export let updates = (
     }
 
     // when routes are diff
-    let diffModule =
-      stripTimestamp(route.module) !== stripTimestamp(prevRoute.module);
-    let xorImports = new Set(route.imports?.map(stripTimestamp) ?? []);
-    prevRoute.imports
-      ?.map(stripTimestamp)
-      .forEach(xorImports.delete.bind(xorImports));
+    let diffModule = route.module !== prevRoute.module;
+    let xorImports = new Set(route.imports ?? []);
+    prevRoute.imports?.forEach(xorImports.delete.bind(xorImports));
     if (diffModule || xorImports.size > 0) {
       updates.push({
         id: moduleId,
diff --git a/packages/remix-dev/liveReload.ts b/packages/remix-dev/liveReload.ts
index 20be705786b..61f097f304c 100644
--- a/packages/remix-dev/liveReload.ts
+++ b/packages/remix-dev/liveReload.ts
@@ -6,7 +6,11 @@ import type * as HMR from "./hmr";
 type Message =
   | { type: "RELOAD" }
   | { type: "LOG"; message: string }
-  | { type: "HMR"; assetsManifest: AssetsManifest; updates: HMR.Update[] };
+  | {
+      type: "HMR";
+      assetsManifest: AssetsManifest;
+      updates: HMR.Update[];
+    };
 
 type Broadcast = (message: Message) => void;
 
diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index 17d01971112..561d0015dba 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -54,7 +54,10 @@ if (import.meta && import.meta.hot) {
               if (!newManifest.routes[key]) {
                 return null;
               }
-              let imported = await import(newManifest.routes[key].module);
+              let imported = await import(
+                newManifest.routes[key].module +
+                  `?t=${newManifest.hmr?.timestamp}`
+              );
               return [
                 key,
                 {
diff --git a/packages/remix-react/entry.ts b/packages/remix-react/entry.ts
index ceaa820db34..d97ea699656 100644
--- a/packages/remix-react/entry.ts
+++ b/packages/remix-react/entry.ts
@@ -47,6 +47,7 @@ export interface AssetsManifest {
   url: string;
   version: string;
   hmr?: {
+    timestamp: number;
     runtime: string;
   };
 }

From 6d858bd1d7e2b5095d4d0a4a6bc4278ef798674b Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 8 Feb 2023 14:26:21 -0500
Subject: [PATCH 22/66] fix: prevent duplicate chunks caused by untimestamped
 imports

---
 packages/remix-dev/compiler/plugins/hmrPlugin.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index 531d380b273..01e2c34286f 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -19,7 +19,6 @@ export let hmrPlugin = ({
         };
       });
       build.onLoad({ filter: /.*/, namespace: "hmr-runtime" }, () => {
-        console.log("HMR!!!!");
         let contents = `
 import RefreshRuntime from "react-refresh/runtime";
 
@@ -127,7 +126,7 @@ function remixLiveReloadConnect(config) {
         for (let update of payload.updates) {
           if (window.__hmr__.contexts[update.id]) {
             let accepted = window.__hmr__.contexts[update.id].emit(
-              await import(update.url)
+              await import(update.url +  '?t=' + payload.assetsManifest.hmr.timestamp)
             );
             if (accepted) {
               console.log("[HMR] Updated accepted by", update.id);

From 54b26e92211ba0317750d13d3e959e2aa45e8317 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 8 Feb 2023 15:44:29 -0500
Subject: [PATCH 23/66] feat: log hmr updates including reason and if
 revalidating

---
 packages/remix-dev/compiler/plugins/hmrPlugin.ts |  2 ++
 packages/remix-dev/hmr.ts                        | 14 +++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index 01e2c34286f..85dec149d4f 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -124,6 +124,8 @@ function remixLiveReloadConnect(config) {
 
         let anyAccepted = false;
         for (let update of payload.updates) {
+          console.log("[HMR] " + update.reason + " [route=" + update.id +"]")
+          if (update.revalidate) console.log("[HMR] Revalidating [route=" + update.id + "]")
           if (window.__hmr__.contexts[update.id]) {
             let accepted = window.__hmr__.contexts[update.id].emit(
               await import(update.url +  '?t=' + payload.assetsManifest.hmr.timestamp)
diff --git a/packages/remix-dev/hmr.ts b/packages/remix-dev/hmr.ts
index d335551fbff..03a924fc05e 100644
--- a/packages/remix-dev/hmr.ts
+++ b/packages/remix-dev/hmr.ts
@@ -6,7 +6,8 @@ import type { CompileResult } from "./compiler";
 export type Update = {
   id: string;
   url: string;
-  revalidate: string[];
+  revalidate: boolean;
+  reason: string;
 };
 
 // route id: filepaths relative to app/ dir without extension
@@ -37,7 +38,8 @@ export let updates = (
       updates.push({
         id: moduleId,
         url: route.module,
-        revalidate: [routeId],
+        revalidate: true,
+        reason: "Route added",
       });
       continue;
     }
@@ -50,12 +52,13 @@ export let updates = (
       updates.push({
         id: moduleId,
         url: route.module,
-        revalidate: [routeId],
+        revalidate: true,
+        reason: "Route loader changed",
       });
       continue;
     }
 
-    // when routes are diff
+    // when fingerprinted assets are diff (self or imports)
     let diffModule = route.module !== prevRoute.module;
     let xorImports = new Set(route.imports ?? []);
     prevRoute.imports?.forEach(xorImports.delete.bind(xorImports));
@@ -63,7 +66,8 @@ export let updates = (
       updates.push({
         id: moduleId,
         url: route.module,
-        revalidate: [],
+        revalidate: false,
+        reason: "Route changed",
       });
       continue;
     }

From 6f1770b1fda96ee278b089bde9dc34d88806bf6e Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 9 Feb 2023 13:02:16 -0500
Subject: [PATCH 24/66] refactor: hmr messages

---
 packages/remix-dev/compiler/plugins/hmrPlugin.ts | 4 ++--
 packages/remix-dev/hmr.ts                        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index 85dec149d4f..efa781161af 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -124,8 +124,8 @@ function remixLiveReloadConnect(config) {
 
         let anyAccepted = false;
         for (let update of payload.updates) {
-          console.log("[HMR] " + update.reason + " [route=" + update.id +"]")
-          if (update.revalidate) console.log("[HMR] Revalidating [route=" + update.id + "]")
+          console.log("[HMR] " + update.reason + " [" + update.id +"]")
+          if (update.revalidate) console.log("[HMR] Revalidating [" + update.id + "]")
           if (window.__hmr__.contexts[update.id]) {
             let accepted = window.__hmr__.contexts[update.id].emit(
               await import(update.url +  '?t=' + payload.assetsManifest.hmr.timestamp)
diff --git a/packages/remix-dev/hmr.ts b/packages/remix-dev/hmr.ts
index 03a924fc05e..bf54f768860 100644
--- a/packages/remix-dev/hmr.ts
+++ b/packages/remix-dev/hmr.ts
@@ -53,7 +53,7 @@ export let updates = (
         id: moduleId,
         url: route.module,
         revalidate: true,
-        reason: "Route loader changed",
+        reason: "Loader changed",
       });
       continue;
     }
@@ -67,7 +67,7 @@ export let updates = (
         id: moduleId,
         url: route.module,
         revalidate: false,
-        reason: "Route changed",
+        reason: "Component changed",
       });
       continue;
     }

From 54b4476073c2c7ff66b723e3597c757d1f1aa426 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 9 Feb 2023 13:02:35 -0500
Subject: [PATCH 25/66] fix: do not preload route chunk if hmr already loaded
 it

---
 packages/remix-react/components.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 766e7618d81..f1379efff6c 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -997,7 +997,7 @@ import(${JSON.stringify(manifest.entry.module)});`;
     })
     .flat(1);
 
-  let preloads = manifest.entry.imports.concat(routePreloads);
+  let preloads = isHydrated ? [] : manifest.entry.imports.concat(routePreloads);
 
   return (
     <>

From 1dc778a926a226f9e0c492aa3d3f4fd5174cbd93 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 9 Feb 2023 14:21:04 -0500
Subject: [PATCH 26/66] refactor(dev): update react-router api call for hmr

also add types for react refresh window globals
---
 packages/remix-react/browser.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index 561d0015dba..b0389050351 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -29,6 +29,9 @@ declare global {
   };
   var __remixRouteModules: RouteModules;
   var __remixManifest: EntryContext["manifest"];
+  var $RefreshRuntime$: {
+    performReactRefresh: () => void;
+  };
 }
 /* eslint-enable prefer-let/prefer-let */
 
@@ -100,7 +103,7 @@ if (import.meta && import.meta.hot) {
       });
 
       // This is temporary API and will be more granular before release
-      router.setNewRoutes(routes);
+      router._internalSetRoutesAndRevalidate(routes);
     }
   );
 }

From 9f2cb05ea40f05c5f658b4db1ed9d2751c85c455 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 9 Feb 2023 15:01:56 -0500
Subject: [PATCH 27/66] refactor: manually revalidate until we have more
 granular apis

---
 packages/remix-react/browser.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index b0389050351..c6f5e154668 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -89,6 +89,9 @@ if (import.meta && import.meta.hot) {
         window.__remixContext.future
       );
 
+      // This is temporary API and will be more granular before release
+      router._internalSetRoutes(routes);
+
       // Wait for router to be idle before updating the manifest and route modules
       // and triggering a react-refresh
       let unsub = router.subscribe((state) => {
@@ -101,9 +104,7 @@ if (import.meta && import.meta.hot) {
           window.$RefreshRuntime$.performReactRefresh();
         }
       });
-
-      // This is temporary API and will be more granular before release
-      router._internalSetRoutesAndRevalidate(routes);
+      router.revalidate();
     }
   );
 }

From bf296b7eeed552608f3be6316caa1f06317e6a65 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 9 Feb 2023 15:23:07 -0500
Subject: [PATCH 28/66] fix(dev): only do hmr for unstable_dev

---
 packages/remix-dev/compiler/compileBrowser.ts |  4 ++--
 .../plugins/browserRouteModulesPlugin.ts      | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 512db7127c3..783da8cd00c 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -127,7 +127,7 @@ const createEsbuildConfig = (
     NodeModulesPolyfillPlugin(),
   ].filter(isNotNull);
 
-  if (mode === "development") {
+  if (mode === "development" && config.future.unstable_dev) {
     // TODO do this for all deps in package.json
     entryPoints["react"] = "react";
     entryPoints["react-dom"] = "react-dom";
@@ -301,7 +301,7 @@ export const createBrowserCompiler = (
     ]);
 
     let hmr: AssetsManifest["hmr"] | undefined = undefined;
-    if (options.mode === "development") {
+    if (options.mode === "development" && remixConfig.future.unstable_dev) {
       let hmrRuntimeOutput = Object.entries(metafile.outputs).find(
         ([_, output]) => output.inputs["hmr-runtime:remix:hmr"]
       )?.[0];
diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index 04ce404f57e..8abab4cc9bb 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -39,15 +39,17 @@ export function browserRouteModulesPlugin(
 
           let contents = removeServerExports(sourceCode, routeFile, onLoader);
 
-          contents = await applyHMR(
-            contents,
-            {
-              ...args,
-              path: routeFile,
-            },
-            config,
-            !!build.initialOptions.sourcemap
-          );
+          if (config.future.unstable_dev) {
+            contents = await applyHMR(
+              contents,
+              {
+                ...args,
+                path: routeFile,
+              },
+              config,
+              !!build.initialOptions.sourcemap
+            );
+          }
 
           return {
             contents,

From 5449aa05e9691c10a519e6d5691f9ce0b25029e7 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 9 Feb 2023 15:44:49 -0500
Subject: [PATCH 29/66] fix(dev): dynamic, configurable unstable_dev port

---
 .../remix-dev/compiler/plugins/hmrPlugin.ts     |  2 +-
 packages/remix-dev/devServer2.ts                | 17 +++++++----------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index efa781161af..df2f0c98e0f 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -106,7 +106,7 @@ declare global {
 function remixLiveReloadConnect(config) {
   let protocol = location.protocol === "https:" ? "wss:" : "ws:";
   let host = location.hostname;
-  let port = process.env.REMIX_DEV_SERVER_WS_PORT;
+  let port = window.__remixContext.dev.liveReloadPort;
   let socketPath = protocol + "//" + host + ":" + port + "/socket";
   let ws = new WebSocket(socketPath);
   ws.onmessage = async (event) => {
diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
index 0f759921686..e271cf567f7 100644
--- a/packages/remix-dev/devServer2.ts
+++ b/packages/remix-dev/devServer2.ts
@@ -39,7 +39,7 @@ let findPort = async (portPreference?: number) =>
       // prettier-ignore
       portPreference ? Number(portPreference) :
         process.env.PORT ? Number(process.env.PORT) :
-          makeRange(8002, 8100),
+          makeRange(3001, 3100),
   });
 
 let fetchAssetsManifest = async (
@@ -58,16 +58,12 @@ let fetchAssetsManifest = async (
 
 let resolveDev = (
   dev: RemixConfig["future"]["unstable_dev"],
-  flags: { port?: number; appServerPort?: number },
-  fallbackPort = 8002
+  flags: { port?: number; appServerPort?: number }
 ) => {
   if (dev === false)
     throw Error("The new dev server requires 'unstable_dev' to be set");
 
-  let port = fallbackPort;
-  // if (typeof flags.port === "number") {
-  //   port = flags.port;
-  // }
+  let port = flags.port ?? (dev === true ? undefined : dev.port);
 
   let appServerPort =
     flags.appServerPort ?? (dev === true || dev.appServerPort == undefined)
@@ -97,7 +93,7 @@ export let serve = async (
   clean(config);
   await loadEnv(config.rootDirectory);
 
-  let dev = resolveDev(config.future.unstable_dev, flags, config.devServerPort);
+  let dev = resolveDev(config.future.unstable_dev, flags);
 
   let host = getHost();
   let appServerOrigin = `http://${host ?? "localhost"}:${dev.appServerPort}`;
@@ -116,11 +112,12 @@ export let serve = async (
   };
 
   // watch and live reload on rebuilds
-  let socket = LiveReload.serve({ port: dev.port });
+  let port = await findPort(dev.port);
+  let socket = LiveReload.serve({ port });
   let prevResult: Compiler.CompileResult | undefined = undefined;
   let dispose = await Compiler.watch(config, {
     mode: "development",
-    liveReloadPort: dev.port,
+    liveReloadPort: port,
     onInitialBuild: (durationMs, result) => {
       info(`Built in ${prettyMs(durationMs)}`);
       prevResult = result;

From a5acb65f92092e006ff5910d8bbbb915d11dc037 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 10 Feb 2023 13:52:23 -0500
Subject: [PATCH 30/66] fix(dev): only apply hmr for browser routes in dev mode

---
 packages/remix-dev/compiler/compileBrowser.ts               | 2 +-
 .../remix-dev/compiler/plugins/browserRouteModulesPlugin.ts | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 783da8cd00c..c026d9e9354 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -122,7 +122,7 @@ const createEsbuildConfig = (
     cssFilePlugin({ config, options }),
     urlImportsPlugin(),
     mdxPlugin(config),
-    browserRouteModulesPlugin(config, /\?browser$/, onLoader),
+    browserRouteModulesPlugin(config, /\?browser$/, onLoader, mode),
     emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/),
     NodeModulesPolyfillPlugin(),
   ].filter(isNotNull);
diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index 8abab4cc9bb..dc81b59cab1 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -5,6 +5,7 @@ import ts from "typescript";
 
 import type { RemixConfig } from "../../config";
 import { applyHMR } from "./hmrPlugin";
+import type { CompileOptions } from "../options";
 
 const serverOnlyExports = new Set(["action", "loader"]);
 
@@ -17,7 +18,8 @@ type OnLoader = (filename: string, code: string) => void;
 export function browserRouteModulesPlugin(
   config: RemixConfig,
   suffixMatcher: RegExp,
-  onLoader: OnLoader
+  onLoader: OnLoader,
+  mode: CompileOptions["mode"]
 ): esbuild.Plugin {
   return {
     name: "browser-route-modules",
@@ -39,7 +41,7 @@ export function browserRouteModulesPlugin(
 
           let contents = removeServerExports(sourceCode, routeFile, onLoader);
 
-          if (config.future.unstable_dev) {
+          if (mode === "development" && config.future.unstable_dev) {
             contents = await applyHMR(
               contents,
               {

From a0a764360d0726344a165e488e684f7f57544a23 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 10 Feb 2023 21:59:47 -0500
Subject: [PATCH 31/66] wip: test

---
 integration/hmr-test.ts | 246 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 246 insertions(+)
 create mode 100644 integration/hmr-test.ts

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
new file mode 100644
index 00000000000..e3982a8bb06
--- /dev/null
+++ b/integration/hmr-test.ts
@@ -0,0 +1,246 @@
+import { test, expect } from "@playwright/test";
+import execa from "execa";
+import fs from "node:fs";
+import path from "node:path";
+import type { Readable } from "node:stream";
+
+import { createFixtureProject } from "./helpers/create-fixture";
+
+let port = 3099;
+
+let fixture = {
+  future: {
+    unstable_dev: {
+      appServerPort: port,
+    },
+    unstable_tailwind: true,
+  },
+  files: {
+    "package.json": `
+        {
+          "private": true,
+          "sideEffects": false,
+          "scripts": {
+            "dev:remix": "NODE_ENV=development node ../../../build/node_modules/@remix-run/dev/dist/cli.js dev",
+            "dev:app": "NODE_ENV=development nodemon --watch build/ ./server.js"
+          },
+          "dependencies": {
+            "@remix-run/node": "0.0.0-local-version",
+            "@remix-run/react": "0.0.0-local-version",
+            "express": "0.0.0-local-version",
+            "nodemon": "0.0.0-local-version",
+            "react": "0.0.0-local-version",
+            "react-dom": "0.0.0-local-version",
+            "tailwindcss": "0.0.0-local-version"
+          },
+          "devDependencies": {
+            "@remix-run/dev": "0.0.0-local-version",
+            "@types/react": "0.0.0-local-version",
+            "@types/react-dom": "0.0.0-local-version",
+            "typescript": "0.0.0-local-version"
+          },
+          "engines": {
+            "node": ">=14"
+          }
+        }
+      `,
+    "server.js": `
+        let path = require("path");
+        let express = require("express");
+        let { createRequestHandler } = require("@remix-run/express");
+
+        const app = express();
+        app.use(express.static("public", { immutable: true, maxAge: "1y" }));
+
+        const MODE = process.env.NODE_ENV;
+        const BUILD_DIR = path.join(process.cwd(), "build");
+
+        app.all(
+          "*",
+          createRequestHandler({
+            build: require(BUILD_DIR),
+            mode: MODE,
+          })
+        );
+
+        let port = ${port};
+        app.listen(port, () => {
+          require(BUILD_DIR);
+          console.log('✅ app ready: http://localhost:' + port);
+        });
+      `,
+    "tailwind.config.js": `
+        /** @type {import('tailwindcss').Config} */
+        module.exports = {
+          content: ["./app/**/*.{ts,tsx,jsx,js}"],
+          theme: {
+            extend: {},
+          },
+          plugins: [],
+        };
+      `,
+    "app/tailwind.css": `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    "app/root.tsx": `
+        import type { LinksFunction } from "@remix-run/node";
+        import { Link, Links, Meta, Outlet, Scripts } from "@remix-run/react";
+
+        import styles from "./tailwind.css";
+
+        export const links: LinksFunction = () => [
+          { rel: "stylesheet", href: styles },
+        ];
+
+        export default function Root() {
+          return (
+            <html lang="en" className="h-full">
+              <head>
+                <Meta />
+                <Links />
+              </head>
+              <body className="h-full">
+                <header>
+                  <input id="root-input" />
+                  <nav>
+                    <ul>
+                      <li><Link to="/">Home</Link></li>
+                      <li><Link to="/a">A</Link></li>
+                      <li><Link to="/b">B</Link></li>
+                    </ul>
+                  </nav>
+                </header>
+                <Outlet />
+                <Scripts />
+              </body>
+            </html>
+          );
+        }
+      `,
+    "app/routes/index.tsx": `
+        export default function Index() {
+          return (
+            <main>
+              <h1>Index</h1>
+              <label htmlFor="index-input">Index Input</label>
+              <input id="index-input" />
+            </main>
+          )
+        }
+      `,
+    "app/routes/a.tsx": `
+        export default function A() {
+          return (
+            <main>
+              <h1>A</h1>
+              <label htmlFor="a-input">A Input</label>
+              <input id="a-input" />
+            </main>
+          )
+        }
+      `,
+    "app/routes/b.tsx": `
+        export default function B() {
+          return (
+            <main>
+              <h1>B</h1>
+              <label htmlFor="b-input">B Input</label>
+              <input id="b-input" />
+            </main>
+          )
+        }
+      `,
+  },
+};
+
+let sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+let wait = async (
+  callback: () => boolean,
+  { timeoutMs = 1000, intervalMs = 250 } = {}
+) => {
+  let start = Date.now();
+  while (Date.now() - start <= timeoutMs) {
+    if (callback()) {
+      return;
+    }
+    await sleep(intervalMs);
+  }
+  throw Error(`wait: timeout ${timeoutMs}ms`);
+};
+
+let bufferize = (stream: Readable): (() => string) => {
+  let buffer = "";
+  stream.on("data", (data) => (buffer += data.toString()));
+  return () => buffer;
+};
+
+test("HMR", async ({ page }) => {
+  let projectDir = await createFixtureProject(fixture);
+
+  // spin up dev server
+  let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
+  let devStdout = bufferize(dev.stdout!);
+  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 3000 });
+
+  // spin up app server
+  let app = execa("npm", ["run", "dev:app"], { cwd: projectDir });
+  let appStdout = bufferize(app.stdout!);
+  await wait(() => /✅ app ready: /.test(appStdout()));
+
+  try {
+    await page.goto(`http://localhost:${port}`);
+
+    // `<input />` value as page state that
+    // would be wiped out by a full page refresh
+    // but should be persisted by hmr
+    let input = page.getByLabel("Index Input");
+    expect(input).toBeVisible();
+    await input.type("asdfasdf");
+
+    // make content and style changed to index route
+    let newIndex = `
+      export default function Index() {
+        return (
+          <main>
+            <h1 className="text-white bg-black">Changed</h1>
+            <label htmlFor="index-input">Persisted Input</label>
+            <input id="index-input" />
+          </main>
+        )
+      }
+    `;
+    fs.writeFileSync(
+      path.join(projectDir, "app", "routes", "index.tsx"),
+      newIndex
+    );
+
+    // detect HMR'd content and style changes
+    let h1 = page.getByText("Changed");
+    await h1.waitFor({ timeout: 1000 });
+    expect(h1).toHaveCSS("color", "rgb(255, 255, 255)");
+    expect(h1).toHaveCSS("background-color", "rgb(0, 0, 0)");
+
+    // verify that `<input />` value was persisted (i.e. hmr, not full page refresh)
+    let input2 = page.getByLabel("Persisted Input");
+    expect(await input2.inputValue()).toBe("asdfasdf");
+
+    // TODO add loader
+    // TODO update loader
+    // TODO test undo
+  } finally {
+    dev.kill();
+    app.kill();
+  }
+});
+
+// TODO: test complex undo flow?
+// 1. Go to route A
+// 2. Go to route B
+// 3. Modify code for route A
+// 4. Navigate to route A
+// 5. Nav to route B
+// 6. Undo changes from (3)
+// 7. Nav to route A

From ddeeeda73efe09943f4a13a6bd2c2b5757a84d59 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Mon, 13 Feb 2023 13:13:12 -0500
Subject: [PATCH 32/66] fix: detect `loader` changes when using variable
 expressions

---
 .../compiler/plugins/browserRouteModulesPlugin.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index dc81b59cab1..ce2205bd3c7 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -137,6 +137,21 @@ function removeServerExports(
                     !("escapedText" in d.name) ||
                     !serverOnlyExports.has(d.name.escapedText as string)
                 );
+                node.declarationList.declarations.forEach((d) => {
+                  if (
+                    "escapedText" in d.name &&
+                    d.name.escapedText === "loader"
+                  ) {
+                    let printer = ts.createPrinter();
+                    let code = printer.printNode(
+                      ts.EmitHint.Unspecified,
+                      node,
+                      sourceFile
+                    );
+                    // printed = hash of loader
+                    onLoader(fileName, code);
+                  }
+                });
 
                 if (declarations.length === 0) {
                   return ts.factory.createEmptyStatement();

From 5fdd60013c20a35bea8fd5911774e0e30cd5725d Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Mon, 13 Feb 2023 17:33:42 -0500
Subject: [PATCH 33/66] fix: chunk hmr runtime separately

so that we don't get multiple copies of `@remix-run/react`
causing the `router` to be `undefined` after HMR updates
---
 integration/hmr-test.ts                       | 79 ++++++++++---------
 packages/remix-dev/compiler/compileBrowser.ts | 17 ++--
 .../remix-dev/compiler/onCompileFailure.ts    |  5 +-
 packages/remix-server-runtime/server.ts       |  6 +-
 4 files changed, 60 insertions(+), 47 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index e3982a8bb06..1bae666c842 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -103,6 +103,7 @@ let fixture = {
               </head>
               <body className="h-full">
                 <header>
+                  <label htmlFor="root-input">Root Input</label>
                   <input id="root-input" />
                   <nav>
                     <ul>
@@ -123,31 +124,7 @@ let fixture = {
         export default function Index() {
           return (
             <main>
-              <h1>Index</h1>
-              <label htmlFor="index-input">Index Input</label>
-              <input id="index-input" />
-            </main>
-          )
-        }
-      `,
-    "app/routes/a.tsx": `
-        export default function A() {
-          return (
-            <main>
-              <h1>A</h1>
-              <label htmlFor="a-input">A Input</label>
-              <input id="a-input" />
-            </main>
-          )
-        }
-      `,
-    "app/routes/b.tsx": `
-        export default function B() {
-          return (
-            <main>
-              <h1>B</h1>
-              <label htmlFor="b-input">B Input</label>
-              <input id="b-input" />
+              <h1>Index Title</h1>
             </main>
           )
         }
@@ -178,16 +155,22 @@ let bufferize = (stream: Readable): (() => string) => {
 };
 
 test("HMR", async ({ page }) => {
+  // uncomment for debugging
+  // page.on("console", (msg) => console.log(msg.text()));
+  page.on("pageerror", (err) => console.log(err.message));
+
   let projectDir = await createFixtureProject(fixture);
 
   // spin up dev server
   let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
   let devStdout = bufferize(dev.stdout!);
+  let devStderr = bufferize(dev.stderr!);
   await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 3000 });
 
   // spin up app server
   let app = execa("npm", ["run", "dev:app"], { cwd: projectDir });
   let appStdout = bufferize(app.stdout!);
+  let appStderr = bufferize(app.stderr!);
   await wait(() => /✅ app ready: /.test(appStdout()));
 
   try {
@@ -196,43 +179,65 @@ test("HMR", async ({ page }) => {
     // `<input />` value as page state that
     // would be wiped out by a full page refresh
     // but should be persisted by hmr
-    let input = page.getByLabel("Index Input");
+    let input = page.getByLabel("Root Input");
     expect(input).toBeVisible();
     await input.type("asdfasdf");
 
+    let indexPath = path.join(projectDir, "app", "routes", "index.tsx");
+    let originalIndex = fs.readFileSync(indexPath, "utf8");
+
     // make content and style changed to index route
     let newIndex = `
       export default function Index() {
         return (
           <main>
             <h1 className="text-white bg-black">Changed</h1>
-            <label htmlFor="index-input">Persisted Input</label>
-            <input id="index-input" />
           </main>
         )
       }
     `;
-    fs.writeFileSync(
-      path.join(projectDir, "app", "routes", "index.tsx"),
-      newIndex
-    );
+    fs.writeFileSync(indexPath, newIndex);
 
     // detect HMR'd content and style changes
     let h1 = page.getByText("Changed");
-    await h1.waitFor({ timeout: 1000 });
+    await h1.waitFor({ timeout: 2000 });
     expect(h1).toHaveCSS("color", "rgb(255, 255, 255)");
     expect(h1).toHaveCSS("background-color", "rgb(0, 0, 0)");
 
     // verify that `<input />` value was persisted (i.e. hmr, not full page refresh)
-    let input2 = page.getByLabel("Persisted Input");
-    expect(await input2.inputValue()).toBe("asdfasdf");
+    expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
+
+    // undo change
+    fs.writeFileSync(indexPath, originalIndex);
+    await page.getByText("Index Title").waitFor({ timeout: 2000 });
+    expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
+
+    // add loader
+    let withLoader1 = `
+        import { json } from "@remix-run/node";
+        import { useLoaderData } from "@remix-run/react";
+
+        export let loader = () => json({ hello: "world" })
+
+        export default function Index() {
+          let { hello } = useLoaderData<typeof loader>();
+          return (
+            <main>
+              <h1>Hello, {hello}</h1>
+            </main>
+          )
+        }
+    `;
+    fs.writeFileSync(indexPath, withLoader1);
+    await page.getByText("Hello, world").waitFor({ timeout: 2000 });
+    expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
 
-    // TODO add loader
     // TODO update loader
-    // TODO test undo
   } finally {
     dev.kill();
     app.kill();
+    console.log(devStderr());
+    console.log(appStderr());
   }
 });
 
diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index c026d9e9354..a908baaca9b 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -83,7 +83,7 @@ const createEsbuildConfig = (
   onLoader: (filename: string, code: string) => void
 ): esbuild.BuildOptions | esbuild.BuildIncremental => {
   let isCssBuild = build === "css";
-  let entryPoints: esbuild.BuildOptions["entryPoints"];
+  let entryPoints: Record<string, string>;
 
   if (isCssBuild) {
     entryPoints = {
@@ -128,11 +128,16 @@ const createEsbuildConfig = (
   ].filter(isNotNull);
 
   if (mode === "development" && config.future.unstable_dev) {
-    // TODO do this for all deps in package.json
-    entryPoints["react"] = "react";
-    entryPoints["react-dom"] = "react-dom";
-    entryPoints["react-dom/client"] = "react-dom/client";
-    entryPoints["react-refresh/runtime"] = "react-refresh/runtime";
+    // TODO prebundle deps instead of chunking just these ones
+    entryPoints = {
+      ...entryPoints,
+      react: "react",
+      "react-dom": "react-dom",
+      "react-dom/client": "react-dom/client",
+      "react-refresh/runtime": "react-refresh/runtime",
+      "@remix-run/react": "@remix-run/react",
+      "remix:hmr": "remix:hmr",
+    };
 
     plugins.push(hmrPlugin({ remixConfig: config }));
   }
diff --git a/packages/remix-dev/compiler/onCompileFailure.ts b/packages/remix-dev/compiler/onCompileFailure.ts
index 0706d63f1e3..043a23fc89e 100644
--- a/packages/remix-dev/compiler/onCompileFailure.ts
+++ b/packages/remix-dev/compiler/onCompileFailure.ts
@@ -4,7 +4,7 @@ export type CompileFailure = Error | esbuild.BuildFailure;
 export type OnCompileFailure = (failure: CompileFailure) => void;
 
 export const logCompileFailure: OnCompileFailure = (failure) => {
-  if ("warnings" in failure || "errors" in failure) {
+  if ("warnings" in failure) {
     if (failure.warnings) {
       let messages = esbuild.formatMessagesSync(failure.warnings, {
         kind: "warning",
@@ -12,7 +12,8 @@ export const logCompileFailure: OnCompileFailure = (failure) => {
       });
       console.warn(...messages);
     }
-
+  }
+  if ("errors" in failure) {
     if (failure.errors) {
       let messages = esbuild.formatMessagesSync(failure.errors, {
         kind: "error",
diff --git a/packages/remix-server-runtime/server.ts b/packages/remix-server-runtime/server.ts
index 0e1b398bd82..23ad637ee10 100644
--- a/packages/remix-server-runtime/server.ts
+++ b/packages/remix-server-runtime/server.ts
@@ -57,8 +57,10 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
       mode === "development" &&
       typeof unstable_dev !== "boolean" &&
       url.pathname ===
-        (unstable_dev.remixRequestHandlerPath ?? "") +
-          "/__REMIX_ASSETS_MANIFEST"
+        (unstable_dev === true
+          ? "/REMIX_ASSETS_MANIFEST"
+          : (unstable_dev.remixRequestHandlerPath ?? "") +
+            "/__REMIX_ASSETS_MANIFEST")
     ) {
       if (request.method !== "GET") {
         return new Response("Method not allowed", { status: 405 });

From c0d748304311853a7efbacfd60ab95080570b0ce Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Mon, 13 Feb 2023 17:34:33 -0500
Subject: [PATCH 34/66] wip: updated typescript so that transforms work in
 tests

remove this once we rewrite as babel transforms
---
 package.json |  5 ++--
 yarn.lock    | 77 +++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 2b3e25c95b6..026c5835358 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
     "jest-watch-typeahead": "^0.6.5",
     "jsonfile": "^6.0.1",
     "lodash": "^4.17.21",
+    "nodemon": "^2.0.20",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.5.0",
     "prettier": "2.7.1",
@@ -124,10 +125,10 @@
     "simple-git": "^3.2.4",
     "sort-package-json": "^1.55.0",
     "strip-indent": "^3.0.0",
-    "to-vfile": "7.2.3",
     "tailwindcss": "^3.1.8",
+    "to-vfile": "7.2.3",
     "type-fest": "^2.16.0",
-    "typescript": "^4.7.4",
+    "typescript": "^4.9.5",
     "unified": "^10.1.2",
     "unist-util-remove": "^3.1.0",
     "unist-util-visit": "^4.1.1"
diff --git a/yarn.lock b/yarn.lock
index 37c514b8e55..636d22d492b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3477,6 +3477,11 @@ abab@^2.0.3, abab@^2.0.5:
   resolved "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz"
   integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
 
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz"
@@ -4597,9 +4602,9 @@ choices-separator@^2.0.0:
     debug "^2.6.6"
     strip-color "^0.1.0"
 
-chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.3:
+chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
   dependencies:
     anymatch "~3.1.2"
@@ -7185,6 +7190,11 @@ ieee754@1.1.13, ieee754@^1.1.13, ieee754@^1.1.4:
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz"
   integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
 
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
+
 ignore@^5.1.1, ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
@@ -9736,6 +9746,29 @@ node-webtokens@^1.0.4:
   resolved "https://registry.npmjs.org/node-webtokens/-/node-webtokens-1.0.4.tgz"
   integrity sha512-Sla56CeSLWvPbwud2kogqf5edQtKNXZBtXDDpmOzAgNZjwETbK/Am6PXfs54iZPLBm8K8amZ9XWaCQwGqZmKyQ==
 
+nodemon@^2.0.20:
+  version "2.0.20"
+  resolved "https://registry.npmjs.org/nodemon/-/nodemon-2.0.20.tgz#e3537de768a492e8d74da5c5813cb0c7486fc701"
+  integrity sha512-Km2mWHKKY5GzRg6i1j5OxOHQtuvVsgskLfigG25yTtbyfRGn/GNvIbRyOf1PSCKJ2aT/58TiuUsuOU5UToVViw==
+  dependencies:
+    chokidar "^3.5.2"
+    debug "^3.2.7"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.1.2"
+    pstree.remy "^1.1.8"
+    semver "^5.7.1"
+    simple-update-notifier "^1.0.7"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.5"
+
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  integrity sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz"
@@ -10613,6 +10646,11 @@ psl@^1.1.28, psl@^1.1.33:
   resolved "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz"
   integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
 
+pstree.remy@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
 pump@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz"
@@ -11282,12 +11320,12 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@7.0.0:
+semver@7.0.0, semver@~7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
@@ -11439,6 +11477,13 @@ simple-git@^3.2.4:
     "@kwsites/promise-deferred" "^1.1.1"
     debug "^4.3.3"
 
+simple-update-notifier@^1.0.7:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz#67694c121de354af592b347cdba798463ed49c82"
+  integrity sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==
+  dependencies:
+    semver "~7.0.0"
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz"
@@ -11874,7 +11919,7 @@ supertest@^6.1.5:
     methods "^1.1.2"
     superagent "^6.1.0"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -12135,6 +12180,13 @@ toml@^3.0.0:
   resolved "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz"
   integrity sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==
 
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
+  integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==
+  dependencies:
+    nopt "~1.0.10"
+
 tough-cookie@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz"
@@ -12348,11 +12400,6 @@ typescript@4.3.4:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz"
   integrity sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==
 
-typescript@^4.7.4:
-  version "4.7.4"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz"
-  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
-
 typescript@^4.8.4:
   version "4.8.4"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
@@ -12363,6 +12410,11 @@ typescript@^4.9.4:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
   integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
 
+typescript@^4.9.5:
+  version "4.9.5"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
 uid-safe@2.1.5, uid-safe@^2.1.5:
   version "2.1.5"
   resolved "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz"
@@ -12390,6 +12442,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undefsafe@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz"

From 421df1f8d57bff47b64153ded1ce12862a3148e6 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Mon, 13 Feb 2023 18:40:59 -0500
Subject: [PATCH 35/66] fix: hash hmr routes as part of assets manifest version

so that loader-only changes are detected and waited for
---
 integration/hmr-test.ts                 | 21 ++++++++++++++++++++-
 packages/remix-dev/compiler/assets.ts   |  4 +++-
 packages/remix-server-runtime/server.ts |  2 +-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 1bae666c842..b429415f6ce 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -232,7 +232,26 @@ test("HMR", async ({ page }) => {
     await page.getByText("Hello, world").waitFor({ timeout: 2000 });
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
 
-    // TODO update loader
+    let withLoader2 = `
+        import { json } from "@remix-run/node";
+        import { useLoaderData } from "@remix-run/react";
+
+        export function loader() {
+          return json({ hello: "planet" })
+        }
+
+        export default function Index() {
+          let { hello } = useLoaderData<typeof loader>();
+          return (
+            <main>
+              <h1>Hello, {hello}</h1>
+            </main>
+          )
+        }
+    `;
+    fs.writeFileSync(indexPath, withLoader2);
+    await page.getByText("Hello, planet").waitFor({ timeout: 2000 });
+    expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
   } finally {
     dev.kill();
     app.kill();
diff --git a/packages/remix-dev/compiler/assets.ts b/packages/remix-dev/compiler/assets.ts
index 62b72e9143e..f8c427704cc 100644
--- a/packages/remix-dev/compiler/assets.ts
+++ b/packages/remix-dev/compiler/assets.ts
@@ -122,7 +122,9 @@ export async function createAssetsManifest({
   invariant(entry, `Missing output for entry point`);
 
   optimizeRoutes(routes, entry.imports);
-  let version = getHash(JSON.stringify({ entry, routes })).slice(0, 8);
+  let version = getHash(
+    JSON.stringify({ entry, routes, hmrRoutes: hmr?.routes })
+  ).slice(0, 8);
 
   let cssBundleHref = cssBundlePath ? resolveUrl(cssBundlePath) : undefined;
 
diff --git a/packages/remix-server-runtime/server.ts b/packages/remix-server-runtime/server.ts
index 23ad637ee10..0a2fd04e0ac 100644
--- a/packages/remix-server-runtime/server.ts
+++ b/packages/remix-server-runtime/server.ts
@@ -58,7 +58,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
       typeof unstable_dev !== "boolean" &&
       url.pathname ===
         (unstable_dev === true
-          ? "/REMIX_ASSETS_MANIFEST"
+          ? "/__REMIX_ASSETS_MANIFEST"
           : (unstable_dev.remixRequestHandlerPath ?? "") +
             "/__REMIX_ASSETS_MANIFEST")
     ) {

From 5bfef5d3c492c308e7c31d03378c707bd8db7652 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Mon, 13 Feb 2023 17:47:12 -0800
Subject: [PATCH 36/66] chore: update entry to more simply support refresh
 chore: add back `<LiveReload>` component

---
 integration/hmr-test.ts                       |  3 +-
 .../remix-dev/compiler/plugins/hmrPlugin.ts   | 74 -----------------
 packages/remix-react/components.tsx           | 83 +++++++++++--------
 3 files changed, 52 insertions(+), 108 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index b429415f6ce..dd075af5569 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -86,7 +86,7 @@ let fixture = {
       `,
     "app/root.tsx": `
         import type { LinksFunction } from "@remix-run/node";
-        import { Link, Links, Meta, Outlet, Scripts } from "@remix-run/react";
+        import { Link, Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
 
         import styles from "./tailwind.css";
 
@@ -115,6 +115,7 @@ let fixture = {
                 </header>
                 <Outlet />
                 <Scripts />
+                <LiveReload />
               </body>
             </html>
           );
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index df2f0c98e0f..accd23e1cc6 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -102,80 +102,6 @@ declare global {
     __hmr__: any;
   }
 }
-
-function remixLiveReloadConnect(config) {
-  let protocol = location.protocol === "https:" ? "wss:" : "ws:";
-  let host = location.hostname;
-  let port = window.__remixContext.dev.liveReloadPort;
-  let socketPath = protocol + "//" + host + ":" + port + "/socket";
-  let ws = new WebSocket(socketPath);
-  ws.onmessage = async (event) => {
-    let payload = JSON.parse(event.data);
-
-    switch (payload?.type) {
-      case "LOG":
-        console.log(payload.message);
-        break;
-      case "RELOAD":
-        window.location.reload();
-        break;
-      case "HMR":
-        if (!payload.updates?.length) return;
-
-        let anyAccepted = false;
-        for (let update of payload.updates) {
-          console.log("[HMR] " + update.reason + " [" + update.id +"]")
-          if (update.revalidate) console.log("[HMR] Revalidating [" + update.id + "]")
-          if (window.__hmr__.contexts[update.id]) {
-            let accepted = window.__hmr__.contexts[update.id].emit(
-              await import(update.url +  '?t=' + payload.assetsManifest.hmr.timestamp)
-            );
-            if (accepted) {
-              console.log("[HMR] Updated accepted by", update.id);
-              anyAccepted = true;
-            }
-          }
-        }
-
-        if (payload.assetsManifest && window.__hmr__.contexts["remix:manifest"]) {
-          let accepted = window.__hmr__.contexts["remix:manifest"].emit(
-            payload.assetsManifest
-          );
-          if (accepted) {
-            anyAccepted = true;
-          }
-        }
-
-        if (!anyAccepted) {
-          console.log("[HMR] Updated rejected, reloading...");
-          window.location.reload();
-        }
-        break;
-    }
-  };
-  ws.onopen = () => {
-    if (config && typeof config.onOpen === "function") {
-      config.onOpen();
-    }
-  };
-  ws.onclose = (event) => {
-    if (event.code === 1006) {
-      console.log("Remix dev asset server web socket closed. Reconnecting...");
-      setTimeout(
-        () =>
-          remixLiveReloadConnect({
-            onOpen: () => window.location.reload(),
-          }),
-      5000
-      );
-    }
-  };
-  ws.onerror = (error) => {
-    console.log("Remix dev asset server web socket error:");
-    console.error(error);
-  };
-}
-remixLiveReloadConnect();
         `;
         return { loader: "ts", contents, resolveDir: remixConfig.appDirectory };
       });
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index f1379efff6c..4284e38a107 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -902,48 +902,28 @@ export function Scripts(props: ScriptProps) {
           ? `__remixContext.a=${deferredScripts.length};`
           : "");
 
-    let routeModulesScript;
-    if (manifest.hmr?.runtime) {
-      routeModulesScript = !isStatic
-        ? " "
-        : `import ${JSON.stringify(manifest.url)};
-import(${JSON.stringify(manifest.hmr.runtime)}).then(() => Promise.all([
-  ${matches
-    .map(
-      (match) =>
-        `import(${JSON.stringify(manifest.routes[match.route.id].module)})`
-    )
-    .join(",")}
-]).then(([${matches.map((_, index) => `route${index}`).join(",")}]) => {
-  window.__remixRouteModules = {${matches
-    .map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`)
-    .join(",")}};
-  
-  return import(${JSON.stringify(manifest.entry.module)});
-}));
-`;
-    } else {
-      routeModulesScript = !isStatic
-        ? " "
-        : `import ${JSON.stringify(manifest.url)};
+    let routeModulesScript = !isStatic
+      ? " "
+      : `${
+          manifest.hmr?.runtime
+            ? `import ${JSON.stringify(manifest.hmr.runtime)};`
+            : ""
+        }import ${JSON.stringify(manifest.url)};
 ${matches
   .map(
     (match, index) =>
-      `import ${JSON.stringify(manifest.url)};
-import * as route${index} from ${JSON.stringify(
+      `import * as route${index} from ${JSON.stringify(
         manifest.routes[match.route.id].module
       )};`
   )
   .join("\n")}
 window.__remixRouteModules = {${matches
-            .map(
-              (match, index) =>
-                `${JSON.stringify(match.route.id)}:route${index}`
-            )
-            .join(",")}};
+          .map(
+            (match, index) => `${JSON.stringify(match.route.id)}:route${index}`
+          )
+          .join(",")}};
 
 import(${JSON.stringify(manifest.entry.module)});`;
-    }
 
     return (
       <>
@@ -1605,7 +1585,7 @@ export const LiveReload =
                   )};
                   let socketPath = protocol + "//" + host + ":" + port + "/socket";
                   let ws = new WebSocket(socketPath);
-                  ws.onmessage = (message) => {
+                  ws.onmessage = async (message) => {
                     let event = JSON.parse(message.data);
                     if (event.type === "LOG") {
                       console.log(event.message);
@@ -1614,6 +1594,43 @@ export const LiveReload =
                       console.log("💿 Reloading window ...");
                       window.location.reload();
                     }
+                    if (event.type === "HMR") {
+                      if (!window.__hmr__ || !window.__hmr__.contexts) {
+                        console.log("💿 [HMR] No HMR context, reloading window ...");
+                        window.location.reload();
+                        return;
+                      }
+                      if (!event.updates || !event.updates.length) return;
+                      let updateAccepted = false;
+                      for (let update of event.updates) {
+                        console.log("[HMR] " + update.reason + " [" + update.id +"]")
+                        if (update.revalidate) {
+                          console.log("[HMR] Revalidating [" + update.id + "]");
+                        }
+                        if (window.__hmr__.contexts[update.id]) {
+                          let accepted = window.__hmr__.contexts[update.id].emit(
+                            await import(update.url +  '?t=' + event.assetsManifest.hmr.timestamp)
+                          );
+                          if (accepted) {
+                            console.log("[HMR] Updated accepted by", update.id);
+                            updateAccepted = true;
+                          }
+                        }
+                      }
+                      if (event.assetsManifest && window.__hmr__.contexts["remix:manifest"]) {
+                        let accepted = window.__hmr__.contexts["remix:manifest"].emit(
+                          event.assetsManifest
+                        );
+                        if (accepted) {
+                          console.log("[HMR] Updated accepted by", "remix:manifest");
+                          updateAccepted = true;
+                        }
+                      }
+                      if (!updateAccepted) {
+                        console.log("[HMR] Updated rejected, reloading...");
+                        window.location.reload();
+                      }
+                    }
                   };
                   ws.onopen = () => {
                     if (config && typeof config.onOpen === "function") {

From d84e68fe920a47e5f2478ee3da1584e4aa267fcf Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Tue, 14 Feb 2023 10:53:21 -0800
Subject: [PATCH 37/66] add abort controller for subsequent HMR updates before
 completion

---
 packages/remix-react/browser.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index c6f5e154668..bf0773678d6 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -44,6 +44,7 @@ declare global {
 }
 
 let router: Router;
+let hmrAbortController: AbortController;
 
 if (import.meta && import.meta.hot) {
   import.meta.hot.accept(
@@ -92,10 +93,15 @@ if (import.meta && import.meta.hot) {
       // This is temporary API and will be more granular before release
       router._internalSetRoutes(routes);
 
+      if (hmrAbortController) {
+        hmrAbortController.abort();
+      }
+      hmrAbortController = new AbortController();
+      let signal = hmrAbortController.signal;
       // Wait for router to be idle before updating the manifest and route modules
       // and triggering a react-refresh
       let unsub = router.subscribe((state) => {
-        if (state.revalidation === "idle") {
+        if (state.revalidation === "idle" && !signal.aborted) {
           unsub();
           // TODO: Handle race conditions here. Should abort if a new update
           // comes in while we're waiting for the router to be idle.

From e926d17de0f963ac0f4e7ef659559418b4279b35 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 15 Feb 2023 17:05:33 -0500
Subject: [PATCH 38/66] test(dev): dynamic ports for hmr integration test

---
 integration/hmr-test.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index dd075af5569..7d334abe8a0 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -3,15 +3,15 @@ import execa from "execa";
 import fs from "node:fs";
 import path from "node:path";
 import type { Readable } from "node:stream";
+import getPort, { makeRange } from "get-port";
 
 import { createFixtureProject } from "./helpers/create-fixture";
 
-let port = 3099;
-
-let fixture = {
+let fixture = (options: { port: number; appServerPort: number }) => ({
   future: {
     unstable_dev: {
-      appServerPort: port,
+      port: options.port,
+      appServerPort: options.appServerPort,
     },
     unstable_tailwind: true,
   },
@@ -63,7 +63,7 @@ let fixture = {
           })
         );
 
-        let port = ${port};
+        let port = ${options.appServerPort};
         app.listen(port, () => {
           require(BUILD_DIR);
           console.log('✅ app ready: http://localhost:' + port);
@@ -131,7 +131,7 @@ let fixture = {
         }
       `,
   },
-};
+});
 
 let sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -160,7 +160,9 @@ test("HMR", async ({ page }) => {
   // page.on("console", (msg) => console.log(msg.text()));
   page.on("pageerror", (err) => console.log(err.message));
 
-  let projectDir = await createFixtureProject(fixture);
+  let appServerPort = await getPort({ port: makeRange(3080, 3089) });
+  let port = await getPort({ port: makeRange(3090, 3099) });
+  let projectDir = await createFixtureProject(fixture({ port, appServerPort }));
 
   // spin up dev server
   let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
@@ -175,7 +177,7 @@ test("HMR", async ({ page }) => {
   await wait(() => /✅ app ready: /.test(appStdout()));
 
   try {
-    await page.goto(`http://localhost:${port}`);
+    await page.goto(`http://localhost:${appServerPort}`);
 
     // `<input />` value as page state that
     // would be wiped out by a full page refresh

From 35b4feca95847a918c8f970c2838bf490dfe6cb8 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 15 Feb 2023 14:24:26 -0800
Subject: [PATCH 39/66] fix: hmr caused subsequent navigations to fail
 Navigations fixed by always using a global cache for modules instead of
 passing one around. This allows us to assign into it later on and have those
 surface in the refreshed component tree fix: always import updated modules
 regardless of if there is a callback The lack of this caused dependent
 modules to not surface in react-refresh as they don't have an accept
 callback, but still need to execute the module scope up-front for React to be
 happy here. test: added tests for navigation, shared modules, and updates
 before and after navigation

---
 integration/hmr-test.ts                       | 85 ++++++++++++++++++-
 .../remix-dev/compiler/plugins/hmrPlugin.ts   |  7 +-
 packages/remix-react/browser.tsx              | 84 ++++++++++--------
 packages/remix-react/components.tsx           |  3 +-
 packages/remix-react/routeModules.ts          | 11 +--
 packages/remix-react/routes.tsx               | 35 ++------
 6 files changed, 152 insertions(+), 73 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 7d334abe8a0..c787c979bd7 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -88,6 +88,7 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
         import type { LinksFunction } from "@remix-run/node";
         import { Link, Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
 
+        import Counter from "./components/counter";
         import styles from "./tailwind.css";
 
         export const links: LinksFunction = () => [
@@ -105,11 +106,11 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
                 <header>
                   <label htmlFor="root-input">Root Input</label>
                   <input id="root-input" />
+                  <Counter id="root-counter" />
                   <nav>
                     <ul>
                       <li><Link to="/">Home</Link></li>
-                      <li><Link to="/a">A</Link></li>
-                      <li><Link to="/b">B</Link></li>
+                      <li><Link to="/about">About</Link></li>
                     </ul>
                   </nav>
                 </header>
@@ -122,7 +123,9 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
         }
       `,
     "app/routes/index.tsx": `
+        import { useLoaderData } from "@remix-run/react";
         export default function Index() {
+          const t = useLoaderData();
           return (
             <main>
               <h1>Index Title</h1>
@@ -130,6 +133,28 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
           )
         }
       `,
+    "app/routes/about.tsx": `
+        import Counter from "../components/counter";
+        export default function About() {
+          return (
+            <main>
+              <h1>About Title</h1>
+              <Counter id="about-counter" />
+            </main>
+          )
+        }
+      `,
+    "app/components/counter.tsx": `
+        import * as React from "react";
+        export default function Counter({ id }) {
+          let [count, setCount] = React.useState(0);
+          return (
+            <p>
+              <button id={id} onClick={() => setCount(count + 1)}>inc {count}</button>
+            </p>
+          );
+        }
+      `,
   },
 });
 
@@ -177,7 +202,7 @@ test("HMR", async ({ page }) => {
   await wait(() => /✅ app ready: /.test(appStdout()));
 
   try {
-    await page.goto(`http://localhost:${appServerPort}`);
+    await page.goto(`http://localhost:${appServerPort}`, { waitUntil: "networkidle" });
 
     // `<input />` value as page state that
     // would be wiped out by a full page refresh
@@ -186,12 +211,20 @@ test("HMR", async ({ page }) => {
     expect(input).toBeVisible();
     await input.type("asdfasdf");
 
+    let counter = await page.waitForSelector("#root-counter");
+    await counter.click();
+    await page.waitForSelector(`#root-counter:has-text("inc 1")`);
+
     let indexPath = path.join(projectDir, "app", "routes", "index.tsx");
     let originalIndex = fs.readFileSync(indexPath, "utf8");
+    let counterPath = path.join(projectDir, "app", "components", "counter.tsx");
+    let originalCounter = fs.readFileSync(counterPath, "utf8");
 
     // make content and style changed to index route
     let newIndex = `
+      import { useLoaderData } from "@remix-run/react";
       export default function Index() {
+        const t = useLoaderData();
         return (
           <main>
             <h1 className="text-white bg-black">Changed</h1>
@@ -202,6 +235,7 @@ test("HMR", async ({ page }) => {
     fs.writeFileSync(indexPath, newIndex);
 
     // detect HMR'd content and style changes
+    await page.waitForLoadState("networkidle");
     let h1 = page.getByText("Changed");
     await h1.waitFor({ timeout: 2000 });
     expect(h1).toHaveCSS("color", "rgb(255, 255, 255)");
@@ -209,11 +243,13 @@ test("HMR", async ({ page }) => {
 
     // verify that `<input />` value was persisted (i.e. hmr, not full page refresh)
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
+    await page.waitForSelector(`#root-counter:has-text("inc 1")`);
 
     // undo change
     fs.writeFileSync(indexPath, originalIndex);
     await page.getByText("Index Title").waitFor({ timeout: 2000 });
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
+    await page.waitForSelector(`#root-counter:has-text("inc 1")`);
 
     // add loader
     let withLoader1 = `
@@ -234,6 +270,7 @@ test("HMR", async ({ page }) => {
     fs.writeFileSync(indexPath, withLoader1);
     await page.getByText("Hello, world").waitFor({ timeout: 2000 });
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
+    await page.waitForSelector(`#root-counter:has-text("inc 1")`);
 
     let withLoader2 = `
         import { json } from "@remix-run/node";
@@ -255,6 +292,48 @@ test("HMR", async ({ page }) => {
     fs.writeFileSync(indexPath, withLoader2);
     await page.getByText("Hello, planet").waitFor({ timeout: 2000 });
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
+    await page.waitForSelector(`#root-counter:has-text("inc 1")`);
+
+    // change shared component
+    let updatedCounter = `
+      import * as React from "react";
+      export default function Counter({ id }) {
+        let [count, setCount] = React.useState(0);
+        return (
+          <p>
+            <button id={id} onClick={() => setCount(count - 1)}>dec {count}</button>
+          </p>
+        );
+      }
+    `;
+    fs.writeFileSync(counterPath, updatedCounter);
+    await page.waitForSelector(`#root-counter:has-text("dec 1")`);
+    counter = await page.waitForSelector("#root-counter");
+    await counter.click();
+    await counter.click();
+    await page.waitForSelector(`#root-counter:has-text("dec -1")`);
+
+    await page.click(`a[href="/about"]`);
+    let aboutCounter = await page.waitForSelector(
+      `#about-counter:has-text("dec 0")`
+    );
+    await aboutCounter.click();
+    await page.waitForSelector(`#about-counter:has-text("dec -1")`);
+
+    // undo change
+    fs.writeFileSync(counterPath, originalCounter);
+
+    counter = await page.waitForSelector(`#root-counter:has-text("inc -1")`);
+    await counter.click();
+    counter = await page.waitForSelector(`#root-counter:has-text("inc 0")`);
+
+    aboutCounter = await page.waitForSelector(
+      `#about-counter:has-text("inc -1")`
+    );
+    await aboutCounter.click();
+    aboutCounter = await page.waitForSelector(
+      `#about-counter:has-text("inc 0")`
+    );
   } finally {
     dev.kill();
     app.kill();
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index accd23e1cc6..737af5f7fff 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -125,7 +125,8 @@ declare global {
           sourceCode,
           args,
           remixConfig,
-          !!build.initialOptions.sourcemap
+          !!build.initialOptions.sourcemap,
+          args.path.startsWith(remixConfig.appDirectory)
         );
 
         return {
@@ -142,7 +143,8 @@ export async function applyHMR(
   sourceCode: string,
   args: esbuild.OnLoadArgs,
   remixConfig: RemixConfig,
-  sourcemap: boolean
+  sourcemap: boolean,
+  timestampable: boolean = true
 ) {
   let babel = await import("@babel/core");
   // @ts-expect-error
@@ -161,6 +163,7 @@ import.meta.hot = __hmr__.createHotContext(
 //@ts-expect-error
 $id$
 );
+${timestampable ? `import.meta.hot.ts = "${Date.now()}";` : ""}
 }`.replace(/\$id\$/g, hmrId);
   let sourceCodeWithHMR = hmrPrefix + sourceCode;
 
diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index bf0773678d6..39e99622d93 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -49,44 +49,61 @@ let hmrAbortController: AbortController;
 if (import.meta && import.meta.hot) {
   import.meta.hot.accept(
     "remix:manifest",
-    async (newManifest: EntryContext["manifest"]) => {
+    async (
+      newManifest: EntryContext["manifest"]
+    ) => {
+      let routeIds = [
+        ...new Set(
+          router.state.matches
+            .map((m) => m.route.id)
+            .concat(Object.keys(window.__remixRouteModules))
+        ),
+      ];
+
       // Load new route modules that we've seen.
-      let routeModules = Object.fromEntries(
-        (
-          await Promise.all(
-            Object.entries(__remixRouteModules).map(async ([key, value]) => {
-              if (!newManifest.routes[key]) {
-                return null;
-              }
-              let imported = await import(
-                newManifest.routes[key].module +
-                  `?t=${newManifest.hmr?.timestamp}`
-              );
-              return [
-                key,
-                {
-                  ...imported,
-                  // react-refresh takes care of updating these in-place,
-                  // if we don't preserve existing values we'll loose state.
-                  default:
-                    window.__remixRouteModules[key].default || imported.default,
-                  CatchBoundary:
-                    window.__remixRouteModules[key].CatchBoundary ||
-                    imported.CatchBoundary,
-                  ErrorBoundary:
-                    window.__remixRouteModules[key].ErrorBoundary ||
-                    imported.ErrorBoundary,
-                },
-              ];
-            })
-          )
-        ).filter(Boolean) as [string, RouteModules[string]][]
+      let newRouteModules = Object.assign(
+        {},
+        window.__remixRouteModules,
+        Object.fromEntries(
+          (
+            await Promise.all(
+              routeIds.map(async (id) => {
+                if (!newManifest.routes[id]) {
+                  return null;
+                }
+                let imported = await import(
+                  newManifest.routes[id].module +
+                    `?t=${newManifest.hmr?.timestamp}`
+                );
+                return [
+                  id,
+                  {
+                    ...imported,
+                    // react-refresh takes care of updating these in-place,
+                    // if we don't preserve existing values we'll loose state.
+                    default: imported.default
+                      ? window.__remixRouteModules[id]?.default ??
+                        imported.default
+                      : imported.default,
+                    CatchBoundary: imported.CatchBoundary
+                      ? window.__remixRouteModules[id]?.CatchBoundary ??
+                        imported.CatchBoundary
+                      : imported.CatchBoundary,
+                    ErrorBoundary: imported.ErrorBoundary
+                      ? window.__remixRouteModules[id]?.ErrorBoundary ??
+                        imported.ErrorBoundary
+                      : imported.ErrorBoundary,
+                  },
+                ];
+              })
+            )
+          ).filter(Boolean) as [string, RouteModules[string]][]
+        )
       );
 
       // Create new routes
       let routes = createClientRoutes(
         newManifest.routes,
-        routeModules,
         window.__remixContext.future
       );
 
@@ -106,7 +123,7 @@ if (import.meta && import.meta.hot) {
           // TODO: Handle race conditions here. Should abort if a new update
           // comes in while we're waiting for the router to be idle.
           Object.assign(window.__remixManifest, newManifest);
-          Object.assign(window.__remixRouteModules, routeModules);
+          Object.assign(window.__remixRouteModules, newRouteModules);
           window.$RefreshRuntime$.performReactRefresh();
         }
       });
@@ -124,7 +141,6 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
   if (!router) {
     let routes = createClientRoutes(
       window.__remixManifest.routes,
-      window.__remixRouteModules,
       window.__remixContext.future
     );
 
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 4284e38a107..092d4e52e6f 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -1607,9 +1607,10 @@ export const LiveReload =
                         if (update.revalidate) {
                           console.log("[HMR] Revalidating [" + update.id + "]");
                         }
+                        let imported = await import(update.url +  '?t=' + event.assetsManifest.hmr.timestamp);
                         if (window.__hmr__.contexts[update.id]) {
                           let accepted = window.__hmr__.contexts[update.id].emit(
-                            await import(update.url +  '?t=' + event.assetsManifest.hmr.timestamp)
+                            imported
                           );
                           if (accepted) {
                             console.log("[HMR] Updated accepted by", update.id);
diff --git a/packages/remix-react/routeModules.ts b/packages/remix-react/routeModules.ts
index 785add903db..f02d9822d73 100644
--- a/packages/remix-react/routeModules.ts
+++ b/packages/remix-react/routeModules.ts
@@ -134,17 +134,14 @@ export type RouteComponent = ComponentType<{}>;
  */
 export type RouteHandle = any;
 
-export async function loadRouteModule(
-  route: EntryRoute,
-  routeModulesCache: RouteModules
-): Promise<RouteModule> {
-  if (route.id in routeModulesCache) {
-    return routeModulesCache[route.id];
+export async function loadRouteModule(route: EntryRoute): Promise<RouteModule> {
+  if (route.id in window.__remixRouteModules) {
+    return window.__remixRouteModules[route.id];
   }
 
   try {
     let routeModule = await import(/* webpackIgnore: true */ route.module);
-    routeModulesCache[route.id] = routeModule;
+    window.__remixRouteModules[route.id] = routeModule;
     return routeModule;
   } catch (error: unknown) {
     // User got caught in the middle of a deploy and the CDN no longer has the
diff --git a/packages/remix-react/routes.tsx b/packages/remix-react/routes.tsx
index 230c49a46c7..01388168193 100644
--- a/packages/remix-react/routes.tsx
+++ b/packages/remix-react/routes.tsx
@@ -106,7 +106,6 @@ export function createServerRoutes(
 
 export function createClientRoutes(
   manifest: RouteManifest<EntryRoute>,
-  routeModulesCache: RouteModules,
   future: FutureConfig,
   parentId: string = "",
   routesByParentId: Record<
@@ -134,28 +133,19 @@ export function createClientRoutes(
       // handle gets added in via useMatches since we aren't guaranteed to
       // have the route module available here
       handle: undefined,
-      loader: createDataFunction(route, routeModulesCache, false),
-      action: createDataFunction(route, routeModulesCache, true),
-      shouldRevalidate: createShouldRevalidate(route, routeModulesCache),
+      loader: createDataFunction(route, false),
+      action: createDataFunction(route, true),
+      shouldRevalidate: createShouldRevalidate(route),
     };
-    let children = createClientRoutes(
-      manifest,
-      routeModulesCache,
-      future,
-      route.id,
-      routesByParentId
-    );
+    let children = createClientRoutes(manifest, future, route.id);
     if (children.length > 0) dataRoute.children = children;
     return dataRoute;
   });
 }
 
-function createShouldRevalidate(
-  route: EntryRoute,
-  routeModules: RouteModules
-): ShouldRevalidateFunction {
+function createShouldRevalidate(route: EntryRoute): ShouldRevalidateFunction {
   return function (arg) {
-    let module = routeModules[route.id];
+    let module = window.__remixRouteModules[route.id];
     invariant(module, `Expected route module to be loaded for ${route.id}`);
     if (module.shouldRevalidate) {
       return module.shouldRevalidate(arg);
@@ -164,25 +154,18 @@ function createShouldRevalidate(
   };
 }
 
-async function loadRouteModuleWithBlockingLinks(
-  route: EntryRoute,
-  routeModules: RouteModules
-) {
-  let routeModule = await loadRouteModule(route, routeModules);
+async function loadRouteModuleWithBlockingLinks(route: EntryRoute) {
+  let routeModule = await loadRouteModule(route);
   await prefetchStyleLinks(routeModule);
   return routeModule;
 }
 
 function createDataFunction(
   route: EntryRoute,
-  routeModules: RouteModules,
   isAction: boolean
 ): LoaderFunction | ActionFunction {
   return async ({ request }) => {
-    let routeModulePromise = loadRouteModuleWithBlockingLinks(
-      route,
-      routeModules
-    );
+    let routeModulePromise = loadRouteModuleWithBlockingLinks(route);
     try {
       if (isAction && !route.hasAction) {
         let msg =

From 98f1062fe853464348fd75802f25f09f4b5e04c7 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 15 Feb 2023 14:43:10 -0800
Subject: [PATCH 40/66] remove comment

---
 integration/hmr-test.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index c787c979bd7..22ecc288a02 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -341,12 +341,3 @@ test("HMR", async ({ page }) => {
     console.log(appStderr());
   }
 });
-
-// TODO: test complex undo flow?
-// 1. Go to route A
-// 2. Go to route B
-// 3. Modify code for route A
-// 4. Navigate to route A
-// 5. Nav to route B
-// 6. Undo changes from (3)
-// 7. Nav to route A

From 98a44c00b52f05a2081e5d35a8d0f86cea8fa072 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 15 Feb 2023 15:59:26 -0800
Subject: [PATCH 41/66] revert module changes in favor of updating cache early
 and in place

---
 packages/remix-react/browser.tsx     |  8 +++----
 packages/remix-react/routeModules.ts | 11 +++++----
 packages/remix-react/routes.tsx      | 34 ++++++++++++++++++++--------
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index 39e99622d93..fb3d1f153f9 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -49,9 +49,7 @@ let hmrAbortController: AbortController;
 if (import.meta && import.meta.hot) {
   import.meta.hot.accept(
     "remix:manifest",
-    async (
-      newManifest: EntryContext["manifest"]
-    ) => {
+    async (newManifest: EntryContext["manifest"]) => {
       let routeIds = [
         ...new Set(
           router.state.matches
@@ -101,9 +99,11 @@ if (import.meta && import.meta.hot) {
         )
       );
 
+      Object.assign(window.__remixRouteModules, newRouteModules);
       // Create new routes
       let routes = createClientRoutes(
         newManifest.routes,
+        window.__remixRouteModules,
         window.__remixContext.future
       );
 
@@ -123,7 +123,6 @@ if (import.meta && import.meta.hot) {
           // TODO: Handle race conditions here. Should abort if a new update
           // comes in while we're waiting for the router to be idle.
           Object.assign(window.__remixManifest, newManifest);
-          Object.assign(window.__remixRouteModules, newRouteModules);
           window.$RefreshRuntime$.performReactRefresh();
         }
       });
@@ -141,6 +140,7 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
   if (!router) {
     let routes = createClientRoutes(
       window.__remixManifest.routes,
+      window.__remixRouteModules,
       window.__remixContext.future
     );
 
diff --git a/packages/remix-react/routeModules.ts b/packages/remix-react/routeModules.ts
index f02d9822d73..785add903db 100644
--- a/packages/remix-react/routeModules.ts
+++ b/packages/remix-react/routeModules.ts
@@ -134,14 +134,17 @@ export type RouteComponent = ComponentType<{}>;
  */
 export type RouteHandle = any;
 
-export async function loadRouteModule(route: EntryRoute): Promise<RouteModule> {
-  if (route.id in window.__remixRouteModules) {
-    return window.__remixRouteModules[route.id];
+export async function loadRouteModule(
+  route: EntryRoute,
+  routeModulesCache: RouteModules
+): Promise<RouteModule> {
+  if (route.id in routeModulesCache) {
+    return routeModulesCache[route.id];
   }
 
   try {
     let routeModule = await import(/* webpackIgnore: true */ route.module);
-    window.__remixRouteModules[route.id] = routeModule;
+    routeModulesCache[route.id] = routeModule;
     return routeModule;
   } catch (error: unknown) {
     // User got caught in the middle of a deploy and the CDN no longer has the
diff --git a/packages/remix-react/routes.tsx b/packages/remix-react/routes.tsx
index 01388168193..f82216f8ad8 100644
--- a/packages/remix-react/routes.tsx
+++ b/packages/remix-react/routes.tsx
@@ -106,6 +106,7 @@ export function createServerRoutes(
 
 export function createClientRoutes(
   manifest: RouteManifest<EntryRoute>,
+  routeModulesCache: RouteModules,
   future: FutureConfig,
   parentId: string = "",
   routesByParentId: Record<
@@ -133,19 +134,27 @@ export function createClientRoutes(
       // handle gets added in via useMatches since we aren't guaranteed to
       // have the route module available here
       handle: undefined,
-      loader: createDataFunction(route, false),
-      action: createDataFunction(route, true),
-      shouldRevalidate: createShouldRevalidate(route),
+      loader: createDataFunction(route, routeModulesCache, false),
+      action: createDataFunction(route, routeModulesCache, true),
+      shouldRevalidate: createShouldRevalidate(route, routeModulesCache),
     };
-    let children = createClientRoutes(manifest, future, route.id);
+    let children = createClientRoutes(
+      manifest,
+      routeModulesCache,
+      future,
+      route.id
+    );
     if (children.length > 0) dataRoute.children = children;
     return dataRoute;
   });
 }
 
-function createShouldRevalidate(route: EntryRoute): ShouldRevalidateFunction {
+function createShouldRevalidate(
+  route: EntryRoute,
+  routeModules: RouteModules
+): ShouldRevalidateFunction {
   return function (arg) {
-    let module = window.__remixRouteModules[route.id];
+    let module = routeModules[route.id];
     invariant(module, `Expected route module to be loaded for ${route.id}`);
     if (module.shouldRevalidate) {
       return module.shouldRevalidate(arg);
@@ -154,18 +163,25 @@ function createShouldRevalidate(route: EntryRoute): ShouldRevalidateFunction {
   };
 }
 
-async function loadRouteModuleWithBlockingLinks(route: EntryRoute) {
-  let routeModule = await loadRouteModule(route);
+async function loadRouteModuleWithBlockingLinks(
+  route: EntryRoute,
+  routeModules: RouteModules
+) {
+  let routeModule = await loadRouteModule(route, routeModules);
   await prefetchStyleLinks(routeModule);
   return routeModule;
 }
 
 function createDataFunction(
   route: EntryRoute,
+  routeModules: RouteModules,
   isAction: boolean
 ): LoaderFunction | ActionFunction {
   return async ({ request }) => {
-    let routeModulePromise = loadRouteModuleWithBlockingLinks(route);
+    let routeModulePromise = loadRouteModuleWithBlockingLinks(
+      route,
+      routeModules
+    );
     try {
       if (isAction && !route.hasAction) {
         let msg =

From 026b1c44233091bddcf963fab897ac6577d3e229 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 15 Feb 2023 16:05:20 -0800
Subject: [PATCH 42/66] strip `import.meta` from cjs builds

---
 package.json                          |  1 +
 packages/remix-react/rollup.config.js |  4 +++
 yarn.lock                             | 38 +++++++++++++++++++++++++--
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 026c5835358..720fe34b953 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^13.3.0",
diff --git a/packages/remix-react/rollup.config.js b/packages/remix-react/rollup.config.js
index 125bbb8b5e6..00ec7a37395 100644
--- a/packages/remix-react/rollup.config.js
+++ b/packages/remix-react/rollup.config.js
@@ -2,6 +2,7 @@ const path = require("path");
 const babel = require("@rollup/plugin-babel").default;
 const nodeResolve = require("@rollup/plugin-node-resolve").default;
 const copy = require("rollup-plugin-copy");
+const replace = require("@rollup/plugin-replace");
 
 const {
   copyToPlaygrounds,
@@ -34,6 +35,9 @@ module.exports = function rollup() {
       exports: "auto",
     },
     plugins: [
+      replace({
+        "import.meta": "null",
+      }),
       babel({
         babelHelpers: "bundled",
         exclude: /node_modules/,
diff --git a/yarn.lock b/yarn.lock
index 636d22d492b..ed3d2fc536c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2120,6 +2120,11 @@
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz"
   integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
 
+"@jridgewell/sourcemap-codec@^1.4.13":
+  version "1.4.14"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
 "@jridgewell/trace-mapping@^0.3.0", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.13"
   resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz"
@@ -2459,6 +2464,14 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
+"@rollup/plugin-replace@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.2.tgz#45f53501b16311feded2485e98419acb8448c61d"
+  integrity sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    magic-string "^0.27.0"
+
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz"
@@ -2476,6 +2489,15 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@rushstack/eslint-patch@^1.2.0":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
@@ -2753,6 +2775,11 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz"
   integrity sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==
 
+"@types/estree@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
 "@types/express-serve-static-core@^4.17.18":
   version "4.17.24"
   resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.24.tgz"
@@ -6202,9 +6229,9 @@ estree-walker@^1.0.1:
   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.1:
+estree-walker@^2.0.1, estree-walker@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
 estree-walker@^3.0.0:
@@ -8769,6 +8796,13 @@ magic-string@^0.25.3:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+magic-string@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
+  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
 make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz"

From a74aee4cae6a4f3f15cbb13c18cbc53d56768156 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 16 Feb 2023 10:58:02 -0500
Subject: [PATCH 43/66] test(dev): `import.meta` support for jest

---
 jest/transform.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/jest/transform.js b/jest/transform.js
index ed4a8fc9972..260606b6df4 100644
--- a/jest/transform.js
+++ b/jest/transform.js
@@ -1,6 +1,24 @@
 let { default: babelJest } = require("babel-jest");
 
+let baseConfig = require("../babel.config.js");
+
+/**
+ * Replace `import.meta` with `undefined`
+ *
+ * Needed to support server-side CJS in Jest
+ * that access `@remix-run/react`, where `import.meta.hot`
+ * is used for HMR.
+ */
+let metaPlugin = ({ types: t }) => ({
+  visitor: {
+    MetaProperty: (path) => {
+      path.replaceWith(t.identifier("undefined"));
+    },
+  },
+});
+
 module.exports = babelJest.createTransformer({
   babelrc: false,
-  configFile: require.resolve("../babel.config"),
+  ...baseConfig,
+  plugins: [...baseConfig.plugins, metaPlugin],
 });

From 764731f695fada4204f83836614c49aa509077d6 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 16 Feb 2023 12:05:14 -0500
Subject: [PATCH 44/66] fix(server-runtime): fix typechecking

---
 packages/remix-server-runtime/server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/remix-server-runtime/server.ts b/packages/remix-server-runtime/server.ts
index 0a2fd04e0ac..0c6503a3588 100644
--- a/packages/remix-server-runtime/server.ts
+++ b/packages/remix-server-runtime/server.ts
@@ -55,7 +55,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
     let { unstable_dev } = build.future;
     if (
       mode === "development" &&
-      typeof unstable_dev !== "boolean" &&
+      unstable_dev !== false &&
       url.pathname ===
         (unstable_dev === true
           ? "/__REMIX_ASSETS_MANIFEST"

From 59740159fec4f184241ec5819ff7c889d3685271 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 16 Feb 2023 20:54:10 -0500
Subject: [PATCH 45/66] style(dev): indentation

---
 integration/hmr-test.ts | 52 +++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 22ecc288a02..743497585c8 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -202,7 +202,9 @@ test("HMR", async ({ page }) => {
   await wait(() => /✅ app ready: /.test(appStdout()));
 
   try {
-    await page.goto(`http://localhost:${appServerPort}`, { waitUntil: "networkidle" });
+    await page.goto(`http://localhost:${appServerPort}`, {
+      waitUntil: "networkidle",
+    });
 
     // `<input />` value as page state that
     // would be wiped out by a full page refresh
@@ -253,19 +255,19 @@ test("HMR", async ({ page }) => {
 
     // add loader
     let withLoader1 = `
-        import { json } from "@remix-run/node";
-        import { useLoaderData } from "@remix-run/react";
+      import { json } from "@remix-run/node";
+      import { useLoaderData } from "@remix-run/react";
 
-        export let loader = () => json({ hello: "world" })
+      export let loader = () => json({ hello: "world" })
 
-        export default function Index() {
-          let { hello } = useLoaderData<typeof loader>();
-          return (
-            <main>
-              <h1>Hello, {hello}</h1>
-            </main>
-          )
-        }
+      export default function Index() {
+        let { hello } = useLoaderData<typeof loader>();
+        return (
+          <main>
+            <h1>Hello, {hello}</h1>
+          </main>
+        )
+      }
     `;
     fs.writeFileSync(indexPath, withLoader1);
     await page.getByText("Hello, world").waitFor({ timeout: 2000 });
@@ -273,21 +275,21 @@ test("HMR", async ({ page }) => {
     await page.waitForSelector(`#root-counter:has-text("inc 1")`);
 
     let withLoader2 = `
-        import { json } from "@remix-run/node";
-        import { useLoaderData } from "@remix-run/react";
+      import { json } from "@remix-run/node";
+      import { useLoaderData } from "@remix-run/react";
 
-        export function loader() {
-          return json({ hello: "planet" })
-        }
+      export function loader() {
+        return json({ hello: "planet" })
+      }
 
-        export default function Index() {
-          let { hello } = useLoaderData<typeof loader>();
-          return (
-            <main>
-              <h1>Hello, {hello}</h1>
-            </main>
-          )
-        }
+      export default function Index() {
+        let { hello } = useLoaderData<typeof loader>();
+        return (
+          <main>
+            <h1>Hello, {hello}</h1>
+          </main>
+        )
+      }
     `;
     fs.writeFileSync(indexPath, withLoader2);
     await page.getByText("Hello, planet").waitFor({ timeout: 2000 });

From 4b87d03b9c68fc91c9a482e388e415af74eeecbf Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 16 Feb 2023 21:20:33 -0500
Subject: [PATCH 46/66] test(dev): reference local remix dev cli

---
 integration/hmr-test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 743497585c8..69791a3e771 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -21,13 +21,14 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
           "private": true,
           "sideEffects": false,
           "scripts": {
-            "dev:remix": "NODE_ENV=development node ../../../build/node_modules/@remix-run/dev/dist/cli.js dev",
+            "dev:remix": "NODE_ENV=development node ./node_modules/@remix-run/dev/dist/cli.js dev",
             "dev:app": "NODE_ENV=development nodemon --watch build/ ./server.js"
           },
           "dependencies": {
             "@remix-run/node": "0.0.0-local-version",
             "@remix-run/react": "0.0.0-local-version",
             "express": "0.0.0-local-version",
+            "isbot": "0.0.0-local-version",
             "nodemon": "0.0.0-local-version",
             "react": "0.0.0-local-version",
             "react-dom": "0.0.0-local-version",

From d2b2d14a2ea1c24a0044a6a012b243baee6de0a6 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 16 Feb 2023 21:21:29 -0500
Subject: [PATCH 47/66] fix(dev): only send hmr updates for files that changed

by having per-file timestamps that only change when file is written
---
 packages/remix-dev/compiler/plugins/hmrPlugin.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
index 737af5f7fff..e7606ba0a9c 100644
--- a/packages/remix-dev/compiler/plugins/hmrPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -127,6 +127,8 @@ declare global {
           remixConfig,
           !!build.initialOptions.sourcemap,
           args.path.startsWith(remixConfig.appDirectory)
+            ? fs.statSync(args.path).mtimeMs
+            : undefined
         );
 
         return {
@@ -144,7 +146,7 @@ export async function applyHMR(
   args: esbuild.OnLoadArgs,
   remixConfig: RemixConfig,
   sourcemap: boolean,
-  timestampable: boolean = true
+  lastModified?: number
 ) {
   let babel = await import("@babel/core");
   // @ts-expect-error
@@ -163,7 +165,7 @@ import.meta.hot = __hmr__.createHotContext(
 //@ts-expect-error
 $id$
 );
-${timestampable ? `import.meta.hot.ts = "${Date.now()}";` : ""}
+${lastModified ? `import.meta.hot.lastModified = "${lastModified}";` : ""}
 }`.replace(/\$id\$/g, hmrId);
   let sourceCodeWithHMR = hmrPrefix + sourceCode;
 

From 69bc58f29c1e97d1fa3c96f9a38eca9bd3a4c9a9 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 16 Feb 2023 21:27:45 -0500
Subject: [PATCH 48/66] refactor(dev): list of isolated chunks for hmr

---
 packages/remix-dev/compiler/compileBrowser.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index a908baaca9b..eeb410fa5ce 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -129,14 +129,19 @@ const createEsbuildConfig = (
 
   if (mode === "development" && config.future.unstable_dev) {
     // TODO prebundle deps instead of chunking just these ones
+    let isolateChunks = [
+      "react",
+      "react/jsx-dev-runtime",
+      "react/jsx-runtime",
+      "react-dom",
+      "react-dom/client",
+      "react-refresh/runtime",
+      "@remix-run/react",
+      "remix:hmr",
+    ];
     entryPoints = {
       ...entryPoints,
-      react: "react",
-      "react-dom": "react-dom",
-      "react-dom/client": "react-dom/client",
-      "react-refresh/runtime": "react-refresh/runtime",
-      "@remix-run/react": "@remix-run/react",
-      "remix:hmr": "remix:hmr",
+      ...Object.fromEntries(isolateChunks.map((imprt) => [imprt, imprt])),
     };
 
     plugins.push(hmrPlugin({ remixConfig: config }));

From b2bcad95838ee0e4bb94b5b75c1de5c5c7458977 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 16 Feb 2023 21:31:00 -0500
Subject: [PATCH 49/66] wip: esbuild loaders for browser route mods

---
 .../remix-dev/compiler/plugins/browserRouteModulesPlugin.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index ce2205bd3c7..15c0cf1a4cc 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -6,6 +6,7 @@ import ts from "typescript";
 import type { RemixConfig } from "../../config";
 import { applyHMR } from "./hmrPlugin";
 import type { CompileOptions } from "../options";
+import { getLoaderForFile } from "../loaders";
 
 const serverOnlyExports = new Set(["action", "loader"]);
 
@@ -55,7 +56,7 @@ export function browserRouteModulesPlugin(
 
           return {
             contents,
-            loader: path.extname(routeFile).slice(1) as esbuild.Loader,
+            loader: getLoaderForFile(routeFile),
             resolveDir: path.dirname(routeFile),
           };
         }

From f3ede9e789cf26f64c1d1d1ca20fb71d7e5c6afe Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 15 Feb 2023 16:25:24 -0500
Subject: [PATCH 50/66] refactor(dev): extract transform utils from `codemod/`

---
 .../replace-remix-magic-imports/transform.ts     | 12 ++++--------
 .../createTransform.ts => transform/create.ts}   |  7 ++++---
 packages/remix-dev/transform/index.ts            |  1 +
 .../utils/babel.ts => transform/plugin.ts}       |  8 +++-----
 .../plugins/recast.ts}                           | 16 ++++++++--------
 5 files changed, 20 insertions(+), 24 deletions(-)
 rename packages/remix-dev/{codemod/createTransform.ts => transform/create.ts} (84%)
 create mode 100644 packages/remix-dev/transform/index.ts
 rename packages/remix-dev/{codemod/utils/babel.ts => transform/plugin.ts} (73%)
 rename packages/remix-dev/{codemod/utils/babelPluginRecast.ts => transform/plugins/recast.ts} (78%)

diff --git a/packages/remix-dev/codemod/replace-remix-magic-imports/transform.ts b/packages/remix-dev/codemod/replace-remix-magic-imports/transform.ts
index 8351b712957..b0c2b693b33 100644
--- a/packages/remix-dev/codemod/replace-remix-magic-imports/transform.ts
+++ b/packages/remix-dev/codemod/replace-remix-magic-imports/transform.ts
@@ -2,8 +2,7 @@ import type { NodePath } from "@babel/core";
 import * as t from "@babel/types";
 import _ from "lodash";
 
-import createTransform from "../createTransform";
-import type { BabelPlugin } from "../utils/babel";
+import * as Transform from "../../transform";
 import { CodemodError } from "../utils/error";
 import type { Export } from "./utils/export";
 import {
@@ -155,9 +154,8 @@ const groupImportsBySource = <Source extends string = string>(
   return grouped;
 };
 
-const plugin =
-  (options: Options): BabelPlugin =>
-  (babel) => {
+export default (options: Options) =>
+  Transform.create((babel) => {
     let { types: t } = babel;
     return {
       visitor: {
@@ -220,6 +218,4 @@ const plugin =
         },
       },
     };
-  };
-
-export default (options: Options) => createTransform(plugin(options));
+  });
diff --git a/packages/remix-dev/codemod/createTransform.ts b/packages/remix-dev/transform/create.ts
similarity index 84%
rename from packages/remix-dev/codemod/createTransform.ts
rename to packages/remix-dev/transform/create.ts
index 2f41e3466a2..dd2dfc06ed0 100644
--- a/packages/remix-dev/codemod/createTransform.ts
+++ b/packages/remix-dev/transform/create.ts
@@ -5,12 +5,13 @@ import babelPluginSyntaxJsx from "@babel/plugin-syntax-jsx";
 // @ts-expect-error TODO
 import babelPluginSyntaxTypescript from "@babel/plugin-syntax-typescript";
 
-import babelRecastPlugin from "./utils/babelPluginRecast";
-import type { BabelPlugin } from "./utils/babel";
+import { plugin as babelRecastPlugin } from "./plugins/recast";
+import type { Plugin } from "./plugin";
 
 type Transform = (code: string, filepath: string) => string;
 
-export default (plugin: BabelPlugin): Transform =>
+export let create =
+  (plugin: Plugin): Transform =>
   (code, filepath) => {
     let result = transformSync(code, {
       babelrc: false,
diff --git a/packages/remix-dev/transform/index.ts b/packages/remix-dev/transform/index.ts
new file mode 100644
index 00000000000..7c5f96bb61a
--- /dev/null
+++ b/packages/remix-dev/transform/index.ts
@@ -0,0 +1 @@
+export { create } from "./create";
diff --git a/packages/remix-dev/codemod/utils/babel.ts b/packages/remix-dev/transform/plugin.ts
similarity index 73%
rename from packages/remix-dev/codemod/utils/babel.ts
rename to packages/remix-dev/transform/plugin.ts
index bbfe17b5cdf..735d69e4542 100644
--- a/packages/remix-dev/codemod/utils/babel.ts
+++ b/packages/remix-dev/transform/plugin.ts
@@ -7,7 +7,7 @@ import type { File } from "@babel/types";
  *
  * Adapted from [@codemod/core](https://github.com/codemod-js/codemod/blob/5a9fc6968409613eefd87e646408c08b6dad0c40/packages/core/src/BabelPluginTypes.ts)
  */
-export interface PluginObj<S = File> extends Partial<Babel.PluginObj<S>> {
+type PluginObj<S = File> = Partial<Babel.PluginObj<S>> & {
   parserOverride?(
     code: string,
     options: Babel.ParserOptions,
@@ -20,8 +20,6 @@ export interface PluginObj<S = File> extends Partial<Babel.PluginObj<S>> {
     code: string,
     generate: (ast: File, options: Babel.GeneratorOptions) => string
   ): { code: string; map?: object };
-}
+};
 
-type RawBabelPlugin = (babel: typeof Babel) => PluginObj;
-type RawBabelPluginWithOptions = [RawBabelPlugin, object];
-export type BabelPlugin = RawBabelPlugin | RawBabelPluginWithOptions;
+export type Plugin = (babel: typeof Babel) => PluginObj;
diff --git a/packages/remix-dev/codemod/utils/babelPluginRecast.ts b/packages/remix-dev/transform/plugins/recast.ts
similarity index 78%
rename from packages/remix-dev/codemod/utils/babelPluginRecast.ts
rename to packages/remix-dev/transform/plugins/recast.ts
index e64307d06a1..f9b3ff0a8aa 100644
--- a/packages/remix-dev/codemod/utils/babelPluginRecast.ts
+++ b/packages/remix-dev/transform/plugins/recast.ts
@@ -2,13 +2,13 @@ import type Babel from "@babel/core";
 import type { File } from "@babel/types";
 import * as recast from "recast";
 
-import type { PluginObj } from "./babel";
+import type { Plugin } from "../plugin";
 
-function parse(
+let parse = (
   code: string,
   options: Babel.ParserOptions,
   parse: (code: string, options: Babel.ParserOptions) => File
-): File {
+): File => {
   return recast.parse(code, {
     parser: {
       parse(code: string) {
@@ -16,18 +16,18 @@ function parse(
       },
     },
   });
-}
+};
 
-function generate(ast: File): { code: string; map?: object } {
+let generate = (ast: File): { code: string; map?: object } => {
   return recast.print(ast);
-}
+};
 
 /**
  * Adapted from [@codemod/core](https://github.com/codemod-js/codemod/blob/5a9fc6968409613eefd87e646408c08b6dad0c40/packages/core/src/RecastPlugin.ts)
  */
-export default function (): PluginObj {
+export let plugin: Plugin = () => {
   return {
     parserOverride: parse,
     generatorOverride: generate,
   };
-}
+};

From 5cc7ea1f5c1dc96a746c91578004546d4096069b Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 15 Feb 2023 16:25:46 -0500
Subject: [PATCH 51/66] refactor(dev): remove server-only exports via babel ast
 transforms

---
 .../plugins/browserRouteModulesPlugin.ts      | 181 ++++++------------
 packages/remix-dev/package.json               |   1 -
 yarn.lock                                     |   5 -
 3 files changed, 60 insertions(+), 127 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index 15c0cf1a4cc..0ef5531290c 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -1,16 +1,69 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import type esbuild from "esbuild";
-import ts from "typescript";
+import generate from "@babel/generator";
 
 import type { RemixConfig } from "../../config";
 import { applyHMR } from "./hmrPlugin";
 import type { CompileOptions } from "../options";
 import { getLoaderForFile } from "../loaders";
+import * as Transform from "../../transform";
 
 const serverOnlyExports = new Set(["action", "loader"]);
 
-type OnLoader = (filename: string, code: string) => void;
+let removeServerExports = (onLoader: (loader: string) => void) =>
+  Transform.create(({ types: t }) => {
+    return {
+      visitor: {
+        ExportNamedDeclaration: (path) => {
+          let { node } = path;
+          if (node.source) {
+            let specifiers = node.specifiers.filter(({ exported }) => {
+              let name = t.isIdentifier(exported)
+                ? exported.name
+                : exported.value;
+              return !serverOnlyExports.has(name);
+            });
+            if (specifiers.length === node.specifiers.length) return;
+            if (specifiers.length === 0) return path.remove();
+            path.replaceWith(
+              t.exportNamedDeclaration(
+                node.declaration,
+                specifiers,
+                node.source
+              )
+            );
+          }
+          if (t.isFunctionDeclaration(node.declaration)) {
+            let name = node.declaration.id?.name;
+            if (!name) return;
+            if (name === "loader") {
+              let { code } = generate(node);
+              onLoader(code);
+            }
+            if (serverOnlyExports.has(name)) return path.remove();
+          }
+          if (t.isVariableDeclaration(node.declaration)) {
+            let declarations = node.declaration.declarations.filter((d) => {
+              let name = t.isIdentifier(d.id) ? d.id.name : undefined;
+              if (!name) return false;
+              if (name === "loader") {
+                let { code } = generate(node);
+                onLoader(code);
+              }
+              return !serverOnlyExports.has(name);
+            });
+            if (declarations.length === 0) return path.remove();
+            if (declarations.length === node.declaration.declarations.length)
+              return;
+            path.replaceWith(
+              t.variableDeclaration(node.declaration.kind, declarations)
+            );
+          }
+        },
+      },
+    };
+  });
 
 /**
  * This plugin loads route modules for the browser build, using module shims
@@ -19,7 +72,7 @@ type OnLoader = (filename: string, code: string) => void;
 export function browserRouteModulesPlugin(
   config: RemixConfig,
   suffixMatcher: RegExp,
-  onLoader: OnLoader,
+  onLoader: (filename: string, code: string) => void,
   mode: CompileOptions["mode"]
 ): esbuild.Plugin {
   return {
@@ -40,7 +93,10 @@ export function browserRouteModulesPlugin(
 
           let sourceCode = fs.readFileSync(routeFile, "utf8");
 
-          let contents = removeServerExports(sourceCode, routeFile, onLoader);
+          let transform = removeServerExports((loader: string) =>
+            onLoader(routeFile, loader)
+          );
+          let contents = transform(sourceCode, routeFile);
 
           if (mode === "development" && config.future.unstable_dev) {
             contents = await applyHMR(
@@ -64,120 +120,3 @@ export function browserRouteModulesPlugin(
     },
   };
 }
-
-function removeServerExports(
-  sourceCode: string,
-  fileName: string,
-  onLoader: OnLoader
-) {
-  let { outputText, sourceMapText } = ts.transpileModule(sourceCode, {
-    fileName,
-    compilerOptions: {
-      jsx: ts.JsxEmit.Preserve,
-      module: ts.ModuleKind.ESNext,
-      target: ts.ScriptTarget.ESNext,
-    },
-    transformers: {
-      before: [
-        (context) => {
-          let sourceFile: ts.SourceFile;
-          let visit: ts.Visitor = (node) => {
-            if (ts.isSourceFile(node)) {
-              sourceFile = node;
-            }
-            let modifiers = ts.getModifiers(node as ts.HasModifiers);
-
-            // TODO: if loader changes and its being re-exported or imported in some other route,
-            // need to crawl import graph for all such routes and consider them to have changed their loader too.
-            // consider diffing hashes from esbuild output files and comparing server to browser to prev browser etc.
-            // ^ maybe we can use that to detect these cases
-            if (ts.isExportDeclaration(node) && node.exportClause) {
-              if ("elements" in node.exportClause) {
-                let elements = node.exportClause.elements.filter(
-                  (n) => !serverOnlyExports.has(n.name.escapedText as string)
-                );
-                if (elements.length === 0) {
-                  return ts.factory.createEmptyStatement();
-                }
-
-                return ts.factory.createExportDeclaration(
-                  ts.getModifiers(node),
-                  node.isTypeOnly,
-                  ts.factory.createNamedExports(elements),
-                  node.moduleSpecifier,
-                  node.assertClause
-                );
-              }
-            }
-
-            if (
-              modifiers &&
-              modifiers.some((m) => m.kind === ts.SyntaxKind.ExportKeyword) &&
-              !modifiers.some((m) => m.kind === ts.SyntaxKind.DefaultKeyword)
-            ) {
-              if (ts.isFunctionDeclaration(node) && node.name) {
-                if (serverOnlyExports.has(node.name.escapedText as string)) {
-                  if (node.name.escapedText === "loader") {
-                    let printer = ts.createPrinter();
-                    let code = printer.printNode(
-                      ts.EmitHint.Unspecified,
-                      node,
-                      sourceFile
-                    );
-                    // printed = hash of loader
-                    onLoader(fileName, code);
-                  }
-                  return ts.factory.createEmptyStatement();
-                }
-              }
-
-              if (ts.isVariableStatement(node)) {
-                let declarations = node.declarationList.declarations.filter(
-                  (d) =>
-                    !d.name ||
-                    !("escapedText" in d.name) ||
-                    !serverOnlyExports.has(d.name.escapedText as string)
-                );
-                node.declarationList.declarations.forEach((d) => {
-                  if (
-                    "escapedText" in d.name &&
-                    d.name.escapedText === "loader"
-                  ) {
-                    let printer = ts.createPrinter();
-                    let code = printer.printNode(
-                      ts.EmitHint.Unspecified,
-                      node,
-                      sourceFile
-                    );
-                    // printed = hash of loader
-                    onLoader(fileName, code);
-                  }
-                });
-
-                if (declarations.length === 0) {
-                  return ts.factory.createEmptyStatement();
-                }
-
-                return ts.factory.createVariableStatement(
-                  node.modifiers,
-                  ts.factory.createVariableDeclarationList(
-                    declarations,
-                    node.declarationList.flags
-                  )
-                );
-              }
-            }
-
-            if (ts.isSourceFile(node)) {
-              return ts.visitEachChild(node, (child) => visit(child), context);
-            }
-            return node;
-          };
-          return (node) => ts.visitNode(node, visit);
-        },
-      ],
-    },
-  });
-
-  return outputText + (sourceMapText || "");
-}
diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json
index 4414d9ecb54..1c9e613a4c7 100644
--- a/packages/remix-dev/package.json
+++ b/packages/remix-dev/package.json
@@ -69,7 +69,6 @@
     "sort-package-json": "^1.55.0",
     "tar-fs": "^2.1.1",
     "tsconfig-paths": "^4.0.0",
-    "typescript": "^4.9.4",
     "ws": "^7.4.5",
     "xdm": "^2.0.0"
   },
diff --git a/yarn.lock b/yarn.lock
index ed3d2fc536c..1ee7e6516f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12439,11 +12439,6 @@ typescript@^4.8.4:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
-typescript@^4.9.4:
-  version "4.9.4"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
-  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
-
 typescript@^4.9.5:
   version "4.9.5"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"

From 8c057a25f04197110e69378c1731e24c4892f0b2 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Thu, 16 Feb 2023 23:21:20 -0500
Subject: [PATCH 52/66] chore(dev): remove unused dependency

---
 packages/remix-dev/package.json |  1 -
 yarn.lock                       | 24 ------------------------
 2 files changed, 25 deletions(-)

diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json
index 1c9e613a4c7..10fb8463a5e 100644
--- a/packages/remix-dev/package.json
+++ b/packages/remix-dev/package.json
@@ -44,7 +44,6 @@
     "fs-extra": "^10.0.0",
     "get-port": "^5.1.1",
     "gunzip-maybe": "^1.4.2",
-    "http-proxy": "^1.18.1",
     "inquirer": "^8.2.1",
     "jsesc": "3.0.2",
     "json5": "^2.2.1",
diff --git a/yarn.lock b/yarn.lock
index 1ee7e6516f2..30f03ecb1cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6266,11 +6266,6 @@ eventemitter2@^6.4.3:
   resolved "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz"
   integrity sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==
 
-eventemitter3@^4.0.0:
-  version "4.0.7"
-  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
-  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
-
 events@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/events/-/events-1.1.1.tgz"
@@ -6574,11 +6569,6 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz"
   integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
 
-follow-redirects@^1.0.0:
-  version "1.15.2"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
-
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz"
@@ -7138,15 +7128,6 @@ http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
-http-proxy@^1.18.1:
-  version "1.18.1"
-  resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz"
-  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
-  dependencies:
-    eventemitter3 "^4.0.0"
-    follow-redirects "^1.0.0"
-    requires-port "^1.0.0"
-
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz"
@@ -11139,11 +11120,6 @@ requireindex@^1.2.0, requireindex@~1.2.0:
   resolved "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz"
   integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==
 
-requires-port@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
-  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
-
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz"

From 1ce71c28c8d16bf9ca84400d78a1e60e20ace7e9 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 17 Feb 2023 12:47:14 -0500
Subject: [PATCH 53/66] fix(dev): transform jsx

---
 packages/remix-dev/transform/create.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/remix-dev/transform/create.ts b/packages/remix-dev/transform/create.ts
index dd2dfc06ed0..8653c684169 100644
--- a/packages/remix-dev/transform/create.ts
+++ b/packages/remix-dev/transform/create.ts
@@ -20,7 +20,7 @@ export let create =
       plugins: [babelPluginSyntaxTypescript, babelRecastPlugin, plugin],
       overrides: [
         {
-          test: /\.tsx$/,
+          test: /\.[jt]sx?$/,
           plugins: [
             babelPluginSyntaxJsx,
             [babelPluginSyntaxTypescript, { isTSX: true }],

From acd3894fb75ff1d54c6e4b6a488dadc15c5d809d Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 17 Feb 2023 13:47:59 -0500
Subject: [PATCH 54/66] fix(dev): mdx browser routes

---
 .../plugins/browserRouteModulesPlugin.ts      | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index 0ef5531290c..5dd00f5197a 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -4,10 +4,12 @@ import type esbuild from "esbuild";
 import generate from "@babel/generator";
 
 import type { RemixConfig } from "../../config";
-import { applyHMR } from "./hmrPlugin";
+import invariant from "../../invariant";
+import * as Transform from "../../transform";
 import type { CompileOptions } from "../options";
 import { getLoaderForFile } from "../loaders";
-import * as Transform from "../../transform";
+import { getRouteModuleExports } from "../routeExports";
+import { applyHMR } from "./hmrPlugin";
 
 const serverOnlyExports = new Set(["action", "loader"]);
 
@@ -65,6 +67,8 @@ let removeServerExports = (onLoader: (loader: string) => void) =>
     };
   });
 
+type Route = RemixConfig["routes"][string];
+
 /**
  * This plugin loads route modules for the browser build, using module shims
  * that re-export only the route module exports that are safe for the browser.
@@ -78,6 +82,14 @@ export function browserRouteModulesPlugin(
   return {
     name: "browser-route-modules",
     async setup(build) {
+      let routesByFile: Map<string, Route> = Object.keys(config.routes).reduce(
+        (map, key) => {
+          let route = config.routes[key];
+          map.set(route.file, route);
+          return map;
+        },
+        new Map()
+      );
       build.onResolve({ filter: suffixMatcher }, (args) => {
         return {
           path: args.path,
@@ -89,6 +101,25 @@ export function browserRouteModulesPlugin(
         { filter: suffixMatcher, namespace: "browser-route-module" },
         async (args) => {
           let file = args.path.replace(suffixMatcher, "");
+
+          if (/\.mdx?$/.test(file)) {
+            let route = routesByFile.get(file);
+            invariant(route, `Cannot get route by path: ${args.path}`);
+
+            let theExports = await getRouteModuleExports(config, route.id);
+            let contents = "module.exports = {};";
+            if (theExports.length !== 0) {
+              let spec = `{ ${theExports.join(", ")} }`;
+              contents = `export ${spec} from ${JSON.stringify(`./${file}`)};`;
+            }
+
+            return {
+              contents,
+              resolveDir: config.appDirectory,
+              loader: "js",
+            };
+          }
+
           let routeFile = path.join(config.appDirectory, file);
 
           let sourceCode = fs.readFileSync(routeFile, "utf8");

From 183241347daedb37fe6dbef94ad1a831a397a1d8 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 17 Feb 2023 14:40:18 -0500
Subject: [PATCH 55/66] chore: update yarn.lock

---
 yarn.lock | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 30f03ecb1cf..27de3f42036 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12410,16 +12410,16 @@ typescript@4.3.4:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz"
   integrity sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==
 
+typescript@^4.7.4, typescript@^4.9.5:
+  version "4.9.5"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
 typescript@^4.8.4:
   version "4.8.4"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
-typescript@^4.9.5:
-  version "4.9.5"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
-
 uid-safe@2.1.5, uid-safe@^2.1.5:
   version "2.1.5"
   resolved "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz"

From 686a6e9f22a60c6e00fd52575abcdaee5de87965 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 17 Feb 2023 14:46:25 -0500
Subject: [PATCH 56/66] chore(react): set `preventAssignment` to silence
 warning

---
 packages/remix-react/rollup.config.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/remix-react/rollup.config.js b/packages/remix-react/rollup.config.js
index 00ec7a37395..e87a8f57ec2 100644
--- a/packages/remix-react/rollup.config.js
+++ b/packages/remix-react/rollup.config.js
@@ -36,7 +36,10 @@ module.exports = function rollup() {
     },
     plugins: [
       replace({
-        "import.meta": "null",
+        preventAssignment: true,
+        values: {
+          "import.meta": "null",
+        },
       }),
       babel({
         babelHelpers: "bundled",

From 24a958727deebd4cf5bb367148c32c0266c4f62f Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 17 Feb 2023 15:00:09 -0500
Subject: [PATCH 57/66] chore: add changset for hmr

---
 .changeset/hmr.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 .changeset/hmr.md

diff --git a/.changeset/hmr.md b/.changeset/hmr.md
new file mode 100644
index 00000000000..dd387a4b972
--- /dev/null
+++ b/.changeset/hmr.md
@@ -0,0 +1,20 @@
+---
+"@remix-run/dev": minor
+"@remix-run/react": minor
+"@remix-run/server-runtime": minor
+---
+
+Hot Module Replacement and Hot Data Revalidation
+
+- Requires `unstable_dev` future flag to be enabled
+- HMR provided through React Refresh
+
+Features:
+- HMR for component and style changes
+- HDR when loaders for current route change
+
+Known limitations for MVP:
+- Only implemented for React via React Refresh
+- No `import.meta.hot` API exposed yet
+- Revalidates _all_ loaders on route when loader changes are detected
+- Loader changes do not account for imported dependencies changing

From 0ec995c53501b85bfdeb3966bc6ec850c4ea993d Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 17 Feb 2023 14:05:16 -0800
Subject: [PATCH 58/66] update router to experimental

---
 packages/remix-react/package.json          |  4 +--
 packages/remix-server-runtime/package.json |  2 +-
 packages/remix-testing/package.json        |  4 +--
 yarn.lock                                  | 30 +++++++++++-----------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/remix-react/package.json b/packages/remix-react/package.json
index 7824f27c8c5..cb9af814662 100644
--- a/packages/remix-react/package.json
+++ b/packages/remix-react/package.json
@@ -16,8 +16,8 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.3.2",
-    "react-router-dom": "6.8.1",
+    "@remix-run/router": "0.0.0-experimental-cf9637ce",
+    "react-router-dom": "0.0.0-experimental-cf9637ce",
     "use-sync-external-store": "1.2.0"
   },
   "devDependencies": {
diff --git a/packages/remix-server-runtime/package.json b/packages/remix-server-runtime/package.json
index 008dab27e2d..3383bca52fe 100644
--- a/packages/remix-server-runtime/package.json
+++ b/packages/remix-server-runtime/package.json
@@ -16,7 +16,7 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.3.2",
+    "@remix-run/router": "0.0.0-experimental-cf9637ce",
     "@types/cookie": "^0.4.0",
     "@types/react": "^18.0.15",
     "@web3-storage/multipart-parser": "^1.0.0",
diff --git a/packages/remix-testing/package.json b/packages/remix-testing/package.json
index f243e8482c8..3b5293453ce 100644
--- a/packages/remix-testing/package.json
+++ b/packages/remix-testing/package.json
@@ -18,10 +18,10 @@
   "dependencies": {
     "@remix-run/node": "1.13.0",
     "@remix-run/react": "1.13.0",
-    "@remix-run/router": "1.3.2",
+    "@remix-run/router": "0.0.0-experimental-cf9637ce",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "6.8.1"
+    "react-router-dom": "0.0.0-experimental-cf9637ce"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",
diff --git a/yarn.lock b/yarn.lock
index 27de3f42036..f00bffacf5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2390,10 +2390,10 @@
     "@changesets/types" "^5.0.0"
     dotenv "^8.1.0"
 
-"@remix-run/router@1.3.2":
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz#58cd2bd25df2acc16c628e1b6f6150ea6c7455bc"
-  integrity sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==
+"@remix-run/router@0.0.0-experimental-cf9637ce":
+  version "0.0.0-experimental-cf9637ce"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-0.0.0-experimental-cf9637ce.tgz#c65edef5cc4d5b92eeeff0eb4c3e807fa4b0b2ff"
+  integrity sha512-rcfTBmJl7XAojio5GBKaxbWVrb+j6acsdzuIx2/x+OuAtpe+x6V3yE0Xp0EUWnDoUXrZum5dLHMyIaJBWrvTnQ==
 
 "@remix-run/web-blob@^3.0.3", "@remix-run/web-blob@^3.0.4":
   version "3.0.4"
@@ -10793,20 +10793,20 @@ react-refresh@^0.14.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@6.8.1:
-  version "6.8.1"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz#7e136b67d9866f55999e9a8482c7008e3c575ac9"
-  integrity sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==
+react-router-dom@0.0.0-experimental-cf9637ce:
+  version "0.0.0-experimental-cf9637ce"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-0.0.0-experimental-cf9637ce.tgz#0847258b630adda01b1168856409a05278db9b0a"
+  integrity sha512-JOn1K54wCNGOUS6ANKHD1Ysnt3XY/xrCmSTXmUBhxNjTRrx/vOnIk9eJ1PthOgopx7uWJMaIb6r8RpreN/BsPg==
   dependencies:
-    "@remix-run/router" "1.3.2"
-    react-router "6.8.1"
+    "@remix-run/router" "0.0.0-experimental-cf9637ce"
+    react-router "0.0.0-experimental-cf9637ce"
 
-react-router@6.8.1:
-  version "6.8.1"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz#e362caf93958a747c649be1b47cd505cf28ca63e"
-  integrity sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==
+react-router@0.0.0-experimental-cf9637ce:
+  version "0.0.0-experimental-cf9637ce"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-0.0.0-experimental-cf9637ce.tgz#c6cdc4611c349093cd4bea5716ace484ed082408"
+  integrity sha512-F9eUv9OhBh6wyiRL/HpgEzFndSfLIlGb/IqsCLUwbrS3IGuaekpeBPAgysT4sgDC7gqIkGNOYqNXTu+211PsCA==
   dependencies:
-    "@remix-run/router" "1.3.2"
+    "@remix-run/router" "0.0.0-experimental-cf9637ce"
 
 react@^18.2.0:
   version "18.2.0"

From de5f19077410d10629508dd40d58d9c6a74c177d Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 21 Feb 2023 16:32:27 -0500
Subject: [PATCH 59/66] chore: depend on pre-releases instead of experimentals

---
 packages/remix-react/package.json          |  4 +--
 packages/remix-server-runtime/package.json |  2 +-
 packages/remix-testing/package.json        |  4 +--
 yarn.lock                                  | 30 +++++++++++-----------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/remix-react/package.json b/packages/remix-react/package.json
index cb9af814662..cb957f0925f 100644
--- a/packages/remix-react/package.json
+++ b/packages/remix-react/package.json
@@ -16,8 +16,8 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "0.0.0-experimental-cf9637ce",
-    "react-router-dom": "0.0.0-experimental-cf9637ce",
+    "@remix-run/router": "1.3.3-pre.0",
+    "react-router-dom": "6.8.2-pre.0",
     "use-sync-external-store": "1.2.0"
   },
   "devDependencies": {
diff --git a/packages/remix-server-runtime/package.json b/packages/remix-server-runtime/package.json
index 3383bca52fe..7e7c654de41 100644
--- a/packages/remix-server-runtime/package.json
+++ b/packages/remix-server-runtime/package.json
@@ -16,7 +16,7 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "0.0.0-experimental-cf9637ce",
+    "@remix-run/router": "1.3.3-pre.0",
     "@types/cookie": "^0.4.0",
     "@types/react": "^18.0.15",
     "@web3-storage/multipart-parser": "^1.0.0",
diff --git a/packages/remix-testing/package.json b/packages/remix-testing/package.json
index 3b5293453ce..81e4d693d8b 100644
--- a/packages/remix-testing/package.json
+++ b/packages/remix-testing/package.json
@@ -18,10 +18,10 @@
   "dependencies": {
     "@remix-run/node": "1.13.0",
     "@remix-run/react": "1.13.0",
-    "@remix-run/router": "0.0.0-experimental-cf9637ce",
+    "@remix-run/router": "1.3.3-pre.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "0.0.0-experimental-cf9637ce"
+    "react-router-dom": "6.8.2-pre.0"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",
diff --git a/yarn.lock b/yarn.lock
index f00bffacf5e..709ef0511c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2390,10 +2390,10 @@
     "@changesets/types" "^5.0.0"
     dotenv "^8.1.0"
 
-"@remix-run/router@0.0.0-experimental-cf9637ce":
-  version "0.0.0-experimental-cf9637ce"
-  resolved "https://registry.npmjs.org/@remix-run/router/-/router-0.0.0-experimental-cf9637ce.tgz#c65edef5cc4d5b92eeeff0eb4c3e807fa4b0b2ff"
-  integrity sha512-rcfTBmJl7XAojio5GBKaxbWVrb+j6acsdzuIx2/x+OuAtpe+x6V3yE0Xp0EUWnDoUXrZum5dLHMyIaJBWrvTnQ==
+"@remix-run/router@1.3.3-pre.0":
+  version "1.3.3-pre.0"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3-pre.0.tgz#919cf626b87e94ac4d0c635fb3d1b7a620c0a95e"
+  integrity sha512-PVAuOR2lxHyDYopG2dN0J5G3/4i8bQLgAt1BaJn36qIo+vZkvB+JCUopV5ps3VGOnznzM1R/ii/J/eMQa5AeBg==
 
 "@remix-run/web-blob@^3.0.3", "@remix-run/web-blob@^3.0.4":
   version "3.0.4"
@@ -10793,20 +10793,20 @@ react-refresh@^0.14.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@0.0.0-experimental-cf9637ce:
-  version "0.0.0-experimental-cf9637ce"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-0.0.0-experimental-cf9637ce.tgz#0847258b630adda01b1168856409a05278db9b0a"
-  integrity sha512-JOn1K54wCNGOUS6ANKHD1Ysnt3XY/xrCmSTXmUBhxNjTRrx/vOnIk9eJ1PthOgopx7uWJMaIb6r8RpreN/BsPg==
+react-router-dom@6.8.2-pre.0:
+  version "6.8.2-pre.0"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.2-pre.0.tgz#584a7b3c57d786888b17d00cfd20366492b67f92"
+  integrity sha512-7uNPMGVB6EffNshS1KHkQaTN2Ks/AFLsOq9VSI6zinp0w8l7wfNukG3/UnOE9Gj6KIi+QnKLdlb8dZYGyCbqsQ==
   dependencies:
-    "@remix-run/router" "0.0.0-experimental-cf9637ce"
-    react-router "0.0.0-experimental-cf9637ce"
+    "@remix-run/router" "1.3.3-pre.0"
+    react-router "6.8.2-pre.0"
 
-react-router@0.0.0-experimental-cf9637ce:
-  version "0.0.0-experimental-cf9637ce"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-0.0.0-experimental-cf9637ce.tgz#c6cdc4611c349093cd4bea5716ace484ed082408"
-  integrity sha512-F9eUv9OhBh6wyiRL/HpgEzFndSfLIlGb/IqsCLUwbrS3IGuaekpeBPAgysT4sgDC7gqIkGNOYqNXTu+211PsCA==
+react-router@6.8.2-pre.0:
+  version "6.8.2-pre.0"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.8.2-pre.0.tgz#6af02e2a799b82e0ad059db475b4bd36ddfe36a1"
+  integrity sha512-iw3AJUORtSfXryNVjLjDfHeU9wV2KgYTMjsQsDS5Vn+AgOs6G7vyJfkUMvTkxZZ/r/gdtSvHVnhcQ7rWEf9sJg==
   dependencies:
-    "@remix-run/router" "0.0.0-experimental-cf9637ce"
+    "@remix-run/router" "1.3.3-pre.0"
 
 react@^18.2.0:
   version "18.2.0"

From 491726f1e460f922cf5e99aca8bbbbae91a73eda Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 21 Feb 2023 16:50:12 -0500
Subject: [PATCH 60/66] test(dev): increase timeouts for hmr test

---
 integration/hmr-test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 69791a3e771..e2dec543bcb 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -194,13 +194,13 @@ test("HMR", async ({ page }) => {
   let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
   let devStdout = bufferize(dev.stdout!);
   let devStderr = bufferize(dev.stderr!);
-  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 3000 });
+  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 10_000 });
 
   // spin up app server
   let app = execa("npm", ["run", "dev:app"], { cwd: projectDir });
   let appStdout = bufferize(app.stdout!);
   let appStderr = bufferize(app.stderr!);
-  await wait(() => /✅ app ready: /.test(appStdout()));
+  await wait(() => /✅ app ready: /.test(appStdout()), { timeoutMs: 10_000 });
 
   try {
     await page.goto(`http://localhost:${appServerPort}`, {

From 3366bc9d79d65a21a2491d02d76465b5565bd34a Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 21 Feb 2023 17:17:58 -0500
Subject: [PATCH 61/66] test(dev): increase timeout for windows ci

---
 integration/hmr-test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index e2dec543bcb..a4299d142c9 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -194,13 +194,13 @@ test("HMR", async ({ page }) => {
   let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
   let devStdout = bufferize(dev.stdout!);
   let devStderr = bufferize(dev.stderr!);
-  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 10_000 });
+  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 20_000 });
 
   // spin up app server
   let app = execa("npm", ["run", "dev:app"], { cwd: projectDir });
   let appStdout = bufferize(app.stdout!);
   let appStderr = bufferize(app.stderr!);
-  await wait(() => /✅ app ready: /.test(appStdout()), { timeoutMs: 10_000 });
+  await wait(() => /✅ app ready: /.test(appStdout()), { timeoutMs: 20_000 });
 
   try {
     await page.goto(`http://localhost:${appServerPort}`, {

From 939a30c7640985459876b3cb6c36d10bbbf8af1d Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 21 Feb 2023 21:39:45 -0500
Subject: [PATCH 62/66] test(dev): increase timeout to 1m for windows ci

---
 integration/hmr-test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index a4299d142c9..1173e7d6a6c 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -194,13 +194,13 @@ test("HMR", async ({ page }) => {
   let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
   let devStdout = bufferize(dev.stdout!);
   let devStderr = bufferize(dev.stderr!);
-  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 20_000 });
+  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 60_000 });
 
   // spin up app server
   let app = execa("npm", ["run", "dev:app"], { cwd: projectDir });
   let appStdout = bufferize(app.stdout!);
   let appStderr = bufferize(app.stderr!);
-  await wait(() => /✅ app ready: /.test(appStdout()), { timeoutMs: 20_000 });
+  await wait(() => /✅ app ready: /.test(appStdout()), { timeoutMs: 60_000 });
 
   try {
     await page.goto(`http://localhost:${appServerPort}`, {

From 14e811093104c3296d6933f1882ace1eec59d50a Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 21 Feb 2023 21:47:24 -0500
Subject: [PATCH 63/66] test(dev): increase timeout to 2m for windows ci

---
 integration/hmr-test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 1173e7d6a6c..240a61b1c3e 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -194,13 +194,13 @@ test("HMR", async ({ page }) => {
   let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
   let devStdout = bufferize(dev.stdout!);
   let devStderr = bufferize(dev.stderr!);
-  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 60_000 });
+  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 120_000 });
 
   // spin up app server
   let app = execa("npm", ["run", "dev:app"], { cwd: projectDir });
   let appStdout = bufferize(app.stdout!);
   let appStderr = bufferize(app.stderr!);
-  await wait(() => /✅ app ready: /.test(appStdout()), { timeoutMs: 60_000 });
+  await wait(() => /✅ app ready: /.test(appStdout()), { timeoutMs: 120_000 });
 
   try {
     await page.goto(`http://localhost:${appServerPort}`, {

From 8f605396cf71acda465446eecf78c396362df0c7 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 21 Feb 2023 22:27:42 -0500
Subject: [PATCH 64/66] test(dev): fail immediately when stderr is written to

---
 integration/hmr-test.ts | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 240a61b1c3e..75e275b744f 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -194,13 +194,29 @@ test("HMR", async ({ page }) => {
   let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
   let devStdout = bufferize(dev.stdout!);
   let devStderr = bufferize(dev.stderr!);
-  await wait(() => /💿 Built in /.test(devStdout()), { timeoutMs: 120_000 });
+  await wait(
+    () => {
+      let stderr = devStderr();
+      if (stderr.length > 0) throw Error(stderr);
+      return /💿 Built in /.test(devStdout());
+    },
+    { timeoutMs: 120_000 }
+  );
 
   // spin up app server
   let app = execa("npm", ["run", "dev:app"], { cwd: projectDir });
   let appStdout = bufferize(app.stdout!);
   let appStderr = bufferize(app.stderr!);
-  await wait(() => /✅ app ready: /.test(appStdout()), { timeoutMs: 120_000 });
+  await wait(
+    () => {
+      let stderr = appStderr();
+      if (stderr.length > 0) throw Error(stderr);
+      return /✅ app ready: /.test(appStdout());
+    },
+    {
+      timeoutMs: 120_000,
+    }
+  );
 
   try {
     await page.goto(`http://localhost:${appServerPort}`, {

From 7068faec63f5a5e0acf74bd733ae3d01bb61f3fe Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 21 Feb 2023 22:57:18 -0500
Subject: [PATCH 65/66] test(dev): `cross-env` for `NODE_ENV` on windows

---
 integration/hmr-test.ts | 5 +++--
 package.json            | 1 +
 yarn.lock               | 9 ++++++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 75e275b744f..cbc320e307b 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -21,12 +21,13 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
           "private": true,
           "sideEffects": false,
           "scripts": {
-            "dev:remix": "NODE_ENV=development node ./node_modules/@remix-run/dev/dist/cli.js dev",
-            "dev:app": "NODE_ENV=development nodemon --watch build/ ./server.js"
+            "dev:remix": "cross-env NODE_ENV=development node ./node_modules/@remix-run/dev/dist/cli.js dev",
+            "dev:app": "cross-env NODE_ENV=development nodemon --watch build/ ./server.js"
           },
           "dependencies": {
             "@remix-run/node": "0.0.0-local-version",
             "@remix-run/react": "0.0.0-local-version",
+            "cross-env": "0.0.0-local-version",
             "express": "0.0.0-local-version",
             "isbot": "0.0.0-local-version",
             "nodemon": "0.0.0-local-version",
diff --git a/package.json b/package.json
index 720fe34b953..9c6f0e2ba3f 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "chalk": "^4.1.2",
     "cheerio": "^1.0.0-rc.3",
     "concurrently": "^7.0.0",
+    "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
     "cypress": "^9.6.0",
     "eslint": "^8.23.1",
diff --git a/yarn.lock b/yarn.lock
index 709ef0511c1..48cc641315f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4957,6 +4957,13 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz"
@@ -4977,7 +4984,7 @@ cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==

From 3121ea6317d60a89774c33b9aa72b50ab6afc7aa Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Tue, 21 Feb 2023 23:21:23 -0500
Subject: [PATCH 66/66] test(dev): revert timeout for windows ci

---
 integration/hmr-test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index cbc320e307b..1381038e0e4 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -201,7 +201,7 @@ test("HMR", async ({ page }) => {
       if (stderr.length > 0) throw Error(stderr);
       return /💿 Built in /.test(devStdout());
     },
-    { timeoutMs: 120_000 }
+    { timeoutMs: 10_000 }
   );
 
   // spin up app server
@@ -215,7 +215,7 @@ test("HMR", async ({ page }) => {
       return /✅ app ready: /.test(appStdout());
     },
     {
-      timeoutMs: 120_000,
+      timeoutMs: 10_000,
     }
   );