From d169a3ab9a074a49c7e3ed0612f664f856f3ebf4 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Tue, 10 May 2022 16:12:40 -0500 Subject: [PATCH 1/4] rename root -> views --- packages/next/build/webpack-config.ts | 2 +- packages/next/client/{root-index.tsx => views-index.tsx} | 0 packages/next/client/{root-next.js => views-next.js} | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/next/client/{root-index.tsx => views-index.tsx} (100%) rename packages/next/client/{root-next.js => views-next.js} (52%) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 2c6a84fef686..90253d20739f 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -548,7 +548,7 @@ export default async function getBaseWebpackConfig( path .relative( dir, - path.join(NEXT_PROJECT_ROOT_DIST_CLIENT, 'root-next.js') + path.join(NEXT_PROJECT_ROOT_DIST_CLIENT, 'views-next.js') ) .replace(/\\/g, '/'), } diff --git a/packages/next/client/root-index.tsx b/packages/next/client/views-index.tsx similarity index 100% rename from packages/next/client/root-index.tsx rename to packages/next/client/views-index.tsx diff --git a/packages/next/client/root-next.js b/packages/next/client/views-next.js similarity index 52% rename from packages/next/client/root-next.js rename to packages/next/client/views-next.js index 696a23f8390e..c41d59c227f2 100644 --- a/packages/next/client/root-next.js +++ b/packages/next/client/views-next.js @@ -1,4 +1,4 @@ -import { hydrate, version } from './root-index' +import { hydrate, version } from './views-index' window.next = { version, From b32ae15ac50d119dfadd9fe3b36cb559d5e33283 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Tue, 10 May 2022 16:42:45 -0500 Subject: [PATCH 2/4] Update client router for tests --- packages/next/client/views-index.tsx | 49 +++++++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/packages/next/client/views-index.tsx b/packages/next/client/views-index.tsx index e37c069470e6..49f995dd2720 100644 --- a/packages/next/client/views-index.tsx +++ b/packages/next/client/views-index.tsx @@ -194,11 +194,58 @@ const RSCComponent = (props: any) => { ) } +const ViewRouterContext = React.createContext({}) + +// TODO: move to client component when handling is implemented +function ViewRouter({ initialUrl, children }: any) { + const initialState = { + url: initialUrl, + } + const previousUrlRef = React.useRef(initialState) + const [current, setCurrent] = React.useState(initialState) + + const viewRouter = React.useMemo(() => { + return { + push: (url: string) => { + previousUrlRef.current = current + setCurrent({ ...current, url }) + // TODO: update url eagerly or not? + window.history.pushState(current, '', url) + }, + url: current.url, + } + }, [current]) + + // @ts-ignore TODO: for testing + window.viewRouter = viewRouter + + console.log({ + viewRouter, + previous: previousUrlRef.current, + current, + }) + + let root + if (current.url !== previousUrlRef.current?.url) { + // eslint-disable-next-line + const data = useServerResponse(current.url) + root = data.readRoot() + } + + return ( + + {root ? root : children} + + ) +} + export function hydrate() { renderReactElement(appElement!, () => ( - + + + )) From a0b8731fcbd1a5d1f6dc87f9a7c1bd03042b6663 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 11 May 2022 15:41:21 +0200 Subject: [PATCH 3/4] Use bootstrapScripts to inject hydration scripts --- packages/next/lib/views-layout.tsx | 12 +++----- .../next/server/node-web-streams-helper.ts | 29 ++----------------- packages/next/server/view-render.tsx | 18 ++++++------ .../app/views/(newroot)/layout.server.js | 5 ++-- test/e2e/views-dir/app/views/layout.server.js | 5 ++-- 5 files changed, 20 insertions(+), 49 deletions(-) diff --git a/packages/next/lib/views-layout.tsx b/packages/next/lib/views-layout.tsx index bbbbecd42693..0f4d4edee356 100644 --- a/packages/next/lib/views-layout.tsx +++ b/packages/next/lib/views-layout.tsx @@ -1,21 +1,17 @@ import React from 'react' export type LayoutProps = { - headChildren: any - bodyChildren: any + children: any } -export default function ViewsLayout({ - headChildren, - bodyChildren, -}: LayoutProps) { +export default function ViewsLayout({ children }: LayoutProps) { return ( - {headChildren} + {/* TODO: Remove */} <title>Test - {bodyChildren} + {children} ) } diff --git a/packages/next/server/node-web-streams-helper.ts b/packages/next/server/node-web-streams-helper.ts index 6dc7e46ce0e3..248e835cbd05 100644 --- a/packages/next/server/node-web-streams-helper.ts +++ b/packages/next/server/node-web-streams-helper.ts @@ -135,15 +135,17 @@ export function createFlushEffectStream( export function renderToInitialStream({ ReactDOMServer, element, + streamOptions, }: { ReactDOMServer: any element: React.ReactElement + streamOptions?: any }): Promise< ReadableStream & { allReady?: Promise } > { - return ReactDOMServer.renderToReadableStream(element) + return ReactDOMServer.renderToReadableStream(element, streamOptions) } export async function continueFromInitialStream({ @@ -182,31 +184,6 @@ export async function continueFromInitialStream({ ) } -export async function renderToStream({ - ReactDOMServer, - element, - suffix, - dataStream, - generateStaticHTML, - flushEffectHandler, -}: { - ReactDOMServer: typeof import('react-dom/server') - element: React.ReactElement - suffix?: string - dataStream?: ReadableStream - generateStaticHTML: boolean - flushEffectHandler?: () => string -}): Promise> { - const renderStream = await renderToInitialStream({ ReactDOMServer, element }) - return continueFromInitialStream({ - suffix, - dataStream, - generateStaticHTML, - flushEffectHandler, - renderStream, - }) -} - export function createSuffixStream( suffix: string ): TransformStream { diff --git a/packages/next/server/view-render.tsx b/packages/next/server/view-render.tsx index 8952c5f493aa..f549597c5530 100644 --- a/packages/next/server/view-render.tsx +++ b/packages/next/server/view-render.tsx @@ -326,12 +326,11 @@ export async function renderToHTML( } } - // if this is the root layout pass children as bodyChildren prop + // if this is the root layout pass children as children prop if (!isSubtreeRender && i === 0) { return React.createElement(layout.Component, { ...props, - headChildren: props.headChildren, - bodyChildren: React.createElement( + children: React.createElement( lastComponent || React.Fragment, {}, null @@ -356,10 +355,8 @@ export async function renderToHTML( // } } - const headChildren = !isSubtreeRender - ? buildManifest.rootMainFiles.map((src) => ( -