2019-03-13 15:56:20 +01:00
|
|
|
|
/* global __NEXT_DATA__ */
|
|
|
|
|
// tslint:disable:no-console
|
2019-05-29 13:57:26 +02:00
|
|
|
|
import { ParsedUrlQuery } from 'querystring'
|
|
|
|
|
import { ComponentType } from 'react'
|
2019-11-11 04:24:53 +01:00
|
|
|
|
import { parse, UrlObject } from 'url'
|
2019-05-29 13:57:26 +02:00
|
|
|
|
import mitt, { MittEmitter } from '../mitt'
|
2019-05-27 20:20:33 +02:00
|
|
|
|
import {
|
2019-05-29 13:57:26 +02:00
|
|
|
|
AppContextType,
|
|
|
|
|
formatWithValidation,
|
|
|
|
|
getURL,
|
|
|
|
|
loadGetInitialProps,
|
|
|
|
|
NextPageContext,
|
2020-01-04 21:53:33 +01:00
|
|
|
|
ST,
|
2019-05-29 13:57:26 +02:00
|
|
|
|
} from '../utils'
|
2019-11-11 04:24:53 +01:00
|
|
|
|
import { isDynamicRoute } from './utils/is-dynamic'
|
2019-05-31 00:44:27 +02:00
|
|
|
|
import { getRouteMatcher } from './utils/route-matcher'
|
2019-05-30 22:42:45 +02:00
|
|
|
|
import { getRouteRegex } from './utils/route-regex'
|
2019-03-23 23:00:46 +01:00
|
|
|
|
|
2020-04-15 01:12:02 +02:00
|
|
|
|
const basePath = (process.env.__NEXT_ROUTER_BASEPATH as string) || ''
|
2020-04-14 09:50:39 +02:00
|
|
|
|
|
|
|
|
|
export function addBasePath(path: string): string {
|
|
|
|
|
return path.indexOf(basePath) !== 0 ? basePath + path : path
|
|
|
|
|
}
|
|
|
|
|
|
2020-04-26 17:14:39 +02:00
|
|
|
|
export function delBasePath(path: string): string {
|
2020-04-14 09:50:39 +02:00
|
|
|
|
return path.indexOf(basePath) === 0
|
|
|
|
|
? path.substr(basePath.length) || '/'
|
|
|
|
|
: path
|
2019-12-29 20:03:12 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-03-23 23:00:46 +01:00
|
|
|
|
function toRoute(path: string): string {
|
|
|
|
|
return path.replace(/\/$/, '') || '/'
|
|
|
|
|
}
|
2019-03-13 15:56:20 +01:00
|
|
|
|
|
2020-01-27 23:50:59 +01:00
|
|
|
|
const prepareRoute = (path: string) =>
|
|
|
|
|
toRoute(!path || path === '/' ? '/index' : path)
|
|
|
|
|
|
2019-07-10 06:10:44 +02:00
|
|
|
|
type Url = UrlObject | string
|
|
|
|
|
|
2020-03-06 05:15:10 +01:00
|
|
|
|
type ComponentRes = { page: ComponentType; mod: any }
|
|
|
|
|
|
2019-04-26 09:37:57 +02:00
|
|
|
|
export type BaseRouter = {
|
2019-03-13 15:56:20 +01:00
|
|
|
|
route: string
|
|
|
|
|
pathname: string
|
2019-05-20 17:21:15 +02:00
|
|
|
|
query: ParsedUrlQuery
|
2019-05-29 13:57:26 +02:00
|
|
|
|
asPath: string
|
2020-04-14 09:50:39 +02:00
|
|
|
|
basePath: string
|
2019-03-13 15:56:20 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-07-11 19:35:39 +02:00
|
|
|
|
export type NextRouter = BaseRouter &
|
|
|
|
|
Pick<
|
|
|
|
|
Router,
|
|
|
|
|
| 'push'
|
|
|
|
|
| 'replace'
|
|
|
|
|
| 'reload'
|
|
|
|
|
| 'back'
|
|
|
|
|
| 'prefetch'
|
|
|
|
|
| 'beforePopState'
|
|
|
|
|
| 'events'
|
2020-02-15 19:01:10 +01:00
|
|
|
|
| 'isFallback'
|
2019-07-11 19:35:39 +02:00
|
|
|
|
>
|
|
|
|
|
|
2020-02-17 21:46:15 +01:00
|
|
|
|
export type PrefetchOptions = {
|
|
|
|
|
priority?: boolean
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-13 15:56:20 +01:00
|
|
|
|
type RouteInfo = {
|
2019-05-29 13:57:26 +02:00
|
|
|
|
Component: ComponentType
|
2020-03-06 05:15:10 +01:00
|
|
|
|
__N_SSG?: boolean
|
|
|
|
|
__N_SSP?: boolean
|
2019-05-29 13:57:26 +02:00
|
|
|
|
props?: any
|
2019-03-13 15:56:20 +01:00
|
|
|
|
err?: Error
|
2019-05-29 13:57:26 +02:00
|
|
|
|
error?: any
|
2019-03-13 15:56:20 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-23 23:54:11 +02:00
|
|
|
|
type Subscription = (data: RouteInfo, App?: ComponentType) => Promise<void>
|
2017-05-14 02:25:57 +02:00
|
|
|
|
|
2019-03-13 15:56:20 +01:00
|
|
|
|
type BeforePopStateCallback = (state: any) => boolean
|
2016-10-06 01:52:50 +02:00
|
|
|
|
|
2019-06-05 20:15:42 +02:00
|
|
|
|
type ComponentLoadCancel = (() => void) | null
|
|
|
|
|
|
2020-02-17 22:16:19 +01:00
|
|
|
|
type HistoryMethod = 'replaceState' | 'pushState'
|
|
|
|
|
|
2020-02-13 02:06:07 +01:00
|
|
|
|
function fetchNextData(
|
2020-01-27 23:50:59 +01:00
|
|
|
|
pathname: string,
|
|
|
|
|
query: ParsedUrlQuery | null,
|
2020-02-13 02:06:07 +01:00
|
|
|
|
isServerRender: boolean,
|
2020-01-27 23:50:59 +01:00
|
|
|
|
cb?: (...args: any) => any
|
2020-02-13 02:06:07 +01:00
|
|
|
|
) {
|
2020-02-13 05:06:41 +01:00
|
|
|
|
let attempts = isServerRender ? 3 : 1
|
|
|
|
|
function getResponse(): Promise<any> {
|
|
|
|
|
return fetch(
|
|
|
|
|
formatWithValidation({
|
2020-04-26 17:14:39 +02:00
|
|
|
|
pathname: addBasePath(
|
|
|
|
|
// @ts-ignore __NEXT_DATA__
|
|
|
|
|
`/_next/data/${__NEXT_DATA__.buildId}${delBasePath(pathname)}.json`
|
|
|
|
|
),
|
2020-02-13 05:06:41 +01:00
|
|
|
|
query,
|
2020-03-04 17:56:08 +01:00
|
|
|
|
}),
|
|
|
|
|
{
|
|
|
|
|
// Cookies are required to be present for Next.js' SSG "Preview Mode".
|
|
|
|
|
// Cookies may also be required for `getServerSideProps`.
|
|
|
|
|
//
|
|
|
|
|
// > `fetch` won’t send cookies, unless you set the credentials init
|
|
|
|
|
// > option.
|
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
|
|
|
|
|
//
|
|
|
|
|
// > For maximum browser compatibility when it comes to sending &
|
|
|
|
|
// > receiving cookies, always supply the `credentials: 'same-origin'`
|
|
|
|
|
// > option instead of relying on the default.
|
|
|
|
|
// https://github.com/github/fetch#caveats
|
|
|
|
|
credentials: 'same-origin',
|
|
|
|
|
}
|
2020-05-18 21:24:37 +02:00
|
|
|
|
).then((res) => {
|
2020-01-27 23:50:59 +01:00
|
|
|
|
if (!res.ok) {
|
2020-02-13 05:06:41 +01:00
|
|
|
|
if (--attempts > 0 && res.status >= 500) {
|
|
|
|
|
return getResponse()
|
|
|
|
|
}
|
2020-02-13 02:06:07 +01:00
|
|
|
|
throw new Error(`Failed to load static props`)
|
2020-01-27 23:50:59 +01:00
|
|
|
|
}
|
|
|
|
|
return res.json()
|
|
|
|
|
})
|
2020-02-13 05:06:41 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return getResponse()
|
2020-05-18 21:24:37 +02:00
|
|
|
|
.then((data) => {
|
2020-01-27 23:50:59 +01:00
|
|
|
|
return cb ? cb(data) : data
|
|
|
|
|
})
|
2020-02-13 02:06:07 +01:00
|
|
|
|
.catch((err: Error) => {
|
|
|
|
|
// We should only trigger a server-side transition if this was caused
|
|
|
|
|
// on a client-side transition. Otherwise, we'd get into an infinite
|
|
|
|
|
// loop.
|
|
|
|
|
if (!isServerRender) {
|
|
|
|
|
;(err as any).code = 'PAGE_LOAD_ERROR'
|
|
|
|
|
}
|
|
|
|
|
throw err
|
|
|
|
|
})
|
2020-01-27 23:50:59 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-04-26 09:37:57 +02:00
|
|
|
|
export default class Router implements BaseRouter {
|
2019-03-13 15:56:20 +01:00
|
|
|
|
route: string
|
|
|
|
|
pathname: string
|
2019-05-20 17:21:15 +02:00
|
|
|
|
query: ParsedUrlQuery
|
2019-03-13 15:56:20 +01:00
|
|
|
|
asPath: string
|
2020-04-14 09:50:39 +02:00
|
|
|
|
basePath: string
|
|
|
|
|
|
2019-05-23 21:31:22 +02:00
|
|
|
|
/**
|
|
|
|
|
* Map of all components loaded in `Router`
|
|
|
|
|
*/
|
2019-05-29 13:57:26 +02:00
|
|
|
|
components: { [pathname: string]: RouteInfo }
|
2019-12-30 23:57:06 +01:00
|
|
|
|
// Static Data Cache
|
|
|
|
|
sdc: { [asPath: string]: object } = {}
|
2019-06-05 20:15:42 +02:00
|
|
|
|
sub: Subscription
|
|
|
|
|
clc: ComponentLoadCancel
|
2019-03-13 15:56:20 +01:00
|
|
|
|
pageLoader: any
|
2019-03-14 19:43:29 +01:00
|
|
|
|
_bps: BeforePopStateCallback | undefined
|
2019-07-11 19:35:39 +02:00
|
|
|
|
events: MittEmitter
|
2019-07-30 20:00:19 +02:00
|
|
|
|
_wrapApp: (App: ComponentType) => any
|
2019-11-12 22:37:47 +01:00
|
|
|
|
isSsr: boolean
|
2020-02-15 19:01:10 +01:00
|
|
|
|
isFallback: boolean
|
2019-03-13 15:56:20 +01:00
|
|
|
|
|
|
|
|
|
static events: MittEmitter = mitt()
|
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
constructor(
|
|
|
|
|
pathname: string,
|
|
|
|
|
query: ParsedUrlQuery,
|
|
|
|
|
as: string,
|
|
|
|
|
{
|
|
|
|
|
initialProps,
|
|
|
|
|
pageLoader,
|
|
|
|
|
App,
|
2019-07-30 20:00:19 +02:00
|
|
|
|
wrapApp,
|
2019-05-29 13:57:26 +02:00
|
|
|
|
Component,
|
|
|
|
|
err,
|
2019-06-05 20:15:42 +02:00
|
|
|
|
subscription,
|
2020-02-15 19:01:10 +01:00
|
|
|
|
isFallback,
|
2019-05-29 13:57:26 +02:00
|
|
|
|
}: {
|
2019-06-05 20:15:42 +02:00
|
|
|
|
subscription: Subscription
|
2019-05-29 13:57:26 +02:00
|
|
|
|
initialProps: any
|
|
|
|
|
pageLoader: any
|
|
|
|
|
Component: ComponentType
|
|
|
|
|
App: ComponentType
|
2019-07-30 20:00:19 +02:00
|
|
|
|
wrapApp: (App: ComponentType) => any
|
2019-05-29 13:57:26 +02:00
|
|
|
|
err?: Error
|
2020-02-15 19:01:10 +01:00
|
|
|
|
isFallback: boolean
|
2019-05-29 13:57:26 +02:00
|
|
|
|
}
|
|
|
|
|
) {
|
2016-10-08 07:12:51 +02:00
|
|
|
|
// represents the current component key
|
2016-12-16 21:33:08 +01:00
|
|
|
|
this.route = toRoute(pathname)
|
2016-10-06 01:52:50 +02:00
|
|
|
|
|
|
|
|
|
// set up the component cache (by route keys)
|
2017-04-18 06:18:43 +02:00
|
|
|
|
this.components = {}
|
|
|
|
|
// We should not keep the cache, if there's an error
|
|
|
|
|
// Otherwise, this cause issues when when going back and
|
|
|
|
|
// come again to the errored page.
|
2019-01-31 21:45:36 +01:00
|
|
|
|
if (pathname !== '/_error') {
|
2020-03-06 05:15:10 +01:00
|
|
|
|
this.components[this.route] = {
|
|
|
|
|
Component,
|
|
|
|
|
props: initialProps,
|
|
|
|
|
err,
|
|
|
|
|
__N_SSG: initialProps && initialProps.__N_SSG,
|
|
|
|
|
__N_SSP: initialProps && initialProps.__N_SSP,
|
|
|
|
|
}
|
2017-04-18 06:18:43 +02:00
|
|
|
|
}
|
2017-02-15 20:29:42 +01:00
|
|
|
|
|
2018-05-31 11:47:29 +02:00
|
|
|
|
this.components['/_app'] = { Component: App }
|
|
|
|
|
|
2018-07-31 21:04:14 +02:00
|
|
|
|
// Backwards compat for Router.router.events
|
|
|
|
|
// TODO: Should be remove the following major version as it was never documented
|
|
|
|
|
this.events = Router.events
|
2017-03-13 05:34:30 +01:00
|
|
|
|
|
2017-04-18 06:18:43 +02:00
|
|
|
|
this.pageLoader = pageLoader
|
2016-12-16 21:33:08 +01:00
|
|
|
|
this.pathname = pathname
|
|
|
|
|
this.query = query
|
2019-09-16 18:15:18 +02:00
|
|
|
|
// if auto prerendered and dynamic route wait to update asPath
|
|
|
|
|
// until after mount to prevent hydration mismatch
|
|
|
|
|
this.asPath =
|
|
|
|
|
// @ts-ignore this is temporarily global (attached to window)
|
2019-11-13 03:34:12 +01:00
|
|
|
|
isDynamicRoute(pathname) && __NEXT_DATA__.autoExport ? pathname : as
|
2020-04-14 09:50:39 +02:00
|
|
|
|
this.basePath = basePath
|
2019-06-05 20:15:42 +02:00
|
|
|
|
this.sub = subscription
|
|
|
|
|
this.clc = null
|
2019-07-30 20:00:19 +02:00
|
|
|
|
this._wrapApp = wrapApp
|
2019-11-12 22:37:47 +01:00
|
|
|
|
// make sure to ignore extra popState in safari on navigating
|
|
|
|
|
// back from external site
|
|
|
|
|
this.isSsr = true
|
2016-10-08 07:12:51 +02:00
|
|
|
|
|
2020-02-15 19:01:10 +01:00
|
|
|
|
this.isFallback = isFallback
|
|
|
|
|
|
2016-10-17 02:00:17 +02:00
|
|
|
|
if (typeof window !== 'undefined') {
|
2020-04-22 17:56:49 +02:00
|
|
|
|
// make sure "as" doesn't start with double slashes or else it can
|
|
|
|
|
// throw an error as it's considered invalid
|
|
|
|
|
if (as.substr(0, 2) !== '//') {
|
|
|
|
|
// in order for `e.state` to work on the `onpopstate` event
|
|
|
|
|
// we have to register the initial route upon initialization
|
|
|
|
|
this.changeState(
|
|
|
|
|
'replaceState',
|
|
|
|
|
formatWithValidation({ pathname, query }),
|
|
|
|
|
as
|
|
|
|
|
)
|
|
|
|
|
}
|
2016-12-24 18:29:23 +01:00
|
|
|
|
|
2016-10-08 12:16:22 +02:00
|
|
|
|
window.addEventListener('popstate', this.onPopState)
|
|
|
|
|
}
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-08-12 00:03:11 +02:00
|
|
|
|
// @deprecated backwards compatibility even though it's a private method.
|
2019-03-14 19:43:29 +01:00
|
|
|
|
static _rewriteUrlForNextExport(url: string): string {
|
2020-01-04 18:16:57 +01:00
|
|
|
|
if (process.env.__NEXT_EXPORT_TRAILING_SLASH) {
|
|
|
|
|
const rewriteUrlForNextExport = require('./rewrite-url-for-export')
|
|
|
|
|
.rewriteUrlForNextExport
|
|
|
|
|
return rewriteUrlForNextExport(url)
|
|
|
|
|
} else {
|
|
|
|
|
return url
|
|
|
|
|
}
|
2018-11-28 15:03:02 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
onPopState = (e: PopStateEvent): void => {
|
2017-01-25 17:58:26 +01:00
|
|
|
|
if (!e.state) {
|
2017-02-05 09:58:44 +01:00
|
|
|
|
// We get state as undefined for two reasons.
|
|
|
|
|
// 1. With older safari (< 8) and older chrome (< 34)
|
|
|
|
|
// 2. When the URL changed with #
|
|
|
|
|
//
|
|
|
|
|
// In the both cases, we don't need to proceed and change the route.
|
|
|
|
|
// (as it's already changed)
|
|
|
|
|
// But we can simply replace the state with the new changes.
|
|
|
|
|
// Actually, for (1) we don't need to nothing. But it's hard to detect that event.
|
|
|
|
|
// So, doing the following for (1) does no harm.
|
|
|
|
|
const { pathname, query } = this
|
2019-05-29 13:57:26 +02:00
|
|
|
|
this.changeState(
|
|
|
|
|
'replaceState',
|
|
|
|
|
formatWithValidation({ pathname, query }),
|
|
|
|
|
getURL()
|
|
|
|
|
)
|
2017-01-25 17:58:26 +01:00
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
2019-04-09 23:58:44 +02:00
|
|
|
|
// Make sure we don't re-render on initial load,
|
|
|
|
|
// can be caused by navigating back from an external site
|
2019-11-12 22:37:47 +01:00
|
|
|
|
if (
|
|
|
|
|
e.state &&
|
|
|
|
|
this.isSsr &&
|
2020-02-19 18:00:27 +01:00
|
|
|
|
e.state.as === this.asPath &&
|
|
|
|
|
parse(e.state.url).pathname === this.pathname
|
2019-11-12 22:37:47 +01:00
|
|
|
|
) {
|
2019-04-09 23:58:44 +02:00
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
2018-03-31 16:21:51 +02:00
|
|
|
|
// If the downstream application returns falsy, return.
|
|
|
|
|
// They will then be responsible for handling the event.
|
2019-03-14 19:43:29 +01:00
|
|
|
|
if (this._bps && !this._bps(e.state)) {
|
2018-03-31 16:21:51 +02:00
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
2017-03-06 17:48:35 +01:00
|
|
|
|
const { url, as, options } = e.state
|
2018-09-18 20:17:35 +02:00
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2018-08-24 12:30:27 +02:00
|
|
|
|
if (typeof url === 'undefined' || typeof as === 'undefined') {
|
2019-05-29 13:57:26 +02:00
|
|
|
|
console.warn(
|
2020-05-27 23:51:11 +02:00
|
|
|
|
'`popstate` event triggered but `event.state` did not have `url` or `as` https://err.sh/vercel/next.js/popstate-state-empty'
|
2019-05-29 13:57:26 +02:00
|
|
|
|
)
|
2018-08-24 12:30:27 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
2017-03-06 17:48:35 +01:00
|
|
|
|
this.replace(url, as, options)
|
2019-05-29 13:57:26 +02:00
|
|
|
|
}
|
2016-10-06 01:52:50 +02:00
|
|
|
|
|
2019-09-11 19:21:10 +02:00
|
|
|
|
update(route: string, mod: any) {
|
|
|
|
|
const Component: ComponentType = mod.default || mod
|
2017-03-06 17:48:35 +01:00
|
|
|
|
const data = this.components[route]
|
|
|
|
|
if (!data) {
|
|
|
|
|
throw new Error(`Cannot update unavailable route: ${route}`)
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-19 09:09:59 +02:00
|
|
|
|
const newData = Object.assign({}, data, {
|
2020-03-06 05:15:10 +01:00
|
|
|
|
Component,
|
|
|
|
|
__N_SSG: mod.__N_SSG,
|
|
|
|
|
__N_SSP: mod.__N_SSP,
|
2020-05-19 09:09:59 +02:00
|
|
|
|
})
|
2016-10-17 16:35:31 +02:00
|
|
|
|
this.components[route] = newData
|
2016-10-06 01:52:50 +02:00
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
|
// pages/_app.js updated
|
|
|
|
|
if (route === '/_app') {
|
|
|
|
|
this.notify(this.components[this.route])
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-08 07:12:51 +02:00
|
|
|
|
if (route === this.route) {
|
2016-10-17 16:35:31 +02:00
|
|
|
|
this.notify(newData)
|
2016-10-08 07:12:51 +02:00
|
|
|
|
}
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-05 22:22:02 +02:00
|
|
|
|
reload(): void {
|
|
|
|
|
window.location.reload()
|
2016-10-24 09:22:15 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-23 21:31:22 +02:00
|
|
|
|
/**
|
|
|
|
|
* Go back in history
|
|
|
|
|
*/
|
2019-03-13 15:56:20 +01:00
|
|
|
|
back() {
|
2016-10-17 02:00:17 +02:00
|
|
|
|
window.history.back()
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-23 21:31:22 +02:00
|
|
|
|
/**
|
|
|
|
|
* Performs a `pushState` with arguments
|
|
|
|
|
* @param url of the route
|
|
|
|
|
* @param as masks `url` for the browser
|
|
|
|
|
* @param options object you can define `shallow` and other options
|
|
|
|
|
*/
|
2019-07-10 06:10:44 +02:00
|
|
|
|
push(url: Url, as: Url = url, options = {}) {
|
2017-03-06 17:48:35 +01:00
|
|
|
|
return this.change('pushState', url, as, options)
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-23 21:31:22 +02:00
|
|
|
|
/**
|
|
|
|
|
* Performs a `replaceState` with arguments
|
|
|
|
|
* @param url of the route
|
|
|
|
|
* @param as masks `url` for the browser
|
|
|
|
|
* @param options object you can define `shallow` and other options
|
|
|
|
|
*/
|
2019-07-10 06:10:44 +02:00
|
|
|
|
replace(url: Url, as: Url = url, options = {}) {
|
2017-03-06 17:48:35 +01:00
|
|
|
|
return this.change('replaceState', url, as, options)
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-02-17 22:16:19 +01:00
|
|
|
|
change(
|
|
|
|
|
method: HistoryMethod,
|
|
|
|
|
_url: Url,
|
|
|
|
|
_as: Url,
|
|
|
|
|
options: any
|
|
|
|
|
): Promise<boolean> {
|
2019-03-14 19:43:29 +01:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2019-11-12 22:37:47 +01:00
|
|
|
|
if (!options._h) {
|
|
|
|
|
this.isSsr = false
|
|
|
|
|
}
|
2019-08-09 21:43:29 +02:00
|
|
|
|
// marking route changes as a navigation start entry
|
2020-01-04 21:53:33 +01:00
|
|
|
|
if (ST) {
|
2019-08-09 21:43:29 +02:00
|
|
|
|
performance.mark('routeChange')
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
// If url and as provided as an object representation,
|
|
|
|
|
// we'll format them into the string version here.
|
2020-04-14 09:50:39 +02:00
|
|
|
|
let url = typeof _url === 'object' ? formatWithValidation(_url) : _url
|
2019-03-14 19:43:29 +01:00
|
|
|
|
let as = typeof _as === 'object' ? formatWithValidation(_as) : _as
|
|
|
|
|
|
2020-06-05 19:47:16 +02:00
|
|
|
|
// parse url parts without basePath since pathname should map 1-1 with
|
|
|
|
|
// pages dir
|
|
|
|
|
const { pathname, query, protocol } = parse(delBasePath(url), true)
|
|
|
|
|
|
2020-04-14 09:50:39 +02:00
|
|
|
|
url = addBasePath(url)
|
|
|
|
|
as = addBasePath(as)
|
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
// Add the ending slash to the paths. So, we can serve the
|
|
|
|
|
// "<page>/index.html" directly for the SSR page.
|
2019-03-17 00:54:58 +01:00
|
|
|
|
if (process.env.__NEXT_EXPORT_TRAILING_SLASH) {
|
2020-01-04 18:16:57 +01:00
|
|
|
|
const rewriteUrlForNextExport = require('./rewrite-url-for-export')
|
|
|
|
|
.rewriteUrlForNextExport
|
2019-03-17 00:54:58 +01:00
|
|
|
|
// @ts-ignore this is temporarily global (attached to window)
|
|
|
|
|
if (__NEXT_DATA__.nextExport) {
|
2019-04-24 16:47:50 +02:00
|
|
|
|
as = rewriteUrlForNextExport(as)
|
2019-03-17 00:54:58 +01:00
|
|
|
|
}
|
2019-03-14 19:43:29 +01:00
|
|
|
|
}
|
2017-03-12 04:57:51 +01:00
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
this.abortComponentLoad(as)
|
2016-12-30 20:55:00 +01:00
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
// If the url change is only related to a hash change
|
|
|
|
|
// We should not proceed. We should only change the state.
|
2019-07-16 01:07:04 +02:00
|
|
|
|
|
|
|
|
|
// WARNING: `_h` is an internal option for handing Next.js client-side
|
|
|
|
|
// hydration. Your app should _never_ use this property. It may change at
|
|
|
|
|
// any time without notice.
|
|
|
|
|
if (!options._h && this.onlyAHashChange(as)) {
|
2019-05-05 21:34:33 +02:00
|
|
|
|
this.asPath = as
|
2019-03-14 19:43:29 +01:00
|
|
|
|
Router.events.emit('hashChangeStart', as)
|
2020-04-14 09:50:39 +02:00
|
|
|
|
this.changeState(method, url, as, options)
|
2019-03-14 19:43:29 +01:00
|
|
|
|
this.scrollToHash(as)
|
|
|
|
|
Router.events.emit('hashChangeComplete', as)
|
2019-05-30 23:57:10 +02:00
|
|
|
|
return resolve(true)
|
2019-03-14 19:43:29 +01:00
|
|
|
|
}
|
2017-02-28 18:31:17 +01:00
|
|
|
|
|
2019-08-07 16:47:13 +02:00
|
|
|
|
if (!pathname || protocol) {
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
|
throw new Error(
|
2020-05-27 23:51:11 +02:00
|
|
|
|
`Invalid href passed to router: ${url} https://err.sh/vercel/next.js/invalid-href-passed`
|
2019-08-07 16:47:13 +02:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
return resolve(false)
|
|
|
|
|
}
|
2018-01-30 16:40:52 +01:00
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
// If asked to change the current URL we should reload the current page
|
|
|
|
|
// (not location.reload() but reload getInitialProps and other Next.js stuffs)
|
|
|
|
|
// We also need to set the method = replaceState always
|
|
|
|
|
// as this should not go into the history (That's how browsers work)
|
|
|
|
|
// We should compare the new asPath to the current asPath, not the url
|
|
|
|
|
if (!this.urlIsNew(as)) {
|
|
|
|
|
method = 'replaceState'
|
|
|
|
|
}
|
2016-12-30 20:55:00 +01:00
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
const route = toRoute(pathname)
|
|
|
|
|
const { shallow = false } = options
|
2016-10-08 07:12:51 +02:00
|
|
|
|
|
2019-06-20 20:41:02 +02:00
|
|
|
|
if (isDynamicRoute(route)) {
|
2019-06-13 15:35:48 +02:00
|
|
|
|
const { pathname: asPathname } = parse(as)
|
2020-01-20 23:47:52 +01:00
|
|
|
|
const routeRegex = getRouteRegex(route)
|
|
|
|
|
const routeMatch = getRouteMatcher(routeRegex)(asPathname)
|
2019-05-27 20:20:33 +02:00
|
|
|
|
if (!routeMatch) {
|
2020-01-20 23:47:52 +01:00
|
|
|
|
const missingParams = Object.keys(routeRegex.groups).filter(
|
2020-05-18 21:24:37 +02:00
|
|
|
|
(param) => !query[param]
|
2020-01-20 23:47:52 +01:00
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
if (missingParams.length > 0) {
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
|
console.warn(
|
|
|
|
|
`Mismatching \`as\` and \`href\` failed to manually provide ` +
|
|
|
|
|
`the params: ${missingParams.join(
|
|
|
|
|
', '
|
|
|
|
|
)} in the \`href\`'s \`query\``
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return reject(
|
|
|
|
|
new Error(
|
|
|
|
|
`The provided \`as\` value (${asPathname}) is incompatible with the \`href\` value (${route}). ` +
|
2020-05-27 23:51:11 +02:00
|
|
|
|
`Read more: https://err.sh/vercel/next.js/incompatible-href-as`
|
2020-01-20 23:47:52 +01:00
|
|
|
|
)
|
|
|
|
|
)
|
2019-10-11 11:49:18 +02:00
|
|
|
|
}
|
2020-01-20 23:47:52 +01:00
|
|
|
|
} else {
|
|
|
|
|
// Merge params into `query`, overwriting any specified in search
|
|
|
|
|
Object.assign(query, routeMatch)
|
2019-05-27 20:20:33 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
Router.events.emit('routeChangeStart', as)
|
2017-03-06 17:48:35 +01:00
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
// If shallow is true and the route exists in the router cache we reuse the previous result
|
2020-05-18 21:24:37 +02:00
|
|
|
|
this.getRouteInfo(route, pathname, query, as, shallow).then(
|
|
|
|
|
(routeInfo) => {
|
|
|
|
|
const { error } = routeInfo
|
2016-11-03 11:15:03 +01:00
|
|
|
|
|
2020-05-18 21:24:37 +02:00
|
|
|
|
if (error && error.cancelled) {
|
|
|
|
|
return resolve(false)
|
|
|
|
|
}
|
2019-07-03 02:42:41 +02:00
|
|
|
|
|
2020-05-18 21:24:37 +02:00
|
|
|
|
Router.events.emit('beforeHistoryChange', as)
|
|
|
|
|
this.changeState(method, url, as, options)
|
2020-02-07 14:09:06 +01:00
|
|
|
|
|
2020-05-18 21:24:37 +02:00
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
|
const appComp: any = this.components['/_app'].Component
|
|
|
|
|
;(window as any).next.isPrerendered =
|
|
|
|
|
appComp.getInitialProps === appComp.origGetInitialProps &&
|
|
|
|
|
!(routeInfo.Component as any).getInitialProps
|
|
|
|
|
}
|
2020-02-07 14:09:06 +01:00
|
|
|
|
|
2020-05-23 23:54:11 +02:00
|
|
|
|
this.set(route, pathname, query, as, routeInfo).then(() => {
|
|
|
|
|
if (error) {
|
|
|
|
|
Router.events.emit('routeChangeError', error, as)
|
|
|
|
|
throw error
|
|
|
|
|
}
|
2017-01-01 20:36:37 +01:00
|
|
|
|
|
2020-05-23 23:54:11 +02:00
|
|
|
|
Router.events.emit('routeChangeComplete', as)
|
|
|
|
|
return resolve(true)
|
|
|
|
|
})
|
2020-05-18 21:24:37 +02:00
|
|
|
|
},
|
|
|
|
|
reject
|
|
|
|
|
)
|
2019-03-14 19:43:29 +01:00
|
|
|
|
})
|
2017-02-15 19:27:41 +01:00
|
|
|
|
}
|
2016-12-30 20:55:00 +01:00
|
|
|
|
|
2020-02-17 22:16:19 +01:00
|
|
|
|
changeState(
|
|
|
|
|
method: HistoryMethod,
|
|
|
|
|
url: string,
|
|
|
|
|
as: string,
|
|
|
|
|
options = {}
|
|
|
|
|
): void {
|
2018-09-27 21:10:53 +02:00
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
|
if (typeof window.history === 'undefined') {
|
|
|
|
|
console.error(`Warning: window.history is not available.`)
|
|
|
|
|
return
|
|
|
|
|
}
|
2020-02-17 22:16:19 +01:00
|
|
|
|
|
2018-09-27 21:10:53 +02:00
|
|
|
|
if (typeof window.history[method] === 'undefined') {
|
|
|
|
|
console.error(`Warning: window.history.${method} is not available`)
|
|
|
|
|
return
|
|
|
|
|
}
|
2018-02-25 15:19:38 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (method !== 'pushState' || getURL() !== as) {
|
2019-10-30 03:50:16 +01:00
|
|
|
|
window.history[method](
|
|
|
|
|
{
|
|
|
|
|
url,
|
|
|
|
|
as,
|
2019-11-12 22:37:47 +01:00
|
|
|
|
options,
|
2019-10-30 03:50:16 +01:00
|
|
|
|
},
|
2020-02-17 22:16:19 +01:00
|
|
|
|
// Most browsers currently ignores this parameter, although they may use it in the future.
|
|
|
|
|
// Passing the empty string here should be safe against future changes to the method.
|
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState
|
|
|
|
|
'',
|
2019-10-30 03:50:16 +01:00
|
|
|
|
as
|
|
|
|
|
)
|
2016-12-30 20:55:00 +01:00
|
|
|
|
}
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
getRouteInfo(
|
|
|
|
|
route: string,
|
|
|
|
|
pathname: string,
|
|
|
|
|
query: any,
|
|
|
|
|
as: string,
|
|
|
|
|
shallow: boolean = false
|
|
|
|
|
): Promise<RouteInfo> {
|
2019-03-14 19:43:29 +01:00
|
|
|
|
const cachedRouteInfo = this.components[route]
|
|
|
|
|
|
|
|
|
|
// If there is a shallow route transition possible
|
|
|
|
|
// If the route is already rendered on the screen.
|
|
|
|
|
if (shallow && cachedRouteInfo && this.route === route) {
|
|
|
|
|
return Promise.resolve(cachedRouteInfo)
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-20 22:25:41 +01:00
|
|
|
|
const handleError = (
|
|
|
|
|
err: Error & { code: any; cancelled: boolean },
|
|
|
|
|
loadErrorFail?: boolean
|
|
|
|
|
) => {
|
2020-05-18 21:24:37 +02:00
|
|
|
|
return new Promise((resolve) => {
|
2020-02-20 22:25:41 +01:00
|
|
|
|
if (err.code === 'PAGE_LOAD_ERROR' || loadErrorFail) {
|
|
|
|
|
// If we can't load the page it could be one of following reasons
|
|
|
|
|
// 1. Page doesn't exists
|
|
|
|
|
// 2. Page does exist in a different zone
|
|
|
|
|
// 3. Internal error while loading the page
|
|
|
|
|
|
|
|
|
|
// So, doing a hard reload is the proper way to deal with this.
|
|
|
|
|
window.location.href = as
|
|
|
|
|
|
|
|
|
|
// Changing the URL doesn't block executing the current code path.
|
|
|
|
|
// So, we need to mark it as a cancelled error and stop the routing logic.
|
|
|
|
|
err.cancelled = true
|
|
|
|
|
// @ts-ignore TODO: fix the control flow here
|
|
|
|
|
return resolve({ error: err })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (err.cancelled) {
|
|
|
|
|
// @ts-ignore TODO: fix the control flow here
|
|
|
|
|
return resolve({ error: err })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
resolve(
|
|
|
|
|
this.fetchComponent('/_error')
|
2020-05-18 21:24:37 +02:00
|
|
|
|
.then((res) => {
|
2020-03-06 05:15:10 +01:00
|
|
|
|
const { page: Component } = res
|
2020-02-20 22:25:41 +01:00
|
|
|
|
const routeInfo: RouteInfo = { Component, err }
|
2020-06-01 23:00:22 +02:00
|
|
|
|
return new Promise((resolveRouteInfo) => {
|
2020-02-20 22:25:41 +01:00
|
|
|
|
this.getInitialProps(Component, {
|
|
|
|
|
err,
|
|
|
|
|
pathname,
|
|
|
|
|
query,
|
|
|
|
|
} as any).then(
|
2020-05-18 21:24:37 +02:00
|
|
|
|
(props) => {
|
2020-02-20 22:25:41 +01:00
|
|
|
|
routeInfo.props = props
|
|
|
|
|
routeInfo.error = err
|
2020-06-01 23:00:22 +02:00
|
|
|
|
resolveRouteInfo(routeInfo)
|
2020-02-20 22:25:41 +01:00
|
|
|
|
},
|
2020-05-18 21:24:37 +02:00
|
|
|
|
(gipErr) => {
|
2020-02-20 22:25:41 +01:00
|
|
|
|
console.error(
|
|
|
|
|
'Error in error page `getInitialProps`: ',
|
|
|
|
|
gipErr
|
|
|
|
|
)
|
|
|
|
|
routeInfo.error = err
|
|
|
|
|
routeInfo.props = {}
|
2020-06-01 23:00:22 +02:00
|
|
|
|
resolveRouteInfo(routeInfo)
|
2020-02-20 22:25:41 +01:00
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
}) as Promise<RouteInfo>
|
|
|
|
|
})
|
2020-06-01 23:00:22 +02:00
|
|
|
|
.catch((routeInfoErr) => handleError(routeInfoErr, true))
|
2020-02-20 22:25:41 +01:00
|
|
|
|
)
|
|
|
|
|
}) as Promise<RouteInfo>
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
return (new Promise((resolve, reject) => {
|
|
|
|
|
if (cachedRouteInfo) {
|
|
|
|
|
return resolve(cachedRouteInfo)
|
2017-02-21 00:48:17 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
this.fetchComponent(route).then(
|
2020-05-18 21:24:37 +02:00
|
|
|
|
(res) =>
|
2020-03-06 05:15:10 +01:00
|
|
|
|
resolve({
|
|
|
|
|
Component: res.page,
|
|
|
|
|
__N_SSG: res.mod.__N_SSG,
|
|
|
|
|
__N_SSP: res.mod.__N_SSP,
|
|
|
|
|
}),
|
2019-05-29 13:57:26 +02:00
|
|
|
|
reject
|
|
|
|
|
)
|
|
|
|
|
}) as Promise<RouteInfo>)
|
|
|
|
|
.then((routeInfo: RouteInfo) => {
|
2020-03-06 05:15:10 +01:00
|
|
|
|
const { Component, __N_SSG, __N_SSP } = routeInfo
|
2019-05-29 13:57:26 +02:00
|
|
|
|
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
|
const { isValidElementType } = require('react-is')
|
|
|
|
|
if (!isValidElementType(Component)) {
|
|
|
|
|
throw new Error(
|
|
|
|
|
`The default export is not a React Component in page: "${pathname}"`
|
|
|
|
|
)
|
|
|
|
|
}
|
2018-12-17 16:09:23 +01:00
|
|
|
|
}
|
2017-12-06 00:35:30 +01:00
|
|
|
|
|
2020-02-13 02:06:07 +01:00
|
|
|
|
return this._getData<RouteInfo>(() =>
|
2020-03-06 05:15:10 +01:00
|
|
|
|
__N_SSG
|
2020-02-13 02:06:07 +01:00
|
|
|
|
? this._getStaticData(as)
|
2020-03-06 05:15:10 +01:00
|
|
|
|
: __N_SSP
|
2020-02-13 02:06:07 +01:00
|
|
|
|
? this._getServerData(as)
|
|
|
|
|
: this.getInitialProps(
|
|
|
|
|
Component,
|
|
|
|
|
// we provide AppTree later so this needs to be `any`
|
|
|
|
|
{
|
|
|
|
|
pathname,
|
|
|
|
|
query,
|
|
|
|
|
asPath: as,
|
|
|
|
|
} as any
|
|
|
|
|
)
|
2020-05-18 21:24:37 +02:00
|
|
|
|
).then((props) => {
|
2019-12-30 19:40:23 +01:00
|
|
|
|
routeInfo.props = props
|
|
|
|
|
this.components[route] = routeInfo
|
|
|
|
|
return routeInfo
|
2020-02-13 02:06:07 +01:00
|
|
|
|
})
|
2019-05-29 13:57:26 +02:00
|
|
|
|
})
|
2020-02-20 22:25:41 +01:00
|
|
|
|
.catch(handleError)
|
2016-12-31 02:15:22 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
set(
|
|
|
|
|
route: string,
|
|
|
|
|
pathname: string,
|
|
|
|
|
query: any,
|
|
|
|
|
as: string,
|
|
|
|
|
data: RouteInfo
|
2020-05-23 23:54:11 +02:00
|
|
|
|
): Promise<void> {
|
2020-02-15 19:01:10 +01:00
|
|
|
|
this.isFallback = false
|
|
|
|
|
|
2017-03-06 17:48:35 +01:00
|
|
|
|
this.route = route
|
2016-12-30 20:55:00 +01:00
|
|
|
|
this.pathname = pathname
|
|
|
|
|
this.query = query
|
2017-05-03 18:40:09 +02:00
|
|
|
|
this.asPath = as
|
2020-05-23 23:54:11 +02:00
|
|
|
|
return this.notify(data)
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-23 21:31:22 +02:00
|
|
|
|
/**
|
|
|
|
|
* Callback to execute before replacing router state
|
|
|
|
|
* @param cb callback to be executed
|
|
|
|
|
*/
|
2019-03-13 15:56:20 +01:00
|
|
|
|
beforePopState(cb: BeforePopStateCallback) {
|
2019-03-14 19:43:29 +01:00
|
|
|
|
this._bps = cb
|
2018-03-31 16:21:51 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-03-13 15:56:20 +01:00
|
|
|
|
onlyAHashChange(as: string): boolean {
|
2017-05-03 18:40:09 +02:00
|
|
|
|
if (!this.asPath) return false
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const [oldUrlNoHash, oldHash] = this.asPath.split('#')
|
|
|
|
|
const [newUrlNoHash, newHash] = as.split('#')
|
2017-02-28 18:31:17 +01:00
|
|
|
|
|
2018-06-28 20:56:18 +02:00
|
|
|
|
// Makes sure we scroll to the provided hash if the url/hash are the same
|
2019-05-29 13:57:26 +02:00
|
|
|
|
if (newHash && oldUrlNoHash === newUrlNoHash && oldHash === newHash) {
|
2018-06-28 20:56:18 +02:00
|
|
|
|
return true
|
|
|
|
|
}
|
|
|
|
|
|
2017-02-28 18:31:17 +01:00
|
|
|
|
// If the urls are change, there's more than a hash change
|
|
|
|
|
if (oldUrlNoHash !== newUrlNoHash) {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
|
2017-09-27 21:55:49 +02:00
|
|
|
|
// If the hash has changed, then it's a hash only change.
|
|
|
|
|
// This check is necessary to handle both the enter and
|
|
|
|
|
// leave hash === '' cases. The identity case falls through
|
|
|
|
|
// and is treated as a next reload.
|
|
|
|
|
return oldHash !== newHash
|
2017-02-28 18:31:17 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-03-13 15:56:20 +01:00
|
|
|
|
scrollToHash(as: string): void {
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const [, hash] = as.split('#')
|
2018-06-28 20:56:18 +02:00
|
|
|
|
// Scroll to top if the hash is just `#` with no value
|
|
|
|
|
if (hash === '') {
|
|
|
|
|
window.scrollTo(0, 0)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-23 20:20:45 +02:00
|
|
|
|
// First we check if the element by id is found
|
|
|
|
|
const idEl = document.getElementById(hash)
|
|
|
|
|
if (idEl) {
|
|
|
|
|
idEl.scrollIntoView()
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
// If there's no element with the id, we check the `name` property
|
|
|
|
|
// To mirror browsers
|
|
|
|
|
const nameEl = document.getElementsByName(hash)[0]
|
|
|
|
|
if (nameEl) {
|
|
|
|
|
nameEl.scrollIntoView()
|
2017-06-09 21:32:28 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-13 15:56:20 +01:00
|
|
|
|
urlIsNew(asPath: string): boolean {
|
2019-02-28 19:53:29 +01:00
|
|
|
|
return this.asPath !== asPath
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-23 21:31:22 +02:00
|
|
|
|
/**
|
2020-02-17 21:46:15 +01:00
|
|
|
|
* Prefetch page code, you may wait for the data during page rendering.
|
2019-05-23 21:31:22 +02:00
|
|
|
|
* This feature only works in production!
|
2020-02-17 21:46:15 +01:00
|
|
|
|
* @param url the href of prefetched page
|
|
|
|
|
* @param asPath the as path of the prefetched page
|
2019-05-23 21:31:22 +02:00
|
|
|
|
*/
|
2020-02-17 21:46:15 +01:00
|
|
|
|
prefetch(
|
|
|
|
|
url: string,
|
|
|
|
|
asPath: string = url,
|
|
|
|
|
options: PrefetchOptions = {}
|
|
|
|
|
): Promise<void> {
|
2019-03-13 15:56:20 +01:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2019-08-07 16:47:13 +02:00
|
|
|
|
const { pathname, protocol } = parse(url)
|
|
|
|
|
|
|
|
|
|
if (!pathname || protocol) {
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
|
throw new Error(
|
2020-05-27 23:51:11 +02:00
|
|
|
|
`Invalid href passed to router: ${url} https://err.sh/vercel/next.js/invalid-href-passed`
|
2019-08-07 16:47:13 +02:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
return
|
|
|
|
|
}
|
2019-12-20 22:30:58 +01:00
|
|
|
|
|
|
|
|
|
// Prefetch is not supported in development mode because it would trigger on-demand-entries
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
|
return
|
|
|
|
|
}
|
2020-04-14 09:50:39 +02:00
|
|
|
|
const route = delBasePath(toRoute(pathname))
|
2020-03-02 18:14:40 +01:00
|
|
|
|
Promise.all([
|
2020-04-14 09:50:39 +02:00
|
|
|
|
this.pageLoader.prefetchData(url, delBasePath(asPath)),
|
|
|
|
|
this.pageLoader[options.priority ? 'loadPage' : 'prefetch'](route),
|
2020-03-02 18:14:40 +01:00
|
|
|
|
]).then(() => resolve(), reject)
|
2019-03-13 15:56:20 +01:00
|
|
|
|
})
|
2017-02-15 09:52:22 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-03-06 05:15:10 +01:00
|
|
|
|
async fetchComponent(route: string): Promise<ComponentRes> {
|
2017-02-15 09:52:22 +01:00
|
|
|
|
let cancelled = false
|
2019-06-05 20:15:42 +02:00
|
|
|
|
const cancel = (this.clc = () => {
|
2017-02-15 09:52:22 +01:00
|
|
|
|
cancelled = true
|
2019-05-29 13:57:26 +02:00
|
|
|
|
})
|
2020-04-14 09:50:39 +02:00
|
|
|
|
route = delBasePath(route)
|
2017-02-15 09:52:22 +01:00
|
|
|
|
|
2020-03-06 05:15:10 +01:00
|
|
|
|
const componentResult = await this.pageLoader.loadPage(route)
|
2017-02-15 09:52:22 +01:00
|
|
|
|
|
2018-01-30 16:40:52 +01:00
|
|
|
|
if (cancelled) {
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const error: any = new Error(
|
|
|
|
|
`Abort fetching component for route: "${route}"`
|
|
|
|
|
)
|
2018-01-30 16:40:52 +01:00
|
|
|
|
error.cancelled = true
|
|
|
|
|
throw error
|
|
|
|
|
}
|
2017-02-15 09:52:22 +01:00
|
|
|
|
|
2019-06-05 20:15:42 +02:00
|
|
|
|
if (cancel === this.clc) {
|
|
|
|
|
this.clc = null
|
2017-07-18 09:00:23 +02:00
|
|
|
|
}
|
2018-01-30 16:40:52 +01:00
|
|
|
|
|
2020-03-06 05:15:10 +01:00
|
|
|
|
return componentResult
|
2016-10-08 07:12:51 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-12-29 20:01:46 +01:00
|
|
|
|
_getData<T>(fn: () => Promise<T>): Promise<T> {
|
2016-10-08 07:12:51 +02:00
|
|
|
|
let cancelled = false
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const cancel = () => {
|
|
|
|
|
cancelled = true
|
|
|
|
|
}
|
2019-06-05 20:15:42 +02:00
|
|
|
|
this.clc = cancel
|
2020-05-18 21:24:37 +02:00
|
|
|
|
return fn().then((data) => {
|
2019-12-29 20:01:46 +01:00
|
|
|
|
if (cancel === this.clc) {
|
|
|
|
|
this.clc = null
|
|
|
|
|
}
|
2016-10-08 07:12:51 +02:00
|
|
|
|
|
2019-12-29 20:01:46 +01:00
|
|
|
|
if (cancelled) {
|
|
|
|
|
const err: any = new Error('Loading initial props cancelled')
|
|
|
|
|
err.cancelled = true
|
|
|
|
|
throw err
|
|
|
|
|
}
|
2019-08-12 03:56:57 +02:00
|
|
|
|
|
2019-12-29 20:01:46 +01:00
|
|
|
|
return data
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-27 23:50:59 +01:00
|
|
|
|
_getStaticData = (asPath: string): Promise<object> => {
|
|
|
|
|
const pathname = prepareRoute(parse(asPath).pathname!)
|
2019-12-30 23:57:06 +01:00
|
|
|
|
|
2020-01-27 23:50:59 +01:00
|
|
|
|
return process.env.NODE_ENV === 'production' && this.sdc[pathname]
|
|
|
|
|
? Promise.resolve(this.sdc[pathname])
|
2020-02-13 02:06:07 +01:00
|
|
|
|
: fetchNextData(
|
|
|
|
|
pathname,
|
|
|
|
|
null,
|
|
|
|
|
this.isSsr,
|
2020-05-18 21:24:37 +02:00
|
|
|
|
(data) => (this.sdc[pathname] = data)
|
2020-02-13 02:06:07 +01:00
|
|
|
|
)
|
2020-01-27 23:50:59 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_getServerData = (asPath: string): Promise<object> => {
|
|
|
|
|
let { pathname, query } = parse(asPath, true)
|
|
|
|
|
pathname = prepareRoute(pathname!)
|
2020-02-13 02:06:07 +01:00
|
|
|
|
return fetchNextData(pathname, query, this.isSsr)
|
2019-12-30 19:40:23 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-12-29 20:01:46 +01:00
|
|
|
|
getInitialProps(
|
|
|
|
|
Component: ComponentType,
|
|
|
|
|
ctx: NextPageContext
|
|
|
|
|
): Promise<any> {
|
|
|
|
|
const { Component: App } = this.components['/_app']
|
|
|
|
|
const AppTree = this._wrapApp(App)
|
|
|
|
|
ctx.AppTree = AppTree
|
2019-12-30 19:40:23 +01:00
|
|
|
|
return loadGetInitialProps<AppContextType<Router>>(App, {
|
|
|
|
|
AppTree,
|
|
|
|
|
Component,
|
|
|
|
|
router: this,
|
|
|
|
|
ctx,
|
2019-12-29 20:01:46 +01:00
|
|
|
|
})
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-03-14 19:43:29 +01:00
|
|
|
|
abortComponentLoad(as: string): void {
|
2019-06-05 20:15:42 +02:00
|
|
|
|
if (this.clc) {
|
2019-07-08 21:25:46 +02:00
|
|
|
|
const e = new Error('Route Cancelled')
|
|
|
|
|
;(e as any).cancelled = true
|
|
|
|
|
Router.events.emit('routeChangeError', e, as)
|
2019-06-05 20:15:42 +02:00
|
|
|
|
this.clc()
|
|
|
|
|
this.clc = null
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-23 23:54:11 +02:00
|
|
|
|
notify(data: RouteInfo): Promise<void> {
|
|
|
|
|
return this.sub(data, this.components['/_app'].Component)
|
2016-10-06 01:52:50 +02:00
|
|
|
|
}
|
|
|
|
|
}
|