Feature/react transform hmre

.babelrc

@@ -0,0 +1,17 @@
+{
+  "env": {
+    "development": {
+      "presets": [
+        "react-hmre"
+      ]
+    },
+    "production": {
+      "plugins": [
+        "transform-react-remove-prop-types",
+        "transform-react-constant-elements",
+        "transform-react-inline-elements"
+      ]
+    }
+  },
+  "presets": ["es2015", "react", "stage-0"]
+}

.eslintrc.example

@@ -3,16 +3,21 @@
     "browser": true,
     "amd": true,
     "es6": true,
-    "mocha": true,
+    "mocha": true
   },
+  "extends": ["standard", "standard-react", "standard-jsx"],
   "parser": "babel-eslint",
   "rules": {
     "strict": 0,
     "comma-dangle": [2, "always-multiline"],
-    "quotes": "single",
+    "jsx-quotes": [2, "prefer-double"],
+    "no-multi-spaces": 0,
     "no-underscore-dangle": 0,
+    "quotes": [2, "single"],
+    "semi": [2, "always"],
+    "space-before-function-paren": 0
   },
   "globals": {
-    "expect": true,
-  },
+    "expect": true
+  }
 }

.nvmrc

@@ -0,0 +1 @@
+v5

app/components/Application/__tests__/index.js

@@ -3,8 +3,8 @@ import ReactTestUtils from 'react-addons-test-utils';
 import Application from '../index.jsx';
 import styles from '../style.sass';
 
