0.2.2

.eslintrc

@@ -23,6 +23,7 @@
     "no-unused-vars": 1,
     "no-trailing-spaces": [1, { "skipBlankLines": true }],
     "no-unreachable": 1,
-    "no-alert": 0
+    "no-alert": 0,
+    "react/jsx-uses-react": 1
   }
 }

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - '4.1.0'
+before_install:
+  - currentfolder=${PWD##*/}
+  - if [ "$currentfolder" != 'react-webpack-template' ]; then cd .. && eval "mv $currentfolder react-webpack-template" && cd react-webpack-template; fi

CHANGELOG.md

@@ -0,0 +1,9 @@
+# react-webpack-template - Changelog
+
+## 0.2.0:
+___Upgrades:___
+1. Updated React from 0.13 to 0.14 (using ```^0.14```) as version string. This included minor code changes for components (now use the splitted "React"-Package) and the runner (Using React-DOM).
+2. Updated the shallow renderer for unit tests.
+
+___Backwards incompatible changes:___
+1. Default unit tests do not need to traverse down to `Component._store.props`, but directly to `Component.props`. Please keep this in mind when using properties in your tests.

README.md

@@ -1,20 +1,22 @@
 # Welcome to react-webpack-template
-This repository holds a base template for the new version of generator-react-webpack.
+> This repository holds a base template for the new version of generator-react-webpack.
 It can be understood as the prototype for newly generated projects.
 
+[![Build Status](https://travis-ci.org/weblogixx/react-webpack-template.svg)](https://travis-ci.org/weblogixx/react-webpack-template)
+
 ## Features
 The following features are planned to be included in the final version:
 
 - [x] Webpack and Webpack-Dev-Server, including hot-loader
 - [x] Babel and JSX
 - [x] Mocha Unit tests (*optional*)
-- [ ] React.Router
 - [x] EsLint Support
 - [x] No dependency on grunt, gulp or the next hot taskrunner!
+- [x] The dynamic webpack configuration is clunky, there must be a better way to do that!
+- [x] Karmas webpack configuration is not included in the global webpack.config.js file, but it really should
 
 ## Todo
-- [ ] The dynamic webpack configuration is clunky, there must be a better way to do that!
-- [ ] Karmas webpack configuration is not included in the global webpack.config.js file, but it really should
+- [ ] Better performance for webpack builds
 
 ## What is it for?
 This template can be used directly for the creation of new projects.

cfg/base.js

@@ -0,0 +1,68 @@
+var path = require('path');
+
+var port = 8000;
+var srcPath = path.join(__dirname, '/../src');
+var publicPath = '/assets/';
+
+module.exports = {
+  port: port,
+  debug: true,
+  output: {
+    path: path.join(__dirname, '/../dist/assets'),
+    filename: 'app.js',
+    publicPath: publicPath
+  },
+  devServer: {
+    contentBase: './src/',
+    historyApiFallback: true,
+    hot: true,
+    port: port,
+    publicPath: publicPath,
+    noInfo: false
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    alias: {
+      actions: srcPath + '/actions/',
+      components: srcPath + '/components/',
+      sources: srcPath + '/sources/',
+      stores: srcPath + '/stores/',
+      styles: srcPath + '/styles/'
+    }
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        include: path.join(__dirname, 'src'),
+        loader: 'eslint-loader'
+      }
+    ],
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: 'style!css'
+      },
+      {
+        test: /\.sass/,
+        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
+      },
+      {
+        test: /\.scss/,
+        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+      },
+      {
+        test: /\.less/,
+        loader: 'style-loader!css-loader!less-loader'
+      },
+      {
+        test: /\.styl/,
+        loader: 'style-loader!css-loader!stylus-loader'
+      },
+      {
+        test: /\.(png|jpg|gif|woff|woff2)$/,
+        loader: 'url-loader?limit=8192'
+      }
+    ]
+  }
+};

cfg/dev.js

@@ -0,0 +1,28 @@
+var path = require('path');
+var webpack = require('webpack');
+var _ = require('lodash');
+
+var baseConfig = require('./base');
+
+var config = _.merge({
+  entry: [
+    'webpack-dev-server/client?http://127.0.0.1:8000',
+    'webpack/hot/only-dev-server',
+    './src/components/run'
+  ],
+  cache: true,
+  devtool: 'eval',
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ]
+}, baseConfig);
+
+// Add needed loaders
+config.module.loaders.push({
+  test: /\.(js|jsx)$/,
+  loader: 'react-hot!babel-loader',
+  include: path.join(__dirname, '/../src')
+});
+
+module.exports = config;

cfg/dist.js

