v1.1.0
New Format
We have changed the config format a little bit.
Let's take this example from 1.0.x:
{
"plugins": ["react-transform"],
"extra": {
"react-transform": [{
"target": "xxx"
}, {
"target": "yyy"
}]
}
}
Now we're introducing a new config format:
- The
target
option inside every transform configuration object was renamed totransform
. - The array of transforms is now a property called
transforms
on an object.
Here's how the same config would look like after the changes:
{
"plugins": ["react-transform"],
"extra": {
"react-transform": {
"transforms": [{
"transform": "xxx"
}, {
"transform": "yyy"
}]
}
}
}
The locals
and imports
stay right where they were—it's just they're next to transform
key now instead of a target
key:
{
"plugins": ["react-transform"],
"extra": {
"react-transform": {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}
}
}
That's it! The old format still works (which is why this isn't a breaking change), but prints a warning.
New Features
We didn't introduce a new format without a reason. Now there's a place for a plugin-wide configuration options, unrelated to the specific transform. The first such option, called factoryMethods
, ships today, contributed by Aaron Jensen.
If you're not comfortable with ES6 classes and use a custom helper like React.createClass
, previously this Babel plugin couldn't find such React components. Now, you can specify a configuration like this:
{
"plugins": ["react-transform"],
"extra": {
"react-transform": {
"transforms": [/* ... */],
// here's the new stuff!
"factoryMethods": ["React.createClass", "createClass", "myCustomFactoryMethod"]
},
}
}
This option is not required to specify and can be safely omitted, but can be useful if you prefer custom factory methods or component wrapper functions.
Enjoy!