Deprecated PropType

[milesj]

A new PropType for denoting a prop as deprecated would be useful in slowly migrating components. It would simply call console.warn in non-production and pass through the original PropType.

Something like the following:

import { deprecated } from 'airbnb-prop-types';

const propTypes = {
  title: deprecated(PropTypes.string, 'Please use "children" instead.'),
  children: PropTypes.node,
};

[ljharb]

Since responsible apps make console warnings fail tests, that would cause deprecated propTypes to fail tests.

[milesj]

We could use console.info, or not log when NODE_ENV is "test". There are work-arounds to that issue.

[ljharb]

That's fair. console.info is probably better since NODE_ENV is rarely set to "test" in projects.

All of our propTypes have .isRequired options; what would a required + deprecated prop do?

[milesj]

Been thinking about that. The most I came up with is either a no-op, or it sets required on the 1st argument PropType.

[ljharb]

The latter makes the most sense to me - but the concept of a required deprecated propType might not make sense at all, given that if it's required, you can't migrate off of it.

[indexzero]

@ljharb PropTypes.deprecated would certainly be useful from my perspective, but as you mentioned PropTypes.deprecated.isRequired makes little sense. Most of the time I am deprecating a prop it is in favor of something else, which mutuallyExclusiveProps appears to help handle today.

e.g. consider a scenario where a Component currently has an onChange prop:

SomeComponent.propTypes = {
  onChange: PropTypes.func.isRequired
};

for various reasons it is decided to rename this prop to onValueChange (e.g. for consistency with other components prop names). In this case, as we roll-out the deprecation to be kind to our users in their upgrade timing we would want something like:

import { func } from 'prop-types';

const upgrade = mutuallyExclusiveProps(func, 'onChange', 'onValueChange');
SomeComponent.propTypes = {
  onValueChange: upgrade
  onChange: deprecated(upgrade)
};

Then once we've finally removed the deprecated property we can go back to the same as before:

SomeComponent.propTypes = {
  onValueChange: PropTypes.func.isRequired
};

[ljharb]

Sure, that's a reasonable pattern. However, I'd compose propTypes and make one of onValueChange or onChange required for the transition, otherwise you've created a window where neither might be passed.