Remove _document context (#9068)

b2adfde9 · Gerald Monaco · Joe Haddad · 09681cd5 · b2adfde9 · b2adfde9
4 changed file
--- a/packages/next/next-server/lib/document-context.ts
+++ b/packages/next/next-server/lib/document-context.ts
+import * as React from 'react'
+import { DocumentProps } from './utils'
+
+type DocumentContext = {
+  readonly _documentProps: DocumentProps
+  readonly _devOnlyInvalidateCacheQueryString: string
+}
+
+export const DocumentContext = React.createContext<DocumentContext>(null as any)
--- a/packages/next/next-server/lib/utils.ts
+++ b/packages/next/next-server/lib/utils.ts
@@ -4,6 +4,7 @@ import { ComponentType } from 'react'
 import { ParsedUrlQuery } from 'querystring'
 import { ManifestItem } from '../server/render'
 import { NextRouter } from './router/router'
+import { DocumentContext as DocumentComponentContext } from './document-context'

 /**
 * Types used by both next and next-server
@@ -20,7 +21,12 @@ export type DocumentType = NextComponentType<
  DocumentContext,
  DocumentInitialProps,
  DocumentProps
->
+> & {
+  renderDocument(
+    Document: DocumentType,
+    props: DocumentProps
+  ): React.ReactElement
+}

 export type AppType = NextComponentType<
  AppContextType,

--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -209,8 +209,8 @@ function renderDocument(
    '<!DOCTYPE html>' +
    renderToStaticMarkup(
      <AmpStateContext.Provider value={ampState}>
-        <Document
-          __NEXT_DATA__={{
+        {Document.renderDocument(Document, {
+          __NEXT_DATA__: {
            dataManager: dataManagerData,
            props, // The result of getInitialProps
            page: pathname, // The rendered page
@@ -224,21 +224,21 @@ function renderDocument(
            dynamicIds:
              dynamicImportsIds.length === 0 ? undefined : dynamicImportsIds,
            err: err ? serializeError(dev, err) : undefined, // Error if one happened, otherwise don't sent in the resulting HTML
-          }}
-          dangerousAsPath={dangerousAsPath}
-          canonicalBase={canonicalBase}
-          ampPath={ampPath}
-          inAmpMode={inAmpMode}
-          isDevelopment={!!dev}
-          hasCssMode={hasCssMode}
-          hybridAmp={hybridAmp}
-          staticMarkup={staticMarkup}
-          devFiles={devFiles}
-          files={files}
-          dynamicImports={dynamicImports}
-          assetPrefix={assetPrefix}
-          {...docProps}
-        />
+          },
+          dangerousAsPath,
+          canonicalBase,
+          ampPath,
+          inAmpMode,
+          isDevelopment: !!dev,
+          hasCssMode,
+          hybridAmp,
+          staticMarkup,
+          devFiles,
+          files,
+          dynamicImports,
+          assetPrefix,
+          ...docProps,
+        })}
      </AmpStateContext.Provider>
    )
  )

--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -13,6 +13,7 @@ import {
  CLIENT_STATIC_FILES_RUNTIME_AMP,
  CLIENT_STATIC_FILES_RUNTIME_WEBPACK,
 } from '../next-server/lib/constants'
+import { DocumentContext as DocumentComponentContext } from '../next-server/lib/document-context'

 export { DocumentContext, DocumentInitialProps, DocumentProps }

@@ -21,11 +22,6 @@ export type OriginProps = {
  crossOrigin?: string
 }

-export type DocumentComponentContext = {
-  readonly _documentProps: DocumentProps
-  readonly _devOnlyInvalidateCacheQueryString: string
-}
-
 export async function middleware({ req, res }: DocumentContext) {}

 function dedupe(bundles: any[]): any[] {
@@ -52,11 +48,6 @@ function getOptionalModernScriptVariant(path: string) {
 * Commonly used for implementing server side rendering for `css-in-js` libraries.
 */
 export default class Document<P = {}> extends Component<DocumentProps & P> {
-  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
@@ -69,17 +60,24 @@ export default class Document<P = {}> extends Component<DocumentProps & P> {
    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() : '',
-    }
+  static renderDocument<P>(
+    Document: new () => Document<P>,
+    props: DocumentProps & P
+  ): React.ReactElement {
+    return (
+      <DocumentComponentContext.Provider
+        value={{
+          _documentProps: 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() : '',
+        }}
+      >
+        <Document {...props} />
+      </DocumentComponentContext.Provider>
+    )
  }

  render() {
@@ -101,15 +99,13 @@ export class Html extends Component<
    HTMLHtmlElement
  >
 > {
-  static contextTypes = {
-    _documentProps: PropTypes.any,
-  }
+  static contextType = DocumentComponentContext

  static propTypes = {
    children: PropTypes.node.isRequired,
  }

-  context!: DocumentComponentContext
+  context!: React.ContextType<typeof DocumentComponentContext>

  render() {
    const { inAmpMode } = this.context._documentProps
@@ -132,17 +128,14 @@ export class Head extends Component<
      HTMLHeadElement
    >
 > {
-  static contextTypes = {
-    _documentProps: PropTypes.any,
-    _devOnlyInvalidateCacheQueryString: PropTypes.string,
-  }
+  static contextType = DocumentComponentContext

  static propTypes = {
    nonce: PropTypes.string,
    crossOrigin: PropTypes.string,
  }

-  context!: DocumentComponentContext
+  context!: React.ContextType<typeof DocumentComponentContext>

  getCssLinks() {
    const { assetPrefix, files } = this.context._documentProps
@@ -469,12 +462,9 @@ export class Head extends Component<
 }

 export class Main extends Component {
-  static contextTypes = {
-    _documentProps: PropTypes.any,
-    _devOnlyInvalidateCacheQueryString: PropTypes.string,
-  }
+  static contextType = DocumentComponentContext

-  context!: DocumentComponentContext
+  context!: React.ContextType<typeof DocumentComponentContext>

  render() {
    const { inAmpMode, html } = this.context._documentProps
@@ -484,17 +474,14 @@ export class Main extends Component {
 }

 export class NextScript extends Component<OriginProps> {
-  static contextTypes = {
-    _documentProps: PropTypes.any,
-    _devOnlyInvalidateCacheQueryString: PropTypes.string,
-  }
+  static contextType = DocumentComponentContext

  static propTypes = {
    nonce: PropTypes.string,
    crossOrigin: PropTypes.string,
  }

-  context!: DocumentComponentContext
+  context!: React.ContextType<typeof DocumentComponentContext>

  // Source: https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
  static safariNomoduleFix =