dillon1000/react
Commit
Browse files Allow Passing Blob/File/MediaSource/MediaStream to src of <img>, <video> and <audio> (#32828)
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/49Changed paths25 files
First-parent comparisonfixtures/flight/package.json ModifiedM fixtures/flight/src/App.js ModifiedA fixtures/flight/src/GenerateImage.js AddedM fixtures/flight/yarn.lock ModifiedM packages/react-dom-bindings/src/client/ReactDOMComponent.js ModifiedA packages/react-dom-bindings/src/client/ReactDOMSrcObject.js AddedM packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js ModifiedM packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js ModifiedM packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js ModifiedM packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js ModifiedA packages/react-dom/src/__tests__/ReactDOMSrcObject-test.js AddedM packages/react-reconciler/src/ReactFiberHydrationDiffs.js ModifiedM packages/react-server/src/ReactServerStreamConfigBrowser.js ModifiedM packages/react-server/src/ReactServerStreamConfigBun.js ModifiedM packages/react-server/src/ReactServerStreamConfigEdge.js ModifiedM packages/react-server/src/ReactServerStreamConfigFB.js ModifiedM packages/react-server/src/ReactServerStreamConfigNode.js ModifiedM packages/react-server/src/forks/ReactServerStreamConfig.custom.js ModifiedM packages/shared/ReactFeatureFlags.js ModifiedM packages/shared/forks/ReactFeatureFlags.native-fb.js ModifiedM packages/shared/forks/ReactFeatureFlags.native-oss.js ModifiedM packages/shared/forks/ReactFeatureFlags.test-renderer.js ModifiedM packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js ModifiedM packages/shared/forks/ReactFeatureFlags.test-renderer.www.js ModifiedM packages/shared/forks/ReactFeatureFlags.www.js ModifiedPatch
Files changed
Rendering syntax-highlighted changes…