🚀 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

7.2.0
to
7.3.0

4

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

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

"pretty-quick": "^3.1.3",
"semantic-release": "^18.0.0"
"semantic-release": "^19.0.3"
},

@@ -66,0 +66,0 @@ "prettier": {

28

readme.md

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

Suppose you enjoy learning by watching tutorial videos. Here's an excellent [video](https://www.youtube.com/watch?v=NEvnt3MWttY) on how to use GRC by [Eric Murphy](https://www.youtube.com/channel/UC5KDiSAFxrDWhmysBcNqtMA).
Suppose you enjoy learning by watching tutorial videos. Here's an excellent [video](https://www.youtube.com/watch?v=NEvnt3MWttY) on how to use GRC by [Eric Murphy](https://www.youtube.com/channel/UC5KDiSAFxrDWhmysBcNqtMA).

@@ -235,13 +235,4 @@ **_A few notes:_**

The keys represent the type of file, and the values are the paths that point to where your custom template lives in your project/system. Please note the `TemplateName` keyword in the template filename. GRC will use this keyword and replace it with your component name as the filename.
The keys represent the type of file, and the values are the paths that point to where your custom template lives in your project/system. Please note the `TemplateName` keyword in the template filename. GRC will use this keyword and replace it with your component name (in whichever format you typed the component name in the command) as the filename.
You can also use the following keywords, which will be replaced with their corresponding formatted component name:
| Keyword | Replacement |
|-----------------|----------------------------------------|
| `templateName` | component name in camelCase |
| `template-name` | component name in kebab-case |
| `template_name` | component name in snake_case |
| `TEMPLATE_NAME` | component name in uppercase SNAKE_CASE |
#### Example of using the `customTemplates` object within your generate-react-cli.json config file:

@@ -301,4 +292,13 @@

**Important** - Make sure to use the `TemplateName` keyword in your templates as well. GRC will also use this keyword to replace it with your component name.
**Important** - You can also use the following keywords within your custom templates to format the component name in your templates accordingly:
| Keyword | Replacement |
| --------------- | ---------------------------------------------------------------------------------------------- |
| `templatename` | component name in raw case (whichever format the user typed the component name in the command) |
| `TemplateName` | component name in PascalCase |
| `templateName` | component name in camelCase |
| `template-name` | component name in kebab-case |
| `template_name` | component name in snake_case |
| `TEMPLATE_NAME` | component name in uppercase SNAKE_CASE |
#### Example of a custom test template file:

@@ -321,2 +321,3 @@

### Custom component files
GRC comes with corresponding built-in files for a given component if you need them (i.e., `withStyle`, `withTest`, `withStory`, and `withLazy`).

@@ -365,3 +366,4 @@

.TemplateName {}
.TemplateName {
}
```

@@ -368,0 +370,0 @@

6

src/commands/generateComponent.js

@@ -1,3 +0,1 @@

const { upperFirst } = require('lodash');
const {

@@ -37,3 +35,3 @@ generateComponent,

componentCommand.option('--dry-run', 'Show what will be generated without writing to disk')
componentCommand.option('--dry-run', 'Show what will be generated without writing to disk');

@@ -43,3 +41,3 @@ // Component command action.

componentCommand.action((componentNames, cmd) =>
componentNames.forEach((componentName) => generateComponent(upperFirst(componentName), cmd, cliConfigFile))
componentNames.forEach((componentName) => generateComponent(componentName, cmd, cliConfigFile))
);

@@ -46,0 +44,0 @@ }

22

src/utils/generateComponentUtils.js
const chalk = require('chalk');
const path = require('path');
const replace = require('replace');
const { camelCase, kebabCase, snakeCase } = require('lodash');
const { camelCase, kebabCase, snakeCase, upperFirst } = require('lodash');
const { existsSync, outputFileSync, readFileSync } = require('fs-extra');

@@ -361,4 +361,5 @@

// Will replace the templatename in whichever format the user typed the component name in the command.
replace({
regex: 'TemplateName',
regex: 'templatename',
replacement: componentName,

@@ -370,3 +371,13 @@ paths: [componentPath],

// Will replace the TemplateName in PascalCase
replace({
regex: 'TemplateName',
replacement: upperFirst(camelCase(componentName)),
paths: [componentPath],
recursive: false,
silent: true,
});
// Will replace the templateName in camelCase
replace({
regex: 'templateName',

@@ -379,2 +390,3 @@ replacement: camelCase(componentName),

// Will replace the template-name in kebab-case
replace({

@@ -388,2 +400,3 @@ regex: 'template-name',

// Will replace the template_name in snake_case
replace({

@@ -397,2 +410,3 @@ regex: 'template_name',

// Will replace the TEMPLATE_NAME in uppercase SNAKE_CASE
replace({

@@ -417,4 +431,4 @@ regex: 'TEMPLATE_NAME',

if (cmd.dryRun) {
console.log()
console.log(chalk.yellow(`NOTE: The "dry-run" flag means no changes were made.`))
console.log();
console.log(chalk.yellow(`NOTE: The "dry-run" flag means no changes were made.`));
}

@@ -421,0 +435,0 @@ }