Merge 2.0.0 into main, closes #335 (#1238)

Signed-off-by: REL1CX <dokimondex@gmail.com>
Signed-off-by: Kirill Korolyov <kirill.korolyov@gmail.com>
Signed-off-by: REL1CX <rel1cx@proton.me>
Signed-off-by: Karl Horky <karl.horky@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Kirill Korolyov <kirill.korolyov@gmail.com>
Co-authored-by: Karl Horky <karl.horky@gmail.com>

Author: 4 people

.gitignore

@@ -18,6 +18,7 @@ coverage/
 .eslintcache
 
 # misc
+/log
 .DS_Store
 *.pem
 
@@ -38,11 +39,9 @@ yarn-error.log*
 
 # vercel
 .vercel
-
 stats.html
 *.config-*.mjs
 /eslint-config.json
 *.bundled_*.mjs
 *.tgz
 eslint-results.sarif
-.tsup

.pkgs/configs/package.json

@@ -23,14 +23,14 @@
     "@stylistic/eslint-plugin": "^5.4.0",
     "eslint-plugin-de-morgan": "^1.3.1",
     "eslint-plugin-function": "^0.0.30",
-    "eslint-plugin-jsdoc": "^60.0.0",
+    "eslint-plugin-jsdoc": "^60.3.1",
     "eslint-plugin-perfectionist": "^4.15.0",
     "eslint-plugin-regexp": "^2.10.0",
     "eslint-plugin-unicorn": "^61.0.2",
-    "typescript-eslint": "^8.44.0"
+    "typescript-eslint": "^8.44.1"
   },
   "peerDependencies": {
     "eslint": "^9.36.0",
-    "typescript": "^4.9.5 || ^5.4.5"
+    "typescript": "^5.9.2"
   }
 }

.pkgs/eslint-plugin-local/package.json

@@ -28,12 +28,12 @@
     "@eslint-react/var": "workspace:*",
     "@eslint/js": "^9.36.0",
     "@stylistic/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/scope-manager": "^8.44.0",
-    "@typescript-eslint/type-utils": "^8.44.0",
-    "@typescript-eslint/types": "^8.44.0",
-    "@typescript-eslint/utils": "^8.44.0",
+    "@typescript-eslint/scope-manager": "^8.44.1",
+    "@typescript-eslint/type-utils": "^8.44.1",
+    "@typescript-eslint/types": "^8.44.1",
+    "@typescript-eslint/utils": "^8.44.1",
     "eslint-plugin-de-morgan": "^1.3.1",
-    "eslint-plugin-jsdoc": "^60.0.0",
+    "eslint-plugin-jsdoc": "^60.3.1",
     "eslint-plugin-perfectionist": "^4.15.0",
     "eslint-plugin-regexp": "^2.10.0",
     "eslint-plugin-unicorn": "^61.0.2",
@@ -44,11 +44,11 @@
     "@local/configs": "workspace:*",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
