mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian MarkbågeandGitHub
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
20 lines
516 B
JavaScript
20 lines
516 B
JavaScript
import * as React from 'react';
|
|
|
|
import {createCanvas} from 'canvas';
|
|
|
|
export async function GenerateImage({message}) {
|
|
// Generate an image using an image library
|
|
const canvas = createCanvas(200, 70);
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.font = '20px Impact';
|
|
ctx.rotate(-0.1);
|
|
ctx.fillText(message, 10, 50);
|
|
|
|
// Rasterize into a Blob with a mime type
|
|
const type = 'image/png';
|
|
const blob = new Blob([canvas.toBuffer(type)], {type});
|
|
|
|
// Just pass it to React
|
|
return <img src={blob} />;
|
|
}
|