Get rid of eval #1611
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| /* 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 = {} | ||
| } | ||
|
|
||
| normalizeRoute (route) { | ||
| if (route[0] !== '/') { | ||
| throw new Error('Route name should start with a "/"') | ||
| } | ||
|
|
||
| return route.replace(/index$/, '') | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. Nope. Both are the same. Need to fix this. |
||
| } | ||
|
|
||
| loadPageSync (route) { | ||
| route = this.normalizeRoute(route) | ||
| const cachedPage = this.pageCache[route] | ||
|
|
||
| if (!cachedPage) { | ||
| return null | ||
| } else if (cachedPage.error) { | ||
| throw cachedPage.error | ||
| } else { | ||
| return cachedPage.page | ||
| } | ||
| } | ||
|
|
||
| loadPage (route) { | ||
| route = this.normalizeRoute(route) | ||
|
|
||
| const cachedPage = this.pageCache[route] | ||
|
There was a problem hiding this comment. It looks cache is not used when multiple concurrent requests happen for a route at a same time. maybe we can improve that later tho. There was a problem hiding this comment. I think it's doable. I'll do it. There was a problem hiding this comment. @nkzawa actually concurrent request are handled here: https://github.com/zeit/next.js/pull/1611/files/866319c76d0fa80df68d7aca809f3af81c68e6b6#diff-c7ddf3ad46bcb0938d6043ea0393d554R48 There was a problem hiding this comment. Actually, had to change this with the new |
||
| if (cachedPage) { | ||
| return new Promise((resolve, reject) => { | ||
| if (cachedPage.error) return reject(cachedPage.error) | ||
| return resolve(cachedPage.page) | ||
| }) | ||
| } | ||
|
|
||
| return new Promise((resolve, reject) => { | ||
| const fire = ({ error, page }) => { | ||
|
There was a problem hiding this comment. Nice, this is cleaner using |
||
| 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) { | ||
| route = this.normalizeRoute(route) | ||
|
|
||
| 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 }) | ||
| } | ||
|
There was a problem hiding this comment. It looks we can ditch event emitter and make things simpler like the following. return new Promise (resolve, reject) {
script.onload = () => {
const { page, statusCode } = window.__NEXT_PAGES_[route]
if (statusCode >= 400) {
const err = new Error()
err.statusCode = statusCode
reject(err)
return
}
// wait for webpack ready
resolve(page)
}
script.onerror = () => {
reject(const error = new Error(`Error when loading route: ${route}`))
}
}There was a problem hiding this comment. This would make the script of page components simple as well, since it doesn't need to wait for const newContent = `
window.__NEXT_PAGES_[${JSON.stringify(routename)}] = {
statusCode: ${statusCode},
page: ${content}
}
`There was a problem hiding this comment. Good point. Let's do this. There was a problem hiding this comment. I'd like to keep the next pages inside a variable of PageLoader. Anyway doing following is not exactly possible. const newContent = `
window.__NEXT_PAGES_[${JSON.stringify(routename)}] = {
statusCode: ${statusCode},
page: ${content}
}
`That's because, webpack is not available when the page is loading at first. There was a problem hiding this comment. I think we can move values to PageLoader when it's ready. There was a problem hiding this comment. That's what currently we are doing. Here's how this looks now: const newContent = `
window.__NEXT_REGISTER_PAGE('${routeName}', function() {
var comp = ${content}
return { page: comp.default }
})
` |
||
|
|
||
| document.body.appendChild(script) | ||
| } | ||
|
|
||
| // This method if called by the route code. | ||
| registerPage (route, error, page) { | ||
| route = this.normalizeRoute(route) | ||
|
|
||
| // add the page to the cache | ||
| this.pageCache[route] = { error, page } | ||
| this.registerEvents.emit(route, { error, page }) | ||
| } | ||
|
|
||
| clearCache (route) { | ||
| route = this.normalizeRoute(route) | ||
| delete this.pageCache[route] | ||
| delete this.loadingRoutes[route] | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Prefix these globals with "__"