From 7a1164406f08597db9194d89d28138819c3e9c4f Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Wed, 26 Oct 2022 15:38:13 +0200 Subject: [PATCH] add rsc chunk --- packages/gatsby/cache-dir/rsc.js | 1 + packages/gatsby/src/utils/webpack.config.js | 2 +- .../webpack/plugins/partial-hydration.ts | 88 ++++++++++++------- 3 files changed, 56 insertions(+), 35 deletions(-) create mode 100644 packages/gatsby/cache-dir/rsc.js diff --git a/packages/gatsby/cache-dir/rsc.js b/packages/gatsby/cache-dir/rsc.js new file mode 100644 index 0000000000000..01d9ce928693e --- /dev/null +++ b/packages/gatsby/cache-dir/rsc.js @@ -0,0 +1 @@ +// dummy? diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 3064456db02a4..14206ba7860ea 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -192,6 +192,7 @@ module.exports = async ( return hasES6ModuleSupport(directory) ? { app: directoryPath(`.cache/production-app`), + rsc: directoryPath(`.cache/rsc`), } : { polyfill: directoryPath(`.cache/polyfill-entry`), @@ -713,7 +714,6 @@ module.exports = async ( } config.optimization = { - // concatenateModules: false, runtimeChunk: { name: `webpack-runtime`, }, diff --git a/packages/gatsby/src/utils/webpack/plugins/partial-hydration.ts b/packages/gatsby/src/utils/webpack/plugins/partial-hydration.ts index bb2ff25ec8650..5c223276c2103 100644 --- a/packages/gatsby/src/utils/webpack/plugins/partial-hydration.ts +++ b/packages/gatsby/src/utils/webpack/plugins/partial-hydration.ts @@ -83,11 +83,13 @@ export class PartialHydrationPlugin { } _generateManifest( - _chunkGroups: webpack.Compilation["chunkGroups"], - moduleGraph: webpack.Compilation["moduleGraph"], - chunkGraph: webpack.Compilation["chunkGraph"], + compilation: Compilation, rootContext: string ): Record> { + const _chunkGroups = compilation.chunkGroups + const moduleGraph = compilation.moduleGraph + const chunkGraph = compilation.chunkGraph + const json: Record> = {} // @see https://github.com/facebook/react/blob/3f70e68cea8d2ed0f53d35420105ae20e22ce428/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js#L220-L252 const recordModule = ( @@ -96,13 +98,6 @@ export class PartialHydrationPlugin { exports: Array<{ originalExport: string; resolvedExport: string }>, chunkIds: Array ): void => { - if ( - // @ts-ignore - types are incorrect - !module.resource - ) { - return - } - const normalModule: NormalModule = module as NormalModule const moduleExports: Record = {} @@ -114,17 +109,29 @@ export class PartialHydrationPlugin { } }) - const normalizedModuleKey = createNormalizedModuleKey( - normalModule.resource, - rootContext - ) + if (normalModule.modules) { + normalModule.modules.forEach(mod => { + const normalizedModuleKey = createNormalizedModuleKey( + mod.resource, + rootContext + ) - if (normalizedModuleKey !== undefined) { - json[normalizedModuleKey] = moduleExports + if (normalizedModuleKey !== undefined) { + json[normalizedModuleKey] = moduleExports + } + }) + } else { + const normalizedModuleKey = createNormalizedModuleKey( + normalModule.resource, + rootContext + ) + + if (normalizedModuleKey !== undefined) { + json[normalizedModuleKey] = moduleExports + } } } - debugger const toRecord: Map< webpack.Module, Map< @@ -167,7 +174,30 @@ export class PartialHydrationPlugin { } } - for (const clientModule of this._clientModules) { + const newClientModules = new Set() + compilation.chunkGroups.forEach(chunkGroup => { + chunkGroup.chunks.forEach((chunk: webpack.Chunk) => { + const chunkModules = compilation.chunkGraph.getChunkModulesIterable( + chunk + // TODO: Update type so that it doesn't have to be cast. + ) as Iterable + for (const mod of chunkModules) { + if (mod.buildInfo.rsc) { + newClientModules.add(mod) + } + + if (mod.modules) { + for (const subMod of mod.modules) { + if (subMod.buildInfo.rsc) { + newClientModules.add(mod) + } + } + } + } + }) + }) + + for (const clientModule of newClientModules) { stuff(clientModule) const incomingConnections = @@ -185,15 +215,12 @@ export class PartialHydrationPlugin { } console.log({ toRecord }) + debugger for (const [originalModule, resolvedMap] of toRecord) { for (const [resolvedModule, exports] of resolvedMap) { const chunkIds: Set = new Set() - if (originalModule?.request?.includes(`demo`)) { - debugger - } - const chunks = chunkGraph.getModuleChunksIterable(resolvedModule) for (const chunk of chunks) { @@ -230,23 +257,17 @@ export class PartialHydrationPlugin { return module.userRequest }) .join(`,`)}!` - console.log(clientSSRLoader) // if (clientSSRLoader !== this._handledClientSSRLoader) { const clientComponentEntryDep = webpack.EntryPlugin.createDependency( clientSSRLoader, { - name: `app`, + name: `rsc`, } ) - const test = await this.addEntry(compilation, ``, clientComponentEntryDep, { - name: `app`, + await this.addEntry(compilation, ``, clientComponentEntryDep, { + name: `rsc`, }) - console.log(`after`, clientSSRLoader) - // if (test) { - // this._handledClientSSRLoader = clientSSRLoader - // } - // } } addEntry( @@ -357,6 +378,7 @@ export class PartialHydrationPlugin { const module = parser.state.module if (hasClientExportDirective) { + module.buildInfo.rsc = true this._clientModules.add(module) // if (entryModule) { @@ -473,9 +495,7 @@ export class PartialHydrationPlugin { }, () => { const manifest = this._generateManifest( - compilation.chunkGroups, - compilation.moduleGraph, - compilation.chunkGraph, + compilation, compilation.options.context as string )