2017-04-10 20:35:26 +02:00
|
|
|
import React, { Component } from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
2016-12-16 19:42:40 +01:00
|
|
|
import htmlescape from 'htmlescape'
|
2016-12-19 19:42:19 +01:00
|
|
|
import flush from 'styled-jsx/server'
|
2016-12-16 19:42:40 +01:00
|
|
|
|
|
|
|
export default class Document extends Component {
|
|
|
|
static getInitialProps ({ renderPage }) {
|
2017-04-01 23:03:40 +02:00
|
|
|
const { html, head, errorHtml } = renderPage()
|
2017-02-26 13:28:00 +01:00
|
|
|
const styles = flush()
|
2017-04-01 23:03:40 +02:00
|
|
|
return { html, head, errorHtml, styles }
|
2016-12-16 19:42:40 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
static childContextTypes = {
|
|
|
|
_documentProps: PropTypes.any
|
|
|
|
}
|
|
|
|
|
|
|
|
getChildContext () {
|
|
|
|
return { _documentProps: this.props }
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
return <html>
|
|
|
|
<Head />
|
|
|
|
<body>
|
|
|
|
<Main />
|
|
|
|
<NextScript />
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class Head extends Component {
|
|
|
|
static contextTypes = {
|
|
|
|
_documentProps: PropTypes.any
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2017-02-26 13:28:00 +01:00
|
|
|
const { head, styles } = this.context._documentProps
|
2016-12-16 19:42:40 +01:00
|
|
|
return <head>
|
|
|
|
{(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
|
2017-02-26 13:28:00 +01:00
|
|
|
{styles || null}
|
2016-12-16 19:42:40 +01:00
|
|
|
{this.props.children}
|
|
|
|
</head>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class Main extends Component {
|
|
|
|
static contextTypes = {
|
|
|
|
_documentProps: PropTypes.any
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2017-04-01 23:03:40 +02:00
|
|
|
const { html, errorHtml } = this.context._documentProps
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
|
|
|
|
<div id='__next-error' dangerouslySetInnerHTML={{ __html: errorHtml }} />
|
|
|
|
</div>
|
|
|
|
)
|
2016-12-16 19:42:40 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class NextScript extends Component {
|
|
|
|
static contextTypes = {
|
|
|
|
_documentProps: PropTypes.any
|
|
|
|
}
|
|
|
|
|
2017-03-24 08:51:34 +01:00
|
|
|
getChunkScript (filename, additionalProps = {}) {
|
2017-03-07 19:43:56 +01:00
|
|
|
const { __NEXT_DATA__ } = this.context._documentProps
|
|
|
|
let { buildStats } = __NEXT_DATA__
|
|
|
|
const hash = buildStats ? buildStats[filename].hash : '-'
|
|
|
|
|
|
|
|
return (
|
2017-03-24 08:51:34 +01:00
|
|
|
<script
|
|
|
|
type='text/javascript'
|
|
|
|
src={`/_next/${hash}/${filename}`}
|
|
|
|
{...additionalProps}
|
|
|
|
/>
|
2017-03-07 19:43:56 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2017-03-24 08:51:34 +01:00
|
|
|
getScripts () {
|
|
|
|
const { dev } = this.context._documentProps
|
|
|
|
if (dev) {
|
|
|
|
return (
|
|
|
|
<div>
|
2017-03-26 22:48:59 +02:00
|
|
|
{ this.getChunkScript('manifest.js') }
|
2017-03-24 08:51:34 +01:00
|
|
|
{ this.getChunkScript('commons.js') }
|
|
|
|
{ this.getChunkScript('main.js') }
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
// In the production mode, we have a single asset with all the JS content.
|
|
|
|
// So, we can load the script with async
|
|
|
|
return this.getChunkScript('app.js', { async: true })
|
|
|
|
}
|
|
|
|
|
2016-12-16 19:42:40 +01:00
|
|
|
render () {
|
2017-01-11 21:16:18 +01:00
|
|
|
const { staticMarkup, __NEXT_DATA__ } = this.context._documentProps
|
2016-12-17 09:49:10 +01:00
|
|
|
|
2016-12-16 19:42:40 +01:00
|
|
|
return <div>
|
2017-01-20 01:14:05 +01:00
|
|
|
{staticMarkup ? null : <script dangerouslySetInnerHTML={{
|
|
|
|
__html: `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}; module={};`
|
|
|
|
}} />}
|
2017-03-24 08:51:34 +01:00
|
|
|
{staticMarkup ? null : this.getScripts()}
|
2016-12-16 19:42:40 +01:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|