From 2e852756b3451f9137e373cbbd1979bcf9c6e28e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan.jait@bytedance.com>
Date: Tue, 13 Feb 2024 16:42:27 +0800
Subject: [PATCH] feat(plugin-mdx): add extensions option (#1560)

---
 .../docs/en/plugins/list/plugin-mdx.mdx       | 15 ++++++++++++++
 .../docs/zh/plugins/list/plugin-mdx.mdx       | 15 ++++++++++++++
 packages/plugin-mdx/src/index.ts              | 20 +++++++++++++++++--
 .../tests/__snapshots__/index.test.ts.snap    |  4 ++--
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/packages/document/docs/en/plugins/list/plugin-mdx.mdx b/packages/document/docs/en/plugins/list/plugin-mdx.mdx
index caceaf498f..29b6f0f750 100644
--- a/packages/document/docs/en/plugins/list/plugin-mdx.mdx
+++ b/packages/document/docs/en/plugins/list/plugin-mdx.mdx
@@ -50,3 +50,18 @@ pluginMdx({
   },
 });
 ```
+
+### extensions
+
+Specify the file extensions to be compiled with MDX loader, including .md files and .mdx files by default.
+
+- **Type:** `string[]`
+- **Default:** `['.mdx', '.md']`
+
+For example, to only compile .mdx files, you can set it as:
+
+```ts
+pluginMdx({
+  extensions: ['.mdx'],
+});
+```
diff --git a/packages/document/docs/zh/plugins/list/plugin-mdx.mdx b/packages/document/docs/zh/plugins/list/plugin-mdx.mdx
index d996ef614a..8253b9e230 100644
--- a/packages/document/docs/zh/plugins/list/plugin-mdx.mdx
+++ b/packages/document/docs/zh/plugins/list/plugin-mdx.mdx
@@ -50,3 +50,18 @@ pluginMdx({
   },
 });
 ```
+
+### extensions
+
+指定使用 MDX loader 编译的文件后缀，默认包括 .md 文件和 .mdx 文件。
+
+- **类型：** `string[]`
+- **默认值：** `['.mdx', '.md']`
+
+比如仅编译 .mdx 文件，可以设置为：
+
+```ts
+pluginMdx({
+  extensions: ['.mdx'],
+});
+```
diff --git a/packages/plugin-mdx/src/index.ts b/packages/plugin-mdx/src/index.ts
index e53250c177..c48c6e5aa3 100644
--- a/packages/plugin-mdx/src/index.ts
+++ b/packages/plugin-mdx/src/index.ts
@@ -7,14 +7,30 @@ export type PluginMdxOptions = {
    * @see https://npmjs.com/package/@mdx-js/loader#api
    */
   mdxLoaderOptions?: MdxLoaderOptions;
+  /**
+   * @default ['.mdx', '.md']
+   */
+  extensions?: string[];
 };
 
+function createRegExp(exts: string[]): RegExp {
+  const matcher = exts.map((ext) => ext.slice(1)).join('|');
+  return new RegExp(
+    exts.length === 1 ? `\\.${matcher}$` : `\\.(?:${matcher})$`,
+    'i',
+  );
+}
+
 export const pluginMdx = (options: PluginMdxOptions = {}): RsbuildPlugin => ({
   name: 'rsbuild:mdx',
 
   setup(api) {
     api.modifyBundlerChain((chain, { CHAIN_ID }) => {
-      chain.resolve.extensions.add('.mdx');
+      const { extensions = ['.mdx', '.md'] } = options;
+
+      extensions.forEach((ext) => {
+        chain.resolve.extensions.add(ext);
+      });
 
       const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
       const mdxRule = chain.module.rule('mdx');
@@ -30,7 +46,7 @@ export const pluginMdx = (options: PluginMdxOptions = {}): RsbuildPlugin => ({
         return false;
       });
 
-      const MDX_REGEXP = /\.mdx?$/;
+      const MDX_REGEXP = createRegExp(extensions);
 
       mdxRule
         .test(MDX_REGEXP)
diff --git a/packages/plugin-mdx/tests/__snapshots__/index.test.ts.snap b/packages/plugin-mdx/tests/__snapshots__/index.test.ts.snap
index 2d0dfc6a30..926844f490 100644
--- a/packages/plugin-mdx/tests/__snapshots__/index.test.ts.snap
+++ b/packages/plugin-mdx/tests/__snapshots__/index.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`plugin-mdx > should allow to configure mdx loader 1`] = `
 {
-  "test": /\\\\\\.mdx\\?\\$/,
+  "test": /\\\\\\.\\(\\?:mdx\\|md\\)\\$/i,
   "use": [
     {
       "loader": "builtin:swc-loader",
@@ -47,7 +47,7 @@ exports[`plugin-mdx > should allow to configure mdx loader 1`] = `
 
 exports[`plugin-mdx > should register mdx loader correctly 1`] = `
 {
-  "test": /\\\\\\.mdx\\?\\$/,
+  "test": /\\\\\\.\\(\\?:mdx\\|md\\)\\$/i,
   "use": [
     {
       "loader": "builtin:swc-loader",