2019-07-10 16:43:04 +02:00
|
|
|
/* global location */
|
2019-04-02 16:09:34 +02:00
|
|
|
import React, { Suspense } from 'react'
|
2017-01-12 02:58:20 +01:00
|
|
|
import ReactDOM from 'react-dom'
|
|
|
|
import HeadManager from './head-manager'
|
2019-04-02 16:09:34 +02:00
|
|
|
import { createRouter, makePublicRouterInstance } from 'next/router'
|
2019-09-04 16:00:54 +02:00
|
|
|
import mitt from '../next-server/lib/mitt'
|
2019-08-09 21:43:29 +02:00
|
|
|
import {
|
|
|
|
loadGetInitialProps,
|
|
|
|
getURL,
|
|
|
|
SUPPORTS_PERFORMANCE_USER_TIMING
|
2019-09-04 16:00:54 +02:00
|
|
|
} from '../next-server/lib/utils'
|
2018-11-28 15:03:02 +01:00
|
|
|
import PageLoader from './page-loader'
|
2019-09-04 16:00:54 +02:00
|
|
|
import * as envConfig from '../next-server/lib/runtime-config'
|
|
|
|
import { HeadManagerContext } from '../next-server/lib/head-manager-context'
|
|
|
|
import { DataManagerContext } from '../next-server/lib/data-manager-context'
|
|
|
|
import { RouterContext } from '../next-server/lib/router-context'
|
|
|
|
import { DataManager } from '../next-server/lib/data-manager'
|
2019-06-05 20:15:42 +02:00
|
|
|
import { parse as parseQs, stringify as stringifyQs } from 'querystring'
|
2019-09-04 16:00:54 +02:00
|
|
|
import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic'
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2017-03-04 17:48:33 +01:00
|
|
|
// Polyfill Promise globally
|
2018-07-24 11:24:40 +02:00
|
|
|
// This is needed because Webpack's dynamic loading(common chunks) code
|
2017-03-04 17:48:33 +01:00
|
|
|
// depends on Promise.
|
|
|
|
// So, we need to polyfill it.
|
2018-08-24 01:57:04 +02:00
|
|
|
// See: https://webpack.js.org/guides/code-splitting/#dynamic-imports
|
2017-03-04 17:48:33 +01:00
|
|
|
if (!window.Promise) {
|
|
|
|
window.Promise = Promise
|
|
|
|
}
|
|
|
|
|
2018-11-03 19:49:09 +01:00
|
|
|
const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent)
|
|
|
|
window.__NEXT_DATA__ = data
|
|
|
|
|
2019-08-24 06:49:25 +02:00
|
|
|
export const version = process.env.__NEXT_VERSION
|
|
|
|
|
2017-01-12 02:58:20 +01:00
|
|
|
const {
|
2018-11-03 19:49:09 +01:00
|
|
|
props,
|
|
|
|
err,
|
|
|
|
page,
|
|
|
|
query,
|
|
|
|
buildId,
|
|
|
|
assetPrefix,
|
|
|
|
runtimeConfig,
|
|
|
|
dynamicIds
|
|
|
|
} = data
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2019-04-02 16:09:34 +02:00
|
|
|
const d = JSON.parse(window.__NEXT_DATA__.dataManager)
|
|
|
|
export const dataManager = new DataManager(d)
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
const prefix = assetPrefix || ''
|
|
|
|
|
2018-02-02 21:09:24 +01:00
|
|
|
// With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
|
|
|
|
// So, this is how we do it in the client side at runtime
|
2018-07-24 11:24:40 +02:00
|
|
|
__webpack_public_path__ = `${prefix}/_next/` //eslint-disable-line
|
2018-02-26 12:03:27 +01:00
|
|
|
// Initialize next/config with the environment configuration
|
2018-02-27 17:50:14 +01:00
|
|
|
envConfig.setConfig({
|
|
|
|
serverRuntimeConfig: {},
|
2019-07-10 16:43:04 +02:00
|
|
|
publicRuntimeConfig: runtimeConfig || {}
|
2018-02-27 17:50:14 +01:00
|
|
|
})
|
2018-01-30 16:40:52 +01:00
|
|
|
|
2017-05-03 18:40:09 +02:00
|
|
|
const asPath = getURL()
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
const pageLoader = new PageLoader(buildId, prefix)
|
2018-11-03 01:59:54 +01:00
|
|
|
const register = ([r, f]) => pageLoader.registerPage(r, f)
|
|
|
|
if (window.__NEXT_P) {
|
|
|
|
window.__NEXT_P.map(register)
|
|
|
|
}
|
|
|
|
window.__NEXT_P = []
|
|
|
|
window.__NEXT_P.push = register
|
2017-04-05 08:45:39 +02:00
|
|
|
|
2017-04-06 08:11:13 +02:00
|
|
|
const headManager = new HeadManager()
|
2019-07-03 04:16:12 +02:00
|
|
|
const appElement = document.getElementById('__next')
|
2017-04-05 13:43:34 +02:00
|
|
|
|
2017-01-12 02:58:20 +01:00
|
|
|
let lastAppProps
|
2018-07-24 11:24:40 +02:00
|
|
|
let webpackHMR
|
2017-04-06 08:11:13 +02:00
|
|
|
export let router
|
|
|
|
export let ErrorComponent
|
|
|
|
let Component
|
2018-04-12 10:33:22 +02:00
|
|
|
let App
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2019-06-05 20:15:42 +02:00
|
|
|
class Container extends React.Component {
|
|
|
|
componentDidCatch (err, info) {
|
|
|
|
this.props.fn(err, info)
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
this.scrollToHash()
|
|
|
|
|
|
|
|
// If page was exported and has a querystring
|
2019-06-21 00:27:04 +02:00
|
|
|
// If it's a dynamic route or has a querystring
|
2019-06-05 20:15:42 +02:00
|
|
|
if (
|
|
|
|
data.nextExport &&
|
2019-08-12 03:56:57 +02:00
|
|
|
(isDynamicRoute(router.pathname) || location.search || data.skeleton)
|
2019-06-05 20:15:42 +02:00
|
|
|
) {
|
|
|
|
// update query on mount for exported pages
|
|
|
|
router.replace(
|
|
|
|
router.pathname +
|
|
|
|
'?' +
|
|
|
|
stringifyQs({
|
|
|
|
...router.query,
|
2019-07-10 16:43:04 +02:00
|
|
|
...parseQs(location.search.substr(1))
|
2019-06-05 20:15:42 +02:00
|
|
|
}),
|
2019-07-16 01:07:04 +02:00
|
|
|
asPath,
|
|
|
|
{
|
|
|
|
// 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.
|
|
|
|
_h: 1
|
|
|
|
}
|
2019-06-05 20:15:42 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate () {
|
|
|
|
this.scrollToHash()
|
|
|
|
}
|
|
|
|
|
|
|
|
scrollToHash () {
|
2019-07-10 16:43:04 +02:00
|
|
|
let { hash } = location
|
2019-06-05 20:15:42 +02:00
|
|
|
hash = hash && hash.substring(1)
|
|
|
|
if (!hash) return
|
|
|
|
|
|
|
|
const el = document.getElementById(hash)
|
|
|
|
if (!el) return
|
|
|
|
|
|
|
|
// If we call scrollIntoView() in here without a setTimeout
|
|
|
|
// it won't scroll properly.
|
|
|
|
setTimeout(() => el.scrollIntoView(), 0)
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
return this.props.children
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-01-04 21:49:21 +01:00
|
|
|
export const emitter = mitt()
|
2017-10-30 16:01:40 +01:00
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
export default async ({ webpackHMR: passedWebpackHMR } = {}) => {
|
2019-05-27 22:59:25 +02:00
|
|
|
// This makes sure this specific lines are removed in production
|
2018-07-24 11:24:40 +02:00
|
|
|
if (process.env.NODE_ENV === 'development') {
|
|
|
|
webpackHMR = passedWebpackHMR
|
2017-04-17 22:15:50 +02:00
|
|
|
}
|
2018-04-12 10:33:22 +02:00
|
|
|
App = await pageLoader.loadPage('/_app')
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2018-04-18 18:18:06 +02:00
|
|
|
let initialErr = err
|
|
|
|
|
2017-04-06 08:11:13 +02:00
|
|
|
try {
|
2018-02-13 16:13:22 +01:00
|
|
|
Component = await pageLoader.loadPage(page)
|
2018-04-12 10:33:22 +02:00
|
|
|
|
2018-12-17 16:09:23 +01:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
const { isValidElementType } = require('react-is')
|
|
|
|
if (!isValidElementType(Component)) {
|
2019-05-29 13:57:26 +02:00
|
|
|
throw new Error(
|
|
|
|
`The default export is not a React Component in page: "${page}"`
|
|
|
|
)
|
2018-12-17 16:09:23 +01:00
|
|
|
}
|
2018-04-12 10:33:22 +02:00
|
|
|
}
|
2018-04-18 18:18:06 +02:00
|
|
|
} catch (error) {
|
|
|
|
// This catches errors like throwing in the top level of a module
|
|
|
|
initialErr = error
|
2017-04-06 08:11:13 +02:00
|
|
|
}
|
|
|
|
|
2019-07-16 14:52:01 +02:00
|
|
|
if (window.__NEXT_PRELOADREADY) {
|
|
|
|
await window.__NEXT_PRELOADREADY(dynamicIds)
|
|
|
|
}
|
2018-07-24 11:24:40 +02:00
|
|
|
|
2019-09-16 18:15:18 +02:00
|
|
|
router = createRouter(page, query, asPath, {
|
2018-04-12 10:33:22 +02:00
|
|
|
initialProps: props,
|
2017-04-06 08:11:13 +02:00
|
|
|
pageLoader,
|
2018-04-12 10:33:22 +02:00
|
|
|
App,
|
2017-04-06 08:11:13 +02:00
|
|
|
Component,
|
2019-07-30 20:00:19 +02:00
|
|
|
wrapApp,
|
2019-06-05 20:15:42 +02:00
|
|
|
err: initialErr,
|
|
|
|
subscription: ({ Component, props, err }, App) => {
|
|
|
|
render({ App, Component, props, err, emitter })
|
|
|
|
}
|
2017-01-12 02:58:20 +01:00
|
|
|
})
|
2019-08-06 22:26:01 +02:00
|
|
|
const renderCtx = { App, Component, props, err: initialErr, emitter }
|
|
|
|
render(renderCtx)
|
|
|
|
|
2017-01-31 04:26:17 +01:00
|
|
|
return emitter
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
|
2017-04-01 23:03:40 +02:00
|
|
|
export async function render (props) {
|
2018-01-30 16:40:52 +01:00
|
|
|
if (props.err) {
|
2018-04-18 18:18:06 +02:00
|
|
|
await renderError(props)
|
2017-04-01 23:03:40 +02:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2017-01-12 02:58:20 +01:00
|
|
|
try {
|
|
|
|
await doRender(props)
|
|
|
|
} catch (err) {
|
2019-02-19 22:45:07 +01:00
|
|
|
await renderError({ ...props, err })
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-04-01 23:03:40 +02:00
|
|
|
// This method handles all runtime and debug errors.
|
|
|
|
// 404 and 500 errors are special kind of errors
|
|
|
|
// and they are still handle via the main render method.
|
2018-04-18 18:18:06 +02:00
|
|
|
export async function renderError (props) {
|
2019-02-19 22:45:07 +01:00
|
|
|
const { App, err } = props
|
2018-04-18 18:18:06 +02:00
|
|
|
|
2019-07-11 23:23:07 +02:00
|
|
|
// In development runtime errors are caught by react-error-overlay
|
|
|
|
// In production we catch runtime errors using componentDidCatch which will trigger renderError
|
2018-04-18 18:18:06 +02:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2019-05-29 13:57:26 +02:00
|
|
|
return webpackHMR.reportRuntimeError(webpackHMR.prepareError(err))
|
2018-04-18 18:18:06 +02:00
|
|
|
}
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
// Make sure we log the error to the console, otherwise users can't track down issues.
|
|
|
|
console.error(err)
|
2018-04-18 18:18:06 +02:00
|
|
|
|
2019-01-31 21:45:36 +01:00
|
|
|
ErrorComponent = await pageLoader.loadPage('/_error')
|
|
|
|
|
2018-04-18 18:18:06 +02:00
|
|
|
// In production we do a normal render with the `ErrorComponent` as component.
|
2018-07-11 23:58:42 +02:00
|
|
|
// If we've gotten here upon initial render, we can use the props from the server.
|
|
|
|
// Otherwise, we need to call `getInitialProps` on `App` before mounting.
|
2019-08-13 11:33:48 +02:00
|
|
|
const AppTree = wrapApp(App)
|
2019-07-30 20:00:19 +02:00
|
|
|
const appCtx = {
|
|
|
|
Component: ErrorComponent,
|
2019-08-13 11:33:48 +02:00
|
|
|
AppTree,
|
2019-07-30 20:00:19 +02:00
|
|
|
router,
|
2019-08-13 11:33:48 +02:00
|
|
|
ctx: { err, pathname: page, query, asPath, AppTree }
|
2019-07-30 20:00:19 +02:00
|
|
|
}
|
|
|
|
|
2018-07-11 23:58:42 +02:00
|
|
|
const initProps = props.props
|
|
|
|
? props.props
|
2019-07-30 20:00:19 +02:00
|
|
|
: await loadGetInitialProps(App, appCtx)
|
2018-07-11 23:58:42 +02:00
|
|
|
|
2019-02-19 22:45:07 +01:00
|
|
|
await doRender({ ...props, err, Component: ErrorComponent, props: initProps })
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
|
2019-06-05 20:15:42 +02:00
|
|
|
// If hydrate does not exist, eg in preact.
|
|
|
|
let isInitialRender = typeof ReactDOM.hydrate === 'function'
|
2018-09-05 22:45:17 +02:00
|
|
|
function renderReactElement (reactEl, domEl) {
|
2019-08-09 21:43:29 +02:00
|
|
|
// mark start of hydrate/render
|
|
|
|
if (SUPPORTS_PERFORMANCE_USER_TIMING) {
|
|
|
|
performance.mark('beforeRender')
|
|
|
|
}
|
|
|
|
|
2018-09-05 22:45:17 +02:00
|
|
|
// The check for `.hydrate` is there to support React alternatives like preact
|
2019-06-05 20:15:42 +02:00
|
|
|
if (isInitialRender) {
|
2019-09-17 22:05:20 +02:00
|
|
|
ReactDOM.hydrate(reactEl, domEl, function () {
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
document
|
|
|
|
.querySelectorAll('[data-next-hydrating]')
|
|
|
|
.forEach(function (el) {
|
|
|
|
el.remove()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
markHydrateComplete()
|
|
|
|
})
|
2018-09-05 22:45:17 +02:00
|
|
|
isInitialRender = false
|
|
|
|
} else {
|
2019-09-17 22:05:20 +02:00
|
|
|
ReactDOM.render(reactEl, domEl, function () {
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
document
|
|
|
|
.querySelectorAll('[data-next-hydrating]')
|
|
|
|
.forEach(function (el) {
|
|
|
|
el.remove()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
markRenderComplete()
|
|
|
|
})
|
2018-09-05 22:45:17 +02:00
|
|
|
}
|
|
|
|
}
|
2019-08-09 21:43:29 +02:00
|
|
|
|
|
|
|
function markHydrateComplete () {
|
|
|
|
if (!SUPPORTS_PERFORMANCE_USER_TIMING) return
|
|
|
|
|
|
|
|
performance.mark('afterHydrate') // mark end of hydration
|
|
|
|
|
2019-08-13 17:48:30 +02:00
|
|
|
performance.measure(
|
|
|
|
'Next.js-before-hydration',
|
|
|
|
'navigationStart',
|
|
|
|
'beforeRender'
|
|
|
|
)
|
2019-08-09 21:43:29 +02:00
|
|
|
performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate')
|
|
|
|
|
|
|
|
clearMarks()
|
|
|
|
}
|
|
|
|
|
|
|
|
function markRenderComplete () {
|
|
|
|
if (!SUPPORTS_PERFORMANCE_USER_TIMING) return
|
|
|
|
|
|
|
|
performance.mark('afterRender') // mark end of render
|
|
|
|
const navStartEntries = performance.getEntriesByName('routeChange', 'mark')
|
|
|
|
|
|
|
|
if (!navStartEntries.length) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
performance.measure(
|
|
|
|
'Next.js-route-change-to-render',
|
|
|
|
navStartEntries[0].name,
|
|
|
|
'beforeRender'
|
|
|
|
)
|
|
|
|
performance.measure('Next.js-render', 'beforeRender', 'afterRender')
|
|
|
|
|
|
|
|
clearMarks()
|
|
|
|
}
|
|
|
|
|
|
|
|
function clearMarks () {
|
2019-08-31 04:40:05 +02:00
|
|
|
;['beforeRender', 'afterHydrate', 'afterRender', 'routeChange'].forEach(
|
|
|
|
mark => performance.clearMarks(mark)
|
|
|
|
)
|
|
|
|
|
2019-08-15 08:14:09 +02:00
|
|
|
/*
|
|
|
|
* TODO: uncomment the following line when we have a way to
|
|
|
|
* expose this to user code.
|
|
|
|
*/
|
|
|
|
// performance.clearMeasures()
|
2019-08-09 21:43:29 +02:00
|
|
|
}
|
2018-09-05 22:45:17 +02:00
|
|
|
|
2019-07-03 04:16:12 +02:00
|
|
|
function AppContainer ({ children }) {
|
|
|
|
return (
|
|
|
|
<Container
|
|
|
|
fn={error =>
|
|
|
|
renderError({ App, err: error }).catch(err =>
|
|
|
|
console.error('Error rendering page: ', err)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
|
|
<RouterContext.Provider value={makePublicRouterInstance(router)}>
|
|
|
|
<DataManagerContext.Provider value={dataManager}>
|
|
|
|
<HeadManagerContext.Provider value={headManager.updateHead}>
|
|
|
|
{children}
|
|
|
|
</HeadManagerContext.Provider>
|
|
|
|
</DataManagerContext.Provider>
|
|
|
|
</RouterContext.Provider>
|
|
|
|
</Suspense>
|
|
|
|
</Container>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2019-07-30 20:00:19 +02:00
|
|
|
const wrapApp = App => props => {
|
|
|
|
const appProps = { ...props, Component, err, router }
|
|
|
|
return (
|
|
|
|
<AppContainer>
|
|
|
|
<App {...appProps} />
|
|
|
|
</AppContainer>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2019-03-18 16:22:36 +01:00
|
|
|
async function doRender ({ App, Component, props, err }) {
|
2018-04-12 10:33:22 +02:00
|
|
|
// Usual getInitialProps fetching is handled in next/router
|
|
|
|
// this is for when ErrorComponent gets replaced by Component by HMR
|
2019-05-29 13:57:26 +02:00
|
|
|
if (
|
|
|
|
!props &&
|
|
|
|
Component &&
|
2017-01-12 02:58:20 +01:00
|
|
|
Component !== ErrorComponent &&
|
2019-05-29 13:57:26 +02:00
|
|
|
lastAppProps.Component === ErrorComponent
|
|
|
|
) {
|
2017-05-03 18:40:09 +02:00
|
|
|
const { pathname, query, asPath } = router
|
2019-08-13 11:33:48 +02:00
|
|
|
const AppTree = wrapApp(App)
|
2019-07-30 20:00:19 +02:00
|
|
|
const appCtx = {
|
2019-05-29 13:57:26 +02:00
|
|
|
router,
|
2019-08-13 11:33:48 +02:00
|
|
|
AppTree,
|
2019-07-30 20:00:19 +02:00
|
|
|
Component: ErrorComponent,
|
2019-08-13 11:33:48 +02:00
|
|
|
ctx: { err, pathname, query, asPath, AppTree }
|
2019-07-30 20:00:19 +02:00
|
|
|
}
|
|
|
|
props = await loadGetInitialProps(App, appCtx)
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
Component = Component || lastAppProps.Component
|
|
|
|
props = props || lastAppProps.props
|
|
|
|
|
2019-07-30 20:00:19 +02:00
|
|
|
const appProps = { ...props, Component, err, router }
|
2017-02-19 21:35:48 +01:00
|
|
|
// lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
|
|
|
|
lastAppProps = appProps
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
emitter.emit('before-reactdom-render', {
|
|
|
|
Component,
|
|
|
|
ErrorComponent,
|
|
|
|
appProps
|
|
|
|
})
|
2017-10-30 16:01:40 +01:00
|
|
|
|
2019-07-11 23:23:07 +02:00
|
|
|
// We catch runtime errors using componentDidCatch which will trigger renderError
|
|
|
|
renderReactElement(
|
|
|
|
<AppContainer>
|
|
|
|
<App {...appProps} />
|
|
|
|
</AppContainer>,
|
|
|
|
appElement
|
|
|
|
)
|
2017-01-31 04:26:17 +01:00
|
|
|
|
2019-03-18 16:22:36 +01:00
|
|
|
emitter.emit('after-reactdom-render', { Component, ErrorComponent, appProps })
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|