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

214 lines
5.7 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react'
import PropTypes from 'prop-types'
2016-12-16 18:42:40 +00:00
import htmlescape from 'htmlescape'
import flush from 'styled-jsx/server'
2016-12-16 18:42:40 +00:00
export default class Document extends Component {
static getInitialProps ({ renderPage }) {
const { html, head, errorHtml, chunks } = renderPage()
const styles = flush()
return { html, head, errorHtml, chunks, styles }
2016-12-16 18:42:40 +00: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
}
2017-04-12 10:41:54 +00:00
getChunkPreloadLink (filename) {
const { __NEXT_DATA__ } = this.context._documentProps
let { buildStats, assetPrefix, buildId } = __NEXT_DATA__
const hash = buildStats ? buildStats[filename].hash : buildId
2017-04-12 10:41:54 +00:00
return (
<link
key={filename}
rel='preload'
href={`${assetPrefix}/_next/${hash}/${filename}`}
2017-04-12 10:41:54 +00:00
as='script'
/>
)
}
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 () {
2017-04-18 16:12:21 +00:00
const { chunks, __NEXT_DATA__ } = this.context._documentProps
let { assetPrefix, buildId } = __NEXT_DATA__
return chunks.map((chunk) => (
<link
key={chunk}
rel='preload'
href={`${assetPrefix}/_next/${buildId}/webpack/chunks/${chunk}`}
as='script'
/>
))
}
2016-12-16 18:42:40 +00:00
render () {
2017-04-12 10:41:54 +00:00
const { head, styles, __NEXT_DATA__ } = this.context._documentProps
const { pathname, buildId, assetPrefix } = __NEXT_DATA__
const pagePathname = getPagePathname(pathname)
2017-04-12 10:41:54 +00:00
return <head {...this.props}>
2017-11-16 10:54:36 +00:00
{(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
<link rel='preload' href={`${assetPrefix}/_next/${buildId}/page${pagePathname}`} as='script' />
<link rel='preload' href={`${assetPrefix}/_next/${buildId}/page/_error.js`} as='script' />
{this.getPreloadDynamicChunks()}
2017-04-12 10:41:54 +00:00
{this.getPreloadMainLinks()}
{styles || null}
2016-12-16 18:42:40 +00:00
{this.props.children}
</head>
}
}
export class Main extends Component {
Merge v3-beta into master (#2809) * Add examples/with-redux-code-splitting. (#2721) * #1757 Relay Modern Example (#2696) * Add ReasonML example (#2640) * Add ReasonML example * Add a gitignore specifically for the reasonml example * Allow custom className for <Main /> (#2802) * 3.0.2 * Remove beta information from the README. * 3.0.3 * Remove unnecessary lookup in example with emotion (#2731) * Document SCSS/Less (#2742) * Document SCSS/Less * Add missing word * Add docs for examples dir * Add extra example * uppercase J * Add with pkg example (#2751) * Add custom server micro example (#2750) * Ease running multiple examples at the same time with process.env.PORT (#2753) * Add line-height rule for error page h2 (#2761) * Add support for fetching multiple translation files (#2743) * Add support for fetching multiple translation files * Cleanup * Clear missed interval (#2611) * clear missed interval * remove trailing whitespace * Relay Modern Example (#1757) (#2773) * Simplification of Relay Modern Example (#1757) (#2776) * Use deterministic names for dynamic import (#2788) * Always use the same name for the same dynamic import. * Add unit tests for the modulePath generation. * Allow tests to run correctly on Windows. * Make the chunk name a bit pretty. * Fix tests to run on Windows. * 3.0.4 * Revert "Make the chunk name a bit pretty." (#2792) This reverts commit 0c9e8cf2271955e74ab9f752b5869b98c1dc60f9. * 3.0.5 * Use _ as the divider for dynamic import name splitter. (#2793) Using - gives us some weird webpack errors. * 3.0.6 * next/dynamic Error Message Tweaks (#2798) * Fixed issue (#2804) https://github.com/zeit/next.js/issues/2800 * docs(material-ui): move the source code to Material-UI repository (#2808)
2017-08-27 20:13:35 +00:00
static propTypes = {
className: PropTypes.string
}
2016-12-16 18:42:40 +00:00
static contextTypes = {
_documentProps: PropTypes.any
}
render () {
const { html, errorHtml } = this.context._documentProps
Merge v3-beta into master (#2809) * Add examples/with-redux-code-splitting. (#2721) * #1757 Relay Modern Example (#2696) * Add ReasonML example (#2640) * Add ReasonML example * Add a gitignore specifically for the reasonml example * Allow custom className for <Main /> (#2802) * 3.0.2 * Remove beta information from the README. * 3.0.3 * Remove unnecessary lookup in example with emotion (#2731) * Document SCSS/Less (#2742) * Document SCSS/Less * Add missing word * Add docs for examples dir * Add extra example * uppercase J * Add with pkg example (#2751) * Add custom server micro example (#2750) * Ease running multiple examples at the same time with process.env.PORT (#2753) * Add line-height rule for error page h2 (#2761) * Add support for fetching multiple translation files (#2743) * Add support for fetching multiple translation files * Cleanup * Clear missed interval (#2611) * clear missed interval * remove trailing whitespace * Relay Modern Example (#1757) (#2773) * Simplification of Relay Modern Example (#1757) (#2776) * Use deterministic names for dynamic import (#2788) * Always use the same name for the same dynamic import. * Add unit tests for the modulePath generation. * Allow tests to run correctly on Windows. * Make the chunk name a bit pretty. * Fix tests to run on Windows. * 3.0.4 * Revert "Make the chunk name a bit pretty." (#2792) This reverts commit 0c9e8cf2271955e74ab9f752b5869b98c1dc60f9. * 3.0.5 * Use _ as the divider for dynamic import name splitter. (#2793) Using - gives us some weird webpack errors. * 3.0.6 * next/dynamic Error Message Tweaks (#2798) * Fixed issue (#2804) https://github.com/zeit/next.js/issues/2800 * docs(material-ui): move the source code to Material-UI repository (#2808)
2017-08-27 20:13:35 +00:00
const { className } = this.props
return (
Merge v3-beta into master (#2809) * Add examples/with-redux-code-splitting. (#2721) * #1757 Relay Modern Example (#2696) * Add ReasonML example (#2640) * Add ReasonML example * Add a gitignore specifically for the reasonml example * Allow custom className for <Main /> (#2802) * 3.0.2 * Remove beta information from the README. * 3.0.3 * Remove unnecessary lookup in example with emotion (#2731) * Document SCSS/Less (#2742) * Document SCSS/Less * Add missing word * Add docs for examples dir * Add extra example * uppercase J * Add with pkg example (#2751) * Add custom server micro example (#2750) * Ease running multiple examples at the same time with process.env.PORT (#2753) * Add line-height rule for error page h2 (#2761) * Add support for fetching multiple translation files (#2743) * Add support for fetching multiple translation files * Cleanup * Clear missed interval (#2611) * clear missed interval * remove trailing whitespace * Relay Modern Example (#1757) (#2773) * Simplification of Relay Modern Example (#1757) (#2776) * Use deterministic names for dynamic import (#2788) * Always use the same name for the same dynamic import. * Add unit tests for the modulePath generation. * Allow tests to run correctly on Windows. * Make the chunk name a bit pretty. * Fix tests to run on Windows. * 3.0.4 * Revert "Make the chunk name a bit pretty." (#2792) This reverts commit 0c9e8cf2271955e74ab9f752b5869b98c1dc60f9. * 3.0.5 * Use _ as the divider for dynamic import name splitter. (#2793) Using - gives us some weird webpack errors. * 3.0.6 * next/dynamic Error Message Tweaks (#2798) * Fixed issue (#2804) https://github.com/zeit/next.js/issues/2800 * docs(material-ui): move the source code to Material-UI repository (#2808)
2017-08-27 20:13:35 +00:00
<div className={className}>
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
<div id='__next-error' dangerouslySetInnerHTML={{ __html: errorHtml }} />
</div>
)
2016-12-16 18:42:40 +00:00
}
}
export class NextScript extends Component {
static propTypes = {
nonce: PropTypes.string
}
2016-12-16 18:42:40 +00:00
static contextTypes = {
_documentProps: PropTypes.any
}
getChunkScript (filename, additionalProps = {}) {
const { __NEXT_DATA__ } = this.context._documentProps
let { buildStats, assetPrefix, buildId } = __NEXT_DATA__
const hash = buildStats ? buildStats[filename].hash : buildId
return (
<script
key={filename}
type='text/javascript'
src={`${assetPrefix}/_next/${hash}/${filename}`}
{...additionalProps}
/>
)
}
getScripts () {
const { dev } = this.context._documentProps
if (dev) {
return [
this.getChunkScript('manifest.js'),
this.getChunkScript('commons.js'),
this.getChunkScript('main.js')
]
}
// 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 })]
}
getDynamicChunks () {
2017-04-18 16:12:21 +00:00
const { chunks, __NEXT_DATA__ } = this.context._documentProps
let { assetPrefix, buildId } = __NEXT_DATA__
return (
<div>
{chunks.map((chunk) => (
<script
async
key={chunk}
type='text/javascript'
src={`${assetPrefix}/_next/${buildId}/webpack/chunks/${chunk}`}
/>
))}
</div>
)
}
2016-12-16 18:42:40 +00:00
render () {
const { staticMarkup, __NEXT_DATA__, chunks } = this.context._documentProps
const { pathname, buildId, assetPrefix } = __NEXT_DATA__
const pagePathname = getPagePathname(pathname)
__NEXT_DATA__.chunks = chunks
2016-12-16 18:42:40 +00:00
return <div>
{staticMarkup ? null : <script nonce={this.props.nonce} dangerouslySetInnerHTML={{
__html: `
__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}
module={}
__NEXT_LOADED_PAGES__ = []
__NEXT_LOADED_CHUNKS__ = []
__NEXT_REGISTER_PAGE = function (route, fn) {
__NEXT_LOADED_PAGES__.push({ route: route, fn: fn })
}
__NEXT_REGISTER_CHUNK = function (chunkName, fn) {
__NEXT_LOADED_CHUNKS__.push({ chunkName: chunkName, fn: fn })
}
`
}} />}
<script async id={`__NEXT_PAGE__${pathname}`} type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page${pagePathname}`} />
<script async id={`__NEXT_PAGE__/_error`} type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page/_error.js`} />
{staticMarkup ? null : this.getDynamicChunks()}
{staticMarkup ? null : this.getScripts()}
2016-12-16 18:42:40 +00:00
</div>
}
}
function getPagePathname (pathname) {
if (pathname === '/') {
return '/index.js'
}
return `${pathname}.js`
}