/* eslint-disable */
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { cleanAmpPath } from 'next-server/dist/server/utils'
import { DocumentContext, DocumentInitialProps, DocumentProps } from 'next-server/dist/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/constants'
export { DocumentContext, DocumentInitialProps, DocumentProps }
export type OriginProps = {
nonce?: string
crossOrigin?: string,
}
export type DocumentComponentContext = {
readonly _documentProps: DocumentProps
readonly _devOnlyInvalidateCacheQueryString: string,
}
export default class Document
extends Component {
static childContextTypes = {
_documentProps: PropTypes.any,
_devOnlyInvalidateCacheQueryString: PropTypes.string,
}
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 {
static contextTypes = {
_documentProps: PropTypes.any,
}
static propTypes = {
children: PropTypes.node.isRequired,
}
context!: DocumentComponentContext
render() {
const { amphtml } = this.context._documentProps
return (
)
}
}
export class Head extends Component {
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 dynamicImports.map((bundle: any) => {
return (
)
})
}
getPreloadMainLinks() {
const { assetPrefix, files } = this.context._documentProps
if (!files || files.length === 0) {
return null
}
const { _devOnlyInvalidateCacheQueryString } = this.context
return files.map((file: string) => {
// Only render .js files here
if (!/\.js$/.exec(file)) {
return null
}
return (
)
})
}
render() {
const {
styles,
amphtml,
hasAmp,
ampPath,
assetPrefix,
__NEXT_DATA__,
dangerousAsPath,
} = this.context._documentProps
const { _devOnlyInvalidateCacheQueryString } = this.context
const { page, buildId, dynamicBuildId } = __NEXT_DATA__
const isDirtyAmp = amphtml && !__NEXT_DATA__.query.amp
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) => {
if (child && child.type === 'title') {
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',
)
}
// show warning and remove conflicting amp head tags
head = !amphtml ? 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') {
badProp = 'rel="canonical"'
} 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 = '