From 2035423569f326f4d84f205ecaad9f660a5440f5 Mon Sep 17 00:00:00 2001
From: Eva1ent <let@ik.me>
Date: Thu, 9 Nov 2023 14:35:09 +0800
Subject: [PATCH] refactor: improve jsx/no-leaked-conditional-rendering

---
 cspell.json                                   |   1 +
 package.json                                  |   2 +-
 packages/ast/package.json                     |   2 +-
 packages/core/package.json                    |   2 +-
 packages/eslint-plugin-debug/package.json     |   2 +-
 packages/eslint-plugin-hooks/package.json     |   2 +-
 packages/eslint-plugin-jsx/package.json       |   2 +-
 .../no-leaked-conditional-rendering.spec.ts   | 344 ++++++++++++++++++
 .../rules/no-leaked-conditional-rendering.ts  |  66 ++--
 .../package.json                              |   2 +-
 packages/eslint-plugin-react/package.json     |   2 +-
 packages/eslint-plugin/package.json           |   2 +-
 packages/jsx/package.json                     |   2 +-
 packages/jsx/src/value.ts                     |   8 +-
 packages/shared/package.json                  |   2 +-
 packages/tools/package.json                   |   2 +-
 packages/types/package.json                   |   2 +-
 17 files changed, 404 insertions(+), 41 deletions(-)

diff --git a/cspell.json b/cspell.json
index 1901464ff..97d8d50a5 100644
--- a/cspell.json
+++ b/cspell.json
@@ -29,6 +29,7 @@
     "bimap",
     "birecord",
     "clippy",
+    "consequents",
     "declarators",
     "deepmerge",
     "dprint",
