Upgrade to Babel 7

.babelrc

@@ -1,14 +1,21 @@
 {
   "presets": [
-    "env",
-    "react",
-    "stage-2"
+    ["@babel/preset-env", {
+      "modules": "commonjs",
+      "targets": {
+        "browsers": ["last 2 versions"],
+        "node": "current"
+      },
+      "useBuiltIns": "usage"
+    }],
+    "@babel/preset-react",
+    "@babel/preset-stage-2"
   ],
-  
+
   "plugins": [
     "universal-import"
   ],
-  
+
   "env": {
     "development": {
       "plugins": [

.eslintrc.js

@@ -8,8 +8,16 @@ module.exports = {
     sourceType: 'module',
     allowImportExportEverywhere: false
   },
-  plugins: ['flowtype'],
-  extends: ['airbnb', 'plugin:flowtype/recommended'],
+  plugins: ['react', 'flowtype', 'prettier'],
+  extends: [
+    'airbnb',
+    'plugin:react/recommended',
+    'plugin:flowtype/recommended',
+    'plugin:prettier/recommended',
+    'prettier',
+    'prettier/flowtype',
+    'prettier/react'
+  ],
   settings: {
     flowtype: {
       onlyFilesWithFlowAnnotation: true
@@ -37,6 +45,18 @@ module.exports = {
     alert: true
   },
   rules: {
+    /*
+     * Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
+     * https://github.com/prettier/eslint-plugin-prettier
+     */
+    'prettier/prettier': [
+      'error',
+      {
+        semi: false,
+        singleQuote: true,
+        trailingComma: 'none'
+      }
+    ],
     'import/extensions': [
       'error',
       'always',
@@ -71,11 +91,9 @@ module.exports = {
     'no-case-declarations': 1,
     semi: [2, 'never'],
     'flowtype/semi': [2, 'never'],
-    'jsx-quotes': [2, 'prefer-single'],
     'react/jsx-filename-extension': [2, { extensions: ['.jsx', '.js'] }],
     'spaced-comment': [2, 'always', { markers: ['?'] }],
     'arrow-parens': [2, 'as-needed', { requireForBlockBody: false }],
-    'brace-style': [2, 'stroustrup'],
     'import/no-unresolved': [2, { commonjs: true, caseSensitive: true }],
     'no-unused-expressions': [
       2,
@@ -115,6 +133,7 @@ module.exports = {
         ignoreTemplateLiterals: true
       }
     ],
+    'react/display-name': 0,
     'react/sort-comp': [
       2,
       {
@@ -132,7 +151,6 @@ module.exports = {
           'render'
         ]
       }
-    ],
-    'linebreak-style': 0
+    ]
   }
 }

package.json

@@ -6,7 +6,7 @@
   "author": "James Gillmore <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "start": "npm run clean && cross-env NODE_ENV=development babel-watch server/index.js",
+    "start": "npm run clean && cross-env NODE_ENV=development babel-node server/index.js",
     "start:prod": "npm run build && npm run serve",
     "serve": "cross-env NODE_ENV=production node buildServer/index.js",
     "build": "npm run build:client && npm run build:server && npm run build:node",
@@ -17,10 +17,9 @@
     "precommit": "lint-staged",
     "cm": "git-cz",
     "lint": "eslint --fix src server webpack",
-    "format": "prettier --single-quote --semi=false --write '{src,server,webpack}/**/*.js' && npm run lint"
+    "format": "npm run lint"
   },
   "dependencies": {
-    "babel-polyfill": "^6.23.0",
     "cookie-parser": "^1.4.3",
     "express": "^4.15.2",
     "fetch-everywhere": "^1.0.5",
@@ -38,41 +37,43 @@
     "webpack-flush-chunks": "^1.1.22"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.40",
+    "@babel/core": "^7.0.0-beta.40",
+    "@babel/node": "^7.0.0-beta.40",
+    "@babel/preset-env": "^7.0.0-beta.40",
+    "@babel/preset-react": "^7.0.0-beta.40",
+    "@babel/preset-stage-2": "^7.0.0-beta.40",
     "autodll-webpack-plugin": "^0.3.4",
-    "babel-cli": "^6.24.0",
-    "babel-core": "^6.24.0",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-universal-import": "^1.2.2",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.23.0",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-watch": "^2.0.6",
+    "babel-eslint": "^8.2.1",
+    "babel-loader": "v8.0.0-beta.0",
+    "babel-plugin-universal-import": "^1.4.0",
     "bluebird": "^3.5.1",
     "commitizen": "^2.9.6",
     "cross-env": "^5.0.1",
     "css-loader": "^0.28.7",
     "cz-conventional-changelog": "^2.0.0",
     "eslint": "^4.9.0",
     "eslint-config-airbnb": "^16.0.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-flowtype": "^2.32.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.4.0",
     "extract-css-chunks-webpack-plugin": "^2.0.15",
-    "flow-bin": "^0.57.2",
+    "flow-bin": "^0.66.0",
     "husky": "^0.14.3",
-    "jest": "^21.2.1",
-    "lint-staged": "^4.2.3",
+    "jest": "^22.3.0",
+    "lint-staged": "^6.1.1",
     "prettier": "^1.4.4",
     "react-hot-loader": "^3.0.0",
     "rimraf": "^2.6.1",
     "stats-webpack-plugin": "^0.6.1",
     "travis-github-status": "^1.4.0",
     "webpack": "^3.5.4",
-    "webpack-dev-middleware": "^1.12.0",
+    "webpack-dev-middleware": "^2.0.5",
     "webpack-hot-middleware": "^2.18.2",
-    "webpack-hot-server-middleware": "^0.1.0",
+    "webpack-hot-server-middleware": "^0.4.0",
     "write-file-webpack-plugin": "^4.1.0"
   },
   "config": {

server/configureStore.js

@@ -3,7 +3,7 @@ import { NOT_FOUND } from 'redux-first-router'
 import configureStore from '../src/configureStore'
 
 export default async (req, res) => {
-  const jwToken = req.cookies.jwToken // see server/index.js to change jwToken
+  const { jwToken } = req.cookies // see server/index.js to change jwToken
   const preLoadedState = { jwToken } // onBeforeChange will authenticate using this
 
   const history = createHistory({ initialEntries: [req.path] })
@@ -12,15 +12,16 @@ export default async (req, res) => {
   // if not using onBeforeChange + jwTokens, you can also async authenticate
   // here against your db (i.e. using req.cookies.sessionId)
 
-  let location = store.getState().location
+  let location = store.getState().location // eslint-disable-line prefer-destructuring
   if (doesRedirect(location, res)) return false
 
   // using redux-thunk perhaps request and dispatch some app-wide state as well, e.g:
   // await Promise.all([store.dispatch(myThunkA), store.dispatch(myThunkB)])
 
   await thunk(store) // THE PAYOFF BABY!
 
-  location = store.getState().location // remember: state has now changed
+  // remember: state has now changed, so we'll need to set location to the latest state
+  location = store.getState().location // eslint-disable-line prefer-destructuring
   if (doesRedirect(location, res)) return false // only do this again if ur thunks have redirects
 
   const status = location.type === NOT_FOUND ? 404 : 200
@@ -33,4 +34,5 @@ const doesRedirect = ({ kind, pathname }, res) => {
     res.redirect(302, pathname)
     return true
   }
+  return false
 }

server/index.js

@@ -1,4 +1,3 @@
-import 'babel-polyfill'
 import express from 'express'
 import cookieParser from 'cookie-parser'
 import webpack from 'webpack'
@@ -10,7 +9,7 @@ import serverConfig from '../webpack/server.dev'
 import { findVideos, findVideo } from './api'
 
 const DEV = process.env.NODE_ENV === 'development'
-const publicPath = clientConfig.output.publicPath
+const { publicPath } = clientConfig.output
 const outputPath = clientConfig.output.path
 const app = express()
 
@@ -50,23 +49,24 @@ if (DEV) {
   const multiCompiler = webpack([clientConfig, serverConfig])
   const clientCompiler = multiCompiler.compilers[0]
 
-  app.use(webpackDevMiddleware(multiCompiler, { publicPath, stats: { colors: true } }))
+  app.use(
+    webpackDevMiddleware(multiCompiler, { publicPath, stats: { colors: true } })
+  )
   app.use(webpackHotMiddleware(clientCompiler))
   app.use(
     // keeps serverRender updated with arg: { clientStats, outputPath }
     webpackHotServerMiddleware(multiCompiler, {
       serverRendererOptions: { outputPath }
     })
   )
-}
-else {
-  const clientStats = require('../buildClient/stats.json') // eslint-disable-line import/no-unresolved
-  const serverRender = require('../buildServer/main.js').default // eslint-disable-line import/no-unresolved
+} else {
+  const clientStats = require('../buildClient/stats.json') // eslint-disable-line import/no-unresolved, global-require
+  const serverRender = require('../buildServer/main.js').default // eslint-disable-line import/no-unresolved, global-require
 
   app.use(publicPath, express.static(outputPath))
   app.use(serverRender({ clientStats, outputPath }))
 }
 
 app.listen(3000, () => {
-  console.log('Listening @ http://localhost:3000/')
+  console.log('Listening @ http://localhost:3000/') // eslint-disable-line no-console
 })

server/render.js

@@ -19,8 +19,7 @@ export default ({ clientStats }) => async (req, res, next) => {
   console.log('REQUESTED PATH:', req.path)
   console.log('CHUNK NAMES', chunkNames)
 
-  return res.send(
-    `<!doctype html>
+  return res.send(`<!doctype html>
       <html>
         <head>
           <meta charset="utf-8">
@@ -35,11 +34,11 @@ export default ({ clientStats }) => async (req, res, next) => {
           <script type='text/javascript' src='/static/vendor.js'></script>
           ${js}
         </body>
-      </html>`
-  )
+      </html>`)
 }
 
-const createApp = (App, store) =>
+const createApp = (App, store) => (
   <Provider store={store}>
     <App />
   </Provider>
+)

src/components/App.js

@@ -6,7 +6,7 @@ import Switcher from './Switcher'
 
 import styles from '../css/App'
 
-export default () =>
+export default () => (
   <div>
     <div className={styles.app}>
       <Sidebar />
@@ -15,3 +15,4 @@ export default () =>
 
     <DevTools />
   </div>
+)

src/components/DevTools.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 
 import styles from '../css/DevTools'
 
-const DevTools = () =>
+const DevTools = () => (
   <div className={styles.container}>
     <div className={styles.titleBar}>
       <span>ACTIONS</span>
@@ -16,18 +16,21 @@ const DevTools = () =>
       <StateBox />
     </div>
   </div>
+)
 
-const ActionsBoxComponent = ({ actions }) =>
+const ActionsBoxComponent = ({ actions }) => (
   <div className={styles.actionsBox}>
     <pre>{JSON.stringify(actions, null, 1)}</pre>
   </div>
+)
 
 const ActionsBox = connect(({ actions }) => ({ actions }))(ActionsBoxComponent)
 
-const StateBoxComponent = state =>
+const StateBoxComponent = state => (
   <div className={styles.stateBox}>
     <pre>{JSON.stringify(state, null, 1)}</pre>
   </div>
+)
 
 const StateBox = connect(state => ({ ...state, actions: undefined }))(
   StateBoxComponent

src/components/Error.js

@@ -1,7 +1,4 @@
 import React from 'react'
 import { notFound } from '../css/Switcher'
 
-export default error =>
-  <div className={notFound}>
-    ERROR: {error.message}
-  </div>
+export default error => <div className={notFound}>ERROR: {error.message}</div>