MDX: Fix include hot-reload issues

fuma-nama · Dec 22, 2024 · 3445182 · 3445182
1 parent c49a485
commit 3445182
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 34 deletions.
diff --git a/.changeset/tiny-pillows-smell.md b/.changeset/tiny-pillows-smell.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-mdx': patch
+---
+
+Fix `include` hot-reload issues
diff --git a/apps/docs/content/docs/ui/page-conventions.mdx b/apps/docs/content/docs/ui/page-conventions.mdx
@@ -1,6 +1,6 @@
 ---
 title: Organizing Pages
 description: Organize documents with file-system based routing
-_mdx:
-  mirror: ../headless/page-conventions.mdx
 ---
+
+<include>../headless/page-conventions.mdx</include>
diff --git a/packages/mdx/src/loader-mdx.ts b/packages/mdx/src/loader-mdx.ts
@@ -19,15 +19,6 @@ export interface Options {
   };
 }
 
-interface InternalFrontmatter {
-  _mdx?: {
-    /**
-     * Mirror another MDX file
-     */
-    mirror?: string;
-  };
-}
-
 export interface MetaFile {
   path: string;
   data: {
@@ -116,16 +107,6 @@ export default async function loader(
     frontmatter = result.data as Record<string, unknown>;
   }
 
-  const props = (matter.data as InternalFrontmatter)._mdx ?? {};
-  if (props.mirror) {
-    const mirrorPath = path.resolve(path.dirname(filePath), props.mirror);
-    this.addDependency(mirrorPath);
-
-    matter.content = await fs
-      .readFile(mirrorPath)
-      .then((res) => grayMatter(res.toString()).content);
-  }
-
   let timestamp: number | undefined;
   if (config.global?.lastModifiedTime === 'git')
     timestamp = (await getGitTimestamp(filePath))?.getTime();

diff --git a/packages/mdx/src/map/generate.ts b/packages/mdx/src/map/generate.ts
@@ -91,14 +91,14 @@ async function getCollectionFiles(
         absolute: true,
       });
 
-      result.forEach((item) => {
-        if (getTypeFromPath(item) !== collection.type) return;
+      for (const item of result) {
+        if (getTypeFromPath(item) !== collection.type) continue;
 
         files.set(item, {
           path: path.relative(dir, item),
           absolutePath: item,
         });
-      });
+      }
     }),
   );
 

diff --git a/packages/mdx/src/utils/build-mdx.ts b/packages/mdx/src/utils/build-mdx.ts
@@ -4,7 +4,7 @@ import type { Transformer } from 'unified';
 import { visit } from 'unist-util-visit';
 import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
 import type { Literal } from 'mdast';
-import { readFileSync } from 'node:fs';
+import * as fs from 'node:fs/promises';
 import * as path from 'node:path';
 import matter from 'gray-matter';
 
@@ -41,8 +41,19 @@ function cacheKey(group: string, format: string): string {
   return `${group}:${format}`;
 }
 
-function remarkInclude(this: Processor, options: CompilerOptions): Transformer {
-  return (tree, file) => {
+declare module 'vfile' {
+  interface DataMap {
+    /**
+     * The compiler object from loader
+     */
+    _compiler?: CompilerOptions;
+  }
+}
+
+function remarkInclude(this: Processor): Transformer {
+  return async (tree, file) => {
+    const queue: Promise<void>[] = [];
+
     visit(tree, 'mdxJsxFlowElement', (node: MdxJsxFlowElement) => {
       if (node.name === 'include') {
         const child = node.children.at(0) as Literal | undefined;
@@ -52,15 +63,22 @@ function remarkInclude(this: Processor, options: CompilerOptions): Transformer {
 
         const targetPath = path.resolve(path.dirname(file.path), specifier);
 
-        const content = readFileSync(targetPath);
-        const parsed = this.parse(matter(content).content);
+        queue.push(
+          fs.readFile(targetPath).then((content) => {
+            const parsed = this.parse(matter(content).content);
 
-        options.addDependency(targetPath);
-        Object.assign(node, parsed);
+            if (file.data._compiler) {
+              file.data._compiler.addDependency(targetPath);
+            }
+            Object.assign(node, parsed);
+          }),
+        );
       }
 
       return 'skip';
     });
+
+    await Promise.all(queue);
   };
 }
 
@@ -94,9 +112,8 @@ export function buildMDX(
         development: process.env.NODE_ENV === 'development',
         ...rest,
         remarkPlugins: [
-          options._compiler
-            ? ([remarkInclude, options._compiler] as any)
-            : null,
+          // @ts-expect-error -- processor
+          remarkInclude,
           ...(rest.remarkPlugins ?? []),
         ],
         format,
@@ -114,6 +131,7 @@ export function buildMDX(
     data: {
       ...data,
       frontmatter,
+      _compiler: options._compiler,
     },
   });
 }