update to babel 6

.babelrc

@@ -1,5 +1,4 @@
 {
-  "stage": 0,
-  "optional": ["runtime"],
-  "plugins": ["object-assign"]
-}
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["transform-runtime", "transform-object-assign"]
+}

configs/webpack/common.config.js

@@ -34,23 +34,6 @@ function makeDefaultConfig() {
           test: /\.(js|jsx)$/,
           include: [env.inProject(env.DIR_SRC), env.inProject(env.DIR_CONFIG)],
           loader: 'babel',
-          query: {
-            stage: 0,
-            optional: ['runtime'],
-            env: {
-              development: {
-                plugins: ['react-transform'],
-                extra: {
-                  'react-transform': {
-                    transforms: [{
-                      transform: 'react-transform-catch-errors',
-                      imports: ['react', 'redbox-react'],
-                    }],
-                  },
-                },
-              },
-            },
-          },
         },
         {
           test: /\.scss$/,

configs/webpack/development.config.js

@@ -21,12 +21,26 @@ module.exports = function makeClientDevelopmentConfig(config) {
   // HMR is not enabled there, and these transforms require it.
   config.module.loaders = config.module.loaders.map((loader) => {
     if (/js/.test(loader.test)) {
-      // loader.loaders.unshift('react-hot');
-      loader.query.env.development.extra['react-transform'].transforms.push({
-        transform: 'react-transform-hmr',
-        imports: ['react'],
-        locals: ['module'],
-      });
+      // TODO: https://github.com/gaearon/babel-plugin-react-transform/issues/46
+      // const hrm = require('babel-plugin-react-transform');
+      // loader.query.env = {
+      //   development: {
+      //     plugins: [
+      //       [hrm, {
+      //         transforms: [
+      //           {
+      //             transform: 'react-transform-hmr',
+      //             imports: ['react'],
+      //             locals: ['module'],
+      //           }, {
+      //             transform: 'react-transform-catch-errors',
+      //             imports: ['react', 'redbox-react'],
+      //           },
+      //         ],
+      //       }],
+      //     ],
+      //   },
+      // };
     }
     return loader;
   });

package.json

@@ -29,10 +29,13 @@
     "test:unit": "karma start ./configs/karma/index.js"
   },
   "dependencies": {
-    "babel-core": "^5.8.25",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-object-assign": "^1.2.1",
-    "babel-runtime": "^5.8.25",
+    "babel-core": "^6.1.19",
+    "babel-loader": "^6.1.0",
+    "babel-plugin-transform-object-assign": "^6.1.18",
+    "babel-plugin-transform-runtime": "^6.1.18",
+    "babel-preset-es2015": "^6.1.18",
+    "babel-preset-react": "^6.1.18",
+    "babel-preset-stage-0": "^6.1.18",
     "classnames": "^2.2.0",
     "expose-loader": "^0.7.1",
     "extract-text-webpack-plugin": "^0.9.1",

src/javascripts/index.jsx

@@ -5,11 +5,11 @@ import {Provider} from 'react-redux';
 import {ReduxRouter} from 'redux-router';
 
 import {createStore} from './utils/index';
-import createRoutes from './routes';
+import {createRoutes} from './routes';
 
-import * as modules from './modules/index';
+import {Reducers} from './modules/index';
 
-const store = createStore(modules.Reducers, {});
+const store = createStore(Reducers, {});
 const routes = createRoutes(store);
 
 let component = (

src/javascripts/modules/About/actions/index.js

@@ -1,4 +1,4 @@
 import {createAction} from 'redux-actions';
-import {ABOUT_DEV_MODE} from '../constants/index';
+import {actions} from '../constants/index';
 
-export const enableDeveloperMode = createAction(ABOUT_DEV_MODE);
+export const enableDeveloperMode = createAction(actions.ABOUT_DEV_MODE);

src/javascripts/modules/About/components/index.jsx

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-export default class About extends Component {
+export class About extends Component {
   render() {
     const {store, enableDeveloperMode} = this.props;
     const {count, hint} = store.toJS();

src/javascripts/modules/About/constants/index.js

@@ -1,5 +1,5 @@
 import keyMirror from 'keymirror';
 
-module.exports = keyMirror({
+export const actions = keyMirror({
   ABOUT_DEV_MODE: null,
 });

src/javascripts/modules/About/index.js

@@ -2,6 +2,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
 import {enableDeveloperMode} from './actions/index';
+import {About as component} from './components/index';
 
 function mapStateToProps(state) {
   return {store: state.store.about};
@@ -11,12 +12,12 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators({enableDeveloperMode}, dispatch);
 }
 
-export const reducers = require('./reducers/index');
+export const reducers = require('./reducers/index').default;
 export const route = {
   path: 'about',
   getComponent(location, callback) {
-    require.ensure([], (require) => {
-      callback(null, connect(mapStateToProps, mapDispatchToProps)(require('./components/index')));
+    require.ensure([], () => {
+      callback(null, connect(mapStateToProps, mapDispatchToProps)(component));
     });
   },
 };

src/javascripts/modules/About/reducers/index.js

@@ -1,7 +1,9 @@
 import {handleActions} from 'redux-actions';
 import Immutable from 'immutable';
 
-import {ABOUT_DEV_MODE} from '../constants/index';
+import {actions} from '../constants/index';
+
+const {ABOUT_DEV_MODE} = actions;
 
 const initialState = Immutable.fromJS({
   count: 0,

src/javascripts/modules/Home/components/index.jsx

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-export default class Home extends Component {
+export class Home extends Component {
   _handlePushState(event) {
     event.preventDefault();
 

src/javascripts/modules/Home/constants/index.js

@@ -1,7 +1,5 @@
 import keyMirror from 'keymirror';
 
-export default {
-  ActionTypes: keyMirror({
-    HOME_WELCOME_TO: null,
-  }),
-};
+export const actions = keyMirror({
+  HOME_WELCOME_TO: null,
+});

src/javascripts/modules/Home/index.js

@@ -1,5 +1,6 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
+import {Home as component} from './components/index';
 
 import {pushState} from 'redux-router';
 
@@ -11,5 +12,5 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators({pushState}, dispatch);
 }
 
-export const reducers = require('./reducers/index');
-export const view = connect(mapStateToProps, mapDispatchToProps)(require('./components/index'));
+export const reducers = require('./reducers/index').default;
+export const view = connect(mapStateToProps, mapDispatchToProps)(component);

src/javascripts/modules/Layout/components/index.jsx

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-export default class Layout extends Component {
+export class Layout extends Component {
   render() {
     return (
       <div className="page-container">
@@ -14,4 +14,3 @@ export default class Layout extends Component {
 Layout.propTypes = {
   children: PropTypes.element,
 };
-

src/javascripts/modules/Layout/index.js

@@ -1,5 +1,6 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
+import {Layout as component} from './components/index';
 
 function mapStateToProps() {
   return {};
@@ -9,5 +10,5 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators({}, dispatch);
 }
 
-export const reducers = require('./reducers/index');
-export const view = connect(mapStateToProps, mapDispatchToProps)(require('./components/index'));
+export const reducers = require('./reducers/index').default;
+export const view = connect(mapStateToProps, mapDispatchToProps)(component);

src/javascripts/modules/index.js

@@ -4,17 +4,17 @@ import * as layout from './Layout/index';
 import * as home from './Home/index';
 import * as about from './About/index';
 
-export default {
-  Views: {
-    Layout: layout.view,
-    Home: home.view,
-  },
-  Routes: {
-    About: about.route,
-  },
-  Reducers: combineReducers({
-    layout: layout.reducers,
-    home: home.reducers,
-    about: about.reducers,
-  }),
+export const Views = {
+  Layout: layout.view,
+  Home: home.view,
 };
+
+export const Routes = {
+  About: about.route,
+};
+
+export const Reducers = combineReducers({
+  layout: layout.reducers,
+  home: home.reducers,
+  about: about.reducers,
+});

src/javascripts/routes.js

@@ -1,5 +1,5 @@
 import * as modules from './modules/index';
-export default () => {
+export function createRoutes() {
   const {Views: {Layout, Home}, Routes: {About}} = modules;
   return {
     component: 'div',
@@ -12,4 +12,4 @@ export default () => {
       ],
     }],
   };
-};
+}

src/javascripts/utils/createStore.js

@@ -26,6 +26,6 @@ if (__DEBUG__) {
 let buildStore = compose(...composes)(_createStore);
 buildStore = reduxReactRouter({createHistory: createBrowserHistory})(buildStore);
 
-export default function createStore(reducers, initialState = {}) {
+export function createStore(reducers, initialState = {}) {
   return buildStore(combineReducers({store: reducers, form, router}), initialState);
 }

src/javascripts/utils/index.js

@@ -1 +1 @@
-export const createStore = require('./createStore');
+export {createStore} from './createStore';