Repository: gaearon/react-hot-loader (js)

Issue:
[3.0] Rename AppContainer to HotContainer
AppContainer name is too generic, and It's very common to people use this name for their root containers.


Pull request:
Rename AppContainer into HotContainer
Close #325

Patch:
diff --git a/docs/README.md b/docs/README.md
index aa41409..6c81daa 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -81,20 +81,20 @@ Provided by community:
 }
 ```
 
-- `<AppContainer/>` is a component that handles module reloading, as well as error handling. The root component of your app should be nested in AppContainer as a child. When in production, AppContainer is automatically disabled, and simply returns its children.
+- `<HotContainer/>` is a component that handles module reloading, as well as error handling. The root component of your app should be nested in HotContainer as a child. When in production, HotContainer is automatically disabled, and simply returns its children.
 
 - React Hot Loader 3 does not hide the hot module replacement API, so the following needs to be added below wherever you call `ReactDOM.render` in your app:
 
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { AppContainer } from 'react-hot-loader'
+import { HotContainer } from 'react-hot-loader'
 import App from './containers/App'
 
 ReactDOM.render(
-  <AppContainer>
+  <HotContainer>
     <App/>
-  </AppContainer>,
+  </HotContainer>,
   document.getElementById('root')
 );
 
@@ -103,9 +103,9 @@ if (module.hot) {
   module.hot.accept('./containers/App', () => {
     const NextApp = require('./containers/App').default;
     ReactDOM.render(
-      <AppContainer>
+      <HotContainer>
         <NextApp/>
-      </AppContainer>,
+      </HotContainer>,
       document.getElementById('root')
     );
   });
@@ -123,15 +123,15 @@ Because Webpack 2+ has built-in support for ES2015 modules, you won't need to re
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { AppContainer } from 'react-hot-loader'
+import { HotContainer } from 'react-hot-loader'
 
 import App from './containers/App'
 
 const render = Component => {
   ReactDOM.render(
-    <AppContainer>
+    <HotContainer>
       <Component />
-    </AppContainer>,
+    </HotContainer>,
     document.getElementById('root')
   )
 }
@@ -183,7 +183,7 @@ Hot reloading code is just one line in the beginning and one line in the end of
     }
   ```
 
