From 533d80135d4fed67f4f07931be60418299205139 Mon Sep 17 00:00:00 2001 From: Omar Guerrero Date: Mon, 15 Jul 2019 16:17:38 -0500 Subject: [PATCH 1/2] feat: added "c" as an alias for component command Now the cli allows "c" as first first param --- bin/reacli.js | 35 +++++- package-lock.json | 39 ++++-- package.json | 2 +- test/integration-tests/component.test.js | 147 +++++++++++++++++++++++ 4 files changed, 205 insertions(+), 18 deletions(-) diff --git a/bin/reacli.js b/bin/reacli.js index f134ec9..d8247bc 100644 --- a/bin/reacli.js +++ b/bin/reacli.js @@ -20,6 +20,7 @@ const createElement = async ({ firstParam = null, pathsToComponentsToCreate = [] if (validatePath(path) && validateName(path)) { try { switch (firstParam) { + case "c": case "component": promises.push(createComponent(path, options)) break; @@ -40,6 +41,22 @@ const createElement = async ({ firstParam = null, pathsToComponentsToCreate = [] await Promise.all(promises) } +const outputHelpDetails = () => { + console.log("") + console.log("Commands:") + console.log(" component [path(s)] [options]") + console.log(" c [path(s)] [options]") + console.log(" hook [path(s)] [options]") + console.log("") + console.log("Examples:") + console.log(" Interactive CLI:") + console.log(" $ reacli") + console.log(" Create a component using Redux and Scss:") + console.log(" $ reacli component ./my-path/my-component --redux --scss") + console.log(" Create two hooks:") + console.log(" $ reacli hook ./my-hook1 ./my-hook-2") +} + const reactCli = async () => { // Welcome message @@ -54,12 +71,18 @@ const reactCli = async () => { // Define cli options program .version(cliVersion) - .option("-f, --flow", "Add flow to the template") - .option("--scss", "Use SCSS instead of classic css") - .option("--redux", "Add Redux to the template") - .option("-i, --ignore-config-file", "Ignore the '.reacli' optional configuration file") - .option("--extension [value]", "The file extension to use for the templates ('js' or 'jsx')") - .parse(process.argv) + .description("React CLI to create things really fast") + .usage(" [path(s)] [options]") + .option("-f, --flow", "add flow to the template") + .option("--scss", "use SCSS instead of classic css") + .option("--redux", "add Redux to the template") + .option("-i, --ignore-config-file", "ignore the '.reacli' optional configuration file") + .option("--extension [value]", "the file extension to use for the templates ('js' or 'jsx')"); + + program.on("--help", outputHelpDetails); + + program.parse(process.argv); + let options = {} const { args } = program diff --git a/package-lock.json b/package-lock.json index 8055483..b46573e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "reacli", - "version": "1.6.5", + "version": "1.6.7", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -56,13 +56,15 @@ "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "dev": true + "dev": true, + "optional": true }, "braces": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", "dev": true, + "optional": true, "requires": { "arr-flatten": "^1.1.0", "array-unique": "^0.3.2", @@ -81,6 +83,7 @@ "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, + "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -253,6 +256,7 @@ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", "dev": true, + "optional": true, "requires": { "extend-shallow": "^2.0.1", "is-number": "^3.0.0", @@ -265,6 +269,7 @@ "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, + "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -330,7 +335,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "4.0.0", @@ -347,6 +353,7 @@ "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2" }, @@ -356,6 +363,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -366,13 +374,15 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "dev": true + "dev": true, + "optional": true }, "kind-of": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", - "dev": true + "dev": true, + "optional": true }, "micromatch": { "version": "3.1.10", @@ -3271,7 +3281,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3736,7 +3747,8 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3800,6 +3812,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3848,13 +3861,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true + "dev": true, + "optional": true } } }, @@ -7565,7 +7580,8 @@ "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "dev": true + "dev": true, + "optional": true }, "braces": { "version": "2.3.2", @@ -7828,7 +7844,8 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", - "dev": true + "dev": true, + "optional": true }, "micromatch": { "version": "3.1.10", diff --git a/package.json b/package.json index 041bdd7..1bf3628 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reacli", - "version": "1.6.6", + "version": "1.6.7", "description": "A simple and straightforward React boilerplate CLI", "main": "./dist/bin/reacli.js", "scripts": { diff --git a/test/integration-tests/component.test.js b/test/integration-tests/component.test.js index 0623618..c938a39 100644 --- a/test/integration-tests/component.test.js +++ b/test/integration-tests/component.test.js @@ -172,4 +172,151 @@ describe("Component creation with CLI", () => { }) }) }) +}) + +describe("Component creation with CLI alias", () => { + test("reacli c ./simple-component", (testDone) => { + const fixture = new Tacks(Dir()) + const componentName = "simple-component" + const expectedPath = path.resolve(__dirname, "..", "fixtures", componentName) + const componentPath = path.resolve(`${fixturePath}/${componentName}`) + + withFixture(testDone, fixture, (done) => { + common(["c", componentPath], { + cwd: fixturePath, + }, (err, code, stdout, stderr) => { + const { same } = dircompare.compareSync(expectedPath, componentPath); + + expect(same).toBeTruthy() + expect(code).toEqual(0) + done() + }) + }) + }) + + test("reacli c ./flow-component --flow", (testDone) => { + const fixture = new Tacks(Dir()) + const componentName = "flow-component" + const expectedPath = path.resolve(__dirname, "..", "fixtures", componentName) + const componentPath = path.resolve(`${fixturePath}/${componentName}`) + + withFixture(testDone, fixture, (done) => { + common(["c", componentPath, "--flow"], { + cwd: fixturePath, + }, (err, code, stdout, stderr) => { + const { same } = dircompare.compareSync(expectedPath, componentPath); + + expect(same).toBeTruthy() + expect(code).toEqual(0) + done() + }) + }) + }) + + test("reacli c ./redux-component --redux", (testDone) => { + const fixture = new Tacks(Dir()) + const componentName = "redux-component" + const expectedPath = path.resolve(__dirname, "..", "fixtures", componentName) + const componentPath = path.resolve(`${fixturePath}/${componentName}`) + + withFixture(testDone, fixture, (done) => { + common(["c", componentPath, "--redux"], { + cwd: fixturePath, + }, (err, code, stdout, stderr) => { + const { same } = dircompare.compareSync(expectedPath, componentPath); + + expect(same).toBeTruthy() + expect(code).toEqual(0) + done() + }) + }) + }) + + test("reacli c ./scss-component --scss", (testDone) => { + const fixture = new Tacks(Dir()) + const componentName = "scss-component" + const expectedPath = path.resolve(__dirname, "..", "fixtures", componentName) + const componentPath = path.resolve(`${fixturePath}/${componentName}`) + + withFixture(testDone, fixture, (done) => { + common(["c", componentPath, "--scss"], { + cwd: fixturePath, + }, (err, code, stdout, stderr) => { + const { same } = dircompare.compareSync(expectedPath, componentPath); + + expect(same).toBeTruthy() + expect(code).toEqual(0) + done() + }) + }) + }) + + test("reacli c ./combination-component --redux --scss", (testDone) => { + const fixture = new Tacks(Dir()) + const componentName = "combination-component" + const expectedPath = path.resolve(__dirname, "..", "fixtures", componentName) + const componentPath = path.resolve(`${fixturePath}/${componentName}`) + + withFixture(testDone, fixture, (done) => { + common(["c", componentPath, "--redux", "--scss"], { + cwd: fixturePath, + }, (err, code, stdout, stderr) => { + const { same } = dircompare.compareSync(expectedPath, componentPath); + + expect(same).toBeTruthy() + expect(code).toEqual(0) + done() + }) + }) + }) + + test("reacli c ./extension-js-component --extension js", (testDone) => { + const fixture = new Tacks(Dir()) + const componentName = "extension-js-component" + const expectedPath = path.resolve(__dirname, "..", "fixtures", componentName) + const componentPath = path.resolve(`${fixturePath}/${componentName}`) + + withFixture(testDone, fixture, (done) => { + common(["c", componentPath, "--extension", "js"], { + cwd: fixturePath, + }, (err, code, stdout, stderr) => { + const { same } = dircompare.compareSync(expectedPath, componentPath); + + expect(same).toBeTruthy() + expect(code).toEqual(0) + done() + }) + }) + }) + + test("reacli c ./pre-configured-component", (testDone) => { + const fixture = new Tacks(Dir({ + "package.json": File({ + name: "this-is-a-cool-test", + }), + ".reacli": File({ + redux: true, + flow: true, + scss: true, + extension: "js", + }), + })) + + + const componentName = "pre-configured-component" + const expectedPath = path.resolve(__dirname, "..", "fixtures", componentName) + const componentPath = path.resolve(`${fixturePath}/${componentName}`) + + withFixture(testDone, fixture, (done) => { + common(["c", componentPath], { + cwd: fixturePath, + }, (err, code, stdout, stderr) => { + const { same } = dircompare.compareSync(expectedPath, componentPath); + + expect(same).toBeTruthy() + expect(code).toEqual(0) + done() + }) + }) + }) }) \ No newline at end of file From 50798dd2b2f897c4d9a32db69d04b46e58bee5da Mon Sep 17 00:00:00 2001 From: Omar Guerrero Date: Sat, 20 Jul 2019 10:13:38 -0500 Subject: [PATCH 2/2] refactor: using if - else instead of switch - case in commands selection --- bin/reacli.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/bin/reacli.js b/bin/reacli.js index 6b6f21e..5e85ad7 100644 --- a/bin/reacli.js +++ b/bin/reacli.js @@ -19,16 +19,12 @@ const createElement = async ({ firstParam = null, pathsToComponentsToCreate = [] if (validatePath(path) && validateName(path)) { try { - switch (firstParam) { - case "component": + if (firstParam === "component") { promises.push(createComponent(path, options)) - break; - case "hook": + } else if (firstParam === "hook") { promises.push(createHook(path, options)) - break; - default: + } else { program.outputHelp() - break; } } catch (error) { console.log("ERROR: ", error)