Package - @storybook/mdx2-csf

@storybook/mdx2-csf

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

For example, the following input:

import { Meta, Story } from '@storybook/addon-docs';

<Meta title="atoms/Button" />

<Story name="Bar">
  <Button>hello</Button>
</Story>

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

export default {
  title: 'atoms/Button',
};

export 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:

import { compile } from '@storybook/mdx2-csf';

const code = '# hello\n\nworld';
const 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:

import remarkGfm from 'remark-gfm';

module.exports = {
  module: {
    rules: [
      {
        test: /\.(stories|story)\.mdx$/,
        use: [
          {
            loader: require.resolve('@storybook/mdx2-csf/loader'),
            options: {
              skipCsf: false,
              mdxCompileOptions: {
                remarkPlugins: [remarkGfm],
              },
            },
          },
        ],
      },
    ],
  },
};

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

Current Tags

1.0.1--canary.43.bdc8283.0 ... canary (3 years ago)
1.1.0 ... latest (3 years ago)
1.1.0-next.1 ... next (3 years ago)

63 Versions

1.1.0 ... 3 years ago
1.1.0-next.1 ... 3 years ago
1.1.0-next.0 ... 3 years ago
1.0.1--canary.43.bdc8283.0 ... 3 years ago
1.0.1--canary.43.72621c5.0 ... 3 years ago
1.0.0 ... 3 years ago
1.0.0-next.8 ... 3 years ago
1.0.0-next.7 ... 3 years ago
0.0.5-canary.38.8dab49f.0 ... 3 years ago
1.0.0-next.6 ... 3 years ago
0.0.5-canary.37.6aef72a.0 ... 3 years ago
0.0.5-canary.4028385.0 ... 3 years ago
1.0.0-next.5 ... 3 years ago
0.0.4 ... 3 years ago
1.0.0-next.4 ... 3 years ago
0.0.4-canary.87960b9.0 ... 3 years ago
0.0.4-canary.5897107.0 ... 3 years ago
1.0.0-next.3 ... 3 years ago
0.0.4-canary.ab2d92c.0 ... 3 years ago
1.0.0-next.2 ... 3 years ago
0.0.4-canary.32.e03c3aa.0 ... 3 years ago
0.0.4-canary.503384f.0 ... 3 years ago
1.0.0-next.1 ... 3 years ago
0.0.4-canary.31.46da497.0 ... 3 years ago
0.0.4-canary.31.7cd0a68.0 ... 3 years ago
1.0.0-next.0 ... 3 years ago
0.0.4-canary.30.c978d7f.0 ... 3 years ago
0.1.0-next.8 ... 3 years ago
0.0.4-canary.28.4b5f9fe.0 ... 3 years ago
0.1.0-next.7 ... 3 years ago
0.0.4-canary.27.b47ca0a.0 ... 3 years ago
0.0.4-canary.27.6b5fc58.0 ... 3 years ago
0.0.4-canary.27.40bfda0.0 ... 3 years ago
0.0.4-canary.27.61fd4a6.0 ... 3 years ago
0.0.4-canary.27.3388881.0 ... 3 years ago
0.1.0-next.6 ... 3 years ago
0.1.0-next.5 ... 3 years ago
0.0.4-canary.25.7adf785.0 ... 3 years ago
0.0.4-canary.25.2de60c7.0 ... 3 years ago
0.0.4-canary.3b5b158.0 ... 3 years ago
0.1.0-next.4 ... 3 years ago
0.0.4-canary.23.5394b4c.0 ... 3 years ago
0.0.4-canary.2fe1578.0 ... 3 years ago
0.1.0-next.3 ... 3 years ago
0.0.4-canary.d64a8c0.0 ... 3 years ago
0.1.0-next.2 ... 3 years ago
0.0.4-canary.20.5648a54.0 ... 3 years ago
0.0.4-canary.20.b3f2a2f.0 ... 3 years ago
0.1.0-next.1 ... 3 years ago
0.1.0-next.0 ... 3 years ago
0.0.4-canary.15.78a83b5.0 ... 4 years ago
0.0.4-canary.14.04ffbe8.0 ... 4 years ago
0.0.4-canary.21ac716.0 ... 4 years ago
0.0.4-canary.7.37514ba.0 ... 4 years ago
0.0.4-canary.6.7d622da.0 ... 4 years ago
0.0.3 ... 4 years ago
0.0.3-canary.f504c97.0 ... 4 years ago
0.0.2 ... 4 years ago
0.0.2-canary.facc4f7.0 ... 4 years ago
0.0.1 ... 4 years ago
0.0.1-canary.1.00947fc.0 ... 4 years ago
0.0.1-canary.1.357011b.0 ... 4 years ago
0.0.1-canary.1.838a6ca.0 ... 4 years ago