PropTypes C# Webpack Plugin
A Webpack plugin that generates C# classes from React component propTypes
This is a work in progress!
yarn add @creuna/prop-types-csharp-webpack-plugin
Usage
The plugin will extract PropType definitions from .jsx
files and convert them into C# class files.
Config example
const PropTypesCSharpPlugin = require('@creuna/prop-types-csharp-plugin');
module.exports = function(env, options = {}) {
const production = options.mode === 'production';
return {
entry: { ... },
output: { ... },
module: { ... },
plugins: production ? [new PropTypesCSharpPlugin({
path: 'classes',
match: [/\.jsx$/, 'source/components'],
exclude: ['node_modules', 'some/path']
})] : []
};
};
Object
Options: exclude: Array
of String | RegExp
= ['node-modules']
Use this to exclude paths or files from class generation. Default is replaced when setting this.
indent: Number
= 2
Number of spaces of indentation in generated classes.
log: Boolean
= false
If set to true, will output some information about the plugin to the shell.
match: Array
of String | RegExp
= [/\.jsx$/]
Use this to choose what files to include when generating classes. Default is replaced when setting this.
namespace: String
If supplied, all generated classes will be wrapped in this namespace.
path: String
Path relative to output.path
to put .cs
files.
Webpack modes
Depending on webpack.options.mode
, the plugin will do one of the following:
-
production
: Writes.cs
files to disk, Webpack build is aborted on errors. -
development
: Does not write files, runs in parallel, warns instead of throwing errors.
Ignored props
Props of type func
, element
, node
and instanceOf
are ignored when creating classes because they make no sense in C#-land.
Illegal propTypes
Props of type object
and array
are ambiguous and cannot be included in C# classes as-is.
object
should have a propTypesMeta
definition or be replaced by a shape
containing an object literal or another component's propTypes.
array
should be replaced by an arrayOf
or have a propTypesMeta
definition.
oneOfType
is currently also illegal until we figure out how to deal with it.
propTypesMeta
propTypesMeta
can be used to exclude some props from C# classes or to provide type hints for ambiguous types.
Supported values for props in propTypesMeta
are
"int"
"float"
"exclude"
- React component
- Array()
"int"
and "float"
replace PropTypes.number
if supplied. By default, PropTypes.number
will result in int
in C# classes.
Functional component:
const Component = () => <div />;
Component.propTypes = {
someProp: PropTypes.number,
anotherProp: PropTypes.string,
someComponent: PropTypes.object,
items: PropTypes.array
};
Component.propTypesMeta = {
someProp: "int",
anotherProp: "exclude",
someComponent: SomeComponent,
items: Array(AnotherComponent)
};
Class component:
class Component extends React.Component {
static propTypes = {
someProp: PropTypes.number,
anotherProp: PropTypes.string,
someComponent: PropTypes.object,
items: PropTypes.array
};
static propTypesMeta = {
someProp: "float",
anotherProp: "exclude",
someComponent: SomeComponent,
items: Array(AnotherComponent)
};
}
Babel plugin
Having a bunch of propTypesMeta
scattered all around your production code might not be what you want. To solve this issue, a Babel plugin is included which, if enabled, will strip all instances of ComponentName.propTypesMeta
or static propTypesMeta
when building with Webpack.
.babelrc:
{
"plugins": ["@creuna/prop-types-csharp-webpack-plugin/babel-plugin"]
}