dumi api转换插件

从现有文件中导入代码片段

Usage

Install

npm install @alibot/dumi-plugin-api-parser --save-dev

Apply

// .dumirc.ts
export default {
  plugins: ['@alibot/dumi-plugin-api-parser'],
  // 自定义配置，可选
  'third:apiParser': {
    // 自定义文案标签，支持将中英文拼接成html标签，假如带html标签，则自己控制展示处理
    intlText: '<div><span class="lang-en">{en}</span><span class="lang-cn">{cn}</span></div>',
    // 自定义中文文案
    // langCn: {
    //   parameter: '参数',
    //   attribute: '属性名',
    //   describe: '描述',
    //   type: '类型',
    //   isRequired: '是否必填',
    //   default: '默认值',
    //   return: '返回值',
    //   required: '(必填)',
    // },
    // 自定义英文文案
    // langEn: {
    //   parameter: 'parameter',
    //   attribute: 'attribute',
    //   describe: 'desc',
    //   type: 'Type',
    //   isRequired: 'Is Required?',
    //   default: 'Default',
    //   return: 'Return',
    //   required: '(Required)',
    // }
  },
};

Exampled

<ApiParser source="./index.tsx" id="interfaceName"></ApiParser>

在dumi的md文件中，增加如上内容，则可以解析interface、函数等定义并生成markdown表格表格

开发调试

1. dumi dev命令启动dumi，可以查看展示实例
2. DEBUG=api_parser dumi dev可以看dumi执行过程中log
3. 可以执行单元测试，通过debug