diff --git a/docs/breaking-changes/v13.md b/docs/breaking-changes/v13.md new file mode 100644 index 0000000..3119937 --- /dev/null +++ b/docs/breaking-changes/v13.md @@ -0,0 +1,3 @@ +# Breaking changes in v13 + +We are adding `eslint-plugin-react-compiler` to our React configuration. While there is much more work needed to support React Compiler in production, adding the ESLint rule in advance of the actual compiler (which is recommended by the React team: https://react.dev/learn/react-compiler#installing-eslint-plugin-react-compiler) will help us resolve (or suppress) violations as they come up. This addition requires a major version upgrade since it will raise errors in every repo. diff --git a/index.js b/index.js index 60428ab..c879979 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,6 @@ module.exports = { root: true, - plugins: ["react", "react-hooks", "jsx-a11y"], + plugins: ["react", "react-hooks", "jsx-a11y", "eslint-plugin-react-compiler"], env: { browser: true, }, @@ -53,6 +53,20 @@ module.exports = { "react/state-in-constructor": "off", // This allows static properties to be placed within the class declaration "react/static-property-placement": "off", + /** ESLint plugin for the React Compiler, to enforce rules that make adopting it easier/more effective */ + "react-compiler/react-compiler": [ + "error", + { + environment: { + /** + * At the time of writing, `eslint-plugin-react-compiler` errors on ref usages in render paths. This rule is noisy, + * since it currently reports false positives. We can remove this in the future when the rule is more accurate. + * {@link https://github.com/facebook/react/pull/30843 PR that disables this rule in the default config} + */ + validateRefAccessDuringRender: false, + }, + }, + ], /* * Rules that significantly impact performance time of eslint, and are not * necessarily relevant for react applications. diff --git a/package-lock.json b/package-lock.json index f2b64d2..b239eb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@open-turo/eslint-config-typescript": "14.0.1", "eslint-plugin-jsx-a11y": "6.10.2", "eslint-plugin-react": "7.37.2", + "eslint-plugin-react-compiler": "19.0.0-beta-201e55d-20241215", "eslint-plugin-react-hooks": "5.1.0" }, "devDependencies": { @@ -538,6 +539,23 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-private-methods": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz", + "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.", + "license": "MIT", + "dependencies": { + "@babel/helper-create-class-features-plugin": "^7.18.6", + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-private-property-in-object": { "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", @@ -3948,6 +3966,26 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7" } }, + "node_modules/eslint-plugin-react-compiler": { + "version": "19.0.0-beta-201e55d-20241215", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.0.0-beta-201e55d-20241215.tgz", + "integrity": "sha512-KTOMW6Z4Eg2r5BPT/BncbwPswfuVH9KPPDVszOTQFXGNlxhExL8IZoSE3blYxk4e0wFDbCcAwe4UlTauQ8lIww==", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.24.4", + "@babel/parser": "^7.24.4", + "@babel/plugin-proposal-private-methods": "^7.18.6", + "hermes-parser": "^0.25.1", + "zod": "^3.22.4", + "zod-validation-error": "^3.0.3" + }, + "engines": { + "node": "^14.17.0 || ^16.0.0 || >= 18.0.0" + }, + "peerDependencies": { + "eslint": ">=7" + } + }, "node_modules/eslint-plugin-react-hooks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz", @@ -4689,6 +4727,21 @@ "node": ">= 0.4" } }, + "node_modules/hermes-estree": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz", + "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==", + "license": "MIT" + }, + "node_modules/hermes-parser": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz", + "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==", + "license": "MIT", + "dependencies": { + "hermes-estree": "0.25.1" + } + }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", @@ -7012,6 +7065,27 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "3.24.1", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz", + "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, + "node_modules/zod-validation-error": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.4.0.tgz", + "integrity": "sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ==", + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "zod": "^3.18.0" + } } } } diff --git a/package.json b/package.json index c5cc8f6..b205afc 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "@open-turo/eslint-config-typescript": "14.0.1", "eslint-plugin-jsx-a11y": "6.10.2", "eslint-plugin-react": "7.37.2", + "eslint-plugin-react-compiler": "19.0.0-beta-201e55d-20241215", "eslint-plugin-react-hooks": "5.1.0" }, "devDependencies": {