chore(deps): bump ESLint frontend dependencies

* Remove Airbnb ESLint config, as it doesn't support ESLint 9. Consider adding
  it back once airbnb/javascript#2961 is resolved.
* We're still using the legacy config format, since
  facebook/react#30774 is not merged yet.
* Fix some lint errors output by the new ESLint config.
* The TypeScript version is bumped to 5.6.3, which is the latest supported by
  typescript-eslint.

.eslintrc.cjs

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+const { readFileSync } = require('node:fs');
 const path = require('node:path');
 
 // Allow the Codium ESLint plugin to find `tsconfig.json` from the repository root.
@@ -15,17 +16,38 @@ const project = [
   path.join(__dirname, 'subprojects/frontend/tsconfig.shared.json'),
 ];
 
+const frontendPackageJSONPath = path.join(
+  __dirname,
+  'subprojects/frontend/package.json',
+);
+const frontendPackageJSON = /** @type {unknown} */ (
+  JSON.parse(readFileSync(frontendPackageJSONPath, 'utf8'))
+);
+const reactVersion = /** @type { {dependencies?: {react?: string}} } */ (
+  frontendPackageJSON
+)?.dependencies?.react?.replace('^', '');
+
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  plugins: ['@typescript-eslint', 'mobx'],
+  plugins: [
+    '@typescript-eslint',
+    'import',
+    'jsx-a11y',
+    'mobx',
+    'prettier',
+    'react',
+    'react-hooks',
+  ],
   extends: [
-    'airbnb',
-    'airbnb-typescript',
-    'airbnb/hooks',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+    'plugin:import/recommended',
+    'plugin:jsx-a11y/recommended',
     'plugin:mobx/recommended',
     'plugin:prettier/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
   ],
   parserOptions: {
     project,
@@ -42,6 +64,9 @@ module.exports = {
         project,
       },
     },
