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

Various fixes

.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/App.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/Big.js

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

example/Counter.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/What.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/World.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/nodemon.json

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

example/package.json

@@ -8,22 +8,24 @@
     "dev:client": "webpack-dev-server"
   },
   "dependencies": {
-    "express": "^4.16.2",
-    "loadable-components": "latest",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "express": "^4.16.3",
+    "loadable-components": "/Users/neoziro/projects/loadable-components/loadable-components-v1.4.1-alpha.2.tgz",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-hot-loader": "^4.1.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.4",
     "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "nodemon": "^1.14.11",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.1"
+    "nodemon": "^1.17.3",
+    "webpack": "^4.7.0",
+    "webpack-cli": "^2.1.2",
+    "webpack-dev-server": "^3.1.4"
   }
 }

example/server.js

@@ -21,7 +21,7 @@ app.get('/', async (req, res) => {
   </html>`)
   } catch (err) {
     res.status(500)
-    res.send(err)
+    res.send(err.stack)
   }
 })
 

example/webpack.config.js

@@ -1,11 +1,12 @@
 const path = require('path')
+const webpack = require('webpack')
 
 module.exports = {
+  mode: 'development',
   entry: './client.js',
   output: {
     path: path.resolve(__dirname, 'public'),
     filename: 'bundle.js',
-    chunkFilename: '[name].bundle.js',
   },
   module: {
     rules: [
@@ -23,11 +24,12 @@ module.exports = {
                 targets: {
                   browsers: ['last 2 chrome versions'],
                 },
-                modules: false
+                modules: false,
               },
             ],
           ],
           plugins: [
+            'react-hot-loader/babel',
             'loadable-components/babel',
             ['transform-class-properties', { loose: true }],
             'transform-object-rest-spread',
@@ -36,8 +38,13 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+  ],
   devtool: 'sourcemap',
   devServer: {
+    hot: true,
     proxy: {
       contentBase: path.resolve(__dirname, 'public'),
       publicPath: '/',