# @storybook/mdx2-csf

> MDXv2 to CSF webpack compiler and loader

Latest version **1.1.0** (published 2023-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook/mdx2-csf
pnpm add @storybook/mdx2-csf
yarn add @storybook/mdx2-csf
bun add @storybook/mdx2-csf
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-05-09 |
| First published | 2022-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Michael Shilman |
| Maintainers | thafryer, shaunlloyd, kylegach, tooppaaa, ndelangen, shilman, alexandrebodin, hypnosphi, danielduan, igor-dv, pksunkara, tmeasday, gongreg, domyen, usulpro, kylesuss, ghengeveld, pago, dandean, codebyalex, mrmckeb, dannyhw, winkervsbecks, rvasikarla, amalik2, lshadler, phated, yannbf, dylanpiercey, monkeyworks, darleendenno |

## Links

- npm: https://www.npmjs.com/package/@storybook/mdx2-csf
- Repository: https://github.com/storybookjs/csf-mdx2
- Homepage: https://github.com/storybookjs/csf-mdx2#readme
- Issues: https://github.com/storybookjs/csf-mdx2/issues
- npm.io page: https://npm.io/package/@storybook/mdx2-csf

## Recent versions

- 1.1.0 (latest) — 2023-05-09
- 1.1.0-next.1 (next) — 2023-04-28
- 1.0.1--canary.43.bdc8283.0 (canary) — 2023-04-26
- 1.1.0-next.0 — 2023-04-26
- 1.0.1--canary.43.72621c5.0 — 2023-04-26
- 1.0.0 — 2023-04-03
- 1.0.0-next.8 — 2023-04-03
- 1.0.0-next.7 — 2023-03-31
- 0.0.5-canary.38.8dab49f.0 — 2023-03-31
- 1.0.0-next.6 — 2023-03-16
- 0.0.5-canary.37.6aef72a.0 — 2023-03-16
- 0.0.5-canary.4028385.0 — 2023-03-15
- 1.0.0-next.5 — 2023-01-21
- 0.0.4 — 2023-01-16
- 1.0.0-next.4 — 2023-01-06
- … 48 more at https://npm.io/package/@storybook/mdx2-csf/versions

## README

## @storybook/mdx2-csf

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

For example, the following input:

```mdx
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):

```js
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:

```js
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](https://mdxjs.com/packages/mdx/#api)

For example, to add [GFM support](https://mdxjs.com/guides/gfm/):

```js
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](CONTRIBUTING.md) to get started,
  or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you

## License

[MIT](https://github.com/storybookjs/csf-mdx2/blob/main/LICENSE)

---
_Source: https://npm.io/package/@storybook/mdx2-csf · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._