🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

generate-react-cli

Package Overview
Dependencies
Maintainers
1
Versions
88
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

generate-react-cli - npm Package Compare versions

Comparing version

1.4.1
to
1.5.0

src/services/cliConfig.js
src/services/commandActions.js
src/utils/templateUtils.js
templates/components/componentLazyTemplate.js
templates/configs/grc-configi-template.json

5

package.json
{
"name": "generate-react-cli",
"version": "1.4.1",
"version": "1.5.0",
"description": "A simple React CLI to generate components instantly and more.",

@@ -25,3 +25,4 @@ "main": "src/index.js",

"chalk": "^2.4.2",
"commander": "^2.20.0",
"commander": "^3.0.0",
"deep-keys": "^0.5.0",
"esm": "^3.2.25",

@@ -28,0 +29,0 @@ "fs-extra": "^8.1.0",

41

readme.md
# Generate React CLI
[![dependencies](https://david-dm.org/arminbro/generate-react-cli.svg)](https://david-dm.org/arminbro/generate-react-cli)
[![License](https://img.shields.io/npm/l/express.svg)](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE)
## Why?
To help speed up productivity in react projects. For example you can run one command `generate-react component <ComponentName>` to instantly generate a component with its corresponding files (stylesheet, test).
To help speed up productivity in react projects. For example, you can run one command `generate-react component <ComponentName>` to instantly generate a component with its corresponding files (stylesheet, test).
We are starting off with the bare minimum of just generating a component. We plan to add additional commands, options, and configurations in the future.
**_Few notes:_**
- The CLI assumes that your project uses [jest](https://github.com/facebook/jest) & [enzyme](https://github.com/airbnb/enzyme) for testing. This will be customizable in the future.
- The CLI also has an opinion on how files are structured within the project. [We follow Grouping by features or routes](https://reactjs.org/docs/faq-structure.html#grouping-by-features-or-routes)
- The CLI uses CSS Modules by default. This will be customizable in the future.
## Install
>`npm i -g generate-react-cli`
`npm i -g generate-react-cli`
## Config File
When you run generate-react-cli within your project the first time, it will ask you a series of questions to customize the cli for your project needs (this will create a "generate-react-cli.json" config file).
### e.g. **generate-react-cli.json**
```
{
"component": {
"path": "src/components",
"css": {
"preprocessor": "scss",
"module": true
},
"withTest": true,
"withStory": true,
"withLazy": true
}
}
```
## Commands

@@ -22,5 +41,5 @@

>`generate-react component <ComponentName>`
`generate-react component <ComponentName>`
This will create a folder with your component name within the **src/components** directory by default, and it will generate 3 corresponding files (.js, .module.css, .test.js) within it.
This command will create a folder with your component name within your default (e.g. **src/components**) directory, and its corresponding files.

@@ -30,8 +49,8 @@ #### Options

|---------|-----------|-------|
| **`-p`** or<br>**`--path`** | Value of the path where you want the component to be generated in (e.g. **`src/pages`**). | **`src/components`**
| **-p** or<br>**--path** | Value of the path where you want the component to be generated in (e.g. **src/pages**). | **src/components**
| **-t** or<br>**--withTest** | Create a corresponding test file with this component? | **Boolean value selected in "generate-react-cli.json" config file**
| **-s** or<br>**--withStory** | Create a corresponding story file with this component? | **Boolean value selected in "generate-react-cli.json" config file**
| **-l** or<br>**--withLazy** | Create a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting: [code-splitting](https://reactjs.org/docs/code-splitting.html#code-splitting)) with this component? | **Boolean value selected in "generate-react-cli.json" config file**
## Coming Soon
- CLI custom configuration: e.g. preprocessor stylesheet type, choose different test framework, choose different file structure type, etc..
<br>
Have fun!

21

src/cli.js
import program from 'commander';
import chalk from 'chalk';
import pkg from '../package.json';
import { generateComponent, getGenerateReactConfigFile } from './utils/commandActions';
import { generateComponent, getCLIConfigFile } from './services/commandActions';

@@ -9,4 +9,4 @@ let commandNotFound = true;

export async function cli(args) {
const grcFile = (await getGenerateReactConfigFile()) || {};
const { component } = grcFile;
const cliConfigFile = (await getCLIConfigFile()) || {};
const { component } = cliConfigFile;

@@ -20,2 +20,17 @@ program.version(pkg.version);

.option('-p, --path <path>', 'With specified path value', component.path || './src/components')
.option(
'-t, --withTest <withTest>',
'Would you like to create a corresponding test file with this component?',
component.withTest
)
.option(
'-s, --withStory <withStory>',
'Would you like to create a corresponding story file with this component?',
component.withStory
)
.option(
'-l, --withLazy <withLazy>',
'Would you like to create a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting: https://reactjs.org/docs/code-splitting.html#code-splitting) with this component?',
component.withLazy
)
.action((componentName, cmd) => generateComponent(componentName, cmd, component))

@@ -22,0 +37,0 @@ .action(() => (commandNotFound = false));

src/utils/commandActions.js
bin/generate-react

Sorry, the diff of this file is not supported yet