vite-plugin-mdoc

mdoc for vite

A plugin enables you to import a Markdown file as various formats on your vite project inspirt by dumi.

Setup

npm i -D vite-plugin-react-mdoc

Config

const mdoc = require('vite-plugin-react-mdoc');

module.exports = {
  plugins: [mdoc(options)],
};

Then you can import front matter attributes from .md file as default.

# Hello world

```tsx
import React from 'react';

export default () => {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount((v) => v + 1)}>count: {count}</button>;
};
```

import { MdContent, demos } from './doc.md';

Type declarations

In TypeScript project, need to declare typedefs for .md file as you need.

declare module '*.md' {
  // When "Mode.React" is requested. VFC could take a generic like React.VFC<{ MyComponent: TypeOfMyComponent }>
  import React from 'react';
  type MDocPreviewerProps = {
    code: string;
    lang: string;
    key: string;
    dependencies: Record<
      string,
      {
        type: string;
        value: string;
        css: boolean;
      }
    >;
    meta: Record<string, any>;
    children: React.ReactNode;
  };

  const MdContent: React.VFC<{
    previewer?: (props: MDocPreviewerProps) => React.ReactNode;
  }>;
  const demos: ({ Component: React.VFC; key: string } & Record<string, any>)[];

  const frontmatter: Record<string, string>;

  const slugs: { depth: number; text: string; id: string }[];

  const filePath: string;

  // Modify below per your usage
  export { MdContent, demos, frontmatter, slugs, filePath };
}

Save as vite.d.ts for instance.

License

MIT

Current Tags