Skip to content

Commit

Permalink
feat: add Hot Reload support
Browse files Browse the repository at this point in the history
Thanks to @likun7981 for the original idea!
  • Loading branch information
gregberge committed Mar 25, 2018
1 parent 01c36b8 commit c79085e
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 0 deletions.
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions src/config.js
Original file line number Diff line number Diff line change
@@ -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
9 changes: 9 additions & 0 deletions src/config.test.js
Original file line number Diff line number Diff line change
@@ -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 })
})
})
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
5 changes: 5 additions & 0 deletions src/loadable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down

0 comments on commit c79085e

Please sign in to comment.