PropTypes in contextTypes and childContextTypes

[insin]

Could this transform also do something with contextTypes and childContextTypes?

They're the only other places PropTypes are used AFAIK, so handling them too would allow complete removal of PropTypes from an app's own production built code. This would also be useful for slimming down the production build of libraries which use context while still allowing PropTypes to be validated in development.

React doesn't care which values they have in production, but uses their property names to validate that only expected child context is provided and to mask context properties which are made available to a child, so they should be wrapped by default rather than removed (although you might still want to be able remove them if doing a cross-compatible build for something like Preact, which implements context without contextTypes and childContextTypes).

Example input and expected output:

class Foo1 extends React.Component {
  static contextTypes = {
    bar1: React.PropTypes.string,
  };

  render() {}
}

class Foo1 extends React.Component {

  render() {}
}

process.env.NODE_ENV !== "production" ? Foo1.contextTypes = {
  bar1: React.PropTypes.string
} : {
  bar1: 1
};

[oliviertassinari]

@insin That sounds like a good idea.

I could only find one counter arguments.
You are not supposed to repeat contextTypes/childContextTypes all over the place. The API may change in the future. The React core team has put it in their priority for v16+. Hence, abstracting that in userspace with an Higher-order component is often preferable.

[insin]

I agree, that's sound advice for end users, but library implementers currently have to use contextTypes/childContextTypes at some stage if their library uses context - this idea came while poking around in React Router v4's build, which is using this transform.

[insin]

It would also be cool to have this transform available as a mode for propTypes for authors of libraries which need them at runtime in all environments for prop masking when passing props down, like React Bootstrap.

[oliviertassinari]

for prop masking when passing props down

I don't follow, what does that correspond to?

[lkmill]

+1, trying to build a server side rendering solution where i want to be able to drop in another module instead of react, and would be nice to be able to skip implementing all the prop types.

Ie, for my use case I will transform

import React from 'react';

// or

const React = require('react');

into

import React from 'jsx-node';

// or

const React = require('jsx-node');

which is quite easy to do, except for the prop types. Definately not impossible, but i would prefer not to.

I also use preact sometimes like OP mentioned.

[yasserkaddour]

I have made a PR to deal with contextTypes and childContextTypes in #98, let me know if there is anything I overlooked.
Not there yet 😓

[oliviertassinari]

It's important to note that the context API is likely going to change: reactjs/rfcs#2.

[oliviertassinari]

The current context API has been deprecated. We close the issue :).