1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/lib/router.js

241 lines
5.3 KiB
JavaScript
Raw Normal View History

2016-10-05 23:52:50 +00:00
import { parse } from 'url'
import evalScript from './eval-script'
import shallowEquals from './shallow-equals'
export default class Router {
2016-10-08 10:16:22 +00:00
constructor (url, initialData) {
const parsed = parse(url, true);
2016-10-08 05:12:51 +00:00
// represents the current component key
2016-10-08 10:16:22 +00:00
this.route = toRoute(parsed.pathname)
2016-10-05 23:52:50 +00:00
// set up the component cache (by route keys)
2016-10-08 05:12:51 +00:00
this.components = { [this.route]: initialData }
2016-10-05 23:52:50 +00:00
2016-10-08 10:16:22 +00:00
this.pathname = parsed.pathname
this.query = parsed.query
2016-10-08 05:12:51 +00:00
this.subscriptions = new Set()
this.componentLoadCancel = null
2016-10-05 23:52:50 +00:00
this.onPopState = this.onPopState.bind(this)
2016-10-08 05:12:51 +00:00
2016-10-08 10:16:22 +00:00
if ('undefined' !== typeof window) {
window.addEventListener('popstate', this.onPopState)
}
2016-10-05 23:52:50 +00:00
}
onPopState (e) {
this.abortComponentLoad()
2016-10-08 05:12:51 +00:00
const route = (e.state || {}).route || toRoute(location.pathname)
Promise.resolve()
.then(async () => {
const data = await this.fetchComponent(route)
let props
if (route !== this.route) {
2016-10-09 09:25:38 +00:00
props = await this.getInitialProps(data.Component, data.ctx)
2016-10-08 05:12:51 +00:00
}
this.route = route
this.set(getURL(), { ...data, props })
})
.catch((err) => {
if (err.cancelled) return
// the only way we can appropriately handle
// this failure is deferring to the browser
// since the URL has already changed
location.reload()
})
2016-10-05 23:52:50 +00:00
}
2016-10-08 05:12:51 +00:00
async update (route, data) {
2016-10-05 23:52:50 +00:00
data.Component = evalScript(data.component).default
delete data.component
this.components[route] = data
2016-10-08 05:12:51 +00:00
if (route === this.route) {
let props
try {
2016-10-09 09:25:38 +00:00
props = await this.getInitialProps(data.Component, {})
2016-10-08 05:12:51 +00:00
} catch (err) {
if (err.cancelled) return false
throw err
}
this.notify({ ...data, props })
}
return true
2016-10-05 23:52:50 +00:00
}
back () {
history.back()
}
2016-10-08 05:12:51 +00:00
push (route, url) {
return this.change('pushState', route, url)
2016-10-05 23:52:50 +00:00
}
2016-10-08 05:12:51 +00:00
replace (route, url) {
return this.change('replaceState', route, url)
2016-10-05 23:52:50 +00:00
}
2016-10-08 05:12:51 +00:00
async change (method, route, url) {
if (!route) route = toRoute(parse(url).pathname)
2016-10-05 23:52:50 +00:00
this.abortComponentLoad()
2016-10-08 05:12:51 +00:00
let data
let props
try {
data = await this.fetchComponent(route)
if (route !== this.route) {
2016-10-09 09:25:38 +00:00
props = await this.getInitialProps(data.Component, data.ctx)
2016-10-08 05:12:51 +00:00
}
} catch (err) {
if (err.cancelled) return false
throw err
2016-10-05 23:52:50 +00:00
}
2016-10-08 05:12:51 +00:00
history[method]({ route }, null, url)
this.route = route
this.set(url, { ...data, props })
return true
2016-10-05 23:52:50 +00:00
}
2016-10-08 05:12:51 +00:00
set (url, data) {
2016-10-05 23:52:50 +00:00
const parsed = parse(url, true)
2016-10-08 05:12:51 +00:00
2016-10-05 23:52:50 +00:00
if (this.urlIsNew(parsed)) {
this.pathname = parsed.pathname
this.query = parsed.query
2016-10-08 05:12:51 +00:00
this.notify(data)
2016-10-05 23:52:50 +00:00
}
}
urlIsNew ({ pathname, query }) {
return this.pathname !== pathname || !shallowEquals(query, this.query)
}
2016-10-08 05:12:51 +00:00
async fetchComponent (url) {
const route = toRoute(parse(url).pathname)
let data = this.components[route]
2016-10-09 11:01:06 +00:00
if (!data) {
let cancel
const componentUrl = toJSONUrl(route)
data = await new Promise((resolve, reject) => {
this.componentLoadCancel = cancel = () => {
if (xhr.abort) xhr.abort()
}
const xhr = loadComponent(componentUrl, (err, data) => {
if (err) return reject(err)
resolve({ ...data, ctx: { xhr } })
})
2016-10-05 23:52:50 +00:00
})
2016-10-09 11:01:06 +00:00
if (cancel === this.componentLoadCancel) {
this.componentLoadCancel = null
}
2016-10-05 23:52:50 +00:00
2016-10-09 11:01:06 +00:00
this.components[route] = data
2016-10-08 05:12:51 +00:00
}
return data
}
2016-10-09 09:25:38 +00:00
async getInitialProps (Component, ctx) {
2016-10-08 05:12:51 +00:00
let cancelled = false
const cancel = () => { cancelled = true }
2016-10-05 23:52:50 +00:00
this.componentLoadCancel = cancel
2016-10-08 05:12:51 +00:00
2016-10-09 09:25:38 +00:00
const props = await (Component.getInitialProps ? Component.getInitialProps(ctx) : {})
2016-10-08 05:12:51 +00:00
if (cancel === this.componentLoadCancel) {
this.componentLoadCancel = null
}
if (cancelled) {
const err = new Error('Cancelled')
err.cancelled = true
throw err
}
return props
2016-10-05 23:52:50 +00:00
}
abortComponentLoad () {
if (this.componentLoadCancel) {
this.componentLoadCancel()
this.componentLoadCancel = null
}
}
2016-10-08 05:12:51 +00:00
notify (data) {
this.subscriptions.forEach((fn) => fn(data))
2016-10-05 23:52:50 +00:00
}
subscribe (fn) {
2016-10-08 05:12:51 +00:00
this.subscriptions.add(fn)
return () => this.subscriptions.delete(fn)
2016-10-05 23:52:50 +00:00
}
}
2016-10-08 05:12:51 +00:00
function getURL () {
return location.pathname + (location.search || '') + (location.hash || '')
}
2016-10-05 23:52:50 +00:00
2016-10-08 05:12:51 +00:00
function toRoute (path) {
2016-10-05 23:52:50 +00:00
return path.replace(/\/$/, '') || '/'
}
2016-10-08 05:12:51 +00:00
function toJSONUrl (route) {
2016-10-05 23:52:50 +00:00
return ('/' === route ? '/index' : route) + '.json'
}
2016-10-08 05:12:51 +00:00
function loadComponent (url, fn) {
2016-10-05 23:52:50 +00:00
return loadJSON(url, (err, data) => {
2016-10-08 05:12:51 +00:00
if (err) return fn(err)
2016-10-05 23:52:50 +00:00
2016-10-08 05:12:51 +00:00
const { component } = data
let module
try {
module = evalScript(component)
} catch (err) {
return fn(err)
}
2016-10-08 05:12:51 +00:00
const Component = module.default || module
fn(null, { Component })
})
}
2016-10-05 23:52:50 +00:00
function loadJSON (url, fn) {
const xhr = new XMLHttpRequest()
xhr.onload = () => {
let data
try {
data = JSON.parse(xhr.responseText)
} catch (err) {
fn(new Error('Failed to load JSON for ' + url))
return
}
fn(null, data)
}
xhr.onerror = () => {
2016-10-08 05:12:51 +00:00
fn(new Error('XHR failed. Status: ' + xhr.status))
2016-10-05 23:52:50 +00:00
}
2016-10-09 11:01:06 +00:00
xhr.onabort = () => {
const err = new Error('XHR aborted')
err.cancelled = true
fn(err)
}
2016-10-05 23:52:50 +00:00
xhr.open('GET', url)
xhr.send()
return xhr
}