for #950, update babel to v7 (#1077)

* for #950, upgrade babel to v7

* fix linting errors

* for #950, remove @babel/core from devDependencies (so it's only in dependencies) and change babel-loader config to use .babelrc

* for #950, changes to .babelrc to make  work

* for #950, include core-js modules in webpack config for IE support with babel/plugin-syntax-dynamic-import

* for #950, update babel and associated packages to LTS

.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/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

@@ -36,7 +36,9 @@ class SketchList extends React.Component {
   }
 
   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;
   }
 

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;

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",

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',