refactor!: migrate from eslint-plugin-react to eslint react (#453)

Author: hyoban

Diff for: README.md

@@ -471,7 +471,7 @@ export default antfu({
 Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
 ```bash
-npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh
+npm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
 ```
 
 #### Svelte

Diff for: package.json

@@ -39,12 +39,12 @@
     "prepare": "simple-git-hooks"
   },
   "peerDependencies": {
+    "@eslint-react/eslint-plugin": "^1.5.8",
     "@unocss/eslint-plugin": ">=0.50.0",
     "astro-eslint-parser": "^0.16.3",
     "eslint": ">=8.40.0",
     "eslint-plugin-astro": "^0.31.4",
     "eslint-plugin-format": ">=0.1.0",
-    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-solid": "^0.13.2",
@@ -54,6 +54,9 @@
     "svelte-eslint-parser": "^0.33.1"
   },
   "peerDependenciesMeta": {
+    "@eslint-react/eslint-plugin": {
+      "optional": true
+    },
     "@unocss/eslint-plugin": {
       "optional": true
     },
@@ -66,9 +69,6 @@
     "eslint-plugin-format": {
       "optional": true
     },
-    "eslint-plugin-react": {
-      "optional": true
-    },
     "eslint-plugin-react-hooks": {
       "optional": true
     },
@@ -130,6 +130,7 @@
     "@antfu/eslint-config": "workspace:*",
     "@antfu/eslint-plugin-prettier": "^5.0.1-1",
     "@antfu/ni": "^0.21.12",
+    "@eslint-react/eslint-plugin": "^1.5.8",
     "@eslint/config-inspector": "^0.4.6",
     "@stylistic/eslint-plugin-migrate": "^1.7.0",
     "@types/eslint": "^8.56.9",
@@ -144,7 +145,6 @@
     "eslint": "^9.0.0",
     "eslint-plugin-astro": "^0.34.0",
     "eslint-plugin-format": "^0.1.0",
-    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-solid": "^0.13.2",

Diff for: pnpm-lock.yaml

@@ -98,7 +98,7 @@ export const dependenciesMap = {
     'astro-eslint-parser',
   ],
   react: [
-    'eslint-plugin-react',
+    '@eslint-react/eslint-plugin',
     'eslint-plugin-react-hooks',
     'eslint-plugin-react-refresh',
   ],

Diff for: src/cli/constants.ts

@@ -1,67 +1,89 @@
 import { isPackageExists } from 'local-pkg'
-import { ensurePackages, interopDefault } from '../utils'
-import type { OptionsFiles, OptionsHasTypeScript, OptionsOverrides, TypedFlatConfigItem } from '../types'
-import { GLOB_JSX, GLOB_TSX } from '../globs'
+import { ensurePackages, interopDefault, toArray } from '../utils'
+import type { OptionsFiles, OptionsOverrides, OptionsTypeScriptWithTypes, TypedFlatConfigItem } from '../types'
+import { GLOB_TS, GLOB_TSX } from '../globs'
 
 // react refresh
 const ReactRefreshAllowConstantExportPackages = [
   'vite',
 ]
 
 export async function react(
-  options: OptionsHasTypeScript & OptionsOverrides & OptionsFiles = {},
+  options: OptionsTypeScriptWithTypes & OptionsOverrides & OptionsFiles = {},
 ): Promise<TypedFlatConfigItem[]> {
   const {
-    files = [GLOB_JSX, GLOB_TSX],
+    files = [GLOB_TS, GLOB_TSX],
     overrides = {},
-    typescript = true,
   } = options
 
   await ensurePackages([
-    'eslint-plugin-react',
+    '@eslint-react/eslint-plugin',
     'eslint-plugin-react-hooks',
     'eslint-plugin-react-refresh',
   ])
 
+  const tsconfigPath = options?.tsconfigPath
+    ? toArray(options.tsconfigPath)
+    : undefined
+  const isTypeAware = !!tsconfigPath
+
   const [
     pluginReact,
     pluginReactHooks,
     pluginReactRefresh,
+    parserTs,
   ] = await Promise.all([
-    interopDefault(import('eslint-plugin-react')),
+    interopDefault(import('@eslint-react/eslint-plugin')),
     interopDefault(import('eslint-plugin-react-hooks')),
     interopDefault(import('eslint-plugin-react-refresh')),
+    interopDefault(import('@typescript-eslint/parser')),
   ] as const)
 
   const isAllowConstantExport = ReactRefreshAllowConstantExportPackages.some(
     i => isPackageExists(i),
   )
 
+  const plugins = pluginReact.configs.all.plugins
+
   return [
     {
       name: 'antfu/react/setup',
       plugins: {
-        'react': pluginReact,
+        'react': plugins['@eslint-react'],
+        'react-dom': plugins['@eslint-react/dom'],
         'react-hooks': pluginReactHooks,
+        'react-hooks-extra': plugins['@eslint-react/hooks-extra'],
+        'react-naming-convention': plugins['@eslint-react/naming-convention'],
         'react-refresh': pluginReactRefresh,
       },
-      settings: {
-        react: {
-          version: 'detect',
-        },
-      },
     },
     {
       files,
       languageOptions: {
+        parser: parserTs,
         parserOptions: {
           ecmaFeatures: {
             jsx: true,
           },
+          ...isTypeAware ? { project: tsconfigPath } : {},
         },
+        sourceType: 'module',
       },
       name: 'antfu/react/rules',
       rules: {
+        // recommended rules from @eslint-react/dom
+        'react-dom/no-children-in-void-dom-elements': 'warn',
+        'react-dom/no-dangerously-set-innerhtml': 'warn',
+        'react-dom/no-dangerously-set-innerhtml-with-children': 'error',
+        'react-dom/no-find-dom-node': 'error',
+        'react-dom/no-missing-button-type': 'warn',
+        'react-dom/no-missing-iframe-sandbox': 'warn',
+        'react-dom/no-namespace': 'error',
+        'react-dom/no-render-return-value': 'error',
+        'react-dom/no-script-url': 'warn',
+        'react-dom/no-unsafe-iframe-sandbox': 'warn',
+        'react-dom/no-unsafe-target-blank': 'warn',
+
         // recommended rules react-hooks
         'react-hooks/exhaustive-deps': 'warn',
         'react-hooks/rules-of-hooks': 'error',
@@ -72,34 +94,47 @@ export async function react(
           { allowConstantExport: isAllowConstantExport },
         ],
 
-        // recommended rules react
-        'react/display-name': 'error',
-        'react/jsx-key': 'error',
-        'react/jsx-no-comment-textnodes': 'error',
-        'react/jsx-no-duplicate-props': 'error',
-        'react/jsx-no-target-blank': 'error',
-        'react/jsx-no-undef': 'error',
-        'react/jsx-uses-react': 'error',
-        'react/jsx-uses-vars': 'error',
-        'react/no-children-prop': 'error',
-        'react/no-danger-with-children': 'error',
-        'react/no-deprecated': 'error',
+        // recommended rules from @eslint-react
+        'react/ensure-forward-ref-using-ref': 'warn',
+        'react/no-access-state-in-setstate': 'error',
+        'react/no-array-index-key': 'warn',
+        'react/no-children-count': 'warn',
+        'react/no-children-for-each': 'warn',
+        'react/no-children-map': 'warn',
+        'react/no-children-only': 'warn',
+        'react/no-children-prop': 'warn',
+        'react/no-children-to-array': 'warn',
+        'react/no-clone-element': 'warn',
+        'react/no-comment-textnodes': 'warn',
+        'react/no-component-will-mount': 'error',
+        'react/no-component-will-receive-props': 'error',
+        'react/no-component-will-update': 'error',
+        'react/no-create-ref': 'error',
         'react/no-direct-mutation-state': 'error',
-        'react/no-find-dom-node': 'error',
-        'react/no-is-mounted': 'error',
-        'react/no-render-return-value': 'error',
+        'react/no-duplicate-key': 'error',
+        'react/no-implicit-key': 'error',
+        'react/no-missing-key': 'error',
+        'react/no-nested-components': 'warn',
+        'react/no-redundant-should-component-update': 'error',
+        'react/no-set-state-in-component-did-mount': 'warn',
+        'react/no-set-state-in-component-did-update': 'warn',
+        'react/no-set-state-in-component-will-update': 'warn',
         'react/no-string-refs': 'error',
-        'react/no-unescaped-entities': 'error',
-        'react/no-unknown-property': 'error',
-        'react/no-unsafe': 'off',
-        'react/prop-types': 'error',
-        'react/react-in-jsx-scope': 'off',
-        'react/require-render-return': 'error',
+        'react/no-unsafe-component-will-mount': 'warn',
+        'react/no-unsafe-component-will-receive-props': 'warn',
+        'react/no-unsafe-component-will-update': 'warn',
+        'react/no-unstable-context-value': 'error',
+        'react/no-unstable-default-props': 'error',
+        'react/no-unused-class-component-members': 'warn',
+        'react/no-unused-state': 'warn',
+        'react/no-useless-fragment': 'warn',
+        'react/prefer-destructuring-assignment': 'warn',
+        'react/prefer-shorthand-boolean': 'warn',
+        'react/prefer-shorthand-fragment': 'warn',
 
-        ...typescript
+        ...isTypeAware
           ? {
-              'react/jsx-no-undef': 'off',
-              'react/prop-type': 'off',
+              'react/no-leaked-conditional-rendering': 'warn',
             }
           : {},
 

Diff for: src/configs/react.ts

@@ -52,6 +52,11 @@ const VuePackages = [
 ]
 
 export const defaultPluginRenaming = {
+  '@eslint-react': 'react',
+  '@eslint-react/dom': 'react-dom',
+  '@eslint-react/hooks-extra': 'react-hooks-extra',
+  '@eslint-react/naming-convention': 'react-naming-convention',
+
   '@stylistic': 'style',
   '@typescript-eslint': 'ts',
   'import-x': 'import',
@@ -168,7 +173,7 @@ export function antfu(
   if (enableReact) {
     configs.push(react({
       overrides: getOverrides(options, 'react'),
-      typescript: !!enableTypeScript,
+      tsconfigPath: getOverrides(options, 'typescript').tsconfigPath,
     }))
   }
 

Diff for: src/factory.ts

@@ -1,3 +1,2 @@
-declare module 'eslint-plugin-react'
 declare module 'eslint-plugin-react-hooks'
 declare module 'eslint-plugin-react-refresh'

Diff for: src/stub.d.ts

@@ -286,7 +286,7 @@ export interface OptionsConfig extends OptionsComponentExts {
    * Enable react rules.
    *
    * Requires installing:
-   * - `eslint-plugin-react`
+   * - `@eslint-react/eslint-plugin`
    * - `eslint-plugin-react-hooks`
    * - `eslint-plugin-react-refresh`
    *