Merge branch 'master' into feature/public-api

.babelrc

@@ -1,13 +1,83 @@
 {
-  "presets": ["react", "env", "stage-0"],
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
   "env": {
     "production": {
       "plugins": [
         "transform-react-remove-prop-types",
-        "transform-react-constant-elements",
+        "@babel/plugin-transform-react-constant-elements",
-        "transform-react-inline-elements"
+        "@babel/plugin-transform-react-inline-elements",
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-syntax-import-meta",
+        [
+          "@babel/plugin-proposal-decorators",
+          {
+            "legacy": true
+          }
+        ],
+        [
+          "@babel/plugin-proposal-class-properties",
+          {
+            "loose": true
+          }
+        ],
+        "@babel/plugin-proposal-json-strings",
+        "@babel/plugin-proposal-function-sent",
+        "@babel/plugin-proposal-export-namespace-from",
+        "@babel/plugin-proposal-numeric-separator",
+        "@babel/plugin-proposal-throw-expressions",
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-proposal-logical-assignment-operators",
+        "@babel/plugin-proposal-optional-chaining",
+        [
+          "@babel/plugin-proposal-pipeline-operator",
+          {
+            "proposal": "minimal"
+          }
+        ],
+        "@babel/plugin-proposal-nullish-coalescing-operator",
+        "@babel/plugin-proposal-do-expressions",
+        "@babel/plugin-proposal-function-bind"
       ],
-      "presets": ["env", "react", "react-optimize", "stage-0"]
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+      ]
     }
-  }
+  },
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/plugin-proposal-json-strings",
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "@babel/plugin-proposal-optional-chaining",
+    [
+      "@babel/plugin-proposal-pipeline-operator",
+      {
+        "proposal": "minimal"
+      }
+    ],
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-do-expressions",
+    "@babel/plugin-proposal-function-bind"
+  ]
 }

client/constants.js

@@ -121,6 +121,9 @@ export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
 export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';
 export const SET_ASSETS = 'SET_ASSETS';
 
+export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
+export const SET_SORTING = 'SET_SORTING';
+
 export const START_LOADING = 'START_LOADING';
 export const STOP_LOADING = 'STOP_LOADING';
 

client/images/sort-arrow-down.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="30px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<g>
+	<path d="M49.761,67.969l-17.36-30.241h34.561L49.761,67.969z"/>
+</g>
+</svg>

client/images/sort-arrow-up.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="30px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<g>
+	<path d="M49.761,37.728l17.36,30.241H32.561L49.761,37.728z"/>
+</g>
+</svg>

client/index.jsx

@@ -13,6 +13,7 @@ require('./images/p5js-square-logo.png');
 
 const history = browserHistory;
 const initialState = window.__INITIAL_STATE__;
+
 const store = configureStore(initialState);
 
 const App = () => (

client/modules/IDE/actions/sorting.js

@@ -0,0 +1,27 @@
+import * as ActionTypes from '../../../constants';
+
+export const DIRECTION = {
+  ASC: 'ASCENDING',
+  DESC: 'DESCENDING'
+};
+
+export function setSorting(field, direction) {
+  return {
+    type: ActionTypes.SET_SORTING,
+    payload: {
+      field,
+      direction
+    }
+  };
+}
+
+export function resetSorting() {
+  return setSorting('createdAt', DIRECTION.DESC);
+}
+
+export function toggleDirectionForField(field) {
+  return {
+    type: ActionTypes.TOGGLE_DIRECTION,
+    field
+  };
+}

client/modules/IDE/components/Editor.jsx

@@ -283,8 +283,6 @@ class Editor extends React.Component {
     }
   }
 
