/* eslint-disable */
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { cleanAmpPath } from '../next-server/server/utils'
import {
DocumentContext,
DocumentInitialProps,
DocumentProps,
} from '../next-server/lib/utils'
import { htmlEscapeJsonString } from '../server/htmlescape'
import flush from 'styled-jsx/server'
import {
CLIENT_STATIC_FILES_RUNTIME_AMP,
CLIENT_STATIC_FILES_RUNTIME_WEBPACK,
} from '../next-server/lib/constants'
export { DocumentContext, DocumentInitialProps, DocumentProps }
export type OriginProps = {
nonce?: string
crossOrigin?: string
}
export type DocumentComponentContext = {
readonly _documentProps: DocumentProps
readonly _devOnlyInvalidateCacheQueryString: string
}
export async function middleware({ req, res }: DocumentContext) {}
function dedupe(bundles: any[]): any[] {
const files = new Set()
const kept = []
for (const bundle of bundles) {
if (files.has(bundle.file)) continue
files.add(bundle.file)
kept.push(bundle)
}
return kept
}
function getOptionalModernScriptVariant(path: string) {
if (process.env.__NEXT_MODERN_BUILD) {
return path.replace(/\.js$/, '.module.js')
}
return path
}
/**
* `Document` component handles the initial `document` markup and renders only on the server side.
* Commonly used for implementing server side rendering for `css-in-js` libraries.
*/
export default class Document
extends Component {
static childContextTypes = {
_documentProps: PropTypes.any,
_devOnlyInvalidateCacheQueryString: PropTypes.string,
}
/**
* `getInitialProps` hook returns the context object with the addition of `renderPage`.
* `renderPage` callback executes `React` rendering logic synchronously to support server-rendering wrappers
*/
static async getInitialProps({
renderPage,
}: DocumentContext): Promise {
const { html, head, dataOnly } = await renderPage()
const styles = flush()
return { html, head, styles, dataOnly }
}
context!: DocumentComponentContext
getChildContext(): DocumentComponentContext {
return {
_documentProps: this.props,
// In dev we invalidate the cache by appending a timestamp to the resource URL.
// This is a workaround to fix https://github.com/zeit/next.js/issues/5860
// TODO: remove this workaround when https://bugs.webkit.org/show_bug.cgi?id=187726 is fixed.
_devOnlyInvalidateCacheQueryString:
process.env.NODE_ENV !== 'production' ? '?ts=' + Date.now() : '',
}
}
render() {
return (
)
}
}
export class Html extends Component<
React.DetailedHTMLProps<
React.HtmlHTMLAttributes,
HTMLHtmlElement
>
> {
static contextTypes = {
_documentProps: PropTypes.any,
}
static propTypes = {
children: PropTypes.node.isRequired,
}
context!: DocumentComponentContext
render() {
const { inAmpMode } = this.context._documentProps
return (
)
}
}
export class Head extends Component<
OriginProps &
React.DetailedHTMLProps<
React.HTMLAttributes,
HTMLHeadElement
>
> {
static contextTypes = {
_documentProps: PropTypes.any,
_devOnlyInvalidateCacheQueryString: PropTypes.string,
}
static propTypes = {
nonce: PropTypes.string,
crossOrigin: PropTypes.string,
}
context!: DocumentComponentContext
getCssLinks() {
const { assetPrefix, files } = this.context._documentProps
if (!files || files.length === 0) {
return null
}
return files.map((file: string) => {
// Only render .css files here
if (!/\.css$/.exec(file)) {
return null
}
return (
)
})
}
getPreloadDynamicChunks() {
const { dynamicImports, assetPrefix } = this.context._documentProps
const { _devOnlyInvalidateCacheQueryString } = this.context
return (
dedupe(dynamicImports)
.map((bundle: any) => {
// `dynamicImports` will contain both `.js` and `.module.js` when the
// feature is enabled. This clause will filter down to the modern
// variants only.
if (!bundle.file.endsWith(getOptionalModernScriptVariant('.js'))) {
return null
}
return (
)
})
// Filter out nulled scripts
.filter(Boolean)
)
}
getPreloadMainLinks() {
const { assetPrefix, files } = this.context._documentProps
if (!files || files.length === 0) {
return null
}
const { _devOnlyInvalidateCacheQueryString } = this.context
return files
.map((file: string) => {
// `dynamicImports` will contain both `.js` and `.module.js` when the
// feature is enabled. This clause will filter down to the modern
// variants only.
// This also filters out non-JS assets.
if (!file.endsWith(getOptionalModernScriptVariant('.js'))) {
return null
}
return (
)
})
.filter(Boolean)
}
render() {
const {
styles,
ampPath,
inAmpMode,
assetPrefix,
hybridAmp,
canonicalBase,
__NEXT_DATA__,
dangerousAsPath,
} = this.context._documentProps
const { _devOnlyInvalidateCacheQueryString } = this.context
const { page, buildId } = __NEXT_DATA__
let { head } = this.context._documentProps
let children = this.props.children
// show a warning if Head contains (only in development)
if (process.env.NODE_ENV !== 'production') {
children = React.Children.map(children, (child: any) => {
const isReactHelmet =
child && child.props && child.props['data-react-helmet']
if (child && child.type === 'title' && !isReactHelmet) {
console.warn(
"Warning: should not be used in _document.js's . https://err.sh/next.js/no-document-title"
)
}
return child
})
if (this.props.crossOrigin)
console.warn(
'Warning: `Head` attribute `crossOrigin` is deprecated. https://err.sh/next.js/doc-crossorigin-deprecated'
)
}
let hasAmphtmlRel = false
let hasCanonicalRel = false
// show warning and remove conflicting amp head tags
head = !inAmpMode
? head
: React.Children.map(head || [], child => {
if (!child) return child
const { type, props } = child
let badProp: string = ''
if (type === 'meta' && props.name === 'viewport') {
badProp = 'name="viewport"'
} else if (type === 'link' && props.rel === 'canonical') {
hasCanonicalRel = true
} else if (type === 'link' && props.rel === 'amphtml') {
hasAmphtmlRel = true
} else if (type === 'script') {
// only block if
// 1. it has a src and isn't pointing to ampproject's CDN
// 2. it is using dangerouslySetInnerHTML without a type or
// a type of text/javascript
if (
(props.src && props.src.indexOf('ampproject') < -1) ||
(props.dangerouslySetInnerHTML &&
(!props.type || props.type === 'text/javascript'))
) {
badProp = '