diff --git a/.eslintrc b/.eslintrc index 91ec6bdb95b..23beb60f33f 100644 --- a/.eslintrc +++ b/.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", diff --git a/.gitignore b/.gitignore index 5e99fabcee8..d59787feb0f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +/rollup/build/ /docs/components/api.json /dist/mapbox-gl-dev.js /dist/mapbox-gl.js diff --git a/bench/benchmarks.js b/bench/benchmarks.js index 4d9aa73e65c..c699ef286e8 100644 --- a/bench/benchmarks.js +++ b/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); diff --git a/bench/benchmarks/expressions.js b/bench/benchmarks/expressions.js index f77322b990c..dfa65767dbe 100644 --- a/bench/benchmarks/expressions.js +++ b/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, diff --git a/bench/benchmarks/filter_create.js b/bench/benchmarks/filter_create.js index d5bec17847f..a8d45c903c7 100644 --- a/bench/benchmarks/filter_create.js +++ b/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); } } -}; +} diff --git a/bench/benchmarks/filter_evaluate.js b/bench/benchmarks/filter_evaluate.js index e07c270c7e0..041470c0fa7 100644 --- a/bench/benchmarks/filter_evaluate.js +++ b/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 { } } } -}; +} diff --git a/bench/benchmarks/layers.js b/bench/benchmarks/layers.js index 29d71f1e1ee..470c5a139b7 100644 --- a/bench/benchmarks/layers.js +++ b/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, diff --git a/bench/benchmarks/layout.js b/bench/benchmarks/layout.js index 1b76258a7a6..b8ac7bbdaf3 100644 --- a/bench/benchmarks/layout.js +++ b/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; } -}; +} diff --git a/bench/benchmarks/layout_dds.js b/bench/benchmarks/layout_dds.js index 5610c670a13..af3812c50ad 100644 --- a/bench/benchmarks/layout_dds.js +++ b/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 { return [ new OverscaledTileID(15, 0, 15, 9373, 12535) @@ -92,4 +93,4 @@ module.exports = class LayoutDDS extends Layout { return Promise.resolve(style); } -}; +} diff --git a/bench/benchmarks/map_load.js b/bench/benchmarks/map_load.js index 7852aefa704..8d54de97346 100644 --- a/bench/benchmarks/map_load.js +++ b/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()); } -}; +} diff --git a/bench/benchmarks/paint.js b/bench/benchmarks/paint.js index bcab11907e0..c996ac9e02e 100644 --- a/bench/benchmarks/paint.js +++ b/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(); } } -}; +} diff --git a/bench/benchmarks/query_box.js b/bench/benchmarks/query_box.js index bb51e361c1d..53f2b3a10be 100644 --- a/bench/benchmarks/query_box.js +++ b/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(); } } -}; +} diff --git a/bench/benchmarks/query_point.js b/bench/benchmarks/query_point.js index 3bb37a8be47..3d5150b1067 100644 --- a/bench/benchmarks/query_point.js +++ b/bench/benchmarks/query_point.js @@ -1,6 +1,6 @@ -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; @@ -17,7 +17,7 @@ for (let x = 0; x < d; x++) { } } -module.exports = class QueryPoint extends Benchmark { +export default class QueryPoint extends Benchmark { setup() { return Promise.all(zooms.map(zoom => { return createMap({ @@ -43,4 +43,4 @@ module.exports = class QueryPoint extends Benchmark { map.remove(); } } -}; +} diff --git a/bench/benchmarks/style_layer_create.js b/bench/benchmarks/style_layer_create.js index 7ba3a163632..83e2293cf8e 100644 --- a/bench/benchmarks/style_layer_create.js +++ b/bench/benchmarks/style_layer_create.js @@ -1,10 +1,10 @@ -const Benchmark = require('../lib/benchmark'); -const accessToken = require('../lib/access_token'); -const StyleLayer = require('../../src/style/style_layer'); -const deref = require('../../src/style-spec/deref'); +import Benchmark from '../lib/benchmark'; +import accessToken from '../lib/access_token'; +import createStyleLayer from '../../src/style/create_style_layer'; +import deref from '../../src/style-spec/deref'; -module.exports = class StyleLayerCreate extends Benchmark { +export default class StyleLayerCreate extends Benchmark { setup() { return fetch(`https://api.mapbox.com/styles/v1/mapbox/streets-v9?access_token=${accessToken}`) .then(response => response.json()) @@ -13,7 +13,7 @@ module.exports = class StyleLayerCreate extends Benchmark { bench() { for (const layer of this.layers) { - StyleLayer.create(layer); + createStyleLayer(layer); } } -}; +} diff --git a/bench/benchmarks/style_validate.js b/bench/benchmarks/style_validate.js index b1d13a0e8de..363520614c9 100644 --- a/bench/benchmarks/style_validate.js +++ b/bench/benchmarks/style_validate.js @@ -1,9 +1,9 @@ -const Benchmark = require('../lib/benchmark'); -const accessToken = require('../lib/access_token'); -const validateStyle = require('../../src/style-spec/validate_style.min'); +import Benchmark from '../lib/benchmark'; +import accessToken from '../lib/access_token'; +import validateStyle from '../../src/style-spec/validate_style.min'; -module.exports = class StyleValidate extends Benchmark { +export default class StyleValidate extends Benchmark { setup() { return fetch(`https://api.mapbox.com/styles/v1/mapbox/streets-v9?access_token=${accessToken}`) .then(response => response.json()) @@ -13,4 +13,4 @@ module.exports = class StyleValidate extends Benchmark { bench() { validateStyle(this.json); } -}; +} diff --git a/bench/benchmarks_view.js b/bench/benchmarks_view.js index 09a596d09c1..101e8d041a7 100644 --- a/bench/benchmarks_view.js +++ b/bench/benchmarks_view.js @@ -1,13 +1,8 @@ -const React = require('react'); -const ReactDOM = require('react-dom'); -const d3 = require('d3'); -const Axis = require('./lib/axis'); -const { - summaryStatistics, - regression, - kde, - probabilitiesOfSuperiority -} = require('./lib/statistics'); +import React from 'react'; +import ReactDOM from 'react-dom'; +import * as d3 from 'd3'; +import Axis from './lib/axis'; +import { summaryStatistics, regression, kde, probabilitiesOfSuperiority } from './lib/statistics'; const versionColor = d3.scaleOrdinal(['#1b9e77', '#7570b3', '#d95f02']); const formatSample = d3.format(".3r"); diff --git a/bench/lib/access_token.js b/bench/lib/access_token.js index f817a73d6cb..905ad26ba9f 100644 --- a/bench/lib/access_token.js +++ b/bench/lib/access_token.js @@ -8,7 +8,7 @@ const accessToken = ( localStorage.setItem('accessToken', accessToken); -module.exports = accessToken; +export default accessToken; function getURLParameter(name) { const regexp = new RegExp(`[?&]${name}=([^&#]*)`, 'i'); diff --git a/bench/lib/axis.js b/bench/lib/axis.js index 909cc710c07..567d59330b3 100644 --- a/bench/lib/axis.js +++ b/bench/lib/axis.js @@ -1,4 +1,4 @@ -const React = require('react'); +import React from 'react'; function identity(x) { return x; @@ -82,4 +82,4 @@ class Axis extends React.Component { } } -module.exports = Axis; +export default Axis; diff --git a/bench/lib/benchmark.js b/bench/lib/benchmark.js index fa68b4fcffd..ee44cdb2deb 100644 --- a/bench/lib/benchmark.js +++ b/bench/lib/benchmark.js @@ -125,4 +125,4 @@ class Benchmark { } } -module.exports = Benchmark; +export default Benchmark; diff --git a/bench/lib/create_map.js b/bench/lib/create_map.js index d44daeea5e0..cde19b4e5d7 100644 --- a/bench/lib/create_map.js +++ b/bench/lib/create_map.js @@ -1,9 +1,10 @@ // @flow -const Map = require('../../src/ui/map'); -const browser = require('../../src/util/browser'); +import Map from '../../src/ui/map'; -module.exports = function (options: any): Promise { +import browser from '../../src/util/browser'; + +export default function (options: any): Promise { return new Promise((resolve, reject) => { const container = document.createElement('div'); container.style.width = `${options.width || 512}px`; @@ -33,4 +34,4 @@ module.exports = function (options: any): Promise { .on('error', (e) => reject(e.error)) .on('remove', () => container.remove()); }); -}; +} diff --git a/bench/lib/create_style.js b/bench/lib/create_style.js index 36a8ba7f074..95c0ea85a79 100644 --- a/bench/lib/create_style.js +++ b/bench/lib/create_style.js @@ -1,7 +1,8 @@ // @flow -const Style = require('../../src/style/style'); -const {Evented} = require('../../src/util/evented'); +import Style from '../../src/style/style'; + +import { Evented } from '../../src/util/evented'; class StubMap extends Evented { _transformRequest(url) { @@ -9,7 +10,7 @@ class StubMap extends Evented { } } -module.exports = function (styleJSON: StyleSpecification): Promise