use explicit extensions for imports to unblock native Node ESM (mapbo…

…x#10342)

.eslintrc

@@ -22,6 +22,12 @@
  "no-duplicate-imports": "off",
  "import/no-duplicates": "error",
 
+ // ensure compatibility with Node's native ESM
+ "import/extensions": ["error", {
+ "js": "always",
+ "json": "always"
+ }],
+
  // temporarily disabled for easier upgrading of dependencies
  "implicit-arrow-linebreak": "off",
  "arrow-parens": "off",
@@ -72,7 +78,7 @@
  "parameters": "off"
  }
  }],
- "no-multiple-empty-lines": [ "error", { 
+ "no-multiple-empty-lines": [ "error", {
  "max": 1
  }],
  "jsdoc/check-param-names": "warn",

bench/benchmarks/expressions.js

@@ -1,16 +1,16 @@
 // @flow
 
-import Benchmark from '../lib/benchmark';
+import Benchmark from '../lib/benchmark.js';
 
-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 fetchStyle from '../lib/fetch_style';
+import spec from '../../src/style-spec/reference/latest.js';
+import convertFunction from '../../src/style-spec/function/convert.js';
+import {isFunction, createFunction} from '../../src/style-spec/function/index.js';
+import {createPropertyExpression} from '../../src/style-spec/expression/index.js';
+import fetchStyle from '../lib/fetch_style.js';
 
-import type {StyleSpecification} from '../../src/style-spec/types';
-import type {StylePropertySpecification} from '../../src/style-spec/style-spec';
-import type {StylePropertyExpression} from '../../src/style-spec/expression';
+import type {StyleSpecification} from '../../src/style-spec/types.js';
+import type {StylePropertySpecification} from '../../src/style-spec/style-spec.js';
+import type {StylePropertyExpression} from '../../src/style-spec/expression/index.js';
 
 class ExpressionBenchmark extends Benchmark {
  data: Array<{

bench/benchmarks/filter_create.js

@@ -1,8 +1,8 @@
 // @flow
 
-import Benchmark from '../lib/benchmark';
+import Benchmark from '../lib/benchmark.js';
 
-import createFilter from '../../src/style-spec/feature_filter';
+import createFilter from '../../src/style-spec/feature_filter/index.js';
 import filters from '../data/filters.json';
 
 export default class FilterCreate extends Benchmark {

bench/benchmarks/filter_evaluate.js

@@ -1,8 +1,8 @@
 
-import Benchmark from '../lib/benchmark';
+import Benchmark from '../lib/benchmark.js';
 import {VectorTile} from '@mapbox/vector-tile';
 import Pbf from 'pbf';
-import createFilter from '../../src/style-spec/feature_filter';
+import createFilter from '../../src/style-spec/feature_filter/index.js';
 import filters from '../data/filters.json';
 import assert from 'assert';
 

bench/benchmarks/hillshade_load.js

@@ -1,8 +1,8 @@
 // @flow
 
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
-import type {StyleSpecification} from '../../src/style-spec/types';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
+import type {StyleSpecification} from '../../src/style-spec/types.js';
 
 export default class HillshadeLoad extends Benchmark {
  style: StyleSpecification;

bench/benchmarks/layers.js

@@ -1,6 +1,6 @@
 
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
 import style from '../data/empty.json';
 
 const width = 1024;

bench/benchmarks/layout.js

@@ -1,10 +1,10 @@
 // @flow
 
-import type {StyleSpecification} from '../../src/style-spec/types';
-import Benchmark from '../lib/benchmark';
-import fetchStyle from '../lib/fetch_style';
-import TileParser from '../lib/tile_parser';
-import {OverscaledTileID} from '../../src/source/tile_id';
+import type {StyleSpecification} from '../../src/style-spec/types.js';
+import Benchmark from '../lib/benchmark.js';
+import fetchStyle from '../lib/fetch_style.js';
+import TileParser from '../lib/tile_parser.js';
+import {OverscaledTileID} from '../../src/source/tile_id.js';
 
 export default class Layout extends Benchmark {
  tiles: Array<{tileID: OverscaledTileID, buffer: ArrayBuffer}>;

bench/benchmarks/layout_dds.js

@@ -1,8 +1,8 @@
 // @flow
 
-import Benchmark from '../lib/benchmark';
-import TileParser from '../lib/tile_parser';
-import {OverscaledTileID} from '../../src/source/tile_id';
+import Benchmark from '../lib/benchmark.js';
+import TileParser from '../lib/tile_parser.js';
+import {OverscaledTileID} from '../../src/source/tile_id.js';
 
 const LAYER_COUNT = 2;
 

bench/benchmarks/map_load.js

@@ -1,6 +1,6 @@
 
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
 
 export default class MapLoad extends Benchmark {
  bench() {

bench/benchmarks/paint.js

@@ -1,8 +1,8 @@
 // @flow
 
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
-import type Map from '../../src/ui/map';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
+import type Map from '../../src/ui/map.js';
 
 const width = 1024;
 const height = 768;

bench/benchmarks/paint_states.js

@@ -1,7 +1,7 @@
 
 import style from '../data/empty.json';
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
 
 function generateLayers(layer) {
  const generated = [];

bench/benchmarks/placement.js

@@ -1,8 +1,8 @@
 // @flow
 
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
-import type Map from '../../src/ui/map';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
+import type Map from '../../src/ui/map.js';
 
 const width = 1024;
 const height = 768;

bench/benchmarks/query_box.js

@@ -1,8 +1,8 @@
 // @flow
 
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
-import type Map from '../../src/ui/map';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
+import type Map from '../../src/ui/map.js';
 
 const width = 1024;
 const height = 768;

bench/benchmarks/query_point.js

@@ -1,8 +1,8 @@
 // @flow
 
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
-import type Map from '../../src/ui/map';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
+import type Map from '../../src/ui/map.js';
 
 const width = 1024;
 const height = 768;

bench/benchmarks/remove_paint_state.js

@@ -1,7 +1,7 @@
 
 import style from '../data/empty.json';
-import Benchmark from '../lib/benchmark';
-import createMap from '../lib/create_map';
+import Benchmark from '../lib/benchmark.js';
+import createMap from '../lib/create_map.js';
 
 function generateLayers(layer) {
  const generated = [];

bench/benchmarks/style_layer_create.js

@@ -1,10 +1,10 @@
 // @flow
 
-import type {StyleSpecification} from '../../src/style-spec/types';
-import Benchmark from '../lib/benchmark';
-import createStyleLayer from '../../src/style/create_style_layer';
-import deref from '../../src/style-spec/deref';
-import fetchStyle from '../lib/fetch_style';
+import type {StyleSpecification} from '../../src/style-spec/types.js';
+import Benchmark from '../lib/benchmark.js';
+import createStyleLayer from '../../src/style/create_style_layer.js';
+import deref from '../../src/style-spec/deref.js';
+import fetchStyle from '../lib/fetch_style.js';
 
 export default class StyleLayerCreate extends Benchmark {
  style: string | StyleSpecification;

bench/benchmarks/style_validate.js

@@ -1,9 +1,9 @@
 // @flow
 
-import type {StyleSpecification} from '../../src/style-spec/types';
-import Benchmark from '../lib/benchmark';
-import validateStyle from '../../src/style-spec/validate_style.min';
-import fetchStyle from '../lib/fetch_style';
+import type {StyleSpecification} from '../../src/style-spec/types.js';
+import Benchmark from '../lib/benchmark.js';
+import validateStyle from '../../src/style-spec/validate_style.min.js';
+import fetchStyle from '../lib/fetch_style.js';
 
 export default class StyleValidate extends Benchmark {
  style: string | StyleSpecification;

bench/benchmarks/symbol_layout.js

@@ -1,9 +1,9 @@
 // @flow
 
-import Layout from './layout';
-import SymbolBucket from '../../src/data/bucket/symbol_bucket';
-import {performSymbolLayout} from '../../src/symbol/symbol_layout';
-import {OverscaledTileID} from '../../src/source/tile_id';
+import Layout from './layout.js';
+import SymbolBucket from '../../src/data/bucket/symbol_bucket.js';
+import {performSymbolLayout} from '../../src/symbol/symbol_layout.js';
+import {OverscaledTileID} from '../../src/source/tile_id.js';
 
 export default class SymbolLayout extends Layout {
  parsedTiles: Array<any>;

bench/benchmarks/worker_transfer.js

@@ -1,12 +1,12 @@
 // @flow
 
-import type {StyleSpecification} from '../../src/style-spec/types';
-import Benchmark from '../lib/benchmark';
-import fetchStyle from '../lib/fetch_style';
-import TileParser from '../lib/tile_parser';
-import {OverscaledTileID} from '../../src/source/tile_id';
-import {serialize, deserialize} from '../../src/util/web_worker_transfer';
-import {values} from '../../src/util/util';
+import type {StyleSpecification} from '../../src/style-spec/types.js';
+import Benchmark from '../lib/benchmark.js';
+import fetchStyle from '../lib/fetch_style.js';
+import TileParser from '../lib/tile_parser.js';
+import {OverscaledTileID} from '../../src/source/tile_id.js';
+import {serialize, deserialize} from '../../src/util/web_worker_transfer.js';
+import {values} from '../../src/util/util.js';
 
 export default class WorkerTransfer extends Benchmark {
  parser: TileParser;

bench/benchmarks_view.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as d3 from 'd3';
-import {kde, probabilitiesOfSuperiority, summaryStatistics, regression} from './lib/statistics';
+import {kde, probabilitiesOfSuperiority, summaryStatistics, regression} from './lib/statistics.js';
 
 const versionColor = d3.scaleOrdinal(['#1b9e77', '#7570b3', '#d95f02']);
 const formatSample = d3.format(".3r");

bench/lib/create_map.js

@@ -1,6 +1,6 @@
 // @flow
 
-import Map from '../../src/ui/map';
+import Map from '../../src/ui/map.js';
 
 export default function (options: any): Promise<Map> {
  return new Promise((resolve, reject) => {

bench/lib/fetch_style.js

@@ -1,7 +1,7 @@
 // @flow
 
-import type {StyleSpecification} from '../../src/style-spec/types';
-import {RequestManager} from '../../src/util/mapbox';
+import type {StyleSpecification} from '../../src/style-spec/types.js';
+import {RequestManager} from '../../src/util/mapbox.js';
 
 const requestManager = new RequestManager();
 

bench/lib/locations_with_tile_id.js

@@ -1,5 +1,5 @@
-import MercatorCoordinate from '../../src/geo/mercator_coordinate';
-import {OverscaledTileID} from '../../src/source/tile_id';
+import MercatorCoordinate from '../../src/geo/mercator_coordinate.js';
+import {OverscaledTileID} from '../../src/source/tile_id.js';
 
 export default function locationsWithTileID(locations) {
  return locations.map(feature => {

bench/lib/tile_parser.js

@@ -4,17 +4,17 @@ import Protobuf from 'pbf';
 import VT from '@mapbox/vector-tile';
 import assert from 'assert';
 
-import deref from '../../src/style-spec/deref';
-import Style from '../../src/style/style';
-import {Evented} from '../../src/util/evented';
-import {RequestManager} from '../../src/util/mapbox';
-import WorkerTile from '../../src/source/worker_tile';
-import StyleLayerIndex from '../../src/style/style_layer_index';
-
-import type {StyleSpecification} from '../../src/style-spec/types';
-import type {WorkerTileResult} from '../../src/source/worker_source';
-import type {OverscaledTileID} from '../../src/source/tile_id';
-import type {TileJSON} from '../../src/types/tilejson';
+import deref from '../../src/style-spec/deref.js';
+import Style from '../../src/style/style.js';
+import {Evented} from '../../src/util/evented.js';
+import {RequestManager} from '../../src/util/mapbox.js';
+import WorkerTile from '../../src/source/worker_tile.js';
+import StyleLayerIndex from '../../src/style/style_layer_index.js';
+
+import type {StyleSpecification} from '../../src/style-spec/types.js';
+import type {WorkerTileResult} from '../../src/source/worker_source.js';
+import type {OverscaledTileID} from '../../src/source/tile_id.js';
+import type {TileJSON} from '../../src/types/tilejson.js';
 
 class StubMap extends Evented {
  _requestManager: RequestManager;

bench/rollup_config_benchmarks.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 import replace from 'rollup-plugin-replace';
-import {plugins} from '../build/rollup_plugins';
+import {plugins} from '../build/rollup_plugins.js';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 

bench/styles/benchmarks.js

@@ -1,15 +1,14 @@
-import mapboxgl from '../../src';
-import accessToken from '../lib/access_token';
-import locationsWithTileID from '../lib/locations_with_tile_id';
+import mapboxgl from '../../src/index.js';
+import accessToken from '../lib/access_token.js';
+import locationsWithTileID from '../lib/locations_with_tile_id.js';
 import styleBenchmarkLocations from '@mapbox/gazetteer/benchmark/style-benchmark-locations.json';
-import StyleLayerCreate from '../benchmarks/style_layer_create';
-import Validate from '../benchmarks/style_validate';
-import Layout from '../benchmarks/layout';
-import Paint from '../benchmarks/paint';
-import QueryPoint from '../benchmarks/query_point';
-import QueryBox from '../benchmarks/query_box';
-
-import getWorkerPool from '../../src/util/global_worker_pool';
+import StyleLayerCreate from '../benchmarks/style_layer_create.js';
+import Validate from '../benchmarks/style_validate.js';
+import Layout from '../benchmarks/layout.js';
+import Paint from '../benchmarks/paint.js';
+import QueryPoint from '../benchmarks/query_point.js';
+import QueryBox from '../benchmarks/query_box.js';
+import getWorkerPool from '../../src/util/global_worker_pool.js';
 
 const locations = locationsWithTileID(styleBenchmarkLocations.features);