├── .gitignore
├── README-zh.md
├── README.md
├── bin
└── mkreact.js
├── index.js
├── lib
├── createReactComponent.js
├── index.js
└── writeFile.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 |
--------------------------------------------------------------------------------
/README-zh.md:
--------------------------------------------------------------------------------
1 | # react-component-maker
2 |
3 | 一键式创建React组件
4 |
5 | ## v1.2.0
6 |
7 | 支持自由选择创建`css`,`scss`,`less`
8 |
9 | ## 功能
10 |
11 | 1. 一键式创建React组件，不是React脚手架！
12 | 2. 支持一次创建多个组件
13 | 3. 支持自由选择创建`css`,`Scss`,`Less`
14 | 4. 支持无状态组建（stateless function）
15 |
16 | ### Usage
17 |
18 | ```
19 | npm i -g react-component-maker
20 | mkreact App
21 | //此时你创建了一个名字为App的组件
22 | mkreact Header,Body,Footer
23 | //此时你创建了三个组件，分别为Header,Body,Footer
24 | ```
25 |
26 | #### 创建样式为Scss的组件
27 | ```
28 | mkreact -s Body
29 | //创建Body组件，但是样式文件为Scss
30 | ```
31 | #### 创建样式为Less的组件
32 | ```
33 | #### mkreact -l Body
34 | //创建Body组件，但是样式文件为Scsss
35 | ```
36 | #### create React component with stateless
37 | ```
38 | mkreact -p Body
39 | //创建Body无状态组件
40 | ```
41 | ## 组件详情
42 |
43 | 一个组件为一个文件夹，文件夹目录为
44 |
45 | - [name].jsx
46 | - [name].css
47 | - index.jsx
48 |
49 | ## 文件内容
50 |
51 | ### [name].jsx
52 |
53 | ```
54 | import React from 'react';
55 | import styles from './[name].css'
56 | class [name] extends React.Component {
57 | constructor(props) {
58 | super(props);
59 | this.displayName = [name];
60 | }
61 | render() {
62 | return (
63 |
64 | [name]
65 |
66 | )
67 | }
68 | }
69 | export default [name];
70 | ```
71 |
72 | ### [name].css
73 |
74 | ```
75 | .container {
76 |
77 | }
78 | ```
79 |
80 | ### index.jsx
81 |
82 | ```
83 | import [name] from './hh'
84 |
85 | export default [name]
86 | ```
87 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-component-maker
2 |
3 | the cli to create react components
4 |
5 | [中文版](https://github.com/sunbrother/react-component-maker/blob/master/README-zh.md)
6 |
7 | ## v1.2.0
8 |
9 | support `css`,`scss`,`less`
10 |
11 | ## support
12 |
13 | 1. the cli to create react components
14 | 2. support create multiple components
15 | 3. support `css`,`Scss`,`Less`
16 | 4. support stateless function(or you can say pure component)
17 | ### Usage
18 |
19 | ```
20 | npm i -g react-component-maker
21 | mkreact App
22 | //you will create React component named App
23 | mkreact Header,Body,Footer
24 | //you will create React compoennts named Header,Body,Footer
25 | ```
26 |
27 | #### create component with Scss
28 | ```
29 | mkreact -s Body
30 | //create React components named Body with Scss
31 | ```
32 | #### create React component with Less
33 | ```
34 | mkreact -l Body
35 | //create React components named Body with Less
36 | ```
37 |
38 | #### create React component with Less
39 | ```
40 | mkreact -p Body
41 | //you will create pure component for stateless function
42 | ```
43 |
44 | ## component details
45 |
46 |
47 | - [name].jsx
48 | - [name].css
49 | - index.jsx
50 |
51 | ## file details
52 |
53 | ### [name].jsx
54 |
55 | ```
56 | import React from 'react';
57 | import styles from './[name].css'
58 | class [name] extends React.Component {
59 | constructor(props) {
60 | super(props);
61 | this.displayName = [name];
62 | }
63 | render() {
64 | return (
65 |
66 | [name]
67 |
68 | )
69 | }
70 | }
71 | export default [name];
72 | ```
73 |
74 | ### [name].css
75 |
76 | ```
77 | .container {
78 |
79 | }
80 | ```
81 |
82 | ### index.jsx
83 |
84 | ```
85 | import [name] from './hh'
86 |
87 | export default [name]
88 | ```
89 |
--------------------------------------------------------------------------------
/bin/mkreact.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | 'use strict'
3 | const createReactComponent = require('../lib/createReactComponent')
4 | const program = require('commander')
5 | function parseVal (val) {
6 | return val.split(',')
7 | }
8 | function log (name, componentStatus, style) {
9 | console.log(name)
10 | console.log(`you will create ${componentStatus}component ${name} with ${style}`)
11 | }
12 | // if use pure and scss or less both, it can find the right name
13 | function getName(name,style){
14 | const newName = typeof program.pure !== 'boolean' && program.pure? name : program[style]
15 | return newName;
16 | }
17 | (function () {
18 | let usePureComponent = false
19 | let componentStatus = ''
20 | let style = 'css'
21 | let name
22 |
23 | program
24 | .version('1.2.0')
25 | .option('-s --scss [names]', 'replace css to Scss', parseVal)
26 | .option('-l --less [names]', 'replace css to Less', parseVal)
27 | .option('-p --pure [names]', 'use pure component', parseVal)
28 | .parse(process.argv)
29 |
30 | if (program.pure) {
31 | usePureComponent = true
32 | componentStatus = 'pure '
33 | name = program.pure
34 | }
35 | if (program.scss) {
36 | style = 'scss'
37 | name = getName(name,style)
38 | log(name, componentStatus, style)
39 | } else if (program.less) {
40 | style = 'less'
41 | name = getName(name,style)
42 | log(name, componentStatus, style)
43 | } else {
44 | name = name || process
45 | .argv[2]
46 | .split(',')
47 | log(name, componentStatus, style)
48 | }
49 | console.log(name, style, usePureComponent)
50 | createReactComponent(name, style, usePureComponent)
51 |
52 | console.log('done!')
53 | })()
54 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./lib/index.js')
--------------------------------------------------------------------------------
/lib/createReactComponent.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var fs = require('fs');
4 | var path = require('path');
5 | var _require = require('./writeFile.js'),
6 | writeCss = _require.writeCss,
7 | writeIndex = _require.writeIndex,
8 | writeJsx = _require.writeJsx;
9 | module.exports = function createReactComponent(dirNames, cssType, usePureComponent) {
10 | switch (dirNames.length) {
11 | case 0:
12 | throw Error('请输入组件名称');
13 | case 1:
14 | createOne(dirNames[0], cssType, usePureComponent);
15 | break;
16 | default:
17 | createMulti(dirNames, cssType, usePureComponent);
18 | break;
19 | }
20 | };
21 |
22 | function createOne(dirName, cssType, usePureComponent) {
23 | var dirPath = path.join(dirName);
24 | createFiles(dirPath, dirName, cssType, usePureComponent);
25 | }
26 |
27 | function createMulti(dirNames, cssType, usePureComponent) {
28 | dirNames.forEach(function (ele) {
29 | var dirPath = path.join(ele);
30 | createFiles(dirPath, ele, cssType, usePureComponent);
31 | });
32 | }
33 |
34 | function createFiles(dirPath, dirName, cssType, usePureComponent) {
35 | fs.mkdirSync(dirPath);
36 | writeIndex(dirPath, dirName, fs);
37 | writeJsx(dirPath, dirName, fs, cssType, usePureComponent);
38 | writeCss(dirPath, dirName, fs, cssType);
39 | }
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var createReactComponent = require('./createReactComponent.js');
4 |
5 | module.exports = createReactComponent;
--------------------------------------------------------------------------------
/lib/writeFile.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | var path = require('path')
4 |
5 | function writeIndex (dirPath, dirName, fs) {
6 | let str = `\
7 | import ${dirName} from './${dirName}'
8 | export default ${dirName}
9 | `
10 | str = new Buffer(str)
11 | fs.writeFile(path.join(dirName, 'index.jsx'), str, catchErr)
12 | }
13 |
14 | function writeJsx (dirPath, dirName, fs, cssType, usePureComponent) {
15 | let str = `\
16 | import React from 'react'
17 | import styles from './${dirName}.${cssType}'
18 | `
19 | // str = "import React from 'react'\nimport styles from './" + dirName + '.' + cssType + "'\n"
20 | if (usePureComponent) {
21 | str += `\
22 | function ${dirName}(props){
23 | return (
24 | ${dirName}
25 | )
26 | }
27 | `
28 | // str += '\nfunction ' + dirName + '(props){\n return (\n ' + dirName + '
\n )\n}\n'
29 | } else {
30 | str += `\
31 | class ${dirName} extends React.Component{
32 | constructor(props){
33 | super(props)
34 | }
35 | render(){
36 | return (
37 | ${dirName}
38 | )
39 | }
40 | }
41 | `
42 | // str += 'class ' + dirName + ' extends React.Component {\n constructor(props) {\n super(props);\n this.displayName = ' + '"' + dirName + '"' + ';\n }\n render() {\n return (\n \n ' + dirName + '\n
\n );\n }\n}\n'
43 | }
44 | str += `export default ${dirName}`;
45 | str = new Buffer(str)
46 | fs.writeFile(path.join(dirName, dirName + '.jsx'), str, catchErr)
47 | }
48 |
49 | function writeCss (dirPath, dirName, fs, cssType) {
50 | var str = '.container {\n \n}'
51 | str = new Buffer(str)
52 | fs.writeFile(path.join(dirName, dirName + '.' + cssType), str, catchErr)
53 | }
54 |
55 | function catchErr (err) {
56 | if (err) {
57 | throw err
58 | }
59 | }
60 | module.exports = {
61 | writeIndex: writeIndex,
62 | writeJsx: writeJsx,
63 | writeCss: writeCss
64 | }
65 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-component-maker",
3 | "version": "1.5.0",
4 | "description": "build react-component kit",
5 | "main": "./lib/index.js",
6 | "preferGlobal": "true",
7 | "bin": {
8 | "mkreact": "./bin/mkreact.js"
9 | },
10 | "scripts": {
11 | "test": "echo \"Error: no test specified\" && exit 1",
12 | "push": "git add . && git commit -m 'page update' && git push -u origin master"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://github.com/sunbrother/react-component-maker.git"
17 | },
18 | "keywords": [
19 | "react",
20 | "node",
21 | "npm",
22 | "javascript"
23 | ],
24 | "author": "sunOpar",
25 | "license": "ISC",
26 | "bugs": {
27 | "url": "https://github.com/sunbrother/react-component-maker/issues"
28 | },
29 | "homepage": "https://github.com/sunbrother/react-component-maker#readme",
30 | "dependencies": {
31 | "commander": "^2.9.0"
32 | }
33 | }
--------------------------------------------------------------------------------