eslint-plugin-nextfriday 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-nextfriday
 
+## 1.2.0
+
+### Minor Changes
+
+- [#16](https://github.com/next-friday/eslint-plugin-nextfriday/pull/16) [`6059183`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/60591838ee3bbe9c5f1a497cb571028f973311b6) Thanks [@nextfridaydeveloper](https://github.com/nextfridaydeveloper)! - A new ESLint rule `enforce-readonly-component-props` that enforces the use of `Readonly<>` wrapper for React component props when using named types or interfaces. This rule helps prevent accidental mutations of props and makes the immutable nature of React props explicit in the type system.
+
 ## 1.1.1
 
 ### Patch Changes

package/README.md

@@ -69,6 +69,7 @@ export default [
       "nextfriday/jsx-pascal-case": "error",
       "nextfriday/prefer-interface-over-inline-types": "error",
       "nextfriday/react-props-destructure": "error",
+      "nextfriday/enforce-readonly-component-props": "error",
     },
   },
 ];
@@ -117,6 +118,7 @@ module.exports = {
 | [prefer-interface-over-inline-types](docs/rules/PREFER_INTERFACE_OVER_INLINE_TYPES.md) | Enforce interface declarations over inline types for React props | ❌      |
 | [prefer-react-import-types](docs/rules/PREFER_REACT_IMPORT_TYPES.md)                   | Enforce direct imports from 'react' instead of React.X           | ✅      |
 | [react-props-destructure](docs/rules/REACT_PROPS_DESTRUCTURE.md)                       | Enforce destructuring props inside React component body          | ❌      |
+| [enforce-readonly-component-props](docs/rules/ENFORCE_READONLY_COMPONENT_PROPS.md)     | Enforce Readonly wrapper for React component props               | ✅      |
 
 ## Configurations
 
@@ -148,6 +150,7 @@ Includes all base rules plus React-specific rules:
 - `nextfriday/jsx-pascal-case`: `"error"`
 - `nextfriday/prefer-interface-over-inline-types`: `"error"`
 - `nextfriday/react-props-destructure`: `"error"`
+- `nextfriday/enforce-readonly-component-props`: `"error"`
 
 #### `react/recommended`
 
@@ -163,6 +166,7 @@ Includes all rules suitable for Next.js projects:
 - `nextfriday/jsx-pascal-case`: `"error"`
 - `nextfriday/prefer-interface-over-inline-types`: `"error"`
 - `nextfriday/react-props-destructure`: `"error"`
+- `nextfriday/enforce-readonly-component-props`: `"error"`
 
 #### `nextjs/recommended`
 

package/docs/rules/ENFORCE_READONLY_COMPONENT_PROPS.md

@@ -0,0 +1,104 @@
+# enforce-readonly-component-props
+
+Enforce `Readonly<>` wrapper for React component props when using named types or interfaces.
+
+## Rule Details
+
+This rule enforces that React component props using named types (interfaces or type aliases) must be wrapped with `Readonly<>` for immutability. This helps prevent accidental mutations of props and makes the immutable nature of React props explicit in the type system.
+
+## Examples
+
+### ❌ Incorrect
+
+```tsx
+interface Props {
+  children: ReactNode;
+}
+const Component = (props: Props) => <div>{props.children}</div>;
+```
+
+```tsx
+type ComponentProps = {
+  title: string;
+  onClick: () => void;
+};
+const Component = (props: ComponentProps) => <div>{props.title}</div>;
+```
+
+```tsx
+interface LayoutProps {
+  children: ReactNode;
+  title?: string;
+}
+function Layout(props: LayoutProps) {
+  return <div>{props.children}</div>;
+}
+```
+
+### ✅ Correct
+
+```tsx
+interface Props {
+  children: ReactNode;
+}
+const Component = (props: Readonly<Props>) => <div>{props.children}</div>;
+```
+
+```tsx
+type ComponentProps = {
+  title: string;
+  onClick: () => void;
+};
+const Component = (props: Readonly<ComponentProps>) => <div>{props.title}</div>;
+```
+
+```tsx
+interface LayoutProps {
+  children: ReactNode;
+  title?: string;
+}
+function Layout(props: Readonly<LayoutProps>) {
+  return <div>{props.children}</div>;
+}
+```
+
+```tsx
+// Inline types are handled by prefer-interface-over-inline-types rule
+const Component = (props: { children: ReactNode }) => <div>{props.children}</div>;
+```
+
+```tsx
+// Non-React functions are ignored
+interface HelperProps {
+  value: number;
+}
+const helper = (props: HelperProps) => {
+  return props.value * 2;
+};
+```
+
+## When Not To Use
+
+This rule should not be used if:
+
+- You prefer inline types for component props (use `prefer-interface-over-inline-types` instead)
+- You don't want to enforce immutability patterns in your React components
+- You're working with a codebase that doesn't use TypeScript strict mode
+
+## Fixable
+
+This rule is fixable using ESLint's `--fix` option. The fixer will automatically wrap named types with `Readonly<>`.
+
+## Related Rules
+
+- [`prefer-interface-over-inline-types`](./PREFER_INTERFACE_OVER_INLINE_TYPES.md) - Enforces interface declarations over inline types
+- [`react-props-destructure`](./REACT_PROPS_DESTRUCTURE.md) - Enforces destructuring props inside component body
+
+## Configuration
+
+This rule is included in the following configurations:
+
+- `react` (warn)
+- `react/recommended` (error)
+- `nextjs` (warn)
+- `nextjs/recommended` (error)

package/lib/index.cjs

@@ -40,7 +40,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "eslint-plugin-nextfriday",
-  version: "1.1.1",
+  version: "1.2.0",
   description: "A comprehensive ESLint plugin providing custom rules and configurations for Next Friday development workflows.",
   keywords: [
     "eslint",
@@ -155,19 +155,111 @@ var package_default = {
   }
 };
 
-// src/rules/file-kebab-case.ts
-var import_path = __toESM(require("path"), 1);
+// src/rules/enforce-readonly-component-props.ts
 var import_utils = require("@typescript-eslint/utils");
 var createRule = import_utils.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
+var enforceReadonlyComponentProps = createRule({
+  name: "enforce-readonly-component-props",
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Enforce Readonly wrapper for React component props when using named types or interfaces"
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      useReadonly: "Component props should be wrapped with Readonly<> for immutability"
+    }
+  },
+  defaultOptions: [],
+  create(context) {
+    function hasJSXInConditional(node) {
+      return node.consequent.type === import_utils.AST_NODE_TYPES.JSXElement || node.consequent.type === import_utils.AST_NODE_TYPES.JSXFragment || node.alternate.type === import_utils.AST_NODE_TYPES.JSXElement || node.alternate.type === import_utils.AST_NODE_TYPES.JSXFragment;
+    }
+    function hasJSXInLogical(node) {
+      return node.right.type === import_utils.AST_NODE_TYPES.JSXElement || node.right.type === import_utils.AST_NODE_TYPES.JSXFragment;
+    }
+    function hasJSXReturn(block) {
+      return block.body.some((stmt) => {
+        if (stmt.type === import_utils.AST_NODE_TYPES.ReturnStatement && stmt.argument) {
+          return stmt.argument.type === import_utils.AST_NODE_TYPES.JSXElement || stmt.argument.type === import_utils.AST_NODE_TYPES.JSXFragment || stmt.argument.type === import_utils.AST_NODE_TYPES.ConditionalExpression && hasJSXInConditional(stmt.argument) || stmt.argument.type === import_utils.AST_NODE_TYPES.LogicalExpression && hasJSXInLogical(stmt.argument);
+        }
+        return false;
+      });
+    }
+    function isReactComponent(node) {
+      if (node.type === import_utils.AST_NODE_TYPES.ArrowFunctionExpression) {
+        if (node.body.type === import_utils.AST_NODE_TYPES.JSXElement || node.body.type === import_utils.AST_NODE_TYPES.JSXFragment) {
+          return true;
+        }
+        if (node.body.type === import_utils.AST_NODE_TYPES.BlockStatement) {
+          return hasJSXReturn(node.body);
+        }
+      } else if (node.type === import_utils.AST_NODE_TYPES.FunctionExpression || node.type === import_utils.AST_NODE_TYPES.FunctionDeclaration) {
+        if (node.body && node.body.type === import_utils.AST_NODE_TYPES.BlockStatement) {
+          return hasJSXReturn(node.body);
+        }
+      }
+      return false;
+    }
+    function isNamedType(node) {
+      return node.type === import_utils.AST_NODE_TYPES.TSTypeReference;
+    }
+    function isAlreadyReadonly(node) {
+      if (node.type === import_utils.AST_NODE_TYPES.TSTypeReference && node.typeName) {
+        if (node.typeName.type === import_utils.AST_NODE_TYPES.Identifier && node.typeName.name === "Readonly") {
+          return true;
+        }
+      }
+      return false;
+    }
+    function checkFunction(node) {
+      if (!isReactComponent(node)) {
+        return;
+      }
+      if (node.params.length !== 1) {
+        return;
+      }
+      const param = node.params[0];
+      if (param.type === import_utils.AST_NODE_TYPES.Identifier && param.typeAnnotation) {
+        const { typeAnnotation } = param.typeAnnotation;
+        if (isNamedType(typeAnnotation) && !isAlreadyReadonly(typeAnnotation)) {
+          const { sourceCode } = context;
+          const typeText = sourceCode.getText(typeAnnotation);
+          context.report({
+            node: param.typeAnnotation,
+            messageId: "useReadonly",
+            fix(fixer) {
+              return fixer.replaceText(typeAnnotation, `Readonly<${typeText}>`);
+            }
+          });
+        }
+      }
+    }
+    return {
+      ArrowFunctionExpression: checkFunction,
+      FunctionExpression: checkFunction,
+      FunctionDeclaration: checkFunction
+    };
+  }
+});
+var enforce_readonly_component_props_default = enforceReadonlyComponentProps;
+
+// src/rules/file-kebab-case.ts
+var import_path = __toESM(require("path"), 1);
+var import_utils2 = require("@typescript-eslint/utils");
+var createRule2 = import_utils2.ESLintUtils.RuleCreator(
+  (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
+);
 var isKebabCase = (str) => {
   if (/\.(config|rc|setup|spec|test)$/.test(str)) {
     return /^[a-z0-9]+(?:-[a-z0-9]+)*(?:\.[a-z0-9]+)*$/.test(str);
   }
   return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(str);
 };
-var fileKebabCase = createRule({
+var fileKebabCase = createRule2({
   name: "file-kebab-case",
   meta: {
     type: "problem",
@@ -203,12 +295,12 @@ var file_kebab_case_default = fileKebabCase;
 
 // src/rules/jsx-pascal-case.ts
 var import_path2 = __toESM(require("path"), 1);
-var import_utils2 = require("@typescript-eslint/utils");
-var createRule2 = import_utils2.ESLintUtils.RuleCreator(
+var import_utils3 = require("@typescript-eslint/utils");
+var createRule3 = import_utils3.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
 var isPascalCase = (str) => /^[A-Z][a-zA-Z0-9]*$/.test(str) && !/^[A-Z]+$/.test(str);
-var jsxPascalCase = createRule2({
+var jsxPascalCase = createRule3({
   name: "jsx-pascal-case",
   meta: {
     type: "problem",
@@ -244,11 +336,11 @@ var jsx_pascal_case_default = jsxPascalCase;
 
 // src/rules/md-filename-case-restriction.ts
 var import_path3 = __toESM(require("path"), 1);
-var import_utils3 = require("@typescript-eslint/utils");
-var createRule3 = import_utils3.ESLintUtils.RuleCreator(
+var import_utils4 = require("@typescript-eslint/utils");
+var createRule4 = import_utils4.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
-var mdFilenameCaseRestriction = createRule3({
+var mdFilenameCaseRestriction = createRule4({
   name: "md-filename-case-restriction",
   meta: {
     type: "problem",
@@ -290,11 +382,11 @@ var md_filename_case_restriction_default = mdFilenameCaseRestriction;
 
 // src/rules/no-emoji.ts
 var import_emoji_regex = __toESM(require("emoji-regex"), 1);
-var import_utils4 = require("@typescript-eslint/utils");
-var createRule4 = import_utils4.ESLintUtils.RuleCreator(
+var import_utils5 = require("@typescript-eslint/utils");
+var createRule5 = import_utils5.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
-var noEmoji = createRule4({
+var noEmoji = createRule5({
   name: "no-emoji",
   meta: {
     type: "problem",
@@ -328,11 +420,11 @@ var noEmoji = createRule4({
 var no_emoji_default = noEmoji;
 
 // src/rules/no-explicit-return-type.ts
-var import_utils5 = require("@typescript-eslint/utils");
-var createRule5 = import_utils5.ESLintUtils.RuleCreator(
+var import_utils6 = require("@typescript-eslint/utils");
+var createRule6 = import_utils6.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
-var noExplicitReturnType = createRule5({
+var noExplicitReturnType = createRule6({
   name: "no-explicit-return-type",
   meta: {
     type: "suggestion",
@@ -372,11 +464,11 @@ var noExplicitReturnType = createRule5({
 var no_explicit_return_type_default = noExplicitReturnType;
 
 // src/rules/prefer-destructuring-params.ts
-var import_utils6 = require("@typescript-eslint/utils");
-var createRule6 = import_utils6.ESLintUtils.RuleCreator(
+var import_utils7 = require("@typescript-eslint/utils");
+var createRule7 = import_utils7.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
-var preferDestructuringParams = createRule6({
+var preferDestructuringParams = createRule7({
   name: "prefer-destructuring-params",
   meta: {
     type: "suggestion",
@@ -395,7 +487,7 @@ var preferDestructuringParams = createRule6({
         return;
       }
       const hasNonDestructuredParams = node.params.some(
-        (param) => param.type !== import_utils6.AST_NODE_TYPES.ObjectPattern && param.type !== import_utils6.AST_NODE_TYPES.RestElement
+        (param) => param.type !== import_utils7.AST_NODE_TYPES.ObjectPattern && param.type !== import_utils7.AST_NODE_TYPES.RestElement
       );
       if (hasNonDestructuredParams) {
         context.report({
@@ -414,11 +506,11 @@ var preferDestructuringParams = createRule6({
 var prefer_destructuring_params_default = preferDestructuringParams;
 
 // src/rules/prefer-import-type.ts
-var import_utils7 = require("@typescript-eslint/utils");
-var createRule7 = import_utils7.ESLintUtils.RuleCreator(
+var import_utils8 = require("@typescript-eslint/utils");
+var createRule8 = import_utils8.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
-var preferImportType = createRule7({
+var preferImportType = createRule8({
   name: "prefer-import-type",
   meta: {
     type: "suggestion",
@@ -449,14 +541,14 @@ var preferImportType = createRule7({
         return;
       }
       const isTypeOnlyImport = node.specifiers.every((specifier) => {
-        if (specifier.type === import_utils7.AST_NODE_TYPES.ImportDefaultSpecifier) {
+        if (specifier.type === import_utils8.AST_NODE_TYPES.ImportDefaultSpecifier) {
           return false;
         }
-        if (specifier.type === import_utils7.AST_NODE_TYPES.ImportNamespaceSpecifier) {
+        if (specifier.type === import_utils8.AST_NODE_TYPES.ImportNamespaceSpecifier) {
           return false;
         }
-        if (specifier.type === import_utils7.AST_NODE_TYPES.ImportSpecifier) {
-          const importedName = specifier.imported.type === import_utils7.AST_NODE_TYPES.Identifier ? specifier.imported.name : specifier.imported.value;
+        if (specifier.type === import_utils8.AST_NODE_TYPES.ImportSpecifier) {
+          const importedName = specifier.imported.type === import_utils8.AST_NODE_TYPES.Identifier ? specifier.imported.name : specifier.imported.value;
           const isKnownTypeOnly = node.source.value === "@typescript-eslint/utils" && ["TSESTree", "RuleContext"].includes(importedName) || node.source.value === "react" && ["Component", "ComponentProps", "ReactNode", "FC", "JSX", "ReactElement", "PropsWithChildren"].includes(
             importedName
           ) || importedName.endsWith("Type") || importedName.endsWith("Interface") || importedName.endsWith("Props");
@@ -484,11 +576,11 @@ var preferImportType = createRule7({
 var prefer_import_type_default = preferImportType;
 
 // src/rules/prefer-interface-over-inline-types.ts
-var import_utils8 = require("@typescript-eslint/utils");
-var createRule8 = import_utils8.ESLintUtils.RuleCreator(
+var import_utils9 = require("@typescript-eslint/utils");
+var createRule9 = import_utils9.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
-var preferInterfaceOverInlineTypes = createRule8({
+var preferInterfaceOverInlineTypes = createRule9({
   name: "prefer-interface-over-inline-types",
   meta: {
     type: "suggestion",
@@ -504,54 +596,54 @@ var preferInterfaceOverInlineTypes = createRule8({
   defaultOptions: [],
   create(context) {
     function hasJSXInConditional(node) {
-      return node.consequent.type === import_utils8.AST_NODE_TYPES.JSXElement || node.consequent.type === import_utils8.AST_NODE_TYPES.JSXFragment || node.alternate.type === import_utils8.AST_NODE_TYPES.JSXElement || node.alternate.type === import_utils8.AST_NODE_TYPES.JSXFragment;
+      return node.consequent.type === import_utils9.AST_NODE_TYPES.JSXElement || node.consequent.type === import_utils9.AST_NODE_TYPES.JSXFragment || node.alternate.type === import_utils9.AST_NODE_TYPES.JSXElement || node.alternate.type === import_utils9.AST_NODE_TYPES.JSXFragment;
     }
     function hasJSXInLogical(node) {
-      return node.right.type === import_utils8.AST_NODE_TYPES.JSXElement || node.right.type === import_utils8.AST_NODE_TYPES.JSXFragment;
+      return node.right.type === import_utils9.AST_NODE_TYPES.JSXElement || node.right.type === import_utils9.AST_NODE_TYPES.JSXFragment;
     }
     function hasJSXReturn(block) {
       return block.body.some((stmt) => {
-        if (stmt.type === import_utils8.AST_NODE_TYPES.ReturnStatement && stmt.argument) {
-          return stmt.argument.type === import_utils8.AST_NODE_TYPES.JSXElement || stmt.argument.type === import_utils8.AST_NODE_TYPES.JSXFragment || stmt.argument.type === import_utils8.AST_NODE_TYPES.ConditionalExpression && hasJSXInConditional(stmt.argument) || stmt.argument.type === import_utils8.AST_NODE_TYPES.LogicalExpression && hasJSXInLogical(stmt.argument);
+        if (stmt.type === import_utils9.AST_NODE_TYPES.ReturnStatement && stmt.argument) {
+          return stmt.argument.type === import_utils9.AST_NODE_TYPES.JSXElement || stmt.argument.type === import_utils9.AST_NODE_TYPES.JSXFragment || stmt.argument.type === import_utils9.AST_NODE_TYPES.ConditionalExpression && hasJSXInConditional(stmt.argument) || stmt.argument.type === import_utils9.AST_NODE_TYPES.LogicalExpression && hasJSXInLogical(stmt.argument);
         }
         return false;
       });
     }
     function isReactComponent(node) {
-      if (node.type === import_utils8.AST_NODE_TYPES.ArrowFunctionExpression) {
-        if (node.body.type === import_utils8.AST_NODE_TYPES.JSXElement || node.body.type === import_utils8.AST_NODE_TYPES.JSXFragment) {
+      if (node.type === import_utils9.AST_NODE_TYPES.ArrowFunctionExpression) {
+        if (node.body.type === import_utils9.AST_NODE_TYPES.JSXElement || node.body.type === import_utils9.AST_NODE_TYPES.JSXFragment) {
           return true;
         }
-        if (node.body.type === import_utils8.AST_NODE_TYPES.BlockStatement) {
+        if (node.body.type === import_utils9.AST_NODE_TYPES.BlockStatement) {
           return hasJSXReturn(node.body);
         }
-      } else if (node.type === import_utils8.AST_NODE_TYPES.FunctionExpression || node.type === import_utils8.AST_NODE_TYPES.FunctionDeclaration) {
-        if (node.body && node.body.type === import_utils8.AST_NODE_TYPES.BlockStatement) {
+      } else if (node.type === import_utils9.AST_NODE_TYPES.FunctionExpression || node.type === import_utils9.AST_NODE_TYPES.FunctionDeclaration) {
+        if (node.body && node.body.type === import_utils9.AST_NODE_TYPES.BlockStatement) {
           return hasJSXReturn(node.body);
         }
       }
       return false;
     }
     function isInlineTypeAnnotation(node) {
-      if (node.type === import_utils8.AST_NODE_TYPES.TSTypeLiteral) {
+      if (node.type === import_utils9.AST_NODE_TYPES.TSTypeLiteral) {
         return true;
       }
-      if (node.type === import_utils8.AST_NODE_TYPES.TSTypeReference && node.typeArguments) {
-        return node.typeArguments.params.some((param) => param.type === import_utils8.AST_NODE_TYPES.TSTypeLiteral);
+      if (node.type === import_utils9.AST_NODE_TYPES.TSTypeReference && node.typeArguments) {
+        return node.typeArguments.params.some((param) => param.type === import_utils9.AST_NODE_TYPES.TSTypeLiteral);
       }
-      if (node.type === import_utils8.AST_NODE_TYPES.TSUnionType) {
+      if (node.type === import_utils9.AST_NODE_TYPES.TSUnionType) {
         return node.types.some((type) => isInlineTypeAnnotation(type));
       }
       return false;
     }
     function hasInlineObjectType(node) {
-      if (node.type === import_utils8.AST_NODE_TYPES.TSTypeLiteral) {
+      if (node.type === import_utils9.AST_NODE_TYPES.TSTypeLiteral) {
         return true;
       }
-      if (node.type === import_utils8.AST_NODE_TYPES.TSTypeReference && node.typeArguments) {
-        return node.typeArguments.params.some((param) => param.type === import_utils8.AST_NODE_TYPES.TSTypeLiteral);
+      if (node.type === import_utils9.AST_NODE_TYPES.TSTypeReference && node.typeArguments) {
+        return node.typeArguments.params.some((param) => param.type === import_utils9.AST_NODE_TYPES.TSTypeLiteral);
       }
-      if (node.type === import_utils8.AST_NODE_TYPES.TSUnionType) {
+      if (node.type === import_utils9.AST_NODE_TYPES.TSUnionType) {
         return node.types.some((type) => hasInlineObjectType(type));
       }
       return false;
@@ -564,7 +656,7 @@ var preferInterfaceOverInlineTypes = createRule8({
         return;
       }
       const param = node.params[0];
-      if (param.type === import_utils8.AST_NODE_TYPES.Identifier && param.typeAnnotation) {
+      if (param.type === import_utils9.AST_NODE_TYPES.Identifier && param.typeAnnotation) {
         const { typeAnnotation } = param.typeAnnotation;
         if (isInlineTypeAnnotation(typeAnnotation) && hasInlineObjectType(typeAnnotation)) {
           context.report({
@@ -584,11 +676,11 @@ var preferInterfaceOverInlineTypes = createRule8({
 var prefer_interface_over_inline_types_default = preferInterfaceOverInlineTypes;
 
 // src/rules/prefer-react-import-types.ts
-var import_utils9 = require("@typescript-eslint/utils");
-var createRule9 = import_utils9.ESLintUtils.RuleCreator(
+var import_utils10 = require("@typescript-eslint/utils");
+var createRule10 = import_utils10.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
-var preferReactImportTypes = createRule9({
+var preferReactImportTypes = createRule10({
   name: "prefer-react-import-types",
   meta: {
     type: "suggestion",
@@ -664,7 +756,7 @@ var preferReactImportTypes = createRule9({
     ]);
     const allReactExports = /* @__PURE__ */ new Set([...reactTypes, ...reactRuntimeExports]);
     function checkMemberExpression(node) {
-      if (node.object.type === import_utils9.AST_NODE_TYPES.Identifier && node.object.name === "React" && node.property.type === import_utils9.AST_NODE_TYPES.Identifier && allReactExports.has(node.property.name)) {
+      if (node.object.type === import_utils10.AST_NODE_TYPES.Identifier && node.object.name === "React" && node.property.type === import_utils10.AST_NODE_TYPES.Identifier && allReactExports.has(node.property.name)) {
         const typeName = node.property.name;
         const isType = reactTypes.has(typeName);
         const importStatement = isType ? `import type { ${typeName} } from "react"` : `import { ${typeName} } from "react"`;
@@ -681,7 +773,7 @@ var preferReactImportTypes = createRule9({
     return {
       MemberExpression: checkMemberExpression,
       "TSTypeReference > TSQualifiedName": (node) => {
-        if (node.left.type === import_utils9.AST_NODE_TYPES.Identifier && node.left.name === "React" && node.right.type === import_utils9.AST_NODE_TYPES.Identifier && allReactExports.has(node.right.name)) {
+        if (node.left.type === import_utils10.AST_NODE_TYPES.Identifier && node.left.name === "React" && node.right.type === import_utils10.AST_NODE_TYPES.Identifier && allReactExports.has(node.right.name)) {
           const typeName = node.right.name;
           const isType = reactTypes.has(typeName);
           const importStatement = isType ? `import type { ${typeName} } from "react"` : `import { ${typeName} } from "react"`;
@@ -701,11 +793,11 @@ var preferReactImportTypes = createRule9({
 var prefer_react_import_types_default = preferReactImportTypes;
 
 // src/rules/react-props-destructure.ts
-var import_utils10 = require("@typescript-eslint/utils");
-var createRule10 = import_utils10.ESLintUtils.RuleCreator(
+var import_utils11 = require("@typescript-eslint/utils");
+var createRule11 = import_utils11.ESLintUtils.RuleCreator(
   (name) => `https://github.com/next-friday/eslint-plugin-nextfriday/blob/main/docs/rules/${name}.md`
 );
-var reactPropsDestructure = createRule10({
+var reactPropsDestructure = createRule11({
   name: "react-props-destructure",
   meta: {
     type: "suggestion",
@@ -721,29 +813,29 @@ var reactPropsDestructure = createRule10({
   defaultOptions: [],
   create(context) {
     function hasJSXInConditional(node) {
-      return node.consequent.type === import_utils10.AST_NODE_TYPES.JSXElement || node.consequent.type === import_utils10.AST_NODE_TYPES.JSXFragment || node.alternate.type === import_utils10.AST_NODE_TYPES.JSXElement || node.alternate.type === import_utils10.AST_NODE_TYPES.JSXFragment;
+      return node.consequent.type === import_utils11.AST_NODE_TYPES.JSXElement || node.consequent.type === import_utils11.AST_NODE_TYPES.JSXFragment || node.alternate.type === import_utils11.AST_NODE_TYPES.JSXElement || node.alternate.type === import_utils11.AST_NODE_TYPES.JSXFragment;
     }
     function hasJSXInLogical(node) {
-      return node.right.type === import_utils10.AST_NODE_TYPES.JSXElement || node.right.type === import_utils10.AST_NODE_TYPES.JSXFragment;
+      return node.right.type === import_utils11.AST_NODE_TYPES.JSXElement || node.right.type === import_utils11.AST_NODE_TYPES.JSXFragment;
     }
     function hasJSXReturn(block) {
       return block.body.some((stmt) => {
-        if (stmt.type === import_utils10.AST_NODE_TYPES.ReturnStatement && stmt.argument) {
-          return stmt.argument.type === import_utils10.AST_NODE_TYPES.JSXElement || stmt.argument.type === import_utils10.AST_NODE_TYPES.JSXFragment || stmt.argument.type === import_utils10.AST_NODE_TYPES.ConditionalExpression && hasJSXInConditional(stmt.argument) || stmt.argument.type === import_utils10.AST_NODE_TYPES.LogicalExpression && hasJSXInLogical(stmt.argument);
+        if (stmt.type === import_utils11.AST_NODE_TYPES.ReturnStatement && stmt.argument) {
+          return stmt.argument.type === import_utils11.AST_NODE_TYPES.JSXElement || stmt.argument.type === import_utils11.AST_NODE_TYPES.JSXFragment || stmt.argument.type === import_utils11.AST_NODE_TYPES.ConditionalExpression && hasJSXInConditional(stmt.argument) || stmt.argument.type === import_utils11.AST_NODE_TYPES.LogicalExpression && hasJSXInLogical(stmt.argument);
         }
         return false;
       });
     }
     function isReactComponent(node) {
-      if (node.type === import_utils10.AST_NODE_TYPES.ArrowFunctionExpression) {
-        if (node.body.type === import_utils10.AST_NODE_TYPES.JSXElement || node.body.type === import_utils10.AST_NODE_TYPES.JSXFragment) {
+      if (node.type === import_utils11.AST_NODE_TYPES.ArrowFunctionExpression) {
+        if (node.body.type === import_utils11.AST_NODE_TYPES.JSXElement || node.body.type === import_utils11.AST_NODE_TYPES.JSXFragment) {
           return true;
         }
-        if (node.body.type === import_utils10.AST_NODE_TYPES.BlockStatement) {
+        if (node.body.type === import_utils11.AST_NODE_TYPES.BlockStatement) {
           return hasJSXReturn(node.body);
         }
-      } else if (node.type === import_utils10.AST_NODE_TYPES.FunctionExpression || node.type === import_utils10.AST_NODE_TYPES.FunctionDeclaration) {
-        if (node.body && node.body.type === import_utils10.AST_NODE_TYPES.BlockStatement) {
+      } else if (node.type === import_utils11.AST_NODE_TYPES.FunctionExpression || node.type === import_utils11.AST_NODE_TYPES.FunctionDeclaration) {
+        if (node.body && node.body.type === import_utils11.AST_NODE_TYPES.BlockStatement) {
           return hasJSXReturn(node.body);
         }
       }
@@ -757,9 +849,9 @@ var reactPropsDestructure = createRule10({
         return;
       }
       const param = node.params[0];
-      if (param.type === import_utils10.AST_NODE_TYPES.ObjectPattern) {
-        const properties = param.properties.filter((prop) => prop.type === import_utils10.AST_NODE_TYPES.Property).map((prop) => {
-          if (prop.key.type === import_utils10.AST_NODE_TYPES.Identifier) {
+      if (param.type === import_utils11.AST_NODE_TYPES.ObjectPattern) {
+        const properties = param.properties.filter((prop) => prop.type === import_utils11.AST_NODE_TYPES.Property).map((prop) => {
+          if (prop.key.type === import_utils11.AST_NODE_TYPES.Identifier) {
             return prop.key.name;
           }
           return null;
@@ -791,6 +883,7 @@ var meta = {
   version: package_default.version
 };
 var rules = {
+  "enforce-readonly-component-props": enforce_readonly_component_props_default,
   "file-kebab-case": file_kebab_case_default,
   "jsx-pascal-case": jsx_pascal_case_default,
   "md-filename-case-restriction": md_filename_case_restriction_default,
@@ -827,12 +920,14 @@ var baseRecommendedRules = {
 var jsxRules = {
   "nextfriday/jsx-pascal-case": "warn",
   "nextfriday/prefer-interface-over-inline-types": "warn",
-  "nextfriday/react-props-destructure": "warn"
+  "nextfriday/react-props-destructure": "warn",
+  "nextfriday/enforce-readonly-component-props": "warn"
 };
 var jsxRecommendedRules = {
   "nextfriday/jsx-pascal-case": "error",
   "nextfriday/prefer-interface-over-inline-types": "error",
-  "nextfriday/react-props-destructure": "error"
+  "nextfriday/react-props-destructure": "error",
+  "nextfriday/enforce-readonly-component-props": "error"
 };
 var createConfig = (configRules) => ({
   plugins: {