chore: upgrade deps and migrate ESLint to flat config

.github/workflows/tests.yml

@@ -10,27 +10,35 @@ jobs:
   build:
     runs-on: ubuntu-latest
     timeout-minutes: 20
+    env:
+      YARN_NODE_LINKER: node-modules
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x]
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+      - name: Enable Corepack
+        run: |
+          corepack enable
+          corepack prepare yarn@4.14.1 --activate
+          corepack yarn --version
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node-version }}
+          cache: yarn
       - name: Install dependencies
-        run: npm install
+        run: corepack yarn install --immutable
       - name: Lint
-        run: npm run lint
+        run: corepack yarn lint
       - name: Format check
-        run: npm run format:check
+        run: corepack yarn format:check
       - name: Build
-        run: npm run build
+        run: corepack yarn build
       - name: Test
-        run: npm test
+        run: corepack yarn test
       - name: Coverage
-        run: npm run test:coverage:check
+        run: corepack yarn test:coverage:check
       - name: Package smoke check
-        run: npm run pack:check
+        run: corepack yarn pack:check

eslint.config.js

@@ -0,0 +1,43 @@
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.config({
+    env: {
+      browser: true,
+      es6: true,
+    },
+    extends: ['eslint:recommended', 'airbnb-base', 'prettier'],
+    globals: {
+      Atomics: 'readonly',
+      SharedArrayBuffer: 'readonly',
+    },
+    parserOptions: {
+      ecmaVersion: 2018,
+      sourceType: 'module',
+    },
+    rules: {
+      'no-underscore-dangle': 'off',
+      'no-console': 'off',
+      'no-useless-assignment': 'off',
+      'global-require': 'off',
+      'no-restricted-syntax': 'off',
+      'linebreak-style': 'off',
+      'max-classes-per-file': 'off',
+      'import/no-unresolved': 'off',
+      'import/extensions': 'off',
+      'import/no-extraneous-dependencies': 'off',
+    },
+  }),
+];

package.json

@@ -35,29 +35,34 @@
   "license": "Apache-2.0",
   "type": "module",
   "packageManager": "yarn@4.14.1",
+  "engines": {
+    "node": ">=20.19.0"
+  },
   "bugs": {
     "url": "https://github.com/OneraHub/XDSMjs/issues"
   },
   "homepage": "https://github.com/OneraHub/XDSMjs#readme",
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/register": "^7.18.9",
-    "babel-core": "^7.0.0-bridge",
-    "babel-loader": "^8.0.0",
-    "c8": "^10.1.3",
-    "eslint": "^8.33.0",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/register": "^7.28.6",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^10.1.1",
+    "c8": "^11.0.0",
+    "eslint": "^10.2.1",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.1.2",
-    "eslint-plugin-import": "^2.20.2",
-    "faucet": "0.0.4",
-    "jsdom": "^24.1.3",
-    "prettier": "^3.5.3",
-    "tape": "^5.6.3",
-    "terser-webpack-plugin": "^5.3.6",
-    "webpack": "^5.50.0",
-    "webpack-cli": "5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "faucet": "^0.0.4",
+    "jsdom": "^29.1.0",
+    "prettier": "^3.8.3",
+    "tape": "^5.9.0",
+    "terser-webpack-plugin": "^5.5.0",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.3"
   },
   "dependencies": {
     "d3-color": "^3.1.0",

src/animation.js

@@ -267,7 +267,6 @@ Animation.prototype._scheduleAnimation = function _scheduleAnimation() {
 
       if (n > 0) {
         nodesByStep[n - 1].forEach((prevNodeId) => {
-          // eslint-disable-line space-infix-ops
           self._pulseLink(elapsed, prevNodeId, nodeId);
         });
 

src/index.js

@@ -1,6 +1,5 @@
 import XdsmFactory from './xdsm-factory.js';
 
-// eslint-disable-next-line import/prefer-default-export
 export function XDSMjs(config) {
   return new XdsmFactory(config);
 }

src/labelizer.js

@@ -42,7 +42,6 @@ Labelizer.strParse = function strParse(str, subSupScript) {
   return res;
 };
 
-// eslint-disable-next-line max-len
 Labelizer._createVarListLabel = function _createVarListLabel(
   selection,
   name,

src/selectable.js

@@ -20,7 +20,7 @@ Selectable.prototype._addEventHandler = function _addEventHandler(klass) {
     const prevSelection = select('[data-xdsm-selected="true"]');
     self._unselect(prevSelection);
 
-    const selection = select(this); // eslint-disable-line no-invalid-this
+    const selection = select(this);
     if (prevSelection.empty() || prevSelection.data()[0].id !== selection.data()[0].id) {
       self._select(selection);
     }

src/xdsm-factory.js

@@ -90,12 +90,7 @@ class XdsmFactory {
       .attr('class', (d) => `optpb ${d}`)
       .style('opacity', 0)
       .on('click', function makeTransition() {
-        select(this)
-          .transition()
-          .duration(500) // eslint-disable-line
-          // no-invalid-this
-          .style('opacity', 0)
-          .style('pointer-events', 'none');
+        select(this).transition().duration(500).style('opacity', 0).style('pointer-events', 'none');
       })
       .append('pre')
       .html((d) => mdo[d].optpb);
@@ -121,7 +116,7 @@ class XdsmFactory {
             info.style('pointer-events', 'auto');
           });
         }
-      }, this); // eslint-disable-line no-invalid-this
+      }, this);
     }
 
     const anim = new Animation(xdsms);

src/xdsm.js

@@ -159,17 +159,17 @@ Xdsm.prototype._createTextGroup = function _createTextGroup(kind, group, decorat
       return `id${d.id} ${kind} ${klass}`;
     })
     .each(function makeLabel(d) {
-      const that = select(this); // eslint-disable-line no-invalid-this
-      that.call(labelize.subXdsmLink(d.subxdsm)); // eslint-disable-line no-invalid-this
+      const that = select(this);
+      that.call(labelize.subXdsmLink(d.subxdsm));
     })
     .each(function makeLine(d1, i) {
       const { grid } = self;
-      const item = select(this); // eslint-disable-line no-invalid-this
+      const item = select(this);
       if (grid[i] === undefined) {
         grid[i] = new Array(self.graph.nodes.length);
       }
       item.select('text').each(function makeCell(d2, j) {
-        const that = select(this); // eslint-disable-line no-invalid-this
+        const that = select(this);
         const data = item.data()[0];
         const m = data.row === undefined ? i : data.row;
         const n = data.col === undefined ? i : data.col;
@@ -183,7 +183,7 @@ Xdsm.prototype._createTextGroup = function _createTextGroup(kind, group, decorat
       });
     })
     .each(function makeDecoration(d, i) {
-      const that = select(this); // eslint-disable-line no-invalid-this
+      const that = select(this);
       that.call(decorate.bind(self), d, i, 0);
       if (d.isMulti) {
         that.call(decorate.bind(self), d, i, 1 * Number(MULTI_OFFSET));