From 6bca0e75238bb3df89092749ad673cb78a6e09db Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 15 Aug 2022 14:24:03 +0200 Subject: [PATCH 01/12] Rename manifest variable --- .../next/build/webpack/plugins/flight-client-entry-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index b4812db7f1c0..806f8469daaa 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -107,7 +107,7 @@ export class FlightClientEntryPlugin { // layoutOrPageDependency // ) - // Object.assign(serverCSSManifest, cssImports) + // Object.assign(flightCSSManifest, cssImports) // promises.push( // this.injectClientEntryAndSSRModules( From 64e2371a22640962968ca540608ebb9d9400ee67 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 15 Aug 2022 15:12:04 +0200 Subject: [PATCH 02/12] Add separate entry per layout/page. --- .../plugins/flight-client-entry-plugin.ts | 123 ++++++++---------- 1 file changed, 57 insertions(+), 66 deletions(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index 806f8469daaa..f07fcea10645 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -3,8 +3,6 @@ import path from 'path' import { webpack, sources } from 'next/dist/compiled/webpack/webpack' import type { webpack5 } from 'next/dist/compiled/webpack/webpack' import { clientComponentRegex } from '../loaders/utils' -import { normalizePagePath } from '../../../shared/lib/page-path/normalize-page-path' -import { denormalizePagePath } from '../../../shared/lib/page-path/denormalize-page-path' import { getInvalidator, entries, @@ -91,53 +89,46 @@ export class FlightClientEntryPlugin { } // TODO-APP: create client-side entrypoint per layout/page. - // const entryModule: webpack5.NormalModule = - // compilation.moduleGraph.getResolvedModule(entryDependency) - - // for (const connection of compilation.moduleGraph.getOutgoingConnections( - // entryModule - // )) { - // const layoutOrPageDependency = connection.dependency - // // const layoutOrPageRequest = connection.dependency.request - - // const [clientComponentImports, cssImports] = - // this.collectClientComponentsAndCSSForDependency( - // compiler.context, - // compilation, - // layoutOrPageDependency - // ) - - // Object.assign(flightCSSManifest, cssImports) - - // promises.push( - // this.injectClientEntryAndSSRModules( - // compiler, - // compilation, - // name, - // entryDependency, - // clientComponentImports - // ) - // ) - // } + const entryModule: webpack5.NormalModule = + compilation.moduleGraph.getResolvedModule(entryDependency) - const [clientComponentImports, cssImports] = - this.collectClientComponentsAndCSSForDependency( - compiler.context, - compilation, - entryDependency - ) + for (const connection of compilation.moduleGraph.getOutgoingConnections( + entryModule + )) { + const layoutOrPageDependency = connection.dependency + const layoutOrPageRequest = connection.dependency.request - Object.assign(flightCSSManifest, cssImports) + const isAbsoluteRequest = layoutOrPageRequest[0] === '/' - promises.push( - this.injectClientEntryAndSSRModules( - compiler, - compilation, - name, - entryDependency, - clientComponentImports + const relativeRequest = isAbsoluteRequest + ? path.relative(compilation.options.context, layoutOrPageRequest) + : layoutOrPageRequest + + // Replace file suffix as `.js` will be added. + const bundlePath = relativeRequest.replace( + /(\.server|\.client)?\.(js|ts)x?$/, + '' ) - ) + + const [clientComponentImports, cssImports] = + this.collectClientComponentsAndCSSForDependency({ + context: compiler.context, + compilation, + dependency: layoutOrPageDependency, + }) + + Object.assign(flightCSSManifest, cssImports) + + promises.push( + this.injectClientEntryAndSSRModules({ + compiler, + compilation, + entryName: name, + clientComponentImports, + bundlePath, + }) + ) + } } compilation.hooks.processAssets.tap( @@ -165,11 +156,15 @@ export class FlightClientEntryPlugin { } } - collectClientComponentsAndCSSForDependency( - context: string, - compilation: any, + collectClientComponentsAndCSSForDependency({ + context, + compilation, + dependency, + }: { + context: string + compilation: any dependency: any /* Dependency */ - ): [ClientComponentImports, CssImports] { + }): [ClientComponentImports, CssImports] { /** * Keep track of checked modules to avoid infinite loops with recursive imports. */ @@ -252,22 +247,21 @@ export class FlightClientEntryPlugin { return [clientComponentImports, serverCSSImports] } - async injectClientEntryAndSSRModules( - compiler: any, - compilation: any, - entryName: string, - entryDependency: any, + async injectClientEntryAndSSRModules({ + compiler, + compilation, + entryName, + clientComponentImports, + bundlePath, + }: { + compiler: any + compilation: any + entryName: string clientComponentImports: ClientComponentImports - ): Promise { + bundlePath: string + }): Promise { let shouldInvalidate = false - const entryModule = - compilation.moduleGraph.getResolvedModule(entryDependency) - const routeInfo = entryModule.buildInfo.route || { - page: denormalizePagePath(entryName.replace(/^pages/, '')), - absolutePagePath: entryModule.resource, - } - const loaderOptions: NextFlightClientEntryLoaderOptions = { modules: clientComponentImports, server: false, @@ -280,18 +274,15 @@ export class FlightClientEntryPlugin { server: true, })}!` - const bundlePath = 'app' + normalizePagePath(routeInfo.page) - // Add for the client compilation // Inject the entry to the client compiler. if (this.dev) { - const pageKey = COMPILER_NAMES.client + routeInfo.page + const pageKey = COMPILER_NAMES.client + bundlePath if (!entries[pageKey]) { entries[pageKey] = { type: EntryTypes.CHILD_ENTRY, parentEntries: new Set([entryName]), bundlePath, - // absolutePagePath: routeInfo.absolutePagePath, request: clientLoader, dispose: false, lastActiveTime: Date.now(), From 5844f41a3e79141d7db733b36797d638cad0c3f5 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 15 Aug 2022 16:57:06 +0200 Subject: [PATCH 03/12] Create app-internals entrypoint separately from pages. --- .../plugins/flight-client-entry-plugin.ts | 43 ++++++++++++++----- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index f07fcea10645..c6b47a3cd464 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -92,14 +92,35 @@ export class FlightClientEntryPlugin { const entryModule: webpack5.NormalModule = compilation.moduleGraph.getResolvedModule(entryDependency) + const internalClientComponentEntryImports = new Set< + ClientComponentImports[0] + >() + for (const connection of compilation.moduleGraph.getOutgoingConnections( entryModule )) { const layoutOrPageDependency = connection.dependency - const layoutOrPageRequest = connection.dependency.request + const [clientComponentImports, cssImports] = + this.collectClientComponentsAndCSSForDependency({ + context: compiler.context, + compilation, + dependency: layoutOrPageDependency, + }) + + Object.assign(flightCSSManifest, cssImports) + + const layoutOrPageRequest = connection.dependency.request const isAbsoluteRequest = layoutOrPageRequest[0] === '/' + // Next.js internals are put into a separate entry. + if (!isAbsoluteRequest) { + clientComponentImports.forEach((value) => + internalClientComponentEntryImports.add(value) + ) + continue + } + const relativeRequest = isAbsoluteRequest ? path.relative(compilation.options.context, layoutOrPageRequest) : layoutOrPageRequest @@ -110,15 +131,6 @@ export class FlightClientEntryPlugin { '' ) - const [clientComponentImports, cssImports] = - this.collectClientComponentsAndCSSForDependency({ - context: compiler.context, - compilation, - dependency: layoutOrPageDependency, - }) - - Object.assign(flightCSSManifest, cssImports) - promises.push( this.injectClientEntryAndSSRModules({ compiler, @@ -129,6 +141,17 @@ export class FlightClientEntryPlugin { }) ) } + + // Create internal app + promises.push( + this.injectClientEntryAndSSRModules({ + compiler, + compilation, + entryName: name, + clientComponentImports: [...internalClientComponentEntryImports], + bundlePath: 'app-internals', + }) + ) } compilation.hooks.processAssets.tap( From 69be2de4ceef595166d795a0ba8bebc77218515c Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 15 Aug 2022 17:37:26 +0200 Subject: [PATCH 04/12] Fix next build error --- .../build/webpack/loaders/next-app-loader.ts | 2 +- .../plugins/flight-client-entry-plugin.ts | 31 +++++-------------- 2 files changed, 9 insertions(+), 24 deletions(-) diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts index dce12a991f5f..1f0f1350a157 100644 --- a/packages/next/build/webpack/loaders/next-app-loader.ts +++ b/packages/next/build/webpack/loaders/next-app-loader.ts @@ -25,7 +25,7 @@ async function createTreeCodeFromPath({ // First item in the list is the page which can't have layouts by itself if (i === segments.length - 1) { // Use '' for segment as it's the page. There can't be a segment called '' so this is the safest way to add it. - tree = `['', {}, {page: () => require('${pagePath}')}]` + tree = `['', {}, {page: () => require('${await resolve(pagePath)}')}]` continue } diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index c6b47a3cd464..ea44c0ecd45e 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -100,17 +100,17 @@ export class FlightClientEntryPlugin { entryModule )) { const layoutOrPageDependency = connection.dependency + const layoutOrPageRequest = connection.dependency.request const [clientComponentImports, cssImports] = this.collectClientComponentsAndCSSForDependency({ - context: compiler.context, + layoutOrPageRequest, compilation, dependency: layoutOrPageDependency, }) Object.assign(flightCSSManifest, cssImports) - const layoutOrPageRequest = connection.dependency.request const isAbsoluteRequest = layoutOrPageRequest[0] === '/' // Next.js internals are put into a separate entry. @@ -180,11 +180,11 @@ export class FlightClientEntryPlugin { } collectClientComponentsAndCSSForDependency({ - context, + layoutOrPageRequest, compilation, dependency, }: { - context: string + layoutOrPageRequest: string compilation: any dependency: any /* Dependency */ }): [ClientComponentImports, CssImports] { @@ -223,11 +223,11 @@ export class FlightClientEntryPlugin { if (!visitedBySegment[segmentPath]) { visitedBySegment[segmentPath] = new Set() } - if (!modRequest || visitedBySegment[segmentPath].has(modRequest)) return + if (!modRequest || visitedBySegment[segmentPath].has(modRequest)) { + return + } visitedBySegment[segmentPath].add(modRequest) - const isLayoutOrPage = - /\/(layout|page)(\.server|\.client)?\.(js|ts)x?$/.test(modRequest) const isCSS = regexCSS.test(modRequest) const isClientComponent = clientComponentRegex.test(modRequest) @@ -242,21 +242,6 @@ export class FlightClientEntryPlugin { return } - if (isLayoutOrPage) { - segmentPath = path - .relative(path.join(context, 'app'), path.dirname(modRequest)) - .replace(/\\/g, '/') - - if (segmentPath !== '') { - segmentPath = '/' + segmentPath - } - - // If it's a page, add an extra '/' to the segments - if (/\/(page)(\.server|\.client)?\.(js|ts)x?$/.test(modRequest)) { - segmentPath += '/' - } - } - compilation.moduleGraph .getOutgoingConnections(mod) .forEach((connection: any) => { @@ -265,7 +250,7 @@ export class FlightClientEntryPlugin { } // Traverse the module graph to find all client components. - filterClientComponents(dependency, '') + filterClientComponents(dependency, layoutOrPageRequest) return [clientComponentImports, serverCSSImports] } From 5c016a7675deca437dd1622eee81a0a5b622448e Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 15 Aug 2022 17:39:18 +0200 Subject: [PATCH 05/12] Clean up variable passing --- .../plugins/flight-client-entry-plugin.ts | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index ea44c0ecd45e..3ca0f90a3ee2 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -195,10 +195,7 @@ export class FlightClientEntryPlugin { const clientComponentImports: ClientComponentImports = [] const serverCSSImports: CssImports = {} - const filterClientComponents = ( - dependencyToFilter: any, - segmentPath: string - ): void => { + const filterClientComponents = (dependencyToFilter: any): void => { const mod: webpack5.NormalModule = compilation.moduleGraph.getResolvedModule(dependencyToFilter) if (!mod) return @@ -220,20 +217,24 @@ export class FlightClientEntryPlugin { : mod.resourceResolveData?.path // Ensure module is not walked again if it's already been visited - if (!visitedBySegment[segmentPath]) { - visitedBySegment[segmentPath] = new Set() + if (!visitedBySegment[layoutOrPageRequest]) { + visitedBySegment[layoutOrPageRequest] = new Set() } - if (!modRequest || visitedBySegment[segmentPath].has(modRequest)) { + if ( + !modRequest || + visitedBySegment[layoutOrPageRequest].has(modRequest) + ) { return } - visitedBySegment[segmentPath].add(modRequest) + visitedBySegment[layoutOrPageRequest].add(modRequest) const isCSS = regexCSS.test(modRequest) const isClientComponent = clientComponentRegex.test(modRequest) if (isCSS) { - serverCSSImports[segmentPath] = serverCSSImports[segmentPath] || [] - serverCSSImports[segmentPath].push(modRequest) + serverCSSImports[layoutOrPageRequest] = + serverCSSImports[layoutOrPageRequest] || [] + serverCSSImports[layoutOrPageRequest].push(modRequest) } // Check if request is for css file. @@ -245,12 +246,12 @@ export class FlightClientEntryPlugin { compilation.moduleGraph .getOutgoingConnections(mod) .forEach((connection: any) => { - filterClientComponents(connection.dependency, segmentPath) + filterClientComponents(connection.dependency) }) } // Traverse the module graph to find all client components. - filterClientComponents(dependency, layoutOrPageRequest) + filterClientComponents(dependency) return [clientComponentImports, serverCSSImports] } From 3a977bf8cf4d734895c88070488a48341770194b Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 15 Aug 2022 17:57:46 +0200 Subject: [PATCH 06/12] Add missing type for FlightCSSManifest --- packages/next/server/app-render.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx index af038ae9d27e..de2403269843 100644 --- a/packages/next/server/app-render.tsx +++ b/packages/next/server/app-render.tsx @@ -37,8 +37,8 @@ const ReactDOMServer = shouldUseReactRoot export type RenderOptsPartial = { err?: Error | null dev?: boolean - serverComponentManifest?: any - serverCSSManifest?: any + serverComponentManifest?: FlightManifest + serverCSSManifest?: FlightCSSManifest supportsDynamicHTML?: boolean runtime?: ServerRuntime serverComponents?: boolean @@ -66,6 +66,7 @@ const enum RecordStatus { type Record = { status: RecordStatus + // Could hold the existing promise or the resolved Promise value: any } @@ -603,7 +604,7 @@ export async function renderToHTMLOrFlight( parentParams: { [key: string]: any } rootLayoutIncluded?: boolean firstItem?: boolean - serverStylesheets: { [file: string]: string[] } + serverStylesheets: FlightCSSManifest // parentSegmentPath: string }): Promise<{ Component: React.ComponentType }> => { const Loading = loading ? await interopDefault(loading()) : undefined @@ -910,7 +911,7 @@ export async function renderToHTMLOrFlight( loaderTree: loaderTreeToFilter, parentParams: currentParams, firstItem: true, - serverStylesheets: serverCSSManifest, + serverStylesheets: serverCSSManifest || {}, // parentSegmentPath: '', } ) @@ -962,7 +963,7 @@ export async function renderToHTMLOrFlight( // Get all the server imported styles. const [mappedServerCSSManifest, initialStylesheets] = getCssInlinedLinkTags( serverComponentManifest, - serverCSSManifest + serverCSSManifest || {} ) // Create full component tree from root to leaf. From 9250d35539f6a16dc66d6b3901a77133196cf6b7 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 16 Aug 2022 12:04:31 +0100 Subject: [PATCH 07/12] Update --- .../next/build/webpack/plugins/flight-client-entry-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index 777b4f8a5e06..17952d5c142b 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -88,7 +88,7 @@ export class FlightClientEntryPlugin { } // TODO-APP: create client-side entrypoint per layout/page. - const entryModule: webpack5.NormalModule = + const entryModule: webpack.NormalModule = compilation.moduleGraph.getResolvedModule(entryDependency) const internalClientComponentEntryImports = new Set< From b0c55672d81ad5560089c030ab9bc08b1c8d2359 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 16 Aug 2022 12:05:24 +0100 Subject: [PATCH 08/12] Remove comment --- .../next/build/webpack/plugins/flight-client-entry-plugin.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index 17952d5c142b..8a175fcd6666 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -87,7 +87,6 @@ export class FlightClientEntryPlugin { continue } - // TODO-APP: create client-side entrypoint per layout/page. const entryModule: webpack.NormalModule = compilation.moduleGraph.getResolvedModule(entryDependency) From 55b724b8cb2876b08ad2bede1445b53f66b04f94 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 16 Aug 2022 15:27:10 +0100 Subject: [PATCH 09/12] Ensure stylesheets are collected per layout --- .../build/webpack/loaders/next-app-loader.ts | 4 +- packages/next/server/app-render.tsx | 54 ++++++++++++++----- 2 files changed, 44 insertions(+), 14 deletions(-) diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts index 63198f56e2f6..633eedbdc95a 100644 --- a/packages/next/build/webpack/loaders/next-app-loader.ts +++ b/packages/next/build/webpack/loaders/next-app-loader.ts @@ -24,8 +24,9 @@ async function createTreeCodeFromPath({ // First item in the list is the page which can't have layouts by itself if (i === segments.length - 1) { + const resolvedPagePath = await resolve(pagePath) // Use '' for segment as it's the page. There can't be a segment called '' so this is the safest way to add it. - tree = `['', {}, {page: () => require('${await resolve(pagePath)}')}]` + tree = `['', {}, {filePath: '${resolvedPagePath}', page: () => require('${resolvedPagePath}')}]` continue } @@ -46,6 +47,7 @@ async function createTreeCodeFromPath({ children ? `children: ${children},` : '' } }, { + filePath: '${resolvedLayoutPath}', ${ resolvedLayoutPath ? `layout: () => require('${resolvedLayoutPath}'),` diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx index de2403269843..421b88a3090a 100644 --- a/packages/next/server/app-render.tsx +++ b/packages/next/server/app-render.tsx @@ -285,6 +285,7 @@ type LoaderTree = [ segment: string, parallelRoutes: { [parallelRouterKey: string]: LoaderTree }, components: { + filePath: string layout?: () => any loading?: () => any page?: () => any @@ -378,9 +379,34 @@ function getSegmentParam(segment: string): { * Get inline tags based on server CSS manifest. Only used when rendering to HTML. */ function getCssInlinedLinkTags( + serverComponentManifest: FlightManifest, + serverCSSManifest: FlightCSSManifest, + filePath: string +): string[] { + const layoutOrPageCss = serverCSSManifest[filePath] + + if (!layoutOrPageCss) { + return [] + } + + const chunks = new Set() + + for (const css of layoutOrPageCss) { + for (const chunk of serverComponentManifest[css].default.chunks) { + chunks.add(chunk) + } + } + + return [...chunks] +} + +/** + * Get inline tags based on server CSS manifest. Only used when rendering to HTML. + */ +function getAllCssInlinedLinkTags( serverComponentManifest: FlightManifest, serverCSSManifest: FlightCSSManifest -) { +): string[] { const chunks: { [file: string]: string[] } = {} // APP-TODO: Remove this once we have CSS injections at each level. @@ -400,7 +426,7 @@ function getCssInlinedLinkTags( } } - return [chunks, [...allChunks]] as [{ [file: string]: string[] }, string[]] + return [...allChunks] } export async function renderToHTMLOrFlight( @@ -592,11 +618,14 @@ export async function renderToHTMLOrFlight( */ const createComponentTree = async ({ createSegmentPath, - loaderTree: [segment, parallelRoutes, { layout, loading, page }], + loaderTree: [ + segment, + parallelRoutes, + { /* filePath, */ layout, loading, page }, + ], parentParams, firstItem, rootLayoutIncluded, - serverStylesheets, }: // parentSegmentPath, { createSegmentPath: CreateSegmentPath @@ -604,9 +633,14 @@ export async function renderToHTMLOrFlight( parentParams: { [key: string]: any } rootLayoutIncluded?: boolean firstItem?: boolean - serverStylesheets: FlightCSSManifest // parentSegmentPath: string }): Promise<{ Component: React.ComponentType }> => { + // TODO-APP: enable stylesheet per layout/page + // const stylesheets = getCssInlinedLinkTags( + // serverComponentManifest, + // serverCSSManifest!, + // filePath + // ) const Loading = loading ? await interopDefault(loading()) : undefined const isLayout = typeof layout !== 'undefined' const isPage = typeof page !== 'undefined' @@ -625,10 +659,6 @@ export async function renderToHTMLOrFlight( const rootLayoutIncludedAtThisLevelOrAbove = rootLayoutIncluded || rootLayoutAtThisLevel - // const cssSegmentPath = - // !parentSegmentPath && !segment ? '' : parentSegmentPath + '/' + segment - // const stylesheets = serverStylesheets[cssSegmentPath] - /** * Check if the current layout/page is a client component */ @@ -689,7 +719,6 @@ export async function renderToHTMLOrFlight( loaderTree: parallelRoutes[parallelRouteKey], parentParams: currentParams, rootLayoutIncluded: rootLayoutIncludedAtThisLevelOrAbove, - serverStylesheets, // parentSegmentPath: cssSegmentPath, }) @@ -911,7 +940,6 @@ export async function renderToHTMLOrFlight( loaderTree: loaderTreeToFilter, parentParams: currentParams, firstItem: true, - serverStylesheets: serverCSSManifest || {}, // parentSegmentPath: '', } ) @@ -960,8 +988,9 @@ export async function renderToHTMLOrFlight( // Below this line is handling for rendering to HTML. + console.log({ serverCSSManifest }) // Get all the server imported styles. - const [mappedServerCSSManifest, initialStylesheets] = getCssInlinedLinkTags( + const initialStylesheets = getAllCssInlinedLinkTags( serverComponentManifest, serverCSSManifest || {} ) @@ -972,7 +1001,6 @@ export async function renderToHTMLOrFlight( loaderTree: loaderTree, parentParams: {}, firstItem: true, - serverStylesheets: mappedServerCSSManifest, // parentSegmentPath: '', }) From 4426709ee02d82138a594343bd1378aae142b494 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 16 Aug 2022 17:18:42 +0100 Subject: [PATCH 10/12] Fix ts error --- .../next/build/webpack/plugins/flight-client-entry-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index 8a175fcd6666..cd9a10fb2ab6 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -194,7 +194,7 @@ export class FlightClientEntryPlugin { const serverCSSImports: CssImports = {} const filterClientComponents = (dependencyToFilter: any): void => { - const mod: webpack5.NormalModule = + const mod: webpack.NormalModule = compilation.moduleGraph.getResolvedModule(dependencyToFilter) if (!mod) return From 23ac4546e8e0188b58ef59afd266363e4f8757ff Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 16 Aug 2022 17:20:27 +0100 Subject: [PATCH 11/12] Fix lint error --- packages/next/server/app-render.tsx | 42 ++++++++++++++--------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx index 421b88a3090a..bbc336182937 100644 --- a/packages/next/server/app-render.tsx +++ b/packages/next/server/app-render.tsx @@ -378,27 +378,27 @@ function getSegmentParam(segment: string): { /** * Get inline tags based on server CSS manifest. Only used when rendering to HTML. */ -function getCssInlinedLinkTags( - serverComponentManifest: FlightManifest, - serverCSSManifest: FlightCSSManifest, - filePath: string -): string[] { - const layoutOrPageCss = serverCSSManifest[filePath] - - if (!layoutOrPageCss) { - return [] - } - - const chunks = new Set() - - for (const css of layoutOrPageCss) { - for (const chunk of serverComponentManifest[css].default.chunks) { - chunks.add(chunk) - } - } - - return [...chunks] -} +// function getCssInlinedLinkTags( +// serverComponentManifest: FlightManifest, +// serverCSSManifest: FlightCSSManifest, +// filePath: string +// ): string[] { +// const layoutOrPageCss = serverCSSManifest[filePath] + +// if (!layoutOrPageCss) { +// return [] +// } + +// const chunks = new Set() + +// for (const css of layoutOrPageCss) { +// for (const chunk of serverComponentManifest[css].default.chunks) { +// chunks.add(chunk) +// } +// } + +// return [...chunks] +// } /** * Get inline tags based on server CSS manifest. Only used when rendering to HTML. From 2b692c75976b4ce52ce5fecd5412676af38f223e Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 16 Aug 2022 17:32:11 +0100 Subject: [PATCH 12/12] Update packages/next/server/app-render.tsx Co-authored-by: Jiachi Liu --- packages/next/server/app-render.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx index bbc336182937..6ae16e35cc0b 100644 --- a/packages/next/server/app-render.tsx +++ b/packages/next/server/app-render.tsx @@ -988,7 +988,6 @@ export async function renderToHTMLOrFlight( // Below this line is handling for rendering to HTML. - console.log({ serverCSSManifest }) // Get all the server imported styles. const initialStylesheets = getAllCssInlinedLinkTags( serverComponentManifest,