From 24b9ce43f7297530c6eda79cf6cf3fd4999a1040 Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 9 Dec 2018 17:15:20 +0100 Subject: [PATCH 01/13] Add Babel plug-in for Hooks; Add ESLint plug-in for Hooks (WIP) --- packages/babel-preset-react-app/create.js | 5 +++++ packages/eslint-config-react-app/README.md | 2 +- packages/eslint-config-react-app/index.js | 5 ++++- packages/eslint-config-react-app/package.json | 3 ++- 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 04b2b32a5c7..dac3644d8de 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -117,6 +117,11 @@ module.exports = function(api, opts, env) { // in practice some other transforms (such as object-rest-spread) // don't work without it: https://github.com/babel/babel/issues/7215 require('@babel/plugin-transform-destructuring').default, + { + // Use loose mode for performance: + // https://github.com/facebook/create-react-app/issues/5602 + loose: true, + }, // Turn on legacy decorators for TypeScript files isTypeScriptEnabled && [ require('@babel/plugin-proposal-decorators').default, diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index fd942bdaf74..429e1878d87 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -19,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create First, install this package, ESLint and the necessary plugins. ```sh -npm install --save-dev eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x +npm install --save-dev eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@0.x ``` Then create a file named `.eslintrc` with following contents in the root folder of your project: diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index ca232b879ec..89573eb02d6 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -28,7 +28,7 @@ module.exports = { parser: 'babel-eslint', - plugins: ['import', 'flowtype', 'jsx-a11y', 'react'], + plugins: ['import', 'flowtype', 'jsx-a11y', 'react', 'react-hooks'], env: { browser: true, @@ -234,6 +234,9 @@ module.exports = { 'jsx-a11y/role-supports-aria-props': 'warn', 'jsx-a11y/scope': 'warn', + // https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks + 'react-hooks/rules-of-hooks': 'error', + // https://github.com/gajus/eslint-plugin-flowtype 'flowtype/define-flow-type': 'warn', 'flowtype/require-valid-file-annotation': 'warn', diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index b8d406cb584..fe36aa4c91c 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -16,7 +16,8 @@ "eslint-plugin-flowtype": "2.x", "eslint-plugin-import": "2.x", "eslint-plugin-jsx-a11y": "6.x", - "eslint-plugin-react": "7.x" + "eslint-plugin-react": "7.x", + "eslint-plugin-react-hooks": "0.x" }, "dependencies": { "confusing-browser-globals": "^1.0.5" From d618e2c45b07c9de6dde1ba7e4bee38f03e2622a Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 9 Dec 2018 18:40:44 +0100 Subject: [PATCH 02/13] Fix transform destructuring loose config --- packages/babel-preset-react-app/create.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index dac3644d8de..439a3058404 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -116,12 +116,14 @@ module.exports = function(api, opts, env) { // Necessary to include regardless of the environment because // in practice some other transforms (such as object-rest-spread) // don't work without it: https://github.com/babel/babel/issues/7215 - require('@babel/plugin-transform-destructuring').default, - { - // Use loose mode for performance: - // https://github.com/facebook/create-react-app/issues/5602 - loose: true, - }, + [ + require('@babel/plugin-transform-destructuring').default, + { + // Use loose mode for performance: + // https://github.com/facebook/create-react-app/issues/5602 + loose: true, + }, + ], // Turn on legacy decorators for TypeScript files isTypeScriptEnabled && [ require('@babel/plugin-proposal-decorators').default, From a4f7584cf58dd9c2a0041596da909741aa5b621f Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 9 Dec 2018 18:48:20 +0100 Subject: [PATCH 03/13] Add eslint-plugin-react-hooks to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 045e9655b43..a35be817977 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ }, "devDependencies": { "eslint": "5.6.0", + "eslint-plugin-react-hooks": "0.0.0", "execa": "1.0.0", "fs-extra": "^7.0.0", "get-port": "^4.0.0", From 5028d85ced2c263b43f72a3419b17a89186888b8 Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 9 Dec 2018 21:54:11 +0100 Subject: [PATCH 04/13] Fix package.json's --- package.json | 1 - packages/eslint-config-react-app/package.json | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a35be817977..045e9655b43 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ }, "devDependencies": { "eslint": "5.6.0", - "eslint-plugin-react-hooks": "0.0.0", "execa": "1.0.0", "fs-extra": "^7.0.0", "get-port": "^4.0.0", diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index fe36aa4c91c..d15be188d29 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -21,5 +21,8 @@ }, "dependencies": { "confusing-browser-globals": "^1.0.5" + }, + "devDependencies": { + "eslint-plugin-react-hooks": "0.0.0" } } From bd1dca022704c91a79e76c1491136dd493a29f5d Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 9 Dec 2018 22:15:49 +0100 Subject: [PATCH 05/13] Fix eslint-plugin-react-hooks version --- packages/eslint-config-react-app/package.json | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index d15be188d29..c4c25a761c7 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -17,12 +17,9 @@ "eslint-plugin-import": "2.x", "eslint-plugin-jsx-a11y": "6.x", "eslint-plugin-react": "7.x", - "eslint-plugin-react-hooks": "0.x" + "eslint-plugin-react-hooks": "next" }, "dependencies": { - "confusing-browser-globals": "^1.0.5" - }, - "devDependencies": { - "eslint-plugin-react-hooks": "0.0.0" + "confusing-browser-globals": "^1.0.5", } } From 02aef13cfc88f33c6f636aa0b7ca4f2150a55578 Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 9 Dec 2018 22:19:12 +0100 Subject: [PATCH 06/13] Fix package.json --- packages/eslint-config-react-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index c4c25a761c7..e8840253623 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -20,6 +20,6 @@ "eslint-plugin-react-hooks": "next" }, "dependencies": { - "confusing-browser-globals": "^1.0.5", + "confusing-browser-globals": "^1.0.5" } } From 093ed5bc423d00f3307c4bee60bc219d510832fc Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 9 Dec 2018 22:30:31 +0100 Subject: [PATCH 07/13] Fix package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 045e9655b43..9370f0bb203 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ }, "devDependencies": { "eslint": "5.6.0", + "eslint-plugin-react-hooks": "next", "execa": "1.0.0", "fs-extra": "^7.0.0", "get-port": "^4.0.0", From b13b406a4a7a824a605fc971dd43a4d9e1f3653b Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 9 Dec 2018 22:47:59 +0100 Subject: [PATCH 08/13] Add eslint-plugin-react-hooks to script package.json --- package.json | 1 - packages/react-scripts/package.json | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9370f0bb203..045e9655b43 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ }, "devDependencies": { "eslint": "5.6.0", - "eslint-plugin-react-hooks": "next", "execa": "1.0.0", "fs-extra": "^7.0.0", "get-port": "^4.0.0", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 05d784169f5..d2c2db25d92 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -45,6 +45,7 @@ "eslint-plugin-import": "2.14.0", "eslint-plugin-jsx-a11y": "6.1.2", "eslint-plugin-react": "7.11.1", + "eslint-plugin-react-hooks": "next", "file-loader": "2.0.0", "fork-ts-checker-webpack-plugin-alt": "0.4.14", "fs-extra": "7.0.0", From 8dc1de4913e30db1cfe569176ab645a8d3a7e5b5 Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Sun, 17 Feb 2019 21:50:44 +0100 Subject: [PATCH 09/13] Force array destructuring to work in loose mode only for known Hooks --- packages/babel-preset-react-app/create.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 439a3058404..dfff10d5223 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -122,6 +122,18 @@ module.exports = function(api, opts, env) { // Use loose mode for performance: // https://github.com/facebook/create-react-app/issues/5602 loose: true, + selectiveLoose: [ + 'useState', + 'useEffect', + 'useContext', + 'useReducer', + 'useCallback', + 'useMemo', + 'useRef', + 'useImperativeHandle', + 'useLayoutEffect', + 'useDebugValue', + ], }, ], // Turn on legacy decorators for TypeScript files From 36e33e51fa11ef0c4a871321aeb8c83e9fe42f0b Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Tue, 19 Feb 2019 15:56:27 +0100 Subject: [PATCH 10/13] Update based on feedback from PR --- packages/babel-preset-react-app/create.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index f7223813901..d6019b5abc3 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -131,7 +131,7 @@ module.exports = function(api, opts, env) { { // Use loose mode for performance: // https://github.com/facebook/create-react-app/issues/5602 - loose: true, + loose: false, selectiveLoose: [ 'useState', 'useEffect', From 32656d6de1f8d42b47cded09b233b3ed71b99492 Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Thu, 28 Feb 2019 20:13:22 +0100 Subject: [PATCH 11/13] Add 'exhaustive-deps' lint rule --- packages/eslint-config-react-app/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index bc6849cf13a..f69e53aacd1 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -161,6 +161,7 @@ module.exports = { ], 'no-with': 'warn', 'no-whitespace-before-property': 'warn', + 'react-hooks/exhaustive-deps': 'warn', 'require-yield': 'warn', 'rest-spread-spacing': ['warn', 'never'], strict: ['warn', 'never'], From aacc07f73e03bf262af935855f533a87349ee181 Mon Sep 17 00:00:00 2001 From: Eivind Arvesen Date: Thu, 7 Mar 2019 21:41:52 +0100 Subject: [PATCH 12/13] Bump eslint-plugin-react-hooks to stable version --- packages/eslint-config-react-app/README.md | 2 +- packages/eslint-config-react-app/package.json | 2 +- packages/react-scripts/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index 9ac57128f2f..7cf509d98d9 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -19,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create First, install this package, ESLint and the necessary plugins. ```sh -npm install --save-dev eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@0.x +npm install --save-dev eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@1.5.0 ``` Then create a file named `.eslintrc.json` with following contents in the root folder of your project: diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index d2d80d0d877..b987331d641 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -17,7 +17,7 @@ "eslint-plugin-import": "2.x", "eslint-plugin-jsx-a11y": "6.x", "eslint-plugin-react": "7.x", - "eslint-plugin-react-hooks": "next" + "eslint-plugin-react-hooks": "1.5.0" }, "dependencies": { "confusing-browser-globals": "^1.0.5" diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index c0f35e35b56..4c7fc5dbfed 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -44,7 +44,7 @@ "eslint-plugin-import": "2.14.0", "eslint-plugin-jsx-a11y": "6.1.2", "eslint-plugin-react": "7.12.4", - "eslint-plugin-react-hooks": "next", + "eslint-plugin-react-hooks": "1.5.0", "file-loader": "2.0.0", "fork-ts-checker-webpack-plugin-alt": "0.4.14", "fs-extra": "7.0.1", From 0b13ab026fee6a74c04204d17c29adfcc225549a Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Thu, 14 Mar 2019 19:49:34 -0600 Subject: [PATCH 13/13] Remove extraneous dependency from react-scripts --- packages/react-scripts/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 3cd76339267..ee1a97c91d8 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -46,7 +46,6 @@ "eslint-plugin-react": "7.12.4", "eslint-plugin-react-hooks": "1.5.0", "file-loader": "3.0.1", - "fork-ts-checker-webpack-plugin-alt": "0.4.14", "fs-extra": "7.0.1", "html-webpack-plugin": "4.0.0-beta.5", "identity-obj-proxy": "3.0.0",