[new] Add jsx-props-no-spreading rule

[ashbhir]

This adds a rule to disallow JSX props spreading as it reduces both the readability and maintainability of the code. Fixes #1094.

So, instead of passing props like this:

function MyComponent(props) {
  return <MySubComponent {...props} />
}

This rule will enforce passing props like this:

function MyComponent(props) {
  return <MySubComponent one_prop={props.one_prop} two_prop={props.two_prop} />
}

[ljharb]

also hopefully like this:

function MyComponent({ one_prop, two_prop }) {
  return <MySubComponent one_prop={one_prop} two_prop={two_prop} />
}

[ljharb]

I think this will need an exceptions array option as well, since spreading props is actually necessary for HOCs.

Additionally, I think it would be ideal to provide another option that controls whether this rule applies to custom component elements, or HTML elements, or both.

[ashbhir]

I think this will need an exceptions array option as well, since spreading props is actually necessary for HOCs.

Additionally, I think it would be ideal to provide another option that controls whether this rule applies to custom component elements, or HTML elements, or both.

Added option allowedFor for catering exceptions, namely: HTMLTags, Components and selective custom components.

[ljharb]

hmm. Thanks for adding that! We probably should have discussed the schema a bit more :-)

Let's do something like this:

{
  html: 'enforce'/'ignore',
  custom: 'enforce'/'ignore',
  exceptions: ['ComponentName', 'OtherComponentName'],
}

and make sure it errors if html and custom are both false. An "exception" will always flip the resulting html or custom setting for that component - ie, html set to ignore, with an exception of div will enforce on a div; custom set to enforce with an exception of Foo will ignore Foo.

[ashbhir]

hmm. Thanks for adding that! We probably should have discussed the schema a bit more :-)

Let's do something like this:

{
  html: 'enforce'/'ignore',
  custom: 'enforce'/'ignore',
  exceptions: ['ComponentName', 'OtherComponentName'],
}

and make sure it errors if html and custom are both false. An "exception" will always flip the resulting html or custom setting for that component - ie, html set to ignore, with an exception of div will enforce on a div; custom set to enforce with an exception of Foo will ignore Foo.

Sure, made the respective changes.
and make sure it errors if htmlandcustom are both false. How do we do this in schema ?

[ljharb]

That's a good question :-) it'll probably have to be something like:

allOf: [
  {
    oneOf: [
      bothEnforce,
      htmlEnforceCustomIgnore,
      htmlIgnoreCustomEnforce
    ],
  },
  exceptionsSchema
]

[ashbhir]

That's a good question :-) it'll probably have to be something like:

allOf: [
  {
    oneOf: [
      bothEnforce,
      htmlEnforceCustomIgnore,
      htmlIgnoreCustomEnforce
    ],
  },
  exceptionsSchema
]

I think the allOf won't work as then one has to mention all properties. But one may just want to mention the exceptions assuming others to be set as default.
Also, do we really need to restrict both ignore mode? What if one wants to ignore everything barring some very important Custom Components. For them the configuration will be:

{
    html: 'ignore',
    custom: 'ignore',
    exceptions: ['CustomComponent', 'img']
}

@ljharb what do you think?

[ljharb]

ah true, that's a good point.

I'd like the schema to be as explicit as possible. If both are "ignore", then exceptions must not be empty.

[ashbhir]

ah true, that's a good point.

I'd like the schema to be as explicit as possible. If both are "ignore", then exceptions must not be empty.

@ljharb made the requested changes.

[ljharb]

Looks pretty good, thanks!