Use React Transform instead of React Hot Loader

[gaearon]

React Transform is a Babel plugin for applying runtime transformations to React classes. Combined with react-transform-webpack-hmr, it replaces React Hot Loader completely.

• react-transform-boilerplate
• example of porting react-hot-loader project to react-transform

Benefits:

• No need to work around dependency on react/lib/ReactMount
• Does not depend on react package: you can give it react-native in configuration just fine
• Better works with ES6 features like getters, and is much more stable
• Allows other transformations, e.g. react-transform-catch-errors

[amccloud]

@gaearon will give it a shot this weekend

[ptmt]

+1. @amccloud if you don't mind I could help with that. Do you have any progress?

[amccloud]

I do not have any progress yet.

On Tuesday, September 15, 2015, Dmitry notifications@github.com wrote:

+1. @amccloud https://github.com/amccloud if you don't mind I could
help with that. Do you have any progress?

—
Reply to this email directly or view it on GitHub
#55 (comment)
.

[gaearon]

FYI—I'm on it.

[gaearon]

@elliottsj I'm having some super weird issues working on it—any chance you could give me a few minutes on Slack?

[davecoates]

@gaearon - I had something working on the weekend for this but I'm getting errors trying again now (Uncaught SyntaxError: Unexpected reserved word) - I swear nothing changed! In case it helps you: https://github.com/davecoates/react-native-webpack-server/tree/react-transform

My .babelrc

{
  "env": {
    "stage": 0,
    "development": {
      "plugins": [
        "react-transform"
      ],
      "extra": {
        "react-transform": [
        {
          "target": "react-transform-webpack-hmr",
          "imports": ["react-native"],
          "locals": ["module"]
        },
         {
          "target": "react-transform-catch-errors",
          "imports": ["react-native", "./src/ErrorReporter"]
        }
        ]
      }
    }
  }
}

Relevant part of webpack.config.js

if (process.env.HOT) {
  config.devtool = 'inline-source-map'; // Speed up incremental builds
  config.entry['index.ios'].unshift('webpack-hot-middleware/client?path=http://localhost:8080/__webpack_hmr');
  config.output.publicPath = 'http://localhost:8080/';
  config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
}

[gaearon]

Please see #64 and test it on your projects!