GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 23:01:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #20116 from storybookjs/support-customization-of-mdx-plugins

Browse Source 
Addon-docs: Fix customization of MDX plugins
This commit is contained in:
Michael Shilman 2023-02-03 00:37:23 +08:00 committed by GitHub
commit 3d4dfa4df6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
code/addons/docs/README.md
View File

@ -145,6 +145,7 @@ export default {
options: {
jsxOptions: {},
csfPluginOptions: null,
mdxPluginOptions: {},
transcludeMarkdown: true,
},
},

12
code/addons/docs/src/preset.ts
View File

@ -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';
@ -28,6 +28,7 @@ async function webpack(
sourceLoaderOptions: any;
csfPluginOptions: CsfPluginOptions | null;
jsxOptions?: JSXOptions;
mdxPluginOptions?: CompileOptions;
} /* & Parameters<
typeof createCompiler
>[0] */
@ -42,13 +43,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,
});

14
code/lib/builder-vite/src/plugins/mdx-plugin.ts
View File

@ -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(

3
docs/essentials/introduction.md
View File

@ -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 |