2017-04-03 18:10:24 +00:00
|
|
|
/* global window, document */
|
|
|
|
import mitt from 'mitt'
|
|
|
|
|
|
|
|
export default class PageLoader {
|
|
|
|
constructor (buildId) {
|
|
|
|
this.buildId = buildId
|
|
|
|
this.pageCache = {}
|
|
|
|
this.pageLoadedHandlers = {}
|
|
|
|
this.registerEvents = mitt()
|
|
|
|
this.loadingRoutes = {}
|
|
|
|
}
|
|
|
|
|
2017-04-04 19:55:56 +00:00
|
|
|
normalizeRoute (route) {
|
2017-04-03 18:10:24 +00:00
|
|
|
if (route[0] !== '/') {
|
|
|
|
throw new Error('Route name should start with a "/"')
|
|
|
|
}
|
|
|
|
|
2017-04-04 19:55:56 +00:00
|
|
|
return route.replace(/index$/, '')
|
|
|
|
}
|
|
|
|
|
|
|
|
loadPage (route) {
|
|
|
|
route = this.normalizeRoute(route)
|
2017-04-03 18:10:24 +00:00
|
|
|
|
2017-04-04 19:55:56 +00:00
|
|
|
const cachedPage = this.pageCache[route]
|
|
|
|
if (cachedPage) {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
if (cachedPage.error) return reject(cachedPage.error)
|
|
|
|
return resolve(cachedPage.page)
|
|
|
|
})
|
2017-04-03 18:10:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
const fire = ({ error, page }) => {
|
|
|
|
this.registerEvents.off(route, fire)
|
|
|
|
|
|
|
|
if (error) {
|
|
|
|
reject(error)
|
|
|
|
} else {
|
|
|
|
resolve(page)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.registerEvents.on(route, fire)
|
|
|
|
|
|
|
|
// Load the script if not asked to load yet.
|
|
|
|
if (!this.loadingRoutes[route]) {
|
|
|
|
this.loadScript(route)
|
|
|
|
this.loadingRoutes[route] = true
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
loadScript (route) {
|
2017-04-04 19:55:56 +00:00
|
|
|
route = this.normalizeRoute(route)
|
|
|
|
|
2017-04-03 18:10:24 +00:00
|
|
|
const script = document.createElement('script')
|
|
|
|
const url = `/_next/${encodeURIComponent(this.buildId)}/page${route}`
|
|
|
|
script.src = url
|
|
|
|
script.type = 'text/javascript'
|
|
|
|
script.onerror = () => {
|
|
|
|
const error = new Error(`Error when loading route: ${route}`)
|
|
|
|
this.registerEvents.emit(route, { error })
|
|
|
|
}
|
|
|
|
|
|
|
|
document.body.appendChild(script)
|
|
|
|
}
|
|
|
|
|
|
|
|
// This method if called by the route code.
|
|
|
|
registerPage (route, error, page) {
|
2017-04-04 19:55:56 +00:00
|
|
|
route = this.normalizeRoute(route)
|
|
|
|
|
2017-04-03 18:10:24 +00:00
|
|
|
// add the page to the cache
|
2017-04-04 19:55:56 +00:00
|
|
|
this.pageCache[route] = { error, page }
|
2017-04-03 18:10:24 +00:00
|
|
|
this.registerEvents.emit(route, { error, page })
|
|
|
|
}
|
2017-04-04 19:55:56 +00:00
|
|
|
|
|
|
|
clearCache (route) {
|
|
|
|
route = this.normalizeRoute(route)
|
|
|
|
delete this.pageCache[route]
|
|
|
|
delete this.loadingRoutes[route]
|
|
|
|
}
|
2017-04-03 18:10:24 +00:00
|
|
|
}
|