Update overall structure, add babel static class method plugin

1. added `src/` at the root of every project to keep your working
   files clean and separate from everything else

2. merged the sanitize stylesheet into the top-level `style.styl`

3. updated various files with newer ES6+ conveniences

4. added the babel "transform-class-properties" plugin to enable
   static class property shortcuts (part of the enhancements in
   #3)

5. removed the `LICENSE` file in favor of the simple license field
   in `package.json`

6. reorganized where static assets are meant to live; place your
   images, fonts, etc in `src/static/assets` and they will be
   copied over to `/dist` during the build process

7. switched the dev server (budo) invocation from the CLI to using
   it as a library; see `scripts/budo.js`

Author: Evan Jacobs

generators/app/index.js

@@ -82,29 +82,29 @@ module.exports = yeoman.Base.extend({
     writing: function() {
         var copier = copy.bind(this);
 
-        mkdirp('example/__tests__');
         mkdirp('dist/assets');
+        mkdirp('scripts');
+        mkdirp('src/example/__tests__');
+        mkdirp('src/static/assets/images');
 
         copier([
             ['_eslintignore', '.eslintignore'],
             ['_eslintrc', '.eslintrc'],
             ['_gitignore', '.gitignore'],
-            '_sanitize.styl',
             'CONTRIBUTING.md',
-            'example/index.js',
-            'example/style.styl',
-            'example/__tests__/index.js',
-            'index.js',
-            'parallelize.sh',
-            'style.styl',
+            'scripts/parallelize.sh',
+            'src/example/index.js',
+            'src/example/style.styl',
+            'src/example/__tests__/index.js',
+            'src/index.js',
+            'src/style.styl',
         ]);
 
         copier([
-            'package.json',
-            'index.html',
             'CHANGELOG.md',
-            'LICENSE',
-            'README.md'
+            'package.json',
+            'README.md',
+            'src/static/index.html'
         ], this.answers);
     },
 

generators/app/templates/LICENSE

@@ -1 +1,23 @@
 # <%= appName %>
+
+## getting started
+
+```bash
+npm i
+```
+
+## running the development server
+
+```bash
+npm start
+```
+
+Add files, edit your code, etc and the browser will automatically refresh with the appropriate changes.
+
+## shipping code
+
+```bash
+npm run release
+```
+
+Then simply copy the contents of `dist/` to your final destination.

generators/app/templates/README.md

@@ -1,6 +1,7 @@
 {
   "name": "<%= appName %>",
   "description": "<%= appDescription %>",
+  "license": "MIT",
   "private": true,
   "version": "0.1.0",
   "author": {
@@ -15,6 +16,7 @@
     "autoprefixer-stylus": "^0.9.2",
     "babel-eslint": "^6.0.0",
     "babel-jest": "^12.0.2",
+    "babel-plugin-transform-class-properties": "^6.6.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-2": "^6.5.0",
@@ -24,31 +26,42 @@
     "eslint": "^2.7.0",
     "eslint-plugin-react": "^4.2.3",
     "jest-cli": "^12.0.2",
+    "mkdirp": "latest",
     "stylus": "^0.54.2",
     "uglify-js": "^2.6.2",
     "watchify": "^3.7.0"
   },
   "babel": {
+    "plugins": [
+      "transform-class-properties"
+    ],
     "presets": [
       "es2015",
       "react",
       "stage-2"
     ]
   },
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
+  },
   "jest": {
     "automock": false
   },
   "scripts": {
-    "js": "browserify index.js -t babelify --debug > dist/assets/bundle.js",
-    "js:release": "NODE_ENV=production browserify index.js -t babelify | uglifyjs -mc drop_console > dist/assets/bundle.min.js",
-    "js:watch": "budo index.js:dist/assets/bundle.js -H 0.0.0.0 --live --open --iw -- --debug -t babelify",
-    "css": "stylus -m -u autoprefixer-stylus style.styl -o dist/assets/style.css --sourcemap-inline",
-    "css:release": "stylus -c -u autoprefixer-stylus style.styl -o dist/assets/style.min.css",
+    "postinstall": "mkdirp dist/assets",
+    "js": "browserify src/index.js --debug > dist/assets/bundle.js",
+    "js:release": "NODE_ENV=production browserify src/index.js | uglifyjs -mc drop_console > dist/assets/bundle.min.js",
+    "js:watch": "node scripts/budo.js",
+    "css": "stylus -m -u autoprefixer-stylus src/style.styl -o dist/assets/style.css --sourcemap-inline",
+    "css:release": "stylus -c -u autoprefixer-stylus src/style.styl -o dist/assets/style.min.css",
     "css:watch": "npm run css -- -w",
-    "html:release": "cp -f index.html dist/ && sed -e 's/bundle.js/bundle.min.js/g' -e 's/style.css/style.min.css/g' -e 's/dist\\///g' < index.html > dist/index.html",
+    "assets:copy": "cp -rf src/static/* dist/",
+    "html:release": "sed -e 's/bundle.js/bundle.min.js/g' -e 's/style.css/style.min.css/g' < src/static/index.html > dist/index.html",
     "build": "npm run js && npm run css",
-    "release": "npm run css:release && npm run html:release && npm run js:release",
-    "start": "sh parallelize.sh \"npm run css:watch\" \"npm run js:watch\"",
+    "release": "npm run assets:copy && npm run html:release && npm run css:release && npm run js:release",
+    "start": "sh scripts/parallelize.sh \"npm run css:watch\" \"npm run js:watch\"",
     "lint": "eslint --quiet *.js **/*.js",
     "test": "jest --verbose",
     "coverage": "jest --coverage"

generators/app/templates/example/__tests__/index.js

@@ -0,0 +1,18 @@
+require('budo')('src/index.js', {
+    browserify: {
+        debug: true,
+    },
+
+    dir: ['src/static', 'dist'],
+    host: '0.0.0.0',
+    live: true,
+    open: true,
+    portfind: true,
+    pushstate: true,
+    serve: 'assets/bundle.js',
+    stream: process.stdout,
+
+    watchGlob: [
+        'src/**/*.{html,css,json}'
+    ]
+});

generators/app/templates/package.json

@@ -0,0 +1,30 @@
+/* eslint no-unused-expressions:0 */
+
+import React from 'react';
+import {render, unmountComponentAtNode as cleanup} from 'react-dom';
+import Example from '../index';
+
+describe('Example', () => {
+    const testingRootNode = document.body.appendChild(document.createElement('div'));
+    const r = vdom => render(vdom, testingRootNode);
+
+    afterEach(() => cleanup(testingRootNode));
+
+    it('renders successfully', () => {
+        expect(r(<Example />)).not.toBe(undefined);
+    });
+
+    it('accepts a title', () => {
+        const element = r(<Example title='Hello World!' />);
+
+        expect(element.refs.title).not.toBe(undefined);
+        expect(element.refs.title.textContent).toBe('Hello World!');
+    });
+
+    it('accepts a description', () => {
+        const element = r(<Example description='Party time!' />);
+
+        expect(element.refs.description).not.toBe(undefined);
+        expect(element.refs.description.textContent).toBe('Party time!');
+    });
+});

generators/app/templates/scripts/budo.js

@@ -1,18 +1,27 @@
 import React from 'react';
 
-class Example extends React.Component {
+export default class Example extends React.Component {
+    static propTypes = {
+        title: React.PropTypes.string,
+        description: React.PropTypes.string,
+    }
+
     renderTitle() {
         if (this.props.title) {
             return (
-                <h1 ref='title' className='ui-example-title'>{this.props.title}</h1>
+                <h1 ref='title' className='ui-example-title'>
+                    {this.props.title}
+                </h1>
             );
         }
     }
 
     renderDescription() {
         if (this.props.description) {
             return (
-                <p ref='description' className='ui-example-desc'>{this.props.description}</p>
+                <p ref='description' className='ui-example-desc'>
+                    {this.props.description}
+                </p>
             );
         }
     }
@@ -26,10 +35,3 @@ class Example extends React.Component {
         );
     }
 }
-
-Example.propTypes = {
-    title: React.PropTypes.string,
-    description: React.PropTypes.string,
-};
-
-export default Example;