Support customization of MDX plugins

storybookjs · Jan 26, 2023 · a9f388e · a9f388e
1 parent bbc8f9b
commit a9f388e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md
@@ -145,6 +145,7 @@ module.exports = {
       options: {
         jsxOptions: {},
         csfPluginOptions: null,
+        mdxPluginOptions: {},
         transcludeMarkdown: true,
       },
     },

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
@@ -5,7 +5,7 @@ import { dedent } from 'ts-dedent';
 
 import type { IndexerOptions, StoryIndexer, DocsOptions, Options } from '@storybook/types';
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
-import type { JSXOptions } from '@storybook/mdx2-csf';
+import type { JSXOptions, CompileOptions } from '@storybook/mdx2-csf';
 import { global } from '@storybook/global';
 import { loadCsf } from '@storybook/csf-tools';
 import { logger } from '@storybook/node-logger';
@@ -29,6 +29,7 @@ async function webpack(
     csfPluginOptions: CsfPluginOptions | null;
     transcludeMarkdown: boolean;
     jsxOptions?: JSXOptions;
+    mdxPluginOptions?: CompileOptions;
   } /* & Parameters<
       typeof createCompiler
     >[0] */
@@ -44,13 +45,18 @@ async function webpack(
     sourceLoaderOptions = null,
     configureJsx,
     mdxBabelOptions,
+    mdxPluginOptions = {},
   } = options;
 
-  const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
+  const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
     skipCsf: true,
+    ...mdxPluginOptions,
     mdxCompileOptions: {
       providerImportSource: '@storybook/addon-docs/mdx-react-shim',
-      remarkPlugins: [remarkSlug, remarkExternalLinks],
+      ...mdxPluginOptions.mdxCompileOptions,
+      remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
+        mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
+      ),
     },
     jsxOptions,
   });

diff --git a/code/lib/builder-vite/src/plugins/mdx-plugin.ts b/code/lib/builder-vite/src/plugins/mdx-plugin.ts
@@ -1,4 +1,4 @@
-import type { Options, StorybookConfig } from '@storybook/types';
+import type { Options } from '@storybook/types';
 import type { Plugin } from 'vite';
 import { createFilter } from 'vite';
 
@@ -15,10 +15,10 @@ const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith
 export async function mdxPlugin(options: Options): Promise<Plugin> {
   const include = /\.mdx?$/;
   const filter = createFilter(include);
-  const addons = await options.presets.apply<StorybookConfig['addons']>('addons', []);
-  const docsOptions =
-    // @ts-expect-error - not sure what type to use here
-    addons.find((a) => [a, a.name].includes('@storybook/addon-docs'))?.options ?? {};
+  const { mdxPluginOptions, jsxOptions } = await options.presets.apply<Record<string, any>>(
+    'options',
+    {}
+  );
 
   return {
     name: 'storybook:mdx-plugin',
@@ -29,10 +29,12 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
       const { compile } = await import('@storybook/mdx2-csf');
 
       const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
+        ...mdxPluginOptions,
         mdxCompileOptions: {
           providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+          ...mdxPluginOptions?.mdxCompileOptions,
         },
-        jsxOptions: docsOptions.jsxOptions,
+        jsxOptions,
       });
 
       const code = String(

diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md
@@ -87,12 +87,13 @@ Below is an abridged configuration and table with all the available options for
 <!-- prettier-ignore-end -->
 
 | Addon                          | Configuration element | Description                                                                                                                                      |
-| ------------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ------------------------------ |-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
 | `@storybook/addon-actions`     | N/A                   | N/A                                                                                                                                              |
 | `@storybook/addon-viewport`    | N/A                   | N/A                                                                                                                                              |
 | `@storybook/addon-docs`        | `configureJSX`        | Enables JSX support in MDX for projects that aren't configured to handle the format. <br/> `configureJSX: true`                                  |
 |                                | `babelOptions`        | Provides additional Babel configurations for file transpilation. <br/> `babelOptions: { plugins: [], presets: []}` <br/> Extends `configureJSX`. |
 |                                | `csfPluginOptions`    | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null`                                                        |
+|                                | `mdxPluginOptions`    | Provides additional configuration for Storybook's MDX plugin.                                                   |
 |                                | `transcludeMarkdown`  | Enables Markdown file support into MDX and render them as components. <br/> `transcludeMarkdown: true`                                           |
 | `@storybook/addon-controls`    | N/A                   | N/A                                                                                                                                              |
 | `@storybook/addon-backgrounds` | N/A                   | N/A                                                                                                                                              |