feat(plugin-mdx): add extensions option (#1560)

web-infra-dev · Feb 13, 2024 · 2e85275 · 2e85275
1 parent e5d5df3
commit 2e85275
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",