Bump dependencies

Gemfile

@@ -1,7 +1,7 @@
 source "https://rubygems.org"
 ruby "2.4.1"
 
-gem "react_on_rails", "9.0.0.rc.0"
+gem "react_on_rails", "10.0.0"
 gem "webpacker"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"

Gemfile.lock

@@ -50,7 +50,7 @@ GEM
     bindex (0.5.0)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    brakeman (3.6.1)
+    brakeman (4.0.1)
     builder (3.2.3)
     bundler-audit (0.5.0)
       bundler (~> 1.2)
@@ -203,13 +203,13 @@ GEM
     rb-inotify (0.9.8)
       ffi (>= 0.5.0)
     rdoc (4.3.0)
-    react_on_rails (9.0.0.rc.0)
+    react_on_rails (10.0.0)
       addressable
       connection_pool
       execjs (~> 2.5)
       rails (>= 3.2)
       rainbow (~> 2.2)
-    redis (3.3.3)
+    redis (4.0.1)
     rspec-core (3.6.0)
       rspec-support (~> 3.6.0)
     rspec-expectations (3.6.0)
@@ -337,7 +337,7 @@ DEPENDENCIES
   rails (~> 5)
   rails-html-sanitizer
   rainbow
-  react_on_rails (= 9.0.0.rc.0)
+  react_on_rails (= 10.0.0)
   redis
   rspec-rails (~> 3.6)
   rspec-retry

client/.eslintrc.yml

@@ -20,6 +20,7 @@ rules:
 
   # Good idea, but let's go to flow before fixing all these
   react/forbid-prop-types: 0
+  jsx-a11y/href-no-hash: 0 
 
 #  arrow-parens:
 #    - 0

client/.postcssrc

@@ -0,0 +1,13 @@
+{
+  "plugins": {
+    "autoprefixer": {
+      "browsers": [
+        ">1%",
+        "last 5 versions",
+        "safari >= 7",
+        "Firefox ESR",
+        "not ie < 9"
+      ]
+    }
+  }
+}

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx

@@ -41,11 +41,11 @@ export default class CommentList extends BaseComponent {
       // `key` is a React-specific concept and is not mandatory for the
       // purpose of this tutorial. if you're curious, see more here:
       // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
-      <Comment
+      (<Comment
         key={$$comment.get('id') || index}
         author={$$comment.get('author')}
         text={$$comment.get('text')}
-      />,
+      />),
     );
 
     // For animation with ReactCSSTransitionGroup

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.spec.jsx

