From 98bee5acd81f141d662a4e8496dde2a2146df08f Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Tue, 22 Oct 2024 16:23:32 +0300 Subject: [PATCH 01/11] Add eslint-plugin-react-compiler beta as a dependency --- package-lock.json | 65 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 66 insertions(+) diff --git a/package-lock.json b/package-lock.json index 52797a4cbe4625..036acafe885fa6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -91,6 +91,7 @@ "eslint-plugin-jest": "27.2.3", "eslint-plugin-jest-dom": "5.0.2", "eslint-plugin-prettier": "5.0.0", + "eslint-plugin-react-compiler": "19.0.0-beta-8a03594-20241020", "eslint-plugin-ssr-friendly": "1.0.6", "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "6.0.2", @@ -2478,6 +2479,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.", + "dev": true, + "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", @@ -25346,6 +25364,41 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, + "node_modules/eslint-plugin-react-compiler": { + "version": "19.0.0-beta-8a03594-20241020", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.0.0-beta-8a03594-20241020.tgz", + "integrity": "sha512-bYg1COih1s3r14IV/AKdQs/SN7CQmNI0ZaMtPdgZ6gp1S1Q/KGP9P43w7R6dHJ4wYpuMBvekNJHQdVu+x6UM+A==", + "dev": true, + "dependencies": { + "@babel/core": "^7.24.4", + "@babel/parser": "^7.24.4", + "@babel/plugin-proposal-private-methods": "^7.18.6", + "hermes-parser": "^0.20.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-compiler/node_modules/hermes-estree": { + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz", + "integrity": "sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==", + "dev": true + }, + "node_modules/eslint-plugin-react-compiler/node_modules/hermes-parser": { + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.20.1.tgz", + "integrity": "sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==", + "dev": true, + "dependencies": { + "hermes-estree": "0.20.1" + } + }, "node_modules/eslint-plugin-react-hooks": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz", @@ -51821,6 +51874,18 @@ "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==", + "dev": true, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "zod": "^3.18.0" + } + }, "packages/a11y": { "name": "@wordpress/a11y", "version": "4.12.0", diff --git a/package.json b/package.json index f987643e737563..751bde40240811 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "eslint-plugin-jest": "27.2.3", "eslint-plugin-jest-dom": "5.0.2", "eslint-plugin-prettier": "5.0.0", + "eslint-plugin-react-compiler": "19.0.0-beta-8a03594-20241020", "eslint-plugin-ssr-friendly": "1.0.6", "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "6.0.2", From 90db587e51838a87f999a882ead0359955f4dcc7 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Mon, 20 May 2024 15:07:01 +0300 Subject: [PATCH 02/11] Enable eslint-plugin-react-compiler rule --- packages/eslint-plugin/configs/react.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js index 04e4341c720be2..e8a96147036f56 100644 --- a/packages/eslint-plugin/configs/react.js +++ b/packages/eslint-plugin/configs/react.js @@ -10,7 +10,12 @@ module.exports = { version: 'detect', }, }, - plugins: [ '@wordpress', 'react', 'react-hooks' ], + plugins: [ + '@wordpress', + 'eslint-plugin-react-compiler', + 'react', + 'react-hooks', + ], rules: { '@wordpress/no-unused-vars-before-return': [ 'error', @@ -34,6 +39,7 @@ module.exports = { 'react/no-children-prop': 'off', 'react/prop-types': 'off', 'react/react-in-jsx-scope': 'off', + 'react-compiler/react-compiler': 'error', 'react-hooks/exhaustive-deps': [ 'warn', { From 5aaafe1b96c2334eb8734bb9c2a0ac8b09cbf7ef Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Mon, 20 May 2024 15:07:33 +0300 Subject: [PATCH 03/11] Top-level await breaks eslint-plugin-react-compiler --- .eslintrc.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index dfe779b4683523..0c16828a1b1c24 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -554,5 +554,14 @@ module.exports = { 'react/react-in-jsx-scope': 'error', }, }, + { + files: [ + 'packages/dependency-extraction-webpack-plugin/test/**', + 'packages/interactivity-router/src/index.js', + ], + rules: { + 'react-compiler/react-compiler': 'off', + }, + }, ], }; From 5015f75d2fc5fdd9006e29e8f9c994097d0fe3af Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Tue, 21 May 2024 13:40:49 +0300 Subject: [PATCH 04/11] Disable all dev files --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 0c16828a1b1c24..9b3d717697d5da 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -556,8 +556,8 @@ module.exports = { }, { files: [ - 'packages/dependency-extraction-webpack-plugin/test/**', 'packages/interactivity-router/src/index.js', + ...developmentFiles, ], rules: { 'react-compiler/react-compiler': 'off', From aad0597a6ec3ee810b086fae83227ce3e6060bd5 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Tue, 21 May 2024 13:56:13 +0300 Subject: [PATCH 05/11] Separate interactivity packages --- .eslintrc.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9b3d717697d5da..4e9d2c9d02c6e1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -551,14 +551,12 @@ module.exports = { { files: [ 'packages/interactivity*/src/**' ], rules: { + 'react-compiler/react-compiler': 'off', 'react/react-in-jsx-scope': 'error', }, }, { - files: [ - 'packages/interactivity-router/src/index.js', - ...developmentFiles, - ], + files: [ ...developmentFiles ], rules: { 'react-compiler/react-compiler': 'off', }, From 6e58ce37900cae3bf29c4e503d0c0d5e0924377b Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:28:44 +0300 Subject: [PATCH 06/11] Use shorter ESLint plugin name Co-authored-by: Pascal Birchler --- packages/eslint-plugin/configs/react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js index e8a96147036f56..a9fbcb36b2560d 100644 --- a/packages/eslint-plugin/configs/react.js +++ b/packages/eslint-plugin/configs/react.js @@ -12,7 +12,7 @@ module.exports = { }, plugins: [ '@wordpress', - 'eslint-plugin-react-compiler', + 'react-compiler', 'react', 'react-hooks', ], From 5bc01bf01fb20d1a50c68c3551e08fa45ce33dbc Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Tue, 20 Aug 2024 17:10:15 +0300 Subject: [PATCH 07/11] Reformat --- packages/eslint-plugin/configs/react.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js index a9fbcb36b2560d..07c52686130d73 100644 --- a/packages/eslint-plugin/configs/react.js +++ b/packages/eslint-plugin/configs/react.js @@ -10,12 +10,7 @@ module.exports = { version: 'detect', }, }, - plugins: [ - '@wordpress', - 'react-compiler', - 'react', - 'react-hooks', - ], + plugins: [ '@wordpress', 'react-compiler', 'react', 'react-hooks' ], rules: { '@wordpress/no-unused-vars-before-return': [ 'error', From 6bfdee7fc59974c16af6cee8575488efe0aa516a Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Wed, 21 Aug 2024 18:07:40 +0300 Subject: [PATCH 08/11] Disable react-compiler for native files --- .eslintrc.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4e9d2c9d02c6e1..4fd16d23830e92 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -236,6 +236,7 @@ module.exports = { 'import/no-unresolved': 'off', 'import/named': 'off', '@wordpress/data-no-store-string-literals': 'off', + 'react-compiler/react-compiler': 'off', }, }, { @@ -555,11 +556,5 @@ module.exports = { 'react/react-in-jsx-scope': 'error', }, }, - { - files: [ ...developmentFiles ], - rules: { - 'react-compiler/react-compiler': 'off', - }, - }, ], }; From 26b60ea7fa1d85542e1d1f726c790aebe1caf1d8 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Wed, 21 Aug 2024 18:39:14 +0300 Subject: [PATCH 09/11] Enable enableTreatRefLikeIdentifiersAsRefs babel env setting --- packages/eslint-plugin/configs/react.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js index 07c52686130d73..9910c9307bd37a 100644 --- a/packages/eslint-plugin/configs/react.js +++ b/packages/eslint-plugin/configs/react.js @@ -34,7 +34,14 @@ module.exports = { 'react/no-children-prop': 'off', 'react/prop-types': 'off', 'react/react-in-jsx-scope': 'off', - 'react-compiler/react-compiler': 'error', + 'react-compiler/react-compiler': [ + 'error', + { + environment: { + enableTreatRefLikeIdentifiersAsRefs: true, + }, + }, + ], 'react-hooks/exhaustive-deps': [ 'warn', { From eaa84d70ca4f315ac7d193f7d3c619437c3387f4 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Mon, 7 Oct 2024 19:25:44 +0300 Subject: [PATCH 10/11] Disable validateRefAccessDuringRender --- packages/eslint-plugin/configs/react.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js index 9910c9307bd37a..4a10d882a7ec73 100644 --- a/packages/eslint-plugin/configs/react.js +++ b/packages/eslint-plugin/configs/react.js @@ -39,6 +39,7 @@ module.exports = { { environment: { enableTreatRefLikeIdentifiersAsRefs: true, + validateRefAccessDuringRender: false, }, }, ], From 3bfdcd2f7e07260b7106e011bd722fb14089465d Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Mon, 18 Nov 2024 19:14:05 +0200 Subject: [PATCH 11/11] Move ESLint config outside of the eslint-plugin package --- .eslintrc.js | 10 ++++++++++ packages/eslint-plugin/configs/react.js | 11 +---------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4fd16d23830e92..d0c22090b93e87 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -156,6 +156,7 @@ module.exports = { 'plugin:eslint-comments/recommended', 'plugin:storybook/recommended', ], + plugins: [ 'react-compiler' ], globals: { wp: 'off', globalThis: 'readonly', @@ -222,6 +223,15 @@ module.exports = { definedTags: [ 'jest-environment' ], }, ], + 'react-compiler/react-compiler': [ + 'error', + { + environment: { + enableTreatRefLikeIdentifiersAsRefs: true, + validateRefAccessDuringRender: false, + }, + }, + ], }, overrides: [ { diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js index 4a10d882a7ec73..04e4341c720be2 100644 --- a/packages/eslint-plugin/configs/react.js +++ b/packages/eslint-plugin/configs/react.js @@ -10,7 +10,7 @@ module.exports = { version: 'detect', }, }, - plugins: [ '@wordpress', 'react-compiler', 'react', 'react-hooks' ], + plugins: [ '@wordpress', 'react', 'react-hooks' ], rules: { '@wordpress/no-unused-vars-before-return': [ 'error', @@ -34,15 +34,6 @@ module.exports = { 'react/no-children-prop': 'off', 'react/prop-types': 'off', 'react/react-in-jsx-scope': 'off', - 'react-compiler/react-compiler': [ - 'error', - { - environment: { - enableTreatRefLikeIdentifiersAsRefs: true, - validateRefAccessDuringRender: false, - }, - }, - ], 'react-hooks/exhaustive-deps': [ 'warn', {