Small tweaks to components-return-once

Author: joshwilsonvu

src/rules/components-return-once.ts

@@ -15,7 +15,7 @@ const isNothing = (node?: T.Node): boolean => {
   }
 };
 
-const getLocLength = (loc: T.SourceLocation) => loc.end.line - loc.start.line + 1;
+const getLineLength = (loc: T.SourceLocation) => loc.end.line - loc.start.line + 1;
 
 const rule: TSESLint.RuleModule<"noEarlyReturn" | "noConditionalReturn", []> = {
   meta: {
@@ -48,24 +48,26 @@ const rule: TSESLint.RuleModule<"noEarlyReturn" | "noConditionalReturn", []> = {
     };
     const currentFunction = () => functionStack[functionStack.length - 1];
     const onFunctionEnter = (node: FunctionNode) => {
-      const getLastReturn = () => {
-        if (node.body.type === "BlockStatement") {
-          const { length } = node.body.body;
-          const last = length && node.body.body[length - 1];
-          if (last && last.type === "ReturnStatement") {
-            return last;
-          }
+      let lastReturn: T.ReturnStatement | undefined;
+      if (node.body.type === "BlockStatement") {
+        const { length } = node.body.body;
+        const last = length && node.body.body[length - 1];
+        if (last && last.type === "ReturnStatement") {
+          lastReturn = last;
         }
-      };
-      functionStack.push({ isComponent: false, lastReturn: getLastReturn(), earlyReturns: [] });
+      }
+      functionStack.push({ isComponent: false, lastReturn, earlyReturns: [] });
     };
+
     const onFunctionExit = (node: FunctionNode) => {
       if (
+        (node.type === "FunctionDeclaration" && node.id?.name?.match(/^[a-z]/)) ||
         node.parent?.type === "JSXExpressionContainer" // "render props" aren't components
       ) {
         currentFunction().isComponent = false;
       }
       if (currentFunction().isComponent) {
+        // Warn on each early return
         currentFunction().earlyReturns.forEach((earlyReturn) => {
           context.report({
             node: earlyReturn,
@@ -115,7 +117,7 @@ const rule: TSESLint.RuleModule<"noEarlyReturn" | "noConditionalReturn", []> = {
               }
               if (
                 isNothing(fallback) ||
-                getLocLength(consequent.loc) >= getLocLength(alternate.loc) * 1.5
+                getLineLength(consequent.loc) >= getLineLength(alternate.loc) * 1.5
               ) {
                 // we have a standard ternary, and the alternate is a bit shorter in LOC than the consequent, which
                 // should be enough to tell that it's logically a fallback instead of an equal branch.

test/rules/components-return-once.test.ts

@@ -2,12 +2,28 @@ import { run } from "../ruleTester";
 import rule from "../../src/rules/components-return-once";
 
 export const cases = run("components-return-once", rule, {
-  valid: [],
+  valid: [
+    `function Component() {
+      return <div />;
+    }`,
+    `function someFunc() {
+      if (condition) {
+        return 5;
+      }
+      return 10;
+    }`,
+    `function notAComponent() {
+      if (condition) {
+        return <div />;
+      }
+      return <div />;
+    }`,
+  ],
   invalid: [
     // Early returns
     {
       code: `function Component() {
-  if (true) {
+  if (condition) {
     return <div />;
   };
   return <span />;
@@ -49,6 +65,25 @@ export const cases = run("components-return-once", rule, {
       Big!
       No, really big!
     </div></Show>;
+}`,
+    },
+    // Switch/Match
+    {
+      code: `function Component(props) {
+  return props.cond1 ? (
+    <div>Condition 1</div>
+  ) : Boolean(props.cond2) ? (
+    <div>Not condition 1, but condition 2</div>
+  ) : (
+    <div>Neither condition 1 or 2</div>
+  );
+}`,
+      errors: [{ messageId: "noConditionalReturn" }],
+      output: `function Component(props) {
+  return <Switch fallback={<div>Neither condition 1 or 2</div>}>
+<Match when={props.cond1}><div>Condition 1</div></Match>
+<Match when={Boolean(props.cond2)}><div>Not condition 1, but condition 2</div></Match>
+</Switch>;
 }`,
     },
   ],