Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Support customization of MDX plugins
Browse files Browse the repository at this point in the history
joshwooding committed Jan 26, 2023
1 parent bbc8f9b commit 3b38180
Showing 4 changed files with 18 additions and 10 deletions.
1 change: 1 addition & 0 deletions code/addons/docs/README.md
Original file line number Diff line number Diff line change
@@ -145,6 +145,7 @@ module.exports = {
options: {
jsxOptions: {},
csfPluginOptions: null,
mdxPluginOptions: {},
transcludeMarkdown: true,
},
},
12 changes: 9 additions & 3 deletions code/addons/docs/src/preset.ts
Original file line number Diff line number Diff line change
@@ -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,
});
12 changes: 6 additions & 6 deletions code/lib/builder-vite/src/plugins/mdx-plugin.ts
Original file line number Diff line number Diff line change
@@ -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,8 @@ 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', {});
console.log({ mdxPluginOptions });

return {
name: 'storybook:mdx-plugin',
@@ -29,10 +27,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(
3 changes: 2 additions & 1 deletion docs/essentials/introduction.md
Original file line number Diff line number Diff line change
@@ -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 |

0 comments on commit 3b38180

Please sign in to comment.