Revert support for render prop in <Main /> (#32184)

Reverts support for render prop in `<Main />` in `Document`. This was added just to support the `useFlushEffect` hook, but we've tweaked the design a bit, moving it to `App`.
vercel · Dec 6, 2021 · 9bcf678 · 9bcf678
1 parent 1fe014c
commit 9bcf678
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 121 deletions.
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -756,15 +756,11 @@ export class Head extends Component<
   }
 }
 
-export function Main({
-  children,
-}: {
-  children?: (content: JSX.Element) => JSX.Element
-}) {
-  const { docComponentsRendered, useMainContent } = useContext(HtmlContext)
-  const content = useMainContent(children)
+export function Main() {
+  const { docComponentsRendered } = useContext(HtmlContext)
   docComponentsRendered.Main = true
-  return content
+  // @ts-ignore
+  return <next-js-internal-body-render-target />
 }
 
 export class NextScript extends Component<OriginProps> {

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -1048,20 +1048,6 @@ export async function renderToHTML(
     return inAmpMode ? children : <div id="__next">{children}</div>
   }
 
-  const appWrappers: Array<(content: JSX.Element) => JSX.Element> = []
-  const getWrappedApp = (app: JSX.Element) => {
-    // Prevent wrappers from reading/writing props by rendering inside an
-    // opaque component. Wrappers should use context instead.
-    const InnerApp = () => app
-    return (
-      <AppContainerWithIsomorphicFiberStructure>
-        {appWrappers.reduceRight((innerContent, fn) => {
-          return fn(innerContent)
-        }, <InnerApp />)}
-      </AppContainerWithIsomorphicFiberStructure>
-    )
-  }
-
   /**
    * Rules of Static & Dynamic HTML:
    *
@@ -1106,13 +1092,13 @@ export async function renderToHTML(
 
         const html = ReactDOMServer.renderToString(
           <Body>
-            {getWrappedApp(
+            <AppContainerWithIsomorphicFiberStructure>
               <EnhancedApp
                 Component={EnhancedComponent}
                 router={router}
                 {...props}
               />
-            )}
+            </AppContainerWithIsomorphicFiberStructure>
           </Body>
         )
         return { html, head }
@@ -1137,15 +1123,6 @@ export async function renderToHTML(
         documentElement: (htmlProps: HtmlProps) => (
           <Document {...htmlProps} {...docProps} />
         ),
-        useMainContent: (fn?: (content: JSX.Element) => JSX.Element) => {
-          if (fn) {
-            throw new Error(
-              'The `children` property is not supported by non-functional custom Document components'
-            )
-          }
-          // @ts-ignore
-          return <next-js-internal-body-render-target />
-        },
         head: docProps.head,
         headTags: await headTags(documentCtx),
         styles: docProps.styles,
@@ -1164,9 +1141,9 @@ export async function renderToHTML(
               </Body>
             ) : (
               <Body>
-                {getWrappedApp(
+                <AppContainerWithIsomorphicFiberStructure>
                   <App {...props} Component={Component} router={router} />
-                )}
+                </AppContainerWithIsomorphicFiberStructure>
               </Body>
             )
           return process.browser
@@ -1181,9 +1158,9 @@ export async function renderToHTML(
             </Body>
           ) : (
             <Body>
-              {getWrappedApp(
+              <AppContainerWithIsomorphicFiberStructure>
                 <App {...props} Component={Component} router={router} />
-              )}
+              </AppContainerWithIsomorphicFiberStructure>
             </Body>
           )
         // for non-concurrent rendering we need to ensure App is rendered
@@ -1196,13 +1173,6 @@ export async function renderToHTML(
       return {
         bodyResult,
         documentElement: () => (Document as any)(),
-        useMainContent: (fn?: (_content: JSX.Element) => JSX.Element) => {
-          if (fn) {
-            appWrappers.push(fn)
-          }
-          // @ts-ignore
-          return <next-js-internal-body-render-target />
-        },
         head,
         headTags: [],
         styles: jsxStyleRegistry.styles(),
@@ -1243,7 +1213,7 @@ export async function renderToHTML(
     locales,
     runtimeConfig,
   } = renderOpts
-  const htmlProps: any = {
+  const htmlProps: HtmlProps = {
     __NEXT_DATA__: {
       props, // The result of getInitialProps
       page: pathname, // The rendered page
@@ -1297,7 +1267,6 @@ export async function renderToHTML(
     head: documentResult.head,
     headTags: documentResult.headTags,
     styles: documentResult.styles,
-    useMainContent: documentResult.useMainContent,
     useMaybeDeferContent,
     crossOrigin: renderOpts.crossOrigin,
     optimizeCss: renderOpts.optimizeCss,

diff --git a/packages/next/shared/lib/utils.ts b/packages/next/shared/lib/utils.ts
@@ -221,7 +221,6 @@ export type HtmlProps = {
   styles?: React.ReactElement[] | React.ReactFragment
   head?: Array<JSX.Element | null>
   useMaybeDeferContent: MaybeDeferContentHook
-  useMainContent: (fn?: (content: JSX.Element) => JSX.Element) => JSX.Element
   crossOrigin?: string
   optimizeCss?: boolean
   optimizeFonts?: boolean

diff --git a/test/integration/document-functional-render-prop/app/lib/context.js b/test/integration/document-functional-render-prop/app/lib/context.js
diff --git a/test/integration/document-functional-render-prop/app/next.config.js b/test/integration/document-functional-render-prop/app/next.config.js
diff --git a/test/integration/document-functional-render-prop/app/package.json b/test/integration/document-functional-render-prop/app/package.json
diff --git a/test/integration/document-functional-render-prop/app/pages/_document.js b/test/integration/document-functional-render-prop/app/pages/_document.js
diff --git a/test/integration/document-functional-render-prop/app/pages/index.js b/test/integration/document-functional-render-prop/app/pages/index.js
diff --git a/test/integration/document-functional-render-prop/tests/index.test.js b/test/integration/document-functional-render-prop/tests/index.test.js