From 4c484ecd004be637a5cf8b78a03c764b99ab8f51 Mon Sep 17 00:00:00 2001 From: michael faith Date: Wed, 21 Aug 2024 05:00:04 -0500 Subject: [PATCH] feat: support flat config This change adds support for the new flat config format. In order to import from json, I had to add the rollup json plugin to the rollup build script. I also updated the README to include usage examples. Example usage: ```js export default [ { files: ['**/*.{js,jsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, parserOptions: { ecmaVersion: 'latest', ecmaFeatures: {jsx: true}, sourceType: 'module', }, }, settings: {react: {version: '18.3'}}, ...reactHooks.flatConfigs.recommended, }, ]; ``` --- package.json | 1 + packages/eslint-plugin-react-hooks/README.md | 36 +++++++++++++++- .../eslint-plugin-react-hooks/src/index.js | 41 +++++++++++++++---- scripts/rollup/build.js | 2 + yarn.lock | 16 ++++++++ 5 files changed, 88 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index cffd0ba28b493e..c3487db7bf5ee6 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@babel/traverse": "^7.11.0", "@rollup/plugin-babel": "^6.0.3", "@rollup/plugin-commonjs": "^24.0.1", + "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-replace": "^5.0.2", "abortcontroller-polyfill": "^1.7.5", diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md index d7a3e7d39cdeef..7e84d936d5c904 100644 --- a/packages/eslint-plugin-react-hooks/README.md +++ b/packages/eslint-plugin-react-hooks/README.md @@ -18,7 +18,9 @@ npm install eslint-plugin-react-hooks --save-dev yarn add eslint-plugin-react-hooks --dev ``` -Then extend the recommended eslint config: +### Legacy Config (.eslintrc) + +Extend the recommended eslint config: ```js { @@ -29,10 +31,25 @@ Then extend the recommended eslint config: } ``` +### Flat Config (eslint.config.js) + +Add the recommended config + +```js +import reactHooks from 'eslint-plugin-react-hooks'; + +export default [ + // ... + reactHooks.flatConfigs.recommended, +]; +``` + ### Custom Configuration If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file: +#### Legacy Config (.eslintrc) + ```js { "plugins": [ @@ -47,6 +64,23 @@ If you want more fine-grained configuration, you can instead add a snippet like } ``` +#### Flat Config (eslint.config.js) + +```js +import reactHooks from 'eslint-plugin-react-hooks'; + +export default [ + { + files: ['**/*.{js,jsx}'], + plugins: { 'react-hooks': reactHooks }, + // ... + rules: { + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'warn', + } + }, +]; +``` ## Advanced Configuration diff --git a/packages/eslint-plugin-react-hooks/src/index.js b/packages/eslint-plugin-react-hooks/src/index.js index d8ff02e7b144ff..6fbfaeef15fbad 100644 --- a/packages/eslint-plugin-react-hooks/src/index.js +++ b/packages/eslint-plugin-react-hooks/src/index.js @@ -9,18 +9,45 @@ import RulesOfHooks from './RulesOfHooks'; import ExhaustiveDeps from './ExhaustiveDeps'; +import {name, version} from '../package.json'; +// All rules +export const rules = { + 'rules-of-hooks': RulesOfHooks, + 'exhaustive-deps': ExhaustiveDeps, +}; + +// Rule configs +const configRules = { + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'warn', +}; + +// Legacy configs export const configs = { recommended: { plugins: ['react-hooks'], - rules: { - 'react-hooks/rules-of-hooks': 'error', - 'react-hooks/exhaustive-deps': 'warn', - }, + rules: configRules, }, }; -export const rules = { - 'rules-of-hooks': RulesOfHooks, - 'exhaustive-deps': ExhaustiveDeps, +// Base plugin object +const reactHooksPlugin = { + meta: {name, version}, + rules, +}; + +// Flat configs +export const flatConfigs = { + recommended: { + name: 'react-hooks/recommended', + plugins: {'react-hooks': reactHooksPlugin}, + rules: configRules, + }, +}; + +export default { + ...reactHooksPlugin, + configs, + flatConfigs, }; diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js index 2a67c13e1e620b..503442578d6a55 100644 --- a/scripts/rollup/build.js +++ b/scripts/rollup/build.js @@ -4,6 +4,7 @@ const rollup = require('rollup'); const babel = require('@rollup/plugin-babel').babel; const closure = require('./plugins/closure-plugin'); const flowRemoveTypes = require('flow-remove-types'); +const json = require('@rollup/plugin-json'); const prettier = require('rollup-plugin-prettier'); const replace = require('@rollup/plugin-replace'); const stripBanner = require('rollup-plugin-strip-banner'); @@ -377,6 +378,7 @@ function getPlugins( bundleType !== ESM_PROD && bundleType !== ESM_DEV; return [ + json(), // Keep dynamic imports as externals dynamicImports(), { diff --git a/yarn.lock b/yarn.lock index d52bc62f789d04..2378a5e5ab75b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3021,6 +3021,13 @@ is-reference "1.2.1" magic-string "^0.27.0" +"@rollup/plugin-json@^6.1.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-6.1.0.tgz#fbe784e29682e9bb6dee28ea75a1a83702e7b805" + integrity sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA== + dependencies: + "@rollup/pluginutils" "^5.1.0" + "@rollup/plugin-node-resolve@^15.0.1": version "15.0.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.1.tgz#72be449b8e06f6367168d5b3cd5e2802e0248971" @@ -3050,6 +3057,15 @@ estree-walker "^2.0.2" picomatch "^2.3.1" +"@rollup/pluginutils@^5.1.0": + version "5.1.0" + resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0" + integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g== + dependencies: + "@types/estree" "^1.0.0" + estree-walker "^2.0.2" + picomatch "^2.3.1" + "@sinclair/typebox@^0.25.16": version "0.25.24" resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"