Complete Upgrade: Babel 6 / React 0.14.x / Node 5.4/ react-transform-hmr / all dependencies are up to date

.babelrc

@@ -0,0 +1,30 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ],
+  "plugins": [
+    "transform-object-rest-spread"
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        [
+          "react-transform",
+          {
+            "transforms": [
+              {
+                "transform": "react-transform-hmr",
+                "imports": ["react"],
+                "locals": ["module"]
+              }, {
+                "transform": "react-transform-catch-errors",
+                "imports": ["react", "redbox-react"]
+              }
+            ]
+          }
+        ]
+      ]
+    }
+  }
+}

appveyor.yml

@@ -5,10 +5,11 @@ environment:
     # https://github.com/FormidableLabs/converter-react/issues/34
     ROWDY_SETTINGS: "local.firefox"
   matrix:
-    - nodejs_version: 0.10
     - nodejs_version: 0.12
+    - nodejs_version: 4.stable
+    - nodejs_version: 5.4
 
-# Get the latest stable version of Node 0.STABLE.latest
+# Get the latest stable version of Node 5.STABLE.latest
 install:
   - ps: Install-Product node $env:nodejs_version
   # Install and use local, modern NPM

client/app.jsx

@@ -3,6 +3,7 @@
  */
 /*globals document:false, location:false */
 import React from "react";
+import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 
 import createStore from "./store/create-store";
