Switch dev environment to native ESM to support Node 12+ (mapbox#10367)

* use native ES modules for unit tests * update CircleCI Node image to v14.15 * bump yarn cache key on Circle CI * expose bundles as CommonJS in Node * upgrade postcss and use CJS for config * convert harness and some scripts to esm * fix lint and flow * make sure testem runs with native esm * testem fixups * use custom json loader to support named exports * use a valid access token in unit tests * work around testem refusing to load cjs configs * fix lint * fix testem runs on CI hopefully * fix webpack build
N3GIS · Feb 11, 2021 · aef82c2 · aef82c2
1 parent 2fc685b
commit aef82c2
Show file tree

Hide file tree

Showing 52 changed files with 966 additions and 425 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -102,11 +102,11 @@ workflows:
               only: /v[0-9]+.[0-9]+.[0-9]+(-.+)?/
             branches:
               ignore: /.*/
-              
+
 
 defaults: &defaults
   docker:
-    - image: circleci/node:10.16-browsers
+    - image: circleci/node:14.15-browsers
   working_directory: ~/mapbox-gl-js
 
 jobs:
@@ -116,10 +116,10 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - v3-yarn-{{ checksum "yarn.lock" }}
+            - v4-yarn-{{ checksum "yarn.lock" }}
       - run: yarn
       - save_cache:
-          key: v3-yarn-{{ checksum "yarn.lock" }}
+          key: v4-yarn-{{ checksum "yarn.lock" }}
           paths:
             - '~/.yarn'
             - 'node_modules'

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 /rollup/build/
-/dist/
+/dist/mapbox-gl*
+/dist/versions*
+/dist/style-spec
 *.es.js
 *.js.map
 node_modules

diff --git a/bench/rollup_config_benchmarks.js b/bench/rollup_config_benchmarks.js
@@ -1,9 +1,9 @@
 import fs from 'fs';
 import sourcemaps from 'rollup-plugin-sourcemaps';
-import replace from 'rollup-plugin-replace';
+import replace from '@rollup/plugin-replace';
 import {plugins} from '../build/rollup_plugins.js';
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 
 let styles = ['mapbox:https://styles/mapbox/streets-v10'];
 

diff --git a/build/check-bundle-size.js b/build/check-bundle-size.js
@@ -1,12 +1,11 @@
 #!/usr/bin/env node
 
-/* eslint-disable */
-const { Octokit } = require("@octokit/rest");
-const { createAppAuth } = require("@octokit/auth-app");
-const prettyBytes = require('pretty-bytes');
-const fs = require('fs');
-const {execSync} = require('child_process');
-const zlib = require('zlib');
+import { Octokit } from "@octokit/rest";
+import { createAppAuth } from "@octokit/auth-app";
+import prettyBytes from 'pretty-bytes';
+import fs from 'fs';
+import {execSync} from 'child_process';
+import zlib from 'zlib';
 
 process.on('unhandledRejection', error => {
     // don't log `error` directly, because errors from child_process.execSync

diff --git a/build/diff-tarball.js b/build/diff-tarball.js
@@ -1,5 +1,5 @@
-const packlist = require('npm-packlist')
-const npmContent = require('list-npm-contents');
+import packlist from 'npm-packlist';
+import npmContent from 'list-npm-contents';
 
 npmContent('mapbox-gl').then(function(last_version_files) {
     packlist({ path: '.' }).then(function(new_version_files) {
@@ -15,4 +15,4 @@ npmContent('mapbox-gl').then(function(last_version_files) {
             console.log('-', file);
         });
     });
-});
+});
diff --git a/build/generate-access-token-script.js b/build/generate-access-token-script.js
@@ -1,11 +1,9 @@
-/* eslint-disable */
-'use strict';
-const fs = require('fs');
-const path = require('path');
-const script = fs.readFileSync(path.join(__dirname, '../debug/access_token.js'), 'utf-8')
+import fs from 'fs';
+
+const script = fs.readFileSync(new URL('../debug/access_token.js', import.meta.url), 'utf-8')
     .replace('process.env.MapboxAccessToken',
         JSON.stringify(process.env.MapboxAccessToken))
     .replace('process.env.MAPBOX_ACCESS_TOKEN',
         JSON.stringify(process.env.MAPBOX_ACCESS_TOKEN));
 
-fs.writeFileSync(path.join(__dirname, '../debug/access_token_generated.js'), script);
+fs.writeFileSync(new URL('../debug/access_token_generated.js', import.meta.url), script);
diff --git a/build/generate-flow-typed-style-spec.js b/build/generate-flow-typed-style-spec.js
@@ -1,6 +1,8 @@
-const spec = require('../src/style-spec/reference/v8.json');
-const properties = require('../src/style-spec/util/properties');
-const fs = require('fs');
+
+import fs from 'fs';
+import path from 'path';
+import {supportsPropertyExpression, supportsZoomExpression} from '../src/style-spec/util/properties.js';
+import spec from '../src/style-spec/reference/v8.json';
 
 function flowEnum(values) {
     if (Array.isArray(values)) {
@@ -43,9 +45,9 @@ function flowType(property) {
         }
     })();
 
-    if (properties.supportsPropertyExpression(property)) {
+    if (supportsPropertyExpression(property)) {
         return `DataDrivenPropertyValueSpecification<${baseType}>`;
-    } else if (properties.supportsZoomExpression(property)) {
+    } else if (supportsZoomExpression(property)) {
         return `PropertyValueSpecification<${baseType}>`;
     } else if (property.expression) {
         return `ExpressionSpecification`;

diff --git a/build/generate-release-list.js b/build/generate-release-list.js
@@ -1,9 +1,9 @@
-const octokit = require('@octokit/rest')();
-const fs = require('fs');
+import octokit from '@octokit/rest';
+import fs from 'fs';
 
 const list = {};
 
-octokit
+octokit()
     .paginate(octokit.repos.listReleases.endpoint({
         owner: 'mapbox',
         repo: 'mapbox-gl-js'

diff --git a/build/node-loader.js b/build/node-loader.js
@@ -0,0 +1,39 @@
+import flowRemoveTypes from '@mapbox/flow-remove-types';
+import {dataToEsm} from '@rollup/pluginutils';
+
+const glslRe = /\.glsl$/;
+const jsonRe = /\.json$/;
+
+export function resolve(specifier, context, defaultResolve) {
+    if (glslRe.test(specifier)) {
+        const url = new URL(specifier, context.parentURL).href;
+        return {url};
+    }
+    return defaultResolve(specifier, context, defaultResolve);
+}
+
+export function getFormat(url, context, defaultGetFormat) {
+    if (glslRe.test(url) || jsonRe.test(url)) {
+        return {format: 'module'};
+    }
+    return defaultGetFormat(url, context, defaultGetFormat);
+}
+
+export function transformSource(source, context, defaultTransformSource) {
+    if (source.indexOf('@flow') >= 0) {
+        source = flowRemoveTypes(source.toString()).toString();
+        return {source};
+    }
+    if (glslRe.test(context.url)) {
+        return {source: `export default \`${source}\``};
+    }
+    if (jsonRe.test(context.url)) {
+        source = dataToEsm(JSON.parse(source), {
+            preferConst: true,
+            namedExports: true,
+            indent: '    '
+        });
+        return {source};
+    }
+    return defaultTransformSource(source, context, defaultTransformSource);
+}
diff --git a/build/rollup_plugins.js b/build/rollup_plugins.js
@@ -1,14 +1,14 @@
 
 import flowRemoveTypes from '@mapbox/flow-remove-types';
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import unassert from 'rollup-plugin-unassert';
-import json from 'rollup-plugin-json';
+import json from '@rollup/plugin-json';
 import {terser} from 'rollup-plugin-terser';
-import minifyStyleSpec from './rollup_plugin_minify_style_spec';
-import {createFilter} from 'rollup-pluginutils';
+import minifyStyleSpec from './rollup_plugin_minify_style_spec.js';
+import {createFilter} from '@rollup/pluginutils';
 import strip from '@rollup/plugin-strip';
-import replace from 'rollup-plugin-replace';
+import replace from '@rollup/plugin-replace';
 
 // Common set of plugins/transformations shared across different rollup
 // builds (main mapboxgl bundle, style-spec package, benchmarks bundle)

diff --git a/build/run-node b/build/run-node
@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 
-node -r @mapbox/flow-remove-types/register -r esm ${@}
+node --no-warnings --experimental-loader ./build/node-loader.js ${@}
diff --git a/build/run-tap b/build/run-tap
@@ -5,4 +5,4 @@ else
   arg="${@}"
 fi
 
-node_modules/.bin/tap --node-arg -r --node-arg @mapbox/flow-remove-types/register --node-arg -r --node-arg esm $arg --node-arg
+node_modules/.bin/tap --node-arg --no-warnings --node-arg --experimental-loader --node-arg ./build/node-loader.js $arg --node-arg
diff --git a/build/test/build-tape.js b/build/test/build-tape.js
@@ -1,11 +1,11 @@
-/* eslint-disable import/no-commonjs */
 /* eslint-disable flowtype/require-valid-file-annotation */
-const browserify = require('browserify');
-const fs = require('fs');
+import browserify from 'browserify';
+import fs from 'fs';
+import {fileURLToPath} from 'url';
 
-module.exports = function() {
+export default function() {
     return new Promise((resolve, reject) => {
-        browserify(require.resolve('../../test/util/tape_config.js'), { standalone: 'tape' })
+        browserify(fileURLToPath(new URL('../../test/util/tape_config.js', import.meta.url)), { standalone: 'tape' })
             .transform("babelify", {presets: ["@babel/preset-env"], global: true, compact: true})
             .bundle((err, buff) => {
                 if (err) { throw err; }

diff --git a/dist/package.json b/dist/package.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "dist/mapbox-gl.js",
   "style": "dist/mapbox-gl.css",
   "license": "SEE LICENSE IN LICENSE.txt",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git:https://github.com/mapbox/mapbox-gl-js.git"
@@ -39,13 +40,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@mapbox/flow-remove-types": "^1.3.0-await.upstream.2",
+    "@mapbox/flow-remove-types": "^2.0.0",
     "@mapbox/gazetteer": "^4.0.4",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
     "@mapbox/mvt-fixtures": "^3.6.0",
     "@octokit/auth-app": "^2.4.7",
     "@octokit/rest": "^18.0.0",
-    "@rollup/plugin-strip": "^1.3.1",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@rollup/plugin-replace": "^2.3.4",
+    "@rollup/plugin-strip": "^2.0.0",
     "address": "^1.1.2",
     "babel-eslint": "^10.0.1",
     "babelify": "^10.0.0",
@@ -66,7 +71,6 @@
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsdoc": "^17.1.2",
     "eslint-plugin-react": "^7.12.4",
-    "esm": "~3.0.84",
     "flow-bin": "^0.100.0",
     "gl": "^4.5.3",
     "glob": "^7.1.4",
@@ -86,21 +90,18 @@
     "nyc": "^13.3.0",
     "pirates": "^4.0.1",
     "pixelmatch": "^5.1.0",
-    "postcss-cli": "^6.1.2",
-    "postcss-inline-svg": "^3.1.1",
+    "postcss": "^8.2.4",
+    "postcss-cli": "^8.3.1",
+    "postcss-inline-svg": "^5.0.0",
     "pretty-bytes": "^5.1.0",
     "puppeteer": "^1.18.0",
     "qrcode-terminal": "^0.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "request": "^2.88.0",
-    "rollup": "^1.23.1",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-sourcemaps": "^0.4.2",
-    "rollup-plugin-terser": "^5.1.2",
+    "rollup": "^2.38.4",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-unassert": "^0.3.0",
     "selenium-webdriver": "^4.0.0-alpha.5",
     "shuffle-seed": "^1.1.6",
@@ -118,7 +119,6 @@
     "./src/util/window.js": "./src/util/browser/window.js",
     "./src/util/web_worker.js": "./src/util/browser/web_worker.js"
   },
-  "esm": true,
   "scripts": {
     "build-dev": "rollup -c --environment BUILD:dev",
     "watch-dev": "rollup -c --environment BUILD:dev --watch",
@@ -150,10 +150,10 @@
     "test-unit": "build/run-tap --reporter classic --no-coverage test/unit",
     "test-build": "build/run-tap --no-coverage test/build/**/*.test.js",
     "test-browser": "build/run-tap --reporter spec --no-coverage test/browser/**/*.test.js",
-    "watch-render": "SUITE_NAME=render testem -f test/integration/testem.js",
-    "watch-query": "SUITE_NAME=query testem -f test/integration/testem.js",
-    "test-render": "SUITE_NAME=render CI=true testem ci -f test/integration/testem.js",
-    "test-query": "SUITE_NAME=query CI=true testem ci -f test/integration/testem.js",
+    "watch-render": "SUITE_NAME=render testem -f test/integration/testem/testem.js",
+    "watch-query": "SUITE_NAME=query testem -f test/integration/testem/testem.js",
+    "test-render": "SUITE_NAME=render CI=true testem ci -f test/integration/testem/testem.js",
+    "test-query": "SUITE_NAME=query CI=true testem ci -f test/integration/testem/testem.js",
     "test-expressions": "build/run-node test/expression.test.js",
     "test-flow": "build/run-node build/generate-flow-typed-style-spec && flow .",
     "test-cov": "nyc --require=@mapbox/flow-remove-types/register --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render",

diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,7 +1,8 @@
 import fs from 'fs';
 import sourcemaps from 'rollup-plugin-sourcemaps';
-import {plugins} from './build/rollup_plugins';
-import banner from './build/banner';
+import {plugins} from './build/rollup_plugins.js';
+import banner from './build/banner.js';
+import {fileURLToPath} from 'url';
 
 const {BUILD, MINIFY} = process.env;
 const minified = MINIFY === 'true';
@@ -10,14 +11,14 @@ const bench = BUILD === 'bench';
 
 function buildType(build, minified) {
     switch (build) {
-        case 'production': 
+        case 'production':
             if (minified) return 'dist/mapbox-gl.js';
             return 'dist/mapbox-gl-unminified.js';
         case 'bench':
             return 'dist/mapbox-gl-bench.js';
         case 'dev':
             return 'dist/mapbox-gl-dev.js';
-        default: 
+        default:
             return 'dist/mapbox-gl-dev.js';
     }
 }
@@ -53,7 +54,7 @@ export default [{
         format: 'umd',
         sourcemap: production ? true : 'inline',
         indent: false,
-        intro: fs.readFileSync(require.resolve('./rollup/bundle_prelude.js'), 'utf8'),
+        intro: fs.readFileSync(fileURLToPath(new URL('./rollup/bundle_prelude.js', import.meta.url)), 'utf8'),
         banner
     },
     treeshake: false,

diff --git a/src/render/painter.js b/src/render/painter.js
@@ -14,7 +14,7 @@ import rasterBoundsAttributes from '../data/raster_bounds_attributes.js';
 import posAttributes from '../data/pos_attributes.js';
 import ProgramConfiguration from '../data/program_configuration.js';
 import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index.js';
-import * as shaders from '../shaders/index.js';
+import shaders from '../shaders/shaders.js';
 import Program from './program.js';
 import {programUniforms} from './program/program_uniforms.js';
 import Context from '../gl/context.js';

diff --git a/src/render/program.js b/src/render/program.js
@@ -1,6 +1,6 @@
 // @flow
 
-import {prelude, preludeTerrain} from '../shaders/index.js';
+import {prelude, preludeTerrain} from '../shaders/shaders.js';
 import assert from 'assert';
 import ProgramConfiguration from '../data/program_configuration.js';
 import VertexArrayObject from './vertex_array_object.js';

diff --git a/src/shaders/index.js b/src/shaders/index.js