mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
Behind the `enableSrcObject` flag. This is revisiting a variant of what was discussed in #11163. Instead of supporting the [`srcObject` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject) as a separate name, this adds an overload of `src` to allow objects to be passed. The DOM needs to add separate properties for the object forms since you read back but it doesn't make sense for React's write-only API to do that. Similar to how we'll like add an overload for `popoverTarget` instead of calling it `popoverTargetElement` and how `style` accepts an object and it's not `styleObject={{...}}`. There are a number of reason to revisit this. - It's just way more convenient to have this built-in and it makes conceptual sense. We typically support declarative APIs and polyfill them when necessary. - RSC supports Blobs and by having it built-in you don't need a Client Component wrapper to render it where as doing it with effects would require more complex wrappers. By picking Blobs over base64, client-navigations can use the more optimized binary encoding in the RSC protocol. - The timing aspect of coordinating it with Suspensey images and image decoding is a bit tricky to get right because if you set it in an effect it's too late because you've already rendered it. - SSR gets complicated when done in user space because you have to handle both branches. Likely with `useSyncExternalStore`. - By having it built-in we could optimize the payloads shared between RSC payloads embedded in the HTML and data URLs. This does not support objects for `<source src>` nor `<img srcset>`. Those don't really have equivalents in the DOM neither. They're mainly for picking an option when you don't know programmatically. However, for this use case you're really better off picking a variant before generating the blobs. We may support Response objects in the future too as per https://github.com/whatwg/fetch/issues/49
196 lines
6.2 KiB
JavaScript
196 lines
6.2 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
|
|
*/
|
|
|
|
export type Destination = ReadableStreamController;
|
|
|
|
export type PrecomputedChunk = Uint8Array;
|
|
export opaque type Chunk = Uint8Array;
|
|
export type BinaryChunk = Uint8Array;
|
|
|
|
function handleErrorInNextTick(error: any) {
|
|
setTimeout(() => {
|
|
throw error;
|
|
});
|
|
}
|
|
|
|
const LocalPromise = Promise;
|
|
|
|
export const scheduleMicrotask: (callback: () => void) => void =
|
|
typeof queueMicrotask === 'function'
|
|
? queueMicrotask
|
|
: callback => {
|
|
LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick);
|
|
};
|
|
|
|
export function scheduleWork(callback: () => void) {
|
|
setTimeout(callback, 0);
|
|
}
|
|
|
|
export function flushBuffered(destination: Destination) {
|
|
// WHATWG Streams do not yet have a way to flush the underlying
|
|
// transform streams. https://github.com/whatwg/streams/issues/960
|
|
}
|
|
|
|
const VIEW_SIZE = 2048;
|
|
let currentView = null;
|
|
let writtenBytes = 0;
|
|
|
|
export function beginWriting(destination: Destination) {
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
}
|
|
|
|
export function writeChunk(
|
|
destination: Destination,
|
|
chunk: PrecomputedChunk | Chunk | BinaryChunk,
|
|
): void {
|
|
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) {
|
|
destination.enqueue(
|
|
new Uint8Array(
|
|
((currentView: any): Uint8Array).buffer,
|
|
0,
|
|
writtenBytes,
|
|
),
|
|
);
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
}
|
|
destination.enqueue(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
|
|
destination.enqueue(currentView);
|
|
} 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; // this can be skipped because we are going to immediately reset the view
|
|
destination.enqueue(currentView);
|
|
bytesToWrite = bytesToWrite.subarray(allowableBytes);
|
|
}
|
|
currentView = new Uint8Array(VIEW_SIZE);
|
|
writtenBytes = 0;
|
|
}
|
|
((currentView: any): Uint8Array).set(bytesToWrite, writtenBytes);
|
|
writtenBytes += bytesToWrite.byteLength;
|
|
}
|
|
|
|
export function writeChunkAndReturn(
|
|
destination: Destination,
|
|
chunk: PrecomputedChunk | Chunk | BinaryChunk,
|
|
): boolean {
|
|
writeChunk(destination, chunk);
|
|
// in web streams there is no backpressure so we can alwas write more
|
|
return true;
|
|
}
|
|
|
|
export function completeWriting(destination: Destination) {
|
|
if (currentView && writtenBytes > 0) {
|
|
destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
|
|
currentView = null;
|
|
writtenBytes = 0;
|
|
}
|
|
}
|
|
|
|
export function close(destination: Destination) {
|
|
destination.close();
|
|
}
|
|
|
|
const textEncoder = new TextEncoder();
|
|
|
|
export function stringToChunk(content: string): Chunk {
|
|
return textEncoder.encode(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.
|
|
// If we passed through this straight to enqueue we wouldn't have to convert it but since
|
|
// we need to copy the buffer in that case, we need to convert it to copy it.
|
|
// When we copy it into another array using set() it needs to be a Uint8Array.
|
|
const buffer = new Uint8Array(
|
|
content.buffer,
|
|
content.byteOffset,
|
|
content.byteLength,
|
|
);
|
|
// We clone large chunks so that we can transfer them when we write them.
|
|
// Others get copied into the target buffer.
|
|
return content.byteLength > VIEW_SIZE ? buffer.slice() : buffer;
|
|
}
|
|
|
|
export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {
|
|
return chunk.byteLength;
|
|
}
|
|
|
|
export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
|
|
return chunk.byteLength;
|
|
}
|
|
|
|
export function closeWithError(destination: Destination, error: mixed): void {
|
|
// $FlowFixMe[method-unbinding]
|
|
if (typeof destination.error === 'function') {
|
|
// $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
|
|
destination.error(error);
|
|
} else {
|
|
// Earlier implementations doesn't support this method. In that environment you're
|
|
// supposed to throw from a promise returned but we don't return a promise in our
|
|
// approach. We could fork this implementation but this is environment is an edge
|
|
// case to begin with. It's even less common to run this in an older environment.
|
|
// Even then, this is not where errors are supposed to happen and they get reported
|
|
// to a global callback in addition to this anyway. So it's fine just to close this.
|
|
destination.close();
|
|
}
|
|
}
|
|
|
|
export {createFastHashJS as createFastHash} from 'react-server/src/createFastHashJS';
|
|
|
|
export function readAsDataURL(blob: Blob): Promise<string> {
|
|
return blob.arrayBuffer().then(arrayBuffer => {
|
|
const encoded =
|
|
typeof Buffer === 'function' && typeof Buffer.from === 'function'
|
|
? Buffer.from(arrayBuffer).toString('base64')
|
|
: btoa(String.fromCharCode.apply(String, new Uint8Array(arrayBuffer)));
|
|
const mimeType = blob.type || 'application/octet-stream';
|
|
return 'data:' + mimeType + ';base64,' + encoded;
|
|
});
|
|
}
|