feat: extract API component as a plugin

package.json

@@ -32,6 +32,7 @@
     "@types/jest": "^24.0.13",
     "@umijs/fabric": "^2.2.2",
     "@umijs/plugin-analytics": "^0.2.2",
+    "@umijs/plugin-dumi-api": "1.0.0",
     "@umijs/test": "^3.0.3",
     "antd": "^4.8.2",
     "babel-plugin-import": "^1.13.0",

packages/plugin-dumi-api/.fatherrc.ts

@@ -0,0 +1,3 @@
+export default {
+  disableTypeCheck: false,
+};

packages/plugin-dumi-api/CONTRIBUTING.md

@@ -0,0 +1,40 @@
+# Contributing to plugin
+
+## Set up
+
+Install dev deps after git clone the repo.
+
+```bash
+# npm is not allowed.
+$ yarn
+```
+
+## Build
+
+Transform with babel and rollup.
+
+```bash
+$ yarn build
+
+# Build and monitor file changes
+$ yarn build --watch
+
+```
+
+## Dev Plugin
+
+```bash
+# This Step must only be executed in Build
+$ yarn dev
+```
+
+## Debug
+
+TODO
+
+## Test
+
+```bash
+$ yarn test
+```
+

packages/plugin-dumi-api/README.md

@@ -0,0 +1,38 @@
+# plugin-dumi-api
+
+[![NPM version](https://img.shields.io/npm/v/plugin-dumi-api.svg?style=flat)](https://npmjs.org/package/plugin-dumi-api)
+[![NPM downloads](http://img.shields.io/npm/dm/plugin-dumi-api.svg?style=flat)](https://npmjs.org/package/plugin-dumi-api)
+
+
+
+## Install
+
+```bash
+# or yarn
+$ npm install
+```
+
+```bash
+$ npm run build --watch
+$ npm run start
+```
+
+## Usage
+
+Configure in `.umirc.js`,
+
+```js
+export default {
+  plugins: [
+    ['plugin-dumi-api'],
+  ],
+}
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

packages/plugin-dumi-api/__tests__/API.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import API from '../src/API';
+
+jest.mock('dumi/theme', function () {
+  return {
+    context: {
+      locale: '',
+      config: {
+        locales: [],
+      },
+      apis: {
+        Hello: {
+          default: [
+            {
+              identifier: 'className',
+              description: 'Extra CSS className for this component',
+              'description.zh-CN': '组件额外的 CSS className',
+              type: 'string',
+            },
+            {
+              identifier: 'type',
+              description: "I'm required",
+              'description.zh-CN': '我是一个必选属性',
+              type: 'string',
+              required: true,
+            },
+          ],
+        },
+      },
+    },
+  };
+});
+
+jest.mock('react', function () {
+  const originalModule = jest.requireActual('react');
+  return {
+    ...originalModule,
+    useContext: jest.fn(context => context),
+  };
+});
+
+describe('API component', () => {
+  test('Match snapshot', () => {
+    const { asFragment } = render(<API hideTitle={false} identifier="Hello" export="default" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

packages/plugin-dumi-api/__tests__/__snapshots__/API.test.tsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`API component Match snapshot 1`] = `
+<DocumentFragment>
+  <table
+    style="margin-top: 24px;"
+  >
+    <thead>
+      <tr>
+        <th>
+          Name
+        </th>
+        <th>
+          Description
+        </th>
+        <th>
+          Type
+        </th>
+        <th>
+          Default
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          className
+        </td>
+        <td>
+          Extra CSS className for this component
+        </td>
+        <td>
+          <code>
+            string
+          </code>
+        </td>
+        <td>
+          <code>
+            --
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          type
+        </td>
+        <td>
+          I'm required
+        </td>
+        <td>
+          <code>
+            string
+          </code>
+        </td>
+        <td>
+          <code>
+            (required)
+          </code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;

packages/plugin-dumi-api/__tests__/fixtures/alias/.umirc.ts

@@ -0,0 +1,10 @@
+import path from 'path';
+
+export default {
+    history: { type: "memory" },
+    mountElementId: "",
+    alias: {
+      '@': path.resolve(__dirname, './component'),
+    }
+};
+

packages/plugin-dumi-api/__tests__/fixtures/alias/component/Hello/index.tsx

@@ -0,0 +1,8 @@
+interface IHelloProps {
+    className?: string;
+    name: string;
+}
+export default ({ className, name }: IHelloProps) => {
+    return <div>Hello World, ${name}</div>;
+};
+

packages/plugin-dumi-api/__tests__/fixtures/alias/component/Peach.tsx

@@ -0,0 +1,18 @@
+interface IPeachProps {
+    className: string;
+    age: number;
+  }
+
+  interface IAppleProps {
+    className?: string;
+    type: "Peach" | "apple";
+  }
+
+  export const Apple = ({ className, type }: IAppleProps) => {
+    return <div>This is Apple</div>;
+  };
+
+  export default ({ className, age }: IPeachProps) => {
+    return <div>Hello World, ${age}</div>;
+  };
+

packages/plugin-dumi-api/__tests__/fixtures/alias/docs/index.md

@@ -0,0 +1,5 @@
+<API src="@/Hello/index.tsx" />
+
+---------
+
+<API src="@/Peach.tsx" />

packages/plugin-dumi-api/__tests__/fixtures/custom/.umirc.ts

@@ -0,0 +1,4 @@
+export default {
+    history: { type: 'memory' },
+    mountElementId: '',
+}

packages/plugin-dumi-api/__tests__/fixtures/custom/docs/Hello/index.tsx

@@ -0,0 +1,8 @@
+interface IHelloProps {
+    className?: string;
+    name: string;
+}
+export default ({ className, name }: IHelloProps) => {
+    return <div>Hello World, ${name}</div>;
+};
+

packages/plugin-dumi-api/__tests__/fixtures/defineExport/.umirc.ts

@@ -0,0 +1,4 @@
+export default {
+    history: { type: 'memory' },
+    mountElementId: '',
+}

packages/plugin-dumi-api/__tests__/fixtures/defineExport/docs/index.md

@@ -0,0 +1,5 @@
+---	
+componentName: Helloooo	
+---	
+
+<API exports='["default"]' />	

packages/plugin-dumi-api/__tests__/fixtures/index.ts

@@ -0,0 +1,7 @@
+export default () => {
+    return {
+      plugins: [
+        require.resolve('../../src/index')
+      ],
+    };
+  };

packages/plugin-dumi-api/__tests__/fixtures/normal/.umirc.ts

@@ -0,0 +1,4 @@
+export default {
+    history: { type: 'memory' },
+    mountElementId: '',
+}

packages/plugin-dumi-api/__tests__/fixtures/normal/docs/index.md

@@ -0,0 +1,5 @@
+---	
+componentName: Helloooo	
+---	
+
+<API />	

packages/plugin-dumi-api/__tests__/fixtures/normal/docs/index.tsx

@@ -0,0 +1,8 @@
+interface IHelloProps {
+    className?: string;
+    name: string;
+}
+export default ({ className, name }: IHelloProps) => {
+    return <div>Hello World, ${name}</div>;
+};
+