dependency updates and type fixes (#21)

tatethurston · web-flow · commit 35c9afceed3a · 2025-03-16T13:15:52.000-07:00
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.17.1
+22.14.0
diff --git a/README.md b/README.md
@@ -67,13 +67,13 @@ $ npm install eslint eslint-plugin-react-prefer-function-component --save-dev
 ```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";
+import preferFunctionComponent from "eslint-plugin-react-prefer-function-component/config";
 
 export default [
   { files: ["**/*.{js,jsx}"] },
   eslint.configs.recommended,
   reactRecommended,
-  preferFC.configs.recommended,
+  preferFunctionComponent.configs.recommended,
 ];
 ```
 
diff --git a/babel.config.cjs b/babel.config.cjs
@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef
 module.exports = {
   presets: [
     ["@babel/preset-env", { targets: { node: "current" } }],
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,42 @@
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import typescriptPlugin from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [
+  {
+    ignores: ["**/dist", "examples", "packages/e2e", "coverage"],
+  },
+  js.configs.recommended,
+  {
+    plugins: {
+      "@typescript-eslint": typescriptPlugin,
+    },
+    languageOptions: {
+      parser: tsParser,
+    },
+    rules: {
+      ...typescriptPlugin.configs.recommended.rules,
+    },
+  },
+  {
+    files: ["*.ts"],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+      // eslint-disable-next-line no-undef
+      tsconfigRootDir: process.cwd(),
+      project: [
+        "./tsconfig.json",
+        "./packages/*/tsconfig.json",
+        "./examples/*/tsconfig.json",
+      ],
+    },
+    rules: {
+      ...typescriptPlugin.configs["recommended-requiring-type-checking"].rules,
+      "@typescript-eslint/prefer-nullish-coalescing": "error",
+      "@typescript-eslint/no-unnecessary-condition": "error",
+      "@typescript-eslint/prefer-optional-chain": "error",
+    },
+  },
+  eslintConfigPrettier,
+];
diff --git a/examples/custom-config/package.json b/examples/custom-config/package.json
@@ -9,8 +9,8 @@
   "license": "ISC",
   "main": "index.js",
   "devDependencies": {
-    "eslint": "^8.48.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-prefer-function-component": "workspace:*"
   }
 }
diff --git a/examples/flat-config/package.json b/examples/flat-config/package.json
@@ -10,8 +10,8 @@
   "license": "ISC",
   "main": "index.js",
   "devDependencies": {
-    "eslint": "^8.48.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-prefer-function-component": "workspace:*"
   }
 }
diff --git a/examples/recommended-config/package.json b/examples/recommended-config/package.json
@@ -9,8 +9,8 @@
   "license": "ISC",
   "main": "index.js",
   "devDependencies": {
-    "eslint": "^8.48.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-prefer-function-component": "workspace:*"
   }
 }
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef
 module.exports = {
   clearMocks: true,
   coverageDirectory: "coverage",
diff --git a/package.json b/package.json
@@ -24,25 +24,25 @@
     "typecheck": "pnpm run --recursive typecheck"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.11",
-    "@types/eslint": "^8.44.2",
-    "@types/estree": "^1.0.1",
-    "@types/jest": "^29.5.4",
-    "@types/node": "^20.5.7",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@types/eslint": "^9.6.1",
+    "@types/estree": "^1.0.6",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.10",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
     "codecov": "^3.8.3",
-    "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.4",
-    "prettier": "^3.0.3",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "prettier": "^3.5.3",
     "prettier-package-json": "^2.8.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.8.2"
   },
   "packageManager": "pnpm@8.6.9"
 }
