feat(remix-dev/vite): support HMR for MDX

.changeset/four-bottles-bathe.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+feat: support HMR for MDX

integration/vite-dev-test.ts

@@ -164,6 +164,10 @@ test.describe("Vite dev", () => {
           ## MDX Route
 
           <MdxComponent />
+
+          ### HMR updated: no
+
+          <input />
         `,
       },
     });
@@ -297,6 +301,23 @@ test.describe("Vite dev", () => {
     let mdxContent = page.locator("[data-mdx-route]");
     await expect(mdxContent).toHaveText("MDX route content from loader");
 
+    // verify HMR
+    let hmrStatus = page.locator("h3");
+    await expect(hmrStatus).toHaveText("HMR updated: no");
+
+    let input = page.locator("input");
+    await input.type("stateful");
+
+    let filepath = path.join(projectDir, "app/routes/mdx.mdx");
+    let src = await fs.readFile(filepath, "utf8");
+    await fs.writeFile(
+      filepath,
+      src.replace("HMR updated: no", "HMR updated: yes"),
+      "utf8"
+    );
+    await expect(hmrStatus).toHaveText("HMR updated: yes");
+    await expect(input).toHaveValue("stateful");
+
     expect(pageErrors).toEqual([]);
   });
 });

packages/remix-dev/vite/plugin.ts

@@ -835,7 +835,7 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
         if (id.includes("/node_modules/")) return;
 
         let [filepath] = id.split("?");
-        if (!/.[tj]sx?$/.test(filepath)) return;
+        if (!/\.(mdx|[tj]sx?)$/.test(filepath)) return;
 
         let devRuntime = "react/jsx-dev-runtime";
         let ssr = options?.ssr === true;