Migrate to babel 6

Author: emmenko

.babelrc

@@ -1,18 +1,23 @@
 {
-  "optional": ["runtime"],
-  "stage": 0,
+  "plugins": [ "transform-decorators", "transform-runtime" ],
+  "presets": [ "es2015", "react", "stage-0" ],
   "env": {
     "development": {
-      "plugins": ["react-transform"],
-      "extra": {
-        "react-transform": {
-          "transforms": [{
-            "transform": "react-transform-hmr",
-            "imports": ["react"],
-            "locals": ["module"]
-          }]
-        }
-      }
+      "plugins": [
+        [ "react-transform", {
+          "transforms": [
+            {
+              "transform": "react-transform-hmr",
+              "imports": ["react"],
+              "locals": ["module"]
+            },
+            {
+              "transform": "react-transform-catch-errors",
+              "imports": [ "react", "redbox-react" ]
+            }
+          ]
+        }]
+      ]
     }
   }
 }

lib/Root.js

@@ -90,8 +90,7 @@ function logout (nextState, replaceState) {
   replaceState({}, '/login')
 }
 
-@connect(({ application }) => ({ application }))
-export default class Root extends React.Component {
+class Root extends React.Component {
   static propTypes = {
     application: PropTypes.object.isRequired
   }
@@ -102,3 +101,5 @@ export default class Root extends React.Component {
     )
   }
 }
+
+export default connect(({ application }) => ({ application }))(Root)

lib/components/Menu.js

@@ -13,8 +13,7 @@ const menuItems = [
   { text: 'Fork Me', link: GITHUB_REPO, icon: 'fa fa-github', isExternal: true }
 ]
 
-@connect(({ application }) => ({ application }), applicationActions)
-export default class Menu extends React.Component {
+class Menu extends React.Component {
 
   static propTypes = {
     activeClass: PropTypes.string.isRequired,
@@ -58,3 +57,8 @@ export default class Menu extends React.Component {
     )
   }
 }
+
+export default connect(
+  ({ application }) => ({ application }),
+  applicationActions
+)(Menu)

lib/components/github/Repo.js

@@ -4,12 +4,7 @@ import { fetchOnUpdate } from '../../decorators'
 import StargazersUser from './StargazersUser'
 import Pagination from './Pagination'
 
-@fetchOnUpdate([ 'username', 'repo' ], (params, actions) => {
-  const { username, repo } = params
-  actions.fetchRepo({ username, repo })
-  actions.fetchRepoStargazers({ username, repo })
-})
-export default class Repo extends React.Component {
+class Repo extends React.Component {
 
   static propTypes = {
     actions: PropTypes.object,
@@ -87,3 +82,9 @@ export default class Repo extends React.Component {
     )
   }
 }
+
+export default fetchOnUpdate([ 'username', 'repo' ], (params, actions) => {
+  const { username, repo } = params
+  actions.fetchRepo({ username, repo })
+  actions.fetchRepoStargazers({ username, repo })
+})(Repo)

lib/components/github/User.js

@@ -4,12 +4,7 @@ import { fetchOnUpdate } from '../../decorators'
 import StargazersRepo from './StargazersRepo'
 import Pagination from './Pagination'
 
-@fetchOnUpdate(['username'], (params, actions) => {
-  const { username } = params
-  actions.fetchUser({ username })
-  actions.fetchUserStargazers({ username })
-})
-export default class User extends React.Component {
+class User extends React.Component {
 
   static propTypes = {
     actions: PropTypes.object,
@@ -67,3 +62,9 @@ export default class User extends React.Component {
     )
   }
 }
+
+export default fetchOnUpdate(['username'], (params, actions) => {
+  const { username } = params
+  actions.fetchUser({ username })
+  actions.fetchUserStargazers({ username })
+})(User)

lib/components/pages/GithubStargazers.js

@@ -13,12 +13,7 @@ const messages = defineMessages({
   }
 })
 
-@connect(state => ({
-  github: state.github
-}), dispatch => ({
-  actions: bindActionCreators(githubActions, dispatch)
-}))
-export default class GithubStargazers extends React.Component {
+class GithubStargazers extends React.Component {
 
   static propTypes = {
     children: PropTypes.any,
@@ -44,3 +39,8 @@ export default class GithubStargazers extends React.Component {
     )
   }
 }
+
+export default connect(
+  ({ github }) => ({ github }),
+  dispatch => ({ actions: bindActionCreators(githubActions, dispatch) })
+)(GithubStargazers)

lib/components/pages/SuperSecretArea.js

@@ -10,8 +10,7 @@ const messages = defineMessages({
   }
 })
 
-@secure('manage_account')
-export default class SuperSecretArea extends React.Component {
+class SuperSecretArea extends React.Component {
   render () {
     return (
       <div>
@@ -25,3 +24,5 @@ export default class SuperSecretArea extends React.Component {
     )
   }
 }
+
+export default secure('manage_account')(SuperSecretArea)

package.json

@@ -25,7 +25,6 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "babel-runtime": "~5.8.29",
     "classnames": "~2.2.1",
     "history": "~1.13.1",
     "intl": "~1.0.1",
@@ -46,12 +45,19 @@
     "whatwg-fetch": "~0.10.1"
   },
   "devDependencies": {
-    "babel": "^5.8.29",
-    "babel-core": "^5.8.32",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-react-intl": "^1.0.0-beta-5",
-    "babel-plugin-react-transform": "^1.1.1",
+    "babel-cli": "^6.3.17",
+    "babel-core": "^6.3.21",
+    "babel-eslint": "^5.0.0-beta6",
+    "babel-loader": "^6.2.0",
+    "babel-plugin-react-intl": "^2.0.0",
+    "babel-plugin-react-transform": "^2.0.0-beta1",
+    "babel-plugin-transform-decorators": "^6.3.13",
+    "babel-plugin-transform-runtime": "^6.3.13",
+    "babel-polyfill": "^6.3.14",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "babel-runtime": "^6.3.19",
     "css-loader": "^0.23.0",
     "cssnext-loader": "^1.0.1",
     "eslint": "^1.10.3",

webpack.config.js

@@ -5,6 +5,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
   devtool: 'cheap-module-eval-source-map',
   entry: [
+    'babel-polyfill',
     'webpack-hot-middleware/client',
     './lib/index'
   ],
@@ -32,7 +33,7 @@ module.exports = {
   module: {
     loaders: [
       { test: /\.css$/, loader: 'style-loader!css-loader!cssnext-loader' },
-      { test: /\.js$/, loaders: ['babel'], include: path.join(__dirname, 'lib') }
+      { test: /\.js$/, loader: 'babel', include: path.join(__dirname, 'lib') }
     ]
   },
   cssnext: {

webpack.config.production.js

@@ -5,7 +5,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   entry: {
-    app: './lib/index.js'
+    app: [ 'babel-polyfill', './lib/index.js' ]
   },
   output: {
     filename: '[name].min.js',