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
94 lines
2.7 KiB
JavaScript
94 lines
2.7 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 interface Destination {
|
|
push(chunk: string | null): boolean;
|
|
destroy(error: Error): mixed;
|
|
}
|
|
|
|
export opaque type PrecomputedChunk = string;
|
|
export opaque type Chunk = string;
|
|
export opaque type BinaryChunk = string;
|
|
|
|
export function scheduleWork(callback: () => void) {
|
|
callback();
|
|
}
|
|
|
|
export function scheduleMicrotask(callback: () => void) {
|
|
// While this defies the method name the legacy builds have special
|
|
// overrides that make work scheduling sync. At the moment scheduleMicrotask
|
|
// isn't used by any legacy APIs so this is somewhat academic but if they
|
|
// did in the future we'd probably want to have this be in sync with scheduleWork
|
|
callback();
|
|
}
|
|
|
|
export function flushBuffered(destination: Destination) {}
|
|
|
|
export function beginWriting(destination: Destination) {}
|
|
|
|
export function writeChunk(
|
|
destination: Destination,
|
|
chunk: Chunk | PrecomputedChunk | BinaryChunk,
|
|
): void {
|
|
writeChunkAndReturn(destination, chunk);
|
|
}
|
|
|
|
export function writeChunkAndReturn(
|
|
destination: Destination,
|
|
chunk: Chunk | PrecomputedChunk | BinaryChunk,
|
|
): boolean {
|
|
return destination.push(chunk);
|
|
}
|
|
|
|
export function completeWriting(destination: Destination) {}
|
|
|
|
export function close(destination: Destination) {
|
|
destination.push(null);
|
|
}
|
|
|
|
export function stringToChunk(content: string): Chunk {
|
|
return content;
|
|
}
|
|
|
|
export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
|
|
return content;
|
|
}
|
|
|
|
export function typedArrayToBinaryChunk(
|
|
content: $ArrayBufferView,
|
|
): BinaryChunk {
|
|
throw new Error('Not implemented.');
|
|
}
|
|
|
|
export const byteLengthOfChunk:
|
|
| null
|
|
| ((chunk: Chunk | PrecomputedChunk) => number) = null;
|
|
|
|
export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
|
|
throw new Error('Not implemented.');
|
|
}
|
|
|
|
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 {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;
|
|
});
|
|
}
|