@@ -0,0 +1,26 @@
+var path = require('path');
+var webpack = require('webpack');
+var _ = require('lodash');
+
+var baseConfig = require('./base');
+
+var config = _.merge({
+  entry: path.join(__dirname, '../src/components/run'),
+  cache: false,
+  devtool: 'sourcemap',
+  plugins: [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.AggressiveMergingPlugin(),
+    new webpack.NoErrorsPlugin()
+  ]
+}, baseConfig);
+
+config.module.loaders.push({
+  test: /\.(js|jsx)$/,
+  loader: 'babel',
+  include: path.join(__dirname, '/../src')
+});
+
+module.exports = config;

cfg/test.js

@@ -0,0 +1,33 @@
+var path = require('path');
+var srcPath = path.join(__dirname, '/../src/');
+
+module.exports = {
+  devtool: 'eval',
+  module: {
+    loaders: [
+      {
+        test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/,
+        loader: 'null-loader'
+      },
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        include: [
+          path.join(__dirname, '/../src'),
+          path.join(__dirname, '/../test')
+        ]
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    alias: {
+      actions: srcPath + 'actions/',
+      helpers: path.join(__dirname, '/../test/helpers'),
+      components: srcPath + 'components/',
+      sources: srcPath + 'sources/',
+      stores: srcPath + 'stores/',
+      styles: srcPath + 'styles/'
+    }
+  }
+};

karma.conf.js

@@ -1,5 +1,4 @@
-var path = require('path');
-var srcPath = __dirname + '/src/';
+var webpackCfg = require('./webpack.config');
 
 module.exports = function(config) {
   config.set({
@@ -12,43 +11,14 @@ module.exports = function(config) {
     captureTimeout: 60000,
     frameworks: ['phantomjs-shim', 'mocha', 'chai'],
     client: {
-      mocha: {
-
-      }
+      mocha: {}
     },
     singleRun: true,
     reporters: ['mocha'],
     preprocessors: {
       'test/loadtests.js': ['webpack', 'sourcemap']
     },
-    webpack: {
-      cache: true,
-      devtool: 'inline-source-map',
-      module: {
-        loaders: [
-          {
-            test: /\.(css|png|jpg|gif|woff|woff2)$/,
-            loader: 'null-loader'
-          },
-          {
-            test: /\.(js|jsx)$/,
-            loader: 'babel-loader',
-            exclude: /node_modules/
-          }
-        ]
-      },
-      resolve: {
-        extensions: ['', '.js', '.jsx'],
-        alias: {
-          actions: srcPath + '/actions/',
-          helpers: path.join(__dirname, 'test', 'helpers'),
-          components: srcPath + '/components/',
-          sources: srcPath + '/sources/',
-          stores: srcPath + '/stores/',
-          styles: srcPath + '/styles/'
-        }
-      }
-    },
+    webpack: webpackCfg,
     webpackServer: {
       noInfo: true
     }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-webpack-template",
-  "version": "0.0.5",
+  "version": "0.2.2",
   "description": "A base skeleton template for react and webpack without task runners",
-  "main": "index.js",
+  "main": "server.js",
   "scripts": {
     "start": "node server.js --env=dev",
     "test": "karma start",
@@ -11,8 +11,11 @@
     "serve:dist": "node server.js --env=dist",
     "dist": "npm run copy & webpack --env=dist",
     "lint": "eslint ./src",
-    "copy": "copyfiles -f ./src/index.html ./dist",
-    "clean": "rimraf dist/*"
+    "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
+    "clean": "rimraf dist/*",
+    "release:major": "npm version major && npm publish && git push --follow-tags",
+    "release:minor": "npm version minor && npm publish && git push --follow-tags",
+    "release:patch": "npm version patch && npm publish && git push --follow-tags"
   },
   "repository": {
     "type": "git",
@@ -59,10 +62,13 @@
     "style-loader": "^0.12.3",
     "url-loader": "^0.5.6",
     "webpack": "^1.12.0",
-    "webpack-dev-server": "^1.10.1"
+    "webpack-dev-server": "^1.12.0"
   },
   "dependencies": {
+    "lodash": "^3.10.1",
     "normalize.css": "^3.0.3",
-    "react": "^0.13.3"
+    "react": "^0.14.0",
+    "react-addons-test-utils": "^0.14.0",
+    "react-dom": "^0.14.0"
   }
 }

src/components/Main.js

@@ -1,13 +1,16 @@
 require('normalize.css');
 require('styles/App.css');
 
-import React from 'react/addons';
+import React from 'react';
+
+let yeomanImage = require('../images/yeoman.png');
 
 class AppComponent extends React.Component {
   render() {
     return (
       <div className="index">
-        Content
+        <img src={yeomanImage} alt="Yeoman Generator" />
+        <div className="notice">Please edit <code>src/components/Main.js</code> to get started!</div>
       </div>
     );
   }

src/components/run.js

@@ -1,5 +1,6 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import App from './Main';
 
 // Render the main component into the dom
-React.render(<App />, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));

src/styles/App.css

@@ -1 +1,21 @@
 /* Base Application Styles */
+body {
+  color: #fff;
+  background: #222;
+}
+
+.index img {
+  margin: 40px auto;
+  border-radius: 4px;
+  background: #fff;
+  display: block;
+}
+
+.index .notice {
+  margin: 20px auto;
+  padding: 15px 0;
+  text-align: center;
+  border: 1px solid #000;
+  border-width: 1px 0;
+  background: #666;
+}

test/components/MainTest.js

@@ -18,10 +18,6 @@ describe('MainComponent', () => {
     });
 
     it('should have its component name as default className', () => {
-      expect(MainComponent._store.props.className).to.equal('index');
-    });
-
-    it('should do something!', () => {
-      expect(true).to.be.true;
+      expect(MainComponent.props.className).to.equal('index');
     });
 });

test/helpers/shallowRenderHelper.js

@@ -5,8 +5,8 @@
  * @see http://simonsmith.io/unit-testing-react-components-without-a-dom/
  * @author somonsmith
  */
-import React from 'react/addons';
-const TestUtils = React.addons.TestUtils;
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
 
 /**
  * Get the shallow rendered component

webpack.config.js

@@ -1,100 +1,47 @@
-var webpack = require('webpack');
-var args = require('minimist')(process.argv.slice(2));
+'use strict';
+
 var path = require('path');
-var env = args.env || 'dev';
+var args = require('minimist')(process.argv.slice(2));
 
-var port = 8000;
-var srcPath = __dirname + '/src/';
-var publicPath = '/assets/';
+// List of allowed environments
+var allowedEnvs = ['dev', 'dist', 'test'];
 
-var config = {
-  port: port,
-  debug: true,
-  output: {
-    path: path.join(__dirname, 'dist/assets'),
-    filename: 'app.js',
-    publicPath: publicPath
-  },
-  devServer: {
-    contentBase: './src/',
-    historyApiFallback: true,
-    hot: true,
-    port: port,
-    publicPath: publicPath,
-    noInfo: false
-  },
-  resolve: {
-    extensions: ['', '.js', '.jsx'],
-    alias: {
-      actions: srcPath + '/actions/',
-      components: srcPath + '/components/',
-      sources: srcPath + '/sources/',
-      stores: srcPath + '/stores/',
-      styles: srcPath + '/styles/'
-    }
-  },
-  module: {
-    preLoaders: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        loader: 'eslint-loader'
-      }
-    ],
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: 'style!css'
-      },
-      {
-        test: /\.(png|jpg|gif|woff|woff2)$/,
-        loader: 'url-loader?limit=8192'
-      }
-    ]
-  }
-};
-
-// Use config depending on environment
-switch(env) {
-  case 'dist':
-    config.entry = './src/components/run';
-    config.cache = false;
-    config.devtool = false;
-    config.plugins = [
-      new webpack.optimize.DedupePlugin(),
-      new webpack.optimize.UglifyJsPlugin(),
-      new webpack.optimize.OccurenceOrderPlugin(),
-      new webpack.optimize.AggressiveMergingPlugin(),
-      new webpack.NoErrorsPlugin()
-    ];
-
-    // Add needed loaders
-    config.module.loaders.push({
-      test: /\.(js|jsx)$/,
-      loader: 'babel',
-      include: path.join(__dirname, 'src')
-    });
-    break;
-
-  default:
-    config.entry = [
-      'webpack-dev-server/client?http://127.0.0.1:' + port,
-      'webpack/hot/only-dev-server',
-      './src/components/run'
-    ];
-    config.cache = true;
-    config.devtool = 'sourcemap';
-    config.plugins = [
-      new webpack.HotModuleReplacementPlugin(),
-      new webpack.NoErrorsPlugin()
-    ];
-
-    // Add needed loaders
-    config.module.loaders.push({
-      test: /\.(js|jsx)$/,
-      loader: 'react-hot!babel-loader',
-      include: path.join(__dirname, 'src')
-    });
+// Set the correct environment
+var env;
+if(args._.length > 0 && args._.indexOf('start') !== -1) {
+  env = 'test';
+} else if (args.env) {
+  env = args.env;
+} else {
+  env = 'dev';
 }
 
-module.exports = config;
+// Get available configurations
+var configs = {
+  base: require(path.join(__dirname, 'cfg/base')),
+  dev: require(path.join(__dirname, 'cfg/dev')),
+  dist: require(path.join(__dirname, 'cfg/dist')),
+  test: require(path.join(__dirname, 'cfg/test'))
+};
+
+/**
+ * Get an allowed environment
+ * @param  {String}  env
+ * @return {String}
+ */
+function getValidEnv(env) {
+  var isValid = env && env.length > 0 && allowedEnvs.indexOf(env) !== -1;
+  return isValid ? env : 'dev';
+}
+
+/**
+ * Build the webpack configuration
+ * @param  {String} env Environment to use
+ * @return {Object} Webpack config
+ */
+function buildConfig(env) {
+  var usedEnv = getValidEnv(env);
+  return configs[usedEnv];
+}
+
+module.exports = buildConfig(env);