@@ -47,7 +47,8 @@ describe('CommentList', () => {
   it('renders an alert if errors', () => {
     const component = renderIntoDocument(
       <CommentList
-        $$comments={comments} error="zomg"
+        $$comments={comments}
+        error="zomg"
         cssTransitionGroupClassNames={cssTransitionGroupClassNames}
       />,
     );

client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx

@@ -7,7 +7,6 @@ import CommentBox from '../CommentBox/CommentBox';
 import css from './CommentScreen.scss';
 
 export default class CommentScreen extends BaseComponent {
-
   static propTypes = {
     actions: PropTypes.object.isRequired,
     data: PropTypes.object.isRequired,

client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx

@@ -14,7 +14,7 @@ const NavigationBar = (props) => {
 
   /* eslint-disable new-cap */
   return (
-    <nav className="navbar navbar-default" role="navigation">
+    <nav className="navbar navbar-default">
       <div className="container">
         <div className="navbar-header">
           <button
@@ -49,7 +49,7 @@ const NavigationBar = (props) => {
                 href={
                   'https://github.com/' +
                   'shakacode/react-webpack-rails-tutorial'
-               }
+                }
               >
                 Source
               </a>
@@ -58,7 +58,7 @@ const NavigationBar = (props) => {
               <a
                 href={
                   'https://forum.shakacode.com/c/reactjs'
-               }
+                }
               >Forum</a>
             </li>
             {_.isNumber(commentsCount) && CommentsCount({ commentsCount })}

client/app/bundles/comments/components/TestReactRouter/TestReactRouter.jsx

@@ -13,5 +13,4 @@ export default class TestReactRouter extends BaseComponent {
       </div>
     );
   }
-
 }

client/app/bundles/comments/components/TestReactRouterRedirect/TestReactRouterRedirect.jsx

@@ -4,7 +4,6 @@ import { Redirect } from 'react-router-dom';
 import BaseComponent from 'libs/components/BaseComponent';
 
 export default class TestReactRouterRedirect extends BaseComponent {
-
   static checkAuth() {
     // Hard code this to demonstrate the effect
     const notAuthorized = true;

client/app/bundles/comments/layout/Layout.jsx

@@ -6,7 +6,6 @@ import './Layout.scss';
 
 /* eslint-disable react/prefer-stateless-function */
 export default class Layout extends Component {
-
   static propTypes = {
     children: PropTypes.object.isRequired,
   };

client/app/bundles/comments/reducers/commentsReducer.js

@@ -17,7 +17,6 @@ export default function commentsReducer($$state = $$initialState, action = null)
   const { type, comment, comments, error, locale } = action;
 
   switch (type) {
-
     case actionTypes.FETCH_COMMENTS_SUCCESS: {
       return $$state.merge({
         $$comments: comments,

client/app/libs/testHelper.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
-import jsdom from 'jsdom';
+import TestUtils from 'react-dom/test-utils';
+import jsdom from 'jsdom/lib/old-api';
 import chai from 'chai';
 import chaiImmutable from 'chai-immutable';
 

client/package.json

@@ -4,9 +4,9 @@
   "description": "Code from the React Webpack tutorial.",
   "main": "server-express.js",
   "engines": {
-    "node": "7.8.0",
-    "npm": "4.4.4",
-    "yarn": "0.22.0"
+    "node": "^7.8.0 || ^8.0.0",
+    "npm": "^4.4.4 || ^5.0.0",
+    "yarn": "^1.0.0"
   },
   "repository": {
     "type": "git",
@@ -42,12 +42,12 @@
   },
   "dependencies": {
     "actioncable": "^5.0.2",
-    "autoprefixer": "^6.7.7",
+    "autoprefixer": "^7.1.5",
     "axios": "^0.16.1",
     "babel": "^6.23.0",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
@@ -57,13 +57,13 @@
     "bootstrap-loader": "^2.0.0",
     "bootstrap-sass": "^3.3.7",
     "classnames": "^2.2.5",
-    "compression-webpack-plugin": "^0.3.2",
+    "compression-webpack-plugin": "^1.0.1",
     "css-loader": "^0.28.0",
     "es5-shim": "^4.5.9",
     "estraverse": "^4.2.0",
     "expose-loader": "^0.7.3",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.11.1",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.5",
     "glob": "^7.1.1",
     "immutable": "^3.8.1",
     "imports-loader": "^0.7.1",
@@ -76,14 +76,14 @@
     "marked": "^0.3.6",
     "node-sass": "^4.5.2",
     "node-uuid": "^1.4.8",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.8",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
+    "react": "^16.0.0",
     "react-addons-css-transition-group": "^15.6.0",
     "react-bootstrap": "^0.31.2",
-    "react-dom": "^15.6.1",
+    "react-dom": "^16.0.0",
     "react-intl": "^2.3.0",
-    "react-on-rails": "^9.0.0-rc.0",
+    "react-on-rails": "^10.0.0",
     "react-redux": "^5.0.5",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
@@ -93,33 +93,31 @@
     "resolve-url-loader": "^2.0.2",
     "sass-loader": "^6.0.3",
     "sass-resources-loader": "^1.2.1",
-    "style-loader": "^0.16.1",
+    "style-loader": "^0.19.0",
     "turbolinks": "^5.0.0",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.3.3",
-    "webpack-manifest-plugin": "^1.1.0",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.8.1",
+    "webpack-manifest-plugin": "^1.3.2",
     "webpack-merge": "^4.1.0"
   },
   "devDependencies": {
-    "babel-eslint": "^7.2.1",
-    "babel-plugin-react-transform": "^2.0.2",
+    "babel-eslint": "^8.0.1",
     "body-parser": "^1.17.1",
-    "chai": "^3.5.0",
+    "chai": "^4.1.2",
     "chai-immutable": "^1.6.0",
-    "eslint": "^3.19.0",
-    "eslint-config-shakacode": "^14.1.1",
+    "eslint": "^4.9.0",
+    "eslint-config-shakacode": "^15.0.0",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.10.3",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
     "estraverse-fb": "^1.3.1",
     "express": "^4.15.2",
-    "jsdom": "^9.12.0",
-    "mocha": "^3.2.0",
+    "jsdom": "^11.3.0",
+    "mocha": "^4.0.1",
     "pug": "^2.0.0-beta11",
-    "react-addons-test-utils": "^15.5.1",
     "react-transform-hmr": "^1.0.4",
     "sleep": "^5.1.1",
-    "webpack-dev-server": "^2.4.2"
+    "webpack-dev-server": "^2.9.2"
   }
 }

client/server-rails-hot.js

@@ -1,10 +1,9 @@
 /* eslint no-var: 0, no-console: 0, import/no-extraneous-dependencies: 0 */
 
-import webpack from 'webpack';
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
 
-import WebpackDevServer from 'webpack-dev-server';
-
-import webpackConfig from './webpack.client.rails.hot.config';
+const webpackConfig = require('./webpack.client.rails.hot.config');
 
 const { resolve } = require('path');
 
@@ -20,10 +19,12 @@ const hotReloadingHostname = settings.dev_server.host;
 const compiler = webpack(webpackConfig);
 
 const devServer = new WebpackDevServer(compiler, {
-  proxy: {
-    '*': `http://lvh.me:${hotReloadingPort}`,
+  proxy: { '*': `http://${hotReloadingHostname}:${hotReloadingPort}` },
+  publicPath: output.publicPathWithHost,
+  headers: {
+    'Access-Control-Allow-Origin': '*',
   },
-  contentBase: hotReloadingUrl,
+  disableHostCheck: true,
   hot: true,
   inline: true,
   historyApiFallback: true,
@@ -39,9 +40,13 @@ const devServer = new WebpackDevServer(compiler, {
   },
 });
 
-devServer.listen(hotReloadingPort, hotReloadingHostname, (err) => {
+devServer.listen(hotReloadingPort, hotReloadingHostname, err => {
   if (err) console.error(err);
   console.log(
-    `=> 🔥  Webpack development server is running on ${hotReloadingUrl}`,
+    `=> 🔥  Webpack development server is running on port ${hotReloadingUrl}`,
   );
 });
+
+compiler.plugin('done', () => {
+  process.stdout.write('Webpack: Done!');
+});

client/webpack.client.express.config.js

@@ -40,23 +40,6 @@ config.module.rules.push(
     test: /\.jsx?$/,
     loader: 'babel-loader',
     exclude: /node_modules/,
-    query: {
-      plugins: [
-        [
-          'react-transform',
-          {
-            superClasses: ['React.Component', 'BaseComponent', 'Component'],
-            transforms: [
-              {
-                transform: 'react-transform-hmr',
-                imports: ['react'],
-                locals: ['module'],
-              },
-            ],
-          },
-        ],
-      ],
-    },
   },
   {
     test: /\.css$/,
@@ -69,12 +52,7 @@ config.module.rules.push(
           localIdentName: '[name]__[local]__[hash:base64:5]'
         }
       },
-      {
-        loader: 'postcss-loader',
-        options: {
-          plugins: 'autoprefixer'
-        }
-      }
+      'postcss-loader',
     ]
   },
   {
@@ -88,12 +66,7 @@ config.module.rules.push(
           localIdentName: '[name]__[local]__[hash:base64:5]',
         }
       },
-      {
-        loader: 'postcss-loader',
-        options: {
-          plugins: 'autoprefixer'
-        }
-      },
+      'postcss-loader',
       {
         loader: 'sass-loader'
       },

client/webpack.client.rails.build.config.js

@@ -69,9 +69,9 @@ module.exports = merge(config, {
       },
       {
         test: /\.scss$/,
-        use: ExtractTextPlugin.extract({
+        loader: ExtractTextPlugin.extract({
           fallback: 'style-loader',
-          loader: [
+          use: [
             {
               loader: 'css-loader',
               options: {
@@ -81,12 +81,7 @@ module.exports = merge(config, {
                 localIdentName: '[name]__[local]__[hash:base64:5]',
               },
             },
-            {
-              loader: 'postcss-loader',
-              options: {
-                plugins: 'autoprefixer'
-              }
-            },
+            'postcss-loader',
             'sass-loader',
             {
               loader: 'sass-resources-loader',