Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move root div to an app wrapper #31596

Merged
merged 3 commits into from
Nov 19, 2021
Merged

Move root div to an app wrapper #31596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3eb161c
Move root div to an app wrapper
devknoll Nov 19, 2021
9f6444f
Wrap outside instead (to better match client model)
devknoll Nov 19, 2021
9009946
Refactor to <Body> component
devknoll Nov 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions packages/next/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -766,13 +766,10 @@ export function Main({
}: {
children?: (content: JSX.Element) => JSX.Element
}) {
const { inAmpMode, docComponentsRendered, useMainContent } =
useContext(HtmlContext)
const { docComponentsRendered, useMainContent } = useContext(HtmlContext)
const content = useMainContent(children)
docComponentsRendered.Main = true

if (inAmpMode) return content
return <div id="__next">{content}</div>
return content
}

export class NextScript extends Component<OriginProps> {
Expand Down
45 changes: 28 additions & 17 deletions packages/next/server/render.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1041,14 +1041,18 @@ export async function renderToHTML(
}
}

const Body = ({ children }: { children: JSX.Element }) => {
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.reduce((innerContent, fn) => {
{appWrappers.reduceRight((innerContent, fn) => {
return fn(innerContent)
}, <InnerApp />)}
</AppContainerWithIsomorphicFiberStructure>
Expand Down Expand Up @@ -1081,7 +1085,9 @@ export async function renderToHTML(
): RenderPageResult | Promise<RenderPageResult> => {
if (ctx.err && ErrorDebug) {
const html = ReactDOMServer.renderToString(
<ErrorDebug error={ctx.err} />
<Body>
<ErrorDebug error={ctx.err} />
</Body>
)
return { html, head }
}
Expand All @@ -1096,13 +1102,15 @@ export async function renderToHTML(
enhanceComponents(options, App, Component)

const html = ReactDOMServer.renderToString(
getWrappedApp(
<EnhancedApp
Component={EnhancedComponent}
router={router}
{...props}
/>
)
<Body>
{getWrappedApp(
<EnhancedApp
Component={EnhancedComponent}
router={router}
{...props}
/>
)}
</Body>
)
return { html, head }
}
Expand Down Expand Up @@ -1141,14 +1149,17 @@ export async function renderToHTML(
}
} else {
const bodyResult = async () => {
const content =
ctx.err && ErrorDebug ? (
<ErrorDebug error={ctx.err} />
) : (
getWrappedApp(
<App {...props} Component={Component} router={router} />
)
)
const content = (
<Body>
{ctx.err && ErrorDebug ? (
<ErrorDebug error={ctx.err} />
) : (
getWrappedApp(
<App {...props} Component={Component} router={router} />
)
)}
</Body>
)

return concurrentFeatures
? process.browser
Expand Down