Merge branch 'main' into fix/prefer-for-chainexpression

Author: joshwilsonvu

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) {
+  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,44 +26,63 @@ 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>`
-              ),
-          });
+      JSXExpressionContainer(node) {
+        if (node.parent?.type !== "JSXElement") {
+          return;
         }
-      },
-      "JSXElement > JSXExpressionContainer > ConditionalExpression": (
-        node: T.ConditionalExpression
-      ) => {
-        if (
-          EXPENSIVE_TYPES.includes(node.consequent.type) ||
-          EXPENSIVE_TYPES.includes(node.alternate.type)
+        if (node.expression.type === "LogicalExpression") {
+          logicalExpressionHandler(node.expression);
+        } else if (
+          node.expression.type === "ArrowFunctionExpression" &&
+          node.expression.body.type === "LogicalExpression"
+        ) {
+          logicalExpressionHandler(node.expression.body);
+        } else if (node.expression.type === "ConditionalExpression") {
+          conditionalExpressionHandler(node.expression);
+        } else if (
+          node.expression.type === "ArrowFunctionExpression" &&
+          node.expression.body.type === "ConditionalExpression"
         ) {
-          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>`
-              ),
-          });
+          conditionalExpressionHandler(node.expression.body);
         }
       },
     };

test/rules/prefer-show.test.ts

@@ -45,5 +45,48 @@ export const cases = run("prefer-show", rule, {
         );
       }`,
     },
+    // Check that it also works with control flow function children
+    {
+      code: `
+      function Component(props) {
+        return (
+          <For each={props.someList}>
+            {(listItem) => listItem.cond && <span>Content</span>}
+          </For>
+        );
+      }`,
+      errors: [{ messageId: "preferShowAnd" }],
+      output: `
+      function Component(props) {
+        return (
+          <For each={props.someList}>
+            {(listItem) => <Show when={listItem.cond}><span>Content</span></Show>}
+          </For>
+        );
+      }`,
+    },
+    {
+      code: `
+      function Component(props) {
+        return (
+          <For each={props.someList}>
+            {(listItem) => (listItem.cond ? (
+              <span>Content</span> 
+            ) : (
+              <span>Fallback</span>
+            ))}
+          </For>
+        );
+      }`,
+      errors: [{ messageId: "preferShowTernary" }],
+      output: `
+      function Component(props) {
+        return (
+          <For each={props.someList}>
+            {(listItem) => (<Show when={listItem.cond} fallback={<span>Fallback</span>}><span>Content</span></Show>)}
+          </For>
+        );
+      }`,
+    },
   ],
 });