Skip to content

Commit

Permalink
[New] export flat configs from plugin root and fix flat config crash
Browse files Browse the repository at this point in the history
Co-authored-by: Brad Zacher <brad.zacher@gmail.com>
Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>
  • Loading branch information
2 people authored and ljharb committed Feb 21, 2024
1 parent 7a7b756 commit e64e260
Show file tree
Hide file tree
Showing 25 changed files with 386 additions and 120 deletions.
2 changes: 1 addition & 1 deletion .eslint-doc-generatorrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const config = {
['jsx-runtime', '🏃'],
['recommended', '☑️'],
],
ignoreConfig: ['all'],
ignoreConfig: ['all', 'flat'],
urlConfigs: 'https://github.com/jsx-eslint/eslint-plugin-react/#shareable-configs',
};

Expand Down
1 change: 1 addition & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"ignorePatterns": [
"coverage/",
".nyc_output/",
"tests/fixtures/flat-config/"
],
"rules": {
"comma-dangle": [2, "always-multiline"],
Expand Down
9 changes: 7 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,17 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange

## Unreleased

### Added
* export flat configs from plugin root and fix flat config crash ([#3694][] @bradzacher @mdjermanovic)

[#3694]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3694

## [7.34.4] - 2024.07.13

### Fixed

* [`prop-types`]: fix `className` missing in prop validation false negative ([#3749] @akulsr0)
* [`sort-prop-types`]: Check for undefined before accessing `node.typeAnnotation.typeAnnotation` ([#3779] @tylerlaprade)
* [`prop-types`]: fix `className` missing in prop validation false negative ([#3749][] @akulsr0)
* [`sort-prop-types`]: Check for undefined before accessing `node.typeAnnotation.typeAnnotation` ([#3779][] @tylerlaprade)

[7.34.4]: https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.34.3...v7.34.4
[#3779]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3779
Expand Down
31 changes: 13 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -203,27 +203,22 @@ Refer to the [official docs](https://eslint.org/docs/latest/user-guide/configuri
The schema of the `settings.react` object would be identical to that of what's already described above in the legacy config section.

<!-- markdownlint-disable-next-line no-duplicate-heading -->
### Shareable configs

There're also 3 shareable configs.

- `eslint-plugin-react/configs/all`
- `eslint-plugin-react/configs/recommended`
- `eslint-plugin-react/configs/jsx-runtime`
### Flat Configs

If your eslint.config.js is ESM, include the `.js` extension (e.g. `eslint-plugin-react/recommended.js`). Note that the next semver-major will require omitting the extension for these imports.
This plugin exports 3 flat configs:

**Note**: These configurations will import `eslint-plugin-react` and enable JSX in [`languageOptions.parserOptions`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).
- `flat.all`
- `flat.recommended`
- `flat['jsx-runtime']`

In the new config system, `plugin:` protocol(e.g. `plugin:react/recommended`) is no longer valid.
As eslint does not automatically import the preset config (shareable config), you explicitly do it by yourself.
The flat configs are available via the root plugin import. They will configure the plugin under the `react/` namespace and enable JSX in [`languageOptions.parserOptions`](https://eslint.org/docs/latest/use/configure/language-options#specifying-parser-options).

```js
const reactRecommended = require('eslint-plugin-react/configs/recommended');
const reactPlugin = require('eslint-plugin-react');

module.exports = [
reactRecommended, // This is not a plugin object, but a shareable config object
reactPlugin.configs.flat.recommended, // This is not a plugin object, but a shareable config object
];
```
Expand All @@ -234,16 +229,16 @@ You can of course add/override some properties.
For most of the cases, you probably want to configure some properties by yourself.

```js
const reactRecommended = require('eslint-plugin-react/configs/recommended');
const reactPlugin = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
{
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
...reactRecommended,
...reactPlugin.configs.flat.recommended,
languageOptions: {
...reactRecommended.languageOptions,
...reactPlugin.configs.flat.recommended.languageOptions,
globals: {
...globals.serviceworker,
...globals.browser,
Expand All @@ -257,14 +252,14 @@ module.exports = [
The above example is same as the example below, as the new config system is based on chaining.

```js
const reactRecommended = require('eslint-plugin-react/configs/recommended');
const reactPlugin = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
{
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
...reactRecommended,
...reactPlugin.configs.flat.recommended,
},
{
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
Expand Down
46 changes: 5 additions & 41 deletions configs/all.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,13 @@
'use strict';

const fromEntries = require('object.fromentries');
const entries = require('object.entries');
const plugin = require('..');

const allRules = require('../lib/rules');

function filterRules(rules, predicate) {
return fromEntries(entries(rules).filter((entry) => predicate(entry[1])));
}

/**
* @param {object} rules - rules object mapping rule name to rule module
* @returns {Record<string, 2>}
*/
function configureAsError(rules) {
return fromEntries(Object.keys(rules).map((key) => [`react/${key}`, 2]));
}

const activeRules = filterRules(allRules, (rule) => !rule.meta.deprecated);
const activeRulesConfig = configureAsError(activeRules);

const deprecatedRules = filterRules(allRules, (rule) => rule.meta.deprecated);
const legacyConfig = plugin.configs.all;

module.exports = {
plugins: {
/**
* @type {{
* deprecatedRules: Record<string, import('eslint').Rule.RuleModule>,
* rules: Record<string, import('eslint').Rule.RuleModule>,
* }}
*/
react: {
deprecatedRules,
rules: allRules,
},
},
rules: activeRulesConfig,
languageOptions: {
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
plugins: { react: plugin },
rules: legacyConfig.rules,
languageOptions: { parserOptions: legacyConfig.parserOptions },
};

// this is so the `languageOptions` property won't be warned in the new config system
Object.defineProperty(module.exports, 'languageOptions', { enumerable: false });
21 changes: 8 additions & 13 deletions configs/jsx-runtime.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
'use strict';

const all = require('./all');
const plugin = require('..');

module.exports = Object.assign({}, all, {
languageOptions: Object.assign({}, all.languageOptions, {
parserOptions: Object.assign({}, all.languageOptions.parserOptions, {
jsxPragma: null, // for @typescript/eslint-parser
}),
}),
rules: {
'react/react-in-jsx-scope': 0,
'react/jsx-uses-react': 0,
},
});
const legacyConfig = plugin.configs['jsx-runtime'];

module.exports = {
plugins: { react: plugin },
rules: legacyConfig.rules,
languageOptions: { parserOptions: legacyConfig.parserOptions },
};

// this is so the `languageOptions` property won't be warned in the new config system
Object.defineProperty(module.exports, 'languageOptions', { enumerable: false });
37 changes: 8 additions & 29 deletions configs/recommended.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,13 @@
'use strict';

const all = require('./all');
const plugin = require('..');

module.exports = Object.assign({}, all, {
languageOptions: all.languageOptions,
rules: {
'react/display-name': 2,
'react/jsx-key': 2,
'react/jsx-no-comment-textnodes': 2,
'react/jsx-no-duplicate-props': 2,
'react/jsx-no-target-blank': 2,
'react/jsx-no-undef': 2,
'react/jsx-uses-react': 2,
'react/jsx-uses-vars': 2,
'react/no-children-prop': 2,
'react/no-danger-with-children': 2,
'react/no-deprecated': 2,
'react/no-direct-mutation-state': 2,
'react/no-find-dom-node': 2,
'react/no-is-mounted': 2,
'react/no-render-return-value': 2,
'react/no-string-refs': 2,
'react/no-unescaped-entities': 2,
'react/no-unknown-property': 2,
'react/no-unsafe': 0,
'react/prop-types': 2,
'react/react-in-jsx-scope': 2,
'react/require-render-return': 2,
},
});
const legacyConfig = plugin.configs.recommended;

module.exports = {
plugins: { react: plugin },
rules: legacyConfig.rules,
languageOptions: { parserOptions: legacyConfig.parserOptions },
};

// this is so the `languageOptions` property won't be warned in the new config system
Object.defineProperty(module.exports, 'languageOptions', { enumerable: false });
106 changes: 92 additions & 14 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,109 @@
'use strict';

const configAll = require('./configs/all');
const configRecommended = require('./configs/recommended');
const configRuntime = require('./configs/jsx-runtime');
const fromEntries = require('object.fromentries');
const entries = require('object.entries');

const allRules = require('./lib/rules');

function filterRules(rules, predicate) {
return fromEntries(entries(rules).filter((entry) => predicate(entry[1])));
}

/**
* @param {object} rules - rules object mapping rule name to rule module
* @returns {Record<string, 2>}
*/
function configureAsError(rules) {
return fromEntries(Object.keys(rules).map((key) => [`react/${key}`, 2]));
}

const activeRules = filterRules(allRules, (rule) => !rule.meta.deprecated);
const activeRulesConfig = configureAsError(activeRules);

const deprecatedRules = filterRules(allRules, (rule) => rule.meta.deprecated);

// for legacy config system
const plugins = [
'react',
];

module.exports = {
deprecatedRules: configAll.plugins.react.deprecatedRules,
const plugin = {
deprecatedRules,
rules: allRules,
configs: {
recommended: Object.assign({}, configRecommended, {
parserOptions: configRecommended.languageOptions.parserOptions,
recommended: {
plugins,
}),
all: Object.assign({}, configAll, {
parserOptions: configAll.languageOptions.parserOptions,
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
rules: {
'react/display-name': 2,
'react/jsx-key': 2,
'react/jsx-no-comment-textnodes': 2,
'react/jsx-no-duplicate-props': 2,
'react/jsx-no-target-blank': 2,
'react/jsx-no-undef': 2,
'react/jsx-uses-react': 2,
'react/jsx-uses-vars': 2,
'react/no-children-prop': 2,
'react/no-danger-with-children': 2,
'react/no-deprecated': 2,
'react/no-direct-mutation-state': 2,
'react/no-find-dom-node': 2,
'react/no-is-mounted': 2,
'react/no-render-return-value': 2,
'react/no-string-refs': 2,
'react/no-unescaped-entities': 2,
'react/no-unknown-property': 2,
'react/no-unsafe': 0,
'react/prop-types': 2,
'react/react-in-jsx-scope': 2,
'react/require-render-return': 2,
},
},
all: {
plugins,
}),
'jsx-runtime': Object.assign({}, configRuntime, {
parserOptions: configRuntime.languageOptions.parserOptions,
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
rules: activeRulesConfig,
},
'jsx-runtime': {
plugins,
}),
parserOptions: {
ecmaFeatures: {
jsx: true,
},
jsxPragma: null, // for @typescript/eslint-parser
},
rules: {
'react/react-in-jsx-scope': 0,
'react/jsx-uses-react': 0,
},
},
},
};

plugin.configs.flat = {
recommended: {
plugins: { react: plugin },
rules: plugin.configs.recommended.rules,
languageOptions: { parserOptions: plugin.configs.recommended.parserOptions },
},
all: {
plugins: { react: plugin },
rules: plugin.configs.all.rules,
languageOptions: { parserOptions: plugin.configs.all.parserOptions },
},
'jsx-runtime': {
plugins: { react: plugin },
rules: plugin.configs['jsx-runtime'].rules,
languageOptions: { parserOptions: plugin.configs['jsx-runtime'].parserOptions },
},
};

module.exports = plugin;
2 changes: 1 addition & 1 deletion lib/rules/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

/* eslint global-require: 0 */

/** @type {Record<string, import('eslint').Rule.RuleModule>} */
/** @satisfies {Record<string, import('eslint').Rule.RuleModule>} */
module.exports = {
'boolean-prop-naming': require('./boolean-prop-naming'),
'button-has-type': require('./button-has-type'),
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"test": "npm run unit-test",
"posttest": "aud --production",
"type-check": "tsc",
"unit-test": "istanbul cover node_modules/mocha/bin/_mocha tests/lib/**/*.js tests/util/**/*.js tests/index.js",
"unit-test": "istanbul cover node_modules/mocha/bin/_mocha tests/lib/**/*.js tests/util/**/*.js tests/index.js tests/flat-config.js",
"update:eslint-docs": "eslint-doc-generator"
},
"repository": {
Expand Down
11 changes: 11 additions & 0 deletions tests/fixtures/flat-config/config-all/eslint.config-deep.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
'use strict';

const reactAll = require('../../../../configs/all');

module.exports = [{
files: ['**/*.jsx'],
...reactAll,
languageOptions: {
...reactAll.languageOptions
}
}];
8 changes: 8 additions & 0 deletions tests/fixtures/flat-config/config-all/eslint.config-root.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
'use strict';

const reactPlugin = require('../../../..');

module.exports = [{
files: ['**/*.jsx'],
...reactPlugin.configs.flat.all
}];
Loading

0 comments on commit e64e260

Please sign in to comment.