+    react: {
+      version: reactVersion,
+    },
   },
   env: {
     browser: true,
@@ -81,6 +106,8 @@ module.exports = {
     ],
     // Not all components depend on observable state.
     'mobx/missing-observer': 'off',
+    // Prefer a logger instead of `console.log`.
+    'no-console': 'warn',
     // A dangling underscore, while not neccessary for all private fields,
     // is useful for backing fields of properties that should be read-only from outside the class.
     'no-underscore-dangle': [
@@ -108,6 +135,7 @@ module.exports = {
     {
       files: ['*.cjs'],
       rules: {
+        '@typescript-eslint/no-require-imports': 'off',
         // https://github.com/typescript-eslint/typescript-eslint/issues/1724
         '@typescript-eslint/no-var-requires': 'off',
       },
@@ -143,8 +171,6 @@ module.exports = {
         'no-console': 'off',
         // Access to the environment in configuration files.
         'no-process-env': 'off',
-        // There is no need to shim iterators in Node.
-        'no-restricted-syntax': 'off',
       },
     },
     {

.yarn/sdks/eslint/lib/types/index.d.ts

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real eslint your application uses
+module.exports = wrapWithUserWrapper(absRequire(`eslint`));

.yarn/sdks/eslint/lib/types/rules/index.d.ts

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/rules
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real eslint/rules your application uses
+module.exports = wrapWithUserWrapper(absRequire(`eslint/rules`));

.yarn/sdks/eslint/lib/types/universal.d.ts

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/universal
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real eslint/universal your application uses
+module.exports = wrapWithUserWrapper(absRequire(`eslint/universal`));

.yarn/sdks/eslint/lib/types/use-at-your-own-risk.d.ts

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/use-at-your-own-risk
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = wrapWithUserWrapper(absRequire(`eslint/use-at-your-own-risk`));

.yarn/sdks/eslint/lib/universal.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/universal
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real eslint/universal your application uses
+module.exports = wrapWithUserWrapper(absRequire(`eslint/universal`));

.yarn/sdks/eslint/package.json

@@ -1,14 +1,27 @@
 {
   "name": "eslint",
-  "version": "8.57.1-sdk",
+  "version": "9.15.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs",
   "bin": {
     "eslint": "./bin/eslint.js"
   },
   "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/api.js"
+    },
     "./package.json": "./package.json",
-    ".": "./lib/api.js",
-    "./use-at-your-own-risk": "./lib/unsupported-api.js"
+    "./use-at-your-own-risk": {
+      "types": "./lib/types/use-at-your-own-risk.d.ts",
+      "default": "./lib/unsupported-api.js"
+    },
+    "./rules": {
+      "types": "./lib/types/rules/index.d.ts"
+    },
+    "./universal": {
+      "types": "./lib/types/universal.d.ts",
+      "default": "./lib/universal.js"
+    }
   }
 }

.yarnrc.yml

@@ -119,13 +119,8 @@ packageExtensions:
   "@xstate/tools-shared@*":
     peerDependencies:
       "@babel/core": "*"
-  eslint-config-airbnb-typescript@*:
-    peerDependencies:
-      eslint-plugin-import: "*"
   notistack@*:
     peerDependencies:
       csstype: "*"
-  terser-webpack-plugin@*:
-    peerDependencies:
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.2.cjs

package.json

@@ -31,31 +31,29 @@
     "g:lint": "node scripts/eslintReport.cjs",
     "g:tsc": "tsc"
   },
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].2",
   "dependencies": {
     "react": "^18.3.1"
   },
   "devDependencies": {
-    "@types/eslint": "^8.56.12",
-    "@types/node": "^22.9.0",
+    "@types/eslint": "^9.6.1",
+    "@types/node": "^22.9.3",
     "@types/react": "^18.3.12",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "cheerio": "^1.0.0",
-    "corepack": "^0.29.4",
-    "eslint": "^8.57.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^18.0.0",
+    "corepack": "^0.30.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-mobx": "^0.0.13",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "prettier": "^3.3.3",
-    "smol-toml": "^1.3.0",
+    "smol-toml": "^1.3.1",
     "typescript": "5.6.3"
   },
   "resolutions": {

scripts/eslintReport.cjs

@@ -9,12 +9,12 @@ const path = require('node:path');
 const { Readable } = require('node:stream');
 const { pipeline } = require('node:stream/promises');
 
-const { ESLint } = require('eslint');
+const { LegacyESLint } = require('eslint/use-at-your-own-risk');
 
 /**
  * Write ESLint report to console.
  *
- * @param cli {import('eslint').ESLint} The ESLint CLI.
+ * @param cli {import('eslint/use-at-your-own-risk').LegacyESLint} The ESLint CLI.
  * @param report {import('eslint').ESLint.LintResult[]} The ESLint report.
  * @return {Promise<void>} A promise that resolves when the report is finished.
  */
@@ -29,7 +29,7 @@ async function reportToConsole(cli, report) {
 /**
  * Write ESLint report to the <code>build</code> directory.
  *
- * @param cli {import('eslint').ESLint} The ESLint CLI.
+ * @param cli {import('eslint/use-at-your-own-risk').LegacyESLint} The ESLint CLI.
  * @param workspace {string} The workspace path.
  * @param report {import('eslint').ESLint.LintResult[]} The ESLint report.
  * @return {Promise<void>} A promise that resolves when the report is finished.
@@ -51,7 +51,7 @@ async function reportToJson(cli, workspace, report) {
  */
 async function createReport(workspace, fix) {
   const absoluteWorkspace = path.resolve(__dirname, '..', workspace ?? '.');
-  /** @type {import('eslint').ESLint.Options} */
+  /** @type {import('eslint').ESLint.LegacyOptions} */
   const options = {
     useEslintrc: true,
     cwd: absoluteWorkspace,
@@ -62,7 +62,7 @@ async function createReport(workspace, fix) {
       ignorePatterns: ['subprojects/**/*'],
     };
   }
-  const cli = new ESLint(options);
+  const cli = new LegacyESLint(options);
   const report = await cli.lintFiles('.');
   await Promise.all([
     reportToConsole(cli, report),

scripts/upgradeVersions.mjs

@@ -75,7 +75,7 @@ async function checkMavenUpdates(repo, libraryName, library, versions) {
 async function checkForUpdates(repo, fileName) {
   console.log('# Upgrades in', fileName);
   const filePath = path.join(import.meta.dirname, '../gradle', fileName);
-  const contents = await readFile(filePath, 'utf-8');
+  const contents = await readFile(filePath, 'utf8');
   const toml = /** @type {VersionCatalog} */ (TOML.parse(contents));
   const versions = toml.versions ?? {};
   const libraries = toml.libraries ?? {};