You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-create-helper

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-create-helper - npm Package Compare versions

Comparing version

to
0.1.3

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);

2

package.json
{
"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;