Migrate to ESLint 9 and ESLint flat config

eslint.config.js

@@ -0,0 +1,37 @@
+import hypothesis from 'eslint-config-hypothesis';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: [
+      '.tox/**/*',
+      '.yalc/**/*',
+      '.yarn/**/*',
+      'build/**/*',
+      '**/vendor/**/*.js',
+      '**/coverage/**/*',
+      'docs/_build/*',
+    ],
+  },
+  ...hypothesis,
+  ...tseslint.configs.recommended,
+  jsxA11y.flatConfigs.recommended,
+  {
+    rules: {
+      'prefer-arrow-callback': 'error',
+      'prefer-const': ['error', { destructuring: 'all' }],
+    },
+  },
+
+  {
+    files: ['*.js'],
+    ignores: ['h/**'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+);

h/static/scripts/controllers/create-group-form-controller.js

@@ -1,5 +1,6 @@
 export function CreateGroupFormController(element) {
   // Create Group form handling
+  // eslint-disable-next-line @typescript-eslint/no-this-alias
   const self = this;
   this._submitBtn = element.querySelector('.js-create-group-create-btn');
   this._groupNameInput = element.querySelector('.js-group-name-input');

h/static/scripts/group-forms/components/CreateEditGroupForm.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   CancelIcon,
   RadioGroup,
-  ModalDialog,
   useWarnOnPageUnload,
 } from '@hypothesis/frontend-shared';
 import { readConfig } from '../config';
@@ -164,8 +163,6 @@ export default function CreateEditGroupForm() {
     setErrorMessage('');
     setSaveState('saving');
 
-    let response: CreateUpdateGroupAPIResponse;
-
     try {
       const body: CreateUpdateGroupAPIRequest = {
         id: group!.pubid,
@@ -174,7 +171,7 @@ export default function CreateEditGroupForm() {
         type: groupType,
       };
 
-      response = (await callAPI(config.api.updateGroup!.url, {
+      (await callAPI(config.api.updateGroup!.url, {
         method: config.api.updateGroup!.method,
         headers: config.api.updateGroup!.headers,
         json: body,

h/static/scripts/group-forms/components/forms/TextField.tsx

@@ -2,7 +2,6 @@ import { useId, useState } from 'preact/hooks';
 import { Input, Textarea } from '@hypothesis/frontend-shared';
 
 import Label from './Label';
-import Star from './Star';
 
 function CharacterCounter({
   value,
@@ -85,7 +84,7 @@ export default function TextField({
     onChangeValue((e.target as HTMLInputElement).value);
   };
 
-  const handleChange = (e: Event) => {
+  const handleChange = () => {
     setHasCommitted(true);
   };
 

h/static/scripts/group-forms/config.ts

@@ -3,7 +3,7 @@ import type { GroupType } from './utils/api';
 export type APIConfig = {
   method: string;
   url: string;
-  headers: object;
+  headers: Record<PropertyKey, unknown>;
 };
 
 export type ConfigObject = {

h/static/scripts/group-forms/index.tsx

@@ -7,8 +7,12 @@ function init() {
   const shadowHost = document.querySelector('#create-group-form')!;
   const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
   const config = readConfig();
-  const stylesheetLinks = config.styles.map(stylesheetURL => (
-    <link rel="stylesheet" href={stylesheetURL} />
+  const stylesheetLinks = config.styles.map((stylesheetURL, index) => (
+    <link
+      key={`${stylesheetURL}${index}`}
+      rel="stylesheet"
+      href={stylesheetURL}
+    />
   ));
   render(
     <>

h/static/scripts/group-forms/utils/api.ts

@@ -40,7 +40,7 @@ export class APIError extends Error {
   /* The response that was received, if any. */
   response: Response | null;
   /* The parsed JSON body of the response, if there was a valid JSON response. */
-  json: object | Array<any> | null;
+  json: object | Array<unknown> | null;
 
   constructor(
     message: string,
@@ -71,7 +71,7 @@ export async function callAPI(
   }: {
     method?: string;
     json?: object | null;
-    headers?: any;
+    headers?: Record<PropertyKey, unknown>;
   } = {},
 ): Promise<object> {
   const options: RequestInit = {

h/static/scripts/karma.config.cjs

@@ -1,3 +1,5 @@
+/* global module */
+
 module.exports = function (config) {
   config.set({
     // base path that will be used to resolve all patterns (eg. files, exclude)

h/static/scripts/tests/controllers/search-bar-controller-test.js

@@ -1,3 +1,4 @@
+/* eslint-disable mocha/no-nested-tests */
 import syn from 'syn';
 
 import { LozengeController } from '../../controllers/lozenge-controller';

h/static/scripts/tests/util.js

@@ -1,3 +1,4 @@
+/* eslint-disable mocha/no-exports */
 /**
  * Helper for writing parameterized tests.
  *

h/static/scripts/util/annotation-ids.js

@@ -15,7 +15,7 @@ export function extractIDFromURL(url) {
     } else {
       return null;
     }
-  } catch (err) {
+  } catch {
     return null;
   }
 }

package.json

@@ -50,11 +50,13 @@
     "diff": "^5.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-preact-pure": "^4.1.0",
-    "eslint": "^8.57.0",
-    "eslint-config-hypothesis": "2.6",
+    "eslint": "^9.12.0",
+    "eslint-config-hypothesis": "^3.0.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-mocha": "^10.5.0",
-    "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "globals": "^15.11.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-mocha": "^2.0.1",
@@ -64,7 +66,8 @@
     "prettier": "^3.3.3",
     "sinon": "^18.0.0",
     "syn": "^0.2.2",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.9.0"
   },
   "engines": {
     "node": ">=6"