Merge pull request #73 from smooth-code/various-fixes

Various fixes

Author: gregberge

.prettierignore

@@ -2,6 +2,5 @@ node_modules/
 /coverage/
 /dist/
 __fixtures__/
-/example/
 CHANGELOG.md
 package.json

README.md

@@ -342,14 +342,7 @@ window.snapSaveState = () => getState()
 
 ### Hot Reloading
 
-Loadable Components is Hot Reload friendly, it works out of the box with [React Hot Loader](https://github.com/gaearon/react-hot-loader) without adding a single line of code. All components are loaded when a reload occurs, if you want to disable this behaviour, you can set a global config:
-
-```js
-import { setConfig } from 'loadable-components'
-
-// Disable automatic "load" of components
-setConfig({ hotReload: false })
-```
+Loadable Components is Hot Reload friendly, it works out of the box with [React Hot Loader](https://github.com/gaearon/react-hot-loader).
 
 ## API Reference
 
@@ -359,15 +352,15 @@ This is the default export. It's a factory used to create a loadable component.
 
 ### Arguments
 
-1. `getComponent` _(Function)_: Function to load component asynchronously.
-2. `options` _(Object)_: Facultative options to configure component behavior.
+1.  `getComponent` _(Function)_: Function to load component asynchronously.
+2.  `options` _(Object)_: Facultative options to configure component behavior.
 
 ### options
 
-1. `ErrorComponent` _(ReactComponent)_: Component rendered when an error occurs, take two props: `error` and `ownProps`.
-2. `LoadingComponent` _(ReactComponent)_: Component rendered during loading, take the same props from loadable component.
-3. `render` _(Function)_: If specified this function is called with in render with an object: `{ loading, error, ownProps, Component }`. It takes precedence over `ErrorComponent` and `LoadingComponent`.
-4. `modules` _(Object)_: This options is only required if you do server-side rendering. It can be automated using babel plugin `loadable-components/babel`.
+1.  `ErrorComponent` _(ReactComponent)_: Component rendered when an error occurs, take two props: `error` and `ownProps`.
+2.  `LoadingComponent` _(ReactComponent)_: Component rendered during loading, take the same props from loadable component.
+3.  `render` _(Function)_: If specified this function is called with in render with an object: `{ loading, error, ownProps, Component }`. It takes precedence over `ErrorComponent` and `LoadingComponent`.
+4.  `modules` _(Object)_: This options is only required if you do server-side rendering. It can be automated using babel plugin `loadable-components/babel`.
 
 ```js
 import loadable from 'loadable-components'

example/DeepAmazing.js example/Amazing.jsexample/DeepAmazing.js renamed to example/Amazing.js

@@ -1,12 +1,19 @@
 import React from 'react'
 import loadable from 'loadable-components'
+import { hot } from 'react-hot-loader'
 
-const AsyncWhat = loadable(() => import('./What.js'))
+const AsyncWhat = loadable(() =>
+  import(/* webpackChunkName: "What" */ './What.js'),
+)
+
+const AsyncBig = loadable(() =>
+  import(/* webpackChunkName: "Big" */ './Big.js'),
+)
 
 const App = () => (
   <div>
     Hello <AsyncWhat />!
   </div>
 )
 
-export default App
+export default hot(module)(App)

example/App.js

@@ -0,0 +1,3 @@
+const Big = () => 'Big'
+
+export default Big

example/Big.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+class Counter extends React.Component {
+  state = { count: 0 }
+
+  componentDidMount() {
+    this.interval = setInterval(
+      () =>
+        this.setState(previousState => ({ count: previousState.count + 1 })),
+      500,
+    )
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    return this.state.count
+  }
+}
+
+export default Counter

example/Counter.js

@@ -3,11 +3,15 @@ import loadable from 'loadable-components'
 
 const What = loadable(
   async () => {
-    const { default: DeepWord } = await import('./DeepWorld')
-    const { default: DeepAmazing } = await import('./DeepAmazing')
+    const {
+      default: World,
+    } = await import(/* webpackChunkName: "World" */ './World')
+    const {
+      default: Amazing,
+    } = await import(/* webpackChunkName: "Amazing" */ './Amazing')
     return () => (
       <React.Fragment>
-        <DeepAmazing /> <DeepWord />
+        <Amazing /> <World />
       </React.Fragment>
     )
   },

example/DeepWorld.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Counter from './Counter'
+
+const World = () => (
+  <React.Fragment>
+    <Counter /> World
+  </React.Fragment>
+)
+
+export default World

example/What.js

@@ -1,5 +1,6 @@
 {
   "execMap": {
     "js": "babel-node"
-  }
+  },
+  "delay": 10000
 }