Storybook's mdx1-csf is a compiler that turns MDXv1 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>;This library exports three functions to compile MDX: compile, compileSync, and createCompiler.
Asynchronously compile a string:
import { compile } from '@storybook/mdx1-csf';
const code = '# hello\n\nworld';
const output = await compile(code);Synchronously compile a string:
import { compileSync } from '@storybook/mdx1-csf';
const code = '# hello\n\nworld';
const output = compileSync(code);Create a compiler plugin for for MDXv1:
import mdx from '@mdx-js/mdx';
import { createCompiler } from '@storybook/mdx1-csf';
const code = '# hello\n\nworld';
mdx.sync(code, { compilers: [createCompiler()] });In addition, this library supports a simple Webpack loader that mirrors MDXv1's loader, but adds Webpack5 support.
module.exports = {
module: {
rules: [
{
test: /\.(stories|story)\.mdx$/,
use: [
{
loader: require.resolve('@storybook/mdx1-csf/loader'),
options: {},
},
],
},
],
},
};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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent