mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
This adds a new `react-server-dom-parcel-package`, which is an RSC integration for the Parcel bundler. It is mostly copied from the existing webpack/turbopack integrations, with some changes to utilize Parcel runtime APIs for loading and executing bundles/modules. See https://github.com/parcel-bundler/parcel/pull/10043 for the Parcel side of this, which includes the plugin needed to generate client and server references. https://github.com/parcel-bundler/rsc-examples also includes examples of various ways to use RSCs with Parcel. Differences from other integrations: * Client and server modules are all part of the same graph, and we use Parcel's [environments](https://parceljs.org/plugin-system/transformer/#the-environment) to distinguish them. The server is the Parcel build entry point, and it imports and renders server components in route handlers. When a `"use client"` directive is seen, the environment changes and Parcel creates a new client bundle for the page, combining all client modules together. CSS from both client and server components are also combined automatically. * There is no separate manifest file that needs to be passed around by the user. A [Runtime](https://parceljs.org/plugin-system/runtime/) plugin injects client and server references as needed into the relevant bundles, and registers server action ids using `react-server-dom-parcel` automatically. * A special `<Resources>` component is also generated by Parcel to render the `<script>` and `<link rel="stylesheet">` elements needed for a page, using the relevant info from the bundle graph. Note: I've already published a 0.0.x version of this package to npm for testing purposes but happy to add whoever needs access to it as well. ### Questions * How to test this in the React repo. I'll have integration tests in Parcel, but setting up all the different mocks and environments to simulate that here seems challenging. I could try to copy how Webpack/Turbopack do it but it's a bit different. * Where to put TypeScript types. Right now I have some ambient types in my [example repo](https://github.com/parcel-bundler/rsc-examples/blob/main/types.d.ts) but it would be nice for users not to copy and paste these. Can I include them in the package or do they need to maintained separately in definitelytyped? I would really prefer not to have to maintain code in three different repos ideally. --------- Co-authored-by: Sebastian Markbage <sebastian@calyptus.eu>
318 lines
8.8 KiB
JavaScript
318 lines
8.8 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import type {
|
|
Request,
|
|
ReactClientValue,
|
|
} from 'react-server/src/ReactFlightServer';
|
|
import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
|
|
import type {Busboy} from 'busboy';
|
|
import type {Writable} from 'stream';
|
|
import type {ReactFormState, Thenable} from 'shared/ReactTypes';
|
|
import type {
|
|
ServerManifest,
|
|
ServerReferenceId,
|
|
} from '../shared/ReactFlightClientConfigBundlerParcel';
|
|
|
|
import {Readable} from 'stream';
|
|
import {
|
|
createRequest,
|
|
createPrerenderRequest,
|
|
startWork,
|
|
startFlowing,
|
|
stopFlowing,
|
|
abort,
|
|
} from 'react-server/src/ReactFlightServer';
|
|
|
|
import {
|
|
createResponse,
|
|
reportGlobalError,
|
|
close,
|
|
resolveField,
|
|
resolveFileInfo,
|
|
resolveFileChunk,
|
|
resolveFileComplete,
|
|
getRoot,
|
|
} from 'react-server/src/ReactFlightReplyServer';
|
|
|
|
import {
|
|
decodeAction as decodeActionImpl,
|
|
decodeFormState as decodeFormStateImpl,
|
|
} from 'react-server/src/ReactFlightActionServer';
|
|
import {
|
|
preloadModule,
|
|
requireModule,
|
|
resolveServerReference,
|
|
} from '../shared/ReactFlightClientConfigBundlerParcel';
|
|
|
|
export {
|
|
createClientReference,
|
|
registerServerReference,
|
|
} from '../ReactFlightParcelReferences';
|
|
|
|
import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
|
|
|
|
export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
|
|
export type {TemporaryReferenceSet};
|
|
|
|
function createDrainHandler(destination: Destination, request: Request) {
|
|
return () => startFlowing(request, destination);
|
|
}
|
|
|
|
function createCancelHandler(request: Request, reason: string) {
|
|
return () => {
|
|
stopFlowing(request);
|
|
abort(request, new Error(reason));
|
|
};
|
|
}
|
|
|
|
type Options = {
|
|
environmentName?: string | (() => string),
|
|
filterStackFrame?: (url: string, functionName: string) => boolean,
|
|
onError?: (error: mixed) => void,
|
|
onPostpone?: (reason: string) => void,
|
|
identifierPrefix?: string,
|
|
temporaryReferences?: TemporaryReferenceSet,
|
|
};
|
|
|
|
type PipeableStream = {
|
|
abort(reason: mixed): void,
|
|
pipe<T: Writable>(destination: T): T,
|
|
};
|
|
|
|
export function renderToPipeableStream(
|
|
model: ReactClientValue,
|
|
options?: Options,
|
|
): PipeableStream {
|
|
const request = createRequest(
|
|
model,
|
|
null,
|
|
options ? options.onError : undefined,
|
|
options ? options.identifierPrefix : undefined,
|
|
options ? options.onPostpone : undefined,
|
|
options ? options.temporaryReferences : undefined,
|
|
__DEV__ && options ? options.environmentName : undefined,
|
|
__DEV__ && options ? options.filterStackFrame : undefined,
|
|
);
|
|
let hasStartedFlowing = false;
|
|
startWork(request);
|
|
return {
|
|
pipe<T: Writable>(destination: T): T {
|
|
if (hasStartedFlowing) {
|
|
throw new Error(
|
|
'React currently only supports piping to one writable stream.',
|
|
);
|
|
}
|
|
hasStartedFlowing = true;
|
|
startFlowing(request, destination);
|
|
destination.on('drain', createDrainHandler(destination, request));
|
|
destination.on(
|
|
'error',
|
|
createCancelHandler(
|
|
request,
|
|
'The destination stream errored while writing data.',
|
|
),
|
|
);
|
|
destination.on(
|
|
'close',
|
|
createCancelHandler(request, 'The destination stream closed early.'),
|
|
);
|
|
return destination;
|
|
},
|
|
abort(reason: mixed) {
|
|
abort(request, reason);
|
|
},
|
|
};
|
|
}
|
|
|
|
function createFakeWritable(readable: any): Writable {
|
|
// The current host config expects a Writable so we create
|
|
// a fake writable for now to push into the Readable.
|
|
return ({
|
|
write(chunk) {
|
|
return readable.push(chunk);
|
|
},
|
|
end() {
|
|
readable.push(null);
|
|
},
|
|
destroy(error) {
|
|
readable.destroy(error);
|
|
},
|
|
}: any);
|
|
}
|
|
|
|
type PrerenderOptions = {
|
|
environmentName?: string | (() => string),
|
|
filterStackFrame?: (url: string, functionName: string) => boolean,
|
|
onError?: (error: mixed) => void,
|
|
onPostpone?: (reason: string) => void,
|
|
identifierPrefix?: string,
|
|
temporaryReferences?: TemporaryReferenceSet,
|
|
signal?: AbortSignal,
|
|
};
|
|
|
|
type StaticResult = {
|
|
prelude: Readable,
|
|
};
|
|
|
|
export function prerenderToNodeStream(
|
|
model: ReactClientValue,
|
|
options?: PrerenderOptions,
|
|
): Promise<StaticResult> {
|
|
return new Promise((resolve, reject) => {
|
|
const onFatalError = reject;
|
|
function onAllReady() {
|
|
const readable: Readable = new Readable({
|
|
read() {
|
|
startFlowing(request, writable);
|
|
},
|
|
});
|
|
const writable = createFakeWritable(readable);
|
|
resolve({prelude: readable});
|
|
}
|
|
|
|
const request = createPrerenderRequest(
|
|
model,
|
|
null,
|
|
onAllReady,
|
|
onFatalError,
|
|
options ? options.onError : undefined,
|
|
options ? options.identifierPrefix : undefined,
|
|
options ? options.onPostpone : undefined,
|
|
options ? options.temporaryReferences : undefined,
|
|
__DEV__ && options ? options.environmentName : undefined,
|
|
__DEV__ && options ? options.filterStackFrame : undefined,
|
|
);
|
|
if (options && options.signal) {
|
|
const signal = options.signal;
|
|
if (signal.aborted) {
|
|
const reason = (signal: any).reason;
|
|
abort(request, reason);
|
|
} else {
|
|
const listener = () => {
|
|
const reason = (signal: any).reason;
|
|
abort(request, reason);
|
|
signal.removeEventListener('abort', listener);
|
|
};
|
|
signal.addEventListener('abort', listener);
|
|
}
|
|
}
|
|
startWork(request);
|
|
});
|
|
}
|
|
|
|
let serverManifest = {};
|
|
export function registerServerActions(manifest: ServerManifest) {
|
|
// This function is called by the bundler to register the manifest.
|
|
serverManifest = manifest;
|
|
}
|
|
|
|
export function decodeReplyFromBusboy<T>(
|
|
busboyStream: Busboy,
|
|
options?: {temporaryReferences?: TemporaryReferenceSet},
|
|
): Thenable<T> {
|
|
const response = createResponse(
|
|
serverManifest,
|
|
'',
|
|
options ? options.temporaryReferences : undefined,
|
|
);
|
|
let pendingFiles = 0;
|
|
const queuedFields: Array<string> = [];
|
|
busboyStream.on('field', (name, value) => {
|
|
if (pendingFiles > 0) {
|
|
// Because the 'end' event fires two microtasks after the next 'field'
|
|
// we would resolve files and fields out of order. To handle this properly
|
|
// we queue any fields we receive until the previous file is done.
|
|
queuedFields.push(name, value);
|
|
} else {
|
|
resolveField(response, name, value);
|
|
}
|
|
});
|
|
busboyStream.on('file', (name, value, {filename, encoding, mimeType}) => {
|
|
if (encoding.toLowerCase() === 'base64') {
|
|
throw new Error(
|
|
"React doesn't accept base64 encoded file uploads because we don't expect " +
|
|
"form data passed from a browser to ever encode data that way. If that's " +
|
|
'the wrong assumption, we can easily fix it.',
|
|
);
|
|
}
|
|
pendingFiles++;
|
|
const file = resolveFileInfo(response, name, filename, mimeType);
|
|
value.on('data', chunk => {
|
|
resolveFileChunk(response, file, chunk);
|
|
});
|
|
value.on('end', () => {
|
|
resolveFileComplete(response, name, file);
|
|
pendingFiles--;
|
|
if (pendingFiles === 0) {
|
|
// Release any queued fields
|
|
for (let i = 0; i < queuedFields.length; i += 2) {
|
|
resolveField(response, queuedFields[i], queuedFields[i + 1]);
|
|
}
|
|
queuedFields.length = 0;
|
|
}
|
|
});
|
|
});
|
|
busboyStream.on('finish', () => {
|
|
close(response);
|
|
});
|
|
busboyStream.on('error', err => {
|
|
reportGlobalError(
|
|
response,
|
|
// $FlowFixMe[incompatible-call] types Error and mixed are incompatible
|
|
err,
|
|
);
|
|
});
|
|
return getRoot(response);
|
|
}
|
|
|
|
export function decodeReply<T>(
|
|
body: string | FormData,
|
|
options?: {temporaryReferences?: TemporaryReferenceSet},
|
|
): Thenable<T> {
|
|
if (typeof body === 'string') {
|
|
const form = new FormData();
|
|
form.append('0', body);
|
|
body = form;
|
|
}
|
|
const response = createResponse(
|
|
serverManifest,
|
|
'',
|
|
options ? options.temporaryReferences : undefined,
|
|
body,
|
|
);
|
|
const root = getRoot<T>(response);
|
|
close(response);
|
|
return root;
|
|
}
|
|
|
|
export function decodeAction<T>(body: FormData): Promise<() => T> | null {
|
|
return decodeActionImpl(body, serverManifest);
|
|
}
|
|
|
|
export function decodeFormState<S>(
|
|
actionResult: S,
|
|
body: FormData,
|
|
): Promise<ReactFormState<S, ServerReferenceId> | null> {
|
|
return decodeFormStateImpl(actionResult, body, serverManifest);
|
|
}
|
|
|
|
export function loadServerAction<F: (...any[]) => any>(id: string): Promise<F> {
|
|
const reference = resolveServerReference<any>(serverManifest, id);
|
|
return Promise.resolve(reference)
|
|
.then(() => preloadModule(reference))
|
|
.then(() => {
|
|
const fn = requireModule(reference);
|
|
if (typeof fn !== 'function') {
|
|
throw new Error('Server actions must be functions');
|
|
}
|
|
return fn;
|
|
});
|
|
}
|