Upgrade to ESM and flat ESLint config

.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": [
-    "@babel/preset-env"
+    ["@babel/preset-env", { "modules": false }]
   ]
 }

eslint.config.js

@@ -0,0 +1,58 @@
+import globals from 'globals';
+import takiyonConfig from 'eslint-config-takiyon';
+
+import webpackConfig from './webpack.config.test.js';
+
+export default [
+    ...takiyonConfig,
+    {
+        files: [
+            '**/*.{js,jsx}',
+        ],
+        ignores: ['./node_modules/**/*'],
+        settings: {
+            // Account for webpack.resolve.module imports
+            'import/resolver': {
+                // "Fixes Node resolution issues in ESLint v6
+                // https://github.com/benmosher/eslint-plugin-import/issues/1396
+                node: {},
+                webpack: {
+                    config: webpackConfig,
+                },
+            },
+        },
+    },
+    {
+        // Front-end files
+        files: [
+            'examples/**/*.js',
+            'src/**/*.js',
+            'test/**/*.js',
+        ],
+        languageOptions: {
+            globals: {
+                APP_NAME: 'readonly',
+                ...globals.browser,
+            },
+        },
+    },
+    {
+        // Test files
+        files: ['test/**/*.js'],
+        languageOptions: {
+            globals: {
+                APP_NAME: 'readonly',
+                ...globals.mocha,
+            },
+        },
+    },
+    {
+        // Build files
+        files: ['*.js'],
+        languageOptions: {
+            globals: {
+                ...globals.node,
+            },
+        },
+    },
+];

examples/src/js/index.js

@@ -40,6 +40,7 @@ const settings = {
         events: {
             click: {
                 block(event, d) {
+                    // eslint-disable-next-line no-alert
                     alert(d.label.raw);
                 },
             },

package.json

@@ -18,6 +18,7 @@
   "bugs": "https://github.com/jakezatecky/d3-funnel/issues",
   "main": "dist/d3-funnel.js",
   "browser": "dist/d3-funnel.min.js",
+  "type": "module",
   "scripts": {
     "build": "npm run build-node && npm run build-web",
     "build-examples": "webpack --config=webpack.config.examples.js --mode=production",
@@ -31,6 +32,7 @@
     "lint:script": "eslint src/**/*.js examples/src/**/*.js test/*.js ./test/d3-funnel/**/*.js *.js",
     "lint:style": "stylelint examples/src/scss/**/*.scss",
     "prepublishOnly": "npm run release",
+    "release": "npm run test && npm run build",
     "test": "npm run lint && npm run test:script && npm run test:style-format",
     "test:script": "npm run build-test && node test/test.js",
     "test:style-format": "prettier --check examples/src/scss/**/*.scss"
@@ -46,10 +48,11 @@
     "css-loader": "^6.8.1",
     "d3": "^7.0.0",
     "eslint": "^8.23.1",
-    "eslint-config-takiyon": "^2.0.0",
+    "eslint-config-takiyon": "^3.0.0",
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-import": "^2.7.0",
     "global-jsdom": "^9.2.0",
+    "globals": "^14.0.0",
     "html-bundler-webpack-plugin": "^3.4.2",
     "jsdom": "^23.0.1",
     "lodash": "^4.17.21",

src/d3-funnel/D3Funnel.js

@@ -6,10 +6,10 @@ import { select } from 'd3-selection';
 import 'd3-transition';
 import { nanoid } from 'nanoid';
 
-import Colorizer from './Colorizer';
-import Formatter from './Formatter';
-import Navigator from './Navigator';
-import Utils from './Utils';
+import Colorizer from './Colorizer.js';
+import Formatter from './Formatter.js';
+import Navigator from './Navigator.js';
+import Utils from './Utils.js';
 
 class D3Funnel {
     static defaults = {

src/index.js

@@ -1,3 +1,3 @@
-import D3Funnel from './d3-funnel/D3Funnel';
+import D3Funnel from './d3-funnel/D3Funnel.js';
 
 export default D3Funnel;

test/d3-funnel/Colorizer.js

@@ -1,6 +1,6 @@
 import chai from 'chai';
 
-import Colorizer from '../../src/d3-funnel/Colorizer';
+import Colorizer from '../../src/d3-funnel/Colorizer.js';
 
 const { assert } = chai;
 

test/d3-funnel/D3Funnel.js

@@ -9,7 +9,7 @@ import {
 import chai from 'chai';
 import sinon from 'sinon';
 
-import D3Funnel from '../../src/d3-funnel/D3Funnel';
+import D3Funnel from '../../src/d3-funnel/D3Funnel.js';
 
 const { assert } = chai;
 

test/d3-funnel/Navigator.js

@@ -1,6 +1,6 @@
 import chai from 'chai';
 
-import Navigator from '../../src/d3-funnel/Navigator';
+import Navigator from '../../src/d3-funnel/Navigator.js';
 
 const { assert } = chai;
 

test/d3-funnel/Utils.js

@@ -1,6 +1,6 @@
 import chai from 'chai';
 
-import Utils from '../../src/d3-funnel/Utils';
+import Utils from '../../src/d3-funnel/Utils.js';
 
 const { assert } = chai;
 

test/index.js

@@ -1,7 +1,7 @@
 // Because JSDom does not support SVGs properly this must run in a browser
 // https://github.com/jsdom/jsdom/issues/918
 
-import './d3-funnel/Colorizer';
-import './d3-funnel/D3Funnel';
-import './d3-funnel/Navigator';
-import './d3-funnel/Utils';
+import './d3-funnel/Colorizer.js';
+import './d3-funnel/D3Funnel.js';
+import './d3-funnel/Navigator.js';
+import './d3-funnel/Utils.js';

test/test.js

@@ -1,6 +1,11 @@
-const path = require('node:path');
+import path from 'node:path';
 // Use Firefox because it has the most consumable console pass through
-const { firefox } = require('playwright');
+import { firefox } from 'playwright';
+import { fileURLToPath } from 'node:url';
+
+/* eslint-disable no-underscore-dangle */
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 function outputStream(out, stream) {
     stream.forEach((message) => {

webpack.config.examples.js

@@ -1,7 +1,12 @@
-const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
-const path = require('node:path');
+import HtmlBundlerPlugin from 'html-bundler-webpack-plugin';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-module.exports = {
+/* eslint-disable no-underscore-dangle */
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
     mode: 'development',
     entry: {
         index: path.join(__dirname, 'examples/src/index.js'),

webpack.config.js

@@ -1,7 +1,10 @@
-const path = require('node:path');
-const webpack = require('webpack');
-const pkg = require('./package.json');
+import path from 'node:path';
+import webpack from 'webpack';
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
 
+const json = await readFile(new URL('./package.json', import.meta.url));
+const pkg = JSON.parse(json.toString());
 const banner = `
 ${pkg.name} - v${pkg.version}
 Copyright (c) ${pkg.author}
@@ -12,6 +15,10 @@ const fileMap = {
     web: 'd3-funnel.min.js',
 };
 
+/* eslint-disable no-underscore-dangle */
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 function makeConfig({ target }) {
     return {
         mode: 'none',
@@ -52,4 +59,4 @@ function makeConfig({ target }) {
     };
 }
 
-module.exports = makeConfig;
+export default makeConfig;

webpack.config.test.js

@@ -1,7 +1,12 @@
-const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
-const path = require('node:path');
+import HtmlBundlerPlugin from 'html-bundler-webpack-plugin';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-module.exports = {
+/* eslint-disable no-underscore-dangle */
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
     mode: 'development',
     entry: {
         index: path.join(__dirname, 'test/index.js'),