feat: add rule 'prefer-readonly-props', closes #590

Author: Rel1cx

package.json

@@ -61,6 +61,8 @@
     "@tsconfig/node20": "20.1.4",
     "@tsconfig/strictest": "2.0.5",
     "@types/node": "20.14.9",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "8.0.0-alpha.40",
     "@typescript-eslint/parser": "8.0.0-alpha.40",
     "@typescript-eslint/rule-tester": "8.0.0-alpha.40",
@@ -90,6 +92,8 @@
     "markdownlint": "0.34.0",
     "pathe": "1.1.2",
     "publint": "0.2.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "skott": "0.35.2",
     "sort-package-json": "2.10.0",
     "tiny-invariant": "1.3.3",
@@ -132,6 +136,7 @@
       "object.hasown": "npm:@nolyfill/object.hasown@^1",
       "object.values": "npm:@nolyfill/object.values@^1",
       "string.prototype.matchall": "npm:@nolyfill/string.prototype.matchall@^1",
+      "ts-api-utils": "^1.3.0",
       "typedarray": "npm:@nolyfill/typedarray@^1",
       "typedoc": "0.26.3",
       "typedoc-plugin-markdown": "4.1.1",

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

@@ -51,7 +51,8 @@
     "@typescript-eslint/scope-manager": "8.0.0-alpha.40",
     "@typescript-eslint/type-utils": "8.0.0-alpha.40",
     "@typescript-eslint/types": "8.0.0-alpha.40",
-    "@typescript-eslint/utils": "8.0.0-alpha.40"
+    "@typescript-eslint/utils": "8.0.0-alpha.40",
+    "is-immutable-type": "4.0.0"
   },
   "devDependencies": {
     "dedent": "1.5.3",

packages/plugins/eslint-plugin-react-x/src/index.ts

@@ -39,6 +39,7 @@ import noUnusedClassComponentMembers from "./rules/no-unused-class-component-mem
 import noUnusedState from "./rules/no-unused-state";
 import noUselessFragment from "./rules/no-useless-fragment";
 import preferDestructuringAssignment from "./rules/prefer-destructuring-assignment";
+import preferReadonlyProps from "./rules/prefer-readonly-props";
 import preferShorthandBoolean from "./rules/prefer-shorthand-boolean";
 import preferShorthandFragment from "./rules/prefer-shorthand-fragment";
 
@@ -88,6 +89,7 @@ export const rules = {
   "no-unused-state": noUnusedState,
   "no-useless-fragment": noUselessFragment,
   "prefer-destructuring-assignment": preferDestructuringAssignment,
+  "prefer-readonly-props": preferReadonlyProps,
   "prefer-shorthand-boolean": preferShorthandBoolean,
   "prefer-shorthand-fragment": preferShorthandFragment,
 } as const;

packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.spec.ts

@@ -67,7 +67,7 @@ ruleTester.run(RULE_NAME, rule, {
 
         // Code to expect error
         export const App = memo(
-            function App(props) {
+            function App(props: Props) {
                 return <div ref={ref}>{props.day}</div>;
             }
         );

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

@@ -0,0 +1,106 @@
+import dedent from "dedent";
+
+import { allValid, ruleTesterWithTypes } from "../../../../../test";
+import rule, { RULE_NAME } from "./prefer-readonly-props";
+
+ruleTesterWithTypes.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: dedent`
+        const App = (props: { id: string; className: string }) => {
+            return <div id={props.id} className={props.className} />
+        }
+      `,
+      errors: [
+        {
+          messageId: "PREFER_READONLY_PROPS",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        function App(props: { id: string; className: string }) {
+            return <div id={props.id} className={props.className} />
+        }
+      `,
+      errors: [
+        {
+          messageId: "PREFER_READONLY_PROPS",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        const App = function (props: { id: string; className: string }) {
+            return <div id={props.id} className={props.className} />
+        }
+      `,
+      errors: [
+        {
+          messageId: "PREFER_READONLY_PROPS",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        import { FC } from "react";
+        const App: FC<{ id: string; className: string }> = (props) => {
+            return <div id={props.id} className={props.className} />
+        }
+      `,
+      errors: [
+        {
+          messageId: "PREFER_READONLY_PROPS",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        import React from "react";
+
+        export const App: React.FC<{ id: string; className: string }> = (props) => {
+          return <div className={props.className} id={props.id} />
+        }
+      `,
+      errors: [
+        {
+          messageId: "PREFER_READONLY_PROPS",
+        },
+      ],
+    },
+    {
+      code: dedent`
+        import React from "react";
+
+        export const App: React.FC<{ id: string; className: string } | { readonly id: string; readonly className: string }> = (props) => {
+          return <div className={props.className} id={props.id} />
+        }
+      `,
+      errors: [
+        {
+          messageId: "PREFER_READONLY_PROPS",
+        },
+      ],
+    },
+  ],
+  valid: [
+    ...allValid,
+    dedent`
+      import 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]>;}>;
+
+      export const App: React.FC<DeepReadonly<{ id: string; className: string }>> = (props) => {
+        return <div className={props.className} id={props.id} />
+      }
+    `,
+    dedent`
+      import React from "react";
+      import { ReadonlyDeep } from "type-fest";
+
+      export const App: React.FC<ReadonlyDeep<{ id: string; className: string }>> = (props) => {
+        return <div className={props.className} id={props.id} />
+      }
+    `,
+  ],
+});

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

@@ -0,0 +1,59 @@
+import { useComponentCollector } from "@eslint-react/core";
+import { getConstrainedTypeAtLocation } from "@typescript-eslint/type-utils";
+import { ESLintUtils } from "@typescript-eslint/utils";
+import { getTypeImmutability, isImmutable, isReadonlyDeep, isReadonlyShallow, isUnknown } from "is-immutable-type";
+import type { ConstantCase } from "string-ts";
+import * as tsutils from "ts-api-utils";
+import type ts from "typescript";
+
+import { createRule } from "../utils";
+
+export const RULE_NAME = "prefer-readonly-props";
+
+export type MessageID = ConstantCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "",
+    },
+    messages: {
+      PREFER_READONLY_PROPS: "Prefer readonly props",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create(context) {
+    const services = ESLintUtils.getParserServices(context);
+    const { ctx, listeners } = useComponentCollector(context);
+    return {
+      ...listeners,
+      "Program:exit"(node) {
+        function isReadonlyType(type: ts.Type) {
+          try {
+            // TODO: getImmutability may throw when checking complex generic types
+            const im = getTypeImmutability(services.program, type);
+            return isUnknown(im) || isImmutable(im) || isReadonlyShallow(im) || isReadonlyDeep(im);
+          } catch {
+            return true;
+          }
+        }
+        const components = ctx.getAllComponents(node);
+        for (const [_, component] of components) {
+          const props = component.node.params.at(0);
+          if (!props) continue;
+          const propsType = getConstrainedTypeAtLocation(services, props);
+          const propsTypes = tsutils.unionTypeParts(propsType);
+          if (propsTypes.some((type) => !isReadonlyType(type))) {
+            context.report({
+              messageId: "PREFER_READONLY_PROPS",
+              node: props,
+            });
+          }
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+}) satisfies ESLintUtils.RuleModule<MessageID>;