React Hot Loader 2

[gaearon]

This PR tracks the work on modernizing React Hot Loader.

The Death of React Hot Loader should give you some idea. In short, we'll move as much as possible from RHL, possibly only keeping it as a brand. The actual implementation will be spread across React Proxy, a new, fully testable engine, and a few Babel plugins. In fact you can already take a glimpse at the approach we're likely to take in the future. It's still very raw, but enables scenarios which haven't been possible before with RHL.

Still, lots of projects use React Hot Loader as is, and before deprecating it in favor of something better, we want to port it to use React Proxy too as the new engine. In fact React Hot Loader users are the best possible testers for React Proxy, as their existing projects run on top of React Hot API it's meant to replace!

I'm releasing [email protected] on NPM now.

It's not what React Hot Loader 2 will turn out to be—we don't know yet what it will be like. Right now, this alpha is just an internal change of engine, and I need you to test it, so that we know it's stable before we commit to using it in the React Hot Loader successor projects. What we want you to do is to install [email protected] and report your experience in this thread. Did something break in your app? Is hot reloading working subjectively better or worse, and why? If you're interested in the more detailed changes that React Proxy brings, along with caveats, check out the changelog entry.

Thank you for helping me test [email protected]!

npm install --save-dev [email protected]

Note that this branch requires React 0.13+. We no longer support earlier versions.

[mattconde]

Making a straight switch for 2.0.0-alpha from ^1.2.8. My app doesn't render at all from the dev server and I get Uncaught TypeError: Cannot read property 'writable' of undefined makeExportsHot.js 37.
I've logged it and it's the first component that has drag and drop on in my app, in the error case m.exports is a Function not an Object.

[muzfuz]

I made the switch on a project I'm currently in early stages on. Nothing broke, but reloading is noticably slower. I'll update this post if anything breaks.

[gaearon]

@mattconde Can you try [email protected] please? I tried to fix that there..

[mattconde]

@gaearon Yup thanks! That's done it. It's running now, I'll continue to test whilst I dev the app.

[gaearon]

@mattconde Thank you!

[hmeerlo]

Installing it gives me a warning which I think should not be ignored:

npm WARN deprecated [email protected]: BROKEN NPM RELEASE. USE 0.5.0-alpha-2.
[email protected] node_modules/react-hot-loader
├── [email protected] ([email protected])
└── [email protected] ([email protected])

[gaearon]

@hmeerlo Thanks. I released [email protected] which enforces the correct version of react-hot-api.

[hmeerlo]

Hmm, apparently 0.5.0-alpha-2 is not even available yet:

No compatible version found: react-hot-api@'>=0.5.0-alpha-2 <0.6.0'

[gaearon]

@hmeerlo Bah, I forgot to publish it! Works now?

[hmeerlo]

Yes thanx, it works fine now. Not seeing any noticeable difference with the 1.x version btw.

[gaearon]

@hmeerlo That's good! 👍 Let me know if you find any problems.

[thetimbanks]

Installed the alpha-2 and everything seems to be working fine. The speed is relatively the same.

[KyleAMathews]

alpha-2 has been working perfectly so far this morning! No noticeable speed difference.

[cpsubrian]

So far so good for me with 2.0.0-alpha-2. Note: I'm using class-level autobind mostly, but method-level autobind in some cases. At the class-level I needed to position @autobind after (below) the @connect decorator supplied by react-redux, otherwise the scope of the methods wasn't properly set.

[billyjanitsch]

@gaearon you might want to publish 2.0.0-alpha-X as a prerelease on npm rather than as the default latest release, so that it doesn't get installed when you run npm i react-hot-loader. See http://carrot.is/coding/npm_prerelease

[gaearon]

Damn. I was sure I published it as next... NPM :-(

[gaearon]

@cpsubrian

At the class-level I needed to position @autoBind after (below) the @connect decorator supplied by react-redux, otherwise the scope of the methods wasn't properly set.

Shouldn't be RHL issue, right? If you put it before connect() you're autobinding the component generated by connect() which isn't your class.

[cpsubrian]

@gaearon Yep, sorry didn't mean to imply it was a bug, just a note for other redux users so they don't make the same dumb mistake.

[syranide]

Working great so far 👍

[frankychung]

Working great so far. In our case we were using getRootInstances() since we have React as an external so we haven't had any problems removing that.

[gaearon]

Here's something new that came out of this.

https://github.com/gaearon/react-transform-boilerplate

[Baggz]

@gaearon

Working great so far! Thanks a lot for a very seamless upgrade! 👍

Is there any ETA of stable release?

Thanks!

[mweststrate]

+1 for releasing this :)

[gaearon]

We’re skipping 2 but 3 might be coming eventually. 🍷