From 0be374c499f8211f596871567cf4ecbe4c622aa4 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Mon, 16 Dec 2024 20:24:28 +0000 Subject: [PATCH 1/3] feat: add eslint-plugin-react-compiler (no non-beta v19 version yet) --- package-lock.json | 74 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 75 insertions(+) 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": { From 5fd62a683d965823f0ca9bed7e1e935afb0176cc Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Mon, 16 Dec 2024 20:30:13 +0000 Subject: [PATCH 2/3] feat: add react-compiler/react-compiler to ESLint config with ref false positive disable BREAKING CHANGE: This ESLint plugin will raise new errors in repos, and so we need to cut it as a major --- index.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) 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. From df6e3722b5537194004c89fcfb29af59a723ee58 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Mon, 16 Dec 2024 20:40:54 +0000 Subject: [PATCH 3/3] docs: add v13 breaking changes docs for eslint-plugin-react-compiler --- docs/breaking-changes/v13.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 docs/breaking-changes/v13.md 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.