Rule proposal: disallow referencing another component's propTypes

Some people might want to use babel-plugin-transform-react-remove-prop-types to remove propTypes from their components in production builds, as an optimization. This transform changes code like:

const Baz = () => (
  <div />
);

Baz.propTypes = {
  foo: React.PropTypes.string
};

into:

const Baz = () => (
  <div />
);

This works, but might end up breaking things in production if you import a component and then reference that component’s propTypes. Instead, the propTypes should be separately exported in this case and referenced directly from the export.

Bad:

import { pick } from 'lodash';

import SomeComponent from './SomeComponent';

export default function AnotherComponent(props) {
  const passedProps = pick(props, Object.keys(SomeComponent.propTypes));
  return (
    <SomeComponent {...passedProps} />
  );
};

Good:

import { pick } from 'lodash';

import { propTypes: someComponentPropTypes }, SomeComponent from './SomeComponent';

export default function AnotherComponent(props) {
  const passedProps = pick(props, Object.keys(someComponentPropTypes));
  return (
    <SomeComponent {...passedProps} />
  );
};

This rule would make the aforementioned Babel plugin safe to use.

[ljharb]

The goal is to be able to strip propTypes but ensure that doing so won’t break any code.

I don’t have any intuition about where the best place for the error is, but having it in eslint might let it be caught earlier.

[hzoo]

If this is specific to babel-plugin-transform-react-remove-prop-types, we could just error from the plugin itself instead of the eslint rule (just depends on whether we think its better to make it independent of not)