diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html index f8d93ae07872c..049e27fec540c 100644 --- a/fixtures/flight-browser/index.html +++ b/fixtures/flight-browser/index.html @@ -55,12 +55,12 @@

Flight Example

return 'Title'; } - let model = { + let value = { title: , content: <HTML />, }; - let stream = ReactServerDOMServer.renderToReadableStream(model); + let stream = ReactServerDOMServer.renderToReadableStream(value); let response = new Response(stream, { headers: {'Content-Type': 'text/html'}, }); @@ -83,12 +83,12 @@ <h1>Flight Example</h1> } function Shell({ data }) { - let model = React.use(data); + let value = React.use(data); return <div> <Suspense fallback="..."> - <h1>{model.title}</h1> + <h1>{value.title}</h1> </Suspense> - {model.content} + {value.content} </div>; } diff --git a/fixtures/flight/server/global.js b/fixtures/flight/server/global.js index a2f5697f4333e..7335f164db80c 100644 --- a/fixtures/flight/server/global.js +++ b/fixtures/flight/server/global.js @@ -122,8 +122,8 @@ app.all('/', async function (req, res, next) { virtualFs = fs; buildPath = path.join(__dirname, '../build/'); } - // Read the module map from the virtual file system. - const moduleMap = JSON.parse( + // Read the SSR manifest from the virtual file system. + const ssrManifest = JSON.parse( await virtualFs.readFile( path.join(buildPath, 'react-ssr-manifest.json'), 'utf8' @@ -140,7 +140,7 @@ app.all('/', async function (req, res, next) { // For HTML, we're a "client" emulator that runs the client code, // so we start by consuming the RSC payload. This needs a module // map that reverse engineers the client-side path to the SSR path. - const root = await createFromNodeStream(rscResponse, moduleMap); + const root = await createFromNodeStream(rscResponse, ssrManifest); // Render it into HTML by resolving the client components res.set('Content-type', 'text/html'); const {pipe} = renderToPipeableStream(root, { diff --git a/fixtures/flight/server/region.js b/fixtures/flight/server/region.js index 3481af3bf802d..813cac57f23f5 100644 --- a/fixtures/flight/server/region.js +++ b/fixtures/flight/server/region.js @@ -52,11 +52,11 @@ app.get('/', async function (req, res) { // const m = require('../src/App.js'); const m = await import('../src/App.js'); - let moduleMap; + let clientManifest; let mainCSSChunks; if (process.env.NODE_ENV === 'development') { - // Read the module map from the HMR server in development. - moduleMap = await ( + // Read the client manifest from the HMR server in development. + clientManifest = await ( await fetch('http://localhost:3000/react-client-manifest.json') ).json(); mainCSSChunks = ( @@ -65,8 +65,8 @@ app.get('/', async function (req, res) { ).json() ).main.css; } else { - // Read the module map from the static build in production. - moduleMap = JSON.parse( + // Read the client manifest from the static build in production. + clientManifest = JSON.parse( await readFile( path.resolve(__dirname, `../build/react-client-manifest.json`), 'utf8' @@ -91,7 +91,7 @@ app.get('/', async function (req, res) { ), React.createElement(App), ]; - const {pipe} = renderToPipeableStream(root, moduleMap); + const {pipe} = renderToPipeableStream(root, clientManifest); pipe(res); }); diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index cded0a689a729..cf6aac7a030ee 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -13,7 +13,7 @@ import type {LazyComponent} from 'react/src/ReactLazy'; import type { ClientReference, ClientReferenceMetadata, - UninitializedModel, + UninitializedValue, Response, SSRManifest, } from './ReactFlightClientHostConfig'; @@ -22,7 +22,7 @@ import { resolveClientReference, preloadModule, requireModule, - parseModel, + parseJSONValue, } from './ReactFlightClientHostConfig'; import {knownServerReferences} from './ReactFlightServerReferenceRegistry'; @@ -43,7 +43,7 @@ export type JSONValue = const PENDING = 'pending'; const BLOCKED = 'blocked'; -const RESOLVED_MODEL = 'resolved_model'; +const RESOLVED_JSON_VALUE = 'resolved_json_value'; const RESOLVED_MODULE = 'resolved_module'; const INITIALIZED = 'fulfilled'; const ERRORED = 'rejected'; @@ -62,9 +62,9 @@ type BlockedChunk<T> = { _response: Response, then(resolve: (T) => mixed, reject: (mixed) => mixed): void, }; -type ResolvedModelChunk<T> = { - status: 'resolved_model', - value: UninitializedModel, +type ResolvedJSONValueChunk<T> = { + status: 'resolved_json_value', + value: UninitializedValue, reason: null, _response: Response, then(resolve: (T) => mixed, reject: (mixed) => mixed): void, @@ -93,7 +93,7 @@ type ErroredChunk<T> = { type SomeChunk<T> = | PendingChunk<T> | BlockedChunk<T> - | ResolvedModelChunk<T> + | ResolvedJSONValueChunk<T> | ResolvedModuleChunk<T> | InitializedChunk<T> | ErroredChunk<T>; @@ -117,8 +117,8 @@ Chunk.prototype.then = function <T>( // If we have resolved content, we try to initialize it first which // might put us back into one of the other states. switch (chunk.status) { - case RESOLVED_MODEL: - initializeModelChunk(chunk); + case RESOLVED_JSON_VALUE: + initializeJSONValueChunk(chunk); break; case RESOLVED_MODULE: initializeModuleChunk(chunk); @@ -151,7 +151,7 @@ Chunk.prototype.then = function <T>( }; export type ResponseBase = { - _bundlerConfig: SSRManifest, + _ssrManifest: SSRManifest, _callServer: CallServerCallback, _chunks: Map<number, SomeChunk<any>>, ... @@ -163,8 +163,8 @@ function readChunk<T>(chunk: SomeChunk<T>): T { // If we have resolved content, we try to initialize it first which // might put us back into one of the other states. switch (chunk.status) { - case RESOLVED_MODEL: - initializeModelChunk(chunk); + case RESOLVED_JSON_VALUE: + initializeJSONValueChunk(chunk); break; case RESOLVED_MODULE: initializeModuleChunk(chunk); @@ -249,12 +249,12 @@ function triggerErrorOnChunk<T>(chunk: SomeChunk<T>, error: mixed): void { } } -function createResolvedModelChunk<T>( +function createResolvedJSONValueChunk<T>( response: Response, - value: UninitializedModel, -): ResolvedModelChunk<T> { + value: UninitializedValue, +): ResolvedJSONValueChunk<T> { // $FlowFixMe Flow doesn't support functions as constructors - return new Chunk(RESOLVED_MODEL, value, null, response); + return new Chunk(RESOLVED_JSON_VALUE, value, null, response); } function createResolvedModuleChunk<T>( @@ -265,9 +265,9 @@ function createResolvedModuleChunk<T>( return new Chunk(RESOLVED_MODULE, value, null, response); } -function resolveModelChunk<T>( +function resolveJSONValueChunk<T>( chunk: SomeChunk<T>, - value: UninitializedModel, + value: UninitializedValue, ): void { if (chunk.status !== PENDING) { // We already resolved. We didn't expect to see this. @@ -275,14 +275,14 @@ function resolveModelChunk<T>( } const resolveListeners = chunk.value; const rejectListeners = chunk.reason; - const resolvedChunk: ResolvedModelChunk<T> = (chunk: any); - resolvedChunk.status = RESOLVED_MODEL; + const resolvedChunk: ResolvedJSONValueChunk<T> = (chunk: any); + resolvedChunk.status = RESOLVED_JSON_VALUE; resolvedChunk.value = value; if (resolveListeners !== null) { // This is unfortunate that we're reading this eagerly if // we already have listeners attached since they might no // longer be rendered or might not be the highest pri. - initializeModelChunk(resolvedChunk); + initializeJSONValueChunk(resolvedChunk); // The status might have changed after initialization. wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners); } @@ -307,20 +307,20 @@ function resolveModuleChunk<T>( } } -let initializingChunk: ResolvedModelChunk<any> = (null: any); -let initializingChunkBlockedModel: null | {deps: number, value: any} = null; -function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void { +let initializingChunk: ResolvedJSONValueChunk<any> = (null: any); +let initializingChunkBlockedValue: null | {deps: number, value: any} = null; +function initializeJSONValueChunk<T>(chunk: ResolvedJSONValueChunk<T>): void { const prevChunk = initializingChunk; - const prevBlocked = initializingChunkBlockedModel; + const prevBlocked = initializingChunkBlockedValue; initializingChunk = chunk; - initializingChunkBlockedModel = null; + initializingChunkBlockedValue = null; try { - const value: T = parseModel(chunk._response, chunk.value); + const value: T = parseJSONValue(chunk._response, chunk.value); if ( - initializingChunkBlockedModel !== null && - initializingChunkBlockedModel.deps > 0 + initializingChunkBlockedValue !== null && + initializingChunkBlockedValue.deps > 0 ) { - initializingChunkBlockedModel.value = value; + initializingChunkBlockedValue.value = value; // We discovered new dependencies on modules that are not yet resolved. // We have to go the BLOCKED state until they're resolved. const blockedChunk: BlockedChunk<T> = (chunk: any); @@ -338,7 +338,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void { erroredChunk.reason = error; } finally { initializingChunk = prevChunk; - initializingChunkBlockedModel = prevBlocked; + initializingChunkBlockedValue = prevBlocked; } } @@ -436,17 +436,17 @@ function getChunk(response: Response, id: number): SomeChunk<any> { return chunk; } -function createModelResolver<T>( +function createValueResolver<T>( chunk: SomeChunk<T>, parentObject: Object, key: string, ): (value: any) => void { let blocked; - if (initializingChunkBlockedModel) { - blocked = initializingChunkBlockedModel; + if (initializingChunkBlockedValue) { + blocked = initializingChunkBlockedValue; blocked.deps++; } else { - blocked = initializingChunkBlockedModel = { + blocked = initializingChunkBlockedValue = { deps: 1, value: null, }; @@ -469,7 +469,7 @@ function createModelResolver<T>( }; } -function createModelReject<T>(chunk: SomeChunk<T>): (error: mixed) => void { +function createValueReject<T>(chunk: SomeChunk<T>): (error: mixed) => void { return (error: mixed) => triggerErrorOnChunk(chunk, error); } @@ -501,7 +501,7 @@ function createServerReferenceProxy<A: Iterable<any>, T>( return proxy; } -export function parseModelString( +export function parseJSONValueString( response: Response, parentObject: Object, key: string, @@ -544,8 +544,8 @@ export function parseModelString( const id = parseInt(value.substring(2), 16); const chunk = getChunk(response, id); switch (chunk.status) { - case RESOLVED_MODEL: - initializeModelChunk(chunk); + case RESOLVED_JSON_VALUE: + initializeJSONValueChunk(chunk); break; } // The status might have changed after initialization. @@ -569,8 +569,8 @@ export function parseModelString( const id = parseInt(value.substring(1), 16); const chunk = getChunk(response, id); switch (chunk.status) { - case RESOLVED_MODEL: - initializeModelChunk(chunk); + case RESOLVED_JSON_VALUE: + initializeJSONValueChunk(chunk); break; case RESOLVED_MODULE: initializeModuleChunk(chunk); @@ -584,8 +584,8 @@ export function parseModelString( case BLOCKED: const parentChunk = initializingChunk; chunk.then( - createModelResolver(parentChunk, parentObject, key), - createModelReject(parentChunk), + createValueResolver(parentChunk, parentObject, key), + createValueReject(parentChunk), ); return null; default: @@ -597,7 +597,7 @@ export function parseModelString( return value; } -export function parseModelTuple( +export function parseJSONValueTuple( response: Response, value: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>, ): any { @@ -619,45 +619,45 @@ function missingCall() { } export function createResponse( - bundlerConfig: SSRManifest, + ssrManifest: SSRManifest, callServer: void | CallServerCallback, ): ResponseBase { const chunks: Map<number, SomeChunk<any>> = new Map(); const response = { - _bundlerConfig: bundlerConfig, + _ssrManifest: ssrManifest, _callServer: callServer !== undefined ? callServer : missingCall, _chunks: chunks, }; return response; } -export function resolveModel( +export function resolveJSONValue( response: Response, id: number, - model: UninitializedModel, + value: UninitializedValue, ): void { const chunks = response._chunks; const chunk = chunks.get(id); if (!chunk) { - chunks.set(id, createResolvedModelChunk(response, model)); + chunks.set(id, createResolvedJSONValueChunk(response, value)); } else { - resolveModelChunk(chunk, model); + resolveJSONValueChunk(chunk, value); } } export function resolveModule( response: Response, id: number, - model: UninitializedModel, + value: UninitializedValue, ): void { const chunks = response._chunks; const chunk = chunks.get(id); - const clientReferenceMetadata: ClientReferenceMetadata = parseModel( + const clientReferenceMetadata: ClientReferenceMetadata = parseJSONValue( response, - model, + value, ); const clientReference = resolveClientReference<$FlowFixMe>( - response._bundlerConfig, + response._ssrManifest, clientReferenceMetadata, ); diff --git a/packages/react-client/src/ReactFlightClientHostConfigStream.js b/packages/react-client/src/ReactFlightClientHostConfigStream.js index 1a06961a1109e..bc7922626fafb 100644 --- a/packages/react-client/src/ReactFlightClientHostConfigStream.js +++ b/packages/react-client/src/ReactFlightClientHostConfigStream.js @@ -16,8 +16,11 @@ export type Response = ResponseBase & { _stringDecoder: StringDecoder, }; -export type UninitializedModel = string; +export type UninitializedValue = string; -export function parseModel<T>(response: Response, json: UninitializedModel): T { - return JSON.parse(json, response._fromJSON); +export function parseJSONValue<T>( + response: Response, + value: UninitializedValue, +): T { + return JSON.parse(value, response._fromJSON); } diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js index 56772ec4a42b3..5b9ba2c20b279 100644 --- a/packages/react-client/src/ReactFlightClientStream.js +++ b/packages/react-client/src/ReactFlightClientStream.js @@ -13,12 +13,12 @@ import type {SSRManifest} from './ReactFlightClientHostConfig'; import { resolveModule, - resolveModel, + resolveJSONValue, resolveErrorProd, resolveErrorDev, createResponse as createResponseBase, - parseModelString, - parseModelTuple, + parseJSONValueString, + parseJSONValueTuple, } from './ReactFlightClient'; import { @@ -63,7 +63,7 @@ function processFullRow(response: Response, row: string): void { } default: { // We assume anything else is JSON. - resolveModel(response, id, row.substring(colon + 1)); + resolveJSONValue(response, id, row.substring(colon + 1)); return; } } @@ -111,23 +111,23 @@ function createFromJSONCallback(response: Response) { return function (key: string, value: JSONValue) { if (typeof value === 'string') { // We can't use .bind here because we need the "this" value. - return parseModelString(response, this, key, value); + return parseJSONValueString(response, this, key, value); } if (typeof value === 'object' && value !== null) { - return parseModelTuple(response, value); + return parseJSONValueTuple(response, value); } return value; }; } export function createResponse( - bundlerConfig: SSRManifest, + ssrManifest: SSRManifest, callServer: void | CallServerCallback, ): Response { // NOTE: CHECK THE COMPILER OUTPUT EACH TIME YOU CHANGE THIS. // It should be inlined to one object literal but minor changes can break it. const stringDecoder = supportsBinaryStreams ? createStringDecoder() : null; - const response: any = createResponseBase(bundlerConfig, callServer); + const response: any = createResponseBase(ssrManifest, callServer); response._partialRow = ''; if (supportsBinaryStreams) { response._stringDecoder = stringDecoder; diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index be92bb2d9eb01..c47b9d29d2cc9 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -126,8 +126,8 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render({ foo: <Foo />, }); - const model = await ReactNoopFlightClient.read(transport); - expect(model).toEqual({ + const value = await ReactNoopFlightClient.read(transport); + expect(value).toEqual({ foo: { bar: ( <div> @@ -154,15 +154,15 @@ describe('ReactFlight', () => { return <User greeting="Hello" name={firstName + ' ' + lastName} />; } - const model = { + const value = { greeting: <Greeting firstName="Seb" lastName="Smith" />, }; - const transport = ReactNoopFlightServer.render(model); + const transport = ReactNoopFlightServer.render(value); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - const greeting = rootModel.greeting; + const rootValue = await ReactNoopFlightClient.read(transport); + const greeting = rootValue.greeting; ReactNoop.render(greeting); }); @@ -186,9 +186,9 @@ describe('ReactFlight', () => { return <ItemList items={iterable} />; } - const model = <Items />; + const value = <Items />; - const transport = ReactNoopFlightServer.render(model); + const transport = ReactNoopFlightServer.render(value); await act(async () => { ReactNoop.render(await ReactNoopFlightClient.read(transport)); @@ -202,9 +202,9 @@ describe('ReactFlight', () => { return undefined; } - const model = <Undefined />; + const value = <Undefined />; - const transport = ReactNoopFlightServer.render(model); + const transport = ReactNoopFlightServer.render(value); await act(async () => { ReactNoop.render(await ReactNoopFlightClient.read(transport)); @@ -218,9 +218,9 @@ describe('ReactFlight', () => { return <React.Fragment />; } - const model = <Empty />; + const value = <Empty />; - const transport = ReactNoopFlightServer.render(model); + const transport = ReactNoopFlightServer.render(value); await act(async () => { ReactNoop.render(await ReactNoopFlightClient.read(transport)); @@ -258,15 +258,15 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render(<ServerComponent />); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(rootModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); await load(); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(rootModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput( <div> @@ -303,8 +303,8 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render(<ServerComponent />); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(rootModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); spyOnDevAndProd(console, 'error').mockImplementation(() => {}); @@ -340,15 +340,15 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render(<ServerComponent />); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(rootModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); await load(); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(rootModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput( <div> @@ -385,8 +385,8 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render(<ServerComponent />); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(rootModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); spyOnDevAndProd(console, 'error').mockImplementation(() => {}); @@ -423,15 +423,15 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render(<ServerComponent />); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(rootModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); await load(); await act(async () => { - const rootModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(rootModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput(<div>I am client</div>); }); @@ -1102,19 +1102,19 @@ describe('ReactFlight', () => { ); } - const model = { + const value = { foo: <Foo />, }; - const transport = ReactNoopFlightServer.render(model); + const transport = ReactNoopFlightServer.render(value); assertLog([]); await act(async () => { ServerContext._currentRenderer = null; ServerContext._currentRenderer2 = null; - const flightModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(flightModel.foo); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue.foo); }); assertLog(['ClientBar']); @@ -1139,8 +1139,8 @@ describe('ReactFlight', () => { }); await act(async () => { - const flightModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(flightModel); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(rootValue); }); expect(ReactNoop).toMatchRenderedOutput(<span>Override</span>); }); @@ -1194,10 +1194,10 @@ describe('ReactFlight', () => { ); } - function ClientApp({serverModel}) { + function ClientApp({rootValue}) { return ( <> - {serverModel} + {rootValue} <ClientBaz /> </> ); @@ -1220,8 +1220,8 @@ describe('ReactFlight', () => { Scheduler = require('scheduler'); await act(async () => { - const serverModel = await ReactNoopFlightClient.read(transport); - ReactNoop.render(<ClientApp serverModel={serverModel} />); + const rootValue = await ReactNoopFlightClient.read(transport); + ReactNoop.render(<ClientApp rootValue={rootValue} />); }); expect(ClientContext).not.toBe(ServerContext); diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js index 30810a69ebeb0..6a35502976b23 100644 --- a/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js +++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js @@ -38,8 +38,8 @@ export const requireModule = $$$hostConfig.requireModule; export opaque type Source = mixed; -export type UninitializedModel = string; -export const parseModel = $$$hostConfig.parseModel; +export type UninitializedValue = string; +export const parseJSONValue = $$$hostConfig.parseJSONValue; export opaque type StringDecoder = mixed; // eslint-disable-line no-undef diff --git a/packages/react-noop-renderer/src/ReactNoopFlightClient.js b/packages/react-noop-renderer/src/ReactNoopFlightClient.js index 5cb6e20e532f3..3991e60eff42c 100644 --- a/packages/react-noop-renderer/src/ReactNoopFlightClient.js +++ b/packages/react-noop-renderer/src/ReactNoopFlightClient.js @@ -22,15 +22,15 @@ type Source = Array<string>; const {createResponse, processStringChunk, getRoot, close} = ReactFlightClient({ supportsBinaryStreams: false, - resolveClientReference(bundlerConfig: null, idx: string) { + resolveClientReference(ssrManifest: null, idx: string) { return idx; }, preloadModule(idx: string) {}, requireModule(idx: string) { return readModule(idx); }, - parseModel(response: Response, json) { - return JSON.parse(json, response._fromJSON); + parseJSONValue(response: Response, value) { + return JSON.parse(value, response._fromJSON); }, }); diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js index 52794a6221c3f..7b9d5f20dd561 100644 --- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js +++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js @@ -54,14 +54,14 @@ const ReactNoopFlightServer = ReactFlightServer({ isServerReference(reference: Object): boolean { return reference.$$typeof === Symbol.for('react.server.reference'); }, - getClientReferenceKey(reference: Object): Object { - return reference; + getClientReferenceKey(clientReference: Object): Object { + return clientReference; }, resolveClientReferenceMetadata( - config: void, - reference: {$$typeof: symbol, value: any}, + clientManifest: void, + clientReference: {$$typeof: symbol, value: any}, ) { - return saveModule(reference.value); + return saveModule(clientReference.value); }, }); @@ -71,12 +71,12 @@ type Options = { identifierPrefix?: string, }; -function render(model: ReactClientValue, options?: Options): Destination { +function render(value: ReactClientValue, options?: Options): Destination { const destination: Destination = []; - const bundlerConfig = undefined; + const clientManifest = undefined; const request = ReactNoopFlightServer.createRequest( - model, - bundlerConfig, + value, + clientManifest, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined, diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js index 5bf775bfb5f26..22521c5b96725 100644 --- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js +++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js @@ -13,7 +13,7 @@ import type {Response} from 'react-client/src/ReactFlightClient'; import { createResponse, - resolveModel, + resolveJSONValue, resolveModule, resolveErrorDev, resolveErrorProd, @@ -26,7 +26,7 @@ export {createResponse, close, getRoot}; export function resolveRow(response: Response, chunk: RowEncoding): void { if (chunk[0] === 'O') { // $FlowFixMe unable to refine on array indices - resolveModel(response, chunk[1], chunk[2]); + resolveJSONValue(response, chunk[1], chunk[2]); } else if (chunk[0] === 'I') { // $FlowFixMe unable to refine on array indices resolveModule(response, chunk[1], chunk[2]); diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js index 8b831bbe88814..320e2fd6271da 100644 --- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js +++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js @@ -16,8 +16,8 @@ import type {ClientReferenceMetadata} from 'ReactFlightDOMRelayClientIntegration export type ClientReference<T> = JSResourceReference<T>; import { - parseModelString, - parseModelTuple, + parseJSONValueString, + parseJSONValueTuple, } from 'react-client/src/ReactFlightClient'; export { @@ -35,49 +35,49 @@ export type SSRManifest = null; export type ServerManifest = null; export type ServerReferenceId = string; -export type UninitializedModel = JSONValue; +export type UninitializedValue = JSONValue; export type Response = ResponseBase; export function resolveClientReference<T>( - bundlerConfig: SSRManifest, + ssrManifest: SSRManifest, metadata: ClientReferenceMetadata, ): ClientReference<T> { return resolveClientReferenceImpl(metadata); } export function resolveServerReference<T>( - bundlerConfig: ServerManifest, + serverManifest: ServerManifest, id: ServerReferenceId, ): ClientReference<T> { throw new Error('Not implemented.'); } -function parseModelRecursively( +function parseJSONValueRecursively( response: Response, parentObj: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>, key: string, value: JSONValue, ): $FlowFixMe { if (typeof value === 'string') { - return parseModelString(response, parentObj, key, value); + return parseJSONValueString(response, parentObj, key, value); } if (typeof value === 'object' && value !== null) { if (isArray(value)) { const parsedValue: Array<$FlowFixMe> = []; for (let i = 0; i < value.length; i++) { - (parsedValue: any)[i] = parseModelRecursively( + (parsedValue: any)[i] = parseJSONValueRecursively( response, value, '' + i, value[i], ); } - return parseModelTuple(response, parsedValue); + return parseJSONValueTuple(response, parsedValue); } else { const parsedValue = {}; for (const innerKey in value) { - (parsedValue: any)[innerKey] = parseModelRecursively( + (parsedValue: any)[innerKey] = parseJSONValueRecursively( response, value, innerKey, @@ -92,6 +92,9 @@ function parseModelRecursively( const dummy = {}; -export function parseModel<T>(response: Response, json: UninitializedModel): T { - return (parseModelRecursively(response, dummy, '', json): any); +export function parseJSONValue<T>( + response: Response, + value: UninitializedValue, +): T { + return (parseJSONValueRecursively(response, dummy, '', value): any); } diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js index 7ecd37cca3c69..94b3bd4e31232 100644 --- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js +++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js @@ -25,14 +25,14 @@ type Options = { }; function render( - model: ReactClientValue, + value: ReactClientValue, destination: Destination, - config: ClientManifest, + clientManifest: ClientManifest, options?: Options, ): void { const request = createRequest( - model, - config, + value, + clientManifest, options ? options.onError : undefined, undefined, // not currently set up to supply context overrides options ? options.identifierPrefix : undefined, diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js index 0910af6a01e1c..3436d86ebbe5a 100644 --- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js +++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js @@ -30,7 +30,7 @@ import type { ClientReferenceMetadata, } from 'ReactFlightDOMRelayServerIntegration'; -import {resolveModelToJSON} from 'react-server/src/ReactFlightServer'; +import {resolveValueToJSON} from 'react-server/src/ReactFlightServer'; import { emitRow, @@ -55,30 +55,30 @@ export function isServerReference(reference: Object): boolean { export type ClientReferenceKey = ClientReference<any>; export function getClientReferenceKey( - reference: ClientReference<any>, + clientReference: ClientReference<any>, ): ClientReferenceKey { // We use the reference object itself as the key because we assume the // object will be cached by the bundler runtime. - return reference; + return clientReference; } export function resolveClientReferenceMetadata<T>( - config: ClientManifest, - resource: ClientReference<T>, + clientManifest: ClientManifest, + clientReference: ClientReference<T>, ): ClientReferenceMetadata { - return resolveClientReferenceMetadataImpl(config, resource); + return resolveClientReferenceMetadataImpl(clientManifest, clientReference); } export function getServerReferenceId<T>( - config: ClientManifest, - resource: ServerReference<T>, + clientManifest: ClientManifest, + serverReference: ServerReference<T>, ): ServerReferenceId { throw new Error('Not implemented.'); } export function getServerReferenceBoundArguments<T>( - config: ClientManifest, - resource: ServerReference<T>, + clientManifest: ClientManifest, + serverReference: ServerReference<T>, ): Array<ReactClientValue> { throw new Error('Not implemented.'); } @@ -133,18 +133,18 @@ export function processErrorChunkDev( ]; } -function convertModelToJSON( +function convertValueToJSON( request: Request, parent: {+[key: string]: ReactClientValue} | $ReadOnlyArray<ReactClientValue>, key: string, - model: ReactClientValue, + value: ReactClientValue, ): JSONValue { - const json = resolveModelToJSON(request, parent, key, model); + const json = resolveValueToJSON(request, parent, key, value); if (typeof json === 'object' && json !== null) { if (isArray(json)) { const jsonArray: Array<JSONValue> = []; for (let i = 0; i < json.length; i++) { - jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]); + jsonArray[i] = convertValueToJSON(request, json, '' + i, json[i]); } return jsonArray; } else { @@ -153,7 +153,7 @@ function convertModelToJSON( const jsonObj: {[key: string]: JSONValue} = {}; for (const nextKey in json) { if (hasOwnProperty.call(json, nextKey)) { - jsonObj[nextKey] = convertModelToJSON( + jsonObj[nextKey] = convertValueToJSON( request, json, nextKey, @@ -167,13 +167,13 @@ function convertModelToJSON( return json; } -export function processModelChunk( +export function processValueChunk( request: Request, id: number, - model: ReactClientValue, + value: ReactClientValue, ): Chunk { // $FlowFixMe no good way to define an empty exact object - const json = convertModelToJSON(request, {}, '', model); + const json = convertValueToJSON(request, {}, '', value); return ['O', id, json]; } diff --git a/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js b/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js index 769e61b1adc25..f9255a2c17744 100644 --- a/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js +++ b/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js @@ -12,8 +12,8 @@ const ReactFlightDOMRelayServerIntegration = { destination.push(json); }, close(destination) {}, - resolveClientReferenceMetadata(config, resource) { - return resource._moduleId; + resolveClientReferenceMetadata(clientManifest, clientReference) { + return clientReference._moduleId; }, }; diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js index a79346676d022..3f3aca4690203 100644 --- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js +++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js @@ -38,16 +38,16 @@ describe('ReactFlightDOMRelay', () => { } ReactDOMFlightRelayClient.close(response); const promise = ReactDOMFlightRelayClient.getRoot(response); - let model; + let value; let error; promise.then( - m => (model = m), + m => (value = m), e => (error = e), ); if (error) { throw error; } - return model; + return value; } it('can render a Server Component', () => { @@ -71,8 +71,8 @@ describe('ReactFlightDOMRelay', () => { transport, ); - const model = readThrough(transport); - expect(model).toEqual({ + const value = readThrough(transport); + expect(value).toEqual({ foo: { bar: ( <div> @@ -99,19 +99,19 @@ describe('ReactFlightDOMRelay', () => { return <User greeting="Hello" name={firstName + ' ' + lastName} />; } - const model = { + const value = { greeting: <Greeting firstName="Seb" lastName="Smith" />, }; const transport = []; - ReactDOMFlightRelayServer.render(model, transport); + ReactDOMFlightRelayServer.render(value, transport); - const modelClient = readThrough(transport); + const valueClient = readThrough(transport); const container = document.createElement('div'); const root = ReactDOMClient.createRoot(container); await act(() => { - root.render(modelClient.greeting); + root.render(valueClient.greeting); }); expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>'); @@ -152,8 +152,8 @@ describe('ReactFlightDOMRelay', () => { transport, ); - const model = readThrough(transport); - expect(model).toEqual({ + const value = readThrough(transport); + expect(value).toEqual({ foo: { bar: ( <div> @@ -193,8 +193,8 @@ describe('ReactFlightDOMRelay', () => { transport, ); - const model = readThrough(transport); - expect(model).toEqual({ + const value = readThrough(transport); + expect(value).toEqual({ foo: { bar: 14, }, @@ -215,8 +215,8 @@ describe('ReactFlightDOMRelay', () => { const transport = []; ReactDOMFlightRelayServer.render(<Foo />, transport); - const model = readThrough(transport); - expect(model).toEqual(14); + const value = readThrough(transport); + expect(value).toEqual(14); }); it('should warn in DEV if a class instance polyfill is passed to a host component', () => { diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientNodeBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientNodeBundlerConfig.js index b3bd02c054119..b39535a0e7933 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightClientNodeBundlerConfig.js +++ b/packages/react-server-dom-webpack/src/ReactFlightClientNodeBundlerConfig.js @@ -36,15 +36,15 @@ export opaque type ClientReference<T> = { }; export function resolveClientReference<T>( - bundlerConfig: SSRManifest, + ssrManifest: SSRManifest, metadata: ClientReferenceMetadata, ): ClientReference<T> { - const resolvedModuleData = bundlerConfig[metadata.id][metadata.name]; + const resolvedModuleData = ssrManifest[metadata.id][metadata.name]; return resolvedModuleData; } export function resolveServerReference<T>( - bundlerConfig: ServerManifest, + serverManifest: ServerManifest, id: ServerReferenceId, ): ClientReference<T> { const idx = id.lastIndexOf('#'); diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js index 85aaab79a9056..5268a8876ae2a 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js +++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js @@ -36,11 +36,11 @@ export opaque type ClientReferenceMetadata = { export opaque type ClientReference<T> = ClientReferenceMetadata; export function resolveClientReference<T>( - bundlerConfig: SSRManifest, + ssrManifest: SSRManifest, metadata: ClientReferenceMetadata, ): ClientReference<T> { - if (bundlerConfig) { - const resolvedModuleData = bundlerConfig[metadata.id][metadata.name]; + if (ssrManifest) { + const resolvedModuleData = ssrManifest[metadata.id][metadata.name]; if (metadata.async) { return { id: resolvedModuleData.id, @@ -56,11 +56,11 @@ export function resolveClientReference<T>( } export function resolveServerReference<T>( - bundlerConfig: ServerManifest, + serverManifest: ServerManifest, id: ServerReferenceId, ): ClientReference<T> { // This needs to return async: true if it's an async module. - return bundlerConfig[id]; + return serverManifest[id]; } // The chunk cache contains all the chunks we've preloaded so far. diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js index 9a68b21f6c63a..652c5deada5be 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js @@ -30,12 +30,12 @@ function noServerCall() { } export type Options = { - moduleMap?: $NonMaybeType<SSRManifest>, + ssrManifest?: $NonMaybeType<SSRManifest>, }; function createResponseFromOptions(options: void | Options) { return createResponse( - options && options.moduleMap ? options.moduleMap : null, + options && options.ssrManifest ? options.ssrManifest : null, noServerCall, ); } diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js index 09502a7bf5479..66eec12945dab 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js @@ -34,9 +34,9 @@ function noServerCall() { function createFromNodeStream<T>( stream: Readable, - moduleMap: $NonMaybeType<SSRManifest>, + ssrManifest: $NonMaybeType<SSRManifest>, ): Thenable<T> { - const response: Response = createResponse(moduleMap, noServerCall); + const response: Response = createResponse(ssrManifest, noServerCall); stream.on('data', chunk => { if (typeof chunk === 'string') { processStringChunk(response, chunk, 0); diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js index ef282d3317ef0..cf07b1315be16 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js +++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js @@ -35,13 +35,13 @@ type Options = { }; function renderToReadableStream( - model: ReactClientValue, - webpackMap: ClientManifest, + value: ReactClientValue, + clientManifest: ClientManifest, options?: Options, ): ReadableStream { const request = createRequest( - model, - webpackMap, + value, + clientManifest, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined, @@ -77,9 +77,9 @@ function renderToReadableStream( function decodeReply<T>( body: string | FormData, - webpackMap: ServerManifest, + serverManifest: ServerManifest, ): Thenable<T> { - const response = createResponse(webpackMap); + const response = createResponse(serverManifest); if (typeof body === 'string') { resolveField(response, 0, body); } else { diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js index ef282d3317ef0..cf07b1315be16 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js +++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js @@ -35,13 +35,13 @@ type Options = { }; function renderToReadableStream( - model: ReactClientValue, - webpackMap: ClientManifest, + value: ReactClientValue, + clientManifest: ClientManifest, options?: Options, ): ReadableStream { const request = createRequest( - model, - webpackMap, + value, + clientManifest, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined, @@ -77,9 +77,9 @@ function renderToReadableStream( function decodeReply<T>( body: string | FormData, - webpackMap: ServerManifest, + serverManifest: ServerManifest, ): Thenable<T> { - const response = createResponse(webpackMap); + const response = createResponse(serverManifest); if (typeof body === 'string') { resolveField(response, 0, body); } else { diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js index f2653dca98c46..a2323dc966f33 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js +++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js @@ -53,13 +53,13 @@ type PipeableStream = { }; function renderToPipeableStream( - model: ReactClientValue, - webpackMap: ClientManifest, + value: ReactClientValue, + clientManifest: ClientManifest, options?: Options, ): PipeableStream { const request = createRequest( - model, - webpackMap, + value, + clientManifest, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined, @@ -86,9 +86,9 @@ function renderToPipeableStream( function decodeReplyFromBusboy<T>( busboyStream: Busboy, - webpackMap: ServerManifest, + serverManifest: ServerManifest, ): Thenable<T> { - const response = createResponse(webpackMap); + const response = createResponse(serverManifest); busboyStream.on('field', (name, value) => { const id = +name; resolveField(response, id, value); @@ -121,9 +121,9 @@ function decodeReplyFromBusboy<T>( function decodeReply<T>( body: string | FormData, - webpackMap: ServerManifest, + serverManifest: ServerManifest, ): Thenable<T> { - const response = createResponse(webpackMap); + const response = createResponse(serverManifest); if (typeof body === 'string') { resolveField(response, 0, body); } else { diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js index 444f2c0b2a150..c80524d549a72 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js +++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js @@ -41,9 +41,11 @@ const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference'); const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference'); export function getClientReferenceKey( - reference: ClientReference<any>, + clientReference: ClientReference<any>, ): ClientReferenceKey { - return reference.$$async ? reference.$$id + '#async' : reference.$$id; + return clientReference.$$async + ? clientReference.$$id + '#async' + : clientReference.$$id; } export function isClientReference(reference: Object): boolean { @@ -55,10 +57,10 @@ export function isServerReference(reference: Object): boolean { } export function resolveClientReferenceMetadata<T>( - config: ClientManifest, + clientManifest: ClientManifest, clientReference: ClientReference<T>, ): ClientReferenceMetadata { - const resolvedModuleData = config[clientReference.$$id]; + const resolvedModuleData = clientManifest[clientReference.$$id]; if (clientReference.$$async) { return { id: resolvedModuleData.id, @@ -72,14 +74,14 @@ export function resolveClientReferenceMetadata<T>( } export function getServerReferenceId<T>( - config: ClientManifest, + clientManifest: ClientManifest, serverReference: ServerReference<T>, ): ServerReferenceId { return serverReference.$$id; } export function getServerReferenceBoundArguments<T>( - config: ClientManifest, + clientManifest: ClientManifest, serverReference: ServerReference<T>, ): null | Array<ReactClientValue> { return serverReference.$$bound; diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js index 5b19ee7d6f9a2..eca8fc6786182 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js @@ -213,7 +213,7 @@ export default class ReactFlightWebpackPlugin { if (clientFileNameFound === false) { compilation.warnings.push( new WebpackError( - `Client runtime at ${clientImportName} was not found. React Server Components module map file ${_this.clientManifestFilename} was not created.`, + `Client runtime at ${clientImportName} was not found. React Server Components client manifest file ${_this.clientManifestFilename} was not created.`, ), ); return; diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js index b2a25dec436da..c4e904069eb35 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js @@ -22,7 +22,7 @@ let act; let use; let clientExports; let clientModuleError; -let webpackMap; +let clientManifest; let Stream; let React; let ReactDOMClient; @@ -38,7 +38,7 @@ describe('ReactFlightDOM', () => { const WebpackMock = require('./utils/WebpackMock'); clientExports = WebpackMock.clientExports; clientModuleError = WebpackMock.clientModuleError; - webpackMap = WebpackMock.webpackMap; + clientManifest = WebpackMock.webpackMap; Stream = require('stream'); React = require('react'); @@ -102,21 +102,21 @@ describe('ReactFlightDOM', () => { } function App() { - const model = { + const value = { html: <HTML />, }; - return model; + return value; } const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <App />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); - const model = await response; - expect(model).toEqual({ + const value = await response; + expect(value).toEqual({ html: ( <div> <span>hello</span> @@ -161,7 +161,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <RootModel />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -198,7 +198,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <RootModel />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -233,7 +233,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <RootModel />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -283,7 +283,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <Component greeting={hi} />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -321,7 +321,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <Component greeting={'Hello'} />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -362,7 +362,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <AsyncModuleRef text={AsyncModuleRef2.exportName} />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -401,7 +401,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <ServerComponent />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -439,7 +439,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <ThenRef />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -583,7 +583,7 @@ describe('ReactFlightDOM', () => { ); } - const model = { + const value = { rootContent: <ProfileContent />, }; @@ -593,8 +593,8 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( - model, - webpackMap, + value, + clientManifest, { onError(x) { reportedErrors.push(x); @@ -717,7 +717,7 @@ describe('ReactFlightDOM', () => { const stream1 = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <App color="red" />, - webpackMap, + clientManifest, ); pipe(stream1.writable); const response1 = ReactServerDOMClient.createFromReadableStream( @@ -745,7 +745,7 @@ describe('ReactFlightDOM', () => { const stream2 = getTestStream(); const {pipe: pipe2} = ReactServerDOMServer.renderToPipeableStream( <App color="blue" />, - webpackMap, + clientManifest, ); pipe2(stream2.writable); const response2 = ReactServerDOMClient.createFromReadableStream( @@ -780,7 +780,7 @@ describe('ReactFlightDOM', () => { <div> <InfiniteSuspend /> </div>, - webpackMap, + clientManifest, { onError(x) { reportedErrors.push(x); @@ -845,7 +845,7 @@ describe('ReactFlightDOM', () => { <div> <ClientComponent prop={ClientReference} /> </div>, - webpackMap, + clientManifest, { onError(x) { reportedErrors.push(x); @@ -896,7 +896,7 @@ describe('ReactFlightDOM', () => { <div> <ClientComponent prop={ClientReference} /> </div>, - webpackMap, + clientManifest, { onError(x) { reportedErrors.push(x); @@ -943,8 +943,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 clientManifest) { + Object.defineProperty(clientManifest, id, { get: () => { throw new Error('bug in the bundler'); }, @@ -956,7 +956,7 @@ describe('ReactFlightDOM', () => { <div> <ClientComponent /> </div>, - webpackMap, + clientManifest, { onError(x) { reportedErrors.push(x.message); @@ -1034,7 +1034,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <ServerComponent />, - webpackMap, + clientManifest, ); pipe(writable); const response = ReactServerDOMClient.createFromReadableStream(readable); @@ -1091,7 +1091,7 @@ describe('ReactFlightDOM', () => { const {writable, readable} = getTestStream(); const {pipe} = ReactServerDOMServer.renderToPipeableStream( <ServerComponent />, - webpackMap, + clientManifest, { onError(x) { reportedErrors.push(x); diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index d53a9df2e3eb8..d173740d555a3 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -17,8 +17,8 @@ global.TextDecoder = require('util').TextDecoder; let clientExports; let serverExports; -let webpackMap; -let webpackServerMap; +let clientManifest; +let serverManifest; let act; let React; let ReactDOMClient; @@ -34,8 +34,8 @@ describe('ReactFlightDOMBrowser', () => { const WebpackMock = require('./utils/WebpackMock'); clientExports = WebpackMock.clientExports; serverExports = WebpackMock.serverExports; - webpackMap = WebpackMock.webpackMap; - webpackServerMap = WebpackMock.webpackServerMap; + clientManifest = WebpackMock.webpackMap; + serverManifest = WebpackMock.webpackServerMap; React = require('react'); ReactDOMClient = require('react-dom/client'); ReactServerDOMServer = require('react-server-dom-webpack/server.browser'); @@ -75,7 +75,7 @@ describe('ReactFlightDOMBrowser', () => { } function requireServerRef(ref) { - const metaData = webpackServerMap[ref]; + const metaData = serverManifest[ref]; const mod = __webpack_require__(metaData.id); if (metaData.name === '*') { return mod; @@ -85,7 +85,7 @@ describe('ReactFlightDOMBrowser', () => { async function callServer(actionId, body) { const fn = requireServerRef(actionId); - const args = await ReactServerDOMServer.decodeReply(body, webpackServerMap); + const args = await ReactServerDOMServer.decodeReply(body, serverManifest); return fn.apply(null, args); } @@ -103,16 +103,16 @@ describe('ReactFlightDOMBrowser', () => { } function App() { - const model = { + const value = { html: <HTML />, }; - return model; + return value; } const stream = ReactServerDOMServer.renderToReadableStream(<App />); const response = ReactServerDOMClient.createFromReadableStream(stream); - const model = await response; - expect(model).toEqual({ + const value = await response; + expect(value).toEqual({ html: ( <div> <span>hello</span> @@ -136,16 +136,16 @@ describe('ReactFlightDOMBrowser', () => { } function App() { - const model = { + const value = { html: <HTML />, }; - return model; + return value; } const stream = ReactServerDOMServer.renderToReadableStream(<App />); const response = ReactServerDOMClient.createFromReadableStream(stream); - const model = await response; - expect(model).toEqual({ + const value = await response; + expect(value).toEqual({ html: ( <div> <span>hello</span> @@ -257,7 +257,7 @@ describe('ReactFlightDOMBrowser', () => { ); } - const model = { + const value = { rootContent: <ProfileContent />, }; @@ -266,8 +266,8 @@ describe('ReactFlightDOMBrowser', () => { } const stream = ReactServerDOMServer.renderToReadableStream( - model, - webpackMap, + value, + clientManifest, { onError(x) { reportedErrors.push(x); @@ -400,13 +400,13 @@ describe('ReactFlightDOMBrowser', () => { ); } - const model = { + const value = { rootContent: <ProfileContent />, }; const stream = ReactServerDOMServer.renderToReadableStream( - model, - webpackMap, + value, + clientManifest, ); const reader = stream.getReader(); @@ -415,13 +415,13 @@ describe('ReactFlightDOMBrowser', () => { let flightResponse = ''; let isDone = false; - reader.read().then(function progress({done, value}) { - if (done) { + reader.read().then(function progress(result) { + if (result.done) { isDone = true; return; } - flightResponse += decoder.decode(value); + flightResponse += decoder.decode(result.value); return reader.read().then(progress); }); @@ -508,7 +508,7 @@ describe('ReactFlightDOMBrowser', () => { <div> <InfiniteSuspend /> </div>, - webpackMap, + clientManifest, { signal: controller.signal, onError(x) { @@ -660,7 +660,7 @@ describe('ReactFlightDOMBrowser', () => { const reportedErrors = []; const stream = ReactServerDOMServer.renderToReadableStream( <Server />, - webpackMap, + clientManifest, { onError(x) { reportedErrors.push(x); @@ -797,7 +797,7 @@ describe('ReactFlightDOMBrowser', () => { const stream = ReactServerDOMServer.renderToReadableStream( <ClientRef action={boundFn} />, - webpackMap, + clientManifest, ); const response = ReactServerDOMClient.createFromReadableStream(stream, { @@ -839,7 +839,7 @@ describe('ReactFlightDOMBrowser', () => { const stream = ReactServerDOMServer.renderToReadableStream( <ClientRef action={greet.bind(null, 'Hello', 'World')} />, - webpackMap, + clientManifest, ); const response = ReactServerDOMClient.createFromReadableStream(stream, { @@ -883,7 +883,7 @@ describe('ReactFlightDOMBrowser', () => { const stream = ReactServerDOMServer.renderToReadableStream( <ClientRef action={ServerModule.send} />, - webpackMap, + clientManifest, ); const response = ReactServerDOMClient.createFromReadableStream(stream, { diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index e090add747cea..d5f966d9c65f6 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -20,7 +20,7 @@ global.TextDecoder = require('util').TextDecoder; global.setTimeout = cb => cb(); let clientExports; -let webpackMap; +let clientManifest; let webpackModules; let React; let ReactDOMServer; @@ -33,7 +33,7 @@ describe('ReactFlightDOMEdge', () => { jest.resetModules(); const WebpackMock = require('./utils/WebpackMock'); clientExports = WebpackMock.clientExports; - webpackMap = WebpackMock.webpackMap; + clientManifest = WebpackMock.webpackMap; webpackModules = WebpackMock.webpackModules; React = require('react'); ReactDOMServer = require('react-dom/server.edge'); @@ -65,13 +65,13 @@ describe('ReactFlightDOMEdge', () => { const ClientComponentOnTheServer = clientExports(ClientComponent); // In the SSR bundle this module won't exist. We simulate this by deleting it. - const clientId = webpackMap[ClientComponentOnTheClient.$$id].id; + const clientId = clientManifest[ClientComponentOnTheClient.$$id].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.$$id]; - const translationMap = { + const ssrMetadata = clientManifest[ClientComponentOnTheServer.$$id]; + const ssrManifest = { [clientId]: { '*': ssrMetadata, }, @@ -83,10 +83,10 @@ describe('ReactFlightDOMEdge', () => { const stream = ReactServerDOMServer.renderToReadableStream( <App />, - webpackMap, + clientManifest, ); const response = ReactServerDOMClient.createFromReadableStream(stream, { - moduleMap: translationMap, + ssrManifest, }); function ClientRoot() { diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js index 17b65bcddf786..0fb89d06fcb53 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js @@ -14,7 +14,7 @@ global.setImmediate = cb => cb(); let clientExports; -let webpackMap; +let clientManifest; let webpackModules; let React; let ReactDOMServer; @@ -28,7 +28,7 @@ describe('ReactFlightDOMNode', () => { jest.resetModules(); const WebpackMock = require('./utils/WebpackMock'); clientExports = WebpackMock.clientExports; - webpackMap = WebpackMock.webpackMap; + clientManifest = WebpackMock.webpackMap; webpackModules = WebpackMock.webpackModules; React = require('react'); ReactDOMServer = require('react-dom/server.node'); @@ -67,12 +67,12 @@ describe('ReactFlightDOMNode', () => { const ClientComponentOnTheServer = clientExports(ClientComponent); // In the SSR bundle this module won't exist. We simulate this by deleting it. - const clientId = webpackMap[ClientComponentOnTheClient.$$id].id; + const clientId = clientManifest[ClientComponentOnTheClient.$$id].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.$$id]; + const ssrMetadata = clientManifest[ClientComponentOnTheServer.$$id]; const translationMap = { [clientId]: { '*': ssrMetadata, @@ -85,7 +85,7 @@ describe('ReactFlightDOMNode', () => { const stream = ReactServerDOMServer.renderToPipeableStream( <App />, - webpackMap, + clientManifest, ); const readable = new Stream.PassThrough(); const response = ReactServerDOMClient.createFromNodeStream( diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js index c53f8b6f5fc53..e5134037e2416 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js @@ -15,8 +15,7 @@ global.ReadableStream = global.TextEncoder = require('util').TextEncoder; global.TextDecoder = require('util').TextDecoder; -// let serverExports; -let webpackServerMap; +let serverManifest; let ReactServerDOMServer; let ReactServerDOMClient; @@ -24,8 +23,7 @@ describe('ReactFlightDOMReply', () => { beforeEach(() => { jest.resetModules(); const WebpackMock = require('./utils/WebpackMock'); - // serverExports = WebpackMock.serverExports; - webpackServerMap = WebpackMock.webpackServerMap; + serverManifest = WebpackMock.webpackServerMap; ReactServerDOMServer = require('react-server-dom-webpack/server.browser'); ReactServerDOMClient = require('react-server-dom-webpack/client'); }); @@ -34,7 +32,7 @@ describe('ReactFlightDOMReply', () => { const body = await ReactServerDOMClient.encodeReply(undefined); const missing = await ReactServerDOMServer.decodeReply( body, - webpackServerMap, + serverManifest, ); expect(missing).toBe(undefined); @@ -44,7 +42,7 @@ describe('ReactFlightDOMReply', () => { }); const object = await ReactServerDOMServer.decodeReply( body2, - webpackServerMap, + serverManifest, ); expect(object.array.length).toBe(3); expect(object.array[0]).toBe(undefined); @@ -66,7 +64,7 @@ describe('ReactFlightDOMReply', () => { }); const iterable = await ReactServerDOMServer.decodeReply( body, - webpackServerMap, + serverManifest, ); const items = []; // eslint-disable-next-line no-for-of-loops/no-for-of-loops diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js index b9a398cc9328b..b183f7593fde6 100644 --- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js +++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js @@ -13,7 +13,7 @@ import type {Response} from 'react-client/src/ReactFlightClient'; import { createResponse, - resolveModel, + resolveJSONValue, resolveModule, resolveErrorDev, resolveErrorProd, @@ -26,7 +26,7 @@ export {createResponse, close, getRoot}; export function resolveRow(response: Response, chunk: RowEncoding): void { if (chunk[0] === 'O') { // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type. - resolveModel(response, chunk[1], chunk[2]); + resolveJSONValue(response, chunk[1], chunk[2]); } else if (chunk[0] === 'I') { // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type. resolveModule(response, chunk[1], chunk[2]); diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js index e21df4d13e80c..64e91307c1806 100644 --- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js +++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js @@ -16,8 +16,8 @@ import type {ClientReferenceMetadata} from 'ReactFlightNativeRelayClientIntegrat export type ClientReference<T> = JSResourceReference<T>; import { - parseModelString, - parseModelTuple, + parseJSONValueString, + parseJSONValueTuple, } from 'react-client/src/ReactFlightClient'; export { @@ -35,49 +35,49 @@ export type SSRManifest = null; export type ServerManifest = null; export type ServerReferenceId = string; -export type UninitializedModel = JSONValue; +export type UninitializedValue = JSONValue; export type Response = ResponseBase; export function resolveClientReference<T>( - bundlerConfig: SSRManifest, + ssrManifest: SSRManifest, metadata: ClientReferenceMetadata, ): ClientReference<T> { return resolveClientReferenceImpl(metadata); } export function resolveServerReference<T>( - bundlerConfig: ServerManifest, + serverManifest: ServerManifest, id: ServerReferenceId, ): ClientReference<T> { throw new Error('Not implemented.'); } -function parseModelRecursively( +function parseJSONValueRecursively( response: Response, parentObj: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>, key: string, value: JSONValue, ): $FlowFixMe { if (typeof value === 'string') { - return parseModelString(response, parentObj, key, value); + return parseJSONValueString(response, parentObj, key, value); } if (typeof value === 'object' && value !== null) { if (isArray(value)) { const parsedValue: Array<$FlowFixMe> = []; for (let i = 0; i < value.length; i++) { - (parsedValue: any)[i] = parseModelRecursively( + (parsedValue: any)[i] = parseJSONValueRecursively( response, value, '' + i, value[i], ); } - return parseModelTuple(response, parsedValue); + return parseJSONValueTuple(response, parsedValue); } else { const parsedValue = {}; for (const innerKey in value) { - (parsedValue: any)[innerKey] = parseModelRecursively( + (parsedValue: any)[innerKey] = parseJSONValueRecursively( response, value, innerKey, @@ -92,6 +92,9 @@ function parseModelRecursively( const dummy = {}; -export function parseModel<T>(response: Response, json: UninitializedModel): T { - return (parseModelRecursively(response, dummy, '', json): any); +export function parseJSONValue<T>( + response: Response, + json: UninitializedValue, +): T { + return (parseJSONValueRecursively(response, dummy, '', json): any); } diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js index 5e049368f72f2..29e7a0492d90f 100644 --- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js +++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js @@ -20,11 +20,11 @@ import { } from 'react-server/src/ReactFlightServer'; function render( - model: ReactClientValue, + value: ReactClientValue, destination: Destination, - config: ClientManifest, + clientManifest: ClientManifest, ): void { - const request = createRequest(model, config); + const request = createRequest(value, clientManifest); startWork(request); startFlowing(request, destination); } diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js index 05f53e2049460..19e346ebffe99 100644 --- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js +++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js @@ -27,7 +27,7 @@ import type { ClientReferenceMetadata, } from 'ReactFlightNativeRelayServerIntegration'; -import {resolveModelToJSON} from 'react-server/src/ReactFlightServer'; +import {resolveValueToJSON} from 'react-server/src/ReactFlightServer'; import { emitRow, @@ -52,30 +52,30 @@ export function isServerReference(reference: Object): boolean { export type ClientReferenceKey = ClientReference<any>; export function getClientReferenceKey( - reference: ClientReference<any>, + clientReference: ClientReference<any>, ): ClientReferenceKey { // We use the reference object itself as the key because we assume the // object will be cached by the bundler runtime. - return reference; + return clientReference; } export function resolveClientReferenceMetadata<T>( - config: ClientManifest, - resource: ClientReference<T>, + clientManifest: ClientManifest, + clientReference: ClientReference<T>, ): ClientReferenceMetadata { - return resolveClientReferenceMetadataImpl(config, resource); + return resolveClientReferenceMetadataImpl(clientManifest, clientReference); } export function getServerReferenceId<T>( - config: ClientManifest, - resource: ServerReference<T>, + clientManifest: ClientManifest, + serverReference: ServerReference<T>, ): ServerReferenceId { throw new Error('Not implemented.'); } export function getServerReferenceBoundArguments<T>( - config: ClientManifest, - resource: ServerReference<T>, + clientManifest: ClientManifest, + serverReference: ServerReference<T>, ): Array<ReactClientValue> { throw new Error('Not implemented.'); } @@ -129,18 +129,18 @@ export function processErrorChunkDev( ]; } -function convertModelToJSON( +function convertValueToJSON( request: Request, parent: {+[key: string]: ReactClientValue} | $ReadOnlyArray<ReactClientValue>, key: string, - model: ReactClientValue, + value: ReactClientValue, ): JSONValue { - const json = resolveModelToJSON(request, parent, key, model); + const json = resolveValueToJSON(request, parent, key, value); if (typeof json === 'object' && json !== null) { if (isArray(json)) { const jsonArray: Array<JSONValue> = []; for (let i = 0; i < json.length; i++) { - jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]); + jsonArray[i] = convertValueToJSON(request, json, '' + i, json[i]); } return jsonArray; } else { @@ -148,7 +148,7 @@ function convertModelToJSON( const jsonObj: {[key: string]: JSONValue} = {}; for (const nextKey in json) { if (hasOwnProperty.call(json, nextKey)) { - jsonObj[nextKey] = convertModelToJSON( + jsonObj[nextKey] = convertValueToJSON( request, json, nextKey, @@ -162,13 +162,13 @@ function convertModelToJSON( return json; } -export function processModelChunk( +export function processValueChunk( request: Request, id: number, - model: ReactClientValue, + value: ReactClientValue, ): Chunk { // $FlowFixMe no good way to define an empty exact object - const json = convertModelToJSON(request, {}, '', model); + const json = convertValueToJSON(request, {}, '', value); return ['O', id, json]; } diff --git a/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js b/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js index 52371c59eaba0..d1d5b1c6f5a2f 100644 --- a/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js +++ b/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js @@ -12,8 +12,8 @@ const ReactFlightNativeRelayServerIntegration = { destination.push(json); }, close(destination) {}, - resolveClientReferenceMetadata(config, resource) { - return resource._moduleId; + resolveClientReferenceMetadata(clientManifest, clientReference) { + return clientReference._moduleId; }, }; diff --git a/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js b/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js index 1ed48fe30fc92..5d825fec8380e 100644 --- a/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js +++ b/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js @@ -50,16 +50,16 @@ describe('ReactFlightNativeRelay', () => { } ReactNativeFlightRelayClient.close(response); const promise = ReactNativeFlightRelayClient.getRoot(response); - let model; + let value; let error; promise.then( - m => (model = m), + m => (value = m), e => (error = e), ); if (error) { throw error; } - return model; + return value; } it('can render a Server Component', () => { @@ -83,8 +83,8 @@ describe('ReactFlightNativeRelay', () => { transport, ); - const model = readThrough(transport); - expect(model).toMatchSnapshot(); + const value = readThrough(transport); + expect(value).toMatchSnapshot(); }); it('can render a Client Component using a module reference and render there', () => { @@ -101,16 +101,16 @@ describe('ReactFlightNativeRelay', () => { return <User greeting="Hello" name={firstName + ' ' + lastName} />; } - const model = { + const value = { greeting: <Greeting firstName="Seb" lastName="Smith" />, }; const transport = []; - ReactNativeFlightRelayServer.render(model, transport); + ReactNativeFlightRelayServer.render(value, transport); - const modelClient = readThrough(transport); + const valueClient = readThrough(transport); - ReactFabric.render(modelClient.greeting, 1); + ReactFabric.render(valueClient.greeting, 1); expect( nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(), ).toMatchSnapshot(); diff --git a/packages/react-server/src/ReactFlightReplyServer.js b/packages/react-server/src/ReactFlightReplyServer.js index d9de22ca661c4..a86b9ebb58595 100644 --- a/packages/react-server/src/ReactFlightReplyServer.js +++ b/packages/react-server/src/ReactFlightReplyServer.js @@ -34,7 +34,7 @@ export type JSONValue = const PENDING = 'pending'; const BLOCKED = 'blocked'; -const RESOLVED_MODEL = 'resolved_model'; +const RESOLVED_JSON_VALUE = 'resolved_json_value'; const INITIALIZED = 'fulfilled'; const ERRORED = 'rejected'; @@ -52,8 +52,8 @@ type BlockedChunk<T> = { _response: Response, then(resolve: (T) => mixed, reject: (mixed) => mixed): void, }; -type ResolvedModelChunk<T> = { - status: 'resolved_model', +type ResolvedJSONValueChunk<T> = { + status: 'resolved_json_value', value: string, reason: null, _response: Response, @@ -76,7 +76,7 @@ type ErroredChunk<T> = { type SomeChunk<T> = | PendingChunk<T> | BlockedChunk<T> - | ResolvedModelChunk<T> + | ResolvedJSONValueChunk<T> | InitializedChunk<T> | ErroredChunk<T>; @@ -99,8 +99,8 @@ Chunk.prototype.then = function <T>( // If we have resolved content, we try to initialize it first which // might put us back into one of the other states. switch (chunk.status) { - case RESOLVED_MODEL: - initializeModelChunk(chunk); + case RESOLVED_JSON_VALUE: + initializeJSONValueChunk(chunk); break; } // The status might have changed after initialization. @@ -130,7 +130,7 @@ Chunk.prototype.then = function <T>( }; export type Response = { - _bundlerConfig: ServerManifest, + _serverManifest: ServerManifest, _chunks: Map<number, SomeChunk<any>>, _fromJSON: (key: string, value: JSONValue) => any, }; @@ -188,29 +188,29 @@ function triggerErrorOnChunk<T>(chunk: SomeChunk<T>, error: mixed): void { } } -function createResolvedModelChunk<T>( +function createResolvedJSONValueChunk<T>( response: Response, value: string, -): ResolvedModelChunk<T> { +): ResolvedJSONValueChunk<T> { // $FlowFixMe Flow doesn't support functions as constructors - return new Chunk(RESOLVED_MODEL, value, null, response); + return new Chunk(RESOLVED_JSON_VALUE, value, null, response); } -function resolveModelChunk<T>(chunk: SomeChunk<T>, value: string): void { +function resolveJSONValueChunk<T>(chunk: SomeChunk<T>, value: string): void { if (chunk.status !== PENDING) { // We already resolved. We didn't expect to see this. return; } const resolveListeners = chunk.value; const rejectListeners = chunk.reason; - const resolvedChunk: ResolvedModelChunk<T> = (chunk: any); - resolvedChunk.status = RESOLVED_MODEL; + const resolvedChunk: ResolvedJSONValueChunk<T> = (chunk: any); + resolvedChunk.status = RESOLVED_JSON_VALUE; resolvedChunk.value = value; if (resolveListeners !== null) { // This is unfortunate that we're reading this eagerly if // we already have listeners attached since they might no // longer be rendered or might not be the highest pri. - initializeModelChunk(resolvedChunk); + initializeJSONValueChunk(resolvedChunk); // The status might have changed after initialization. wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners); } @@ -229,7 +229,7 @@ function loadServerReference<T>( key: string, ): T { const serverReference: ServerReference<T> = - resolveServerReference<$FlowFixMe>(response._bundlerConfig, id); + resolveServerReference<$FlowFixMe>(response._serverManifest, id); // We expect most servers to not really need this because you'd just have all // the relevant modules already loaded but it allows for lazy loading of code // if needed. @@ -250,27 +250,27 @@ function loadServerReference<T>( } } promise.then( - createModelResolver(parentChunk, parentObject, key), - createModelReject(parentChunk), + createValueResolver(parentChunk, parentObject, key), + createValueReject(parentChunk), ); // We need a placeholder value that will be replaced later. return (null: any); } -let initializingChunk: ResolvedModelChunk<any> = (null: any); -let initializingChunkBlockedModel: null | {deps: number, value: any} = null; -function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void { +let initializingChunk: ResolvedJSONValueChunk<any> = (null: any); +let initializingChunkBlockedValue: null | {deps: number, value: any} = null; +function initializeJSONValueChunk<T>(chunk: ResolvedJSONValueChunk<T>): void { const prevChunk = initializingChunk; - const prevBlocked = initializingChunkBlockedModel; + const prevBlocked = initializingChunkBlockedValue; initializingChunk = chunk; - initializingChunkBlockedModel = null; + initializingChunkBlockedValue = null; try { const value: T = JSON.parse(chunk.value, chunk._response._fromJSON); if ( - initializingChunkBlockedModel !== null && - initializingChunkBlockedModel.deps > 0 + initializingChunkBlockedValue !== null && + initializingChunkBlockedValue.deps > 0 ) { - initializingChunkBlockedModel.value = value; + initializingChunkBlockedValue.value = value; // We discovered new dependencies on modules that are not yet resolved. // We have to go the BLOCKED state until they're resolved. const blockedChunk: BlockedChunk<T> = (chunk: any); @@ -288,7 +288,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void { erroredChunk.reason = error; } finally { initializingChunk = prevChunk; - initializingChunkBlockedModel = prevBlocked; + initializingChunkBlockedValue = prevBlocked; } } @@ -315,17 +315,17 @@ function getChunk(response: Response, id: number): SomeChunk<any> { return chunk; } -function createModelResolver<T>( +function createValueResolver<T>( chunk: SomeChunk<T>, parentObject: Object, key: string, ): (value: any) => void { let blocked; - if (initializingChunkBlockedModel) { - blocked = initializingChunkBlockedModel; + if (initializingChunkBlockedValue) { + blocked = initializingChunkBlockedValue; blocked.deps++; } else { - blocked = initializingChunkBlockedModel = { + blocked = initializingChunkBlockedValue = { deps: 1, value: null, }; @@ -348,11 +348,11 @@ function createModelResolver<T>( }; } -function createModelReject<T>(chunk: SomeChunk<T>): (error: mixed) => void { +function createValueReject<T>(chunk: SomeChunk<T>): (error: mixed) => void { return (error: mixed) => triggerErrorOnChunk(chunk, error); } -function parseModelString( +function parseJSONValueString( response: Response, parentObject: Object, key: string, @@ -378,14 +378,14 @@ function parseModelString( // Server Reference const id = parseInt(value.substring(2), 16); const chunk = getChunk(response, id); - if (chunk.status === RESOLVED_MODEL) { - initializeModelChunk(chunk); + if (chunk.status === RESOLVED_JSON_VALUE) { + initializeJSONValueChunk(chunk); } if (chunk.status !== INITIALIZED) { // We know that this is emitted earlier so otherwise it's an error. throw chunk.reason; } - // TODO: Just encode this in the reference inline instead of as a model. + // TODO: Just encode this in the reference inline instead of as a value. const metaData: {id: ServerReferenceId, bound: Thenable<Array<any>>} = chunk.value; return loadServerReference( @@ -407,8 +407,8 @@ function parseModelString( const id = parseInt(value.substring(1), 16); const chunk = getChunk(response, id); switch (chunk.status) { - case RESOLVED_MODEL: - initializeModelChunk(chunk); + case RESOLVED_JSON_VALUE: + initializeJSONValueChunk(chunk); break; } // The status might have changed after initialization. @@ -419,8 +419,8 @@ function parseModelString( case BLOCKED: const parentChunk = initializingChunk; chunk.then( - createModelResolver(parentChunk, parentObject, key), - createModelReject(parentChunk), + createValueResolver(parentChunk, parentObject, key), + createValueReject(parentChunk), ); return null; default: @@ -432,15 +432,15 @@ function parseModelString( return value; } -export function createResponse(bundlerConfig: ServerManifest): Response { +export function createResponse(serverManifest: ServerManifest): Response { const chunks: Map<number, SomeChunk<any>> = new Map(); const response: Response = { - _bundlerConfig: bundlerConfig, + _serverManifest: serverManifest, _chunks: chunks, _fromJSON: function (this: any, key: string, value: JSONValue) { if (typeof value === 'string') { // We can't use .bind here because we need the "this" value. - return parseModelString(response, this, key, value); + return parseJSONValueString(response, this, key, value); } return value; }, @@ -451,14 +451,14 @@ export function createResponse(bundlerConfig: ServerManifest): Response { export function resolveField( response: Response, id: number, - model: string, + value: string, ): void { const chunks = response._chunks; const chunk = chunks.get(id); if (!chunk) { - chunks.set(id, createResolvedModelChunk(response, model)); + chunks.set(id, createResolvedJSONValueChunk(response, value)); } else { - resolveModelChunk(chunk, model); + resolveJSONValueChunk(chunk, value); } } diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 8979ef5d98829..864d18f19faf9 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -39,7 +39,7 @@ import { flushBuffered, close, closeWithError, - processModelChunk, + processValueChunk, processImportChunk, processErrorChunkProd, processErrorChunkDev, @@ -140,7 +140,7 @@ const ERRORED = 4; type Task = { id: number, status: 0 | 1 | 3 | 4, - model: ReactClientValue, + value: ReactClientValue, ping: () => void, context: ContextSnapshot, thenableState: ThenableState | null, @@ -150,7 +150,7 @@ export type Request = { status: 0 | 1 | 2, fatalError: mixed, destination: null | Destination, - bundlerConfig: ClientManifest, + clientManifest: ClientManifest, cache: Map<Function, mixed>, nextChunkId: number, pendingChunks: number, @@ -182,8 +182,8 @@ const CLOSING = 1; const CLOSED = 2; export function createRequest( - model: ReactClientValue, - bundlerConfig: ClientManifest, + value: ReactClientValue, + clientManifest: ClientManifest, onError: void | ((error: mixed) => ?string), context?: Array<[string, ServerContextJSONValue]>, identifierPrefix?: string, @@ -204,7 +204,7 @@ export function createRequest( status: OPEN, fatalError: null, destination: null, - bundlerConfig, + clientManifest, cache: new Map(), nextChunkId: 0, pendingChunks: 0, @@ -221,13 +221,16 @@ export function createRequest( identifierCount: 1, onError: onError === undefined ? defaultErrorHandler : onError, // $FlowFixMe[missing-this-annot] - toJSON: function (key: string, value: ReactClientValue): ReactJSONValue { - return resolveModelToJSON(request, this, key, value); + toJSON: function ( + key: string, + anotherValue: ReactClientValue, + ): ReactJSONValue { + return resolveValueToJSON(request, this, key, anotherValue); }, }; request.pendingChunks++; const rootContext = createRootContext(context); - const rootTask = createTask(request, model, rootContext, abortSet); + const rootTask = createTask(request, value, rootContext, abortSet); pingedTasks.push(rootTask); return request; } @@ -252,7 +255,7 @@ function serializeThenable(request: Request, thenable: Thenable<any>): number { switch (thenable.status) { case 'fulfilled': { // We have the resolved value, we can go ahead and schedule it for serialization. - newTask.model = thenable.value; + newTask.value = thenable.value; pingTask(request, newTask); return newTask.id; } @@ -298,7 +301,7 @@ function serializeThenable(request: Request, thenable: Thenable<any>): number { thenable.then( value => { - newTask.model = value; + newTask.value = value; pingTask(request, newTask); }, reason => { @@ -508,7 +511,7 @@ function pingTask(request: Request, task: Task): void { function createTask( request: Request, - model: ReactClientValue, + value: ReactClientValue, context: ContextSnapshot, abortSet: Set<Task>, ): Task { @@ -516,7 +519,7 @@ function createTask( const task: Task = { id, status: PENDING, - model, + value, context, ping: () => pingTask(request, task), thenableState: null, @@ -578,7 +581,7 @@ function serializeClientReference( } try { const clientReferenceMetadata: ClientReferenceMetadata = - resolveClientReferenceMetadata(request.bundlerConfig, clientReference); + resolveClientReferenceMetadata(request.clientManifest, clientReference); request.pendingChunks++; const importId = request.nextChunkId++; emitImportChunk(request, importId, clientReferenceMetadata); @@ -621,20 +624,20 @@ function serializeServerReference( } const bound: null | Array<any> = getServerReferenceBoundArguments( - request.bundlerConfig, + request.clientManifest, serverReference, ); const serverReferenceMetadata: { id: ServerReferenceId, bound: null | Promise<Array<any>>, } = { - id: getServerReferenceId(request.bundlerConfig, serverReference), + id: getServerReferenceId(request.clientManifest, serverReference), bound: bound ? Promise.resolve(bound) : null, }; request.pendingChunks++; const metadataId = request.nextChunkId++; // We assume that this object doesn't suspend. - const processedChunk = processModelChunk( + const processedChunk = processValueChunk( request, metadataId, serverReferenceMetadata, @@ -657,7 +660,7 @@ function escapeStringValue(value: string): string { let insideContextProps = null; let isInsideContextValue = false; -export function resolveModelToJSON( +export function resolveValueToJSON( request: Request, parent: | {+[key: string | number]: ReactClientValue} @@ -1061,7 +1064,7 @@ function retryTask(request: Request, task: Task): void { switchContext(task.context); try { - let value = task.model; + let value = task.value; if ( typeof value === 'object' && value !== null && @@ -1077,7 +1080,7 @@ function retryTask(request: Request, task: Task): void { // Attempt to render the Server Component. // Doing this here lets us reuse this same task if the next component // also suspends. - task.model = value; + task.value = value; value = attemptResolveElement( request, element.type, @@ -1101,7 +1104,7 @@ function retryTask(request: Request, task: Task): void { ) { // TODO: Concatenate keys of parents onto children. const nextElement: React$Element<any> = (value: any); - task.model = value; + task.value = value; value = attemptResolveElement( request, nextElement.type, @@ -1113,7 +1116,7 @@ function retryTask(request: Request, task: Task): void { } } - const processedChunk = processModelChunk(request, task.id, value); + const processedChunk = processValueChunk(request, task.id, value); request.completedJSONChunks.push(processedChunk); request.abortableTasks.delete(task); task.status = COMPLETED; @@ -1177,7 +1180,7 @@ function performWork(request: Request): void { function abortTask(task: Task, request: Request, errorId: number): void { task.status = ABORTED; - // Instead of emitting an error per task.id, we emit a model that only + // Instead of emitting an error per task.id, we emit a chunk that only // has a single value referencing the error. const ref = serializeByValueID(errorId); const processedChunk = processReferenceChunk(request, task.id, ref); @@ -1205,7 +1208,7 @@ function flushCompletedChunks( } } importsChunks.splice(0, i); - // Next comes model data. + // Next comes value data. const jsonChunks = request.completedJSONChunks; i = 0; for (; i < jsonChunks.length; i++) { diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js index 4377a313b374a..f22c4f827d8e0 100644 --- a/packages/react-server/src/ReactFlightServerConfigStream.js +++ b/packages/react-server/src/ReactFlightServerConfigStream.js @@ -124,13 +124,13 @@ export function processErrorChunkDev( return stringToChunk(row); } -export function processModelChunk( +export function processValueChunk( request: Request, id: number, - model: ReactClientValue, + value: ReactClientValue, ): Chunk { // $FlowFixMe[incompatible-type] stringify can return null - const json: string = stringify(model, request.toJSON); + const json: string = stringify(value, request.toJSON); const row = id.toString(16) + ':' + json + '\n'; return stringToChunk(row); } diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js index 62d2d13909cd6..b19d00526701e 100644 --- a/scripts/flow/react-relay-hooks.js +++ b/scripts/flow/react-relay-hooks.js @@ -39,6 +39,7 @@ declare module 'ReactFlightDOMRelayServerIntegration' { import type {JSResourceReference} from 'JSResourceReference'; declare export opaque type Destination; + // TODO: Rename to `ClientManifest`. declare export opaque type BundlerConfig; declare export function emitRow( destination: Destination, @@ -48,7 +49,7 @@ declare module 'ReactFlightDOMRelayServerIntegration' { declare export type ClientReferenceMetadata = JSONValue; declare export function resolveClientReferenceMetadata<T>( - config: BundlerConfig, + clientManifest: BundlerConfig, resourceReference: JSResourceReference<T>, ): ClientReferenceMetadata; } @@ -72,6 +73,7 @@ declare module 'ReactFlightNativeRelayServerIntegration' { import type {JSResourceReference} from 'JSResourceReference'; declare export opaque type Destination; + // TODO: Rename to `ClientManifest`. declare export opaque type BundlerConfig; declare export function emitRow( destination: Destination, @@ -81,7 +83,7 @@ declare module 'ReactFlightNativeRelayServerIntegration' { declare export type ClientReferenceMetadata = JSONValue; declare export function resolveClientReferenceMetadata<T>( - config: BundlerConfig, + clientManifest: BundlerConfig, resourceReference: JSResourceReference<T>, ): ClientReferenceMetadata; }