generator-electrode: [major] clappify

packages/generator-electrode/README.md

@@ -1,14 +1,14 @@
 # generator-electrode
 
 [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![devDependency Status][daviddm-dev-image]][daviddm-dev-url] [![npm downloads][npm-downloads-image]][npm-downloads-url]
-> Generate Electrode ~~Isomorphic~~ Universal React App with NodeJS backend or a React component with useful gulp tasks for development, building and publishing.
+> Generate Electrode ~~Isomorphic~~ Universal React App with NodeJS backend or a React component with useful clap tasks for development, building and publishing.
 
 ## Installation
 
-First, install [Yeoman], [gulp], and generator-electrode using [npm] (we assume you have pre-installed [node.js] (> 4.2.x required)).
+First, install [Yeoman], [xclap-cli], and generator-electrode using [npm] (we assume you have pre-installed [node.js] (> 4.2.x required)).
 
 ```bash
-$ npm install -g yo gulp generator-electrode
+$ npm install -g yo xclap-cli generator-electrode
 ```
 
 > Note: You may need add `sudo` to the command.
@@ -34,15 +34,15 @@ $ npm start
 
 Wait for webpack to be ready and navigate to `http://localhost:3000` with your browser.
 
-You can run [gulp] to see the list of tasks available.
+You can run [clap] to see the list of tasks available.
 
 Some common ones:
 
-  - `gulp dev` - start in webpack-dev-server development mode
-  - `gulp hot` - start in webpack-dev-server hot mode
-  - `gulp build` - build production `dist` files
-  - `gulp server-prod` - start server in production mode
-  - `gulp check` - run unit tests with coverage
+  - `clap dev` - start in webpack-dev-server development mode
+  - `clap hot` - start in webpack-dev-server hot mode
+  - `clap build` - build production `dist` files
+  - `clap server-prod` - start server in production mode
+  - `clap check` - run unit tests with coverage
 
 ## Generating a React Component
   Install the generator if you haven't already:
