first step of ES6 conversion + browserify -> rollup

.eslintrc

@@ -1,14 +1,24 @@
 {
-  "extends": "mourner",
+  "extends": [
+    "mourner",
+    "plugin:import/recommended"
+  ],
   "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module"
   },
+  "plugins": [
+    "import"
+  ],
   "globals": {
     "document": true
   },
   "rules": {
+    "no-duplicate-imports": "off",
+    "import/no-duplicates": "error",
+    "import/no-commonjs": "error",
+
     "indent": [2,2],
     "array-bracket-spacing": "off",
     "block-scoped-var": "error",

.gitignore

@@ -2,7 +2,11 @@ node_modules/
 npm-debug.log
 .vscode/
 dist/mapbox-gl-draw.js
+dist/mapbox-gl-draw.js.map
 dist/mapbox-gl-draw-unminified.js
+dist/mapbox-gl-draw-unminified.js.map
+dist/bench.js
+dist/bench.js.map
 coverage/
 .nyc_output/
 debug/access_token_generated.js

bench/index.html

@@ -7,7 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
-    <link rel='stylesheet' href='/mapbox-gl.css'/>
+    <link rel='stylesheet' href='/node_modules/mapbox-gl/dist/mapbox-gl.css'/>
+    <link rel='stylesheet' href='/dist/mapbox-gl-draw.css'/>
 
     <style>
         #meter {
@@ -44,12 +45,11 @@
     </div>
     <div id="backmap"></div>
     <div id="map"></div>
-    <div id="tests">
-        <div id="logs"></div>
-    </div>
-    <script src="/mapbox-gl.js"></script>
-    <script src="/mapbox-gl-draw.js"></script>
-    <script src="/bench/index.js"></script>
+    <div id="tests"></div>
+    <div id="logs"></div>
+    <script src="/node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
+    <script src="/dist/mapbox-gl-draw-unminified.js"></script>
+    <script src="/dist/bench.js"></script>
 </body>
 
 </html>

bench/index.js

@@ -1,132 +1,133 @@
-'use strict';
-var util = require('../node_modules/mapbox-gl/js/util/util');
+/* global mapboxgl, MapboxDraw */
 
 try {
-    main();
+  main();
 } catch (err) {
-    log('red', err.toString());
-    throw err;
+  log('red', err.toString());
+  throw err;
 }
 
 function main() {
+  const benchmarks = {
+    simple_select_small: require('./tests/simple_select_small'),
+    simple_select_large: require('./tests/simple_select_large'),
+    simple_select_large_two_maps: require('./tests/simple_select_large_two_maps'),
+    simple_select_large_zoomed: require('./tests/simple_select_large_zoomed'),
+
+    direct_select_small: require('./tests/direct_select_small'),
+    direct_select_small_zoomed: require('./tests/direct_select_small_zoomed'),
+    direct_select_large: require('./tests/direct_select_large'),
+    direct_select_large_zoomed: require('./tests/direct_select_large_zoomed'),
+
+    draw_line_string_small: require('./tests/draw_line_string_small'),
+    draw_line_string_large: require('./tests/draw_line_string_large'),
+    draw_line_string_large_zoomed: require('./tests/draw_line_string_large_zoomed'),
+
+    draw_polygon_small: require('./tests/draw_polygon_small'),
+    draw_polygon_large: require('./tests/draw_polygon_large'),
+    draw_polygon_large_zoomed: require('./tests/draw_polygon_large_zoomed'),
+
+    draw_land_polygon_small: require('./tests/draw_land_polygon_small'),
+    draw_land_polygon_large: require('./tests/draw_land_polygon_large'),
+
+    draw_urban_areas_polygon_small: require('./tests/draw_urban_areas_polygon_small'),
+    draw_urban_areas_polygon_large: require('./tests/draw_urban_areas_polygon_large'),
+
+    draw_point_small: require('./tests/draw_point_small'),
+    draw_point_large: require('./tests/draw_point_large'),
+    draw_point_large_zoomed: require('./tests/draw_point_large_zoomed'),
+  };
+
+  const benchmarkName = location.hash.substr(1);
+  console.warn(benchmarkName);
+
+  const testDiv = document.getElementById('tests');
+  const tests = Object.keys(benchmarks);
+
+  let innerHTML = '';
+
+  tests.forEach((test) => {
+    innerHTML += '<div class="test">';
+    innerHTML += `<a href="#${test}">${test}</a>`;
+    innerHTML += '</div>';
+    if (test === benchmarkName) {
+      innerHTML += '<div id="logs"></div>';
+    }
+  });
 
-    var benchmarks = {
-        simple_select_small: require('./tests/simple_select_small'),
-        simple_select_large: require('./tests/simple_select_large'),
-        simple_select_large_two_maps: require('./tests/simple_select_large_two_maps'),
-        simple_select_large_zoomed: require('./tests/simple_select_large_zoomed'),
-
-        direct_select_small: require('./tests/direct_select_small'),
-        direct_select_small_zoomed: require('./tests/direct_select_small_zoomed'),
-        direct_select_large: require('./tests/direct_select_large'),
-        direct_select_large_zoomed: require('./tests/direct_select_large_zoomed'),
-
-        draw_line_string_small: require('./tests/draw_line_string_small'),
-        draw_line_string_large: require('./tests/draw_line_string_large'),
-        draw_line_string_large_zoomed: require('./tests/draw_line_string_large_zoomed'),
-
-        draw_polygon_small: require('./tests/draw_polygon_small'),
-        draw_polygon_large: require('./tests/draw_polygon_large'),
-        draw_polygon_large_zoomed: require('./tests/draw_polygon_large_zoomed'),
-
-        draw_land_polygon_small: require('./tests/draw_land_polygon_small'),
-        draw_land_polygon_large: require('./tests/draw_land_polygon_large'),
-
-        draw_urban_areas_polygon_small: require('./tests/draw_urban_areas_polygon_small'),
-        draw_urban_areas_polygon_large: require('./tests/draw_urban_areas_polygon_large'),
-
-        draw_point_small: require('./tests/draw_point_small'),
-        draw_point_large: require('./tests/draw_point_large'),
-        draw_point_large_zoomed: require('./tests/draw_point_large_zoomed'),
-    };
-
-    var pathnameArray = location.pathname.split('/');
-    var benchmarkName = pathnameArray[pathnameArray.length - 1] || pathnameArray[pathnameArray.length - 2];
-
-    var testDiv = document.getElementById('tests');
-    var tests = Object.keys(benchmarks);
-
-    var innerHTML = '';
+  testDiv.innerHTML = innerHTML;
 
-    tests.forEach(function(test) {
-        innerHTML += '<div class="test">';
-            innerHTML += '<a href="/bench/'+test+'">'+test+'</a>';
-        innerHTML += '</div>';
-        if (test === benchmarkName) {
-            innerHTML += '<div id="logs"></div>';
-        }
-    });
+  window.addEventListener('hashchange', () => location.reload(), false);
 
-    testDiv.innerHTML = innerHTML;
+  log('dark', 'please keep this window in the foreground and close the debugger');
 
-    log('dark', 'please keep this window in the foreground and close the debugger');
+  const Benchmark = benchmarks[benchmarkName];
+  if (!Benchmark) {
+    log('dark', `${benchmarkName} is not a valid test name`);
+    return;
+  }
 
-    var createBenchmark = benchmarks[benchmarkName];
-    if (!createBenchmark) {
-        log('dark', benchmarkName+' is not a valid test name');
-        return;
-    }
+  const bench = new Benchmark({
+    accessToken: getAccessToken(),
+    createMap
+  });
 
-    var benchmark = createBenchmark({
-        accessToken: getAccessToken(),
-        createMap: createMap
-    });
+  bench.on('log', (event) => {
+    log(event.color || 'blue', event.message);
+  });
 
-    benchmark.on('log', function(event) {
-        log(event.color || 'blue', event.message);
-    });
+  bench.on('pass', (event) => {
+    log('green', `<strong class="prose-big">${event.message}</strong>`);
+  });
 
-    benchmark.on('pass', function(event) {
-        log('green', '<strong class="prose-big">' + event.message + '</strong>');
-    });
-
-    benchmark.on('fail', function(event) {
-        log('red', '<strong class="prose-big">' + event.message + '</strong>');
-    });
+  bench.on('fail', (event) => {
+    log('red', `<strong class="prose-big">${event.message}</strong>`);
+  });
 }
 
 function log(color, message) {
-    document.getElementById('logs').innerHTML += '<div class="log dark fill-' + color + '"><p>' + message + '</p></div>';
+  document.getElementById('logs').innerHTML += `<div class="log dark fill-${color}"><p>${message}</p></div>`;
 }
 
 function getAccessToken() {
-    var accessToken = (
-        process.env.MapboxAccessToken ||
+  const accessToken = (
+    process.env.MapboxAccessToken ||
         process.env.MAPBOX_ACCESS_TOKEN ||
         getURLParameter('access_token') ||
         localStorage.getItem('accessToken')
-    );
-    localStorage.setItem('accessToken', accessToken);
-    return accessToken;
+  );
+  localStorage.setItem('accessToken', accessToken);
+  return accessToken;
 }
 
 function getURLParameter(name) {
-    var regexp = new RegExp('[?&]' + name + '=([^&#]*)', 'i');
-    var output = regexp.exec(window.location.href);
-    return output && output[1];
+  const regexp = new RegExp(`[?&]${name}=([^&#]*)`, 'i');
+  const output = regexp.exec(window.location.href);
+  return output && output[1];
 }
 
 function createMap(options) {
-    var mapElement = document.getElementById('map');
+  const mapElement = document.getElementById('map');
 
-    options = util.extend({width: 512, height: 512}, options);
+  options = Object.assign({width: 512, height: 512}, options);
 
-    mapElement.style.display = 'block';
-    mapElement.style.width = options.width + 'px';
-    mapElement.style.height = options.height + 'px';
+  mapElement.style.display = 'block';
+  mapElement.style.width = `${options.width}px`;
+  mapElement.style.height = `${options.height}px`;
 
-    mapboxgl.accessToken = getAccessToken();
-    var map = new mapboxgl.Map(util.extend({
-        container: 'map',
-        style: 'mapbox://styles/mapbox/streets-v8'
-    }, options));
+  mapboxgl.accessToken = getAccessToken();
 
-    var draw = mapboxgl.Draw(options);
+  const map = new mapboxgl.Map(Object.assign({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v8'
+  }, options));
 
-    map.addControl(draw);
+  const draw = new MapboxDraw(options);
 
-    return {
-        draw: draw,
-        map: map
-    }
+  map.addControl(draw);
+
+  return {
+    draw,
+    map
+  };
 }

bench/lib/format_number.js

@@ -1,5 +1,5 @@
 'use strict';
 
-module.exports = function formatNumber(x) {
-    return Math.round(x).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-};
+export default function formatNumber(x) {
+  return Math.round(x).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}

bench/lib/fps.js

@@ -1,24 +1,24 @@
-module.exports = function() {
-  var frameCount = 0;
-  var start = null;
-  var running = false;
+export default function() {
+  let frameCount = 0;
+  let start = null;
+  let running = false;
 
-  var frameCounter = function() {
-    if(running) {
+  const frameCounter = function() {
+    if (running) {
       frameCount++;
       requestAnimationFrame(frameCounter);
     }
-  }
+  };
 
   return {
-    start: function() {
+    start() {
       running = true;
       start = performance.now();
       requestAnimationFrame(frameCounter);
     },
-    stop: function() {
-      var end = performance.now();
+    stop() {
+      const end = performance.now();
       return frameCount / ((end - start) / 1000);
     }
-  }
+  };
 }

bench/lib/mouse_drag.js

@@ -1,7 +1,7 @@
-var mouseEvents = require('./mouse_events');
-var mousePath = require('./mouse_path');
+import mouseEvents from './mouse_events'
+import mousePath from './mouse_path'
 
-module.exports = function(start, map) {
+export default function(start, map) {
 
   var path = mousePath(start);
 

bench/lib/mouse_draw.js

@@ -1,11 +1,10 @@
-var mouseEvents = require('./mouse_events');
-var mousePath = require('./mouse_path');
+import mouseEvents from './mouse_events';
+import mousePath from './mouse_path';
 
-module.exports = function(start, map) {
+export default function(start, map) {
+  const path = mousePath(start);
 
-  var path = mousePath(start);
-
-  var events = mouseEvents(map);
+  const events = mouseEvents(map);
 
   events.push('mousedown', {
     x: start.x,
@@ -17,15 +16,15 @@ module.exports = function(start, map) {
     y: start.y
   });
 
-  for (var i=0; i<path.length; i++) {
+  for (let i = 0; i < path.length; i++) {
     events.push('mouseup', path[i]);
     events.push('mousemove', path[i]);
     events.push('mousedown', path[i]);
   }
 
-  events.push('mouseup', path[path.length-1]);
+  events.push('mouseup', path[path.length - 1]);
 
   return function(cb) {
     events.run(cb);
-  }
+  };
 }