From 7be984f9e5015ea537b8af6fec0a55e5db2ae3c4 Mon Sep 17 00:00:00 2001
From: yashpandit <yashpandit1995@gmail.com>
Date: Sun, 12 Jan 2020 22:33:26 +0530
Subject: [PATCH 1/4] Add CRA Generator
---
generator.js | 21 +++++----
lib/constants.js | 17 ++++++++
lib/generators/create-react-app.js | 45 ++++++++++++++++++++
lib/spawn.js | 22 ++++++++++
package.json | 5 ++-
templates/create-react-app/public/index.html | 20 +++++++++
6 files changed, 121 insertions(+), 9 deletions(-)
create mode 100644 lib/constants.js
create mode 100644 lib/generators/create-react-app.js
create mode 100644 lib/spawn.js
create mode 100644 templates/create-react-app/public/index.html
diff --git a/generator.js b/generator.js
index 8e2888c..b2f32f8 100644
--- a/generator.js
+++ b/generator.js
@@ -3,10 +3,16 @@
var path = require('path');
var isValid = require('is-valid-app');
-module.exports = function(app) {
+module.exports = app => {
// return if the generator is already registered
if (!isValid(app, 'generate-react')) return;
+ app.use(require('generate-project'));
+ app.register(
+ 'create-react-app',
+ require('./lib/generators/create-react-app')
+ );
+
/**
* Generate a `index.js` file to the current working directory. Learn how to [customize
* behavior(#customization) or override built-in templates.
@@ -18,8 +24,6 @@ module.exports = function(app) {
* @api public
*/
- task(app, 'react', 'index.js');
-
/**
* Alias for running the [react](#react) task with the following command:
*
@@ -30,18 +34,19 @@ module.exports = function(app) {
* @api public
*/
- app.task('default', ['react']);
+ app.task('default', ['project']);
};
/**
* Create a task with the given `name` and glob `pattern`
*/
-function task(app, name, pattern) {
- app.task(name, function() {
- return app.src(pattern, {cwd: __dirname})
+function task(app, name, pattern, dest = '') {
+ app.task(name, () => {
+ return app
+ .src(pattern, { cwd: __dirname })
.pipe(app.renderFile('*'))
.pipe(app.conflicts(app.cwd))
- .pipe(app.dest(app.cwd));
+ .pipe(app.dest(path.join(app.cwd, dest)));
});
}
diff --git a/lib/constants.js b/lib/constants.js
new file mode 100644
index 0000000..9c7eb9b
--- /dev/null
+++ b/lib/constants.js
@@ -0,0 +1,17 @@
+module.exports = {
+ YARN: "yarn",
+ NPM: "npm",
+ NPX: "npx",
+ ADD: "add",
+ INSTALL: "install",
+ CREATE_REACT_APP: "create-react-app",
+ REDUX: "redux",
+ REACT_REDUX: "react-redux",
+ MOBX: "mobx",
+ STYLED_COMPONENTS: "styled-components",
+ SCSS: "node-sass",
+ LESS: "less",
+ ROUTER: "react-router-dom",
+ ENZYME: "enzyme",
+ JEST: "jest"
+};
diff --git a/lib/generators/create-react-app.js b/lib/generators/create-react-app.js
new file mode 100644
index 0000000..96b62e1
--- /dev/null
+++ b/lib/generators/create-react-app.js
@@ -0,0 +1,45 @@
+const spawn = require("../spawn");
+const path = require("path");
+const { prompt } = require("enquirer");
+const { NPX, CREATE_REACT_APP } = require("../constants.js");
+
+module.exports = app => {
+ app.task("create-react-app", async () => {
+ let dest = app.options.name;
+ if (!dest) {
+ const answers = await prompt({
+ type: "text",
+ name: "appName",
+ message: "What would you like the app name to be?"
+ });
+ dest = answers.appName;
+ }
+ await spawn(NPX, [CREATE_REACT_APP, dest]);
+ });
+
+ app.task("create-react-app-templates", async () => {
+ const dest = path.join(app.cwd, app.options.name);
+ const answers = await prompt([
+ {
+ type: "text",
+ name: "description",
+ message: "What description would you like to use for your website?"
+ },
+ {
+ type: "text",
+ name: "title",
+ message: "What title would you like to use for your website?"
+ }
+ ]);
+
+ return app
+ .src("create-react-app/public/*.*", {
+ cwd: path.join(__dirname, "../../templates")
+ })
+ .pipe(app.renderFile("*", answers).on("error", console.error))
+ .pipe(app.conflicts(dest))
+ .pipe(app.dest(dest));
+ });
+
+ app.task("default", ["create-react-app", "create-react-app-templates"]);
+};
diff --git a/lib/spawn.js b/lib/spawn.js
new file mode 100644
index 0000000..68a5d27
--- /dev/null
+++ b/lib/spawn.js
@@ -0,0 +1,22 @@
+"use strict";
+
+const spawn = require("child_process").spawn;
+
+const defaults = {
+ stdio: "inherit",
+ cwd: process.cwd()
+};
+
+// simple wrapper around cli commands
+module.exports = async (cmd, args, options) => {
+ return new Promise((resolve, reject) => {
+ const cp = spawn(cmd, args, { ...defaults, ...options });
+ cp.on("error", reject);
+ cp.on("close", code => {
+ if (code > 0) {
+ return reject(code);
+ }
+ resolve(code);
+ });
+ });
+};
diff --git a/package.json b/package.json
index 5d313b8..051ff71 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,10 @@
"test": "mocha"
},
"dependencies": {
- "is-valid-app": "^0.3.0"
+ "is-valid-app": "^0.3.0",
+ "enquirer": "^2.3.2",
+ "generate": "^0.14.0",
+ "generate-project": "^1.0.0"
},
"keywords": [
"generate",
diff --git a/templates/create-react-app/public/index.html b/templates/create-react-app/public/index.html
new file mode 100644
index 0000000..b1daeb7
--- /dev/null
+++ b/templates/create-react-app/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="theme-color" content="#000000" />
+ <meta
+ name="description"
+ content="<%= description %>"
+ />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <title><%= title %></title>
+ </head>
+ <body>
+ <noscript>You need to enable JavaScript to run this app.</noscript>
+ <div id="root"></div>
+ </body>
+</html>
From 963457aba2587289dc5638b6269d77fd507b4b2d Mon Sep 17 00:00:00 2001
From: yashpandit <yashpandit1995@gmail.com>
Date: Tue, 14 Jan 2020 18:23:43 +0530
Subject: [PATCH 2/4] Solve linting issues
---
generator.js | 5 +----
lib/constants.js | 30 +++++++++++++++---------------
lib/spawn.js | 10 +++++-----
package.json | 4 ++--
4 files changed, 23 insertions(+), 26 deletions(-)
diff --git a/generator.js b/generator.js
index b2f32f8..96aad09 100644
--- a/generator.js
+++ b/generator.js
@@ -8,10 +8,7 @@ module.exports = app => {
if (!isValid(app, 'generate-react')) return;
app.use(require('generate-project'));
- app.register(
- 'create-react-app',
- require('./lib/generators/create-react-app')
- );
+ app.register('create-react-app', require('./lib/generators/create-react-app'));
/**
* Generate a `index.js` file to the current working directory. Learn how to [customize
diff --git a/lib/constants.js b/lib/constants.js
index 9c7eb9b..51b2484 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -1,17 +1,17 @@
module.exports = {
- YARN: "yarn",
- NPM: "npm",
- NPX: "npx",
- ADD: "add",
- INSTALL: "install",
- CREATE_REACT_APP: "create-react-app",
- REDUX: "redux",
- REACT_REDUX: "react-redux",
- MOBX: "mobx",
- STYLED_COMPONENTS: "styled-components",
- SCSS: "node-sass",
- LESS: "less",
- ROUTER: "react-router-dom",
- ENZYME: "enzyme",
- JEST: "jest"
+ YARN: 'yarn',
+ NPM: 'npm',
+ NPX: 'npx',
+ ADD: 'add',
+ INSTALL: 'install',
+ CREATE_REACT_APP: 'create-react-app',
+ REDUX: 'redux',
+ REACT_REDUX: 'react-redux',
+ MOBX: 'mobx',
+ STYLED_COMPONENTS: 'styled-components',
+ SCSS: 'node-sass',
+ LESS: 'less',
+ ROUTER: 'react-router-dom',
+ ENZYME: 'enzyme',
+ JEST: 'jest'
};
diff --git a/lib/spawn.js b/lib/spawn.js
index 68a5d27..efbe887 100644
--- a/lib/spawn.js
+++ b/lib/spawn.js
@@ -1,9 +1,9 @@
-"use strict";
+'use strict';
-const spawn = require("child_process").spawn;
+const spawn = require('child_process').spawn;
const defaults = {
- stdio: "inherit",
+ stdio: 'inherit',
cwd: process.cwd()
};
@@ -11,8 +11,8 @@ const defaults = {
module.exports = async (cmd, args, options) => {
return new Promise((resolve, reject) => {
const cp = spawn(cmd, args, { ...defaults, ...options });
- cp.on("error", reject);
- cp.on("close", code => {
+ cp.on('error', reject);
+ cp.on('close', code => {
if (code > 0) {
return reject(code);
}
diff --git a/package.json b/package.json
index 051ff71..e46f122 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
"dependencies": {
"is-valid-app": "^0.3.0",
"enquirer": "^2.3.2",
- "generate": "^0.14.0",
"generate-project": "^1.0.0"
},
"keywords": [
@@ -31,6 +30,7 @@
"react"
],
"devDependencies": {
+ "generate": "^0.14.0",
"gulp-format-md": "^2.0.0"
},
"verb": {
@@ -54,4 +54,4 @@
"gulp"
]
}
-}
+}
\ No newline at end of file
From ee12db71c4f65ec238e0c3dd1bc412c2dfb96656 Mon Sep 17 00:00:00 2001
From: yashpandit <yashpandit1995@gmail.com>
Date: Wed, 15 Jan 2020 22:35:41 +0530
Subject: [PATCH 3/4] Solve eslint issues
---
lib/generators/create-react-app.js | 38 +++++++++++++++---------------
1 file changed, 19 insertions(+), 19 deletions(-)
diff --git a/lib/generators/create-react-app.js b/lib/generators/create-react-app.js
index 96b62e1..f138e97 100644
--- a/lib/generators/create-react-app.js
+++ b/lib/generators/create-react-app.js
@@ -1,45 +1,45 @@
-const spawn = require("../spawn");
-const path = require("path");
-const { prompt } = require("enquirer");
-const { NPX, CREATE_REACT_APP } = require("../constants.js");
+const spawn = require('../spawn');
+const path = require('path');
+const { prompt } = require('enquirer');
+const { NPX, CREATE_REACT_APP } = require('../constants.js');
module.exports = app => {
- app.task("create-react-app", async () => {
+ app.task('create-react-app', async () => {
let dest = app.options.name;
if (!dest) {
const answers = await prompt({
- type: "text",
- name: "appName",
- message: "What would you like the app name to be?"
+ type: 'text',
+ name: 'appName',
+ message: 'What would you like the app name to be?'
});
dest = answers.appName;
}
await spawn(NPX, [CREATE_REACT_APP, dest]);
});
- app.task("create-react-app-templates", async () => {
+ app.task('create-react-app-templates', async () => {
const dest = path.join(app.cwd, app.options.name);
const answers = await prompt([
{
- type: "text",
- name: "description",
- message: "What description would you like to use for your website?"
+ type: 'text',
+ name: 'description',
+ message: 'What description would you like to use for your website?'
},
{
- type: "text",
- name: "title",
- message: "What title would you like to use for your website?"
+ type: 'text',
+ name: 'title',
+ message: 'What title would you like to use for your website?'
}
]);
return app
- .src("create-react-app/public/*.*", {
- cwd: path.join(__dirname, "../../templates")
+ .src('create-react-app/public/*.*', {
+ cwd: path.join(__dirname, '../../templates')
})
- .pipe(app.renderFile("*", answers).on("error", console.error))
+ .pipe(app.renderFile('*', answers).on('error', console.error))
.pipe(app.conflicts(dest))
.pipe(app.dest(dest));
});
- app.task("default", ["create-react-app", "create-react-app-templates"]);
+ app.task('default', ['create-react-app', 'create-react-app-templates']);
};
From 23d6ddc30b7f1e47bbbe5bfa6402bac5b53f6d17 Mon Sep 17 00:00:00 2001
From: yashpandit <yashpandit1995@gmail.com>
Date: Wed, 15 Jan 2020 23:20:55 +0530
Subject: [PATCH 4/4] Add custom styles task
---
generator.js | 1 +
lib/generators/custom-styles.js | 26 ++++++++++++++++++++++++++
2 files changed, 27 insertions(+)
create mode 100644 lib/generators/custom-styles.js
diff --git a/generator.js b/generator.js
index 96aad09..f2e73ce 100644
--- a/generator.js
+++ b/generator.js
@@ -9,6 +9,7 @@ module.exports = app => {
app.use(require('generate-project'));
app.register('create-react-app', require('./lib/generators/create-react-app'));
+ app.register('custom-styles', require('./lib/generators/custom-styles'));
/**
* Generate a `index.js` file to the current working directory. Learn how to [customize
diff --git a/lib/generators/custom-styles.js b/lib/generators/custom-styles.js
new file mode 100644
index 0000000..c218dfa
--- /dev/null
+++ b/lib/generators/custom-styles.js
@@ -0,0 +1,26 @@
+const spawn = require('../spawn');
+const path = require('path');
+const { prompt } = require('enquirer');
+const { YARN, LESS, SCSS, STYLED_COMPONENTS, ADD } = require('../constants');
+
+module.exports = app => {
+ app.task('custom-styles', async () => {
+ const questions = prompt({
+ type: 'select',
+ name: 'customstyles',
+ message:
+ 'Would you like to add any of the following dependencies for Store Management?',
+ choices: ['Less', 'Scss', 'Styled-Components', 'No']
+ });
+ const { customstyles } = await questions;
+ if (customstyles !== 'No' && customstyles === 'Less') {
+ await spawn(YARN, [ADD, LESS]);
+ } else if (customstyles !== 'No' && customstyles === 'Scss') {
+ await spawn(YARN, [ADD, SCSS]);
+ } else if (customstyles !== 'No' && customstyles === 'Styled-Components') {
+ await spawn(YARN, [ADD, STYLED_COMPONENTS]);
+ }
+ });
+
+ app.task('default', ['custom-styles']);
+};