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
49 lines
1.9 KiB
JavaScript
49 lines
1.9 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
|
|
*/
|
|
|
|
// This is a host config that's used for the `react-server` package on npm.
|
|
// It is only used by third-party renderers.
|
|
//
|
|
// Its API lets you pass the host config as an argument.
|
|
// However, inside the `react-server` we treat host config as a module.
|
|
// This file is a shim between two worlds.
|
|
//
|
|
// It works because the `react-server` bundle is wrapped in something like:
|
|
//
|
|
// module.exports = function ($$$config) {
|
|
// /* renderer code */
|
|
// }
|
|
//
|
|
// So `$$$config` looks like a global variable, but it's
|
|
// really an argument to a top-level wrapping function.
|
|
|
|
declare const $$$config: any;
|
|
export opaque type Destination = mixed;
|
|
|
|
export opaque type PrecomputedChunk = mixed;
|
|
export opaque type Chunk = mixed;
|
|
export opaque type BinaryChunk = mixed;
|
|
|
|
export const scheduleWork = $$$config.scheduleWork;
|
|
export const scheduleMicrotask = $$$config.scheduleMicrotask;
|
|
export const beginWriting = $$$config.beginWriting;
|
|
export const writeChunk = $$$config.writeChunk;
|
|
export const writeChunkAndReturn = $$$config.writeChunkAndReturn;
|
|
export const completeWriting = $$$config.completeWriting;
|
|
export const flushBuffered = $$$config.flushBuffered;
|
|
export const close = $$$config.close;
|
|
export const closeWithError = $$$config.closeWithError;
|
|
export const stringToChunk = $$$config.stringToChunk;
|
|
export const stringToPrecomputedChunk = $$$config.stringToPrecomputedChunk;
|
|
export const typedArrayToBinaryChunk = $$$config.typedArrayToBinaryChunk;
|
|
export const byteLengthOfChunk = $$$config.byteLengthOfChunk;
|
|
export const byteLengthOfBinaryChunk = $$$config.byteLengthOfBinaryChunk;
|
|
export const createFastHash = $$$config.createFastHash;
|
|
export const readAsDataURL = $$$config.readAsDataURL;
|