Use react-refresh ignored exports (#407)

package.json

@@ -54,7 +54,6 @@
       "serve-handler>path-to-regexp": ">=3.3.0"
     },
     "patchedDependencies": {
-      "@vitejs/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]"
     }
   }

packages/zudoku/package.json

@@ -183,7 +183,7 @@
     "@tanstack/react-query": "5.61.0",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.1",
+    "@vitejs/plugin-react": "4.3.4",
     "@zudoku/config": "workspace:*",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.4",

packages/zudoku/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,7 +1,7 @@
 import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
-import { type PropsWithChildren } from "react";
+import { type PropsWithChildren, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
@@ -15,6 +15,14 @@ import { cn } from "../../util/cn.js";
 import { Toc } from "./Toc.js";
 import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
+declare global {
+  interface Window {
+    __getReactRefreshIgnoredExports?: (args: {
+      id: string;
+    }) => string[] | undefined;
+  }
+}
+
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
     <Heading level={2} id={id} registerSidebarAnchor>
@@ -30,11 +38,13 @@ const MarkdownHeadings = {
 
 export const MdxPage = ({
   mdxComponent: MdxComponent,
+  file,
   frontmatter = {},
   defaultOptions,
   tableOfContents,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
+    file: string;
     mdxComponent: MDXImport["default"];
     defaultOptions?: MarkdownPluginDefaultOptions;
   }
@@ -57,6 +67,20 @@ export const MdxPage = ({
 
   const { prev, next } = usePrevNext();
 
+  useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      window.__getReactRefreshIgnoredExports = ({ id }) => {
+        if (!id.endsWith(file)) return;
+
+        return ["frontmatter", "tableOfContents"];
+      };
+
+      return () => {
+        window.__getReactRefreshIgnoredExports = undefined;
+      };
+    }
+  }, [file]);
+
   return (
     <div className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between">
       <Helmet>

packages/zudoku/src/lib/plugins/markdown/index.tsx

@@ -57,6 +57,7 @@ export const markdownPlugin = (
             return {
               element: (
                 <MdxPage
+                  file={file}
                   mdxComponent={Component}
                   {...props}
                   defaultOptions={defaultOptions}