2017-04-17 20:15:50 +00:00
|
|
|
import React from 'react'
|
|
|
|
|
|
|
|
let currentChunks = []
|
|
|
|
|
2017-04-18 16:37:57 +00:00
|
|
|
export default function dynamicComponent (promise, options = {}) {
|
2017-04-17 20:15:50 +00:00
|
|
|
return class Comp extends React.Component {
|
|
|
|
constructor (...args) {
|
|
|
|
super(...args)
|
2017-04-18 16:37:57 +00:00
|
|
|
this.LoadingComponent = options.loading ? options.loading : () => (<p>loading...</p>)
|
2017-04-17 20:15:50 +00:00
|
|
|
this.state = { AsyncComponent: null }
|
|
|
|
this.isServer = typeof window === 'undefined'
|
|
|
|
this.loadComponent()
|
|
|
|
}
|
|
|
|
|
|
|
|
loadComponent () {
|
|
|
|
promise.then((AsyncComponent) => {
|
|
|
|
if (this.mounted) {
|
|
|
|
this.setState({ AsyncComponent })
|
|
|
|
} else {
|
|
|
|
if (this.isServer) {
|
|
|
|
currentChunks.push(AsyncComponent.__webpackChunkName)
|
|
|
|
}
|
|
|
|
this.state.AsyncComponent = AsyncComponent
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
this.mounted = true
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const { AsyncComponent } = this.state
|
2017-04-18 16:37:57 +00:00
|
|
|
const { LoadingComponent } = this
|
|
|
|
if (!AsyncComponent) return (<LoadingComponent {...this.props} />)
|
2017-04-17 20:15:50 +00:00
|
|
|
|
|
|
|
return <AsyncComponent {...this.props} />
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export function flushChunks () {
|
|
|
|
const chunks = currentChunks
|
|
|
|
currentChunks = []
|
|
|
|
return chunks
|
|
|
|
}
|