Merge pull request #54 from smooth-code/hot-reload

Hot Reload support

Author: gregberge

README.md

@@ -340,6 +340,17 @@ import { getState } from 'loadable-components'
 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 })
+```
+
 ## API Reference
 
 ### loadable

package.json

@@ -33,40 +33,40 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.1",
-    "babel-jest": "^22.1.0",
+    "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.3",
     "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-external-helpers": "^6.22.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",
-    "bundlesize": "^0.16.0",
+    "bundlesize": "^0.17.0",
     "codecov": "^3.0.0",
-    "conventional-github-releaser": "^2.0.0",
+    "conventional-github-releaser": "^2.0.2",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.16.0",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.6.1",
-    "jest": "^22.1.4",
-    "prettier": "^1.10.2",
+    "eslint-plugin-react": "^7.7.0",
+    "jest": "^22.4.3",
+    "prettier": "^1.11.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router": "^4.2.0",
     "react-test-renderer": "^16.2.0",
-    "rollup": "^0.55.3",
+    "rollup": "^0.57.1",
     "rollup-plugin-babel": "^3.0.3",
-    "rollup-plugin-commonjs": "^8.3.0",
+    "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-json": "^2.3.0",
-    "rollup-plugin-node-resolve": "^3.0.2",
+    "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-uglify": "^3.0.0",
-    "rollup-plugin-visualizer": "^0.3.1",
+    "rollup-plugin-visualizer": "^0.4.0",
     "standard-version": "^4.3.0"
   },
   "dependencies": {

src/config.js

@@ -0,0 +1,9 @@
+/* eslint-disable no-underscore-dangle */
+
+const _config = {
+  // Automatically load components in hot reload environment
+  hotReload: process.env.NODE_ENV === 'development',
+}
+
+export const setConfig = config => Object.assign(_config, config)
+export const getConfig = () => _config

src/config.test.js

@@ -0,0 +1,9 @@
+import { getConfig, setConfig } from './config'
+
+describe('config', () => {
+  it('should set and get config', () => {
+    expect(getConfig()).toEqual({ hotReload: false })
+    setConfig({ hotReload: true })
+    expect(getConfig()).toEqual({ hotReload: true })
+  })
+})

src/index.js

@@ -4,4 +4,5 @@ export { default as loadComponents } from './loadComponents'
 export { default as getState } from './getState'
 export { LOADABLE } from './constants'
 export { default } from './loadable'
+export { setConfig } from './config'
 export const componentTracker = tracker

src/loadable.js

@@ -3,6 +3,7 @@ import React from 'react'
 import { LOADABLE } from './constants'
 import resolveModuleDefault from './utils/resolveModuleDefault'
 import * as componentTracker from './componentTracker'
+import { getConfig } from './config'
 
 const EmptyComponent = () => null
 
@@ -93,6 +94,10 @@ function loadable(
 
   LoadableComponent[LOADABLE] = () => LoadableComponent
 
+  if (module && module.hot && getConfig().hotReload) {
+    LoadableComponent.load()
+  }
+
   if (modules) {
     const id = componentTracker.track(LoadableComponent, modules)
     LoadableComponent.componentId = id