TypeScript

.eslintrc

@@ -1,46 +1,3 @@
 {
-  "extends": [
-    "mourner",
-    "plugin:import/recommended"
-  ],
-  "parser": "espree",
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 2020
-  },
-  "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",
-    "consistent-return": "off",
-    "global-require": "off",
-    "key-spacing": "off",
-    "no-eq-null": "off",
-    "no-new": "off",
-    "no-var": "error",
-    "no-warning-comments": "error",
-    "object-curly-spacing": "off",
-    "prefer-arrow-callback": "error",
-    "prefer-const": "error",
-    "prefer-template": "error",
-    "quotes": "off",
-    "space-before-function-paren": "off",
-    "template-curly-spacing": "error",
-    "camelcase": 0,
-    "no-console": ["error", { "allow": ["warn", "error"] }]
-  },
-  "env": {
-    "es6": true,
-    "browser": true
-  }
+  "parser": "@typescript-eslint/parser",
 }

.husky/pre-commit

@@ -0,0 +1 @@
+npm test

bench/README.md

@@ -1,4 +1,5 @@
-# Benchmarks
+Benchmarks
+---
 
 Benchmarks help us catch performance regressions and improve performance.
 

bench/index.js

@@ -35,7 +35,7 @@ function main() {
 
     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'),
+    draw_point_large_zoomed: require('./tests/draw_point_large_zoomed')
   };
 
   const benchmarkName = location.hash.substr(1);
