chore(templates): 使用plop+hbs替代metalsmith+hbs手动处理组件模板

Author: zhaozhiwen

components/index.ts

@@ -1 +1,3 @@
 export { default as Alert } from './alert';
+
+/* PLOP_INJECT_EXPORT */

package.json

@@ -18,7 +18,8 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "test:update": "jest --updateSnapshot",
-    "new:comp": "node scripts/new-comp"
+    "new": "plop --plopfile ./scripts/plopfile.ts",
+    "postnew": "prettier --write components/**/*{ts,tsx} --loglevel silent"
   },
   "repository": {
     "type": "git",
@@ -59,7 +60,6 @@
     "@types/vfile-message": "^2.0.0",
     "@umijs/fabric": "^1.2.12",
     "chalk": "^3.0.0",
-    "change-case": "^4.1.1",
     "commitizen": "^4.0.3",
     "cz-conventional-changelog": "^3.0.2",
     "docz": "^2.2.0",
@@ -71,14 +71,13 @@
     "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",
+    "plop": "^2.6.0",
     "prettier": "^1.19.1",
     "prismjs": "^1.17.1",
     "raw-loader": "^4.0.0",

scripts/new-comp.js

@@ -0,0 +1,62 @@
+/* eslint-disable  import/no-extraneous-dependencies */
+import { NodePlopAPI } from 'plop';
+import path from 'path';
+
+export default function(plop: NodePlopAPI) {
+  plop.setGenerator('component', {
+    description: '创建一个新组件',
+    prompts: [
+      { type: 'input', name: 'name', message: '请输入组件名称（多个单词以中横线命名）' },
+      { type: 'input', name: 'CN', message: '请输入组件中文名称' },
+      { type: 'input', name: 'description', message: '请输入组件描述' },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../components/{{kebabCase name}}/index.ts'),
+        templateFile: path.resolve(__dirname, '../templates/component/index.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../components/{{kebabCase name}}/{{kebabCase name}}.tsx'),
+        templateFile: path.resolve(__dirname, '../templates/component/comp.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../components/{{kebabCase name}}/style/index.less'),
+        templateFile: path.resolve(__dirname, '../templates/component/style/style.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../components/{{kebabCase name}}/style/index.ts'),
+        templateFile: path.resolve(__dirname, '../templates/component/style/index.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../components/{{kebabCase name}}/index.mdx'),
+        templateFile: path.resolve(__dirname, '../templates/component/doc.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../components/{{kebabCase name}}/interface.ts'),
+        templateFile: path.resolve(__dirname, '../templates/component/interface.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../components/{{kebabCase name}}/demo/basic.tsx'),
+        templateFile: path.resolve(__dirname, '../templates/component/demo/basic.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../components/{{kebabCase name}}/__tests__/index.test.tsx'),
+        templateFile: path.resolve(__dirname, '../templates/component/__tests__/index.test.hbs'),
+      },
+      {
+        type: 'append',
+        path: path.resolve(__dirname, '../components/index.ts'),
+        pattern: '/* PLOP_INJECT_EXPORT */',
+        template: "export { default as {{pascalCase name}} } from './{{kebabCase name}}';",
+      },
+    ],
+  });
+}

scripts/plopfile.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import {{pascalCase name}} from '../index';
+
+describe('{{pascalCase name}}', () => {
+   it('renders without error', () => {
+
+   });
+});

template/__tests__/index.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Props } from './interface';
+
+const defaultProps = {
+
+};
+
+const {{pascalCase name}}: React.FC<Props> = userProps => {
+  const props = { ...defaultProps, ...userProps };
+
+  return <>{{pascalCase name}}</>;
+  };
+
+  export default {{pascalCase name}};

template/demo/1-demo-basic.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { {{pascalCase name}} } from 'happy-ui';
+
+export default () => (
+<{{pascalCase name}} />
+);

template/index.mdx

@@ -0,0 +1,28 @@
+---
+name: {{pascalCase name}} {{CN}}
+route: /components/{{kebabCase name}}
+menu: 组件
+---
+
+import CodeBox from '../../doc-comps/happy-box';
+
+import BasicDemo from './demo/basic';
+import BasicDemoCode from '!raw-loader!./demo/basic';
+
+## {{pascalCase name}} {{CN}}
+
+{{description}}
+
+### 代码演示
+
+#### 基本使用
+
+<CodeBox code={BasicDemoCode} title="" desc="">
+  <BasicDemo></BasicDemo>
+</CodeBox>
+
+
+### API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| ---- | ---- | ---- | ------ |

template/index.tsx

@@ -0,0 +1,3 @@
+export * from './interface';
+
+export { default } from './{{kebabCase name}}';

templates/component/__tests__/index.test.hbs

@@ -0,0 +1,3 @@
+export interface Props {
+
+}