Modules all the way

.nvmrc

@@ -0,0 +1 @@
+16

config/jsdoc/api/conf.json

@@ -14,12 +14,12 @@
     ]
   },
   "plugins": [
-    "config/jsdoc/api/plugins/markdown",
+    "config/jsdoc/api/plugins/markdown.cjs",
     "jsdoc-plugin-typescript",
-    "config/jsdoc/api/plugins/inline-options",
+    "config/jsdoc/api/plugins/inline-options.cjs",
-    "config/jsdoc/api/plugins/events",
+    "config/jsdoc/api/plugins/events.cjs",
-    "config/jsdoc/api/plugins/observable",
+    "config/jsdoc/api/plugins/observable.cjs",
-    "config/jsdoc/api/plugins/api"
+    "config/jsdoc/api/plugins/api.cjs"
   ],
   "typescript": {
     "moduleRoot": "src"

config/jsdoc/api/plugins/api.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
  * Define an @api tag
  * @param {Object} dictionary The tag dictionary.

config/jsdoc/api/plugins/events.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 const events = {};
 
 exports.handlers = {

config/jsdoc/api/plugins/inline-options.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
  * @fileoverview
  * Inlines option params from typedefs

config/jsdoc/api/plugins/markdown.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
  * Modified from JSDoc's plugins/markdown and lib/jsdoc/util/markdown modules
  * (see https://github.com/jsdoc3/jsdoc/), which are licensed under the Apache 2

config/jsdoc/api/plugins/observable.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 const classes = {};
 const observables = {};
 

config/jsdoc/api/template/publish.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /*global env: true */
 
 const hasOwnProp = Object.prototype.hasOwnProperty;

config/jsdoc/info/conf.json

@@ -11,8 +11,8 @@
     },
     "plugins": [
         "jsdoc-plugin-typescript",
-        "config/jsdoc/info/define-plugin",
+        "config/jsdoc/info/define-plugin.cjs",
-        "config/jsdoc/info/virtual-plugin"
+        "config/jsdoc/info/virtual-plugin.cjs"
     ],
     "typescript": {
       "moduleRoot": "src"

config/jsdoc/info/define-plugin.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
  * @fileoverview  This plugin extracts info from boolean defines.  This only
  * handles boolean defines with the default value in the description.  Default

config/jsdoc/info/publish.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
  * @fileoverview Generates JSON output based on exportable symbols.
  */

config/jsdoc/info/virtual-plugin.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
  * Handle the interface and abstract annotations.
  * @param {Object} dictionary The tag dictionary.

config/jsdoc/package.json

@@ -0,0 +1,4 @@
+{
+  "description": "JSDoc loads publish.js files with require(), so we need to configure everything under this path as a CommonJS module.",
+  "type": "commonjs"
+}

config/webpack-config-legacy-build.js

@@ -1,7 +1,10 @@
-const path = require('path');
+import TerserPlugin from 'terser-webpack-plugin';
-const TerserPlugin = require('terser-webpack-plugin');
+import path, {dirname} from 'path';
+import {fileURLToPath} from 'url';
 
-module.exports = {
+const baseDir = dirname(fileURLToPath(import.meta.url));
+
+export default {
   entry: './build/index.js',
   devtool: 'source-map',
   mode: 'production',
@@ -18,7 +21,7 @@ module.exports = {
         },
         include: [
           path.join(
-            __dirname,
+            baseDir,
             '..',
             'node_modules',
             '@mapbox',

examples/webpack/.eslintrc

@@ -5,12 +5,5 @@
   },
   "parserOptions": {
     "ecmaVersion": 2017
-  },
-  "rules": {
-    "space-before-function-paren": ["error", {
-      "anonymous": "never",
-      "named": "never",
-      "asyncArrow": "always"
-    }]
   }
 }

examples/webpack/config.js

@@ -1,12 +1,15 @@
-const TerserPlugin = require('terser-webpack-plugin');
+import CopyPlugin from 'copy-webpack-plugin';
-const CopyPlugin = require('copy-webpack-plugin');
+import ExampleBuilder from './example-builder.js';
-const ExampleBuilder = require('./example-builder');
+import TerserPlugin from 'terser-webpack-plugin';
-const fs = require('fs');
+import fs from 'fs';
-const path = require('path');
+import path, {dirname} from 'path';
+import {fileURLToPath} from 'url';
 
-const src = path.join(__dirname, '..');
+const baseDir = dirname(fileURLToPath(import.meta.url));
 
-module.exports = {
+const src = path.join(baseDir, '..');
+
+export default {
   context: src,
   target: ['web', 'es5'],
   entry: () => {
@@ -33,10 +36,10 @@ module.exports = {
           },
         },
         include: [
-          path.join(__dirname, '..', '..', 'src'),
+          path.join(baseDir, '..', '..', 'src'),
-          path.join(__dirname, '..'),
+          path.join(baseDir, '..'),
           path.join(
-            __dirname,
+            baseDir,
             '..',
             '..',
             'node_modules',
@@ -48,9 +51,9 @@ module.exports = {
       {
         test: /\.js$/,
         use: {
-          loader: path.join(__dirname, 'worker-loader.js'),
+          loader: path.join(baseDir, 'worker-loader.cjs'),
         },
-        include: [path.join(__dirname, '..', '..', 'src', 'ol', 'worker')],
+        include: [path.join(baseDir, '..', '..', 'src', 'ol', 'worker')],
       },
     ],
   },
@@ -77,7 +80,7 @@ module.exports = {
   },
   plugins: [
     new ExampleBuilder({
-      templates: path.join(__dirname, '..', 'templates'),
+      templates: path.join(baseDir, '..', 'templates'),
       common: 'common',
     }),
     new CopyPlugin({
@@ -93,7 +96,7 @@ module.exports = {
   devtool: 'source-map',
   output: {
     filename: '[name].js',
-    path: path.join(__dirname, '..', '..', 'build', 'examples'),
+    path: path.join(baseDir, '..', '..', 'build', 'examples'),
   },
   resolve: {
     fallback: {
@@ -101,7 +104,7 @@ module.exports = {
     },
     alias: {
       // allow imports from 'ol/module' instead of specifiying the source path
-      ol: path.join(__dirname, '..', '..', 'src', 'ol'),
+      ol: path.join(baseDir, '..', '..', 'src', 'ol'),
     },
   },
 };

examples/webpack/example-builder.js

@@ -1,20 +1,32 @@
-const assert = require('assert');
+import assert from 'assert';
-const frontMatter = require('front-matter');
+import frontMatter from 'front-matter';
-const fs = require('fs');
+import fse from 'fs-extra';
-const handlebars = require('handlebars');
+import handlebars from 'handlebars';
-const marked = require('marked');
+import marked from 'marked';
-const path = require('path');
+import path, {dirname} from 'path';
-const pkg = require('../../package.json');
+import sources from 'webpack-sources';
-const promisify = require('util').promisify;
+import {fileURLToPath} from 'url';
-const RawSource = require('webpack-sources').RawSource;
+
+const RawSource = sources.RawSource;
+const baseDir = dirname(fileURLToPath(import.meta.url));
 
-const readFile = promisify(fs.readFile);
 const isCssRegEx = /\.css(\?.*)?$/;
 const isJsRegEx = /\.js(\?.*)?$/;
 const importRegEx = /^import .* from '(.*)';$/;
 const isTemplateJs = /\/(jquery(-\d+\.\d+\.\d+)?|(bootstrap(\.bundle)?))(\.min)?\.js(\?.*)?$/;
 const isTemplateCss = /\/bootstrap(\.min)?\.css(\?.*)?$/;
 
+let cachedPackageInfo = null;
+async function getPackageInfo() {
+  if (cachedPackageInfo) {
+    return cachedPackageInfo;
+  }
+  cachedPackageInfo = await fse.readJSON(
+    path.resolve(baseDir, '../../package.json')
+  );
+  return cachedPackageInfo;
+}
+
 handlebars.registerHelper(
   'md',
   (str) => new handlebars.SafeString(marked(str))
@@ -111,9 +123,10 @@ function createWordIndex(exampleData) {
 /**
  * Gets dependencies from the js source.
  * @param {string} jsSource Source.
+ * @param {Object} pkg Package info.
  * @return {Object<string, string>} dependencies
  */
-function getDependencies(jsSource) {
+function getDependencies(jsSource, pkg) {
   const lines = jsSource.split('\n');
   const dependencies = {
     ol: pkg.version,
@@ -140,7 +153,7 @@ function getDependencies(jsSource) {
   return dependencies;
 }
 
-class ExampleBuilder {
+export default class ExampleBuilder {
   /**
    * A webpack plugin that builds the html files for our examples.
    * @param {Object} config Plugin configuration.  Requires a `templates` property
@@ -241,16 +254,17 @@ class ExampleBuilder {
   async parseExample(dir, name) {
     const htmlName = `${name}.html`;
     const htmlPath = path.join(dir, htmlName);
-    const htmlSource = await readFile(htmlPath, {encoding: 'utf8'});
+    const htmlSource = await fse.readFile(htmlPath, {encoding: 'utf8'});
 
     const jsName = `${name}.js`;
     const jsPath = path.join(dir, jsName);
-    const jsSource = await readFile(jsPath, {encoding: 'utf8'});
+    const jsSource = await fse.readFile(jsPath, {encoding: 'utf8'});
 
     const {attributes, body} = frontMatter(htmlSource);
     assert(!!attributes.layout, `missing layout in ${htmlPath}`);
     const data = Object.assign(attributes, {contents: body});
 
+    const pkg = await getPackageInfo();
     data.olVersion = pkg.version;
     data.filename = htmlName;
     data.dir = dir;
@@ -299,7 +313,7 @@ class ExampleBuilder {
     const workerPath = path.join(data.dir, workerName);
     let workerSource;
     try {
-      workerSource = await readFile(workerPath, readOptions);
+      workerSource = await fse.readFile(workerPath, readOptions);
     } catch (err) {
       // pass
     }
@@ -321,11 +335,14 @@ class ExampleBuilder {
       assets[workerName] = workerSource;
     }
 
+    const pkg = await getPackageInfo();
+
     data.pkgJson = JSON.stringify(
       {
         name: data.name,
         dependencies: getDependencies(
-          jsSource + (workerSource ? `\n${workerSource}` : '')
+          jsSource + (workerSource ? `\n${workerSource}` : ''),
+          pkg
         ),
         devDependencies: {
           parcel: '^2.0.0-beta.1',
@@ -344,7 +361,7 @@ class ExampleBuilder {
     const cssPath = path.join(data.dir, cssName);
     let cssSource;
     try {
-      cssSource = await readFile(cssPath, readOptions);
+      cssSource = await fse.readFile(cssPath, readOptions);
     } catch (err) {
       // pass
     }
@@ -358,6 +375,7 @@ class ExampleBuilder {
 
     // add additional resources
     if (data.resources) {
+      const pkg = await getPackageInfo();
       const localResources = [];
       const remoteResources = [];
       data.resources.forEach((resource) => {
@@ -389,11 +407,9 @@ class ExampleBuilder {
     }
 
     const templatePath = path.join(this.templates, data.layout);
-    const templateSource = await readFile(templatePath, readOptions);
+    const templateSource = await fse.readFile(templatePath, readOptions);
 
     assets[data.filename] = handlebars.compile(templateSource)(data);
     return assets;
   }
 }
-
-module.exports = ExampleBuilder;

examples/webpack/worker-loader.cjs

@@ -1,6 +1,8 @@
-const build = require('../../tasks/serialize-workers').build;
+/* eslint-disable import/no-commonjs */
 
-function loader() {
+const build = require('../../tasks/serialize-workers.cjs').build;
+
+module.exports = function loader() {
   const callback = this.async();
   const minify = this.mode === 'production';
 
@@ -12,6 +14,4 @@ function loader() {
       callback(null, chunk.code);
     })
     .catch(callback);
-}
+};
-
-module.exports = loader;

package-lock.json

@@ -15,6 +15,7 @@
       },
       "devDependencies": {
         "@babel/core": "^7.6.4",
+        "@babel/eslint-parser": "^7.13.14",
         "@babel/preset-env": "^7.4.4",
         "@openlayers/eslint-plugin": "^4.0.0",
         "@rollup/plugin-babel": "^5.3.0",
@@ -32,6 +33,7 @@
         "copy-webpack-plugin": "^8.0.0",
         "coverage-istanbul-loader": "^3.0.5",
         "coveralls": "3.1.0",
+        "es-main": "^1.0.2",
         "eslint": "^7.2.0",
         "eslint-config-openlayers": "^15.0.0",
         "expect.js": "0.3.1",
@@ -66,7 +68,7 @@
         "shx": "^0.3.2",
         "sinon": "^10.0.0",
         "terser-webpack-plugin": "^5.1.1",
-        "typescript": "^4.2.3",
+        "typescript": "^4.2.4",
         "url-polyfill": "^1.1.5",
         "walk": "^2.3.9",
         "webpack": "^5.27.2",
@@ -127,6 +129,33 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/eslint-parser": {
+      "version": "7.13.14",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.13.14.tgz",
+      "integrity": "sha512-I0HweR36D73Ibn/FfrRDMKlMqJHFwidIUgYdMpH+aXYuQC+waq59YaJ6t9e9N36axJ82v1jR041wwqDrDXEwRA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-scope": "^5.1.0",
+        "eslint-visitor-keys": "^1.3.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.11.0",
+        "eslint": ">=7.5.0"
+      }
+    },
+    "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/generator": {
       "version": "7.13.16",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.16.tgz",
@@ -3631,6 +3660,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-main": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-main/-/es-main-1.0.2.tgz",
+      "integrity": "sha512-LLgW8Cby/FiyQygrI23q2EswulHiDKoyjWlDRgTGXjQ3iRim2R26VfoehpxI5oKRXSNams3L/80KtggoUdxdDQ==",
+      "dev": true
+    },
     "node_modules/es-module-lexer": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
@@ -11410,6 +11445,25 @@
         "source-map": "^0.5.0"
       }
     },
+    "@babel/eslint-parser": {
+      "version": "7.13.14",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.13.14.tgz",
+      "integrity": "sha512-I0HweR36D73Ibn/FfrRDMKlMqJHFwidIUgYdMpH+aXYuQC+waq59YaJ6t9e9N36axJ82v1jR041wwqDrDXEwRA==",
+      "dev": true,
+      "requires": {
+        "eslint-scope": "^5.1.0",
+        "eslint-visitor-keys": "^1.3.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        }
+      }
+    },
     "@babel/generator": {
       "version": "7.13.16",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.16.tgz",
@@ -14260,6 +14314,12 @@
         "unbox-primitive": "^1.0.0"
       }
     },
+    "es-main": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-main/-/es-main-1.0.2.tgz",
+      "integrity": "sha512-LLgW8Cby/FiyQygrI23q2EswulHiDKoyjWlDRgTGXjQ3iRim2R26VfoehpxI5oKRXSNams3L/80KtggoUdxdDQ==",
+      "dev": true
+    },
     "es-module-lexer": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",

package.json

@@ -15,21 +15,21 @@
     "test-rendering": "node test/rendering/test.js",
     "test-spec": "npm run karma -- --single-run --log-level error",
     "test": "npm run test-spec && npm run test-rendering -- --force",
-    "karma": "karma start test/browser/karma.config.js",
+    "karma": "karma start test/browser/karma.config.cjs",
     "start": "npm run serve-examples",
     "serve-examples": "webpack serve --config examples/webpack/config.js --mode development",
     "build-examples": "webpack --config examples/webpack/config.js --mode production",
-    "build-package": "npm run transpile && npm run copy-css && node tasks/prepare-package",
+    "build-package": "npm run transpile && npm run copy-css && node tasks/prepare-package.js",
-    "build-index": "npm run build-package && node tasks/generate-index",
+    "build-index": "npm run build-package && node tasks/generate-index.js",
     "build-legacy": "shx rm -rf build && npm run build-index && webpack --config config/webpack-config-legacy-build.js && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
     "build-site": "npm run build-examples && npm run apidoc && mkdir -p build/site && cp site/index.html build/site && mv build/apidoc build/site/apidoc && mv build/examples build/site/examples",
     "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
-    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers && tsc --project config/tsconfig-build.json",
+    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers.cjs && tsc --project config/tsconfig-build.json",
     "typecheck": "tsc --pretty",
     "apidoc-debug": "shx rm -rf build/apidoc && node --inspect-brk=9229 ./node_modules/jsdoc/jsdoc.js -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc",
     "apidoc": "shx rm -rf build/apidoc && jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
   },
-  "main": "index.js",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git://github.com/openlayers/openlayers.git"
@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",
+    "@babel/eslint-parser": "^7.13.14",
     "@babel/preset-env": "^7.4.4",
     "@openlayers/eslint-plugin": "^4.0.0",
     "@rollup/plugin-babel": "^5.3.0",
@@ -66,6 +67,7 @@
     "copy-webpack-plugin": "^8.0.0",
     "coverage-istanbul-loader": "^3.0.5",
     "coveralls": "3.1.0",
+    "es-main": "^1.0.2",
     "eslint": "^7.2.0",
     "eslint-config-openlayers": "^15.0.0",
     "expect.js": "0.3.1",
@@ -100,7 +102,7 @@
     "shx": "^0.3.2",
     "sinon": "^10.0.0",
     "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^4.2.3",
+    "typescript": "^4.2.4",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
     "webpack": "^5.27.2",
@@ -113,10 +115,15 @@
   },
   "eslintConfig": {
     "extends": "openlayers",
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+      "requireConfigFile": false
+    },
     "plugins": [
       "@openlayers"
     ],
     "rules": {
+      "import/no-commonjs": "error",
       "@openlayers/no-exclusive-tests": [
         "error",
         {

tasks/generate-index.js

@@ -1,6 +1,9 @@
-const fse = require('fs-extra');
+import esMain from 'es-main';
-const path = require('path');
+import fse from 'fs-extra';
-const generateInfo = require('./generate-info');
+import generateInfo from './generate-info.js';
+import path from 'path';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
 
 /**
  * Read the symbols from info file.
@@ -21,11 +24,11 @@ function getImport(symbol, member) {
   const defaultExport = symbol.name.split('~');
   const namedExport = symbol.name.split('.');
   if (defaultExport.length > 1 && defaultExport[0].indexOf('.') === -1) {
-    const from = defaultExport[0].replace(/^module\:/, './');
+    const from = defaultExport[0].replace(/^module\:/, './') + '.js';
     const importName = from.replace(/[.\/]+/g, '$');
     return `import ${importName} from '${from}';`;
   } else if (namedExport.length > 1 && member) {
-    const from = namedExport[0].replace(/^module\:/, './');
+    const from = namedExport[0].replace(/^module\:/, './') + '.js';
     const importName = from.replace(/[.\/]+/g, '_');
     return `import {${member} as ${importName}$${member}} from '${from}';`;
   }
@@ -97,7 +100,7 @@ function generateExports(symbols) {
  * Generate the exports code.
  * @return {Promise<string>} Resolves with the exports code.
  */
-async function main() {
+export default async function main() {
   const symbols = await getSymbols();
   return generateExports(symbols);
 }
@@ -106,18 +109,15 @@ async function main() {
  * If running this module directly, read the config file, call the main
  * function, and write the output file.
  */
-if (require.main === module) {
+if (esMain(import.meta)) {
+  const baseDir = dirname(fileURLToPath(import.meta.url));
+
   main()
     .then(async (code) => {
-      const filepath = path.join(__dirname, '..', 'build', 'index.js');
+      const filepath = path.join(baseDir, '..', 'build', 'index.js');
       await fse.outputFile(filepath, code);
     })
     .catch((err) => {
       process.stderr.write(`${err.message}\n`, () => process.exit(1));
     });
 }
-
-/**
- * Export main function.
- */
-module.exports = main;

tasks/generate-info.js

@@ -1,11 +1,16 @@
-const fse = require('fs-extra');
+import esMain from 'es-main';
-const path = require('path');
+import fse from 'fs-extra';
-const spawn = require('child_process').spawn;
+import path from 'path';
-const walk = require('walk').walk;
+import {dirname} from 'path';
-const isWindows = process.platform.indexOf('win') === 0;
+import {fileURLToPath} from 'url';
+import {spawn} from 'child_process';
+import {walk} from 'walk';
 
-const sourceDir = path.join(__dirname, '..', 'src');
+const isWindows = process.platform.indexOf('win') === 0;
-const infoPath = path.join(__dirname, '..', 'build', 'info.json');
+const baseDir = dirname(fileURLToPath(import.meta.url));
+
+const sourceDir = path.join(baseDir, '..', 'src');
+const infoPath = path.join(baseDir, '..', 'build', 'info.json');
 
 /**
  * Get checked path of a binary.
@@ -17,9 +22,15 @@ function getBinaryPath(binaryName) {
     binaryName += '.cmd';
   }
 
-  const jsdocResolved = require.resolve('jsdoc/jsdoc.js');
+  const jsdocResolved = path.join(
+    baseDir,
+    '..',
+    'node_modules',
+    'jsdoc',
+    'jsdoc.js'
+  );
   const expectedPaths = [
-    path.join(__dirname, '..', 'node_modules', '.bin', binaryName),
+    path.join(baseDir, '..', 'node_modules', '.bin', binaryName),
     path.resolve(
       path.join(path.dirname(jsdocResolved), '..', '.bin', binaryName)
     ),
@@ -40,7 +51,7 @@ function getBinaryPath(binaryName) {
 const jsdoc = getBinaryPath('jsdoc');
 
 const jsdocConfig = path.join(
-  __dirname,
+  baseDir,
   '..',
   'config',
   'jsdoc',
@@ -120,7 +131,7 @@ function spawnJSDoc(paths) {
   return new Promise((resolve, reject) => {
     let output = '';
     let errors = '';
-    const cwd = path.join(__dirname, '..');
+    const cwd = path.join(baseDir, '..');
     const child = spawn(jsdoc, ['-c', jsdocConfig].concat(paths), {cwd: cwd});
 
     child.stdout.on('data', (data) => {
@@ -162,7 +173,7 @@ async function write(info) {
  * Generate info from the sources.
  * @return {Promise<Error>} Resolves with the info object.
  */
-async function main() {
+export default async function main() {
   const paths = await getPaths();
   return await spawnJSDoc(paths);
 }
@@ -170,15 +181,10 @@ async function main() {
 /**
  * If running this module directly, generate and write out the info.json file.
  */
-if (require.main === module) {
+if (esMain(import.meta)) {
   main()
     .then(write)
     .catch((err) => {
       process.stderr.write(`${err.message}\n`, () => process.exit(1));
     });
 }
-
-/**
- * Export main function.
- */
-module.exports = main;

tasks/next-dev-version.js

@@ -1,7 +1,11 @@
-const version = require('../package.json').version;
+import esMain from 'es-main';
-const semver = require('semver');
+import process from 'process';
+import semver from 'semver';
+import {promises as fs} from 'fs';
 
-function nextVersion() {
+async function nextVersion() {
+  const pkg = await fs.readFile('../package.json', {encoding: 'utf8'});
+  const version = JSON.parse(pkg).version;
   const s = semver.parse(version);
   if (!s) {
     throw new Error(`Invalid version ${version}`);
@@ -9,6 +13,13 @@ function nextVersion() {
   return `${s.major}.${s.minor}.${s.patch}-dev.${Date.now()}`;
 }
 
-if (require.main === module) {
+if (esMain(import.meta)) {
-  process.stdout.write(`${nextVersion()}\n`);
+  nextVersion()
+    .then((version) => {
+      process.stdout.write(`${version}\n`);
+    })
+    .catch((error) => {
+      process.stderr.write(`${error}\n`);
+      process.exit(1);
+    });
 }

tasks/prepare-package.js

@@ -1,35 +1,49 @@
-const fs = require('fs');
+import esMain from 'es-main';
-const path = require('path');
+import fse from 'fs-extra';
-const pkg = require('../package.json');
+import path from 'path';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
 
-const buildDir = path.resolve(__dirname, '../build/ol');
+const baseDir = dirname(fileURLToPath(import.meta.url));
+const buildDir = path.resolve(baseDir, '../build/ol');
+
+async function main() {
+  const pkg = await fse.readJSON(path.resolve(baseDir, '../package.json'));
 
   // update the version number in util.js
   const utilPath = path.join(buildDir, 'util.js');
   const versionRegEx = /var VERSION = '(.*)';/g;
-const utilSrc = fs
+  let utilSrc = await fse.readFile(utilPath, 'utf-8');
-  .readFileSync(utilPath, 'utf-8')
+  utilSrc = utilSrc.replace(versionRegEx, `var VERSION = '${pkg.version}';`);
-  .replace(versionRegEx, `var VERSION = '${pkg.version}';`);
+  await fse.writeFile(utilPath, utilSrc, 'utf-8');
-fs.writeFileSync(utilPath, utilSrc, 'utf-8');
 
   // write out simplified package.json
+  pkg.main = 'index.js';
   delete pkg.scripts;
   delete pkg.devDependencies;
   delete pkg.style;
   delete pkg.eslintConfig;
   delete pkg.private;
-fs.writeFileSync(
+  await fse.writeJSON(path.join(buildDir, 'package.json'), pkg, {spaces: 2});
-  path.join(buildDir, 'package.json'),
-  JSON.stringify(pkg, null, 2),
-  'utf-8'
-);
 
   // copy in readme and license files
-fs.copyFileSync(
+  await fse.copyFile(
-  path.resolve(__dirname, '../README.md'),
+    path.resolve(baseDir, '../README.md'),
     path.join(buildDir, 'README.md')
   );
-fs.copyFileSync(
+
-  path.resolve(__dirname, '../LICENSE.md'),
+  await fse.copyFile(
+    path.resolve(baseDir, '../LICENSE.md'),
     path.join(buildDir, 'LICENSE.md')
   );
+}
+
+/**
+ * If running this module directly, read the config file, call the main
+ * function, and write the output file.
+ */
+if (esMain(import.meta)) {
+  main().catch((err) => {
+    process.stderr.write(`${err.message}\n`, () => process.exit(1));
+  });
+}

tasks/serialize-workers.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 const path = require('path');
 const babel = require('@rollup/plugin-babel').babel;
 const resolve = require('@rollup/plugin-node-resolve').nodeResolve;

test/browser/index_test.js

@@ -1,5 +0,0 @@
-// require all modules ending in ".test.js" from the
-// current directory and all subdirectories
-const testsContext = require.context('./spec', true, /\.test\.js$/);
-
-testsContext.keys().forEach(testsContext);

test/browser/karma.config.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 const path = require('path');
 
 module.exports = function (karma) {
@@ -45,7 +47,7 @@ module.exports = function (karma) {
         pattern: path.resolve(__dirname, './test-extensions.js'),
       },
       {
-        pattern: path.resolve(__dirname, './index_test.js'),
+        pattern: 'spec/**/*.test.js',
         watched: false,
       },
       {
@@ -54,7 +56,6 @@ module.exports = function (karma) {
         watched: false,
       },
     ],
-    exclude: ['**/*.test.js'],
     proxies: {
       '/spec/': '/base/spec/',
     },
@@ -99,7 +100,7 @@ module.exports = function (karma) {
             use: {
               loader: path.join(
                 __dirname,
-                '../../examples/webpack/worker-loader.js'
+                '../../examples/webpack/worker-loader.cjs'
               ),
             },
             include: [path.join(__dirname, '../../src/ol/worker')],

test/rendering/test.js

@@ -1,18 +1,24 @@
 #! /usr/bin/env node
-const puppeteer = require('puppeteer');
+import config from './webpack.config.js';
-const webpack = require('webpack');
+import esMain from 'es-main';
-const config = require('./webpack.config');
+import express from 'express';
-const webpackMiddleware = require('webpack-dev-middleware');
+import fs from 'fs';
-const express = require('express');
+import fse from 'fs-extra';
-const path = require('path');
+import globby from 'globby';
-const png = require('pngjs');
+import log from 'loglevelnext';
-const fs = require('fs');
+import path from 'path';
-const fse = require('fs-extra');
+import pixelmatch from 'pixelmatch';
-const pixelmatch = require('pixelmatch');
+import png from 'pngjs';
-const yargs = require('yargs');
+import puppeteer from 'puppeteer';
-const log = require('loglevelnext');
+import serveStatic from 'serve-static';
-const globby = require('globby');
+import webpack from 'webpack';
-const serveStatic = require('serve-static');
+import webpackMiddleware from 'webpack-dev-middleware';
+import yargs from 'yargs';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+import {hideBin} from 'yargs/helpers';
+
+const baseDir = dirname(fileURLToPath(import.meta.url));
 
 const compiler = webpack(Object.assign({mode: 'development'}, config));
 
@@ -20,11 +26,11 @@ function getHref(entry) {
   return path.dirname(entry).slice(1) + '/';
 }
 
-const staticHandler = serveStatic(__dirname);
+const staticHandler = serveStatic(baseDir);
 
-const defaultHandler = serveStatic(path.join(__dirname, 'default'));
+const defaultHandler = serveStatic(path.join(baseDir, 'default'));
 
-const srcHandler = serveStatic(path.join(__dirname, '..', '..', 'src'));
+const srcHandler = serveStatic(path.join(baseDir, '..', '..', 'src'));
 
 function indexHandler(req, res) {
   const items = [];
@@ -91,15 +97,15 @@ function serve(options) {
 }
 
 function getActualScreenshotPath(entry) {
-  return path.join(__dirname, path.dirname(entry), 'actual.png');
+  return path.join(baseDir, path.dirname(entry), 'actual.png');
 }
 
 function getExpectedScreenshotPath(entry) {
-  return path.join(__dirname, path.dirname(entry), 'expected.png');
+  return path.join(baseDir, path.dirname(entry), 'expected.png');
 }
 
 function getPassFilePath(entry) {
-  return path.join(__dirname, path.dirname(entry), 'pass');
+  return path.join(baseDir, path.dirname(entry), 'pass');
 }
 
 function parsePNG(filepath) {
@@ -284,7 +290,7 @@ async function getLatest(patterns) {
 
 async function getOutdated(entries, options) {
   const libTime = await getLatest(
-    path.join(__dirname, '..', 'src', 'ol', '**', '*')
+    path.join(baseDir, '..', 'src', 'ol', '**', '*')
   );
   options.log.debug('library time', libTime);
   const outdated = [];
@@ -298,7 +304,7 @@ async function getOutdated(entries, options) {
     }
 
     const caseTime = await getLatest(
-      path.join(__dirname, path.dirname(entry), '**', '*')
+      path.join(baseDir, path.dirname(entry), '**', '*')
     );
     options.log.debug('case time', entry, caseTime);
     if (passTime < caseTime) {
@@ -337,8 +343,8 @@ function sleep(ms) {
   });
 }
 
-if (require.main === module) {
+if (esMain(import.meta)) {
-  const options = yargs
+  const options = yargs(hideBin(process.argv))
     .option('fix', {
       describe: 'Accept all screenshots as accepted',
       type: 'boolean',

test/rendering/webpack.config.js

@@ -1,7 +1,10 @@
-const fs = require('fs');
+import fs from 'fs';
-const path = require('path');
+import path, {dirname} from 'path';
+import {fileURLToPath} from 'url';
 
-const cases = path.join(__dirname, 'cases');
+const baseDir = dirname(fileURLToPath(import.meta.url));
+
+const cases = path.join(baseDir, 'cases');
 
 const caseDirs = fs.readdirSync(cases).filter((name) => {
   let exists = true;
@@ -18,8 +21,8 @@ caseDirs.forEach((c) => {
   entry[`cases/${c}/main`] = `./cases/${c}/main.js`;
 });
 
-module.exports = {
+export default {
-  context: __dirname,
+  context: baseDir,
   target: 'web',
   entry: entry,
   devtool: 'source-map',
@@ -30,18 +33,18 @@ module.exports = {
         test: /\.js$/,
         use: {
           loader: path.join(
-            __dirname,
+            baseDir,
-            '../../examples/webpack/worker-loader.js'
+            '../../examples/webpack/worker-loader.cjs'
           ),
         },
-        include: [path.join(__dirname, '../../src/ol/worker')],
+        include: [path.join(baseDir, '../../src/ol/worker')],
       },
     ],
   },
   resolve: {
     alias: {
       // ol-mapbox-style imports ol/style/Style etc
-      ol: path.join(__dirname, '..', '..', 'src', 'ol'),
+      ol: path.join(baseDir, '..', '..', 'src', 'ol'),
     },
   },
 };