Eslint-plugin-react: New rule: identify missing PropType definition

[joetidee]

I accidentally forgot to add the PropTypes assignment to a prop and this was not picked up by eslint:

const propTypes = {
    actions: {
        something: PropTypes.func.isRequired,
    }.isRequired,
};

should have been

const propTypes = {
    actions: PropTypes.shape({
        something: PropTypes.func.isRequired,
    }).isRequired,
};

[ljharb]

I'd expect the first example to give you a missing propType warning for "actions"

[joetidee]

it didn't.

[ljharb]

Would you think this has to be a new rule, or would you think an existing rule should be covering it?

[joetidee]

It's an interesting question because the error does throw up in the browser console so React is recognising that the property has not been correctly assigned a PropTypes.*. So, should eslint allow us developers to catch this in the build pipelines before it gets to production - i think yes. Currently, there isn't a rule that could cover this, so perhaps we need a rule called no-proptype-assigment ?

[ljharb]

It seems like it would specifically be concerned with the case of a plain object literal being used as a propType value?

[joetidee]

Either that or that the property does not have a PropTypes assignment.

[ljharb]

Custom propTypes are very common, so in no way should propTypes be restricted to PropTypes values.

[joetidee]

Ah I see. In which case if custom PropTypes have to take the form of a function, then I guess, yes, it is detecting that it is an object literal and throwing an error of incorrect-proptype

[ljharb]

Maybe no-invalid-prop-types, and it could ensure that every propType value was either a function, the return value of a function (like PropTypes.oneOf), or something imported/required?