@@ -46,7 +46,7 @@ function main() {
 
   let innerHTML = '';
 
-  tests.forEach((test) => {
+  tests.forEach(test => {
     innerHTML += '<div class="test">';
     innerHTML += `<a href="#${test}">${test}</a>`;
     innerHTML += '</div>';
@@ -59,7 +59,10 @@ function main() {
 
   window.addEventListener('hashchange', () => location.reload(), false);
 
-  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) {
@@ -72,30 +75,30 @@ function main() {
     createMap
   });
 
-  bench.on('log', (event) => {
+  bench.on('log', event => {
     log(event.color || 'blue', event.message);
   });
 
-  bench.on('pass', (event) => {
+  bench.on('pass', event => {
     log('green', `<strong class="prose-big">${event.message}</strong>`);
   });
 
-  bench.on('fail', (event) => {
+  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() {
-  const accessToken = (
+  const accessToken =
     process.env.MapboxAccessToken ||
-        process.env.MAPBOX_ACCESS_TOKEN ||
-        getURLParameter('access_token') ||
-        localStorage.getItem('accessToken')
-  );
+    process.env.MAPBOX_ACCESS_TOKEN ||
+    getURLParameter('access_token') ||
+    localStorage.getItem('accessToken');
   localStorage.setItem('accessToken', accessToken);
   return accessToken;
 }
@@ -109,18 +112,22 @@ function getURLParameter(name) {
 function createMap(options) {
   const mapElement = document.getElementById('map');
 
-  options = Object.assign({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`;
 
   mapboxgl.accessToken = getAccessToken();
 
-  const map = new mapboxgl.Map(Object.assign({
-    container: 'map',
-    style: 'mapbox://styles/mapbox/streets-v12'
-  }, options));
+  const map = new mapboxgl.Map(
+    Object.assign(
+      {
+        container: 'map'
+      },
+      options
+    )
+  );
 
   const draw = new MapboxDraw(options);
 

bench/lib/evented.js

@@ -1,4 +1,3 @@
-
 export default class Evented {
   on(type, listener) {
     if (!listener) {

bench/lib/format_number.js

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

bench/lib/fps.js

@@ -1,9 +1,9 @@
-export default function() {
+export default function () {
   let frameCount = 0;
   let start = null;
   let running = false;
 
-  const frameCounter = function() {
+  const frameCounter = function () {
     if (running) {
       frameCount++;
       requestAnimationFrame(frameCounter);

bench/lib/mouse_drag.js

@@ -1,15 +1,18 @@
 import mouseEvents from './mouse_events';
 import mousePath from './mouse_path';
 
-export default function(start, map) {
-
+export default function (start, map) {
   const path = mousePath(start);
   const events = mouseEvents(map);
 
-  events.push('mousedown', {
-    x: start.x,
-    y: start.y
-  }, true);
+  events.push(
+    'mousedown',
+    {
+      x: start.x,
+      y: start.y
+    },
+    true
+  );
 
   for (let i = 0; i < path.length; i++) {
     events.push('mousemove', path[i]);
@@ -23,7 +26,7 @@ export default function(start, map) {
     y: start.y
   });
 
-  return function(cb) {
+  return function (cb) {
     events.run(cb);
   };
 }

bench/lib/mouse_draw.js

@@ -1,7 +1,7 @@
 import mouseEvents from './mouse_events';
 import mousePath from './mouse_path';
 
-export default function(start, map) {
+export default function (start, map) {
   const path = mousePath(start);
 
   const events = mouseEvents(map);
@@ -24,7 +24,7 @@ export default function(start, map) {
 
   events.push('mouseup', path[path.length - 1]);
 
-  return function(cb) {
+  return function (cb) {
     events.run(cb);
   };
 }

bench/lib/mouse_events.js

@@ -1,7 +1,7 @@
-export default function(map) {
+export default function (map) {
   const events = [];
 
-  events.push = function(event, point, dp) {
+  events.push = function (event, point, dp) {
     const payload = {
       dropPoint: dp === undefined ? false : dp,
       originalEvent: {
@@ -14,15 +14,15 @@ export default function(map) {
     events[events.length] = [event, payload];
   };
 
-  events.run = function(cb) {
+  events.run = function (cb) {
     const one = 100 / events.length;
-    const runner = function(i) {
+    const runner = function (i) {
       const event = events[i];
       if (event === undefined) {
         cb();
       } else {
         map.fire(event[0], event[1]);
-        map.fire('progress', {done:Math.ceil(one * i)});
+        map.fire('progress', { done: Math.ceil(one * i) });
         setTimeout(() => {
           runner(i + 1);
         }, 0);

bench/lib/mouse_path.js

@@ -1,15 +1,15 @@
-export default function(start) {
+export default function (start) {
   const path = [];
 
-  for (let i = 0; i < 7; i += .04) {
+  for (let i = 0; i < 7; i += 0.04) {
     const A = 3;
     const B = Math.PI / 2;
     const SIZE = 100;
     const OFFSET = 5;
 
-    const x = start.x + (Math.sin(i) * SIZE) + (i * OFFSET);
-    const y = start.y + (Math.sin(A * i + B) * SIZE) + (i * OFFSET);
-    path.push({x, y});
+    const x = start.x + Math.sin(i) * SIZE + i * OFFSET;
+    const y = start.y + Math.sin(A * i + B) * SIZE + i * OFFSET;
+    path.push({ x, y });
   }
 
   return path;

bench/lib/mouse_trace.js

@@ -1,7 +1,6 @@
 import mouseEvents from './mouse_events';
 
-export default function(ring, map) {
-
+export default function (ring, map) {
   const events = mouseEvents(map);
 
   let lastPoint = null;
@@ -24,7 +23,7 @@ export default function(ring, map) {
     events.push('mouseup', lastPoint);
   }
 
-  return function(cb) {
+  return function (cb) {
     events.run(cb);
   };
 }

bench/lib/trace_progress.js

@@ -1,4 +1,4 @@
-export default function(features, map) {
+export default function (features, map) {
   const sizes = [];
   let total = 0;
   for (const feature of features) {
@@ -18,7 +18,7 @@ export default function(features, map) {
   let pos = 0;
   let lastDone = -1;
 
-  map.on('progress', (e) => {
+  map.on('progress', e => {
     if (e.done < lastDone) {
       pos++;
     }
@@ -27,7 +27,7 @@ export default function(features, map) {
     for (let i = 0; i < pos; i++) {
       done += sizes[i];
     }
-    done += (sizes[pos] * e.done / 100);
+    done += (sizes[pos] * e.done) / 100;
     progressDiv.style.width = `${done}%`;
   });
 }

bench/rollup.config.js

@@ -15,8 +15,12 @@ export default {
   plugins: [
     json(),
     replace({
-      'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken),
-      'process.env.MAPBOX_ACCESS_TOKEN': JSON.stringify(process.env.MAPBOX_ACCESS_TOKEN),
+      'process.env.MapboxAccessToken': JSON.stringify(
+        process.env.MapboxAccessToken
+      ),
+      'process.env.MAPBOX_ACCESS_TOKEN': JSON.stringify(
+        process.env.MAPBOX_ACCESS_TOKEN
+      ),
       preventAssignment: true
     }),
     resolve({
@@ -28,5 +32,5 @@ export default {
       // https://github.com/mapbox/mapbox-gl-js/pull/6956
       ignoreGlobal: true
     })
-  ],
+  ]
 };

bench/tests/direct_select_large.js

@@ -6,19 +6,19 @@ import formatNumber from '../lib/format_number';
 import fpsRunner from '../lib/fps';
 import DragMouse from '../lib/mouse_drag';
 
-const START = {x: 445, y: 293};
+const START = { x: 445, y: 293 };
 
 export default class Benchmark extends Evented {
   constructor(options) {
     super();
 
-    const out = options.createMap({width: 1024});
+    const out = options.createMap({ width: 1024 });
 
     // eslint-disable-next-line new-cap
     const dragMouse = DragMouse(START, out.map);
 
     const progressDiv = document.getElementById('progress');
-    out.map.on('progress', (e) => {
+    out.map.on('progress', e => {
       progressDiv.style.width = `${e.done}%`;
     });
 
@@ -27,15 +27,17 @@ export default class Benchmark extends Evented {
       out.draw.changeMode('direct_select', { featureId: SouthAmerica.id });
 
       setTimeout(() => {
-        this.fire('log', {message: 'normal - 41fps'});
+        this.fire('log', { message: 'normal - 41fps' });
         const FPSControl = fpsRunner();
         FPSControl.start();
         dragMouse(() => {
           const fps = FPSControl.stop();
           if (fps < 55) {
-            this.fire('fail', {message: `${formatNumber(fps)} fps - expected 55fps or better`});
+            this.fire('fail', {
+              message: `${formatNumber(fps)} fps - expected 55fps or better`
+            });
           } else {
-            this.fire('pass', {message: `${formatNumber(fps)} fps`});
+            this.fire('pass', { message: `${formatNumber(fps)} fps` });
           }
         });
       }, 2000);