import React, { Component, PropTypes } from 'react' import htmlescape from 'htmlescape' import flush from 'styled-jsx/server' export default class Document extends Component { static getInitialProps ({ renderPage }) { const { html, head, errorHtml, chunks } = renderPage() const styles = flush() return { html, head, errorHtml, chunks, styles } } static childContextTypes = { _documentProps: PropTypes.any } getChildContext () { return { _documentProps: this.props } } render () { return

} } export class Head extends Component { static contextTypes = { _documentProps: PropTypes.any } getChunkPreloadLink (filename) { const { __NEXT_DATA__ } = this.context._documentProps let { buildStats } = __NEXT_DATA__ const hash = buildStats ? buildStats[filename].hash : '-' return ( ) } getPreloadMainLinks () { const { dev } = this.context._documentProps if (dev) { return [ this.getChunkPreloadLink('manifest.js'), this.getChunkPreloadLink('commons.js'), this.getChunkPreloadLink('main.js') ] } // In the production mode, we have a single asset with all the JS content. return [ this.getChunkPreloadLink('app.js') ] } getPreloadDynamicChunks () { const { chunks } = this.context._documentProps return chunks.map((chunk) => ( )) } render () { const { head, styles, __NEXT_DATA__ } = this.context._documentProps const { pathname, buildId } = __NEXT_DATA__ return {this.getPreloadDynamicChunks()} {this.getPreloadMainLinks()} {(head || []).map((h, i) => React.cloneElement(h, { key: i }))} {styles || null} {this.props.children} } } export class Main extends Component { static contextTypes = { _documentProps: PropTypes.any } render () { const { html, errorHtml } = this.context._documentProps return (

) } } export class NextScript extends Component { static contextTypes = { _documentProps: PropTypes.any } getChunkScript (filename, additionalProps = {}) { const { __NEXT_DATA__ } = this.context._documentProps let { buildStats } = __NEXT_DATA__ const hash = buildStats ? buildStats[filename].hash : '-' return (