fix(fileCodeBlock): should support hmr (#2423)

Author: SoonIter

packages/core/src/node/mdx/loader.ts

@@ -36,6 +36,7 @@ export default async function mdxLoader(
         config,
         pluginDriver,
         routeService,
+        addDependency: this.addDependency,
       });
       callback(null, compileResult);
     }

packages/core/src/node/mdx/options.ts

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import { nodeTypes, type ProcessorOptions } from '@mdx-js/mdx';
+import type { Rspack } from '@rsbuild/core';
 import type { UserConfig } from '@rspress/shared';
 import rehypeShiki from '@shikijs/rehype';
 import rehypeExternalLinks from 'rehype-external-links';
@@ -24,9 +25,16 @@ export async function createMDXOptions(options: {
   config: UserConfig | null;
   routeService: RouteService | null;
   pluginDriver: PluginDriver | null;
+  addDependency?: Rspack.LoaderContext['addDependency'];
 }): Promise<ProcessorOptions> {
-  const { docDirectory, config, routeService, filepath, pluginDriver } =
-    options;
+  const {
+    docDirectory,
+    config,
+    routeService,
+    filepath,
+    pluginDriver,
+    addDependency,
+  } = options;
   const remarkLinkOptions = config?.markdown?.link;
   const format = path.extname(filepath).slice(1) as 'mdx' | 'md';
   const cleanUrls = config?.route?.cleanUrls ?? false;
@@ -58,7 +66,7 @@ export async function createMDXOptions(options: {
       remarkGFM,
       remarkToc,
       remarkContainerSyntax,
-      [remarkFileCodeBlock, { filepath }],
+      [remarkFileCodeBlock, { filepath, addDependency }],
       [
         remarkLink,
         {

packages/core/src/node/mdx/processor.ts

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import { createProcessor } from '@mdx-js/mdx';
+import type { Rspack } from '@rsbuild/core';
 import type { Header, UserConfig } from '@rspress/shared';
 import { extractTextAndId, loadFrontMatter } from '@rspress/shared/node-utils';
 
@@ -23,18 +24,28 @@ interface CompileOptions {
   config: UserConfig | null;
   routeService: RouteService | null;
   pluginDriver: PluginDriver | null;
+
+  addDependency?: Rspack.LoaderContext['addDependency']; // remarkFileCodeBlock hmr
 }
 
 async function compile(options: CompileOptions): Promise<string> {
-  const { source, filepath, docDirectory, config, routeService, pluginDriver } =
-    options;
+  const {
+    source,
+    filepath,
+    docDirectory,
+    config,
+    routeService,
+    pluginDriver,
+    addDependency,
+  } = options;
 
   const mdxOptions = await createMDXOptions({
     config,
     docDirectory,
     filepath,
     pluginDriver,
     routeService,
+    addDependency,
   });
   // Separate frontmatter and content in MDX source
   const { frontmatter, emptyLinesSource } = loadFrontMatter(

packages/core/src/node/mdx/remarkPlugins/fileCodeBlock.ts

@@ -1,5 +1,6 @@
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
+import type { Rspack } from '@rsbuild/core';
 import { logger } from '@rspress/shared/logger';
 import type { Root } from 'mdast';
 import picocolors from 'picocolors';
@@ -22,9 +23,10 @@ function parseFileFromMeta(meta: string | undefined): string {
   return '';
 }
 
-export const remarkFileCodeBlock: Plugin<[{ filepath: string }], Root> = ({
-  filepath,
-}) => {
+export const remarkFileCodeBlock: Plugin<
+  [{ filepath: string; addDependency?: Rspack.LoaderContext['addDependency'] }],
+  Root
+> = ({ filepath, addDependency }) => {
   return async tree => {
     const promiseList: Promise<void>[] = [];
     visit(tree, 'code', node => {
@@ -59,6 +61,8 @@ this usage is not allowed, please use below:
 
         const promise = readFile(resolvedFilePath, 'utf-8')
           .then(fileContent => {
+            // hmr in dev
+            addDependency?.(resolvedFilePath);
             node.value = fileContent;
           })
           .catch(e => {