mirror of
https://github.com/facebook/react.git
synced 2026-02-27 03:07:57 +00:00
A while back we implemented a heuristic that if a chunk was large it was assumed to be produced by the render and thus was safe to stream which results in transferring the underlying object memory. Later we ran into an issue where a precomputed chunk grew large enough to trigger this hueristic and it started causing renders to fail because once a second render had occurred the precomputed chunk would not have an underlying buffer of bytes to send and these bytes would be omitted from the stream. We implemented a technique to detect large precomputed chunks and we enforced that these always be cloned before writing. Unfortunately our test coverage was not perfect and there has been for a very long time now a usage pattern where if you complete a boundary in one flush and then complete a boundary that has stylehsheet dependencies in another flush you can get a large precomputed chunk that was not being cloned to be sent twice causing streaming errors. I've thought about why we even went with this solution in the first place and I think it was a mistake. It relies on a dev only check to catch paired with potentially version specific order of operations on the streaming side. This is too unreliable. Additionally the low limit of view size for Edge is not used in Node.js but there is not real justification for this. In this change I updated the view size for edge streaming to match Node at 2048 bytes which is still relatively small and we have no data one way or another to preference 512 over this. Then I updated the assertion logic to error anytime a precomputed chunk exceeds the size. This eliminates the need to clone these chunks by just making sure our view size is always larger than the largest precomputed chunk we can possibly write. I'm generally in favor of this for a few reasons. First, we'll always know during testing whether we've violated the limit as long as we exercise each stream config because the precomputed chunks are created in module scope. Second, we can always split up large chunks so making sure the precomptued chunk is smaller than whatever view size we actually desire is relatively trivial.
236 lines
6.6 KiB
JavaScript
236 lines
6.6 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 {Writable} from 'stream';
|
|
|
|
import {TextEncoder} from 'util';
|
|
import {createHash} from 'crypto';
|
|
|
|
interface MightBeFlushable {
|
|
flush?: () => void;
|
|
}
|
|
|
|
export type Destination = Writable & MightBeFlushable;
|
|
|
|
export type PrecomputedChunk = Uint8Array;
|
|
export opaque type Chunk = string;
|
|
export type BinaryChunk = Uint8Array;
|
|
|
|
export function scheduleWork(callback: () => void) {
|
|
setImmediate(callback);
|
|
}
|
|
|
|
export function flushBuffered(destination: Destination) {
|
|
// If we don't have any more data to send right now.
|
|
// Flush whatever is in the buffer to the wire.
|
|
if (typeof destination.flush === 'function') {
|
|
// By convention the Zlib streams provide a flush function for this purpose.
|
|
// For Express, compression middleware adds this method.
|
|
destination.flush();
|
|
}
|
|
}
|
|
|
|
const VIEW_SIZE = 2048;
|
|
let currentView = null;
|
|
let writtenBytes = 0;
|
|
let destinationHasCapacity = true;
|
|
|
|
export function beginWriting(destination: Destination) {
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
destinationHasCapacity = true;
|
|
}
|
|
|
|
function writeStringChunk(destination: Destination, stringChunk: string) {
|
|
if (stringChunk.length === 0) {
|
|
return;
|
|
}
|
|
// maximum possible view needed to encode entire string
|
|
if (stringChunk.length * 3 > VIEW_SIZE) {
|
|
if (writtenBytes > 0) {
|
|
writeToDestination(
|
|
destination,
|
|
((currentView: any): Uint8Array).subarray(0, writtenBytes),
|
|
);
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
}
|
|
writeToDestination(destination, textEncoder.encode(stringChunk));
|
|
return;
|
|
}
|
|
|
|
let target: Uint8Array = (currentView: any);
|
|
if (writtenBytes > 0) {
|
|
target = ((currentView: any): Uint8Array).subarray(writtenBytes);
|
|
}
|
|
const {read, written} = textEncoder.encodeInto(stringChunk, target);
|
|
writtenBytes += written;
|
|
|
|
if (read < stringChunk.length) {
|
|
writeToDestination(
|
|
destination,
|
|
(currentView: any).subarray(0, writtenBytes),
|
|
);
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = textEncoder.encodeInto(
|
|
stringChunk.slice(read),
|
|
(currentView: any),
|
|
).written;
|
|
}
|
|
|
|
if (writtenBytes === VIEW_SIZE) {
|
|
writeToDestination(destination, (currentView: any));
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
}
|
|
}
|
|
|
|
function writeViewChunk(
|
|
destination: Destination,
|
|
chunk: PrecomputedChunk | BinaryChunk,
|
|
) {
|
|
if (chunk.byteLength === 0) {
|
|
return;
|
|
}
|
|
if (chunk.byteLength > VIEW_SIZE) {
|
|
// this chunk may overflow a single view which implies it was not
|
|
// one that is cached by the streaming renderer. We will enqueu
|
|
// it directly and expect it is not re-used
|
|
if (writtenBytes > 0) {
|
|
writeToDestination(
|
|
destination,
|
|
((currentView: any): Uint8Array).subarray(0, writtenBytes),
|
|
);
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
}
|
|
writeToDestination(destination, chunk);
|
|
return;
|
|
}
|
|
|
|
let bytesToWrite = chunk;
|
|
const allowableBytes = ((currentView: any): Uint8Array).length - writtenBytes;
|
|
if (allowableBytes < bytesToWrite.byteLength) {
|
|
// this chunk would overflow the current view. We enqueue a full view
|
|
// and start a new view with the remaining chunk
|
|
if (allowableBytes === 0) {
|
|
// the current view is already full, send it
|
|
writeToDestination(destination, (currentView: any));
|
|
} else {
|
|
// fill up the current view and apply the remaining chunk bytes
|
|
// to a new view.
|
|
((currentView: any): Uint8Array).set(
|
|
bytesToWrite.subarray(0, allowableBytes),
|
|
writtenBytes,
|
|
);
|
|
writtenBytes += allowableBytes;
|
|
writeToDestination(destination, (currentView: any));
|
|
bytesToWrite = bytesToWrite.subarray(allowableBytes);
|
|
}
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
}
|
|
((currentView: any): Uint8Array).set(bytesToWrite, writtenBytes);
|
|
writtenBytes += bytesToWrite.byteLength;
|
|
|
|
if (writtenBytes === VIEW_SIZE) {
|
|
writeToDestination(destination, (currentView: any));
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
}
|
|
}
|
|
|
|
export function writeChunk(
|
|
destination: Destination,
|
|
chunk: PrecomputedChunk | Chunk | BinaryChunk,
|
|
): void {
|
|
if (typeof chunk === 'string') {
|
|
writeStringChunk(destination, chunk);
|
|
} else {
|
|
writeViewChunk(destination, ((chunk: any): PrecomputedChunk | BinaryChunk));
|
|
}
|
|
}
|
|
|
|
function writeToDestination(
|
|
destination: Destination,
|
|
view: string | Uint8Array,
|
|
) {
|
|
const currentHasCapacity = destination.write(view);
|
|
destinationHasCapacity = destinationHasCapacity && currentHasCapacity;
|
|
}
|
|
|
|
export function writeChunkAndReturn(
|
|
destination: Destination,
|
|
chunk: PrecomputedChunk | Chunk,
|
|
): boolean {
|
|
writeChunk(destination, chunk);
|
|
return destinationHasCapacity;
|
|
}
|
|
|
|
export function completeWriting(destination: Destination) {
|
|
if (currentView && writtenBytes > 0) {
|
|
destination.write(currentView.subarray(0, writtenBytes));
|
|
}
|
|
currentView = null;
|
|
writtenBytes = 0;
|
|
destinationHasCapacity = true;
|
|
}
|
|
|
|
export function close(destination: Destination) {
|
|
destination.end();
|
|
}
|
|
|
|
const textEncoder = new TextEncoder();
|
|
|
|
export function stringToChunk(content: string): Chunk {
|
|
return content;
|
|
}
|
|
|
|
export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
|
|
const precomputedChunk = textEncoder.encode(content);
|
|
|
|
if (__DEV__) {
|
|
if (precomputedChunk.byteLength > VIEW_SIZE) {
|
|
console.error(
|
|
'precomputed chunks must be smaller than the view size configured for this host. This is a bug in React.',
|
|
);
|
|
}
|
|
}
|
|
|
|
return precomputedChunk;
|
|
}
|
|
|
|
export function typedArrayToBinaryChunk(
|
|
content: $ArrayBufferView,
|
|
): BinaryChunk {
|
|
// Convert any non-Uint8Array array to Uint8Array. We could avoid this for Uint8Arrays.
|
|
return new Uint8Array(content.buffer, content.byteOffset, content.byteLength);
|
|
}
|
|
|
|
export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {
|
|
return typeof chunk === 'string'
|
|
? Buffer.byteLength(chunk, 'utf8')
|
|
: chunk.byteLength;
|
|
}
|
|
|
|
export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
|
|
return chunk.byteLength;
|
|
}
|
|
|
|
export function closeWithError(destination: Destination, error: mixed): void {
|
|
// $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
|
|
destination.destroy(error);
|
|
}
|
|
|
|
export function createFastHash(input: string): string | number {
|
|
const hash = createHash('md5');
|
|
hash.update(input);
|
|
return hash.digest('hex');
|
|
}
|