🚀 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

4.2.2
to
4.3.0

6

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog

## [4.3.0](https://github.com/arminbro/generate-react-cli/compare/v4.2.2...v4.3.0) (2020-05-10)
### Features
- 🎸 Make 'GRC' more configurable (multi component commands) ([59f1622](https://github.com/arminbro/generate-react-cli/commit/59f1622dc6c6ca5a2b42d870b02c265694bc10eb)), closes [#14](https://github.com/arminbro/generate-react-cli/issues/14)
### [4.2.2](https://github.com/arminbro/generate-react-cli/compare/v4.2.1...v4.2.2) (2020-05-03)

@@ -7,0 +13,0 @@

2

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

@@ -5,0 +5,0 @@ "repository": "https://github.com/arminbro/generate-react-cli",

158

readme.md

@@ -16,2 +16,3 @@ # Generate React CLI

- Now supports custom component commands ([read more](#custom-component-commands)). 🎉
- Now supports custom templates ([read more](#custom-templates)). 🎉

@@ -25,4 +26,4 @@ - Supports React [TypeScript](https://www.typescriptlang.org/) projects.

```
npm i -g generate-react-cli
generate-react component Box
npm i -g generate-react-cli
generate-react component Box
```

@@ -33,3 +34,3 @@

```
npx generate-react-cli component Box
npx generate-react-cli component Box
```

@@ -53,13 +54,44 @@

"path": "src/components",
"withLazy": false,
"withStory": false,
"withStyle": true,
"withTest": true,
"withStory": true,
"withLazy": false
"withTest": true
}
}
```
### Custom component commands:
By default, GRC comes with one **component** command out of the box.
What if you wanted to generate components with your own custom commands, like for example **page** or **layout** that have their own set of component config rules?
You can do so by extending the **generate-react-cli.json** config file like this.
```json
{
"usesTypeScript": false,
"usesCssModule": true,
"cssPreprocessor": "scss",
"testLibrary": "Testing Library",
"component": {
"path": "src/components",
"withLazy": false,
"withStory": false,
"withStyle": true,
"withTest": true
},
"page": {
"path": "src/pages",
"withLazy": true,
"withStory": false,
"withStyle": true,
"withTest": true,
"withTest": true
},
"layout": {
"path": "src/layout",
"withLazy": false,
"withStory": false,
"withLazy": true
"withStyle": false,
"withTest": true
}

@@ -69,2 +101,22 @@ }

Make sure to include the required properties listed below when creating the custom component commands. Otherwise, GRC will not register them as a custom component command.
The required properties are as follows:
- path
- withLazy
- withStory
- withStyle
- withTest
Once you have done that, you should be able to run the custom component commands like this:
```
npx generate-react-cli page HomePage
```
```
npx generate-react-cli layout BoxLayout
```
## Custom Templates

@@ -165,3 +217,3 @@

```
npx generate-react-cli component Box
npx generate-react-cli component Box
```

@@ -187,3 +239,3 @@

```
npx generate-react-cli component Box --withTest=false
npx generate-react-cli component Box --withTest=false
```

@@ -194,3 +246,3 @@

```
npx generate-react-cli component Box --withTest=true
npx generate-react-cli component Box --withTest=true
```

@@ -209,3 +261,3 @@

<td width="60%">
Value of the path where you want the component to be generated in (e.g. <b>src/pages</b>).
Value of the path where you want the component to be generated in (e.g. <b>src/components</b>).
</td>

@@ -248,86 +300,4 @@ <td width="20%">String</td>

### Generate Page
```
npx generate-react-cli page HomePage
```
This command will create a folder with your page name within your default (e.g. **src/pages**) directory, and its corresponding files.
#### **Example of the page files structure**
```
|-- /src
|-- /pages
|-- /HomePage
|-- HomePage.js
|-- HomePage.css
|-- HomePage.test.js
```
#### Options
You can also override some of the generate-react-cli default page config options using one-off commands. So for example, let's say you have set **withTest** to be `true` in the page config property. You can override it like this:
```
npx generate-react-cli page HomePage --withTest=false
```
Or vice versa, if you have set **withTest** to be `false` you can do this:
```
npx generate-react-cli page HomePage --withTest=true
```
Otherwise, if you don't pass any options, it will just use the default values from the generate-react-cli config file you have set.
<table>
<tr align="left">
<th>Options</th>
<th>Description</th>
<th>Value Type</th>
</tr>
<tr>
<td width="20%"><b>--path</b></td>
<td width="60%">
Value of the path where you want the page to be generated in (e.g. <b>src/pages</b>).
</td>
<td width="20%">String</td>
</tr>
<tr>
<td width="20%"><b>--withStyle</b></td>
<td width="60%">
Creates a corresponding stylesheet file with this page.
</td>
<td width="20%">Boolean</td>
</tr>
<tr>
<td width="20%"><b>--withTest</b></td>
<td width="60%">
Creates a corresponding test file with this page.
</td>
<td width="20%">Boolean</td>
</tr>
<tr>
<td width="20%"><b>--withStory</b></td>
<td width="60%">
Creates a corresponding (<a href="https://storybook.js.org">storybook</a>) story file with this page.
</td>
<td width="20%">Boolean</td>
</tr>
<tr>
<td width="20%"><b>--withLazy</b></td>
<td width="60%">
Creates a corresponding lazy file (a file that lazy-loads your page out of the box and enables <a href="https://reactjs.org/docs/code-splitting.html#code-splitting">code splitting</a>) with this page.
</td>
<td width="20%">Boolean</td>
</tr>
</table>
## License
Generate React CLI is open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).

56

src/cli.js

@@ -8,42 +8,40 @@ const program = require('commander');

const cliConfigFile = await getCLIConfigFile();
const { component, page } = cliConfigFile;
program.version(pkg.version);
// --- Generate component command
// --- Generate component commands
program
.command('component <name>')
.alias('c')
Object.keys(cliConfigFile).forEach((configKey) => {
const configValue = cliConfigFile[configKey];
.option('-p, --path <path>', 'The path where the component will get genereted in.', component.path)
.option('--withStyle <withStyle>', 'With corresponding stylesheet file.', component.withStyle)
.option('--withTest <withTest>', 'With corresponding test file.', component.withTest)
.option('--withStory <withStory>', 'With corresponding story file.', component.withStory)
.option('--withLazy <withLazy>', 'With corresponding lazy file.', component.withLazy)
/**
* Check if each configValue is a component config
* and if it is, register it as a component command.
*/
.action((componentName, cmd) => generateComponent(cmd, cliConfigFile, componentName));
if (
typeof configValue === 'object' &&
configValue.path !== undefined &&
configValue.withLazy !== undefined &&
configValue.withStory !== undefined &&
configValue.withStyle !== undefined &&
configValue.withTest !== undefined
) {
const commandName = configKey;
const commandOptions = configValue;
// --- Generate page command
program
.command(`${commandName} <name>`)
/**
* We can continue using the generateComponent method to generate pages.
* Afterall a page is a component at the end of the day.
*
* Eventually, if a page needs additional logic, we can create a new generatePage method.
*/
.option('-p, --path <path>', 'The path where the component will get genereted in.', commandOptions.path)
.option('--withStyle <withStyle>', 'With corresponding stylesheet file.', commandOptions.withStyle)
.option('--withTest <withTest>', 'With corresponding test file.', commandOptions.withTest)
.option('--withStory <withStory>', 'With corresponding story file.', commandOptions.withStory)
.option('--withLazy <withLazy>', 'With corresponding lazy file.', commandOptions.withLazy)
program
.command('page <name>')
.alias('p')
.action((componentName, cmd) => generateComponent(cmd, cliConfigFile, componentName));
}
});
.option('-p, --path <path>', 'The path where the page will get genereted in.', page.path)
.option('--withStyle <withStyle>', 'With corresponding stylesheet file.', page.withStyle)
.option('--withTest <withTest>', 'With corresponding test file.', page.withTest)
.option('--withStory <withStory>', 'With corresponding story file.', page.withStory)
.option('--withLazy <withLazy>', 'With corresponding lazy file.', page.withLazy)
.action((pageName, cmd) => generateComponent(cmd, cliConfigFile, pageName));
program.parse(args);
};

34

src/services/grcConfigService.js

@@ -70,37 +70,5 @@ const chalk = require('chalk');

// --- page level questions.
const pageLevelQuestions = [
{
type: 'input',
name: 'page.path',
message: 'Set the default path directory to where your pages will be generated in?',
default: () => 'src/pages',
},
{
type: 'confirm',
name: 'page.withStyle',
message: 'Would you like to create a corresponding stylesheet file with each page you generate?',
},
{
type: 'confirm',
name: 'page.withTest',
message: 'Would you like to create a corresponding test file with each page you generate?',
},
{
type: 'confirm',
name: 'page.withStory',
message: 'Would you like to create a corresponding story with each page you generate?',
},
{
type: 'confirm',
name: 'page.withLazy',
message:
'Would you like to create a corresponding lazy file (a file that lazy-loads your page out of the box and enables code splitting: https://reactjs.org/docs/code-splitting.html#code-splitting) with each page you generate?',
},
];
// --- merge all questions together.
const grcConfigQuestions = [...projectLevelQuestions, ...componentLevelQuestions, ...pageLevelQuestions];
const grcConfigQuestions = [...projectLevelQuestions, ...componentLevelQuestions];

@@ -107,0 +75,0 @@ async function createCLIConfigFile() {