new option: allowJsxUtilityClass (#12)

Author: tatethurston

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## v3.1.0
+
+- New option: `allowJsxUtilityClass`. This configuration option permits JSX utility classes: classes that have methods that return JSX but are not themselves components(they do not extend from a Component class or have a render method).
+
+  The following is now permitted when enabling this configuration option:
+
+  ```jsx
+  class Foo {
+    getBar() {
+      return <Bar />;
+    }
+  }
+  ```
+
+  Thanks [noahm](https://github.com/noahm) for the contribution!
+
 ## v3.0.0
 
 Detects `class` components that extend the `Component` class, even if they do not use any JSX. Now errors on manager, business logic, and other renderless `class` components that extend `Component`. Previously the below was not caught:

README.md

@@ -162,6 +162,36 @@ class Foo extends Component {
 }
 ```
 
+### `allowJsxUtilityClass`
+
+When `true` the rule will ignore JS classes that aren't class Components
+
+Examples of **correct** code for this rule:
+
+```jsx
+import { Bar } from "./Bar";
+
+class Foo {
+  getBar() {
+    return <Bar />;
+  }
+}
+```
+
+When `false` (the default) the rule will flag any class with JSX
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+import { Bar } from "./Bar";
+
+class Foo {
+  getBar() {
+    return <Bar />;
+  }
+}
+```
+
 ## Contributing 👫
 
 PR's and issues welcomed! For more guidance check out [CONTRIBUTING.md](https://github.com/tatethurston/eslint-plugin-react-prefer-function-component/blob/master/CONTRIBUTING.md)

public.package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-prefer-function-component",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "ESLint plugin that prevents the use of JSX class components",
   "license": "MIT",
   "author": "Tate <[email protected]>",

src/prefer-function-component/index.ts

@@ -6,8 +6,7 @@ import type { Rule } from "eslint";
 
 export const COMPONENT_SHOULD_BE_FUNCTION = "componentShouldBeFunction";
 export const ALLOW_COMPONENT_DID_CATCH = "allowComponentDidCatch";
-export const ALLOW_JSX_IN_CLASSES = "allowJsxInClasses";
-const COMPONENT_DID_CATCH = "componentDidCatch";
+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";
@@ -41,7 +40,7 @@ const rule: Rule.RuleModule = {
             default: true,
             type: "boolean",
           },
-          [ALLOW_JSX_IN_CLASSES]: {
+          [ALLOW_JSX_UTILITY_CLASS]: {
             default: false,
             type: "boolean",
           },
@@ -54,15 +53,15 @@ const rule: Rule.RuleModule = {
   create(context: Rule.RuleContext) {
     const allowComponentDidCatch =
       context.options[0]?.allowComponentDidCatch ?? true;
-    // const allowJsxInClasses =
-    //   context.options[0]?.allowComponentDidCatch ?? false;
+    const allowJsxUtilityClass =
+      context.options[0]?.allowJsxUtilityClass ?? false;
 
     function shouldPreferFunction(node: Node): boolean {
       const properties = node.body.body;
       const hasComponentDidCatch =
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         properties.find(
-          (property: Node) => property.key?.name === COMPONENT_DID_CATCH
+          (property: Node) => property.key?.name === "componentDidCatch"
         ) !== undefined;
 
       if (hasComponentDidCatch && allowComponentDidCatch) {
@@ -79,23 +78,37 @@ const rule: Rule.RuleModule = {
       }
     }
 
-    // function detectJsxInClass(node: Node): void {
-    //   if (!allowJsxInClasses) {
-    //     detect(node);
-    //   }
-    // }
+    function detectJsxInClass(node: Node): void {
+      if (!allowJsxUtilityClass) {
+        detect(node);
+      }
+    }
 
     return {
-      "ClassDeclaration:has(JSXElement)": detect,
-      "ClassDeclaration:has(JSXFragment)": detect,
+      "ClassDeclaration:has(JSXElement)": detectJsxInClass,
+      "ClassDeclaration:has(JSXFragment)": detectJsxInClass,
+      "ClassExpression:has(JSXElement)": detectJsxInClass,
+      "ClassExpression:has(JSXFragment)": detectJsxInClass,
+      "ClassDeclaration:has(JSXElement):has(MethodDefinition[key.name='render'])":
+        detect,
+      "ClassDeclaration:has(JSXFragment):has(MethodDefinition[key.name='render'])":
+        detect,
+      "ClassExpression:has(JSXElement):has(MethodDefinition[key.name='render'])":
+        detect,
+      "ClassExpression:has(JSXFragment):has(MethodDefinition[key.name='render'])":
+        detect,
       "ClassDeclaration[superClass.object.name='React'][superClass.property.name='Component']":
         detect,
+      "ClassDeclaration[superClass.object.name='React'][superClass.property.name='PureComponent']":
+        detect,
       "ClassDeclaration[superClass.name='Component']": detect,
-      "ClassExpression:has(JSXElement)": detect,
-      "ClassExpression:has(JSXFragment)": detect,
+      "ClassDeclaration[superClass.name='PureComponent']": detect,
       "ClassExpression[superClass.object.name='React'][superClass.property.name='Component']":
         detect,
+      "ClassExpression[superClass.object.name='React'][superClass.property.name='PureComponent']":
+        detect,
       "ClassExpression[superClass.name='Component']": detect,
+      "ClassExpression[superClass.name='PureComponent']": detect,
       [PROGRAM_EXIT]() {
         components.forEach((node) => {
           // report on just the class identifier

src/prefer-function-component/test.ts

@@ -1,7 +1,7 @@
 import { RuleTester } from "eslint";
 import rule, {
   ALLOW_COMPONENT_DID_CATCH,
-  ALLOW_JSX_IN_CLASSES,
+  ALLOW_JSX_UTILITY_CLASS,
   COMPONENT_SHOULD_BE_FUNCTION,
 } from ".";
 
@@ -176,38 +176,39 @@ const componentDidCatch = [
   `,
 ];
 
+const jsxUtilityClass = [
+  `\
+    class Foo {
+      getBar() {
+        return <Bar />;
+      }
+    };
+  `,
+];
+
 ruleTester.run("prefer-function-component", rule, {
   valid: [
     ...validForAllOptions.flatMap((code) => [
       { code },
-      { code, options: [{ [ALLOW_JSX_IN_CLASSES]: true }] },
-      { code, options: [{ [ALLOW_COMPONENT_DID_CATCH]: true }] },
+      { code, options: [{ [ALLOW_JSX_UTILITY_CLASS]: true }] },
+      { code, options: [{ [ALLOW_COMPONENT_DID_CATCH]: false }] },
       {
         code,
         options: [
-          { [ALLOW_JSX_IN_CLASSES]: true, [ALLOW_COMPONENT_DID_CATCH]: true },
+          {
+            [ALLOW_JSX_UTILITY_CLASS]: true,
+            [ALLOW_COMPONENT_DID_CATCH]: false,
+          },
         ],
       },
     ]),
     ...componentDidCatch.flatMap((code) => [
       { code },
-      { code, options: [{ [ALLOW_JSX_IN_CLASSES]: true }] },
+      { code, options: [{ [ALLOW_JSX_UTILITY_CLASS]: true }] },
+    ]),
+    ...jsxUtilityClass.flatMap((code) => [
+      { code, options: [{ [ALLOW_JSX_UTILITY_CLASS]: true }] },
     ]),
-    // {
-    //   // non-component class with JSX
-    //   code: `
-    //     class Foo {
-    //       getBar() {
-    //         return <Bar />;
-    //       }
-    //     };
-    //   `,
-    //   options: [
-    //     {
-    //       [ALLOW_JSX_IN_CLASSES]: true,
-    //     },
-    //   ],
-    // },
   ],
 
   invalid: [
@@ -216,18 +217,21 @@ ruleTester.run("prefer-function-component", rule, {
       {
         code,
         errors: [{ messageId: COMPONENT_SHOULD_BE_FUNCTION }],
-        options: [{ [ALLOW_JSX_IN_CLASSES]: true }],
+        options: [{ [ALLOW_JSX_UTILITY_CLASS]: true }],
       },
       {
         code,
         errors: [{ messageId: COMPONENT_SHOULD_BE_FUNCTION }],
-        options: [{ [ALLOW_COMPONENT_DID_CATCH]: true }],
+        options: [{ [ALLOW_COMPONENT_DID_CATCH]: false }],
       },
       {
         code,
         errors: [{ messageId: COMPONENT_SHOULD_BE_FUNCTION }],
         options: [
-          { [ALLOW_JSX_IN_CLASSES]: true, [ALLOW_COMPONENT_DID_CATCH]: true },
+          {
+            [ALLOW_JSX_UTILITY_CLASS]: true,
+            [ALLOW_COMPONENT_DID_CATCH]: false,
+          },
         ],
       },
     ]),
@@ -244,5 +248,13 @@ ruleTester.run("prefer-function-component", rule, {
         },
       ],
     })),
+    ...jsxUtilityClass.flatMap((code) => [
+      { code, errors: [{ messageId: COMPONENT_SHOULD_BE_FUNCTION }] },
+      {
+        code,
+        errors: [{ messageId: COMPONENT_SHOULD_BE_FUNCTION }],
+        options: [{ [ALLOW_COMPONENT_DID_CATCH]: false }],
+      },
+    ]),
   ],
 });