generate-react-cli 7.3.0 → 8.0.0

package/bin/{generate-react → generate-react.js}

@@ -1,16 +1,17 @@
 #!/usr/bin/env node
+import cli from '../src/cli.js';
 
 const isNotValidNodeVersion = () => {
   const currentNodeVersion = process.versions.node;
   const semver = currentNodeVersion.split('.');
   const major = semver[0];
 
-  if (major < 12) {
+  if (major < 16) {
     console.error(
       // eslint-disable-next-line
       'You are running Node ' +
         currentNodeVersion +
-        ' Generate React CLI requires Node 12 or higher. Please update your version of Node.'
+        ' Generate React CLI requires Node 16 or higher. Please update your version of Node.'
     );
 
     return true;
@@ -25,4 +26,4 @@ if (isNotValidNodeVersion()) {
   process.exit(1);
 }
 
-require('../src/cli')(process.argv);
+cli(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "7.3.0",
+  "version": "8.0.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",
@@ -8,8 +8,9 @@
   "license": "MIT",
   "main": "bin/generate-react",
   "bin": {
-    "generate-react": "bin/generate-react"
+    "generate-react": "bin/generate-react.js"
   },
+  "type": "module",
   "files": [
     "bin/",
     "src/",
@@ -37,30 +38,30 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "chalk": "^4.1.2",
-    "commander": "^9.0.0",
-    "deep-keys": "^0.5.0",
-    "fs-extra": "^10.0.0",
-    "inquirer": "^8.1.2",
-    "lodash": "^4.17.20",
-    "replace": "^1.2.0"
+    "chalk": "5.1.2",
+    "commander": "9.4.1",
+    "deep-keys": "0.5.0",
+    "fs-extra": "10.1.0",
+    "inquirer": "9.1.4",
+    "lodash": "4.17.21",
+    "replace": "1.2.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.2.1",
-    "@commitlint/config-conventional": "^13.2.0",
-    "@semantic-release/commit-analyzer": "^9.0.1",
-    "@semantic-release/git": "^10.0.0",
-    "@semantic-release/github": "^8.0.1",
-    "@semantic-release/npm": "^8.0.0",
-    "@semantic-release/release-notes-generator": "^10.0.2",
-    "eslint": "^8.7.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^7.0.4",
-    "prettier": "2.5.1",
-    "pretty-quick": "^3.1.3",
-    "semantic-release": "^19.0.3"
+    "@commitlint/cli": "17.1.2",
+    "@commitlint/config-conventional": "17.1.0",
+    "@semantic-release/commit-analyzer": "9.0.2",
+    "@semantic-release/git": "10.0.1",
+    "@semantic-release/github": "8.0.6",
+    "@semantic-release/npm": "9.0.1",
+    "@semantic-release/release-notes-generator": "10.0.3",
+    "eslint": "8.26.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "husky": "8.0.1",
+    "prettier": "2.7.1",
+    "pretty-quick": "3.1.3",
+    "semantic-release": "19.0.5"
   },
   "prettier": {
     "singleQuote": true,
@@ -98,13 +99,18 @@
       "plugin:prettier/recommended"
     ],
     "env": {
-      "commonjs": true,
-      "es2021": true,
+      "commonjs": false,
       "node": true
     },
     "parserOptions": {
-      "ecmaVersion": 12
+      "ecmaVersion": "latest"
     },
-    "rules": {}
+    "rules": {
+      "import/extensions": [
+        {
+          "js": "always"
+        }
+      ]
+    }
   }
 }

package/readme.md

@@ -1,6 +1,5 @@
 # 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)
 
 <p align="center"> 
@@ -159,6 +158,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>false<code></td>
   </tr>
+  <tr>
+    <td width="20%"><b>--flat</b></td>
+    <td width="60%">
+      Generate the files in the mentioned path insted of creating new folder for it
+    </td>
+    <td width="20%">Boolean</td>
+    <td width="20%"><code>false<code></td>
+  </tr>
 </table>
 
 ### Custom component types:

package/src/cli.js

@@ -1,11 +1,13 @@
-const program = require('commander');
+import { program } from 'commander';
+import { createRequire } from 'module';
 
-const pkg = require('../package.json');
-const { initGenerateComponentCommand } = require('./commands/generateComponent');
-const { getCLIConfigFile } = require('./utils/grcConfigUtils');
+import initGenerateComponentCommand from './commands/generateComponent.js';
+import { getCLIConfigFile } from './utils/grcConfigUtils.js';
 
-module.exports = async function cli(args) {
+export default async function cli(args) {
   const cliConfigFile = await getCLIConfigFile();
+  const localRequire = createRequire(import.meta.url);
+  const pkg = localRequire('../package.json');
 
   // Initialize generate component command
 
@@ -13,4 +15,4 @@ module.exports = async function cli(args) {
 
   program.version(pkg.version);
   program.parse(args);
-};
+}

package/src/cli.test.js

@@ -1,4 +1,4 @@
-const cli = require('./cli');
+import cli from './cli';
 
 describe('cli', () => {
   it('should be defined.', () => {

package/src/commands/generateComponent.js

@@ -1,10 +1,10 @@
-const {
+import {
   generateComponent,
   getComponentByType,
   getCorrespondingComponentFileTypes,
-} = require('../utils/generateComponentUtils');
+} from '../utils/generateComponentUtils.js';
 
-function initGenerateComponentCommand(args, cliConfigFile, program) {
+export default function initGenerateComponentCommand(args, cliConfigFile, program) {
   const selectedComponentType = getComponentByType(args, cliConfigFile);
 
   const componentCommand = program
@@ -18,7 +18,8 @@ function initGenerateComponentCommand(args, cliConfigFile, program) {
       '--type <type>',
       'You can pass a component type that you have configured in your GRC config file.',
       'default'
-    );
+    )
+    .option('-f, --flat', 'Generate the files in the mentioned path insted of creating new folder for it', false);
 
   // Dynamic component command option defaults.
 
@@ -40,7 +41,3 @@ function initGenerateComponentCommand(args, cliConfigFile, program) {
     componentNames.forEach((componentName) => generateComponent(componentName, cmd, cliConfigFile))
   );
 }
-
-module.exports = {
-  initGenerateComponentCommand,
-};

package/src/templates/component/componentCssTemplate.js

@@ -1 +1 @@
-module.exports = `.TemplateName {}`;
+export default `.TemplateName {}`;

package/src/templates/component/componentJsTemplate.js

@@ -1,4 +1,4 @@
-module.exports = `import React from 'react';
+export default `import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './TemplateName.module.css';
 

package/src/templates/component/componentLazyTemplate.js

@@ -1,4 +1,4 @@
-module.exports = `import React, { lazy, Suspense } from 'react';
+export default `import React, { lazy, Suspense } from 'react';
 
 const LazyTemplateName = lazy(() => import('./TemplateName'));
 

package/src/templates/component/componentStoryTemplate.js

@@ -1,4 +1,4 @@
-module.exports = `/* eslint-disable */
+export default `/* eslint-disable */
 import TemplateName from './TemplateName';
 
 export default {

package/src/templates/component/componentTestDefaultTemplate.js

@@ -1,4 +1,4 @@
-module.exports = `import React from 'react';
+export default `import React from 'react';
 import ReactDOM from 'react-dom';
 import TemplateName from './TemplateName';
 

package/src/templates/component/componentTestEnzymeTemplate.js

@@ -1,4 +1,4 @@
-module.exports = `import React from 'react';
+export default `import React from 'react';
 import { shallow } from 'enzyme';
 import TemplateName from './TemplateName';
 

package/src/templates/component/componentTestTestingLibraryTemplate.js

@@ -1,4 +1,4 @@
-module.exports = `import React from 'react';
+export default `import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import TemplateName from './TemplateName';

package/src/templates/component/componentTsLazyTemplate.js

@@ -1,4 +1,4 @@
-module.exports = `import React, { lazy, Suspense } from 'react';
+export default `import React, { lazy, Suspense } from 'react';
 
 const LazyTemplateName = lazy(() => import('./TemplateName'));
 

package/src/templates/component/componentTsTemplate.js

@@ -1,4 +1,4 @@
-module.exports = `import React, { FC } from 'react';
+export default `import React, { FC } from 'react';
 import styles from './TemplateName.module.css';
 
 interface TemplateNameProps {}

package/src/utils/generateComponentUtils.js

@@ -1,20 +1,25 @@
-const chalk = require('chalk');
-const path = require('path');
-const replace = require('replace');
-const { camelCase, kebabCase, snakeCase, upperFirst } = require('lodash');
-const { existsSync, outputFileSync, readFileSync } = require('fs-extra');
-
-const componentJsTemplate = require('../templates/component/componentJsTemplate');
-const componentTsTemplate = require('../templates/component/componentTsTemplate');
-const componentCssTemplate = require('../templates/component/componentCssTemplate');
-const componentLazyTemplate = require('../templates/component/componentLazyTemplate');
-const componentTsLazyTemplate = require('../templates/component/componentTsLazyTemplate');
-const componentStoryTemplate = require('../templates/component/componentStoryTemplate');
-const componentTestEnzymeTemplate = require('../templates/component/componentTestEnzymeTemplate');
-const componentTestDefaultTemplate = require('../templates/component/componentTestDefaultTemplate');
-const componentTestTestingLibraryTemplate = require('../templates/component/componentTestTestingLibraryTemplate');
-
-function getComponentByType(args, cliConfigFile) {
+import chalk from 'chalk';
+import path from 'path';
+import replace from 'replace';
+import camelCase from 'lodash/camelCase.js';
+import kebabCase from 'lodash/kebabCase.js';
+import snakeCase from 'lodash/snakeCase.js';
+import upperFirst from 'lodash/upperCase.js';
+import fsExtra from 'fs-extra';
+
+import componentJsTemplate from '../templates/component/componentJsTemplate.js';
+import componentTsTemplate from '../templates/component/componentTsTemplate.js';
+import componentCssTemplate from '../templates/component/componentCssTemplate.js';
+import componentLazyTemplate from '../templates/component/componentLazyTemplate.js';
+import componentTsLazyTemplate from '../templates/component/componentTsLazyTemplate.js';
+import componentStoryTemplate from '../templates/component/componentStoryTemplate.js';
+import componentTestEnzymeTemplate from '../templates/component/componentTestEnzymeTemplate.js';
+import componentTestDefaultTemplate from '../templates/component/componentTestDefaultTemplate.js';
+import componentTestTestingLibraryTemplate from '../templates/component/componentTestTestingLibraryTemplate.js';
+
+const { existsSync, outputFileSync, readFileSync } = fsExtra;
+
+export function getComponentByType(args, cliConfigFile) {
   const hasComponentTypeOption = args.find((arg) => arg.includes('--type'));
 
   // Check for component type option.
@@ -48,7 +53,7 @@ function getComponentByType(args, cliConfigFile) {
   return cliConfigFile.component.default;
 }
 
-function getCorrespondingComponentFileTypes(component) {
+export function getCorrespondingComponentFileTypes(component) {
   return Object.keys(component).filter((key) => key.split('with').length > 1);
 }
 
@@ -127,7 +132,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile }) {
   }
 
   return {
-    componentPath: `${cmd.path}/${componentName}/${filename}`,
+    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
     filename,
     template,
   };
@@ -162,7 +167,7 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName })
   }
 
   return {
-    componentPath: `${cmd.path}/${componentName}/${filename}`,
+    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
     filename,
     template,
   };
@@ -201,7 +206,7 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName }) {
   }
 
   return {
-    componentPath: `${cmd.path}/${componentName}/${filename}`,
+    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
     filename,
     template,
   };
@@ -233,7 +238,7 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName })
   }
 
   return {
-    componentPath: `${cmd.path}/${componentName}/${filename}`,
+    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
     filename,
     template,
   };
@@ -265,7 +270,7 @@ function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile }) {
   }
 
   return {
-    componentPath: `${cmd.path}/${componentName}/${filename}`,
+    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
     filename,
     template,
   };
