generate-react-cli 7.2.0 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "A simple React CLI to generate components instantly and more.",
   "repository": "https://github.com/arminbro/generate-react-cli",
   "bugs": "https://github.com/arminbro/generate-react-cli/issues",
@@ -60,7 +60,7 @@
     "husky": "^7.0.4",
     "prettier": "2.5.1",
     "pretty-quick": "^3.1.3",
-    "semantic-release": "^18.0.0"
+    "semantic-release": "^19.0.3"
   },
   "prettier": {
     "singleQuote": true,

package/readme.md

@@ -13,7 +13,7 @@ To help speed up productivity in React projects and stop copying, pasting, and r
 
 A short [article](https://dev.to/arminbro/generate-react-cli-1ooh) that goes a little deeper into why we created GRC if you have the time.
 
-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).
 
 **_A few notes:_**
 
@@ -231,16 +231,7 @@ There is an optional `customTemplates` object that you can pass to the `componen
 },
 ```
 
-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.
-
-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 |
+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.
 
 #### Example of using the `customTemplates` object within your generate-react-cli.json config file:
 
@@ -296,7 +287,16 @@ const TemplateName = () => (
 export default TemplateName;
 ```
 
-**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:
 
@@ -315,6 +315,7 @@ it('It should mount', () => {
 ```
 
 ### 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`).
 
 What if you wanted to add custom files of your own?
@@ -358,7 +359,8 @@ export { default } from './TemplateName';
 ```css
 /* templates/default/TemplateName.stories.css */
 
-.TemplateName {}
+.TemplateName {
+}
 ```
 
 In this case, we added a `withIndex` & `withStoryStyle` to the `component.default`. Note: You can add custom files to any of your custom component types.

package/src/commands/generateComponent.js

@@ -1,5 +1,3 @@
-const { upperFirst } = require('lodash');
-
 const {
   generateComponent,
   getComponentByType,
@@ -34,12 +32,12 @@ function initGenerateComponentCommand(args, cliConfigFile, program) {
     );
   });
 
-  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');
 
   // Component command action.
 
   componentCommand.action((componentNames, cmd) =>
-    componentNames.forEach((componentName) => generateComponent(upperFirst(componentName), cmd, cliConfigFile))
+    componentNames.forEach((componentName) => generateComponent(componentName, cmd, cliConfigFile))
   );
 }
 

package/src/utils/generateComponentUtils.js

@@ -1,7 +1,7 @@
 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');
 
 const componentJsTemplate = require('../templates/component/componentJsTemplate');
@@ -358,14 +358,25 @@ function generateComponent(componentName, cmd, cliConfigFile) {
           if (!cmd.dryRun) {
             outputFileSync(componentPath, template);
 
+            // Will replace the templatename in whichever format the user typed the component name in the command.
             replace({
-              regex: 'TemplateName',
+              regex: 'templatename',
               replacement: componentName,
               paths: [componentPath],
               recursive: false,
               silent: true,
             });
 
+            // 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',
               replacement: camelCase(componentName),
@@ -374,6 +385,7 @@ function generateComponent(componentName, cmd, cliConfigFile) {
               silent: true,
             });
 
+            // Will replace the template-name in kebab-case
             replace({
               regex: 'template-name',
               replacement: kebabCase(componentName),
@@ -382,6 +394,7 @@ function generateComponent(componentName, cmd, cliConfigFile) {
               silent: true,
             });
 
+            // Will replace the template_name in snake_case
             replace({
               regex: 'template_name',
               replacement: snakeCase(componentName),
@@ -390,6 +403,7 @@ function generateComponent(componentName, cmd, cliConfigFile) {
               silent: true,
             });
 
+            // Will replace the TEMPLATE_NAME in uppercase SNAKE_CASE
             replace({
               regex: 'TEMPLATE_NAME',
               replacement: snakeCase(componentName).toUpperCase(),
@@ -409,8 +423,8 @@ function generateComponent(componentName, cmd, cliConfigFile) {
   });
 
   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.`));
   }
 }