Move the Webpack manifest config to one level deeper (#26083)

This frees up the Webpack manifest to contain a `serverManifest` part
too.

@shuding
This commit is contained in:
Sebastian Markbåge 2023-01-31 23:33:31 -05:00 committed by GitHub
parent 977bccd24d
commit 8c234c0de9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 22 additions and 19 deletions

View File

@ -20,10 +20,9 @@ module.exports = function (req, res) {
const App = m.default.default || m.default;
res.setHeader('Access-Control-Allow-Origin', '*');
const moduleMap = JSON.parse(data);
const {pipe} = renderToPipeableStream(
React.createElement(App),
moduleMap
);
const {pipe} = renderToPipeableStream(React.createElement(App), {
clientManifest: moduleMap,
});
pipe(res);
}
);

View File

@ -27,12 +27,12 @@ type Options = {
function renderToReadableStream(
model: ReactModel,
webpackMap: BundlerConfig,
webpackMaps: BundlerConfig,
options?: Options,
): ReadableStream {
const request = createRequest(
model,
webpackMap,
webpackMaps,
options ? options.onError : undefined,
options ? options.context : undefined,
options ? options.identifierPrefix : undefined,

View File

@ -37,12 +37,12 @@ type PipeableStream = {
function renderToPipeableStream(
model: ReactModel,
webpackMap: BundlerConfig,
webpackMaps: BundlerConfig,
options?: Options,
): PipeableStream {
const request = createRequest(
model,
webpackMap,
webpackMaps,
options ? options.onError : undefined,
options ? options.context : undefined,
options ? options.identifierPrefix : undefined,

View File

@ -13,7 +13,9 @@ type WebpackMap = {
},
};
export type BundlerConfig = WebpackMap;
export type BundlerConfig = {
clientManifest: WebpackMap,
};
// eslint-disable-next-line no-unused-vars
export type ClientReference<T> = {
@ -54,7 +56,7 @@ export function resolveModuleMetaData<T>(
clientReference: ClientReference<T>,
): ModuleMetaData {
const resolvedModuleData =
config[clientReference.filepath][clientReference.name];
config.clientManifest[clientReference.filepath][clientReference.name];
if (clientReference.async) {
return {
id: resolvedModuleData.id,

View File

@ -848,8 +848,8 @@ describe('ReactFlightDOM', () => {
});
// We simulate a bug in the Webpack bundler which causes an error on the server.
for (const id in webpackMap) {
Object.defineProperty(webpackMap, id, {
for (const id in webpackMap.clientManifest) {
Object.defineProperty(webpackMap.clientManifest, id, {
get: () => {
throw new Error('bug in the bundler');
},

View File

@ -473,12 +473,14 @@ describe('ReactFlightDOMBrowser', () => {
const ClientComponentOnTheServer = clientExports(ClientComponent);
// In the SSR bundle this module won't exist. We simulate this by deleting it.
const clientId = webpackMap[ClientComponentOnTheClient.filepath]['*'].id;
const clientId =
webpackMap.clientManifest[ClientComponentOnTheClient.filepath]['*'].id;
delete webpackModules[clientId];
// Instead, we have to provide a translation from the client meta data to the SSR
// meta data.
const ssrMetaData = webpackMap[ClientComponentOnTheServer.filepath]['*'];
const ssrMetaData =
webpackMap.clientManifest[ClientComponentOnTheServer.filepath]['*'];
const translationMap = {
[clientId]: {
'*': ssrMetaData,

View File

@ -13,7 +13,7 @@ const Module = require('module');
let webpackModuleIdx = 0;
const webpackModules = {};
const webpackErroredModules = {};
const webpackMap = {};
const webpackMap = {clientManifest: {}};
global.__webpack_require__ = function (id) {
if (webpackErroredModules[id]) {
throw webpackErroredModules[id];
@ -44,7 +44,7 @@ exports.clientModuleError = function clientModuleError(moduleError) {
const idx = '' + webpackModuleIdx++;
webpackErroredModules[idx] = moduleError;
const path = url.pathToFileURL(idx).href;
webpackMap[path] = {
webpackMap.clientManifest[path] = {
'': {
id: idx,
chunks: [],
@ -65,7 +65,7 @@ exports.clientExports = function clientExports(moduleExports) {
const idx = '' + webpackModuleIdx++;
webpackModules[idx] = moduleExports;
const path = url.pathToFileURL(idx).href;
webpackMap[path] = {
webpackMap.clientManifest[path] = {
'': {
id: idx,
chunks: [],
@ -81,7 +81,7 @@ exports.clientExports = function clientExports(moduleExports) {
moduleExports.then(
asyncModuleExports => {
for (const name in asyncModuleExports) {
webpackMap[path][name] = {
webpackMap.clientManifest[path][name] = {
id: idx,
chunks: [],
name: name,
@ -92,7 +92,7 @@ exports.clientExports = function clientExports(moduleExports) {
);
}
for (const name in moduleExports) {
webpackMap[path][name] = {
webpackMap.clientManifest[path][name] = {
id: idx,
chunks: [],
name: name,