diff --git a/package.json b/package.json
index 715aa62d3..f8e059d76 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/monorepo",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "ESLint plugin for React function components with TypeScript, built (mostly) from scratch.",
   "keywords": [
     "eslint",
diff --git a/packages/ast/package.json b/packages/ast/package.json
index f2ef3e0f8..4ed3a71eb 100644
--- a/packages/ast/package.json
+++ b/packages/ast/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/ast",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "AST Utility Module for Static Analysis of TypeScript",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/core/package.json b/packages/core/package.json
index 1375b6240..f312f237f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/core",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "AST Utility Module for Static Analysis of React core API and Patterns.",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/eslint-plugin-debug/package.json b/packages/eslint-plugin-debug/package.json
index aef00ce81..2d0c71c83 100644
--- a/packages/eslint-plugin-debug/package.json
+++ b/packages/eslint-plugin-debug/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/eslint-plugin-debug",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Debug specific rules for @eslint-react/eslint-plugin",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/eslint-plugin-hooks/package.json b/packages/eslint-plugin-hooks/package.json
index 893adbbfe..8e2f89c28 100644
--- a/packages/eslint-plugin-hooks/package.json
+++ b/packages/eslint-plugin-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/eslint-plugin-hooks",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Hooks specific rules for @eslint-react/eslint-plugin",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/eslint-plugin-jsx/package.json b/packages/eslint-plugin-jsx/package.json
index 3e42c074d..07d655c7c 100644
--- a/packages/eslint-plugin-jsx/package.json
+++ b/packages/eslint-plugin-jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/eslint-plugin-jsx",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "JSX specific rules for @eslint-react/eslint-plugin",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/eslint-plugin-jsx/src/rules/no-leaked-conditional-rendering.spec.ts b/packages/eslint-plugin-jsx/src/rules/no-leaked-conditional-rendering.spec.ts
index 5f77ceb95..bc874adc3 100644
--- a/packages/eslint-plugin-jsx/src/rules/no-leaked-conditional-rendering.spec.ts
+++ b/packages/eslint-plugin-jsx/src/rules/no-leaked-conditional-rendering.spec.ts
@@ -87,6 +87,123 @@ ruleTester.run(RULE_NAME, rule, {
             )
         }
     `,
+    dedent`
+      const foo = Math.random() > 0.5;
+      const bar = 0;
+      function App() {
+        return (
+          <button
+            type="button"
+            disabled={foo && bar === 0}
+            onClick={() => {}}
+          />
+        );
+      }
+    `,
+    `
+      const someCondition = JSON.parse("true") as boolean;
+      const SomeComponent = () => <div />;
+
+      const App = () => {
+        return (
+          <>
+            {!!someCondition && (
+              <SomeComponent
+                prop1={val1}
+                prop2={val2}
+              />
+            )}
+          </>
+        )
+      }
+      `,
+    dedent`
+      const someCondition = JSON.parse("") as any;
+      const SomeComponent = () => <div />;
+
+      const App = () => {
+        return (
+          <>
+            {!!someCondition && (
+              <SomeComponent
+                prop1={val1}
+                prop2={val2}
+              />
+            )}
+          </>
+        )
+      }
+    `,
+    dedent`
+      const someCondition = JSON.parse("") as unknown;
+      const SomeComponent = () => <div />;
+
+      const App = () => {
+        return (
+          <>
+            {!!someCondition && (
+              <SomeComponent
+                prop1={val1}
+                prop2={val2}
+              />
+            )}
+          </>
+        )
+      }
+    `,
+    dedent`
+      const someCondition = 0
+      const SomeComponent = () => <div />;
+
+      const App = () => {
+        return (
+          <>
+            {!!someCondition && (
+              <SomeComponent
+                prop1={val1}
+                prop2={val2}
+              />
+            )}
+          </>
+        )
+      }
+    `,
+    dedent`
+      const someCondition = 1
+      const SomeComponent = () => <div />;
+
+      const App = () => {
+        return (
+          <>
+            {!!someCondition && (
+              <SomeComponent
+                prop1={val1}
+                prop2={val2}
+              />
+            )}
+          </>
+        )
+      }
+    `,
+    dedent`
+      const someCondition1 = 0;
+      const SomeComponent = () => <div />;
+
+      const App = () => {
+        return (
+          <>
+            {!!someCondition
+              ? (
+              <SomeComponent
+                prop1={val1}
+                prop2={val2}
+              />)
+              : someCondition1 ? null : <div />
+            }
+          </>
+        )
+      }
+    `,
   ],
   invalid: [
     {
@@ -109,5 +226,232 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     },
+    {
+      code: dedent`
+        const someCondition = JSON.parse("") as any;
+        const SomeComponent = () => <div />;
+
+        const App = () => {
+          return (
+            <>
+              {someCondition && (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />
+              )}
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const someCondition = JSON.parse("") as unknown;
+        const SomeComponent = () => <div />;
+
+        const App = () => {
+          return (
+            <>
+              {someCondition && (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />
+              )}
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const someCondition = 0
+        const SomeComponent = () => <div />;
+
+        const App = () => {
+          return (
+            <>
+              {someCondition && (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />
+              )}
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const someCondition = 1
+        const SomeComponent = () => <div />;
+
+        const App = () => {
+          return (
+            <>
+              {someCondition && (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />
+              )}
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const someCondition1 = true
+        const SomeComponent = () => <div />;
+
+        const App = () => {
+          return (
+            <>
+              {someCondition
+                ? (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />)
+                : Date()
+              }
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const someCondition1 = true
+        const SomeComponent = () => <div />;
+        const notComponent = () => new Date();
+
+        const App = () => {
+          return (
+            <>
+              {someCondition
+                ? (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />)
+                : notComponent()
+              }
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const someCondition1 = 0;
+        const SomeComponent = () => <div />;
+
+        const App = () => {
+          return (
+            <>
+              {!!someCondition
+                ? (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />)
+                : Date()
+              }
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const someCondition1 = 0;
+        const SomeComponent = () => <div />;
+
+        const App = () => {
+          return (
+            <>
+              {!!someCondition
+                ? (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />)
+                : someCondition1 && <div />
+              }
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const someCondition1 = 0;
+        const SomeComponent = () => <div />;
+
+        const App = () => {
+          return (
+            <>
+              {!!someCondition
+                ? (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />)
+                : someCondition1 ? Date() : <div />
+              }
+            </>
+          )
+        }
+      `,
+      errors: [
+        {
+          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+        },
+      ],
+    },
   ],
 });
diff --git a/packages/eslint-plugin-jsx/src/rules/no-leaked-conditional-rendering.ts b/packages/eslint-plugin-jsx/src/rules/no-leaked-conditional-rendering.ts
index 28b3cd214..68c3c462e 100644
--- a/packages/eslint-plugin-jsx/src/rules/no-leaked-conditional-rendering.ts
+++ b/packages/eslint-plugin-jsx/src/rules/no-leaked-conditional-rendering.ts
@@ -1,16 +1,18 @@
+import { NodeType } from "@eslint-react/ast";
 import { isJSXValue, JSXValueCheckHint } from "@eslint-react/jsx";
 import { getConstrainedTypeAtLocation } from "@typescript-eslint/type-utils";
 import { type TSESTree } from "@typescript-eslint/types";
 import { ESLintUtils } from "@typescript-eslint/utils";
 import type { ConstantCase } from "string-ts";
 import * as tsutils from "ts-api-utils";
+import { match } from "ts-pattern";
 import * as ts from "typescript";
 
 import { createRule } from "../utils";
 
 export const RULE_NAME = "no-leaked-conditional-rendering";
 
-export type MessageID = ConstantCase<typeof RULE_NAME>;
+export type MessageID = "NEEDS_TYPE_CHECKING_SERVICE" | ConstantCase<typeof RULE_NAME>;
 
 const allowTypes = [
   "boolean",
@@ -155,27 +157,57 @@ export default createRule<[], MessageID>({
     },
     schema: [],
     messages: {
+      NEEDS_TYPE_CHECKING_SERVICE:
+        "Type checking is required for this rule. Please add a `project` to your parser options. See https://typescript-eslint.io/docs/linting/type-linting",
       NO_LEAKED_CONDITIONAL_RENDERING:
         "Potential leaked value that might cause unintentionally rendered values or rendering crashes",
     },
   },
   defaultOptions: [],
   create(context) {
+    const hint = JSXValueCheckHint.SkipNumberLiteral
+      | JSXValueCheckHint.StrictArray
+      | JSXValueCheckHint.StrictLogical
+      | JSXValueCheckHint.StrictConditional;
+
     const services = ESLintUtils.getParserServices(context);
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, @typescript-eslint/strict-boolean-expressions
     if (!services.program) {
-      throw new Error("see https://typescript-eslint.io/docs/linting/type-linting");
+      context.report({
+        loc: { column: 1, line: 1 },
+        messageId: "NEEDS_TYPE_CHECKING_SERVICE",
+      });
+    }
+
+    function isValidExpression(node: TSESTree.Expression): boolean {
+      return match(node)
+        .with({ type: NodeType.LogicalExpression }, isValidLogicalExpression)
+        .with({ type: NodeType.ConditionalExpression }, isValidConditionalExpression)
+        .otherwise(() => isJSXValue(node, context, hint));
+    }
+
+    function isValidLogicalExpression(
+      node: TSESTree.LogicalExpression,
+    ): boolean {
+      const { left } = node;
+      const leftType = getConstrainedTypeAtLocation(services, left);
+      const types = inspectVariantTypes([leftType]);
+
+      return types.every(type => allowTypes.includes(type as never));
+    }
+
+    function isValidConditionalExpression(
+      node: TSESTree.ConditionalExpression,
+    ): boolean {
+      const { alternate, consequent } = node;
+
+      return isValidExpression(alternate) && isValidExpression(consequent);
     }
 
     return {
       "JSXExpressionContainer > ConditionalExpression"(node: TSESTree.ConditionalExpression) {
-        const hint = JSXValueCheckHint.SkipNumberLiteral
-          | JSXValueCheckHint.StrictArray
-          | JSXValueCheckHint.StrictLogical
-          | JSXValueCheckHint.StrictConditional;
-
-        if (!isJSXValue(node, context, hint)) {
+        if (!isValidConditionalExpression(node)) {
           context.report({
             messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
             node,
@@ -183,20 +215,12 @@ export default createRule<[], MessageID>({
         }
       },
       'JSXExpressionContainer > LogicalExpression[operator="&&"]'(node: TSESTree.LogicalExpression) {
-        const { left } = node;
-
-        const leftType = getConstrainedTypeAtLocation(services, left);
-
-        const types = inspectVariantTypes([leftType]);
-
-        if (types.every(type => allowTypes.includes(type as never))) {
-          return;
+        if (!isValidLogicalExpression(node)) {
+          context.report({
+            messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
+            node,
+          });
         }
-
-        context.report({
-          messageId: "NO_LEAKED_CONDITIONAL_RENDERING",
-          node: left,
-        });
       },
     };
   },
diff --git a/packages/eslint-plugin-naming-convention/package.json b/packages/eslint-plugin-naming-convention/package.json
index 83920080d..477fec04d 100644
--- a/packages/eslint-plugin-naming-convention/package.json
+++ b/packages/eslint-plugin-naming-convention/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/eslint-plugin-naming-convention",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Naming convention specific rules for ESLint-plugin-React",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/eslint-plugin-react/package.json b/packages/eslint-plugin-react/package.json
index c4cb579aa..93facaba8 100644
--- a/packages/eslint-plugin-react/package.json
+++ b/packages/eslint-plugin-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/eslint-plugin-react",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "React specific rules for ESLint",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 68e676292..4ac82efe8 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/eslint-plugin",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "ESLint plugin for React function components with TypeScript, built (mostly) from scratch.",
   "keywords": [
     "eslint",
diff --git a/packages/jsx/package.json b/packages/jsx/package.json
index 1d6fb21e4..77e921098 100644
--- a/packages/jsx/package.json
+++ b/packages/jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/jsx",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "AST Utility Module for Static Analysis of JSX",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/jsx/src/value.ts b/packages/jsx/src/value.ts
index 7bf821c61..207578afe 100644
--- a/packages/jsx/src/value.ts
+++ b/packages/jsx/src/value.ts
@@ -1,10 +1,4 @@
-import {
-  findVariableByNameUpToGlobal,
-  getVariableInit,
-  isJSXTagNameExpression,
-  isOneOf,
-  NodeType,
-} from "@eslint-react/ast";
+import { findVariableByNameUpToGlobal, getVariableInit, isJSXTagNameExpression, NodeType } from "@eslint-react/ast";
 import { F, O } from "@eslint-react/tools";
 import type { RuleContext } from "@eslint-react/types";
 import { type TSESTree } from "@typescript-eslint/utils";
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 41d02762f..048c836ae 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/shared",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Shared constants and utilities for @eslint-react's packages",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/tools/package.json b/packages/tools/package.json
index f037caff5..d20f51dd3 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/tools",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Primitive tools for @eslint-react's packages",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {
diff --git a/packages/types/package.json b/packages/types/package.json
index 6eba21ca3..7983b7f36 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/types",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Type definitions for @eslint-react",
   "homepage": "https://github.com/eslint-react/eslint-react",
   "bugs": {