diff --git a/ComponentFileContent.js b/ComponentFileContent.js index f6d4523..8f9b221 100644 --- a/ComponentFileContent.js +++ b/ComponentFileContent.js @@ -46,11 +46,11 @@ class ComponentFileContent { } // generate the part of "import React from 'react'"; #generateImportReact() { - return this.isImportReact ? `import React from 'react';\n` : ""; + return this.#hasImportReact ? `import React from 'react';\n` : ""; } // generate the part of props, considering if it is a ts file and if it is with props #generateProps() { - if (this.style === "ts" && this.isWithProps) { + if (this.style === "ts" && this.#hasProps) { return `interface Props {}\n`; } return ""; @@ -60,11 +60,10 @@ class ComponentFileContent { const importReactContent = this.#generateImportReact(); const propsObjectContent = this.#generateProps(); let propsParamContent = ""; - if (this.isWithProps) { + if (this.#hasProps) { propsParamContent = this.style === "ts" ? "{}:Props" : "props"; } - this.#content = ` -${importReactContent} + this.#content = `${importReactContent} ${propsObjectContent} function ${this.componentName}(${propsParamContent}) { return ( diff --git a/index.js b/index.js index 2c7bd6a..1ff37f0 100755 --- a/index.js +++ b/index.js @@ -1,44 +1,67 @@ #!/usr/bin/env node -const commander = require('commander'); -const fs = require('fs'); -const path = require('path'); +const commander = require("commander"); +const fs = require("fs"); +const path = require("path"); const program = new commander.Command(); program - .name('create-new-react-component') - .usage(' [options]') - .version('1.0.0') + .name("create-new-react-component") + .usage(" [options]") + .version("1.1.0") .description( "Create a new React component with an optional CSS file. " + - "The component will be created in a new directory with the same name as the component." + "The component will be created in a new directory with the same name as the component." ) - .arguments('', 'Name of the component to create') - .option('--withStyles', 'Create a CSS file for the component') - .option('--lang ', 'Choose the file style (js or ts)', 'js') - .action(createComponent); + .arguments("[componentName]", "Name of the component to create") + .option("--withStyles", "Create a CSS file for the component") + .option("--lang ", "Choose the file style (js or ts)", "js") + .option("--withProps", "Create a component with props") + .option( + "--withImportReact", + "Create a component with `import React from react`" + ) + .action((componentName, options) => { + createComponent(componentName, options); + }); function createComponent(componentName, options) { + if (!componentName) { + console.error('Error: is required.'); + process.exit(1); // Exit the process with an error code +} const componentDir = path.join(process.cwd(), componentName); const indexFilePath = path.join(componentDir, `index.${options.lang}`); - const componentFilePath = path.join(componentDir, `${componentName}.${options.lang}x`); + const componentFilePath = path.join( + componentDir, + `${componentName}.${options.lang}x` + ); const stylesFilePath = path.join(componentDir, `${componentName}.css`); const indexFileContent = `export { default } from './${componentName}';`; - const ComponentFileContent = require('./ComponentFileContent'); - const componentFileContent = new ComponentFileContent(componentName, options.withStyles, options.lang); - const componentFileContentContent = componentFileContent.generateComponentContent(); + const ComponentFileContent = require("./ComponentFileContent"); + const componentFileContent = new ComponentFileContent( + componentName, + options.withStyles, + options.lang, + options.withProps, + options.withImportReact + ); + const componentFileContentContent = + componentFileContent.generateComponentContent(); const stylesFileContent = `/* Add your component styles here */ .${componentName} { } `; + if (fs.existsSync(componentDir)) { console.error(`Component ${componentName} already exists`); return; } + try { fs.mkdirSync(componentDir); fs.writeFileSync(indexFilePath, indexFileContent); @@ -46,10 +69,14 @@ function createComponent(componentName, options) { if (options.withStyles) { fs.writeFileSync(stylesFilePath, stylesFileContent); } - console.log(`Component ${componentName} created successfully${options.withStyles ? ' with language' : ''} (${options.lang})`); + console.log( + `Component ${componentName} created successfully${ + options.withStyles ? " with language" : "" + } (${options.lang})` + ); } catch (err) { console.error(`Error creating component ${componentName}:`, err); } } -program.parse(process.argv); \ No newline at end of file +program.parse(process.argv); diff --git a/package.json b/package.json index 0abdd42..a4ed38c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-new-react-component", - "version": "1.0.7", + "version": "1.1.0", "description": "an utility to create a new react component with a single command", "main": "index.js", "scripts": { @@ -30,7 +30,7 @@ "tool", "generator" ], - "license": "ISC", + "license": "MIT", "devDependencies": { "jest": "^29.7.0" }