remark-react-docgen-typescript

remark plugin to transform React component to Markdown by react-docgen-typescript

Getting Started

1yarn add -D remark-react-docgen-typescript

1import * as remark from 'remark';
2import * as reactDocgenTypescript from 'remark-react-docgen-typescript';
3import * as vfile from 'to-vfile';
4
5const doc = vfile.readSync('README.md');
6console.log(remark().use(reactDocgenTypescript).processSync(doc).contents);

The Component Column.tsx

1import * as React from "react";
2import { Component } from "react";
3
4/**
5 * Column properties.
6 */
7export interface IColumnProps {
8  /** prop1 description */
9  prop1?: string;
10  /** prop2 description */
11  prop2: number;
12  /**
13   * prop3 description
14   */
15  prop3: () => void;
16  /** prop4 description */
17  prop4: "option1" | "option2" | "option3";
18}
19
20/**
21 * Form column.
22 */
23export class Column extends Component<IColumnProps> {
24  render() {
25    return <div>Test</div>;
26  }
27}

Convert the following Markdown:

1# foo-components
2
3## API
4
5[Column](./Column.tsx "react-docgen-typescript:")

Into

1# foo-components
2
3## API
4
5### Column
6
7Form column.
8
9#### Props
10
11| Name               | Type                                | Default value | Description              |
12| ------------------ | ----------------------------------- | ------------- | ------------------------ |
13| prop1              | string                              | "red"         | prop1 description        |
14| prop2 _(required)_ | number                              |               | prop2 description        |
15| prop3 _(required)_ | () => void                          |               | prop3 description a \| b |
16| prop4 _(required)_ | "option1" \| "option2" \| "option3" |               | prop4 description 中文   |

Options

remark().use(reactDocgenTypescript[, options])

render

Custom document rendering

1import * as remark from 'remark';
2import * as reactDocgenTypescript from 'remark-react-docgen-typescript';
3import { ReactDocgenTypescriptRender } from 'remark-react-docgen-typescript/build/types';
4import * as vfile from 'to-vfile';
5import * as stringWidth from 'string-width';
6import { componentDocTableMdastBuilder } from 'react-docgen-typescript-markdown-render';
7
8const tableRender = (componentDoc: ComponentDoc): Table => componentDocTableMdastBuilder(componentDoc, [
9  { title: '属性', render: (vo) => u('strong', [u('text', vo.name)]) },
10  { title: '描述', render: (vo) => vo.description,},
11  { title: '类型', render: (vo) => u('inlineCode', vo.type.name) },
12  { title: '默认值', render: (vo) => vo.defaultValue ? vo.defaultValue.value : '-' },
13]);
14
15const render: ReactDocgenTypescriptRender = (docs) => u('root', docs.map(vo => tableRender(vo)));;
16
17const doc = vfile.readSync('README.md');
18
19const { contents } = remark()
20  .use({
21    settings: { stringLength: stringWidth }
22  })
23  .use(reactDocgenTypescript, { render })
24  .processSync(doc);
25console.log(contents);

License

Licensed under the APLv2. See the LICENSE file for details.