feat: add version detection logic; fix(plugins/x): 'no-leaked-conditional-rendering' should also warn 'anyStringVar' when react version is lower than 18, closes #853

Author: Rel1cx

packages/plugins/eslint-plugin-react-x/package.json

@@ -59,6 +59,7 @@
     "@typescript-eslint/type-utils": "^8.15.0",
     "@typescript-eslint/types": "^8.15.0",
     "@typescript-eslint/utils": "^8.15.0",
+    "compare-versions": "^6.1.1",
     "is-immutable-type": "5.0.0",
     "ts-pattern": "^5.5.0"
   },

packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.spec.ts

@@ -13,6 +13,11 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       errors: [
         { messageId: "noLeakedConditionalRendering" },
       ],
+      settings: {
+        "react-x": {
+          version: "17.0.0",
+        },
+      },
     },
     {
       code: /* tsx */ `
@@ -25,6 +30,28 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       errors: [
         { messageId: "noLeakedConditionalRendering" },
       ],
+      settings: {
+        "react-x": {
+          version: "17.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+        /// <reference types="react" />
+        /// <reference types="react-dom" />
+
+        const anyString = Math.random() > 0.5 ? "" : "foo";
+        const a = <>{anyString && <Something />}</>;
+      `,
+      errors: [
+        { messageId: "noLeakedConditionalRendering" },
+      ],
+      settings: {
+        "react-x": {
+          version: "17.0.0",
+        },
+      },
     },
     {
       code: /* tsx */ `
@@ -683,5 +710,33 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         );
       };
     `,
+    {
+      code: /* tsx */ `
+        /// <reference types="react" />
+        /// <reference types="react-dom" />
+
+        const someString = "";
+        const a = <>{someString && <Something />}</>;
+      `,
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+        /// <reference types="react" />
+        /// <reference types="react-dom" />
+
+        const anyString = Math.random() > 0.5 ? "" : "foo";
+        const a = <>{anyString && <Something />}</>;
+      `,
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
   ],
 });

packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.ts

@@ -1,4 +1,5 @@
 import * as AST from "@eslint-react/ast";
+import { decodeSettings, normalizeSettings } from "@eslint-react/shared";
 import { F, O } from "@eslint-react/tools";
 import * as VAR from "@eslint-react/var";
 import type { Variable } from "@typescript-eslint/scope-manager";
@@ -8,6 +9,7 @@ import { AST_NODE_TYPES } from "@typescript-eslint/types";
 import { ESLintUtils } from "@typescript-eslint/utils";
 import { getStaticValue } from "@typescript-eslint/utils/ast-utils";
 import type { ReportDescriptor } from "@typescript-eslint/utils/ts-eslint";
+import { compare } from "compare-versions";
 import type { CamelCase } from "string-ts";
 import { isFalseLiteralType, isTrueLiteralType, isTypeFlagSet, unionTypeParts } from "ts-api-utils";
 import { isMatching, match, P } from "ts-pattern";
@@ -48,20 +50,6 @@ type VariantType =
   | "truthy string";
 /* eslint-enable perfectionist/sort-union-types */
 
-// Allowed left node type variants
-const allowedVariants = [
-  "any",
-  "boolean",
-  "nullish",
-  "object",
-  "string",
-  "falsy boolean",
-  "truthy bigint",
-  "truthy boolean",
-  "truthy number",
-  "truthy string",
-] as const satisfies VariantType[];
-
 // #endregion
 
 // #region Helpers
@@ -223,6 +211,25 @@ export default createRule<[], MessageID>({
   name: RULE_NAME,
   create(context) {
     if (!context.sourceCode.text.includes("&&") && !context.sourceCode.text.includes("?")) return {};
+
+    const { version } = normalizeSettings(decodeSettings(context.settings));
+
+    // Allowed left node type variants
+    const allowedVariants = [
+      "any",
+      "boolean",
+      "nullish",
+      "object",
+      "falsy boolean",
+      "truthy bigint",
+      "truthy boolean",
+      "truthy number",
+      "truthy string",
+      ...compare(version, "18.0.0", "<")
+        ? []
+        : ["string", "falsy string"] as const,
+    ] as const satisfies VariantType[];
+
     const services = ESLintUtils.getParserServices(context, false);
     function getReportDescriptor(node: TSESTree.Expression): O.Option<ReportDescriptor<MessageID>> {
       return match<typeof node, O.Option<ReportDescriptor<MessageID>>>(node)

packages/shared/package.json

@@ -44,7 +44,9 @@
   "dependencies": {
     "@eslint-react/tools": "workspace:*",
     "@typescript-eslint/utils": "^8.15.0",
-    "picomatch": "^4.0.2"
+    "local-pkg": "^0.5.1",
+    "picomatch": "^4.0.2",
+    "ts-pattern": "^5.5.0"
   },
   "devDependencies": {
     "@types/picomatch": "^3.0.1",

packages/shared/src/schemas.ts

@@ -195,4 +195,5 @@ export type ESLintSettings = InferOutput<typeof ESLintSettingsSchema>;
 export interface ESLintReactSettingsNormalized extends ESLintReactSettings {
   additionalComponents: CustomComponentNormalized[];
   components: Map<string, string>;
+  version: string;
 }

packages/shared/src/settings.ts

@@ -1,7 +1,9 @@
 import { Data, F } from "@eslint-react/tools";
 import { shallowEqual } from "fast-equals";
+import { getPackageInfoSync } from "local-pkg";
 import memoize from "micro-memoize";
 import pm from "picomatch";
+import { match, P } from "ts-pattern";
 import type { PartialDeep } from "type-fest";
 import { parse } from "valibot";
 
@@ -72,6 +74,9 @@ export const normalizeSettings = memoize((settings: ESLintReactSettings) => {
       if (!/^[\w-]+$/u.test(name)) return acc;
       return acc.set(name, as);
     }, new Map<string, string>()),
+    version: match(settings.version)
+      .with(P.union(P.nullish, "", "detect"), () => getPackageInfoSync("react")?.version)
+      .otherwise(F.identity) ?? "18.3.1",
   });
 }, { isEqual: shallowEqual });