[New] export flat configs from plugin root and fix flat config crash

Co-authored-by: Brad Zacher <[email protected]>
Co-authored-by: Milos Djermanovic <[email protected]>

Author: 2 people

.eslint-doc-generatorrc.js

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

.eslintrc

@@ -16,6 +16,7 @@
 	"ignorePatterns": [
 		"coverage/",
 		".nyc_output/",
+		"tests/fixtures/flat-config/"
 	],
 	"rules": {
 		"comma-dangle": [2, "always-multiline"],

CHANGELOG.md

@@ -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

README.md

@@ -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
   …
 ];
 ```
@@ -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,
@@ -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}'],

configs/all.js

@@ -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 });

configs/jsx-runtime.js

@@ -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 });

configs/recommended.js

@@ -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 });

index.js

@@ -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;

lib/rules/index.js

@@ -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'),

package.json

@@ -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": {

tests/fixtures/flat-config/config-all/eslint.config-deep.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const reactAll = require('../../../../configs/all');
+
+module.exports = [{
+  files: ['**/*.jsx'],
+  ...reactAll,
+  languageOptions: {
+    ...reactAll.languageOptions
+  }
+}];

tests/fixtures/flat-config/config-all/eslint.config-root.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const reactPlugin = require('../../../..');
+
+module.exports = [{
+  files: ['**/*.jsx'],
+  ...reactPlugin.configs.flat.all
+}];