diff --git a/packages/eslint-plugin-react-prefer-function-component/package.json b/packages/eslint-plugin-react-prefer-function-component/package.json
@@ -30,7 +30,7 @@
     "lint jsx class"
   ],
   "devDependencies": {
-    "eslint": "^8.48.0"
+    "eslint": "^9.22.0"
   },
   "exports": {
     "./package.json": "./package.json",
diff --git a/packages/eslint-plugin-react-prefer-function-component/src/index.ts b/packages/eslint-plugin-react-prefer-function-component/src/index.ts
@@ -1,7 +1,7 @@
 import type { ESLint } from "eslint";
 import PreferFunctionComponent from "./prefer-function-component/index.js";
 
-const plugin: ESLint.Plugin = {
+const plugin = {
   configs: {
     recommended: {
       plugins: ["react-prefer-function-component"],
@@ -14,6 +14,6 @@ const plugin: ESLint.Plugin = {
   rules: {
     "react-prefer-function-component": PreferFunctionComponent,
   },
-};
+} satisfies ESLint.Plugin;
 
 module.exports = plugin;
diff --git a/packages/eslint-plugin-react-prefer-function-component/src/prefer-function-component/index.ts b/packages/eslint-plugin-react-prefer-function-component/src/prefer-function-component/index.ts
@@ -1,30 +1,27 @@
 /**
  * @fileoverview Enforce components are written as function components
  */
-
 import type { Rule } from "eslint";
+import type { TSESTree } from "@typescript-eslint/types";
 
 export const COMPONENT_SHOULD_BE_FUNCTION = "componentShouldBeFunction";
 export const ALLOW_COMPONENT_DID_CATCH = "allowComponentDidCatch";
 export const ALLOW_JSX_UTILITY_CLASS = "allowJsxUtilityClass";
-// https://eslint.org/docs/developer-guide/working-with-rules
-const PROGRAM_EXIT = "Program:exit";
-const VARIABLE_DECLARATOR = "VariableDeclarator";
 
-// TODO: Type definitions
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Node = any;
+type ClassNode = TSESTree.ClassDeclaration | TSESTree.ClassExpression;
 
-/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment */
+type RuleOptions = {
+  allowComponentDidCatch?: boolean;
+  allowJsxUtilityClass?: boolean;
+};
 
 // https://eslint.org/docs/developer-guide/working-with-rules
-const rule: Rule.RuleModule = {
+const rule = {
   meta: {
     docs: {
       description: "Enforce components are written as function components",
       category: "Stylistic Issues",
       recommended: false,
-      suggestion: false,
       url: "https://github.com/tatethurston/eslint-plugin-react-prefer-function-component#rule-details",
     },
     type: "problem",
@@ -51,34 +48,33 @@ const rule: Rule.RuleModule = {
   },
 
   create(context: Rule.RuleContext) {
-    const allowComponentDidCatch =
-      context.options[0]?.allowComponentDidCatch ?? true;
-    const allowJsxUtilityClass =
-      context.options[0]?.allowJsxUtilityClass ?? false;
+    const options: RuleOptions = context.options[0] ?? {};
+    const allowComponentDidCatch = options.allowComponentDidCatch ?? true;
+    const allowJsxUtilityClass = options.allowJsxUtilityClass ?? false;
 
-    function shouldPreferFunction(node: Node): boolean {
+    function shouldPreferFunction(node: ClassNode): boolean {
       const properties = node.body.body;
-      const hasComponentDidCatch =
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        properties.find(
-          (property: Node) => property.key?.name === "componentDidCatch",
-        ) !== undefined;
+      const hasComponentDidCatch = properties.some((property) => {
+        if ("key" in property && "name" in property.key) {
+          return property.key.name === "componentDidCatch";
+        }
+      });
 
       if (hasComponentDidCatch && allowComponentDidCatch) {
         return false;
       }
       return true;
     }
 
-    const components = new Set<Node>();
+    const components = new Set<ClassNode>();
 
-    function detect(node: Node): void {
+    function detect(node: ClassNode): void {
       if (shouldPreferFunction(node)) {
         components.add(node);
       }
     }
 
-    function detectJsxInClass(node: Node): void {
+    function detectJsxInClass(node: ClassNode): void {
       if (!allowJsxUtilityClass) {
         detect(node);
       }
@@ -109,25 +105,20 @@ const rule: Rule.RuleModule = {
         detect,
       "ClassExpression[superClass.name='Component']": detect,
       "ClassExpression[superClass.name='PureComponent']": detect,
-      [PROGRAM_EXIT]() {
-        components.forEach((node) => {
-          // report on just the class identifier
-          if (node.id) {
-            // for ClassDeclaration
-            node = node.id;
-          } else if (node.parent.type == VARIABLE_DECLARATOR) {
-            //for ClassExpression
-            node = node.parent.id;
+      "Program:exit": function () {
+        components.forEach((component) => {
+          switch (component.type) {
+            case "ClassDeclaration":
+            case "ClassExpression":
+              return context.report({
+                node: component.id ?? (component as any),
+                messageId: COMPONENT_SHOULD_BE_FUNCTION,
+              });
           }
-
-          context.report({
-            node,
-            messageId: COMPONENT_SHOULD_BE_FUNCTION,
-          });
         });
       },
     };
   },
-};
+} satisfies Rule.RuleModule;
 
 export default rule;
diff --git a/packages/eslint-plugin-react-prefer-function-component/src/prefer-function-component/test.ts b/packages/eslint-plugin-react-prefer-function-component/src/prefer-function-component/test.ts
@@ -6,11 +6,13 @@ import rule, {
 } from ".";
 
 const ruleTester = new RuleTester({
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
+  languageOptions: {
+    parserOptions: {
+      ecmaVersion: 2018,
+      sourceType: "module",
+      ecmaFeatures: {
+        jsx: true,
+      },
     },
   },
 });
@@ -102,6 +104,13 @@ const invalidForAllOptions = [
       }
     };
   `,
+  `\
+    export default class extends React.Component {
+      render() {
+        return <div>{this.props.foo}</div>;
+      }
+    };
+  `,
   // Does not contain JSX and extends React.Component.
   `\
     class Foo extends React.Component {
@@ -138,6 +147,36 @@ const invalidForAllOptions = [
       }
     };
   `,
+  // Does not contain JSX and extends Component in an expression context.
+  `\
+    import { Component } from 'react';
+
+    const Foo = class Bar extends Component {
+      render() {
+        return null;
+      }
+    };
+  `,
+  // Does not contain JSX and extends Component in an default export expression context.
+  `\
+    import { Component } from 'react';
+
+    export default class extends Component {
+      render() {
+        return null;
+      }
+    };
+  `,
+  // Does not contain JSX and extends Component in an default export expression context.
+  `\
+    import { Component } from 'react';
+
+    export default class Foo extends Component {
+      render() {
+        return null;
+      }
+    };
+  `,
 ];
 
 const componentDidCatch = [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-// eslint-disable-next-line no-undef`
`2`	`1`	`module.exports = {`
`3`	`2`	`presets: [`
`4`	`3`	`["@babel/preset-env", { targets: { node: "current" } }],`
Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,8 @@`
`9`	`9`	`"license": "ISC",`
`10`	`10`	`"main": "index.js",`
`11`	`11`	`"devDependencies": {`
`12`		`- "eslint": "^8.48.0",`
`13`		`- "eslint-plugin-react": "^7.33.2",`
	`12`	`+ "eslint": "^9.22.0",`
	`13`	`+ "eslint-plugin-react": "^7.37.4",`
`14`	`14`	`"eslint-plugin-react-prefer-function-component": "workspace:*"`
`15`	`15`	`}`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,8 @@`
`10`	`10`	`"license": "ISC",`
`11`	`11`	`"main": "index.js",`
`12`	`12`	`"devDependencies": {`
`13`		`- "eslint": "^8.48.0",`
`14`		`- "eslint-plugin-react": "^7.33.2",`
	`13`	`+ "eslint": "^9.22.0",`
	`14`	`+ "eslint-plugin-react": "^7.37.4",`
`15`	`15`	`"eslint-plugin-react-prefer-function-component": "workspace:*"`
`16`	`16`	`}`
`17`	`17`	`}`