add flat config export (#16)

Author: tatethurston

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## v3.3.0
+
+Adds ESLint's [new configuration system](https://eslint.org/blog/2022/08/new-config-system-part-1/), `flat config`. If you're using the new flat config:
+
+    `eslint.config.js`:
+
+    ```js
+    import eslint from "@eslint/js";
+    import reactRecommended from "eslint-plugin-react/configs/recommended.js";
+    import preferFC from "eslint-plugin-react-prefer-function-component/config";
+
+    export default [
+      { files: ["**/*.{js,jsx}"] },
+      eslint.configs.recommended,
+      reactRecommended,
+      preferFC.configs.recommended,
+    ];
+    ```
+
 ## v3.2.0
 
 - The plugin's recommended configuration has been fixed, so `plugins` can be dropped from your `.eslintrc` when using the recommended settings:
@@ -9,9 +28,9 @@
   -  plugins: ["react-prefer-function-component"],
     extends: ["plugin:react-prefer-function-component/recommended"],
   };
+  ```
 
   Thanks @alecmev!
-  ```
 
 ## v3.1.0
 

README.md

@@ -56,10 +56,29 @@ I'm discussing this in an [open issue](https://github.com/yannickcr/eslint-plugi
 
 ## Installation & Usage 📦
 
+1. Install:
+
 ```
 $ npm install eslint eslint-plugin-react-prefer-function-component --save-dev
 ```
 
+2. Update your `eslint.config.js`:
+
+```js
+import eslint from "@eslint/js";
+import reactRecommended from "eslint-plugin-react/configs/recommended.js";
+import preferFC from "eslint-plugin-react-prefer-function-component/config";
+
+export default [
+  { files: ["**/*.{js,jsx}"] },
+  eslint.configs.recommended,
+  reactRecommended,
+  preferFC.configs.recommended,
+];
+```
+
+### ESLint Legacy Configuration
+
 `.eslintrc` configuration:
 
 ```js

examples/custom-config/package.json

@@ -9,8 +9,8 @@
   "license": "ISC",
   "main": "index.js",
   "devDependencies": {
-    "eslint": "^8.46.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint": "^8.48.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-prefer-function-component": "workspace:*"
   }
 }

examples/flat-config/eslint.config.js

@@ -0,0 +1,10 @@
+import eslint from "@eslint/js";
+import reactRecommended from "eslint-plugin-react/configs/recommended.js";
+import preferFC from "eslint-plugin-react-prefer-function-component/config";
+
+export default [
+  { files: ["**/*.{js,jsx}"] },
+  eslint.configs.recommended,
+  reactRecommended,
+  preferFC.configs.recommended,
+];

examples/flat-config/index.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+
+export class Foo extends Component {
+  render() {
+    return <div>{this.props.foo}</div>;
+  }
+}
+
+export const Bar = function (props) {
+  return <div>{props.foo}</div>;
+};
+
+export function Baz(props) {
+  return <div>{props.foo}</div>;
+}
+
+export class ErrorBoundary extends Component {
+  componentDidCatch(error, errorInfo) {
+    logErrorToMyService(error, errorInfo);
+  }
+
+  render() {
+    return <div>{this.props.foo}</div>;
+  }
+}

examples/flat-config/package.json

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+  "type": "module",
+  "description": "",
+  "name": "flat-config",
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "author": "Tate Thurston <[email protected]>",
+  "license": "ISC",
+  "main": "index.js",
+  "devDependencies": {
+    "eslint": "^8.48.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-prefer-function-component": "workspace:*"
+  }
+}

examples/recommended-config/package.json

@@ -9,8 +9,8 @@
   "license": "ISC",
   "main": "index.js",
   "devDependencies": {
-    "eslint": "^8.46.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint": "^8.48.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-prefer-function-component": "workspace:*"
   }
 }

package.json

@@ -22,25 +22,25 @@
     "typecheck": "pnpm run --recursive typecheck"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@types/eslint": "^8.44.1",
+    "@babel/preset-typescript": "^7.22.11",
+    "@types/eslint": "^8.44.2",
     "@types/estree": "^1.0.1",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^20.4.5",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@types/jest": "^29.5.4",
+    "@types/node": "^20.5.7",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "codecov": "^3.8.3",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
-    "jest": "^29.6.2",
-    "prettier": "^3.0.0",
+    "jest": "^29.6.4",
+    "prettier": "^3.0.3",
     "prettier-package-json": "^2.8.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "packageManager": "[email protected]"
 }

packages/eslint-plugin-react-prefer-function-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-prefer-function-component",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "ESLint plugin that prevents the use of JSX class components",
   "license": "MIT",
   "author": "Tate <[email protected]>",
@@ -20,7 +20,7 @@
     "package:prune": "find dist -name test.* -delete",
     "typecheck": "tsc --noEmit"
   },
-  "types": "index.d.ts",
+  "types": "dist/index.d.ts",
   "keywords": [
     "eslint react no class",
     "eslint react class",
@@ -30,6 +30,11 @@
     "lint jsx class"
   ],
   "devDependencies": {
-    "eslint": "^8.46.0"
+    "eslint": "^8.48.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./dist/index.js",
+    "./config": "./dist/config.mjs"
   }
 }

packages/eslint-plugin-react-prefer-function-component/src/config.mts

@@ -0,0 +1,23 @@
+import type { ESLint } from "eslint";
+import preferFunctionComponent from "./prefer-function-component/index.js";
+
+const plugin: ESLint.Plugin = {
+  rules: {
+    "prefer-function-component": preferFunctionComponent.default,
+  },
+};
+
+const config: ESLint.Plugin = {
+  configs: {
+    recommended: {
+      plugins: {
+        "prefer-function-component": plugin,
+      },
+      rules: {
+        "prefer-function-component/prefer-function-component": "error",
+      },
+    },
+  },
+};
+
+export default config;

packages/eslint-plugin-react-prefer-function-component/src/index.ts

@@ -1,5 +1,5 @@
 import type { ESLint } from "eslint";
-import PreferFunctionComponent from "./prefer-function-component";
+import PreferFunctionComponent from "./prefer-function-component/index.js";
 
 const plugin: ESLint.Plugin = {
   configs: {