electrode-io · jchip · Jun 22, 2017 · Jun 22, 2017 · Jun 22, 2017 · Jun 22, 2017
@@ -33,7 +33,7 @@ Below is the new structure of the Electrode React Component Archetype:
   |  |- archetype.js
   |- scripts/
   |- archetype-clap.js
-  |- clap.js
+  |- xclap.js
   |- package.json
   ...
 ```

@@ -12,7 +12,7 @@ Here is the layout of packages/<componentName>:
 └── packages
     └── <componentName>
         ├── README.md
-        ├── clap.js
+        ├── xclap.js
         ├── package.json
         ├── src
         │   ├── components
@@ -49,7 +49,7 @@ Here is the layout of demo-app:
 │   │   ├── development.json
 │   │   ├── production.js
 │   │   └── production.json
-│   ├── clap.js
+│   ├── xclap.js
 │   ├── package.json
 │   ├── src
 │   │   ├── client

@@ -109,7 +109,7 @@ Let's take a quick high level overview of our file structure and what `generator
 
     A file where you can customize any process in the Travis default build environment.
 
--   `clap.js`
+-   `xclap.js`
 
     A file that stores all your development tasks. We will explore this more in [Getting Started: Intermediate](/chapter1/Intermediate.md).
 

@@ -514,5 +514,5 @@ tmp
 /.npmignore
 /.eslintrc
 /test
-/clap.js
+/xclap.js
 /.nyc_output
@@ -19,9 +19,9 @@ $ npm install --save electrode-archetype-react-app
 $ npm install --save-dev electrode-archetype-react-app-dev
 ```
 
-###### Add a `clap.js`
+###### Add a `xclap.js`
 
-The `clap.js` should contain the following and be located in the root of your project
+The `xclap.js` should contain the following and be located in the root of your project
 
 ```js
 require("electrode-archetype-react-app")();

@@ -514,4 +514,4 @@ tmp
 ###############################################################################
 
 /.npmignore
-/clap.js
+/xclap.js
@@ -42,7 +42,7 @@ react, webpack, demo, electrode component archetype, live-reload
    create .gitignore
    create .npmignore
    create .editorconfig
-   create clap.js
+   create xclap.js
    create package.json
    create README.md
    create src/components/product-card.jsx
@@ -52,7 +52,6 @@ react, webpack, demo, electrode component archetype, live-reload
    create test/client/components/product-card.spec.jsx
 
 Your new Electrode Component is ready and your component is in '/src'.
-
 ```
 
 ## Configuring an existing project / manual setup
@@ -65,7 +64,6 @@ If you prefer to create your component manually or if you have an existing compo
 $ npm install --save-dev electrode-archetype-react-component electrode-archetype-react-component-dev
 ```
 
-
 ###### Add a `.babelrc` to your project
 
 The `.babelrc` needs to extend
@@ -77,10 +75,10 @@ The `.babelrc` needs to extend
 }
 ```
 
-###### Add a `clap.js` to your project
+###### Add a `xclap.js` to your project
 
-The `clap.js` needs to extend
-[the archetype's clap tasks](/arhcetype-clap.js) in order to apply the shared tasks on your new/existing electrode component. Add this following lines of code to the newly created `clap.js`
+The `xclap.js` needs to extend
+[the archetype's clap tasks](/arhcetype-clap.js) in order to apply the shared tasks on your new/existing electrode component. Add this following lines of code to the newly created `xclap.js`
 
 ```js
 "use strict";
