@storybook/mdx2-csf

Storybook's mdx2-csf is a compiler that turns MDXv2 input into CSF output.

For example, the following input:

1import { Meta, Story } from '@storybook/addon-docs';
2
3<Meta title="atoms/Button" />
4
5<Story name="Bar">
6  <Button>hello</Button>
7</Story>

Might be transformed into the following CSF (over-simplified):

1export default {
2  title: 'atoms/Button',
3};
4
5export const Bar = () => <Button>hello</Button>;

API

This library exports an async function to compile MDX, compile. It does not support a synchronous compiler because it uses asynchronous imports to bridge the ESM/CJS gap. The underlying MDXv2 libraries only support pure ESM, but this library is used in CJS environments.

compile

Asynchronously compile a string:

1import { compile } from '@storybook/mdx2-csf';
2
3const code = '# hello\n\nworld';
4const output = await compile(code);

Loader

In addition, this library supports a simple Webpack loader that mirrors MDXv1's loader, but adds Webpack5 support. It doesn't use MDXv2's loader because it is prohibitively complex, and we want this to be interchangeable with the @storybook/mdx1-csf's loader which is also based on the MDXv1 loader.

The loader takes two options:

• skipCsf don't generate CSF stories for the MDX file
• mdxCompileOptions full options for the MDX compile function

For example, to add GFM support:

1import remarkGfm from 'remark-gfm';
2
3module.exports = {
4  module: {
5    rules: [
6      {
7        test: /\.(stories|story)\.mdx$/,
8        use: [
9          {
10            loader: require.resolve('@storybook/mdx2-csf/loader'),
11            options: {
12              skipCsf: false,
13              mdxCompileOptions: {
14                remarkPlugins: [remarkGfm],
15              },
16            },
17          },
18        ],
19      },
20    ],
21  },
22};

Contributing

We welcome contributions to Storybook!

• 📥 Pull requests and 🌟 Stars are always welcome.
• Read our contributing guide to get started, or find us on Discord, we will take the time to guide you

License

MIT