# @storybook/mdx1-csf

> MDXv1 to CSF webpack compiler and loader

Latest version **1.0.0** (published 2023-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook/mdx1-csf
pnpm add @storybook/mdx1-csf
yarn add @storybook/mdx1-csf
bun add @storybook/mdx1-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.0.0 |
| Published | 2023-04-03 |
| First published | 2022-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 4.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Michael Shilman |
| Maintainers | 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/mdx1-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/mdx1-csf

## Dependencies (2)

- [@mdx-js/mdx](https://npm.io/package/@mdx-js/mdx.md) ^1.6.22
- [@mdx-js/react](https://npm.io/package/@mdx-js/react.md) ^1.6.22

## Recent versions

- 1.0.0 (latest) — 2023-04-03
- 1.0.1-next.0 (next) — 2023-04-26
- 1.0.1--canary.26.47c2c44.0 (canary) — 2023-04-26
- 1.0.0-next.3 — 2023-03-31
- 0.0.5--canary.22.909f1b7.0 — 2023-03-31
- 0.0.5--canary.22.be941ab.0 — 2023-03-31
- 1.0.0-next.2 — 2023-03-16
- 0.0.5--canary.21.beb53e0.0 — 2023-03-16
- 0.0.5--canary.21.74eba40.0 — 2023-03-15
- 1.0.0-next.1 — 2023-02-13
- 0.0.5--canary.20.d7a3376.0 — 2023-02-13
- 1.0.0-next.0 — 2023-01-25
- 0.0.5--canary.19.89e7fd1.0 — 2023-01-23
- 0.0.5--canary.19.47a53e5.0 — 2023-01-23
- 0.0.5--canary.19.b1eabf8.0 — 2023-01-23
- … 15 more at https://npm.io/package/@storybook/mdx1-csf/versions

## README

## @storybook/mdx1-csf

Storybook's `mdx1-csf` is a compiler that turns MDXv1 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 three functions to compile MDX: `compile`, `compileSync`, and `createCompiler`.

### compile

Asynchronously compile a string:

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

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

### compileSync

Synchronously compile a string:

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

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

### createCompiler

Create a compiler plugin for for MDXv1:

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

```js
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](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-mdx1/blob/main/LICENSE)

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