-* Add `AppContainer` to `src/index.js` (see `AppContainer` section in [Migration to 3.0 above](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#migration-to-30))
+* Add `HotContainer` to `src/index.js` (see `HotContainer` section in [Migration to 3.0 above](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#migration-to-30))
 
 ## TypeScript
 
diff --git a/docs/TipsAndTricks.md b/docs/TipsAndTricks.md
index ace929b..d10290d 100644
--- a/docs/TipsAndTricks.md
+++ b/docs/TipsAndTricks.md
@@ -14,9 +14,9 @@ CustomErrorReporter.propTypes = {
 };
 
 render((
-  <AppContainer errorReporter={ CustomErrorReporter }>
+  <HotContainer errorReporter={ CustomErrorReporter }>
     <AppRoot />
-  </AppContainer>
+  </HotContainer>
 ), document.getElementById('react-root'));
 ```
 
diff --git a/src/AppContainer.dev.js b/src/HotContainer.dev.js
similarity index 93%
rename from src/AppContainer.dev.js
rename to src/HotContainer.dev.js
index d5c9c50..00aefb3 100644
--- a/src/AppContainer.dev.js
+++ b/src/HotContainer.dev.js
@@ -3,7 +3,7 @@ const deepForceUpdate = require('react-deep-force-update')
 
 const { Component } = React
 
-class AppContainer extends Component {
+class HotContainer extends Component {
   constructor(props) {
     super(props)
     this.state = { error: null }
@@ -64,11 +64,11 @@ class AppContainer extends Component {
   }
 }
 
-AppContainer.propTypes = {
+HotContainer.propTypes = {
   children(props) {
     if (React.Children.count(props.children) !== 1) {
       return new Error(
-        'Invalid prop "children" supplied to AppContainer. ' +
+        'Invalid prop "children" supplied to HotContainer. ' +
           'Expected a single React element with your app’s root component, e.g. <App />.',
       )
     }
@@ -81,4 +81,4 @@ AppContainer.propTypes = {
   ]),
 }
 
-module.exports = AppContainer
+module.exports = HotContainer
diff --git a/src/AppContainer.js b/src/HotContainer.js
similarity index 52%
rename from src/AppContainer.js
rename to src/HotContainer.js
index b5bc7d5..c90ec17 100644
--- a/src/AppContainer.js
+++ b/src/HotContainer.js
@@ -1,7 +1,7 @@
 /* eslint-disable global-require */
 
 if (!module.hot || process.env.NODE_ENV === 'production') {
-  module.exports = require('./AppContainer.prod')
+  module.exports = require('./HotContainer.prod')
 } else {
-  module.exports = require('./AppContainer.dev')
+  module.exports = require('./HotContainer.dev')
 }
diff --git a/src/AppContainer.prod.js b/src/HotContainer.prod.js
similarity index 79%
rename from src/AppContainer.prod.js
rename to src/HotContainer.prod.js
index e165dc4..70d1c10 100644
--- a/src/AppContainer.prod.js
+++ b/src/HotContainer.prod.js
@@ -4,7 +4,7 @@ const React = require('react')
 
 const { Component } = React
 
-class AppContainer extends Component {
+class HotContainer extends Component {
   render() {
     if (this.props.component) {
       return <this.props.component {...this.props.props} />
@@ -14,4 +14,4 @@ class AppContainer extends Component {
   }
 }
 
-module.exports = AppContainer
+module.exports = HotContainer
diff --git a/src/index.dev.js b/src/index.dev.js
index 2ecf8ca..b191036 100644
--- a/src/index.dev.js
+++ b/src/index.dev.js
@@ -1,4 +1,4 @@
-const AppContainer = require('./AppContainer')
+const HotContainer = require('./HotContainer')
 
 module.exports = function warnAboutIncorrectUsage(arg) {
   if (this && this.callback) {
@@ -27,11 +27,11 @@ module.exports = function warnAboutIncorrectUsage(arg) {
     throw new Error(
       'React Hot Loader does not have a default export. ' +
         'If you use the import statement, make sure to include the ' +
-        'curly braces: import { AppContainer } from "react-hot-loader". ' +
+        'curly braces: import { HotContainer } from "react-hot-loader". ' +
         'If you use CommonJS, make sure to read the named export: ' +
-        'require("react-hot-loader").AppContainer.',
+        'require("react-hot-loader").HotContainer.',
     )
   }
 }
 
-module.exports.AppContainer = AppContainer
+module.exports.HotContainer = HotContainer
diff --git a/src/index.prod.js b/src/index.prod.js
index da07bc6..f712526 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -1,1 +1,1 @@
-module.exports.AppContainer = require('./AppContainer')
+module.exports.HotContainer = require('./HotContainer')


Test patch:
diff --git a/test/AppContainer.dev.test.js b/test/AppContainer.dev.test.js
index 7cf852c..098eaca 100644
--- a/test/AppContainer.dev.test.js
+++ b/test/AppContainer.dev.test.js
@@ -3,12 +3,12 @@ import React, { Component } from 'react'
 import { mount } from 'enzyme'
 import { mapProps } from 'recompose'
 
-import AppContainer from '../src/AppContainer.dev'
+import HotContainer from '../src/HotContainer.dev'
 
 const RHL = global.__REACT_HOT_LOADER__
 
 function runAllTests(useWeakMap) {
-  describe(`<AppContainer /> [useWeakMap == ${useWeakMap}]`, () => {
+  describe(`<HotContainer /> [useWeakMap == ${useWeakMap}]`, () => {
     beforeEach(() => {
       RHL.reset(useWeakMap)
     })
@@ -25,9 +25,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(wrapper.find('App').length).toBe(1)
         expect(wrapper.contains(<div>hey</div>)).toBe(true)
@@ -50,9 +50,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(spy).toHaveBeenCalledTimes(1)
 
@@ -91,7 +91,7 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const element = <App />
-        const wrapper = mount(<AppContainer>{element}</AppContainer>)
+        const wrapper = mount(<HotContainer>{element}</HotContainer>)
         expect(spy).toHaveBeenCalledTimes(1)
 
         {
@@ -143,7 +143,7 @@ function runAllTests(useWeakMap) {
             }
           }
           RHL.register(App, 'App', 'test.js')
-          wrapper = mount(<AppContainer>{element}</AppContainer>)
+          wrapper = mount(<HotContainer>{element}</HotContainer>)
         }
 
         expect(spy).toHaveBeenCalledTimes(1)
@@ -167,9 +167,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(wrapper.text()).toBe('old render + old state')
 
@@ -221,9 +221,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         wrapper.find('span').simulate('click')
         expect(spy).toHaveBeenCalledWith('foo')
@@ -288,9 +288,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         wrapper.find('span').simulate('click')
         expect(spy).toHaveBeenCalledWith('foo')
@@ -358,9 +358,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         wrapper.find('span').simulate('click')
         expect(spy).toHaveBeenCalledWith('foo')
@@ -423,9 +423,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         wrapper.find('span').simulate('click')
         expect(spy).toHaveBeenCalledWith('foo')
@@ -489,9 +489,9 @@ function runAllTests(useWeakMap) {
           RHL.register(App, 'App', 'test.js')
 
           const wrapper = mount(
-            <AppContainer>
+            <HotContainer>
               <App />
-            </AppContainer>,
+            </HotContainer>,
           )
           wrapper.find('span').simulate('click')
           expect(spy).toHaveBeenCalledWith('foo')
@@ -541,9 +541,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(wrapper.find('App').length).toBe(1)
         expect(wrapper.contains(<div>hey</div>)).toBe(true)
@@ -566,9 +566,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(spy).toHaveBeenCalledTimes(1)
 
@@ -607,7 +607,7 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const element = <App />
-        const wrapper = mount(<AppContainer>{element}</AppContainer>)
+        const wrapper = mount(<HotContainer>{element}</HotContainer>)
         expect(spy).toHaveBeenCalledTimes(1)
 
         {
@@ -659,7 +659,7 @@ function runAllTests(useWeakMap) {
             },
           })
           RHL.register(App, 'App', 'test.js')
-          wrapper = mount(<AppContainer>{element}</AppContainer>)
+          wrapper = mount(<HotContainer>{element}</HotContainer>)
         }
 
         expect(spy).toHaveBeenCalledTimes(1)
@@ -683,9 +683,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(wrapper.text()).toBe('old render + old state')
 
@@ -723,7 +723,7 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
         const AppF = React.createFactory(App)
 
-        const wrapper = mount(<AppContainer>{AppF()}</AppContainer>)
+        const wrapper = mount(<HotContainer>{AppF()}</HotContainer>)
         expect(wrapper.find('App').length).toBe(1)
         expect(wrapper.contains(<div>hey</div>)).toBe(true)
         expect(spy).toHaveBeenCalledTimes(1)
@@ -745,7 +745,7 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
         const AppF = React.createFactory(App)
 
-        const wrapper = mount(<AppContainer>{AppF()}</AppContainer>)
+        const wrapper = mount(<HotContainer>{AppF()}</HotContainer>)
         expect(spy).toHaveBeenCalledTimes(1)
 
         {
@@ -785,7 +785,7 @@ function runAllTests(useWeakMap) {
         const AppF = React.createFactory(App)
 
         const element = AppF()
-        const wrapper = mount(<AppContainer>{element}</AppContainer>)
+        const wrapper = mount(<HotContainer>{element}</HotContainer>)
         expect(spy).toHaveBeenCalledTimes(1)
 
         {
@@ -838,7 +838,7 @@ function runAllTests(useWeakMap) {
             },
           })
           RHL.register(App, 'App', 'test.js')
-          wrapper = mount(<AppContainer>{element}</AppContainer>)
+          wrapper = mount(<HotContainer>{element}</HotContainer>)
         }
 
         expect(spy).toHaveBeenCalledTimes(1)
@@ -862,7 +862,7 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
         const AppF = React.createFactory(App)
 
-        const wrapper = mount(<AppContainer>{AppF()}</AppContainer>)
+        const wrapper = mount(<HotContainer>{AppF()}</HotContainer>)
         expect(wrapper.text()).toBe('old render + old state')
 
         {
@@ -898,9 +898,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(wrapper.find('App').length).toBe(1)
         expect(wrapper.contains(<div>hey</div>)).toBe(true)
@@ -917,9 +917,9 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <App />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(spy).toHaveBeenCalledTimes(1)
 
@@ -946,7 +946,7 @@ function runAllTests(useWeakMap) {
         RHL.register(App, 'App', 'test.js')
 
         const element = <App />
-        const wrapper = mount(<AppContainer>{element}</AppContainer>)
+        const wrapper = mount(<HotContainer>{element}</HotContainer>)
         expect(spy).toHaveBeenCalledTimes(1)
 
         {
@@ -980,7 +980,7 @@ function runAllTests(useWeakMap) {
             return <div>ho</div>
           }
           RHL.register(App, 'App', 'test.js')
-          wrapper = mount(<AppContainer>{element}</AppContainer>)
+          wrapper = mount(<HotContainer>{element}</HotContainer>)
         }
 
         expect(spy).toHaveBeenCalledTimes(1)
@@ -1007,9 +1007,9 @@ function runAllTests(useWeakMap) {
         RHL.register(Root, 'Root', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <Root />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(wrapper.text()).toBe('old render + old state')
 
@@ -1053,9 +1053,9 @@ function runAllTests(useWeakMap) {
         RHL.register(Enhanced, 'Enhanced', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <Enhanced n={3} />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(wrapper.find('App').length).toBe(1)
         expect(wrapper.contains(<div>hey</div>)).toBe(true)
@@ -1077,9 +1077,9 @@ function runAllTests(useWeakMap) {
         RHL.register(Enhanced, 'Enhanced', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <Enhanced n={3} />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(spy).toHaveBeenCalledTimes(1)
 
@@ -1115,7 +1115,7 @@ function runAllTests(useWeakMap) {
         RHL.register(Enhanced, 'Enhanced', 'test.js')
 
         const element = <Enhanced n={3} />
-        const wrapper = mount(<AppContainer>{element}</AppContainer>)
+        const wrapper = mount(<HotContainer>{element}</HotContainer>)
         expect(spy).toHaveBeenCalledTimes(1)
 
         {
@@ -1163,7 +1163,7 @@ function runAllTests(useWeakMap) {
 
           const Enhanced = mapProps(props => ({ n: props.n * 5 }))(App)
           RHL.register(Enhanced, 'Enhanced', 'test.js')
-          wrapper = mount(<AppContainer>{element}</AppContainer>)
+          wrapper = mount(<HotContainer>{element}</HotContainer>)
         }
 
         expect(spy).toHaveBeenCalledTimes(1)
@@ -1194,9 +1194,9 @@ function runAllTests(useWeakMap) {
         RHL.register(Enhanced, 'Enhanced', 'test.js')
 
         const wrapper = mount(
-          <AppContainer>
+          <HotContainer>
             <Enhanced n={3} />
-          </AppContainer>,
+          </HotContainer>,
         )
         expect(wrapper.text()).toBe('old render + old state + 15')