chore(web): Change eslint-plugin-react to eslint-react/eslint-plugin

This supports eslint 10

Author: fliiiix

web/eslint.config.js

@@ -1,42 +1,45 @@
-import js from '@eslint/js'
+import eslintReact from "@eslint-react/eslint-plugin";
+import eslintJs from "@eslint/js";
+import { defineConfig } from "eslint/config";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
 import globals from 'globals'
-import reactPlugin from 'eslint-plugin-react'
-import reactHooksPlugin from 'eslint-plugin-react-hooks'
-import tseslint from 'typescript-eslint'
-import eslintConfigPrettier from 'eslint-config-prettier'
 
-export default tseslint.config(
+export default defineConfig(
   {
-    ignores: ['dist/**', 'vite-env.d.ts', 'vite.config.ts']
-  },
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.ts", "**/*.tsx"],
+    ignores: ['dist/**', 'vite-env.d.ts', 'vite.config.ts'],
+
+    // Extend recommended rule sets from:
+    // 1. ESLint JS's recommended rules
+    // 2. TypeScript ESLint recommended rules
+    // 3. ESLint React's recommended-typescript rules
+    // 4. Prettier (Must be last to disable conflicting rules)
+    extends: [
+      eslintJs.configs.recommended,
+      tseslint.configs.recommended,
+      eslintReact.configs["recommended-typescript"],
+      eslintConfigPrettier,
+    ],
+
+    // Configure language/parsing options
     languageOptions: {
-      ecmaVersion: 'latest',
+      ecmaVersion: 'latest', // Allow modern JS syntax
       globals: {
-        ...globals.browser
+        ...globals.browser, // Allow browser globals like `window`
       },
+      parser: tseslint.parser, // Your existing parser
       parserOptions: {
         projectService: true,
-        tsconfigRootDir: import.meta.dirname
-      }
-    },
-    plugins: {
-      react: reactPlugin,
-      'react-hooks': reactHooksPlugin
-    },
-    settings: {
-      react: {
-        version: 'detect'
-      }
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
+
+    // TODO: See if some of these could be fixed
     rules: {
-      ...reactPlugin.configs.recommended.rules,
-      ...reactPlugin.configs['jsx-runtime'].rules,
-      ...reactHooksPlugin.configs.recommended.rules
-    }
+      "@eslint-react/dom-no-dangerously-set-innerhtml": "off",
+      "@eslint-react/exhaustive-deps": "off",
+      "@eslint-react/set-state-in-effect": "off",
+    },
   },
-  eslintConfigPrettier
-)
+);

web/package.json

@@ -45,13 +45,12 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^28.1.0",
-    "eslint": "^9.17.0",
+    "eslint": "^10.2.0",
     "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-react": "^7.37.3",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "@eslint-react/eslint-plugin": "^4.2.3",
     "globals": "^17.4.0",
     "prettier": "^3.8.1",
-    "typescript-eslint": "^8.57.0",
+    "typescript-eslint": "^8.58.1",
     "vitest": "^4.0.18"
   }
 }

web/src/components/SearchBar.tsx

@@ -37,7 +37,6 @@ export default function SearchBar(props: Props): React.JSX.Element {
       updateSearch(q)
     }
     setShowFavourites(props.showFavourites)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.showFavourites]);
 
   const onFavourites = (show: boolean): void => {

web/src/data-providers/MessageBannerProvider.tsx

@@ -57,7 +57,6 @@ export function MessageBannerProvider({ children }: any): JSX.Element {
     }, message.showMs)
 
     setLastTimeout(newTimeout)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const clearMessages = useCallback(() => {
@@ -70,7 +69,6 @@ export function MessageBannerProvider({ children }: any): JSX.Element {
       type: 'success',
       showMs: 6000
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (

web/src/data-providers/ProjectDataProvider.tsx

@@ -75,7 +75,6 @@ export function ProjectDataProvider({ children }: any): JSX.Element {
 
   useEffect(() => {
     loadData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return <Context.Provider value={state}>{children}</Context.Provider>

web/src/data-providers/SearchProvider.tsx

@@ -66,7 +66,6 @@ export function SearchProvider({ children }: any): JSX.Element {
       filteredProjects: filterProjects(''),
       setQuery
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projects])
 
   return <Context.Provider value={state}>{children}</Context.Provider>

web/src/data-providers/StatsDataProvider.tsx

@@ -77,7 +77,6 @@ export function StatsDataProvider({ children }: any): JSX.Element {
 
   useEffect(() => {
     loadData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return <Context.Provider value={state}>{children}</Context.Provider>

web/src/pages/Delete.tsx

@@ -32,7 +32,6 @@ export default function Delete(): JSX.Element {
     }
 
     setVersions(projects?.find((p) => p.name === project)?.versions ?? [])
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [project])
 
   const validate = (

web/src/pages/Docs.tsx

@@ -42,7 +42,6 @@ export default function Docs(): JSX.Element {
       page.current,
       hash.current
     )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [project, displayVersion, iframeUpdateTrigger])
 
   useEffect(() => {
@@ -164,7 +163,6 @@ export default function Docs(): JSX.Element {
       hash.current = urlHash
       setIframeUpdateTrigger((v) => v + 1)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location])
 
   if (projectLoading) {

web/src/pages/Home.tsx

@@ -48,7 +48,6 @@ export default function Home(): JSX.Element {
 
   useEffect(() => {
     updateFavorites()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projects])
 
   if (loadingFailed || statsLoadingFailed) {