Skip to content

mindlercare/mdx1-csf

 
 

Repository files navigation

@storybook/mdx1-csf

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

API

This library exports three functions to compile MDX: compile, compileSync, and createCompiler.

compile

Asynchronously compile a string:

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

const code = '# hello\n\nworld';
const output = await compile(code);

compileSync

Synchronously compile a string:

import { compileSync } from '@storybook/mdx1-csf';

const code = '# hello\n\nworld';
const output = compileSync(code);

createCompiler

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()] });

Loader

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: {},
          },
        ],
      },
    ],
  },
};

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

About

MDX to CSF compiler using MDXv1

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 83.7%
  • MDX 9.1%
  • JavaScript 3.8%
  • CSS 3.3%
  • Shell 0.1%