chore(new-comp): 增加组件初始化脚本

Author: zhaozhiwen

package.json

@@ -17,7 +17,8 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "test:update": "jest --updateSnapshot"
+    "test:update": "jest --updateSnapshot",
+    "new:comp": "node scripts/new-comp"
   },
   "repository": {
     "type": "git",
@@ -58,6 +59,8 @@
     "@umijs/fabric": "^1.2.12",
     "antd": "^3.26.3",
     "babel-plugin-import": "^1.13.0",
+    "chalk": "^3.0.0",
+    "change-case": "^4.1.1",
     "commitizen": "^4.0.3",
     "cz-conventional-changelog": "^3.0.2",
     "docz": "^2.2.0",
@@ -68,11 +71,14 @@
     "gulp-babel": "^8.0.0",
     "gulp-cssnano": "^2.1.3",
     "gulp-less": "^4.0.1",
+    "handlebars": "^4.7.3",
     "husky": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
+    "inquirer": "^7.0.4",
     "jest": "^24.9.0",
     "less": "^3.10.3",
     "lint-staged": "^9.5.0",
+    "metalsmith": "^2.3.0",
     "prettier": "^1.19.1",
     "prismjs": "^1.17.1",
     "raw-loader": "^4.0.0",

scripts/new-comp.js

@@ -0,0 +1,104 @@
+const inquirer = require('inquirer');
+const changeCase = require('change-case');
+const Handlebars = require('handlebars');
+const Metalsmith = require('metalsmith');
+const chalk = require('chalk');
+const path = require('path');
+const fs = require('fs');
+
+const questions = [
+  {
+    name: 'dirName',
+    message: '组件目录名，中横线命名法（param-case）',
+    type: 'input',
+    default: 'new-comp',
+  },
+  {
+    name: 'compNameZH',
+    message: '组件中文名',
+    type: 'input',
+    default: '测试组件',
+  },
+];
+
+/**
+ * 确认组件目录是否已经存在
+ * @param {string} path 文件夹路径
+ */
+function isDirExisted(path) {
+  try {
+    fs.accessSync(path);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * 渲染组件初始化模板
+ * @param {string} dest 目标文件夹名称
+ * @param {Object} state 模板数据
+ */
+function renderTemplate(dest, state) {
+  return new Promise((resolve, reject) => {
+    const source = path.join(__dirname, '../template');
+    const metalsmith = Metalsmith(process.cwd())
+      .metadata(state)
+      .clean(false)
+      .source(source)
+      .destination(dest);
+
+    metalsmith
+      .use((files, metalsmith, done) => {
+        const meta = metalsmith.metadata();
+        Object.keys(files).forEach(fileName => {
+          try {
+            const t = files[fileName].contents.toString();
+            files[fileName].contents = new Buffer(Handlebars.compile(t)(meta));
+          } catch (error) {
+            console.error(chalk.red(`render file error: ${fileName}`));
+          }
+        });
+        done(undefined, files, metalsmith);
+      })
+      .build(err => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve();
+          console.log(chalk.yellowBright(`- 目录创建成功`));
+        }
+      });
+  });
+}
+
+/**
+ * 向入口文件 re-export 组件
+ * @param {string} dirName 目标文件夹名称
+ * @param {string} compNameEN 组件英文名称
+ */
+function insert2EntryFile(dirName, compNameEN) {
+  const entryFilePath = path.join(__dirname, '../components/index.ts');
+  fs.appendFileSync(
+    entryFilePath,
+    `\nexport { default as ${compNameEN} } from './${dirName}';\n`,
+    'utf8',
+  );
+  console.log(chalk.yellowBright(`- 入口文件写入成功`));
+}
+
+async function main() {
+  const { dirName, compNameZH } = await inquirer.prompt(questions);
+  const dest = path.join(__dirname, `../components/${dirName}`);
+  if (isDirExisted(dest)) {
+    console.log(chalk.red(`💣 该组件目录已存在`));
+    return;
+  }
+  const compNameEN = changeCase.pascalCase(dirName);
+  const state = { compNameZH, compNameEN, line_for_keep_metadata: '---' };
+  await renderTemplate(dest, state);
+  insert2EntryFile(dirName, compNameEN);
+  console.log(chalk.green(`✨ ${compNameEN}-${compNameZH} 组件创建成功`));
+}
+
+main();

template/__tests__/index.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import {{compNameEN}} from '../index';
+
+describe('<{{compNameEN}} />', () => {
+  test('should render default', () => {
+    const { container } = render(<{{compNameEN}} />);
+    expect(container).toMatchSnapshot();
+  });
+});

template/demo/1-demo-basic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import {{compNameEN}} from '..';
+import '../style';
+
+export default () => (
+  <>
+    <{{compNameEN}} />
+  </>
+);

template/index.mdx

@@ -0,0 +1,28 @@
+{{line_for_keep_metadata}}
+name: {{compNameEN}} {{compNameZH}}
+route: /{{compNameEN}}
+menu: {{compNameEN}}
+{{line_for_keep_metadata}}
+
+import CodeBox from '../../doc-comps/happy-box';
+
+import BasicDemo from './demo/1-demo-basic';
+import BasicDemoCode from '!raw-loader!./demo/1-demo-basic';
+
+# {{compNameEN}} {{compNameZH}}
+
+组件介绍
+
+## 代码演示
+
+### 基本用法
+
+<CodeBox code={BasicDemoCode}>
+  <BasicDemo></BasicDemo>
+</CodeBox>
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| ---- | ---- | ---- | ------ |
+|      |      |      |        |

template/index.tsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+interface Props {}
+
+interface State {}
+
+class {{compNameEN}} extends Component<Props, State> {
+  static propTypes = {};
+
+  static defaultProps: Partial<Props> = {};
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return <>{{compNameEN}}</>;
+  }
+}
+
+export default {{compNameEN}};

template/style/index.less

@@ -0,0 +1 @@
+import './index.less';