-  _cm: CodeMirror.Editor
-
   render() {
     const editorSectionClass = classNames({
       'editor': true,

client/modules/IDE/components/ErrorModal.jsx

@@ -26,7 +26,8 @@ class ErrorModal extends React.Component {
   staleProject() {
     return (
       <p>
-        The project you have attempted to save has been saved from another window. Please refresh the page to see the latest version.
+        The project you have attempted to save has been saved from another window.
+        Please refresh the page to see the latest version.
       </p>
     );
   }

client/modules/IDE/components/SketchList.jsx

@@ -6,17 +6,24 @@ import InlineSVG from 'react-inlinesvg';
 import { connect } from 'react-redux';
 import { browserHistory, Link } from 'react-router';
 import { bindActionCreators } from 'redux';
+import classNames from 'classnames';
 import * as ProjectActions from '../actions/project';
 import * as SketchActions from '../actions/projects';
 import * as ToastActions from '../actions/toast';
+import * as SortingActions from '../actions/sorting';
+import getSortedSketches from '../selectors/projects';
 import Loader from '../../App/components/loader';
 
 const trashCan = require('../../../images/trash-can.svg');
+const arrowUp = require('../../../images/sort-arrow-up.svg');
+const arrowDown = require('../../../images/sort-arrow-down.svg');
 
 class SketchList extends React.Component {
   constructor(props) {
     super(props);
     this.props.getProjects(this.props.username);
+    this.props.resetSorting();
+    this._renderFieldHeader = this._renderFieldHeader.bind(this);
   }
 
   getSketchesTitle() {
@@ -30,16 +37,39 @@ class SketchList extends React.Component {
     return !this.props.loading && this.props.sketches.length > 0;
   }
 
-  renderLoader() {
+  _renderLoader() {
     if (this.props.loading) return <Loader />;
     return null;
   }
 
-  renderEmptyTable() {
+  _renderEmptyTable() {
-    if (!this.props.loading && this.props.sketches.length === 0) return (<p className="sketches-table__empty">No sketches.</p>);
+    if (!this.props.loading && this.props.sketches.length === 0) {
+      return (<p className="sketches-table__empty">No sketches.</p>);
+    }
     return null;
   }
 
+  _renderFieldHeader(fieldName, displayName) {
+    const { field, direction } = this.props.sorting;
+    const headerClass = classNames({
+      'sketches-table__header': true,
+      'sketches-table__header--selected': field === fieldName
+    });
+    return (
+      <th scope="col">
+        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+          <span className={headerClass}>{displayName}</span>
+          {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
+            <InlineSVG src={arrowUp} />
+          }
+          {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
+            <InlineSVG src={arrowDown} />
+          }
+        </button>
+      </th>
+    );
+  }
+
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
@@ -47,16 +77,16 @@ class SketchList extends React.Component {
         <Helmet>
           <title>{this.getSketchesTitle()}</title>
         </Helmet>
-        {this.renderLoader()}
+        {this._renderLoader()}
-        {this.renderEmptyTable()}
+        {this._renderEmptyTable()}
         {this.hasSketches() &&
           <table className="sketches-table" summary="table containing all saved projects">
             <thead>
               <tr>
                 <th className="sketch-list__trash-column" scope="col"></th>
-                <th scope="col">Sketch</th>
+                {this._renderFieldHeader('name', 'Sketch')}
-                <th scope="col">Date created</th>
+                {this._renderFieldHeader('createdAt', 'Date Created')}
-                <th scope="col">Date updated</th>
+                {this._renderFieldHeader('updatedAt', 'Date Updated')}
               </tr>
             </thead>
             <tbody>
@@ -110,7 +140,13 @@ SketchList.propTypes = {
   })).isRequired,
   username: PropTypes.string,
   loading: PropTypes.bool.isRequired,
-  deleteProject: PropTypes.func.isRequired
+  deleteProject: PropTypes.func.isRequired,
+  toggleDirectionForField: PropTypes.func.isRequired,
+  resetSorting: PropTypes.func.isRequired,
+  sorting: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    direction: PropTypes.string.isRequired
+  }).isRequired,
 };
 
 SketchList.defaultProps = {
@@ -120,13 +156,14 @@ SketchList.defaultProps = {
 function mapStateToProps(state) {
   return {
     user: state.user,
-    sketches: state.sketches,
+    sketches: getSortedSketches(state),
-    loading: state.loading,
+    sorting: state.sorting,
+    loading: state.loading
   };
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(Object.assign({}, SketchActions, ProjectActions, ToastActions), dispatch);
+  return bindActionCreators(Object.assign({}, SketchActions, ProjectActions, ToastActions, SortingActions), dispatch);
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(SketchList);

client/modules/IDE/reducers/project.js

@@ -50,7 +50,7 @@ const project = (state, action) => {
       return Object.assign({}, state, { updatedAt: action.value });
     case ActionTypes.START_SAVING_PROJECT:
       return Object.assign({}, state, { isSaving: true });
-    case ActionTypes.START_STOP_PROJECT:
+    case ActionTypes.END_SAVING_PROJECT:
       return Object.assign({}, state, { isSaving: false });
     default:
       return state;

client/modules/IDE/reducers/sorting.js

@@ -0,0 +1,29 @@
+import * as ActionTypes from '../../../constants';
+import { DIRECTION } from '../actions/sorting';
+
+const initialState = {
+  field: 'createdAt',
+  direction: DIRECTION.DESC
+};
+
+const sorting = (state = initialState, action) => {
+  switch (action.type) {
+    case ActionTypes.TOGGLE_DIRECTION:
+      if (action.field && action.field !== state.field) {
+        if (action.field === 'name') {
+          return { ...state, field: action.field, direction: DIRECTION.ASC };
+        }
+        return { ...state, field: action.field, direction: DIRECTION.DESC };
+      }
+      if (state.direction === DIRECTION.ASC) {
+        return { ...state, direction: DIRECTION.DESC };
+      }
+      return { ...state, direction: DIRECTION.ASC };
+    case ActionTypes.SET_SORTING:
+      return { ...state, field: action.payload.field, direction: action.payload.direction };
+    default:
+      return state;
+  }
+};
+
+export default sorting;

client/modules/IDE/selectors/projects.js

@@ -0,0 +1,32 @@
+import { createSelector } from 'reselect';
+import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
+import orderBy from 'lodash/orderBy';
+import { DIRECTION } from '../actions/sorting';
+
+const getSketches = state => state.sketches;
+const getField = state => state.sorting.field;
+const getDirection = state => state.sorting.direction;
+
+const getSortedSketches = createSelector(
+  getSketches,
+  getField,
+  getDirection,
+  (sketches, field, direction) => {
+    if (field === 'name') {
+      if (direction === DIRECTION.DESC) {
+        return orderBy(sketches, 'name', 'desc');
+      }
+      return orderBy(sketches, 'name', 'asc');
+    }
+    const sortedSketches = [...sketches].sort((a, b) => {
+      const result =
+        direction === DIRECTION.ASC
+          ? differenceInMilliseconds(new Date(a[field]), new Date(b[field]))
+          : differenceInMilliseconds(new Date(b[field]), new Date(a[field]));
+      return result;
+    });
+    return sortedSketches;
+  }
+);
+
+export default getSortedSketches;

client/reducers.js

@@ -10,6 +10,7 @@ import sketches from './modules/IDE/reducers/projects';
 import toast from './modules/IDE/reducers/toast';
 import console from './modules/IDE/reducers/console';
 import assets from './modules/IDE/reducers/assets';
+import sorting from './modules/IDE/reducers/sorting';
 import loading from './modules/IDE/reducers/loading';
 
 const rootReducer = combineReducers({
@@ -20,6 +21,7 @@ const rootReducer = combineReducers({
   user,
   project,
   sketches,
+  sorting,
   editorAccessibility,
   toast,
   console,

client/styles/components/_sketch-list.scss

@@ -19,6 +19,31 @@
   height: #{32 / $base-font-size}rem;
 }
 
+.sketch-list__sort-button {
+  display: flex;
+  align-items: center;
+  height: #{35 / $base-font-size}rem;
+  & svg {
+    @include themify() {
+      fill: getThemifyVariable('inactive-text-color')
+    }
+  }
+}
+
+.sketches-table__header {
+  border-bottom: 2px dashed transparent;
+  padding: #{3 / $base-font-size}rem 0;
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color')
+  }
+}
+
+.sketches-table__header--selected {
+  @include themify() {
+    border-color: getThemifyVariable('logo-color');
+  }
+}
+
 .sketches-table__row {
   margin: #{10 / $base-font-size}rem;
   height: #{72 / $base-font-size}rem;

index.js

@@ -4,18 +4,10 @@ if (process.env.NODE_ENV === 'production') {
   require('./dist/server.bundle.js');
 } else {
   let parsed = require('dotenv').config();
-  require('babel-register')({
+  require('@babel/register')({
-    "plugins": [
+    presets: ["@babel/preset-env"]
-      [
-        "babel-plugin-webpack-loaders",
-        {
-          "config": "./webpack/config.babel.js",
-          "verbose": false
-        }
-      ]
-    ]
   });
-  require('babel-polyfill');
+  require('@babel/polyfill');
   //// in development, let .env values override those in the environment already (i.e. in docker-compose.yml)
   // so commenting this out makes the docker container work.
   // if (process.env.NODE_ENV === 'development') {

package.json

@@ -38,40 +38,55 @@
     "url": "git+https://github.com/catarak/p5.js-web-editor.git"
   },
   "devDependencies": {
-    "babel-eslint": "^7.1.1",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "babel-loader": "^7.1.5",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
-    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "@babel/plugin-proposal-do-expressions": "^7.2.0",
-    "babel-plugin-transform-react-inline-elements": "^6.22.0",
+    "@babel/plugin-proposal-export-default-from": "^7.2.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
+    "@babel/plugin-proposal-function-bind": "^7.2.0",
+    "@babel/plugin-proposal-function-sent": "^7.2.0",
+    "@babel/plugin-proposal-json-strings": "^7.2.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.3.2",
+    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-syntax-import-meta": "^7.2.0",
+    "@babel/plugin-transform-react-constant-elements": "^7.2.0",
+    "@babel/plugin-transform-react-inline-elements": "^7.2.0",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.2.12",
-    "babel-plugin-webpack-loaders": "^0.9.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-optimize": "^1.0.1",
-    "babel-preset-stage-0": "^6.24.1",
     "chunk-manifest-webpack-plugin": "github:catarak/chunk-manifest-webpack-plugin",
     "css-loader": "^0.23.1",
     "cssnano": "^3.10.0",
-    "eslint": "^4.19.1",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.12.3",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^2.0.0",
+    "jest": "^23.6.0",
     "node-sass": "^4.11.0",
     "nodemon": "^1.18.9",
     "postcss-cssnext": "^2.11.0",
-    "jest": "^23.6.0",
     "postcss-focus": "^1.0.0",
     "postcss-loader": "^0.9.1",
     "postcss-reporter": "^1.4.1",
+    "react-test-renderer": "^16.6.0",
     "rimraf": "^2.6.3",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.13.2",
     "webpack-manifest-plugin": "^2.0.4",
-    "react-test-renderer": "^16.6.0",
     "webpack-node-externals": "^1.7.2"
   },
   "engines": {
@@ -79,12 +94,12 @@
     "npm": "6.4.1"
   },
   "dependencies": {
+    "@babel/core": "^7.4.5",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/register": "^7.4.4",
     "archiver": "^1.1.0",
     "async": "^2.6.1",
     "axios": "^0.12.0",
-    "babel-core": "^6.26.3",
-    "babel-polyfill": "^6.26.0",
-    "babel-register": "^6.26.0",
     "bcrypt-nodejs": "0.0.3",
     "blob-util": "^1.2.1",
     "body-parser": "^1.18.3",
@@ -93,7 +108,7 @@
     "clipboard": "^1.7.1",
     "codemirror": "^5.42.2",
     "connect-mongo": "^1.3.2",
-    "console-feed": "^2.8.5",
+    "console-feed": "^2.8.8",
     "cookie-parser": "^1.4.3",
     "cors": "^2.8.5",
     "cross-env": "^5.2.0",
@@ -103,9 +118,9 @@
     "dotenv": "^2.0.0",
     "dropzone": "^4.3.0",
     "escape-string-regexp": "^1.0.5",
-    "eslint-loader": "^1.3.0",
+    "eslint-loader": "^2.1.2",
     "express": "^4.16.4",
-    "express-basic-auth": "^1.1.6",
+    "express-basic-auth": "^1.2.0",
     "express-session": "^1.15.6",
     "friendly-words": "^1.1.3",
     "htmlhint": "^0.10.1",
@@ -146,6 +161,7 @@
     "redux-thunk": "^2.3.0",
     "request": "^2.88.0",
     "request-promise": "^4.1.1",
+    "reselect": "^4.0.0",
     "s3": "^4.4.0",
     "s3-policy": "^0.2.0",
     "sass-extract": "^2.1.0",

server/migrations/db_reformat_start.js

@@ -1,3 +1,3 @@
-require('babel-register');
+require('@babel/register');
-require('babel-polyfill');
+require('@babel/polyfill');
 require('./db_reformat');

server/migrations/start.js

@@ -1,3 +1,3 @@
-require('babel-register');
+require('@babel/register');
-require('babel-polyfill');
+require('@babel/polyfill');
 require('./moveBucket');

server/scripts/fetch-examples-gg.js

@@ -1,5 +1,5 @@
-require('babel-register');
+require('@babel/register');
-require('babel-polyfill');
+require('@babel/polyfill');
 const dotenv = require('dotenv');
 
 if (process.env.NODE_ENV === 'development') {

server/scripts/fetch-examples-ml5.js

@@ -1,5 +1,5 @@
-require('babel-register');
+require('@babel/register');
-require('babel-polyfill');
+require('@babel/polyfill');
 const dotenv = require('dotenv');
 
 if (process.env.NODE_ENV === 'development') {

server/scripts/fetch-examples.js

@@ -1,5 +1,5 @@
-require('babel-register');
+require('@babel/register');
-require('babel-polyfill');
+require('@babel/polyfill');
 const dotenv = require('dotenv');
 
 if (process.env.NODE_ENV === 'development') {

webpack/config.babel.js

@@ -1,43 +0,0 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const cssnext = require('postcss-cssnext');
-const postcssFocus = require('postcss-focus');
-const postcssReporter = require('postcss-reporter');
-
-module.exports = {
-  output: {
-    publicPath: '/',
-    libraryTarget: 'commonjs2',
-  },
-  resolve: {
-    extensions: ['', '.js', '.jsx'],
-    modules: [
-      'client',
-      'node_modules',
-    ],
-  },
-  module: {
-    loaders: [
-      {
-        test: /main\.scss$/,
-        exclude: /node_modules/,
-        loader: ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: 'css-loader!sass-loader!postcss-loader'
-        })
-      },
-      {
-        test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.mp3$|\.eot$|\.ttf$|\.woff$|\.woff2$/i,
-        loader: 'url-loader?limit=10000',
-      },
-    ],
-  },
-  postcss: () => [
-    postcssFocus(),
-    cssnext({
-      browsers: ['last 2 versions', 'IE > 10'],
-    }),
-    postcssReporter({
-      clearMessages: true,
-    }),
-  ],
-};

webpack/config.dev.js

@@ -9,6 +9,8 @@ module.exports = [{
   devtool: 'cheap-module-eval-source-map',
   entry: {
     app: [
+      'core-js/modules/es6.promise',
+      'core-js/modules/es6.array.iterator',
       'webpack-hot-middleware/client',
       'react-hot-loader/patch',
       './client/index.jsx',
@@ -120,21 +122,9 @@ module.exports = [{
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
-        query: {
+        options: {
-          presets: [
+          babelrc: true
-            'react',
+        }
-            'env',
-            'stage-0',
-          ],
-          plugins: [
-            [
-              'babel-plugin-webpack-loaders', {
-                'config': path.resolve(__dirname, './config.babel.js'),
-                'verbose': false
-              }
-            ]
-          ]
-        },
       }
     ],
   },

webpack/config.examples.js

@@ -27,21 +27,9 @@ module.exports = [{
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
-        query: {
+        options: {
-          presets: [
+          babelrc: true
-            'react',
+        }
-            'env',
-            'stage-0',
-          ],
-          plugins: [
-            [
-              'babel-plugin-webpack-loaders', {
-                'config': path.resolve(__dirname, './config.babel.js'),
-                "verbose": false
-              }
-            ]
-          ]
-        },
       }
     ],
   },
@@ -72,21 +60,9 @@ module.exports = [{
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
-        query: {
+        options: {
-          presets: [
+          babelrc: true
-            'react',
+        }
-            'env',
-            'stage-0',
-          ],
-          plugins: [
-            [
-              'babel-plugin-webpack-loaders', {
-                'config': path.resolve(__dirname, './config.babel.js'),
-                "verbose": false
-              }
-            ]
-          ]
-        },
       }
     ],
   },
@@ -117,21 +93,9 @@ module.exports = [{
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
-        query: {
+        options: {
-          presets: [
+          babelrc: true
-            'react',
+        }
-            'env',
-            'stage-0',
-          ],
-          plugins: [
-            [
-              'babel-plugin-webpack-loaders', {
-                'config': path.resolve(__dirname, './config.babel.js'),
-                "verbose": false
-              }
-            ]
-          ]
-        },
       }
     ],
   },

webpack/config.prod.js

@@ -16,7 +16,9 @@ module.exports = [{
 
   entry: {
     app: [
-      'babel-polyfill',
+      '@babel/polyfill',
+      'core-js/modules/es6.promise',
+      'core-js/modules/es6.array.iterator',
       path.resolve(__dirname, '../client/index.jsx')
     ],
     vendor: [
@@ -167,7 +169,10 @@ module.exports = [{
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader'
+        loader: 'babel-loader',
+        options: {
+          babelrc: true
+        }
       }
     ]
   },

webpack/config.server.js

@@ -33,21 +33,9 @@ module.exports = {
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
-        query: {
+        options: {
-          presets: [
+          babelrc: true
-            'react',
+        }
-            'env',
-            'stage-0',
-          ],
-          plugins: [
-            [
-              'babel-plugin-webpack-loaders', {
-                'config': path.resolve(__dirname, './config.babel.js'),
-                "verbose": false
-              }
-            ]
-          ]
-        },
       }, {
         test: /\.json$/,
         loader: 'json-loader',