@@ -73,7 +73,7 @@ component.
 
 The component project structure uses a [Lerna](https://lernajs.io/) structure, which can help manage multiple repos within your `packages` directory. Your initial project structure will be :
 
-```bash
+```text
 test-component/
 ├── README.md
 ├── demo-app
@@ -84,7 +84,7 @@ test-component/
 │   │   ├── development.json
 │   │   ├── production.js
 │   │   └── production.json
-│   ├── gulpfile.js
+│   ├── clap.js
 │   ├── package.json
 │   ├── src
 │   │   ├── client
@@ -114,7 +114,7 @@ test-component/
 └── packages
     └── test-component
         ├── README.md
-        ├── gulpfile.js
+        ├── clap.js
         ├── package.json
         ├── src
         │   ├── components
@@ -157,7 +157,7 @@ Preview your component by using the `demo-app`. This is an electrode app which u
 
 ```bash
 $ cd demo-app
-$ gulp demo
+$ clap demo
 ```
 
 A webserver will be started on [localhost:3000](http://127.0.0.1:3000).
@@ -188,7 +188,7 @@ Apache-2.0 © WalmartLabs
 [daviddm-dev-url]:https://david-dm.org/electrode-io/electrode?path=packages/generator-electrode?type-dev
 [npm-downloads-image]:https://img.shields.io/npm/dm/generator-electrode.svg
 [npm-downloads-url]:https://www.npmjs.com/package/generator-electrode
-[gulp]: http://gulpjs.com/
+[xclap-cli]: https://www.npmjs.com/package/xclap-cli
 [Yeoman]: http://yeoman.io
 [npm]: https://www.npmjs.com/
 [node.js]: https://nodejs.org/

packages/generator-electrode/clap.js

@@ -0,0 +1 @@
+require("electrode-archetype-njs-module-dev")();

packages/generator-electrode/component-add/index.js

@@ -194,7 +194,7 @@ module.exports = generators.Base.extend({
       "\n" +
       "\nYour component is in " + this.packageName + " and your demo app is in ../" + this.demoAppName +
       "\n" +
-      "\nType 'cd ../" + this.demoAppName + "' then 'gulp dev' to run the development build for the demo app." +
+      "\nType 'cd ../" + this.demoAppName + "' then 'clap dev' to run the development build for the demo app." +
       "\n"
     );
   }

packages/generator-electrode/component/index.js

@@ -9,13 +9,13 @@ var parseAuthor = require("parse-author");
 var optionOrPrompt = require("yeoman-option-or-prompt");
 
 var ReactComponentGenerator = yeoman.Base.extend({
-  constructor: function () {
+  constructor: function() {
     yeoman.Base.apply(this, arguments);
     this.quotes = this.options.quotes;
     this.githubUrl = this.options.githubUrl || "https://github.com";
     this.optionOrPrompt = optionOrPrompt;
   },
-  initializing: function () {
+  initializing: function() {
     this.isAddon = this.options.isAddon || false;
     this.demoAppName = this.options.demoAppName;
     this.pkg = this.fs.readJSON(this.destinationPath("package.json"), {});
@@ -36,21 +36,21 @@ var ReactComponentGenerator = yeoman.Base.extend({
     this.props.quoteType = this.quotes;
   },
   prompting: {
-    greeting: function () {
+    greeting: function() {
       if (!this.isAddon) {
         this.log(
           "\n" +
-          chalk.bold.underline("Welcome to the Electrode Component Generator") +
-          "\n" +
-          "\nWe're going to set up a new " +
-          chalk.bold("Electrode") +
-          " component, ready for development with" +
-          "\n" +
-          chalk.bold("gulp, webpack, demo, electrode component archetype, and live-reload")
+            chalk.bold.underline("Welcome to the Electrode Component Generator") +
+            "\n" +
+            "\nWe're going to set up a new " +
+            chalk.bold("Electrode") +
+            " component, ready for development with" +
+            "\n" +
+            chalk.bold("react, webpack, demo, electrode component archetype, and live-reload")
         );
       }
     },
-    askFor: function () {
+    askFor: function() {
       if (this.pkg.name || this.options.name) {
         this.props.name = this.pkg.name || _.kebabCase(this.options.name);
       }
@@ -130,7 +130,7 @@ var ReactComponentGenerator = yeoman.Base.extend({
         this.createDirectory = this.props.createDirectory;
         this.componentName = _.kebabCase(_.deburr(this.props.projectName))
           .replace(/^\s+|\s+$/g, "")
-          .replace(/(^|[-_ ])+(.)/g, function (match, first, second) {
+          .replace(/(^|[-_ ])+(.)/g, function(match, first, second) {
             return second.toUpperCase();
           });
         this.currentYear = new Date().getFullYear();
@@ -144,7 +144,7 @@ var ReactComponentGenerator = yeoman.Base.extend({
   },
 
   writing: {
-    lernaStructure: function () {
+    lernaStructure: function() {
       // copy lerna and top level templates
       if (!this.isAddon) {
         this.copy("gitignore", ".gitignore");
@@ -153,19 +153,19 @@ var ReactComponentGenerator = yeoman.Base.extend({
         this.template("lerna.json", "lerna.json");
       }
     },
-    project: function () {
+    project: function() {
       this.copy("packages/component/babelrc", this.rootPath + ".babelrc");
       this.copy("packages/component/gitignore", this.rootPath + ".gitignore");
       this.copy("packages/component/npmignore", this.rootPath + ".npmignore");
       this.copy("packages/component/editorconfig", this.rootPath + ".editorconfig");
       if (this.quoteType === "'") {
         this.template("packages/component/eslintrc", this.rootPath + ".eslintrc");
       }
-      this.template("packages/component/_gulpfile.js", this.rootPath + "gulpfile.js");
+      this.template("packages/component/_clap.js", this.rootPath + "clap.js");
       this.template("packages/component/_package.json", this.rootPath + "package.json");
       this.template("packages/component/_readme.md", this.rootPath + "README.md");
     },
-    component: function () {
+    component: function() {
       this.template(
         "packages/component/src/components/_component.jsx",
         this.rootPath + "src/components/" + this.projectName + ".jsx"
@@ -188,7 +188,7 @@ var ReactComponentGenerator = yeoman.Base.extend({
 
       this.template("packages/component/src/_Component.js", this.rootPath + "src/index.js");
     },
-    test: function () {
+    test: function() {
       this.template(
         "packages/component/test/client/eslintrc",
         this.rootPath + "test/client/.eslintrc"
@@ -203,7 +203,7 @@ var ReactComponentGenerator = yeoman.Base.extend({
       );
     },
 
-    demoApp: function () {
+    demoApp: function() {
       //Do not generate the demo app if called from the add on generator
       this.originalDemoAppName = "demo-app";
       if (!this.isAddon) {
@@ -245,12 +245,12 @@ var ReactComponentGenerator = yeoman.Base.extend({
     }
   },
 
-  install: function () {
+  install: function() {
     //git init and npmi for lerna lernaStructure
     if (!this.isAddon) {
       //reset the path to the actual root
       this.destinationRoot(this.oldRoot);
-      this.destinationRoot()
+      this.destinationRoot();
 
       this.spawnCommandSync("git", ["init"], {
         cwd: this.destinationPath()
@@ -281,8 +281,7 @@ var ReactComponentGenerator = yeoman.Base.extend({
     });
   },
 
-  end: function () {
-
+  end: function() {
     if (this.quoteType === "'") {
       this.spawnCommandSync("node_modules/.bin/eslint", [
         "--fix",
@@ -305,7 +304,7 @@ var ReactComponentGenerator = yeoman.Base.extend({
         " and your demo app is " + this.packageName + "/" + this.appName +
         "\n" +
         "\nType 'cd " + this.packageName + "/" + this.appName +
-        "' then 'gulp dev' to run the development build for the demo app." +
+        "' then 'clap dev' to run the development build for the demo app." +
         "\n"
       );
     }

packages/generator-electrode/component/templates/_package.json

@@ -15,12 +15,13 @@
   },
   "homepage": "<%= githubUrl %>/<%= packageGitHubOrg %>/<%= ghRepo %>",
   "scripts": {
-    "test": "lerna bootstrap && lerna run test"
+    "bootstrap": "lerna bootstrap",
+    "test": "lerna run test"
   },
   "dependency": {},
   "devDependencies": {
-    "gulp": "^3.9.1",
-    "lerna": "^2.0.0-rc.1",
-    "lodash": "^4.10.1"
+    "lerna": "^2.0.0-rc.5",
+    "lodash": "^4.10.1",
+    "xclap": "^0.2.0"
   }
 }

packages/generator-electrode/component/templates/lerna.json

@@ -1,5 +1,5 @@
 {
-  "lerna": "2.0.0-rc.1",
+  "lerna": "2.0.0-rc.5",
   "packages": [
     "packages/*"
   ],

packages/generator-electrode/component/templates/packages/component/_clap.js

@@ -0,0 +1,27 @@
+"use strict";
+
+/**
+ * There is a full range of clap tasks defined in the above archetype
+ * but below is a concise list of most often used clap tasks at the
+ * component level
+ *
+ * Full list of clap tasks:
+ * https://github.com/electrode-io/electrode-archetype-react-component/blob/master/archetype-clap.js#L38-L134
+ *
+ */
+
+const tasks = {
+  <% if (quoteType === "'") { %>
+  'archetype:lint-server': `eslint --color -c ./.eslintrc config/karma config/webpack`,
+  "lint-react-src": `eslint --ext .js,.jsx -c ./.eslintrc src --color`,
+  "lint-scripts": `eslint --ext .js -c ./.eslintrc scripts --color`,
+  "lint-react-test": `eslint --ext .js,.jsx -c ./test/client/.eslintrc test/client --color`,
+  <% } %>
+  "prepublish": ["npm:prepublish"]
+};
+
+const xclap = require("xclap");
+
+xclap.load("ext", tasks);
+
+require("electrode-archetype-react-component")(xclap);

packages/generator-electrode/component/templates/packages/component/_package.json

@@ -18,17 +18,16 @@
   "dependencies": {},
   "devDependencies": {
     "electrode-archetype-react-component": "^2.0.0",
-    "electrode-archetype-react-component-dev": "^2.0.0",
-    "gulp": "^3.9.1"
+    "electrode-archetype-react-component-dev": "^2.0.0"
   },
   "engines": {
-    "node": "^4.2.6",
-    "npm": "^3.5.3"
+    "node": ">= 4",
+    "npm": ">= 3"
   },
   "scripts": {
-    "prepublish": "gulp prepublish",
-    "start": "gulp demo",
-    "test": "gulp check"
+    "prepublish": "clap prepublish",
+    "start": "clap demo",
+    "test": "clap check"
   },
   "keywords": [
     "react",

packages/generator-electrode/component/templates/packages/component/_readme.md

@@ -9,16 +9,16 @@ Live demo: [<%= ghUser %>.github.io/<%= packageName %>](http://<%= ghUser %>.git
 
 To build the package locally, run:
 
-```
-npm install
+```bash
+$ npm install
 
 ```
 
 To run the package demo locally, run the `demo-app` :
 
-```
-npm install
-gulp dev
+```bash
+$ npm install
+$ clap dev
 
 ```
 
@@ -31,16 +31,16 @@ The easiest way to use <%= packageName %> is to install it from NPM and include
 
 You can also use the standalone build by including `dist/<%= packageName %>.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
 
-```
-npm install <%= packageName %> --save
+```bash
+$ npm install <%= packageName %> --save
 ```
 
 
 ## Usage
 
 __EXPLAIN USAGE HERE__
 
-```
+```js
 var <%= componentName %> = require('<%= packageName %>');
 
 <<%= componentName %>>Example</<%= componentName %>>