Switch to ES modules and Rollup

.eslintrc

@@ -1,15 +1,24 @@
 {
   "extends": [
     "mourner",
-    "plugin:flowtype/recommended"
+    "plugin:flowtype/recommended",
+    "plugin:import/recommended"
   ],
   "parser": "babel-eslint",
   "parserOptions": {
     "sourceType": "script"
   },
   "plugins": [
-    "flowtype"
+    "flowtype",
+    "import"
   ],
+  "settings": {
+    "import/ignore": [
+        "@mapbox/gl-matrix",
+        "@mapbox/shelf-pack",
+        "@mapbox/whoots-js"
+    ]
+  },
   "rules": {
     "array-bracket-spacing": "off",
     "block-scoped-var": "error",

.gitignore

@@ -1,3 +1,4 @@
+/rollup/build/
 /docs/components/api.json
 /dist/mapbox-gl-dev.js
 /dist/mapbox-gl.js

bench/benchmarks.js

@@ -1,6 +1,8 @@
 // @flow
 
-require('../src').accessToken = require('./lib/access_token');
+import mapboxgl from '../src';
+import accessToken from './lib/access_token';
+mapboxgl.accessToken = accessToken;
 
 window.mapboxglVersions = window.mapboxglVersions || [];
 window.mapboxglBenchmarks = window.mapboxglBenchmarks || {};
@@ -13,19 +15,36 @@ function register(Benchmark) {
     window.mapboxglBenchmarks[Benchmark.name][version] = new Benchmark();
 }
 
-register(require('./benchmarks/layout'));
-register(require('./benchmarks/layout_dds'));
-register(require('./benchmarks/paint'));
-require('./benchmarks/layers').forEach(register);
-register(require('./benchmarks/map_load'));
-register(require('./benchmarks/style_validate'));
-register(require('./benchmarks/style_layer_create'));
-register(require('./benchmarks/query_point'));
-register(require('./benchmarks/query_box'));
-require('./benchmarks/expressions').forEach(register);
-register(require('./benchmarks/filter_create'));
-register(require('./benchmarks/filter_evaluate'));
+import Layout from './benchmarks/layout';
+import LayoutDDS from './benchmarks/layout_dds';
+import Paint from './benchmarks/paint';
+import LayerBenchmarks from './benchmarks/layers';
+import Load from './benchmarks/map_load';
+import Validate from './benchmarks/style_validate';
+import StyleLayerCreate from './benchmarks/style_layer_create';
+import QueryPoint from './benchmarks/query_point';
+import QueryBox from './benchmarks/query_box';
+import ExpressionBenchmarks from './benchmarks/expressions';
+import FilterCreate from './benchmarks/filter_create';
+import FilterEvaluate from './benchmarks/filter_evaluate';
 
+register(Layout);
+register(LayoutDDS);
+register(Paint);
+LayerBenchmarks.forEach(register);
+register(Load);
+register(Validate);
+register(StyleLayerCreate);
+register(QueryPoint);
+register(QueryBox);
+ExpressionBenchmarks.forEach(register);
+register(FilterCreate);
+register(FilterEvaluate);
+
+import getWorkerPool from '../src/util/global_worker_pool';
+// Set up the worker blob URL--written to window.mapboxGlWorkerUrl before this
+// module is executed--before acquiring workers.
+mapboxgl.workerUrl = window.mapboxGlWorkerUrl;
 // Ensure the global worker pool is never drained. Browsers have resource limits
 // on the max number of workers that can be created per page.
-require('../src/util/global_worker_pool')().acquire(-1);
+getWorkerPool().acquire(-1);

bench/benchmarks/expressions.js

@@ -1,11 +1,12 @@
 // @flow
 
-const Benchmark = require('../lib/benchmark');
-const accessToken = require('../lib/access_token');
-const spec = require('../../src/style-spec/reference/latest');
-const convertFunction = require('../../src/style-spec/function/convert');
-const {isFunction, createFunction} = require('../../src/style-spec/function');
-const {createPropertyExpression} = require('../../src/style-spec/expression');
+import Benchmark from '../lib/benchmark';
+
+import accessToken from '../lib/access_token';
+import spec from '../../src/style-spec/reference/latest';
+import convertFunction from '../../src/style-spec/function/convert';
+import { isFunction, createFunction } from '../../src/style-spec/function';
+import { createPropertyExpression } from '../../src/style-spec/expression';
 
 import type {StylePropertySpecification} from '../../src/style-spec/style-spec';
 import type {StylePropertyExpression} from '../../src/style-spec/expression';
@@ -102,7 +103,7 @@ class ExpressionEvaluate extends ExpressionBenchmark {
     }
 }
 
-module.exports = [
+export default [
     FunctionCreate,
     FunctionConvert,
     FunctionEvaluate,

bench/benchmarks/filter_create.js

@@ -1,13 +1,14 @@
 // @flow
 
-const Benchmark = require('../lib/benchmark');
-const createFilter = require('../../src/style-spec/feature_filter');
-const filters = require('../data/filters.json');
+import Benchmark from '../lib/benchmark';
 
-module.exports = class FilterCreate extends Benchmark {
+import createFilter from '../../src/style-spec/feature_filter';
+import filters from '../data/filters.json';
+
+export default class FilterCreate extends Benchmark {
     bench() {
         for (const filter of filters) {
             createFilter(filter.filter);
         }
     }
-};
+}

bench/benchmarks/filter_evaluate.js

@@ -1,12 +1,12 @@
 
-const Benchmark = require('../lib/benchmark');
-const VectorTile = require('@mapbox/vector-tile').VectorTile;
-const Pbf = require('pbf');
-const createFilter = require('../../src/style-spec/feature_filter');
-const filters = require('../data/filters.json');
-const assert = require('assert');
+import Benchmark from '../lib/benchmark';
+import { VectorTile } from '@mapbox/vector-tile';
+import Pbf from 'pbf';
+import createFilter from '../../src/style-spec/feature_filter';
+import filters from '../data/filters.json';
+import assert from 'assert';
 
-module.exports = class FilterEvaluate extends Benchmark {
+export default class FilterEvaluate extends Benchmark {
     setup() {
         return fetch('/bench/data/785.vector.pbf')
             .then(response => response.arrayBuffer())
@@ -46,4 +46,4 @@ module.exports = class FilterEvaluate extends Benchmark {
             }
         }
     }
-};
+}

bench/benchmarks/layers.js

@@ -1,7 +1,7 @@
 
-const Benchmark = require('../lib/benchmark');
-const createMap = require('../lib/create_map');
-const style = require('../data/empty.json');
+import Benchmark from '../lib/benchmark';
+import createMap from '../lib/create_map';
+import style from '../data/empty.json';
 
 function generateLayers(layer) {
     const generated = [];
@@ -100,41 +100,44 @@ class LayerFillExtrusion extends LayerBenchmark {
 }
 
 class LayerHeatmap extends LayerBenchmark {
-    constructor() {
-        super();
-
-        this.layerStyle = Object.assign({}, style, {
-            sources: {
-                'heatmap': {
-                    'type': 'geojson',
-                    'data': require('../data/naturalearth-land.json'),
-                    'maxzoom': 23
-                }
-            },
-            layers: generateLayers({
-                'id': 'layer',
-                'type': 'heatmap',
-                'source': 'heatmap',
-                'paint': {
-                    "heatmap-radius": 50,
-                    "heatmap-weight": {
-                        "stops": [[0, 0.5], [4, 2]]
+    setup() {
+        return fetch('/bench/data/naturalearth-land.json')
+            .then(response => response.json())
+            .then(data => {
+                this.layerStyle = Object.assign({}, style, {
+                    sources: {
+                        'heatmap': {
+                            'type': 'geojson',
+                            'data': data,
+                            'maxzoom': 23
+                        }
                     },
-                    "heatmap-intensity": 0.9,
-                    "heatmap-color": [
-                        "interpolate",
-                        ["linear"],
-                        ["heatmap-density"],
-                        0, "rgba(0, 0, 255, 0)",
-                        0.1, "royalblue",
-                        0.3, "cyan",
-                        0.5, "lime",
-                        0.7, "yellow",
-                        1, "red"
-                    ]
-                }
+                    layers: generateLayers({
+                        'id': 'layer',
+                        'type': 'heatmap',
+                        'source': 'heatmap',
+                        'paint': {
+                            "heatmap-radius": 50,
+                            "heatmap-weight": {
+                                "stops": [[0, 0.5], [4, 2]]
+                            },
+                            "heatmap-intensity": 0.9,
+                            "heatmap-color": [
+                                "interpolate",
+                                ["linear"],
+                                ["heatmap-density"],
+                                0, "rgba(0, 0, 255, 0)",
+                                0.1, "royalblue",
+                                0.3, "cyan",
+                                0.5, "lime",
+                                0.7, "yellow",
+                                1, "red"
+                            ]
+                        }
+                    })
+                });
             })
-        });
+            .then(() => super.setup());
     }
 }
 
@@ -214,7 +217,7 @@ class LayerSymbol extends LayerBenchmark {
 }
 
 
-module.exports = [
+export default [
     LayerBackground,
     LayerCircle,
     LayerFill,

bench/benchmarks/layout.js

@@ -1,28 +1,22 @@
 // @flow
 
-const Benchmark = require('../lib/benchmark');
-const createStyle = require('../lib/create_style');
-
-const VT = require('@mapbox/vector-tile');
-const Protobuf = require('pbf');
-const assert = require('assert');
-const promisify = require('pify');
-
-const WorkerTile = require('../../src/source/worker_tile');
-const StyleLayerIndex = require('../../src/style/style_layer_index');
-const deref = require('../../src/style-spec/deref');
-const {OverscaledTileID} = require('../../src/source/tile_id');
-
-const {
-    normalizeStyleURL,
-    normalizeSourceURL,
-    normalizeTileURL
-} = require('../../src/util/mapbox');
+import Benchmark from '../lib/benchmark';
+
+import createStyle from '../lib/create_style';
+import VT from '@mapbox/vector-tile';
+import Protobuf from 'pbf';
+import assert from 'assert';
+import promisify from 'pify';
+import WorkerTile from '../../src/source/worker_tile';
+import StyleLayerIndex from '../../src/style/style_layer_index';
+import deref from '../../src/style-spec/deref';
+import { OverscaledTileID } from '../../src/source/tile_id';
+import { normalizeStyleURL, normalizeSourceURL, normalizeTileURL } from '../../src/util/mapbox';
 
 import type {TileJSON} from '../../src/types/tilejson';
 
 // Note: this class is extended in turn by the LayoutDDS benchmark.
-module.exports = class Layout extends Benchmark {
+export default class Layout extends Benchmark {
     glyphs: Object;
     icons: Object;
     workerTile: WorkerTile;
@@ -136,4 +130,4 @@ module.exports = class Layout extends Benchmark {
 
         return promise;
     }
-};
+}

bench/benchmarks/layout_dds.js

@@ -1,11 +1,12 @@
 // @flow
 
-const Layout = require('./layout');
-const {OverscaledTileID} = require('../../src/source/tile_id');
+import Layout from './layout';
+
+import { OverscaledTileID } from '../../src/source/tile_id';
 
 const LAYER_COUNT = 2;
 
-module.exports = class LayoutDDS extends Layout {
+export default class LayoutDDS extends Layout {
     tileIDs(): Array<OverscaledTileID> {
         return [
             new OverscaledTileID(15, 0, 15, 9373, 12535)
@@ -92,4 +93,4 @@ module.exports = class LayoutDDS extends Layout {
 
         return Promise.resolve(style);
     }
-};
+}

bench/benchmarks/map_load.js

@@ -1,8 +1,8 @@
 
-const Benchmark = require('../lib/benchmark');
-const createMap = require('../lib/create_map');
+import Benchmark from '../lib/benchmark';
+import createMap from '../lib/create_map';
 
-module.exports = class MapLoad extends Benchmark {
+export default class MapLoad extends Benchmark {
     bench() {
         return createMap({
             style: {
@@ -12,4 +12,4 @@ module.exports = class MapLoad extends Benchmark {
             }
         }).then(map => map.remove());
     }
-};
+}

bench/benchmarks/paint.js

@@ -1,12 +1,12 @@
 
-const Benchmark = require('../lib/benchmark');
-const createMap = require('../lib/create_map');
+import Benchmark from '../lib/benchmark';
+import createMap from '../lib/create_map';
 
 const width = 1024;
 const height = 768;
 const zooms = [4, 8, 11, 13, 15, 17];
 
-module.exports = class Paint extends Benchmark {
+export default class Paint extends Benchmark {
     setup() {
         return Promise.all(zooms.map(zoom => {
             return createMap({
@@ -34,4 +34,4 @@ module.exports = class Paint extends Benchmark {
             map.remove();
         }
     }
-};
+}

bench/benchmarks/query_box.js

@@ -1,12 +1,12 @@
 
-const Benchmark = require('../lib/benchmark');
-const createMap = require('../lib/create_map');
+import Benchmark from '../lib/benchmark';
+import createMap from '../lib/create_map';
 
 const width = 1024;
 const height = 768;
 const zooms = [4, 8, 11, 13, 15, 17];
 
-module.exports = class QueryBox extends Benchmark {
+export default class QueryBox extends Benchmark {
     setup() {
         return Promise.all(zooms.map(zoom => {
             return createMap({
@@ -30,4 +30,4 @@ module.exports = class QueryBox extends Benchmark {
             map.remove();
         }
     }
-};
+}