Skip to content
This repository has been archived by the owner on Apr 9, 2020. It is now read-only.

v1.1.0

Compare
Choose a tag to compare
@gaearon gaearon released this 23 Sep 23:53
· 74 commits to master since this release

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:

  1. The target option inside every transform configuration object was renamed to transform.
  2. 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!