Skip to content

Commit

Permalink
feat: support flat config
Browse files Browse the repository at this point in the history
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,
  },
];
```
  • Loading branch information
michaelfaith committed Oct 11, 2024
1 parent 0911120 commit 4c484ec
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 8 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 35 additions & 1 deletion packages/eslint-plugin-react-hooks/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand All @@ -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": [
Expand All @@ -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

Expand Down
41 changes: 34 additions & 7 deletions packages/eslint-plugin-react-hooks/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
2 changes: 2 additions & 0 deletions scripts/rollup/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -377,6 +378,7 @@ function getPlugins(
bundleType !== ESM_PROD && bundleType !== ESM_DEV;

return [
json(),
// Keep dynamic imports as externals
dynamicImports(),
{
Expand Down
16 changes: 16 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 4c484ec

Please sign in to comment.