Merge branch 'master' into master

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
+}

.travis.yml

@@ -4,23 +4,23 @@ addons:
 matrix:
   include:
     - os: linux
-      node_js: "4"
+      node_js: "6"
     - os: linux
       env: CXX=g++-4.8
-      node_js: "5"
+      node_js: "7"
     - os: linux
-      node_js: "6"
+      node_js: "8"
     - os: linux
       env: CXX=g++-4.8
-      node_js: "7"
-    - os: osx
-      node_js: "4"
-    - os: osx
-      node_js: "5"
+      node_js: "9"
     - os: osx
       node_js: "6"
     - os: osx
       node_js: "7"
+    - os: osx
+      node_js: "8"
+    - os: osx
+      node_js: "9"
 before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0

README.md

@@ -1,11 +1,23 @@
-# Maputnik [![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)](https://travis-ci.org/maputnik/editor) [![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)](https://ci.appveyor.com/project/lukasmartinelli/editor) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://tldrlegal.com/license/mit-license)
+# Maputnik
+
+[![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)][travis]
+[![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
+[![Dependency Status](https://david-dm.org/maputnik/editor.svg)][dm-prod]
+[![Dev Dependency Status](https://david-dm.org/maputnik/editor/dev-status.svg)][dm-dev]
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
+
+[travis]:      https://travis-ci.org/maputnik/editor
+[appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
+[dm-prod]:     https://david-dm.org/maputnik/editor
+[dm-dev]:      https://david-dm.org/maputnik/editor#info=devDependencies
+[license]:     https://tldrlegal.com/license/mit-license
 
 <img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
 
 A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
 targeted at developers and map designers.
 
-- :link: Design your maps online at **http://maputnik.com/editor/** (all in local storage)
+- :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
 - :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
 
 Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independance is an OSS map designer.
@@ -37,7 +49,12 @@ npm install
 npm start
 ```
 
-Build a production package for distribution.
+The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the webpack-dev-server docs
+
+> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. 
+Snippet from <https://webpack.js.org/configuration/dev-server/#devserver-watchoptions->
+
+To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment.
 
 ```
 npm run build
@@ -51,6 +68,10 @@ npm run lint
 npm run lint-styles
 ```
 
+## Related Projects
+
+- [maputnik-dev-server](https://github.com/nycplanning/labs-maputnik-dev-server) - An express.js server that allows for quickly loading the style from any mapboxGL map into mapuntnik. 
+
 ## Sponsors
 
 Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)**. This project would not be possible without these commercial and individual sponsors.

appveyor.yml

@@ -1,8 +1,9 @@
 environment:
   matrix:
-    - nodejs_version: "4"
     - nodejs_version: "6"
     - nodejs_version: "7"
+    - nodejs_version: "8"
+    - nodejs_version: "9"
 platform:
   - x86
   - x64

circle.yml

@@ -0,0 +1,6 @@
+machine:
+  node:
+    version: 6
+test:
+  post:
+    - npm run build

config/wdio.conf.js

@@ -1,6 +1,6 @@
 var webpack          = require("webpack");
 var WebpackDevServer = require("webpack-dev-server");
-var webpackConfig    = require("./webpack.config");
+var webpackConfig    = require("./webpack.production.config");
 var testConfig       = require("../test/config/specs");
 
 
@@ -18,7 +18,7 @@ exports.config = {
     browserName: 'firefox'
   }],
   sync: true,
-  logLevel: 'silent',
+  logLevel: 'verbose',
   coloredLogs: true,
   bail: 0,
   screenshotPath: './errorShots/',
@@ -29,16 +29,17 @@ exports.config = {
   services: ['phantomjs'],
   framework: 'mocha',
   reporters: ['spec'],
+  phantomjsOpts: {
+    webdriverLogfile: 'phantomjs.log'
+  },
   mochaOpts: {
     ui: 'bdd',
     // Because we don't know how long the initial build will take...
-    timeout: 2*60*1000
+    timeout: 4*60*1000
   },
   onPrepare: function (config, capabilities) {
     var compiler = webpack(webpackConfig);
-    server = new WebpackDevServer(compiler, {
-      stats: "minimal"
-    });
+    server = new WebpackDevServer(compiler, {});
     server.listen(testConfig.port);
   },
   onComplete: function(exitCode) {

config/webpack.config.js

@@ -3,6 +3,7 @@ var webpack = require('webpack');
 var path = require('path');
 var loaders = require('./webpack.loaders');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const HOST = process.env.HOST || "127.0.0.1";
 const PORT = process.env.PORT || "8888";
@@ -20,10 +21,13 @@ module.exports = {
     filename: 'bundle.js'
   },
   resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['.js', '.jsx']
   },
   module: {
-    loaders
+    noParse: [
+      /mapbox-gl\/dist\/mapbox-gl.js/
+    ],
+    loaders: loaders
   },
   node: {
     fs: "empty",
@@ -41,14 +45,26 @@ module.exports = {
     // serve index.html in place of 404 responses to allow HTML5 history
     historyApiFallback: true,
     port: PORT,
-    host: HOST
+    host: HOST,
+    watchOptions: {
+      // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
+      // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
+      poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
+      watch: false
+    }
   },
   plugins: [
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       title: 'Maputnik',
       template: './src/template.html'
-    })
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: './src/manifest.json',
+        to: 'manifest.json'
+      }
+    ])
   ]
 };

config/webpack.loaders.js

@@ -4,26 +4,38 @@ module.exports = [
     exclude: /(node_modules|bower_components|public)/,
     loaders: ['react-hot-loader/webpack']
   },
+  // HACK: This is a massive hack and reaches into the mapbox-gl private API.
+  // We have to include this for access to `normalizeSourceURL`. We should
+  // remove this ASAP, see <https://github.com/mapbox/mapbox-gl-js/issues/2416>
+  {
+    test: /.*node_modules[\/\\]mapbox-gl[\/\\]src[\/\\]util[\/\\].*\.js/,
+    loader: 'babel-loader',
+    query: {
+      presets: ['env', 'react', 'flow'],
+      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
+    }
+  },
   {
     test: /\.jsx?$/,
-    exclude: /(node_modules|bower_components|public)/,
-    loader: 'babel',
+    // Note: These modules aren't ES5 therefore we much compile them.
+    exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|bower_components|public)/,
+    loader: 'babel-loader',
     query: {
-      presets: ['es2015', 'react'],
+      presets: ['env', 'react'],
       plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
     }
   },
   {
     test: /\.(eot|ttf|woff|woff2)$/,
-    loader: 'file?name=fonts/[name].[ext]'
+    loader: 'file-loader?name=fonts/[name].[ext]'
   },
   {
     test: /\.ico$/,
-    loader: 'file?name=[name].[ext]'
+    loader: 'file-loader?name=[name].[ext]'
   },
   {
     test: /\.(svg|gif|jpg|png)$/,
-    loader: 'file?name=img/[name].[ext]'
+    loader: 'file-loader?name=img/[name].[ext]'
   },
   {
     test: /\.json$/,
@@ -36,8 +48,8 @@ module.exports = [
   {
     test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
     loaders: [
-      'style?sourceMap',
-      'css'
+      'style-loader?sourceMap',
+      'css-loader'
     ]
   }
 ];

config/webpack.production.config.js

@@ -5,15 +5,24 @@ var loaders = require('./webpack.loaders');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
+var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+var OUTPATH;
+if(process.env.CIRCLE_ARTIFACTS) {
+  OUTPATH = path.join(process.env.CIRCLE_ARTIFACTS, "build");
+}
+else {
+  OUTPATH = path.join(__dirname, '..', 'public');
+}
 
 module.exports = {
   entry: {
     app: './src/index.jsx',
     vendor: [
         'file-saver',
         'mapbox-gl/dist/mapbox-gl.js',
-        //TODO: Build failure because cannot resolve migrations file
-        //"mapbox-gl-style-spec",
         "lodash.clonedeep",
         "lodash.throttle",
         'color',
@@ -32,14 +41,17 @@ module.exports = {
     ]
   },
   output: {
-    path: path.join(__dirname, '..', 'public'),
+    path: OUTPATH,
     filename: '[name].[chunkhash].js',
     chunkFilename: '[chunkhash].js'
   },
   resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['.js', '.jsx']
   },
   module: {
+    noParse: [
+      /mapbox-gl\/dist\/mapbox-gl.js/
+    ],
     loaders
   },
   node: {
@@ -48,28 +60,35 @@ module.exports = {
     tls: 'empty'
   },
   plugins: [
-    new webpack.NoErrorsPlugin(),
-    new webpack.optimize.CommonsChunkPlugin('vendor', '[chunkhash].vendor.js'),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }),
     new WebpackCleanupPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        screw_ie8: true,
-      }
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new UglifyJsPlugin(),
     new ExtractTextPlugin('[contenthash].css', {
       allChunks: true
     }),
     new HtmlWebpackPlugin({
       template: './src/template.html',
       title: 'Maputnik'
     }),
-    new webpack.optimize.DedupePlugin()
+    new CopyWebpackPlugin([
+      {
+        from: './src/manifest.json',
+        to: 'manifest.json'
+      }
+    ]),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      defaultSizes: 'gzip',
+      openAnalyzer: false,
+      generateStatsFile: true,
+      reportFilename: 'bundle-stats.html',
+      statsFilename: 'bundle-stats.json',
+    })
   ]
 };