-describe('Application', function() {
-  it('displays the component', function() {
+describe('Application', function () {
+  it('displays the component', function () {
     const application = ReactTestUtils.renderIntoDocument(
       <Application />
     );

app/components/Application/index.jsx

@@ -10,13 +10,13 @@ import Header from '../Header';
 import styles from './style';
 
 export default class Application extends React.Component {
-  render() {
+  render () {
     return <div className={styles.main}>
       <div className={styles.wrap}>
         <Header />
 
         <main className={styles.body}>
-          <p>Seems like creating your own React starter kit is a right of passage. So, here's mine.</p>
+          <p>Seems like creating your own React starter kit is a rite of passage. So, here's mine.</p>
           <p>For more information, see the <a href="https://github.com/bradleyboy/yarsk#yarsk">Readme</a>.</p>
         </main>
       </div>

app/components/Header/__tests__/index.js

@@ -4,14 +4,14 @@ import ReactTestUtils from 'react-addons-test-utils';
 import Header from '../index.jsx';
 import styles from '../style.sass';
 
-describe('Header', function() {
-  it('displays the title', function() {
+describe('Header', function () {
+  it('displays the title', function () {
     const header = ReactTestUtils.renderIntoDocument(
       <Header />
     );
 
     const title = ReactTestUtils.findRenderedDOMComponentWithClass(header, styles.title);
-    const dom = ReactDOM.findDOMNode(title);
+    const dom   = ReactDOM.findDOMNode(title);
 
     expect(dom.textContent).to.equal('YARSK');
   });

app/components/Header/index.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import SubHeader from './subheader';
+
 /**
  * Import locally scoped styles using css-loader
  * See style.sass in this directory.
@@ -11,24 +13,17 @@ import styles from './style';
 /**
  * Reference an image and get back a URL automatically via webpack.
  * webpack takes care of versioning, bundling for production, etc.
-*/
+ */
 import logoURL from './images/react-logo.svg';
 
 export default class Header extends React.Component {
-  render() {
+  render () {
     return <header className={styles.main}>
-      <img className={styles.logo} src={logoURL} height="125" />
+      <img className={styles.logo} src={logoURL} height="125"/>
 
       <div className={styles.wrap}>
         <h1 className={styles.title}>YARSK</h1>
-
-        <h2 className={styles.tagline}>
-          (<strong>Y</strong>et{' '}
-            <strong>A</strong>nother{' '}
-            <strong>R</strong>eact{' '}
-            <strong>S</strong>tarter{' '}
-            <strong>K</strong>it)
-        </h2>
+        <SubHeader>Yet Another React Starter Kit</SubHeader>
       </div>
     </header>;
   }

app/components/Header/subheader.jsx

@@ -0,0 +1,15 @@
+const React = require('react')
+
+import styles from './style'
+
+const SubHeader = ({children}) => (
+  <h2 className={styles.tagline}>
+    {children.split(' ').map((word) => {
+        const arr = word.split('')
+        return (<span><strong>{arr.shift()}</strong>{arr.join('')} </span>)
+      }
+    )}
+  </h2>
+)
+
+export default SubHeader

app/css/base.sass

@@ -3,11 +3,14 @@
 *
   box-sizing: border-box
 
-html, body, #app
+html, body
   height: 100%
 
 body
   background: black
 
 a
   color: #00D8FF
+
+:global(.app)
+  height: 100vh

conf/karma.ci.conf.js

@@ -1,10 +1,10 @@
 var karmaFactory = require('./make-karma-config.js');
 
-module.exports = function(config) {
+module.exports = function (config) {
   config.set(karmaFactory({
     coverage: true,
     coverageReporters: [
-      { type: 'text' },
+      {type: 'text'},
     ],
   }));
 };

conf/karma.conf.js

@@ -1,6 +1,6 @@
 var karmaFactory = require('./make-karma-config.js');
 
-module.exports = function(config) {
+module.exports = function (config) {
   config.set(karmaFactory({
     notify: true,
   }));

conf/karma.coverage.conf.js

@@ -1,6 +1,6 @@
 var karmaFactory = require('./make-karma-config.js');
 
-module.exports = function(config) {
+module.exports = function (config) {
   config.set(karmaFactory({
     notify: true,
     coverage: true,

conf/make-karma-config.js

@@ -1,6 +1,6 @@
 var webpackConfig = require('./webpack.config.js');
 
-module.exports = function(options) {
+module.exports = function (options) {
   var karmaConfig = {
     frameworks: ['mocha', 'chai'],
 
@@ -17,7 +17,7 @@ module.exports = function(options) {
     },
 
     webpackMiddleware: {
-        noInfo: true,
+      noInfo: true,
     },
 
     reporters: ['mocha'],
@@ -46,8 +46,8 @@ module.exports = function(options) {
     karmaConfig.coverageReporter = {
       dir: '../coverage',
       reporters: options.coverageReporters || [
-        { type: 'text' },
-        { type: 'html' },
+        {type: 'text'},
+        {type: 'html'},
       ],
     };
 

conf/make-webpack-config.js

@@ -1,17 +1,19 @@
 var fs = require('fs');
+var path = require('path');
 var webpack = require('webpack');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var autoprefixer = require('autoprefixer');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 function extractForProduction(loaders) {
   return ExtractTextPlugin.extract('style', loaders.substr(loaders.indexOf('!')));
 }
 
-module.exports = function(options) {
-  options.lint = fs.existsSync(__dirname + '/../.eslintrc') && options.lint !== false;
+module.exports = function (options) {
+  options.lint = fs.existsSync(path.resolve(__dirname, '..', '.eslintrc')) && options.lint !== false;
 
   var localIdentName = options.production ? '[hash:base64]' : '[path]-[local]-[hash:base64:5]';
-  var cssLoaders = 'style!css?localIdentName=' + localIdentName + '!autoprefixer?browsers=last 2 versions';
+  var cssLoaders = 'style!css?module&localIdentName=' + localIdentName + '!postcss?browsers=last 2 versions';
   var scssLoaders = cssLoaders + '!sass';
   var sassLoaders = scssLoaders + '?indentedSyntax=sass';
   var lessLoaders = cssLoaders + '!less';
@@ -23,8 +25,6 @@ module.exports = function(options) {
     lessLoaders = extractForProduction(lessLoaders);
   }
 
-  var jsLoaders = ['babel'];
-
   return {
     entry: options.production ? './app/index.jsx' : [
       'webpack-dev-server/client?http://localhost:8080',
@@ -48,14 +48,9 @@ module.exports = function(options) {
       ] : [],
       loaders: [
         {
-          test: /\.js$/,
-          exclude: /node_modules/,
-          loaders: jsLoaders,
-        },
-        {
-          test: /\.jsx$/,
+          test: /\.jsx?$/,
           exclude: /node_modules/,
-          loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders),
+          loaders: ['babel'],
         },
         {
           test: /\.css$/,
@@ -75,19 +70,19 @@ module.exports = function(options) {
         },
         {
           test: /\.png$/,
-          loader: "url?limit=100000&mimetype=image/png",
+          loader: 'url?limit=100000&mimetype=image/png',
         },
         {
           test: /\.svg$/,
-          loader: "url?limit=100000&mimetype=image/svg+xml",
+          loader: 'url?limit=100000&mimetype=image/svg+xml',
         },
         {
           test: /\.gif$/,
-          loader: "url?limit=100000&mimetype=image/gif",
+          loader: 'url?limit=100000&mimetype=image/gif',
         },
         {
           test: /\.jpg$/,
-          loader: "file",
+          loader: 'file',
         },
       ],
     },
@@ -97,8 +92,8 @@ module.exports = function(options) {
     plugins: options.production ? [
       // Important to keep React file size down
       new webpack.DefinePlugin({
-        "process.env": {
-          "NODE_ENV": JSON.stringify("production"),
+        'process.env': {
+          'NODE_ENV': JSON.stringify('production'),
         },
       }),
       new webpack.optimize.DedupePlugin(),
@@ -107,7 +102,7 @@ module.exports = function(options) {
           warnings: false,
         },
       }),
-      new ExtractTextPlugin("app.[hash].css"),
+      new ExtractTextPlugin('app.[hash].css'),
       new HtmlWebpackPlugin({
         template: './conf/tmpl.html',
         production: true,
@@ -117,5 +112,6 @@ module.exports = function(options) {
         template: './conf/tmpl.html',
       }),
     ],
+    postcss: [autoprefixer],
   };
 };

conf/phantomjs-shim.js

@@ -1,35 +1,33 @@
-(function() {
+(function () {
+  var Ap = Array.prototype;
+  var slice = Ap.slice;
+  var Fp = Function.prototype;
 
-var Ap = Array.prototype;
-var slice = Ap.slice;
-var Fp = Function.prototype;
+  if (!Fp.bind) {
+    // PhantomJS doesn't support Function.prototype.bind natively, so
+    // polyfill it whenever this module is required.
+    Fp.bind = function (context) {
+      var func = this;
+      var args = slice.call(arguments, 1);
 
-if (!Fp.bind) {
-  // PhantomJS doesn't support Function.prototype.bind natively, so
-  // polyfill it whenever this module is required.
-  Fp.bind = function(context) {
-    var func = this;
-    var args = slice.call(arguments, 1);
+      function bound() {
+        var invokedAsConstructor = func.prototype && (this instanceof func);
+        return func.apply(
+          // Ignore the context parameter when invoking the bound function
+          // as a constructor. Note that this includes not only constructor
+          // invocations using the new keyword but also calls to base class
+          // constructors such as BaseClass.call(this, ...) or super(...).
+          !invokedAsConstructor && context || this,
+          args.concat(slice.call(arguments))
+        );
+      }
 
-    function bound() {
-      var invokedAsConstructor = func.prototype && (this instanceof func);
-      return func.apply(
-        // Ignore the context parameter when invoking the bound function
-        // as a constructor. Note that this includes not only constructor
-        // invocations using the new keyword but also calls to base class
-        // constructors such as BaseClass.call(this, ...) or super(...).
-        !invokedAsConstructor && context || this,
-        args.concat(slice.call(arguments))
-      );
-    }
-
-    // The bound function must share the .prototype of the unbound
-    // function so that any object created by one constructor will count
-    // as an instance of both constructors.
-    bound.prototype = func.prototype;
-
-    return bound;
-  };
-}
+      // The bound function must share the .prototype of the unbound
+      // function so that any object created by one constructor will count
+      // as an instance of both constructors.
+      bound.prototype = func.prototype;
 
+      return bound;
+    };
+  }
 })();