Ignore React functional components in cognitive-complexity (#219)

Author: vilchik-elena

ruling/snapshots/cognitive-complexity

@@ -413,7 +413,6 @@ src/react-router/website/modules/components/NativeExample.js: 12
 src/react-router/website/modules/components/WebExample.js: 13
 src/react/dangerfile.js: 99
 src/react/fixtures/attribute-behavior/src/App.js: 126,219,894
-src/react/fixtures/fiber-debugger/src/Fibers.js: 17
 src/react/packages/create-subscription/src/createSubscription.js: 16
 src/react/packages/events/ResponderEventPlugin.js: 315,476
 src/react/packages/events/ResponderTouchHistoryStore.js: 180

src/rules/cognitive-complexity.ts

@@ -21,7 +21,7 @@
 
 import { Rule } from "eslint";
 import * as estree from "estree";
-import { getParent, isIfStatement, isLogicalExpression } from "../utils/nodes";
+import { getParent, isArrowFunctionExpression, isIfStatement, isLogicalExpression } from "../utils/nodes";
 import {
   getMainFunctionTokenLocation,
   getFirstToken,
@@ -72,6 +72,21 @@ const rule: Rule.RuleModule = {
     /** Indicator if the current top level function has a structural (generated by control flow statements) complexity */
     let topLevelHasStructuralComplexity = false;
 
+    /** Indicator if the current top level function is React functional component */
+    const reactFunctionalComponent = {
+      nameStartsWithCapital: false,
+      returnsJsx: false,
+
+      isConfirmed() {
+        return this.nameStartsWithCapital && this.returnsJsx;
+      },
+
+      init(_node: estree.Function) {
+        this.nameStartsWithCapital = nameStartsWithCapital(_node);
+        this.returnsJsx = false;
+      },
+    };
+
     /** Own (not including nested functions) complexity of the current top function */
     let topLevelOwnComplexity: ComplexityPoint[] = [];
 
@@ -158,6 +173,9 @@ const rule: Rule.RuleModule = {
       ConditionalExpression(node: estree.Node) {
         visitConditionalExpression(node as estree.ConditionalExpression);
       },
+      ReturnStatement(node: estree.Node) {
+        visitReturnStatement(node as estree.ReturnStatement);
+      },
     };
 
     function getThreshold() {
@@ -168,6 +186,7 @@ const rule: Rule.RuleModule = {
       if (enclosingFunctions.length === 0) {
         // top level function
         topLevelHasStructuralComplexity = false;
+        reactFunctionalComponent.init(node);
         topLevelOwnComplexity = [];
         secondLevelFunctions = [];
       } else if (enclosingFunctions.length === 1) {
@@ -185,7 +204,7 @@ const rule: Rule.RuleModule = {
       enclosingFunctions.pop();
       if (enclosingFunctions.length === 0) {
         // top level function
-        if (topLevelHasStructuralComplexity) {
+        if (topLevelHasStructuralComplexity && !reactFunctionalComponent.isConfirmed()) {
           let totalComplexity = topLevelOwnComplexity;
           secondLevelFunctions.forEach(secondLevelFunction => {
             totalComplexity = totalComplexity.concat(secondLevelFunction.complexityIfNested);
@@ -268,6 +287,31 @@ const rule: Rule.RuleModule = {
       nestingNodes.add(conditionalExpression.alternate);
     }
 
+    function visitReturnStatement({ argument }: estree.ReturnStatement) {
+      // top level function
+      if (enclosingFunctions.length === 1 && argument && (argument.type as any) === "JSXElement") {
+        reactFunctionalComponent.returnsJsx = true;
+      }
+    }
+
+    function nameStartsWithCapital(node: estree.Function) {
+      const checkFirstLetter = (name: string) => {
+        const firstLetter = name[0];
+        return firstLetter === firstLetter.toUpperCase();
+      };
+
+      if (!isArrowFunctionExpression(node) && node.id) {
+        return checkFirstLetter(node.id.name);
+      }
+
+      const parent = getParent(context);
+      if (parent && parent.type === "VariableDeclarator" && parent.id.type === "Identifier") {
+        return checkFirstLetter(parent.id.name);
+      }
+
+      return false;
+    }
+
     function visitLogicalExpression(logicalExpression: estree.LogicalExpression) {
       if (!consideredLogicalExpressions.has(logicalExpression)) {
         const flattenedLogicalExpressions = flattenLogicalExpression(logicalExpression);

tests/rules/cognitive-complexity.test.ts

@@ -450,6 +450,34 @@ ruleTester.run("cognitive-complexity", rule, {
       options: [0],
       errors: [message(1)],
     },
+
+    // ignore React functional components
+    {
+      code: `
+      function Welcome() {
+        const handleSomething = () => {
+          if (x) {} // +1
+        }
+        if (x) {} // +1
+        return <h1>Hello, world</h1>;
+      }`,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+      options: [0],
+      errors: [message(1, { line: 2 }), message(1, { line: 3 })],
+    },
+    {
+      code: `
+      const Welcome = () => {
+        const handleSomething = () => {
+          if (x) {} // +1
+        }
+        if (x) {} // +1
+        return <h1>Hello, world</h1>;
+      }`,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+      options: [0],
+      errors: [message(1, { line: 2 }), message(1, { line: 3 })],
+    },
   ],
 });