@@ -21,7 +22,7 @@ let store = createStore();
 // Render helpers -- may defer based on client-side actions.
 let deferRender = false;
 const render = () => {
-  React.render(
+  ReactDOM.render(
     <Provider store={store}>
       {() => <Page />}
     </Provider>, rootEl

client/components/error-panel.jsx

@@ -11,7 +11,7 @@ export default class ErrorPanel extends React.Component {
         bsStyle="danger"
         className="output-panel"
         header=<h3>Conversion Error</h3>
-        >
+      >
         <code>{this.props.children}</code>
       </Panel>
     );

client/components/input.jsx

@@ -6,13 +6,15 @@ import { connect } from "react-redux";
 import Input from "react-bootstrap/lib/Input";
 import { setConversionValue, fetchConversions } from "../actions/";
 
+const magicNum = 13;
+
 class UserInput extends React.Component {
   onChange(ev) {
     this.props.dispatch(setConversionValue(ev.target.value));
   }
 
   onKeyDown(ev) {
-    if (ev.which === 13 /* Enter key */) {
+    if (ev.which === magicNum /* Enter key */) {
       const store = this.props;
       store.dispatch(fetchConversions(store.types, store.value));
     }

client/components/output-panel.jsx

@@ -10,7 +10,7 @@ export default class OutputPanel extends React.Component {
       <Panel
         className="output-panel e2e-output-panel"
         header=<h3>{this.props.title}</h3>
-        >
+      >
         {this.props.content}
       </Panel>
     );

client/components/types.jsx

@@ -19,8 +19,11 @@ class Types extends React.Component {
 
   render() {
     const items = Object.keys(types.TYPES).map((type) => (
-      <MenuItem key={type} className={`e2e-convert-type-${type}`}
-                onClick={this.setTypes.bind(this, type)}>
+      <MenuItem
+        key={type}
+        className={`e2e-convert-type-${type}`}
+        onClick={this.setTypes.bind(this, type)}
+      >
         {types.getTitle(type)}
       </MenuItem>
     ));
@@ -33,11 +36,13 @@ class Types extends React.Component {
         onSelect={noop}
         pullRight
         title=<Title title={types.getTitle(this.props.types)} />
-        >
+      >
         {items}
         <MenuItem divider />
-        <MenuItem className="e2e-convert-type-all"
-                  onClick={this.setTypes.bind(this, types.ALL)}>
+        <MenuItem
+          className="e2e-convert-type-all"
+          onClick={this.setTypes.bind(this, types.ALL)}
+        >
           <strong>{types.ALL_DESC}</strong>
         </MenuItem>
       </DropdownButton>

client/utils/api.js

@@ -4,15 +4,17 @@
 import Promise from "bluebird";
 import "isomorphic-fetch";
 
-const api = {
-  BASE_URL: "",
+const badRequest = 400;
+const BASE_URL = "http://";
+const COLON_URL = ":";
 
+const api = {
   // Statefully set the base port and host (for server-side).
   setBase: (host, port) => {
     if (host) {
-      api.BASE_URL = "http://" + host;
+      api.BASE_URL = BASE_URL + host;
       if (port) {
-        api.BASE_URL = api.BASE_URL + ":" + port;
+        api.BASE_URL = api.BASE_URL + COLON_URL + port;
       }
     }
   },
@@ -22,7 +24,7 @@ const api = {
     Promise.all(types.split(",").map((type) =>
       fetch(`${api.BASE_URL}/api/${type}?from=${encodeURIComponent(value)}`)
         .then((res) => {
-          if (res.status >= 400) {
+          if (res.status >= badRequest) {
             throw new Error("Bad server response");
           }
           return res.json();

karma.conf.coverage.js

@@ -4,7 +4,89 @@
  *
  * This configuration is the same as basic one-shot version, just with coverage.
  */
-var webpackCovCfg = require("./webpack.config.coverage");
+var path = require("path");
+var webpack = require("webpack");
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+
+var HOT = {
+  presets: ["stage-2", "es2015", "react"],
+  plugins: [
+    ["transform-runtime"],
+    ["react-transform",
+      {
+        transforms: [
+          {
+            transform: "react-transform-hmr",
+            imports:    ["react"],
+            locals:     ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }
+        ]
+      }
+    ]
+  ]
+};
+
+var NORMAL = {
+  presets: ["stage-2", "es2015", "react"],
+  plugins: ["transform-runtime"]
+};
+
+
+var webpackCovCfg = {
+  cache: true,
+  devtool: "source-map",
+  context: path.join(__dirname, "test/client"),
+  entry: "./main",
+  output: {
+    path: __dirname,
+    filename: "main.js",
+    publicPath: "/assets/"
+  },
+  resolve: {
+    extensions: ["", ".js", ".jsx"],
+    alias: {
+      // Allow root import of `client/FOO` from ROOT/client.
+      client: path.join(__dirname, "client")
+    }
+  },
+  module: {
+    preLoaders: [
+      // Manually instrument client code for code coverage.
+      // https://github.com/deepsweet/isparta-loader handles ES6 + normal JS.
+      {
+        test: /client\/.*\.jsx?$/,
+        exclude: /(test|node_modules)\//,
+        loaders: "isparta?babel",
+        query: NORMAL
+      }
+    ],
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: [/node_modules/],
+        loader: "babel",
+        query: NORMAL
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+      },
+      {
+        test: /\.(png|svg|woff|woff2|ttf|eot)$/i,
+        loader: "url-loader?limit=10000"
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css", {
+      allChunks: true
+    })
+  ]
+};
 
 module.exports = function (config) {
   require("./karma.conf")(config);

karma.conf.js

@@ -6,7 +6,79 @@
  * the test files one-off for just a single run. This is appropriate for a
  * CI environment or if you're not otherwise running `npm run dev|hot`.
  */
-var webpackCfg = require("./webpack.config.test");
+var path = require("path");
+var webpack = require("webpack");
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+
+var HOT = {
+  presets: ["stage-2", "es2015", "react"],
+  plugins: [
+    ["transform-runtime"],
+    ["react-transform",
+      {
+        transforms: [
+          {
+            transform: "react-transform-hmr",
+            imports:    ["react"],
+            locals:     ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }
+        ]
+      }
+    ]
+  ]
+};
+
+var NORMAL = {
+  presets: ["stage-2", "es2015", "react"],
+  plugins: ["transform-runtime"]
+};
+
+
+var webpackCfg = {
+  cache: true,
+  devtool: "source-map",
+  context: path.join(__dirname, "test/client"),
+  entry: "./main",
+  output: {
+    path: __dirname,
+    filename: "main.js",
+    publicPath: "/assets/"
+  },
+  resolve: {
+    extensions: ["", ".js", ".jsx"],
+    alias: {
+      // Allow root import of `client/FOO` from ROOT/client.
+      client: path.join(__dirname, "client")
+    }
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: [/node_modules/],
+        loader: "babel",
+        query: NORMAL
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+      },
+      {
+        test: /\.(png|svg|woff|woff2|ttf|eot)$/i,
+        loader: "url-loader?limit=10000"
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css", {
+      allChunks: true
+    })
+  ]
+};
 
 module.exports = function (config) {
   // Start with the "dev" (webpack-dev-server is already running) config