Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] export flat configs from plugin root and fix flat config crash #3694

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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/all', 'flat/recommended', `flat/jsx-runtime`],
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
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('../index');

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('../index');

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('../index');

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 },
};

plugin.configs['flat/all'] = {
plugins: { react: plugin },
rules: plugin.configs.all.rules,
languageOptions: { parserOptions: plugin.configs.all.parserOptions },
};

plugin.configs['flat/jsx-runtime'] = {
plugins: { react: plugin },
rules: plugin.configs['jsx-runtime'].rules,
languageOptions: { parserOptions: plugin.configs['jsx-runtime'].parserOptions },
};
Comment on lines +91 to +107
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might be more ergonomic if it's a "flat" object with 3 properties, "recommended", "all", "jsx-runtime"?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unlike eslintrc, there are no restrictions on how flat configs can be exported from plugins. However, the convention ESLint recommends is to still export configs as properties of configs (eslint/eslint#18095).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

true - if we're following that tho we'd avoid "flat" entirely too.

For destructuring, being able to do { configs: { flat: { all } } } seems much more convenient than requiring brackets and quotes, to me. Thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me at the moment.

In some future major version of this plugin, it would be good to switch to:

{ configs: { 'legacy/recommended' /* eslintrc */, 'recommended' /* flat */, ... } }

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

certainly, if indeed the ecosystem prefers flat config then there will come a time when it doesn't make sense to support anything prior to that.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's a commit that updates this: mdjermanovic@bbdaaa7


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']
}];
3 changes: 3 additions & 0 deletions tests/fixtures/flat-config/config-all/test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div foo="hello">
test
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
'use strict';

const reactRecommended = require('../../../../configs/recommended');
const reactJSXRuntime = require('../../../../configs/jsx-runtime');

module.exports = [
{
files: ['**/*.jsx'],
...reactRecommended,
languageOptions: {
...reactRecommended.languageOptions
}
},
reactJSXRuntime
];