@samitouri / QOS-React-2 / commits / cbb6f2b546

[Flight] Support Blobs from Server to Client (#28755)

We currently support Blobs when passing from Client to Server so this adds it in the other direction for parity - when `enableFlightBinary` is enabled. We intentionally only support the `Blob` type to pass-through, not subtype `File`. That's because passing additional meta data like filename might be an accidental leak. You can still pass a `File` through but it'll appear as a `Blob` on the other side. It's also not possible to create a faithful File subclass in all environments without it actually being backed by a file. This implementation isn't great but at least it works. It creates a few indirections. This is because we need to be able to asynchronously emit the buffers but we have to "block" the parent object from resolving while it's loading. Ideally, we should be able to create the Blob on the client early and then stream in it lazily. Because the Blob API doesn't guarantee that the data is available synchronously. Unfortunately, the native APIs doesn't have this. We could implement custom versions of all the data read APIs but then the blobs still wouldn't work with native APIs. So we just have to wait until Blob accepts a stream in the constructor. We should be able to stream each chunk early in the protocol though even though we can't unblock the parent until they've all loaded. I didn't do this yet mostly because of code structure and I'm lazy.

Sebastian Markbåge committed Apr 5, 2024 at 12:49 UTC cbb6f2b5461cdce282c7e47b9c68a0897d393383

3 files changed +85

packages/react-client/src/ReactFlightClient.js

@@ -737,6 +737,15 @@ function parseModelString(

737 const data = getOutlinedModel(response, id);

738 return new Set(data);

739 }

740 + case 'B': {

741 + // Blob

742 + if (enableBinaryFlight) {

743 + const id = parseInt(value.slice(2), 16);

744 + const data = getOutlinedModel(response, id);

745 + return new Blob(data.slice(1), {type: data[0]});

746 + }

747 + return undefined;

748 + }

749 case 'I': {

750 // $Infinity

751 return Infinity;

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js

+26

@@ -5,6 +5,7 @@

5 * LICENSE file in the root directory of this source tree.

6 *

7 * @emails react-core

8 + * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment

9 */

11 'use strict';

@@ -14,6 +15,9 @@ global.ReadableStream =

15 require('web-streams-polyfill/ponyfill/es6').ReadableStream;

16 global.TextEncoder = require('util').TextEncoder;

17 global.TextDecoder = require('util').TextDecoder;

18 +if (typeof Blob === 'undefined') {

19 + global.Blob = require('buffer').Blob;

20 +}

22 // Don't wait before processing work on the server.

23 // TODO: we can replace this with FlightServer.act().

@@ -326,6 +330,28 @@ describe('ReactFlightDOMEdge', () => {

330 expect(result).toEqual(buffers);

331 });

332

333 + // @gate enableBinaryFlight

334 + it('should be able to serialize a blob', async () => {

335 + const bytes = new Uint8Array([

336 + 123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,

337 + ]);

338 + const blob = new Blob([bytes, bytes], {

339 + type: 'application/x-test',

340 + });

341 + const stream = passThrough(

342 + ReactServerDOMServer.renderToReadableStream(blob),

343 + );

344 + const result = await ReactServerDOMClient.createFromReadableStream(stream, {

345 + ssrManifest: {

346 + moduleMap: null,

347 + moduleLoading: null,

348 + },

349 + });

350 + expect(result instanceof Blob).toBe(true);

351 + expect(result.size).toBe(bytes.length * 2);

352 + expect(await result.arrayBuffer()).toEqual(await blob.arrayBuffer());

353 + });

354 +

355 it('warns if passing a this argument to bind() of a server reference', async () => {

356 const ServerModule = serverExports({

357 greet: function () {},

packages/react-server/src/ReactFlightServer.js

+50

@@ -239,6 +239,8 @@ export type ReactClientValue =

239 | Array<ReactClientValue>

240 | Map<ReactClientValue, ReactClientValue>

241 | Set<ReactClientValue>

242 + | $ArrayBufferView

243 + | ArrayBuffer

244 | Date

245 | ReactClientObject

246 | Promise<ReactClientValue>; // Thenable<ReactClientValue>

@@ -1229,6 +1231,46 @@ function serializeTypedArray(

1231 return serializeByValueID(bufferId);

1232 }

1233

1234 +function serializeBlob(request: Request, blob: Blob): string {

1235 + const id = request.nextChunkId++;

1236 + request.pendingChunks++;

1237 +

1238 + const reader = blob.stream().getReader();

1239 +

1240 + const model: Array<string | Uint8Array> = [blob.type];

1241 +

1242 + function progress(

1243 + entry: {done: false, value: Uint8Array} | {done: true, value: void},

1244 + ): Promise<void> | void {

1245 + if (entry.done) {

1246 + const blobId = outlineModel(request, model);

1247 + const blobReference = '$B' + blobId.toString(16);

1248 + const processedChunk = encodeReferenceChunk(request, id, blobReference);

1249 + request.completedRegularChunks.push(processedChunk);

1250 + if (request.destination !== null) {

1251 + flushCompletedChunks(request, request.destination);

1252 + }

1253 + return;

1254 + }

1255 + // TODO: Emit the chunk early and refer to it later.

1256 + model.push(entry.value);

1257 + // $FlowFixMe[incompatible-call]

1258 + return reader.read().then(progress).catch(error);

1259 + }

1260 +

1261 + function error(reason: mixed) {

1262 + const digest = logRecoverableError(request, reason);

1263 + emitErrorChunk(request, id, digest, reason);

1264 + if (request.destination !== null) {

1265 + flushCompletedChunks(request, request.destination);

1266 + }

1267 + }

1268 + // $FlowFixMe[incompatible-call]

1269 + reader.read().then(progress).catch(error);

1270 +

1271 + return '$' + id.toString(16);

1272 +}

1273 +

1274 function escapeStringValue(value: string): string {

1275 if (value[0] === '$') {

1276 // We need to escape $ prefixed strings since we use those to encode

@@ -1606,6 +1648,10 @@ function renderModelDestructive(

1648 if (value instanceof DataView) {

1649 return serializeTypedArray(request, 'V', value);

1650 }

1651 + // TODO: Blob is not available in old Node. Remove the typeof check later.

1652 + if (typeof Blob === 'function' && value instanceof Blob) {

1653 + return serializeBlob(request, value);

1654 + }

1655 }

1656

1657 const iteratorFn = getIteratorFn(value);

@@ -2146,6 +2192,10 @@ function renderConsoleValue(

2192 if (value instanceof DataView) {

2193 return serializeTypedArray(request, 'V', value);

2194 }

2195 + // TODO: Blob is not available in old Node. Remove the typeof check later.

2196 + if (typeof Blob === 'function' && value instanceof Blob) {

2197 + return serializeBlob(request, value);

2198 + }

2199 }

2200

2201 const iteratorFn = getIteratorFn(value);