check for 'prefer-show' in arrowfunctionexpressions

Author: aadito123

docs/prefer-show.md

@@ -47,6 +47,48 @@ function Component(props) {
   );
 }
 
+function Component(props) {
+  return (
+    <For each={props.someList}>
+      {(listItem) => listItem.cond && <span>Content</span>}
+    </For>
+  );
+}
+// after eslint --fix:
+function Component(props: any) {
+  return (
+    <For each={props.someList}>
+      {(listItem) => (
+        <Show when={listItem.cond}>
+          <span>Content</span>
+        </Show>
+      )}
+    </For>
+  );
+}
+ 
+function Component(props) {
+  return (
+    <For each={props.someList}>
+      {(listItem) =>
+        listItem.cond ? <span>Content</span> : <span>Fallback</span>
+      }
+    </For>
+  );
+}
+// after eslint --fix:
+function Component(props) {
+  return (
+    <For each={props.someList}>
+      {(listItem) => (
+        <Show when={listItem.cond} fallback={<span>Fallback</span>}>
+          <span>Content</span>
+        </Show>
+      )}
+    </For>
+  );
+}
+ 
 ```
 
 ### Valid Examples

src/rules/prefer-show.ts

@@ -26,46 +26,51 @@ const rule: TSESLint.RuleModule<"preferShowAnd" | "preferShowTernary", []> = {
       return node.type === "JSXElement" || node.type === "JSXFragment" ? text : `{${text}}`;
     };
 
+    const logicalExpressionHandler = (node: T.LogicalExpression) => {
+      if (node.operator === "&&" && EXPENSIVE_TYPES.includes(node.right.type)) {
+        context.report({
+          node,
+          messageId: "preferShowAnd",
+          fix: (fixer) =>
+            fixer.replaceText(
+              node.parent?.type === "JSXExpressionContainer" &&
+                node.parent.parent?.type === "JSXElement"
+                ? node.parent
+                : node,
+              `<Show when={${sourceCode.getText(node.left)}}>${putIntoJSX(node.right)}</Show>`
+            ),
+        });
+      }
+    };
+    const conditionalExpressionHandler = (node: T.ConditionalExpression) => {
+      if (
+        EXPENSIVE_TYPES.includes(node.consequent.type) ||
+        EXPENSIVE_TYPES.includes(node.alternate.type)
+      ) {
+        context.report({
+          node,
+          messageId: "preferShowTernary",
+          fix: (fixer) =>
+            fixer.replaceText(
+              node.parent?.type === "JSXExpressionContainer" &&
+                node.parent.parent?.type === "JSXElement"
+                ? node.parent
+                : node,
+              `<Show when={${sourceCode.getText(node.test)}} fallback={${sourceCode.getText(
+                node.alternate
+              )}}>${putIntoJSX(node.consequent)}</Show>`
+            ),
+        });
+      }
+    };
+
     return {
-      "JSXElement > JSXExpressionContainer > LogicalExpression": (node: T.LogicalExpression) => {
-        if (node.operator === "&&" && EXPENSIVE_TYPES.includes(node.right.type)) {
-          context.report({
-            node,
-            messageId: "preferShowAnd",
-            fix: (fixer) =>
-              fixer.replaceText(
-                node.parent?.type === "JSXExpressionContainer" &&
-                  node.parent.parent?.type === "JSXElement"
-                  ? node.parent
-                  : node,
-                `<Show when={${sourceCode.getText(node.left)}}>${putIntoJSX(node.right)}</Show>`
-              ),
-          });
-        }
-      },
-      "JSXElement > JSXExpressionContainer > ConditionalExpression": (
-        node: T.ConditionalExpression
-      ) => {
-        if (
-          EXPENSIVE_TYPES.includes(node.consequent.type) ||
-          EXPENSIVE_TYPES.includes(node.alternate.type)
-        ) {
-          context.report({
-            node,
-            messageId: "preferShowTernary",
-            fix: (fixer) =>
-              fixer.replaceText(
-                node.parent?.type === "JSXExpressionContainer" &&
-                  node.parent.parent?.type === "JSXElement"
-                  ? node.parent
-                  : node,
-                `<Show when={${sourceCode.getText(node.test)}} fallback={${sourceCode.getText(
-                  node.alternate
-                )}}>${putIntoJSX(node.consequent)}</Show>`
-              ),
-          });
-        }
-      },
+      "JSXElement > JSXExpressionContainer > LogicalExpression": logicalExpressionHandler,
+      "JSXElement > JSXExpressionContainer > ArrowFunctionExpression > LogicalExpression":
+        logicalExpressionHandler,
+      "JSXElement > JSXExpressionContainer > ConditionalExpression": conditionalExpressionHandler,
+      "JSXElement > JSXExpressionContainer > ArrowFunctionExpression > ConditionalExpression":
+        conditionalExpressionHandler,
     };
   },
 };