-    "tsdown": "^0.15.3"
+    "tsdown": "^0.15.4"
   },
   "peerDependencies": {
     "eslint": "^9.36.0",
-    "typescript": "^4.9.5 || ^5.4.5"
+    "typescript": "^5.9.2"
   },
   "engines": {
     "node": ">=20.19.0"

CHANGELOG.md

@@ -1,3 +1,118 @@
+## v2.0.0 (TBD)
+
+### 💥 Breaking Changes
+
+**Target Environment Updates: Now ESM and ESLint Flat Config Only**
+
+- Drop support for CommonJS (CJS) module format, packages are now distributed only as ECMAScript Modules (ESM)
+- Drop support for ESLint legacy config system, packages now support only ESLint Flat Config (`eslint.config.js`)
+- Drop support for Node.js 16 and 18, minimum required version is now Node.js 20
+- Drop support for ESLint 8, minimum required version is now ESLint 9.3.6
+- Drop support for TypeScript 4, minimum required version is now TypeScript 5.9.2
+
+**Removed Rules**
+
+| Rule                                                       | Replaced by                                                                                                        | Reason       |
+| :--------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | :----------- |
+| react-x/avoid-shorthand-boolean                            | [`react-x/jsx-shorthand-boolean`](/docs/rules/jsx-shorthand-boolean)                                               | consolidated |
+| react-x/avoid-shorthand-fragment                           | [`react-x/jsx-shorthand-fragment`](/docs/rules/jsx-shorthand-fragment)                                             | consolidated |
+| react-x/ensure-forward-ref-using-ref                       | [`react-x/no-useless-forward-ref`](/docs/rules/no-useless-forward-ref)                                             | renamed      |
+| react-x/jsx-no-duplicate-props                             | [`react-x/jsx-no-duplicate-props`](/docs/rules/jsx-no-duplicate-props)                                             | renamed      |
+| react-x/no-comment-textnodes                               | [`react-x/jsx-no-comment-textnodes`](/docs/rules/jsx-no-comment-textnodes)                                         | renamed      |
+| react-x/no-complicated-conditional-rendering               |                                                                                                                    | discontinued |
+| react-x/no-nested-components                               | [`react-x/no-nested-component-definitions`](/docs/rules/no-nested-component-definitions)                           | renamed      |
+| react-x/prefer-react-namespace-import                      | [`react-x/prefer-namespace-import`](/docs/rules/prefer-namespace-import)                                           | renamed      |
+| react-x/prefer-shorthand-boolean                           | [`react-x/jsx-shorthand-boolean`](/docs/rules/jsx-shorthand-boolean)                                               | consolidated |
+| react-x/prefer-shorthand-fragment                          | [`react-x/jsx-shorthand-fragment`](/docs/rules/jsx-shorthand-fragment)                                             | consolidated |
+| react-x/use-jsx-vars                                       | [`react-x/jsx-uses-vars`](/docs/rules/jsx-uses-vars)                                                               | renamed      |
+| react-dom/no-children-in-void-dom-elements                 | [`react-dom/no-void-elements-with-children`](/docs/rules/dom-no-void-elements-with-children)                       | renamed      |
+| react-hooks-extra/no-direct-set-state-in-use-layout-effect | [`react-hooks-extra/no-direct-set-state-in-use-effect`](/docs/rules/hooks-extra-no-direct-set-state-in-use-effect) | consolidated |
+| react-hooks-extra/no-unnecessary-use-callback              | [`react-x/no-unnecessary-use-callback`](/docs/rules/no-unnecessary-use-callback)                                   | relocated    |
+| react-hooks-extra/no-unnecessary-use-memo                  | [`react-x/no-unnecessary-use-memo`](/docs/rules/no-unnecessary-use-memo)                                           | relocated    |
+| react-hooks-extra/no-unnecessary-use-prefix                | [`react-x/no-unnecessary-use-prefix`](/docs/rules/no-unnecessary-use-prefix)                                       | relocated    |
+| react-hooks-extra/prefer-use-state-lazy-initialization     | [`react-x/prefer-use-state-lazy-initialization`](/docs/rules/prefer-use-state-lazy-initialization)                 | relocated    |
+
+**Removed Presets**
+
+| Preset                            | Replaced by   | Reason       |
+| :-------------------------------- | :------------ | :----------- |
+| `core`                            | `x`           | renamed      |
+| `core-legacy`                     |               | discontinued |
+| `off-dom`                         | `disable-dom` | renamed      |
+| `off-dom-legacy`                  |               | discontinued |
+| `x-legacy`                        |               | discontinued |
+| `dom-legacy`                      |               | discontinued |
+| `web-api-legacy`                  |               | discontinued |
+| `recommended-legacy`              |               | discontinued |
+| `recommended-typescript-legacy`   |               | discontinued |
+| `recommended-type-checked-legacy` |               | discontinued |
+
+**Removed Settings**
+
+| Setting                | Replaced by | Reason       |
+| :--------------------- | :---------- | :----------- |
+| `additionalComponents` |             | discontinued |
+| `additionalHooks`      |             | discontinued |
+| `skipImportCheck`      |             | discontinued |
+
+The rule implementations have been refactored to improve performance and maintainability.
+
+### ✨ New
+
+**Added the following new rules:**
+
+- `react-x/jsx-shorthand-boolean`: Enforces a consistent style for boolean attributes
+- `react-x/jsx-shorthand-fragment`: Enforces a consistent style for React Fragments
+- `react-x/no-forbidden-props`: Disallows specific props on components
+- `react-x/no-unnecessary-key`: Reports unnecessary `key` props on elements
+- `react-x/no-unused-props`: Reports unused props in components
+- `react-dom/no-string-style-prop`: Disallows string values for the `style` prop
+- `react-dom/prefer-namespace-import`: Enforces using a namespace import for `react-dom`
+
+**Added the following new rule to the `recommended-type-checked` preset:**
+
+- `react-x/no-unused-props`: Reports unused props in components
+
+**The following rules now support Codemod features:**
+
+- `react-x/no-component-did-update`
+- `react-x/no-component-will-receive-props`
+- `react-x/no-component-will-update`
+- `react-x/no-context-provider`
+- `react-x/no-forward-ref`
+- `react-x/no-string-refs`
+
+**The following rules now support auto-fix:**
+
+- `react-x/prefer-namespace-import`
+- `react-dom/prefer-namespace-import`
+
+**The following rules now support suggestion fixes:**
+
+- `react-dom/no-missing-button-type`
+- `react-dom/no-missing-iframe-sandbox`
+- `react-dom/no-unsafe-target-blank`
+
+**New configuration preset added:**
+
+- `disable-conflict-eslint-plugin-react`: Disable rules in `eslint-plugin-react` that conflict with rules in our plugins
+
+### 🐞 Fixes
+
+- fix(react-x/no-unnecessary-use-prefix): fix false positive of React Hooks defined within the callback function of `vi.mock(...)` in Vitest test files
+- fix(react-web-api/no-leaked-event-listener): fix `useEffect` setup function check to handle `React.useEffect()` calls correctly
+- fix(react-naming-convention/filename): fix false positive on well-known filenames like `404.tsx`, `_app.tsx`, `[slug].tsx`
+
+### 🪄 Improvements
+
+- refactor: simplify React APIs detection logic
+- refactor: cleanup utilities and simplify rule implementations
+- docs: add comparison table between `eslint-plugin-react` and `eslint-react` rules
+- docs: replace `tseslint.config` with `defineConfig` in all examples
+- build: migrate build system from `tsup` to `tsdown` for better performance
+
+**Full Changelog**: https://github.com/Rel1cx/eslint-react/compare/v1.53.1...v2.0.0
+
 ## v1.53.1 (2025-09-11)
 
 ### 🐞 Fixes

README.md

@@ -22,17 +22,18 @@
   - [TypeScript Specialized](#typescript-specialized)
   - [Other](#other)
 - [Rules](#rules)
+- [Benchmark](#benchmark)
 - [FAQ](#faq)
 - [Roadmap](#roadmap)
 - [Contributing](#contributing)
 - [License](#license)
 
 ## Features
 
-- **Modern**: First-class support for TypeScript, React 19, and more.
-- **Flexible**: Fully customizable rule severity levels, allowing you to enforce or relax rules as needed.
-- **Performant**: Built with performance in mind, optimized for large codebases, **4-7x faster** than other ESLint plugins.
-- **Context-aware Linting**: Rules that understand the context of your code and project configuration to provide more accurate linting.
+- **Modern**: First-class support for **TypeScript**, **React 19**, and more.
+- **Flexible**: Fully customizable rule severity levels, allowing you to **enforce** or **relax** rules as needed.
+- **Performant**: Built with performance in mind, optimized for large codebases, [**4-7x faster**](https://github.com/Rel1cx/eslint-react-benchmark) than other ESLint plugins.
+- **Context-aware Linting**: Rules that understand the context of your code and [project configuration](https://eslint-react.xyz/docs/configuration/configure-project-config) to provide more **accurate** linting.
 
 ## Public Packages
 
@@ -53,8 +54,8 @@
 > [!NOTE]\
 > ESLint React requires the following minimum versions:
 >
-> - Node.js: 18.18.0
-> - ESLint: 8.57.0
+> - Node.js: 20.19.0
+> - ESLint: 9.24.0
 > - TypeScript: 4.9.5
 
 ### Install
@@ -68,46 +69,46 @@ npm install --save-dev typescript-eslint @eslint-react/eslint-plugin
 ```js
 // eslint.config.js
 
-// @ts-check
 import eslintReact from "@eslint-react/eslint-plugin";
 import eslintJs from "@eslint/js";
+import { defineConfig } from "eslint/config";
 import tseslint from "typescript-eslint";
 
-export default tseslint.config({
-  files: ["**/*.ts", "**/*.tsx"],
-
-  // Extend recommended rule sets from:
-  // 1. ESLint JS's recommended rules
-  // 2. TypeScript ESLint recommended rules
-  // 3. ESLint React's recommended-typescript rules
-  extends: [
-    eslintJs.configs.recommended,
-    tseslint.configs.recommended,
-    eslintReact.configs["recommended-typescript"],
-  ],
-
-  // Configure language/parsing options
-  languageOptions: {
-    // Use TypeScript ESLint parser for TypeScript files
-    parser: tseslint.parser,
-    parserOptions: {
-      // Enable project service for better TypeScript integration
-      projectService: true,
-      tsconfigRootDir: import.meta.dirname,
+export default defineConfig([
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+
+    // Extend recommended rule sets from:
+    // 1. ESLint JS's recommended rules
+    // 2. TypeScript ESLint recommended rules
+    // 3. ESLint React's recommended-typescript rules
+    extends: [
+      eslintJs.configs.recommended,
+      tseslint.configs.recommended,
+      eslintReact.configs["recommended-typescript"],
+    ],
+
+    // Configure language/parsing options
+    languageOptions: {
+      // Use TypeScript ESLint parser for TypeScript files
+      parser: tseslint.parser,
+      parserOptions: {
+        // Enable project service for better TypeScript integration
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
-  },
 
-  // Custom rule overrides (modify rule levels or disable rules)
-  rules: {
-    "@eslint-react/no-missing-key": "warn",
+    // Custom rule overrides (modify rule levels or disable rules)
+    rules: {
+      "@eslint-react/no-missing-key": "warn",
+    },
   },
-});
+]);
 ```
 
 [Full Installation Guide ↗](https://eslint-react.xyz/docs/getting-started/typescript)
 
-</details>
-
 ## Presets
 
 ### Bare Bones
@@ -141,6 +142,8 @@ export default tseslint.config({
   Disable rules in the `web-api` preset.
 - `disable-type-checked`\
   Disable rules that require type information.
+- `disable-conflict-eslint-plugin-react`\
+  Disable rules in `eslint-plugin-react` that conflict with rules in our plugins.
 - `off`\
   Disable all rules in this plugin except for debug rules.
 
@@ -150,6 +153,10 @@ export default tseslint.config({
 
 [Rules Overview ↗](https://eslint-react.xyz/docs/rules/overview)
 
+## Benchmark
+
+[Benchmark Results ↗](https://github.com/Rel1cx/eslint-react-benchmark)
+
 ## FAQ
 
 [Frequently Asked Questions ↗](https://eslint-react.xyz/docs/faq)
@@ -162,7 +169,7 @@ export default tseslint.config({
 
 Contributions are welcome!
 
-Please follow our [contributing guidelines](./.github/CONTRIBUTING.md).
+Please follow our [contributing guidelines](.github/CONTRIBUTING.md).
 
 ## License
 

VERSION

@@ -1 +1 @@
-1.53.2-beta.1
+2.0.0-beta.194

apps/website/app/base.css renamed to apps/website/app/app.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @import "tailwindcss-animated";
-@import "./theme.css";
+@import "./theme/theme.css";
 @import "fumadocs-ui/css/preset.css";
 @import "fumadocs-twoslash/twoslash.css";
 

apps/website/app/overrides.css renamed to apps/website/app/app.override.css

@@ -15,25 +15,3 @@ export default function Layout({ children }: { children: ReactNode }) {
     </DocsLayout>
   );
 }
-
-// Notebook layout
-// import type { ReactNode } from "react";
-// import { baseOptions } from "#/app/layout.config";
-// import { source } from "#/lib/source";
-// import { DocsLayout } from "fumadocs-ui/layouts/notebook";
-
-// export default function Layout({ children }: { children: ReactNode }) {
-//   return (
-//     <DocsLayout
-//       {...baseOptions}
-//       links={baseOptions.links?.slice(1, -1) ?? []}
-//       // the position of navbar
-//       nav={{ ...baseOptions.nav, mode: "top" }}
-//       // the position of Sidebar Tabs
-//       tabMode="navbar"
-//       tree={source.pageTree}
-//     >
-//       {children}
-//     </DocsLayout>
-//   );
-// }

apps/website/app/docs/layout.tsx

@@ -5,8 +5,8 @@ import type { ReactNode } from "react";
 
 import { ViewTransitions } from "next-view-transitions";
 
-import "./base.css";
-import "./overrides.css";
+import "#/app/app.css";
+import "#/app/app.override.css";
 
 const themeOptions = {
   enabled: true,