[prefer-readonly-type] - Add an option to opt out of function parameters check

[avalanche1]

The readonly word in fn parameters when declaring a function takes up really much editor space. With my max-len settings my editor breaks up a simple functional component declaration into many lines.
I have another es-lint rule that checks that fn arguments are not mutated.

I like:

export function UserCanSeeStoryboardDashboard({text}: {text: string}): JSX.Element {
  // ...
}

I don't like:

export function UserCanSeeStoryboardDashboard({
  text,
}: {
  readonly text: string;
}): JSX.Element {
  // ...
}

[tomsdev]

I have another es-lint rule that checks that fn arguments are not mutated.

Are you referring to the rule prefer-readonly-parameters ?

[RebeccaStevens]

@avalanche1, I assume you are creating a React Functional Component in the given example. Wouldn't it be best to pull out the prop's type into it's own declared type like this:

type Props = {
  readonly text: string;
}

export function UserCanSeeStoryboardDashboard({ text }: Props): JSX.Element {
  // ...
}

Also, the return type of such an function should be of type FunctionalComponentElement (rather than JSX.Element):

type Props = {
  readonly text: string;
}

type Element = React.FunctionalComponentElement<Props>;

export function UserCanSeeStoryboardDashboard({ text }: Props): Element {
  // ...
}

If you use an arrow function expression instead of a function declaration, you can just declare the function as a whole to be a FunctionalComponent. The parameter types and return type will then be inferred from this:

type Props = {
  readonly text: string;
}

type Component = React.FunctionalComponent<Props>;

export const UserCanSeeStoryboardDashboard: Component = ({ text }) => {
  // ...
};

[avalanche1]

Are you referring to the rule prefer-readonly-parameters ?

no-param-reassign

Wouldn't it be best to pull out the prop's type into it's own declared type like this

It depends. If there are multiple params - then yes. If there is one-two params - why the bloat?

Also, the return type of such an function should be of type FunctionalComponentElement (rather than JSX.Element):

JSX.Element has been working just fine for us so far

If you use an arrow function expression instead of a function declaration,

Our code style guide prohibits usage of function expressions. We like top-down approach to code which Makes heavy use of function hoisting (which is why we ❤️ JS).

[RebeccaStevens]

no-param-reassign doesn't prevent changing sub-properties of a parameter.

why the bloat?

In my opinion this wouldn't be bloat; instead it would be a separation of type and executable code.
As a side note, I'd also recommended exporting the props type (as well as the component type).

JSX.Element has been working just fine for us so far

JSX.Element vs React.FunctionalComponentElement<Props> is like Array<any> vs Array<SomeDataStructure>. It works but it's more generic.

[RebeccaStevens]

I think I'm going to close this issue as parameters should be readonly.
#51 will make inline readonly parameter less ugly once it's implemented.