react-create-helper
Advanced tools
Comparing version
123
index.js
@@ -12,2 +12,3 @@ #! /usr/bin/env node | ||
let stylesExt = options.styles || "scss"; | ||
let sourceName = name; | ||
@@ -37,2 +38,4 @@ let folderProvided = path.dirname(sourceName); | ||
} | ||
if(config.styleExtension) | ||
stylesExt = config.styleExtension | ||
} | ||
@@ -43,3 +46,2 @@ | ||
let dir = folderInput ? path.resolve(path.join(folderInput, sourceName)) : path.resolve(sourceName); | ||
let stylesExt = options.styles || "scss"; | ||
let styles = path.resolve(dir, basename + "." + stylesExt); | ||
@@ -77,3 +79,19 @@ let js = path.resolve(dir, basename + ".js"); | ||
let actionContent = `export function ${basename}() { | ||
return dispatch => { | ||
return undefined; | ||
} | ||
}`; | ||
let reducerContent = `export default (state = [], action = {}) => { | ||
switch(action.type) { | ||
case "EXAMPLE_ACTION": | ||
return [ | ||
...state, | ||
]; | ||
default: return state; | ||
} | ||
}`; | ||
let indexContent = `import ${basename} from "./${basename}"; | ||
@@ -83,33 +101,104 @@ export default ${basename}; | ||
if(options.reduxAction){ | ||
let resultPath = ''; | ||
if(folderInput) | ||
resultPath = path.join(folderInput); | ||
if(typeof config !== "undefined"){ | ||
if(config.base){ | ||
resultPath = path.join(config.base, path.dirname(name) || ''); | ||
} | ||
if(config.actionsDir){ | ||
resultPath = path.join(config.base || '', config.actionsDir, path.dirname(name) || ''); | ||
} | ||
} | ||
if(fs.existsSync(path.resolve(path.join(resultPath, path.basename(name))) + ".js")){ | ||
console.error(`${chalk.yellow(name)} ${chalk.red('already exists')}`); | ||
return false; | ||
} | ||
try { | ||
if(fs.existsSync(`./${folderInput ? path.join(folderInput, sourceName) : sourceName}`)){ | ||
try{ | ||
fs.writeSync(fs.openSync( path.resolve(path.join(resultPath, path.basename(name))) + ".js", "w"), actionContent); | ||
}catch(e){ | ||
if(e.code === 'ENOENT'){ | ||
mkdirSync(path.resolve(resultPath)); | ||
fs.writeSync(fs.openSync( path.resolve(path.join(resultPath, path.basename(name))) + ".js", "w"), actionContent); | ||
} | ||
} | ||
console.log(`${chalk.blue('Action:')} ${chalk.yellow(name)} successfully created`); | ||
}else if(options.reduxReducer){ | ||
let resultPath = ''; | ||
if(folderInput) | ||
resultPath = path.join(folderInput); | ||
if(typeof config !== "undefined"){ | ||
if(config.base){ | ||
resultPath = path.join(config.base, path.dirname(name) || ''); | ||
} | ||
if(config.reducersDir){ | ||
resultPath = path.join(config.base || '', config.reducersDir, path.dirname(name) || ''); | ||
} | ||
} | ||
if(fs.existsSync(path.resolve(path.join(resultPath, path.basename(name))) + ".js")){ | ||
console.error(`${chalk.yellow(name)} ${chalk.red('already exists')}`); | ||
return false; | ||
} | ||
else{ | ||
mkdirSync(`./${folderInput? path.join(folderInput, sourceName) : sourceName}`) | ||
try{ | ||
fs.writeSync(fs.openSync( path.resolve(path.join(resultPath, path.basename(name))) + ".js", "w"), reducerContent); | ||
}catch(e){ | ||
if(e.code === 'ENOENT'){ | ||
mkdirSync(path.resolve(resultPath)); | ||
fs.writeSync(fs.openSync( path.resolve(path.join(resultPath, path.basename(name))) + ".js", "w"), reducerContent); | ||
} | ||
} | ||
} catch(e) { | ||
if(e.code === 'EEXIST'){ | ||
console.log(`${chalk.yellow(sourceName)} ${chalk.red('already exists')}`); | ||
}else{ | ||
console.error(e); | ||
console.log(`${chalk.blue('Reducer:')} ${chalk.yellow(name)} successfully created`); | ||
} | ||
else { | ||
try { | ||
if(fs.existsSync(`./${folderInput ? path.join(folderInput, sourceName) : sourceName}`)){ | ||
console.error(`${chalk.yellow(name)} ${chalk.red('already exists')}`); | ||
return false; | ||
} | ||
else{ | ||
mkdirSync(`./${folderInput? path.join(folderInput, sourceName) : sourceName}`) | ||
} | ||
} catch(e) { | ||
if(e.code === 'EEXIST'){ | ||
console.log(`${chalk.yellow(sourceName)} ${chalk.red('already exists')}`); | ||
}else{ | ||
console.error(e); | ||
} | ||
return false; | ||
} | ||
return false; | ||
fs.openSync(styles, "w"); | ||
fs.writeSync(fs.openSync(js, "w"), jsContent); | ||
fs.writeSync(fs.openSync(index, "w"), indexContent); | ||
console.log(`${chalk.blue('Component:')} ${chalk.yellow(name)} successfully created`); | ||
} | ||
fs.openSync(styles, "w"); | ||
fs.writeSync(fs.openSync(js, "w"), jsContent); | ||
fs.writeSync(fs.openSync(index, "w"), indexContent); | ||
console.log(`${chalk.yellow(name)} successfully created`); | ||
} | ||
program | ||
.version('0.0.1') | ||
.option('-s, --styles [extension]', 'styles extension [default: scss]') | ||
.version('0.1.3') | ||
.on('--help', function(){ | ||
console.log(' Examples:'); | ||
console.log(''); | ||
console.log(' $ rch -c Home'); | ||
console.log(' $ rch -c src/myFolder/Login'); | ||
console.log(' $ rch auth -r'); | ||
console.log(' $ rch actions/auth -a'); | ||
console.log(''); | ||
}) | ||
.option('-s, --styles', 'styles extension [default: scss]') | ||
.option('-c, --redux-component', 'create react component with redux') | ||
.option('-r, --redux-reducer', 'create redux reducer') | ||
.option('-a, --redux-action', 'create redux action') | ||
.arguments('<name>') | ||
.action(run) | ||
.parse(process.argv); |
{ | ||
"name": "react-create-helper", | ||
"version": "0.0.2", | ||
"version": "0.1.3", | ||
"description": "create components, reducers and actions easier", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -9,4 +9,32 @@ # react-create-helper | ||
### Example | ||
## Options | ||
You can provide options in your package json like that | ||
```$js | ||
"react-create-helper": { | ||
"base": "./src", | ||
"actionsDir": "actions", | ||
"reducersDir": "reducers", | ||
"componentName": { | ||
"prepend": "My", | ||
"append": "Component" | ||
}, | ||
"styleExtension": "css" | ||
} | ||
``` | ||
**base**: *base dir for components from your project root* | ||
**actionsDir**: *base dir of actions from base* | ||
**reducersDir**: *base dir of reducers from base* | ||
**componentName**: *also you can configure prefix and suffix of component name.* | ||
**styleExtension**: *style extension)))* | ||
### Generate component | ||
```$bash | ||
@@ -24,21 +52,23 @@ rch Header | ||
``` | ||
Also you can add `-s css`. Than `.css` file will be generated instead. | ||
## Options | ||
You can provide options in your package json like that | ||
### Generate action & reducers | ||
#### `package.json` | ||
```$js | ||
"react-create-helper": { | ||
"base": "./src", | ||
"actionsDir": "Actions", | ||
"reducersDir": "Reducers", | ||
"componentName": { | ||
"prepend": "My", | ||
"append": "Component" | ||
} | ||
}, | ||
"styleExtension": "css" | ||
} | ||
``` | ||
**base**: *base dir of components from your project root* | ||
**componentName**: *also you can configure prefix and suffix of component name.* | ||
```bash | ||
$ rch -c Example | ||
$ rch -a ExampleAction | ||
$ rch -r ExampleReducer | ||
``` | ||
***This will generate something like this*** | ||
@@ -48,6 +78,12 @@ | ||
src | ||
└── MyHeaderComponent | ||
├── MyHeaderComponent.js | ||
├── MyHeaderComponent.scss | ||
└── index.js | ||
``` | ||
├── MyHeaderComponent | ||
│ ├── MyExampleComponent.js | ||
│ ├── MyExampleComponent.css | ||
│ └── index.js | ||
├── Actions | ||
│ └── ExampleAction.js | ||
└── Reducers | ||
└── ExampleReducer.js | ||
``` | ||
Also you can use `rch -h`. To see all options and usage examples; |
9071
73.38%170
91.01%86
72%