Fix website build

website/package.json

@@ -9,8 +9,9 @@
   "scripts": {
     "start": "webpack-dev-server --config webpack/dev --open",
     "build-clean": "rm -rf ./dist && mkdir dist",
+    "build-copy": "cp -r ../examples/data dist && cp -r ./src/static/* dist",
     "build-script": "webpack -p --config webpack/prod",
-    "build": "npm run build-clean && npm run build-script",
+    "build": "npm run build-clean && npm run build-script && npm run build-copy",
     "lint": "eslint src --ignore-pattern workers"
   },
   "dependencies": {
@@ -33,33 +34,24 @@
     "redux-thunk": "^2.1.0"
   },
   "devDependencies": {
-    "autoprefixer-loader": "^3.2.0",
-    "babel-cli": "^6.3.15",
-    "babel-core": "^6.7.7",
-    "babel-eslint": "^7.0.0",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-2": "^6.3.13",
-    "brfs-babel": "^1.0.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.4",
-    "eslint": "^3.0.0",
-    "eslint-config-uber-es2015": "^3.0.0",
-    "eslint-config-uber-jsx": "^3.0.0",
-    "eslint-plugin-react": "^6.0.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "css-loader": "^0.28.11",
     "file-loader": "^0.9.0",
     "node-sass": "^4.3.0",
     "raw-loader": "^0.5.1",
-    "react-autobind": "^1.0.6",
     "react-hot-loader": "next",
-    "sass-loader": "^4.1.1",
-    "style-loader": "^0.13.1",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
     "transform-loader": "^0.2.3",
     "url-loader": "^0.5.7",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^1.16.2",
+    "webpack": "^4.20.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.0",
     "webpack-hot-middleware": "^2.17.0",
     "webworkify-webpack-dropin": "^1.1.9"
   },

website/src/components/info-panel.js

@@ -1,6 +1,5 @@
 /* global window */
 import React, {PureComponent} from 'react';
-import autobind from 'react-autobind';
 import {BaseControl} from 'react-map-gl';
 
 export default class InfoPanel extends BaseControl {
@@ -16,15 +15,14 @@ export default class InfoPanel extends BaseControl {
     super(props);
     this.state = {hasFocus: false};
     this._blurTimer = null;
-    autobind(this);
   }
 
-  _onFocus() {
+  _onFocus = () => {
     window.clearTimeout(this._blurTimer);
     this.setState({hasFocus: true});
   }
 
-  _onBlur() {
+  _onBlur = () => {
     // New focus is not yet available when blur event fires.
     // Wait a bit and if no onfocus event is fired, remove focus
     this._blurTimer = window.setTimeout(() => {
@@ -32,7 +30,7 @@ export default class InfoPanel extends BaseControl {
     }, 1);
   }
 
-  _render() {
+  _render = () => {
     const {hasFocus} = this.state;
 
     return (

website/src/components/page.js

@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import autobind from 'react-autobind';
 
 import MarkdownPage from './markdown-page';
 import {loadContent} from '../actions/app-actions';
@@ -13,7 +12,6 @@ class Page extends Component {
     this.state = {
       content: this._loadContent(props.route.content)
     };
-    autobind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -25,7 +23,7 @@ class Page extends Component {
     }
   }
 
-  _loadContent(content) {
+  _loadContent = (content) => {
     if (typeof content === 'string') {
       this.props.loadContent(content);
     }
@@ -33,7 +31,7 @@ class Page extends Component {
   }
 
   // replaces the current query string in react-router
-  _updateQueryString(queryString) {
+  _updateQueryString = (queryString) => {
     const {location: {pathname, search}} = this.props;
     if (search !== queryString) {
       this.context.router.replace({

website/src/static/index.html

@@ -39,6 +39,6 @@
   </head>
   <body>
     <div id="app-content"></div>
-    <script type="text/javascript" src="bundle.js"></script>
+    <script type="text/javascript" src="main.js"></script>
   </body>
 </html>

website/webpack/config.js

@@ -1,23 +1,15 @@
 const {resolve} = require('path');
 const webpack = require('webpack');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 
-// Otherwise modules imported from outside this directory does not compile
-// Seems to be a Babel bug
-// https://github.com/babel/babel-loader/issues/149#issuecomment-191991686
 const BABEL_CONFIG = {
   presets: [
-    'es2015',
-    'react',
-    'stage-2'
-  ].map(function configMap(name) {
-    return require.resolve(`babel-preset-${name}`);
-  }),
+    '@babel/env',
+    '@babel/react',
+    '@babel/flow'
+  ],
   plugins: [
-    'transform-decorators-legacy'
-  ].map(function configMap(name) {
-    return require.resolve(`babel-plugin-${name}`);
-  })
+    '@babel/proposal-class-properties'
+  ]
 };
 
 module.exports = {
@@ -26,15 +18,31 @@ module.exports = {
 
   module: {
     rules: [{
+      // Compile ES2015 using bable
       test: /\.js$/,
-      exclude: [/node_modules/],
-      use: [{
-        loader: 'babel-loader',
-        options: BABEL_CONFIG
-      }]
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: 'babel-loader',
+          options: BABEL_CONFIG
+        }
+      ]
     }, {
-      test: /\.scss$/,
-      loaders: ['style-loader', 'css-loader', 'sass-loader', 'autoprefixer-loader']
+      test: /\.s?css$/,
+      use: [
+        {
+          loader: 'style-loader'
+        },
+        {
+          loader: 'css-loader'
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            includePaths: ['./node_modules', '.']
+          }
+        }
+      ]
     }, {
       test: /\.(eot|svg|ttf|woff|woff2|gif|jpe?g|png)$/,
       loader: 'url-loader'
@@ -62,21 +70,7 @@ module.exports = {
   },
 
   plugins: [
-    new webpack.EnvironmentPlugin(['MapboxAccessToken']),
-    new CopyWebpackPlugin([
-      // This will copy the contents to the distribution bundle folder
-      {
-        from: '../docs',
-        to: 'docs'
-      },
-      {
-        from: '../examples/data',
-        to: 'data'
-      },
-      {
-        from: './src/static'
-      }
-    ])
+    new webpack.EnvironmentPlugin(['MapboxAccessToken'])
   ]
 
 };

website/webpack/dev.js

@@ -1,9 +1,12 @@
 const webpack = require('webpack');
+const {resolve} = require('path');
 
 const config = require('./config');
 
 module.exports = Object.assign(config, {
 
+  mode: 'development',
+
   entry: [
     'webpack-hot-middleware/client',
     './src/main'
@@ -11,14 +14,14 @@ module.exports = Object.assign(config, {
 
   devServer: {
     port: 3000,
-    progress: true
+    progress: true,
+    contentBase: resolve(__dirname, '../src/static')
   },
 
   devtool: 'cheap-source-maps',
 
   plugins: config.plugins.concat([
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin()
+    new webpack.HotModuleReplacementPlugin()
   ])
 
 });

website/webpack/prod.js

@@ -1,11 +1,20 @@
 const config = require('./config');
-const path = require('path');
+const {resolve} = require('path');
 
 module.exports = Object.assign(config, {
 
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-    filename: 'bundle.js'
-  }
+  mode: 'production',
 
+  output: {
+    path: resolve(__dirname, '../dist'),
+    filename: 'main.js'
+  },
+
+  resolve: {
+    modules: config.resolve.modules,
+    alias: {
+      'react-map-gl': resolve('../src'),
+      '../utils/mapboxgl': resolve('../node_modules/mapbox-gl'),
+    }
+  }
 });