A babel plugin to generate React PropTypes definitions from Flow type declarations.
With this input:
var React = require('react');
export type Qux = {baz: 'literal'};
import type SomeExternalType from './types';
type FooProps = {
an_optional_string?: string,
a_number: number,
a_boolean: boolean,
a_generic_object: Object,
array_of_strings: Array<string>,
instance_of_Bar: Bar,
anything: any,
mixed: mixed,
one_of: 'QUACK' | 'BARK' | 5,
one_of_type: number | string,
nested_object_level_1: {
string_property_1: string,
nested_object_level_2: {
nested_object_level_3: {
string_property_3: string,
},
string_property_2: string,
}
},
should_error_if_provided: void,
intersection: {foo: string} & { bar: number } & Qux,
some_external_type: SomeExternalType,
some_external_type_intersection: {foo: string} & SomeExternalType,
}
export default class Foo extends React.Component {
props: FooProps
}}
The output will be:
var React = require('react');
if (typeof exports !== 'undefined')
Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_Qux', {
value: {
baz: require('prop-types').oneOf(['literal']).isRequired,
},
});
var babelPluginFlowReactPropTypes_proptype_SomeExternalType = require('./types').babelPluginFlowReactPropTypes_proptype_SomeExternalType ||
require('prop-types').any;
var Foo = (function(_React$Component) {
// babel class boilerplate
})(React.Component);
Foo.propTypes = {
an_optional_string: require('prop-types').string,
a_number: require('prop-types').number.isRequired,
a_boolean: require('prop-types').bool.isRequired,
a_generic_object: require('prop-types').object.isRequired,
array_of_strings: require('prop-types').arrayOf(require('prop-types').string).isRequired,
instance_of_Bar: typeof Bar === 'function'
? require('prop-types').instanceOf(Bar).isRequired
: require('prop-types').any.isRequired,
anything: require('prop-types').any.isRequired,
mixed: require('prop-types').any.isRequired,
one_of: require('prop-types').oneOf(['QUACK', 'BARK', 5]).isRequired,
one_of_type: require('prop-types').oneOfType([require('prop-types').number, require('prop-types').string]).isRequired,
nested_object_level_1: require('prop-types').shape({
string_property_1: require('prop-types').string.isRequired,
nested_object_level_2: require('prop-types').shape({
nested_object_level_3: require('prop-types').shape({
string_property_3: require('prop-types').string.isRequired,
}).isRequired,
string_property_2: require('prop-types').string.isRequired,
}).isRequired,
}).isRequired,
should_error_if_provided: function should_error_if_provided(props, propName, componentName) {
if (props[propName] != null)
return new Error(
'Invalid prop `' +
propName +
'` of value `' +
value +
'` passed to `' +
componentName +
'`. Expected undefined or null.'
);
},
intersection: require('prop-types').shape({
foo: require('prop-types').string.isRequired,
bar: require('prop-types').number.isRequired,
baz: require('prop-types').oneOf(['literal']).isRequired,
}).isRequired,
some_external_type: typeof babelPluginFlowReactPropTypes_proptype_SomeExternalType === 'function'
? babelPluginFlowReactPropTypes_proptype_SomeExternalType
: require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_SomeExternalType).isRequired,
some_external_type_intersection: require('prop-types').shape(
Object.assign(
{},
{foo: require('prop-types').string.isRequired,},
babelPluginFlowReactPropTypes_proptype_SomeExternalType === require('prop-types').any
? {}
: babelPluginFlowReactPropTypes_proptype_SomeExternalType
)
).isRequired,
};
exports.default = Foo;
This plugin searches for a React components using type declaration. Works with functional components and ES6 classes. React.createClass
is not currently supported.
First install the plugin:
npm install --save-dev babel-plugin-flow-react-proptypes
Also install the prop-types package. This is required for React >=15.5.0
. For earlier React versions
you can use version 0.21.0
of this plugin, which doesn't use the prop-types package.
npm install --save prop-types
Then add it to your babelrc:
{
"presets": ["..."],
"plugins": ["flow-react-proptypes"]
}
To save some bytes in production, you can also only enable it in development mode.
{
"presets": ["..."],
"env": {
"development": {
"plugins": ["flow-react-proptypes"]
}
}
}
This plugin isn't perfect. You can disable it for an entire file with this directive (including quotes):
'no babel-plugin-flow-react-proptypes';
Specifically for react-native you can disable this for files in node_modules
with the ignoreNodeModules
config option.
{
"presets": ["..."],
"plugins": [["flow-react-proptypes", {"ignoreNodeModules": true}]]
}
If you already have other plugins in plugins section. It is important to place
flow-react-proptypes
before the following plugins:
transform-class-properties
transform-flow-strip-types
If you're using the 'react' or 'flow' presets, you don't need to do anything special.
In production, omitting props and minimizing bundle size can be done with the additon of two things:
- Add the transform-react-remove-prop-types plugin
- Omit exported types to allow for dead code pruning
There are cases where a library wishes to export type
making types available in *.js.flow
shadow files,
but these may have no other purpose during runtime. If you wish to omit the corresponding export of
the generated flow types, using this option with the
transform-react-remove-prop-types
plugin will allow for the smallest production bundle size.
An example snippet from a .babelrc
:
"production": {
"plugins": [
["transform-react-remove-prop-types", {
"mode": "wrap",
"plugins": [
["babel-plugin-flow-react-proptypes", {"omitRuntimeTypeExport": true}],
"babel-plugin-transform-flow-strip-types",
]
}]
]
}