generate-react-cli 7.0.4 → 7.1.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [7.1.0](https://github.com/arminbro/generate-react-cli/compare/v7.0.6...v7.1.0) (2022-03-15)
+
+
+### Features
+
+* adds dry-run flag to preview generated paths without writing files ([483aef2](https://github.com/arminbro/generate-react-cli/commit/483aef285a356bb02727d3c512d2e03e22b6493a))
+
+### [7.0.6](https://github.com/arminbro/generate-react-cli/compare/v7.0.5...v7.0.6) (2022-02-21)
+
+### [7.0.5](https://github.com/arminbro/generate-react-cli/compare/v7.0.4...v7.0.5) (2022-01-17)
+
 ### [7.0.4](https://github.com/arminbro/generate-react-cli/compare/v7.0.3...v7.0.4) (2021-08-07)
 
 

package/bin/generate-react

@@ -19,7 +19,7 @@ const isNotValidNodeVersion = () => {
   return false;
 };
 
-// --- Check if user is running Node 10 or higher.
+// --- Check if user is running Node 12 or higher.
 
 if (isNotValidNodeVersion()) {
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "7.0.4",
+  "version": "7.1.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",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "chalk": "^4.1.2",
-    "commander": "^8.1.0",
+    "commander": "^9.0.0",
     "deep-keys": "^0.5.0",
     "fs-extra": "^10.0.0",
     "inquirer": "^8.1.2",
@@ -48,11 +48,11 @@
   },
   "devDependencies": {
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint": "^8.7.0",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "prettier": "2.3.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "2.5.1",
     "rimraf": "^3.0.2",
     "standard-version": "^9.3.1"
   },

package/readme.md

@@ -13,6 +13,8 @@ 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). 
+
 **_A few notes:_**
 
 - Now supports custom component types ([read more](#custom-component-types)). 🎉
@@ -149,6 +151,14 @@ Otherwise, if you don't pass any options, it will just use the default values th
     <td width="20%">Boolean</td>
     <td width="20%"><code>component.default.withTest<code></td>
   </tr>
+  <tr>
+    <td width="20%"><b>--dry-run</b></td>
+    <td width="60%">
+      Show what will be generated without writing to disk
+    </td>
+    <td width="20%">Boolean</td>
+    <td width="20%"><code>false<code></td>
+  </tr>
 </table>
 
 ### Custom component types:
@@ -221,7 +231,15 @@ 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 keyword `templateName`, which will be replaced with your component name in camelCase.
+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 |
 
 #### Example of using the `customTemplates` object within your generate-react-cli.json config file:
 

package/src/commands/generateComponent.js

@@ -34,6 +34,8 @@ function initGenerateComponentCommand(args, cliConfigFile, program) {
     );
   });
 
+  componentCommand.option('--dry-run', 'Show what will be generated without writing to disk')
+
   // Component command action.
 
   componentCommand.action((componentNames, cmd) =>

package/src/templates/component/componentTsTemplate.js

@@ -1,7 +1,9 @@
-module.exports = `import React from 'react';
+module.exports = `import React, { FC } from 'react';
 import styles from './TemplateName.module.css';
 
-const TemplateName = () => (
+interface TemplateNameProps {}
+
+const TemplateName: FC<TemplateNameProps> = () => (
   <div className={styles.TemplateName} data-testid="TemplateName">
     TemplateName Component
   </div>

package/src/utils/generateComponentUtils.js

@@ -1,7 +1,7 @@
 const chalk = require('chalk');
 const path = require('path');
 const replace = require('replace');
-const { camelCase } = require('lodash');
+const { camelCase, kebabCase, snakeCase } = require('lodash');
 const { existsSync, outputFileSync, readFileSync } = require('fs-extra');
 
 const componentJsTemplate = require('../templates/component/componentJsTemplate');
@@ -355,23 +355,41 @@ function generateComponent(componentName, cmd, cliConfigFile) {
         console.error(chalk.red(`${filename} already exists in this path "${componentPath}".`));
       } else {
         try {
-          outputFileSync(componentPath, template);
-
-          replace({
-            regex: 'TemplateName',
-            replacement: componentName,
-            paths: [componentPath],
-            recursive: false,
-            silent: true,
-          });
-
-          replace({
-            regex: 'templateName',
-            replacement: camelCase(componentName),
-            paths: [componentPath],
-            recursive: false,
-            silent: true,
-          });
+          if (!cmd.dryRun) {
+            outputFileSync(componentPath, template);
+
+            replace({
+              regex: 'TemplateName',
+              replacement: componentName,
+              paths: [componentPath],
+              recursive: false,
+              silent: true,
+            });
+
+            replace({
+              regex: 'templateName',
+              replacement: camelCase(componentName),
+              paths: [componentPath],
+              recursive: false,
+              silent: true,
+            });
+
+            replace({
+              regex: 'template-name',
+              replacement: kebabCase(componentName),
+              paths: [componentPath],
+              recursive: false,
+              silent: true,
+            });
+
+            replace({
+              regex: 'template_name',
+              replacement: snakeCase(componentName),
+              paths: [componentPath],
+              recursive: false,
+              silent: true,
+            });
+          }
 
           console.log(chalk.green(`${filename} was successfully created at ${componentPath}`));
         } catch (error) {
@@ -381,6 +399,11 @@ function generateComponent(componentName, cmd, cliConfigFile) {
       }
     }
   });
+
+  if (cmd.dryRun) {
+    console.log()
+    console.log(chalk.yellow(`NOTE: The "dry-run" flag means no changes were made.`))
+  }
 }
 
 module.exports = {