@@ -303,7 +308,7 @@ Please make sure you're pointing to the right custom template path in your gener
   filename = customTemplateFilename;
 
   return {
-    componentPath: `${cmd.path}/${componentName}/${filename}`,
+    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
     filename,
     template,
   };
@@ -329,7 +334,7 @@ const componentTemplateGeneratorMap = {
   [buildInComponentFileTypes.LAZY]: componentLazyTemplateGenerator,
 };
 
-function generateComponent(componentName, cmd, cliConfigFile) {
+export function generateComponent(componentName, cmd, cliConfigFile) {
   const componentFileTypes = ['component', ...getCorrespondingComponentFileTypes(cmd)];
 
   componentFileTypes.forEach((componentFileType) => {
@@ -427,9 +432,3 @@ function generateComponent(componentName, cmd, cliConfigFile) {
     console.log(chalk.yellow(`NOTE: The "dry-run" flag means no changes were made.`));
   }
 }
-
-module.exports = {
-  generateComponent,
-  getComponentByType,
-  getCorrespondingComponentFileTypes,
-};

package/src/utils/grcConfigUtils.js

@@ -1,8 +1,12 @@
-const chalk = require('chalk');
-const deepKeys = require('deep-keys');
-const { prompt } = require('inquirer');
-const { merge } = require('lodash');
-const { accessSync, constants, outputFileSync, readFileSync } = require('fs-extra');
+import chalk from 'chalk';
+
+import deepKeys from 'deep-keys';
+import inquirer from 'inquirer';
+import merge from 'lodash/merge.js';
+import fsExtra from 'fs-extra';
+
+const { accessSync, constants, outputFileSync, readFileSync } = fsExtra;
+const { prompt } = inquirer;
 
 // Generate React Config file questions.
 
@@ -35,7 +39,7 @@ const projectLevelQuestions = [
 
 // --- component level questions.
 
-const componentLevelQuestions = [
+export const componentLevelQuestions = [
   {
     type: 'input',
     name: 'component.default.path',
@@ -162,7 +166,7 @@ async function updateCLIConfigFile(missingConfigQuestions, currentConfigFile) {
   }
 }
 
-async function getCLIConfigFile() {
+export async function getCLIConfigFile() {
   // --- Make sure the cli commands are running from the root level of the project
 
   try {
@@ -200,8 +204,3 @@ async function getCLIConfigFile() {
     return process.exit(1);
   }
 }
-
-module.exports = {
-  componentLevelQuestions,
-  getCLIConfigFile,
-};