@@ -96,12 +94,11 @@ xclap.load("myprj", tasks);
 require("electrode-archetype-react-component")(xclap);
 ```
 
-
 ## Managing Dependencies
 
 The archetypes are split into two parts: `<archetype>` and `<archetype>-dev`. Both archetypes need to be in each component and should be included in the `package.json`'s `devDependencies`.
 
----
+* * *
 
 ## Project Structure
 
@@ -131,7 +128,7 @@ package.json
 ## CSS Modules + CSS next
 
 By default, this archetype assumes you are using CSS-Modules + CSS-Next, you need
-to opt-in to stylus support by adding a `*.styl` to your *project's* `demo/demo.styl` & `src/styles/*.styl`.
+to opt-in to stylus support by adding a `*.styl` to your _project's_ `demo/demo.styl` & `src/styles/*.styl`.
 You can use stylus and CSS-Modules together by enabling setting the 'cssModuleStylusSupport' option in
 `archetype/config.js` to `true`.
 
@@ -184,10 +181,17 @@ $ clap archetype:check
 Built with :heart: by [Team Electrode](https://github.com/orgs/electrode-io/people) @WalmartLabs.
 
 [npm-image]: https://badge.fury.io/js/electrode-archetype-react-component.svg
+
 [npm-url]: https://npmjs.org/package/electrode-archetype-react-component
+
 [daviddm-image]: https://david-dm.org/electrode-io/electrode/status.svg?path=packages/electrode-archetype-react-component
+
 [daviddm-url]: https://david-dm.org/electrode-io/electrode?path=packages/electrode-archetype-react-component
+
 [daviddm-dev-image]: https://david-dm.org/electrode-io/electrode/dev-status.svg?path=packages/electrode-archetype-react-component
+
 [daviddm-dev-url]: https://david-dm.org/electrode-io/electrode?path=packages/electrode-archetype-react-component?type=dev
-[npm-downloads-image]:https://img.shields.io/npm/dm/electrode-archetype-react-component.svg
-[npm-downloads-url]:https://www.npmjs.com/package/electrode-archetype-react-component
+
+[npm-downloads-image]: https://img.shields.io/npm/dm/electrode-archetype-react-component.svg
+
+[npm-downloads-url]: https://www.npmjs.com/package/electrode-archetype-react-component
@@ -513,6 +513,5 @@ tmp
 ###############################################################################
 
 /.npmignore
-/clap.js
+/xclap.js
 /test
-
@@ -142,7 +142,7 @@ lib/templates
 minified/
 
 /.npmignore
-/clap.js
+/xclap.js
 /.eslintrc
 /.eslintignore
 /.babelrc

@@ -139,6 +139,6 @@ node_modules
 dist
 
 /.npmignore
-/clap.js
+/xclap.js
 /.babelrc
 /test
@@ -140,7 +140,7 @@ node_modules
 .isomorphic-loader-config.json
 
 /.npmignore
-/clap.js
+/xclap.js
 /.babelrc
 /test
 /.eslintrc

@@ -1,11 +1,12 @@
 # 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 clap tasks for development, building and publishing.
 
 ## Installation
 
-First, install [Yeoman], [xclap-cli], 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]\(&lt;we assume you have pre-installed [node.js]\(&lt;> 4.2.x required>)>).
 
 ```bash
 $ npm install -g yo xclap-cli generator-electrode
@@ -20,6 +21,7 @@ $ mkdir your-project-name
 $ cd your-project-name
 $ yo electrode
 ```
+
 > Note: If the app is not properly generated at the correct destination, make sure you do not have a .yo-rc.json file hidden in your CWD.
 
 [Here](https://github.com/animesh10/tutorials/blob/master/generateApp.gif) is a sample screen capture the app generation process.
@@ -38,24 +40,25 @@ You can run [clap] to see the list of tasks available.
 
 Some common ones:
 
-  - `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
+-   `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:
 
-  ```bash
-  npm install -g generator-electrode
-  ```
+```bash
+npm install -g generator-electrode
+```
 
   Then run the generator:
 
-  ```bash
-  yo electrode:component
-  ```
+```bash
+yo electrode:component
+```
 
 ...and follow the prompts.
 
@@ -84,7 +87,7 @@ test-component/
 │   │   ├── development.json
 │   │   ├── production.js
 │   │   └── production.json
-│   ├── clap.js
+│   ├── xclap.js
 │   ├── package.json
 │   ├── src
 │   │   ├── client
@@ -114,7 +117,7 @@ test-component/
 └── packages
     └── test-component
         ├── README.md
-        ├── clap.js
+        ├── xclap.js
         ├── package.json
         ├── src
         │   ├── components
@@ -141,16 +144,16 @@ test-component/
 The component structure shown above supports multiple packages under the `packages` folder.
 You can add another component to your project by running `yo electrode:component-add` from within the `packages` directory.
 
-```
-$ cd packages
-$ yo electrode:component-add
-```
+    $ cd packages
+    $ yo electrode:component-add
+
 And follow the prompts.
 
 This will generate a new package and also update the `demo-app`.
 The `demo-app/src/client/components/home.jsx` and `demo-app/package.json` will be overwritten during the update.
 
 [Here](https://github.com/animesh10/tutorials/blob/master/componentGenerator.gif) is a sample screen capture the component generation process.
+
 ### Example and Preview
 
 Preview your component by using the `demo-app`. This is an electrode app which uses your newly created component:
@@ -168,27 +171,37 @@ potential users try out your component and see what it can do.
 
 ## Getting To Know Yeoman
 
- * Yeoman has a heart of gold.
- * Yeoman is a person with feelings and opinions, but is very easy to work with.
- * Yeoman can be too opinionated at times but is easily convinced not to be.
- * Feel free to [learn more about Yeoman](http://yeoman.io/).
+-   Yeoman has a heart of gold.
+-   Yeoman is a person with feelings and opinions, but is very easy to work with.
+-   Yeoman can be too opinionated at times but is easily convinced not to be.
+-   Feel free to [learn more about Yeoman](http://yeoman.io/).
 
 Built with :heart: by [Team Electrode](https://github.com/orgs/electrode-io/people) @WalmartLabs.
 
 ## License
 
 Apache-2.0 © WalmartLabs
 
-
 [npm-image]: https://badge.fury.io/js/generator-electrode.svg
+
 [npm-url]: https://npmjs.org/package/generator-electrode
+
 [daviddm-image]: https://david-dm.org/electrode-io/electrode/status.svg?path=packages/generator-electrode
+
 [daviddm-url]: https://david-dm.org/electrode-io/electrode?path=packages/generator-electrode
-[daviddm-dev-image]:https://david-dm.org/electrode-io/electrode/dev-status.svg?path=packages/generator-electrode
-[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
+
+[daviddm-dev-image]: https://david-dm.org/electrode-io/electrode/dev-status.svg?path=packages/generator-electrode
+
+[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
+
 [xclap-cli]: https://www.npmjs.com/package/xclap-cli
-[Yeoman]: http://yeoman.io
+
+[yeoman]: http://yeoman.io
+
 [npm]: https://www.npmjs.com/
+
 [node.js]: https://nodejs.org/
@@ -176,7 +176,7 @@ var ReactComponentGenerator = yeoman.Base.extend({
       if (this.quoteType === "'") {
         this.template("packages/component/eslintrc", this.rootPath + ".eslintrc");
       }
-      this.template("packages/component/_clap.js", this.rootPath + "clap.js");
+      this.template("packages/component/_xclap.js", this.rootPath + "xclap.js");
       this.template("packages/component/_package.json", this.rootPath + "package.json");
       this.template("packages/component/_readme.md", this.rootPath + "README.md");
     },