fix: prefer-read-only-props false positive using React types, closes #962 (#1008)

Author: Rel1cx

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

@@ -59,6 +59,7 @@
     "@typescript-eslint/types": "^8.27.0",
     "@typescript-eslint/utils": "^8.27.0",
     "compare-versions": "^6.1.1",
+    "is-immutable-type": "^5.0.1",
     "string-ts": "^2.2.1",
     "ts-pattern": "^5.6.2"
   },

packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.spec.ts

@@ -428,6 +428,29 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       /// <reference types="react" />
       /// <reference types="react-dom" />
 
+      import { useState } from 'react';
+      import './App.css';
+
+      export default function App(
+        props: Readonly<React.HTMLAttributes<HTMLDivElement>>
+      ) {
+        const [count, setCount] = useState(0);
+
+        return (
+          <>
+            <div className="card" id={props.id}>
+              <button type="button" onClick={() => setCount((count) => count + 1)}>
+                count is {count}
+              </button>
+            </div>
+          </>
+        );
+      }
+    `,
+    tsx`
+      /// <reference types="react" />
+      /// <reference types="react-dom" />
+
       import * as React from "react";
 
       type DeepReadonly<T> = Readonly<{[K in keyof T]: T[K] extends (number | string | symbol) ? Readonly<T[K]> : T[K] extends Array<infer A> ? Readonly<Array<DeepReadonly<A>>> : DeepReadonly<T[K]>;}>;

packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.ts

@@ -1,9 +1,11 @@
 import { useComponentCollector } from "@eslint-react/core";
 import type { RuleContext, RuleFeature } from "@eslint-react/shared";
 import { getConstrainedTypeAtLocation, isTypeReadonly } from "@typescript-eslint/type-utils";
-import { ESLintUtils } from "@typescript-eslint/utils";
+import { ESLintUtils, type ParserServicesWithTypeInformation } from "@typescript-eslint/utils";
 import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
+import { getTypeImmutability, isImmutable, isReadonlyDeep, isReadonlyShallow, isUnknown } from "is-immutable-type";
 import type { CamelCase } from "string-ts";
+import type ts from "typescript";
 
 import { createRule } from "../utils";
 
@@ -45,11 +47,21 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
           continue;
         }
         const propsType = getConstrainedTypeAtLocation(services, props);
-        if (isTypeReadonly(services.program, propsType)) {
+        if (isTypeReadonlyLoose(services, propsType)) {
           continue;
         }
         context.report({ messageId: "preferReadOnlyProps", node: props });
       }
     },
   };
 }
+
+function isTypeReadonlyLoose(services: ParserServicesWithTypeInformation, type: ts.Type): boolean {
+  if (isTypeReadonly(services.program, type)) return true;
+  try {
+    const im = getTypeImmutability(services.program, type);
+    return isUnknown(im) || isImmutable(im) || isReadonlyShallow(im) || isReadonlyDeep(im);
+  } catch {
+    return true;
+  }
+}