Skip to content

Commit

Permalink
Support customization of MDX plugins
Browse files Browse the repository at this point in the history
  • Loading branch information
joshwooding committed Jan 6, 2023
1 parent 11d7b2e commit 504049f
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 12 deletions.
1 change: 1 addition & 0 deletions code/addons/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ module.exports = {
options: {
jsxOptions: {},
csfPluginOptions: null,
mdxPluginOptions: {},
transcludeMarkdown: true,
},
},
Expand Down
12 changes: 9 additions & 3 deletions code/addons/docs/src/preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 { loadCsf } from '@storybook/csf-tools';

async function webpack(
Expand All @@ -26,6 +26,7 @@ async function webpack(
csfPluginOptions: CsfPluginOptions | null;
transcludeMarkdown: boolean;
jsxOptions?: JSXOptions;
mdxPluginOptions?: CompileOptions;
} /* & Parameters<
typeof createCompiler
>[0] */
Expand All @@ -41,13 +42,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,
});
Expand Down
19 changes: 14 additions & 5 deletions code/lib/builder-vite/src/plugins/mdx-plugin.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
import type { Options, StorybookConfig } from '@storybook/types';
import type { Options, Preset, StorybookConfig } from '@storybook/types';
import type { Plugin } from 'vite';
import { createFilter } from 'vite';

const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');

type AddonWithOptions = Exclude<Preset, string>;
function getAddonOptions(addons: StorybookConfig['addons'], name: string): Record<string, any> {
return (
addons?.find(
(addon): addon is AddonWithOptions => typeof addon !== 'string' && addon.name === name
)?.options ?? {}
);
}

/**
* Storybook uses two different loaders when dealing with MDX:
*
Expand All @@ -16,9 +25,7 @@ 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 } = getAddonOptions(addons, '@storybook/addon-docs');

return {
name: 'storybook:mdx-plugin',
Expand All @@ -29,10 +36,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(
Expand Down
6 changes: 3 additions & 3 deletions code/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6763,9 +6763,9 @@ __metadata:
linkType: soft

"@storybook/mdx2-csf@npm:next":
version: 1.0.0-next.3
resolution: "@storybook/mdx2-csf@npm:1.0.0-next.3"
checksum: b56a458570fbe8cfdd67e2626a845b854e01b9160dc9dbcf26ed61f01b9187dbbb53c1cc4e3303d3fdb58dce7a47caf9ba2c5f83afa3284ca22ba25fecadd15c
version: 1.0.0-next.4
resolution: "@storybook/mdx2-csf@npm:1.0.0-next.4"
checksum: 27da0583b66cc83e38753499175b2b64261da2e3bdf2d954506f58acd65c1d870ed5291425fd7a953c68f28269fee084dac44c448e52de8e2ca35bcb7ad27763
languageName: node
linkType: hard

Expand Down
3 changes: 2 additions & 1 deletion docs/essentials/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,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 |
Expand Down

0 comments on commit 504049f

Please sign in to comment.