Merge pull request #240 from gaearon/next

React Hot Loader 3

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-2"]
+}

.eslintignore

@@ -0,0 +1,2 @@
+test/babel/fixtures
+lib

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "rules": {
+    "no-underscore-dangle": ["error", { "allow": ["__REACT_HOT_LOADER__"] }],
+    "no-console": ["error", { allow: ["error"] }],
+    "strict": 0,
+  },
+  globals: {
+    "__REACT_HOT_LOADER__": true
+  }
+}

.gitignore

@@ -1,2 +1,3 @@
 node_modules
+lib
 .DS_Store

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+node_js:
+  - "5"
+  - "6"
+script:
+  - npm run lint
+  - npm test

CHANGELOG.md

@@ -1,5 +1,79 @@
 ## Changelog
 
+### 3.0.0-beta.6
+
+* Use production versions of `patch` and `AppContainer` if no `module.hot` available, so it doesn't break people using `NODE_ENV=test`. (#398)
+* Opt out of transforming static class properties. (#381)
+
+### 3.0.0-beta.5
+
+* Makes the class properties portion of the Babel plugin work with async functions. (#372)
+* Change the output of the tagger code in the Babel plugin so that it doesn't break the output of `babel-node`. (#374)
+
+### 3.0.0-beta.4
+
+* Extends the Babel plugin to enable hot reloading of class properties. (#322)
+* Fixes a bug in the Webpack loader from a component importing a module with the same basename. (#347)
+
+### 3.0.0-beta.3
+
+* Fixes broken import of RedBox, which led to confusing stack traces when applications threw errors. (#314)
+* Add `module.hot` checks to conditional `require()`s to remove unnecessary warnings when using server rendering. (#302)
+
+### 3.0.0-beta.2
+
+* Patch `React.createFactory` (#287)
+* Fix props typo (#285)
+
+### 3.0.0-beta.1
+
+* Adds complete React Router support. Async routes should work fine now. (#272)
+* Fixes a nasty bug which caused unwrapped component to render. (#266, #272)
+* Fixes an issue that caused components with `shouldComponentUpdate` optimizations not getting redrawn (#269, 2a1e384d54e1919117f70f75dd20ad2490b1d9f5)
+* Internal: a rewrite and much better test coverage.
+
+### 3.0.0-beta.0
+
+* Fixes an issue when used in Webpack 2 (https://github.com/gaearon/react-hot-loader/issues/263)
+* **Breaking change:** instead of
+
+  ```js
+<AppContainer component={App} props={{ prop: val }} />
+```
+
+  you now need to write
+
+  ```js
+  <AppContainer>
+    <App prop={val} />
+  </AppContainer>
+  ```
+
+  (#250)
+
+  **See [this commit](https://github.com/gaearon/react-hot-boilerplate/commit/b52c727937a499f3efdc5dceb74ae952aa318c3a) as an update reference!**
+
+### 3.0.0-alpha
+
+Big changes both to internals and usage. No docs yet but you can look at https://github.com/gaearon/react-hot-boilerplate/pull/61 for an example.
+
+### 2.0.0-alpha
+
+**Experimental release that isn't really representative on what will go in 2.0, but uses the new engine.**
+
+Some ideas of what should be possible with the new engine:
+
+* There is no requirement to pass `getRootInstances()` anymore, so React Hot Loader doesn't need `react/lib/ReactMount` or walk the tree, which was somewhat fragile and changing between versions
+* Static methods and properties are now hot-reloaded
+* Instance getters and setters are now hot reloaded
+* Static getters and setters are now hot reloaded
+* Deleted instance methods are now deleted during hot reloading
+* Single method form of [autobind-decorator](https://github.com/andreypopp/autobind-decorator) is now supported
+
+What might get broken:
+
+* We no longer overwrite or even touch the original class. Every time makeHot is invoked, it will return a special proxy class. This means a caveat: for example, static methods will only be hot-reloaded if you refer to them as `this.constructor.doSomething()` instead of `FooBar.doSomething()`. This is because React Hot Loader calls `makeHot` right before exporting, so `FooBar` still refers to the original class. Similarly, `this.constructor === App` will be `false` inside `App` unless you call `App = makeHot(App)` manually, which you can't do with React Hot Loader. **I'm not sure how much of a problem this will be, so let me know if it pains you.** In the longer term, we will deprecate React Hot Loader in favor of a Babel plugin which will be able to rewrite class definitions correctly, so it shouldn't be a problem for a long time. If there is demand, we can introduce a mode that rewrites passed classes, too.
+
 ### 1.3.1
 
 * Fix import for ReactMount to support 15.4.0 (**[#430](https://github.com/gaearon/react-hot-loader/pull/430)**)

README.md

@@ -1,43 +1,51 @@
->## A Big Update Is Coming
+# React Hot Loader 3 [![npm package](https://img.shields.io/npm/v/react-hot-loader.svg?style=flat-square)](https://www.npmjs.org/package/react-hot-loader)
 
->React Hot Loader 3 is [on the horizon](https://github.com/gaearon/react-hot-loader/pull/240), and you can try it today ([boilerplate branch](https://github.com/gaearon/react-hot-boilerplate/pull/61), [upgrade example](https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915)). It fixes some [long-standing issues](https://twitter.com/dan_abramov/status/722040946075045888) with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but you can view a getting starting guide on [the README on the `next` branch](https://github.com/gaearon/react-hot-loader/tree/next/docs). You can install RHL3 using `npm install --save-dev react-hot-loader@next`
+### React Hot Loader 3 beta has arrived!
 
-# React Hot Loader [![npm package](https://img.shields.io/npm/v/react-hot-loader.svg?style=flat-square)](https://www.npmjs.org/package/react-hot-loader)
+It fixes some long-standing issues with both React Hot Loader and React Transform.
 
-This is a **stable for daily use in development** implementation of [React live code editing](https://www.youtube.com/watch?v=pw4fKkyPPg8).
+**It is intended as a replacement for both.**
 
-* Get inspired by a **[demo video](https://vimeo.com/100010922)** and **[try the live demo](http://gaearon.github.io/react-hot-loader/)**.
+Some nice things about it:
 
-* Read **[the integration walkthrough](http://gaearon.github.io/react-hot-loader/getstarted/).**
+* Editing functional components preserves state
+* Works great with higher order components
+* Requires little configuration
+* Automatically disabled in production
+* Works with or without Babel (you can remove `react-hot-loader/babel` from `.babelrc` and instead add `react-hot-loader/webpack` to `loaders`)
 
-* Use **[one of the starter kits](https://github.com/gaearon/react-hot-loader/tree/master/docs#starter-kits)** for your next React project.
-
-## The Talk
-
-React Hot Loader was demoed together with **[Redux](https://github.com/gaearon/redux)** at React Europe.  
-Watch **[Dan Abramov's talk on Hot Reloading with Time Travel](https://www.youtube.com/watch?v=xsSnOQynTHs).**
+Check out [the Migration to 3.0 guide](https://github.com/gaearon/react-hot-loader/tree/master/docs#migration-to-30) to learn how to migrate your app to 3.0.
 
 ## Installation
 
-`npm install --save-dev react-hot-loader`
+`npm install --save-dev react-hot-loader@next`
 
 ## Usage
 
-If you want to try hot reloading in a new project, try **[one of the starter kits](https://github.com/gaearon/react-hot-loader/tree/master/docs#starter-kits)**, **[React Hot Boilerplate](https://github.com/gaearon/react-hot-boilerplate)** being the most minimal one.
+If you want to try hot reloading in a new project, try **[one of the starter kits](https://github.com/gaearon/react-hot-loader/tree/master/docs#starter-kits)**.
+
+Provided by owner and collaborators:
+- **[React Hot Boilerplate](https://github.com/gaearon/react-hot-boilerplate/tree/next)**
+- **[React Hot Loader Minimal Boilerplate](https://github.com/wkwiatek/react-hot-loader-minimal-boilerplate)**
 
 To use React Hot Loader in an existing project, you need to
 
 * switch to Webpack for builds (instead of RequireJS or Browserify);
 * enable Hot Module Replacement, which is a Webpack feature;
 * configure Webpack to use React Hot Loader for JS or JSX files.
 
-These steps are covered by **[the walkthrough](http://gaearon.github.io/react-hot-loader/getstarted/)**.
+These steps are covered by **[the Migration to 3.0 guide](https://github.com/gaearon/react-hot-loader/tree/master/docs#migration-to-30)**.
 
 If you'd rather stay with **Browserify**, check out **[LiveReactload](https://github.com/milankinen/livereactload)** by Matti Lankinen.
 
-## Flux
+## Known limitations
 
-**[Redux](https://github.com/gaearon/redux)** is a Flux implementation that supports hot reloading of everything out of the box. Read **[The Evolution of Flux Frameworks](https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31)** for some context around its creation.
+- React Router v3 is not fully supported (e.g. async routes). If you want to get most of React Hot Loader, consider switching to [React Router v4](https://reacttraining.com/react-router/) (Note: it's currently in beta!). If you want to understand the reasoning, it's good to start in [React Router v4 FAQ](https://github.com/ReactTraining/react-router/blob/v4/README.md#v4-faq)
+
+## The Talk
+
+React Hot Loader was demoed together with **[Redux](https://github.com/gaearon/redux)** at React Europe.
+Watch **[Dan Abramov's talk on Hot Reloading with Time Travel](https://www.youtube.com/watch?v=xsSnOQynTHs).**
 
 ## React Native
 
@@ -49,11 +57,9 @@ If something doesn't work, in 99% cases it's a configuration issue. A missing op
 
 ## Documentation
 
-Docs are in a bit of a flux right now because I'm in the process of updating everything to document the major 1.0 release.
-
-If you just learned about React Hot Loader and want to find out more, **[check out the walkthrough](http://gaearon.github.io/react-hot-loader/getstarted/)** and then try one of the **[starter kits](https://github.com/gaearon/react-hot-loader/tree/master/docs#starter-kits)**.
+Check out the [docs directory](docs).
 
-If you've been with us for a while, read **[1.0 release notes and migration guide](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#migrating-to-10)**.
+You can also check out a great [webpack guide to React hot module replacement](https://webpack.js.org/guides/hmr-react/).
 
 ## Got Questions?
 
@@ -63,7 +69,7 @@ Watch the repo to stay tuned!
 
 ## Patrons
 
-The work on React Hot Loader, [React Transform](https://github.com/gaearon/babel-plugin-react-transform), [Redux](https://github.com/reactjs/redux), and related projects was [funded by the community](https://www.patreon.com/reactdx).  
+The work on React Hot Loader, [React Transform](https://github.com/gaearon/babel-plugin-react-transform), [Redux](https://github.com/reactjs/redux), and related projects was [funded by the community](https://www.patreon.com/reactdx).
 Meet some of the outstanding companies that made it possible:
 
 * [Webflow](https://github.com/webflow)

babel.js

@@ -0,0 +1 @@
+module.exports = require('./lib/babel');

docs/Known Limitations.md

@@ -0,0 +1,62 @@
+## Known Limitations
+
+### Code Splitting
+If you want to use Webpack code splitting via `require.ensure`, you'll need to add an additional `module.hot.accept` callback within the `require.ensure` block, like this:
+
+```js
+require.ensure([], (require) => {
+  if (module.hot) {
+    module.hot.accept('../components/App', () => {
+      loadComponent(require('../components/App').default);
+    })
+  }
+  loadComponent(require('../components/App').default);
+});
+```
+
+Note that if you're using React Router (pre-4.0), this will only work with `getChildRoutes`, but not `getComponent`, since `getComponent`'s callback will only load a component once.
+
+Also, if you're using the Webpack 2 beta, you can use `System.import` without extra `module.hot.accept` calls, although there are still a [few issues with it](https://github.com/gaearon/react-hot-loader/issues/303).
+
+### Checking Element `type`s
+Because React Hot Loader creates proxied versions of your components, comparing reference types of elements won't work:
+
+```jsx
+const element = <Component />;
+console.log(element.type === Component); // false
+```
+
+One workaround is to create an element (that will have the `type` of the proxied component):
+
+```jsx
+const ComponentType = (<Component />).type;
+const element = <Component />;
+console.log(element.type === ComponentType); // true
+```
+
+You can also set a property on the component class:
+
+```jsx
+const Widget = () => <div>hi</div>;
+Widget.isWidgetType = true;
+console.log(<Widget />.type.isWidgetType); // true
+```
+
+### Reassigning Components
+React Hot Loader will only try to reload the original component reference, so if you reassign it to another variable like this:
+
+```jsx
+let App = () => (<div>hello</div>);
+App = connect()(App);
+export default App;
+```
+
+React Hot Loader won't reload it. Instead, you'll need to define it once:
+
+```jsx
+const App = () => (<div>hello</div>);
+export default connect()(App);
+```
+
+### Decorators
+Components that are decorated (using something like [`@autobind`](https://github.com/andreypopp/autobind-decorator)) currently do not retain state when being hot-reloaded. (see [#279](https://github.com/gaearon/react-hot-loader/issues/279))