mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian Markbåge
ea05b750a5
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
114 lines
3.3 KiB
JavaScript
114 lines
3.3 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
|
|
*/
|
|
|
|
/* global Bun */
|
|
|
|
type BunReadableStreamController = ReadableStreamController & {
|
|
end(): mixed,
|
|
write(data: Chunk | BinaryChunk): void,
|
|
error(error: Error): void,
|
|
flush?: () => void,
|
|
};
|
|
export type Destination = BunReadableStreamController;
|
|
|
|
export type PrecomputedChunk = string;
|
|
export opaque type Chunk = string;
|
|
export type BinaryChunk = $ArrayBufferView;
|
|
|
|
export function scheduleWork(callback: () => void) {
|
|
setTimeout(callback, 0);
|
|
}
|
|
|
|
export const scheduleMicrotask = queueMicrotask;
|
|
|
|
export function flushBuffered(destination: Destination) {
|
|
// Bun direct streams provide a flush function.
|
|
// 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') {
|
|
destination.flush();
|
|
}
|
|
}
|
|
|
|
export function beginWriting(destination: Destination) {}
|
|
|
|
export function writeChunk(
|
|
destination: Destination,
|
|
chunk: PrecomputedChunk | Chunk | BinaryChunk,
|
|
): void {
|
|
if (chunk.length === 0) {
|
|
return;
|
|
}
|
|
|
|
destination.write(chunk);
|
|
}
|
|
|
|
export function writeChunkAndReturn(
|
|
destination: Destination,
|
|
chunk: PrecomputedChunk | Chunk | BinaryChunk,
|
|
): boolean {
|
|
return !!destination.write(chunk);
|
|
}
|
|
|
|
export function completeWriting(destination: Destination) {}
|
|
|
|
export function close(destination: Destination) {
|
|
destination.end();
|
|
}
|
|
|
|
export function stringToChunk(content: string): Chunk {
|
|
return content;
|
|
}
|
|
|
|
export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
|
|
return content;
|
|
}
|
|
|
|
export function typedArrayToBinaryChunk(
|
|
content: $ArrayBufferView,
|
|
): BinaryChunk {
|
|
// TODO: Does this needs to be cloned if it's transferred in enqueue()?
|
|
return content;
|
|
}
|
|
|
|
export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {
|
|
return Buffer.byteLength(chunk, 'utf8');
|
|
}
|
|
|
|
export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
|
|
return chunk.byteLength;
|
|
}
|
|
|
|
export function closeWithError(destination: Destination, error: mixed): void {
|
|
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 function createFastHash(input: string): string | number {
|
|
return Bun.hash(input);
|
|
}
|
|
|
|
export function readAsDataURL(blob: Blob): Promise<string> {
|
|
return blob.arrayBuffer().then(arrayBuffer => {
|
|
const encoded = Buffer.from(arrayBuffer).toString('base64');
|
|
const mimeType = blob.type || 'application/octet-stream';
|
|
return 'data:' + mimeType + ';base64,' + encoded;
|
|
});
|
|
}
|