whale-component-docgen
根据package.json/md生成组件api文档,产生如下文档
# @alife/test-select
业务组件描述
## 安装方法
\`\`\`sh
$ tnpm install @alife/test-select --save
\`\`\`
## API
### Select
选择器
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------- | ---------------------------------------- | ------------------------------ | -------------------------- | ------ |
| dataSource _(必填)_ | 传入的数据源,可以动态渲染子项 | string\[] | | |
| onChange | Select发生改变时触发的回调 | (item: string) => void | | |
| readOnly | 是否只读,只读模式下可以展开弹层但不能选 | boolean | | false |
| size | 选择器尺寸 | "medium" \| "small" \| "large" | "medium", "small", "large" | medium |
| value | 当前值,用于受控模式 | string \| number | string, number | |
| icon | | ReactNode | | |
Install
$ tnpm install whale-component-docgen --save
Usage
parse
生成深层组件Props信息
import { whaleParse } from 'whale-component-docgen';
const p = 'Chart.tsx'; // path to component
whaleParse(p);
产生JSON数据
whale-component-docgen
根据包中的package.json
自动生成一份README.md
约定文件结构如下
List
├── src
│ └── index.tsx
├── package.json
└── README.md
whale-component-docgen README.md
将react-docgen-typescript:
链接转为Api文档表格,如下文件结构
List
├── src
│ └── index.tsx
└── README.md
<!-- README.md -->
# 自定义标题
描述
## Demo
xxx
## API
[Select](./src/index.ts "react-docgen-typescript:")
// src/index.tsx
import * as React from 'react';
export interface ISelectProps {
/**
* 传入的数据源,可以动态渲染子项
*/
dataSource: string[];
/**
* Select发生改变时触发的回调
*/
onChange?: (item: string) => void;
/**
* 是否只读,只读模式下可以展开弹层但不能选
*/
readOnly?: boolean;
/**
* 选择器尺寸
*/
size?: 'small' | 'medium' | 'large';
/**
* 当前值,用于受控模式
*/
value?: string | number;
}
/**
* 选择器
*/
class Select extends React.Component<ISelectProps> {
static defaultProps = {
readOnly: false,
size: 'medium',
};
render() {
return <div>Test</div>;
}
}
export default Select;
执行
$ whale-component-docgen README.md
将得到如下文档
# 自定义标题
描述
## Demo
xxx
\`\`\`tsx
// some demo
\`\`\`
## API
### Select
选择器
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------- | ---------------------------------------- | ------------------------------ | -------------------------- | ------ |
| dataSource _(必填)_ | 传入的数据源,可以动态渲染子项 | string\[] | | |
| onChange | Select发生改变时触发的回调 | (item: string) => void | | |
| readOnly | 是否只读,只读模式下可以展开弹层但不能选 | boolean | | false |
| size | 选择器尺寸 | "medium" \| "small" \| "large" | "medium", "small", "large" | medium |
| value | 当前值,用于受控模式 | string \| number | string, number | |
| icon | | ReactNode | | |