[Flight] Allow lazily resolving outlined models (#28780)
We used to assume that outlined models are emitted before the reference (which was true before Blobs). However, it still wasn't safe to assume that all the data will be available because an "import" (client reference) can be async and therefore if it's directly a child of an outlined model, it won't be able to update in place. This is a similar problem as the one hit by @unstubbable in #28669 with elements, but a little different since these don't follow the same way of wrapping. I don't love the structuring of this code which now needs to pass a first class mapper instead of just being known code. It also shares the host path which is just an identity function. It wouldn't necessarily pass my own review but I don't have a better one for now. I'd really prefer if this was done at a "row" level but that ends up creating even more code. Add test for Blob in FormData and async modules in Maps.
Sebastian Markbåge committed
Apr 8, 2024 at 15:40 UTC
14f50ad1554f0adf20fa1b5bc62859ed32be0bc6
3 files changed
+197
-91
packages/react-client/src/ReactFlightClient.js
+106
-77
@@ -581,6 +581,8 @@ function createModelResolver<T>(
581
parentObject: Object,
582
key: string,
583
cyclic: boolean,
584
+ response: Response,
585
+ map: (response: Response, model: any) => T,
586
): (value: any) => void {
587
let blocked;
588
if (initializingChunkBlockedModel) {
@@ -595,12 +597,12 @@ function createModelResolver<T>(
597
};
598
}
599
return value => {
598
- parentObject[key] = value;
600
+ parentObject[key] = map(response, value);
601
602
// If this is the root object for a model reference, where `blocked.value`
603
// is a stale `null`, the resolved value can be used directly.
604
if (key === '' && blocked.value === null) {
603
- blocked.value = value;
605
+ blocked.value = parentObject[key];
606
}
607
608
blocked.deps--;
@@ -651,24 +653,103 @@ function createServerReferenceProxy<A: Iterable<any>, T>(
653
return proxy;
654
}
655
654
-function getOutlinedModel(response: Response, id: number): any {
656
+function getOutlinedModel<T>(
657
+ response: Response,
658
+ id: number,
659
+ parentObject: Object,
660
+ key: string,
661
+ map: (response: Response, model: any) => T,
662
+): T {
663
const chunk = getChunk(response, id);
664
switch (chunk.status) {
665
case RESOLVED_MODEL:
666
initializeModelChunk(chunk);
667
break;
668
+ case RESOLVED_MODULE:
669
+ initializeModuleChunk(chunk);
670
+ break;
671
}
672
// The status might have changed after initialization.
673
switch (chunk.status) {
663
- case INITIALIZED: {
664
- return chunk.value;
665
- }
666
- // We always encode it first in the stream so it won't be pending.
674
+ case INITIALIZED:
675
+ const chunkValue = map(response, chunk.value);
676
+ if (__DEV__ && chunk._debugInfo) {
677
+ // If we have a direct reference to an object that was rendered by a synchronous
678
+ // server component, it might have some debug info about how it was rendered.
679
+ // We forward this to the underlying object. This might be a React Element or
680
+ // an Array fragment.
681
+ // If this was a string / number return value we lose the debug info. We choose
682
+ // that tradeoff to allow sync server components to return plain values and not
683
+ // use them as React Nodes necessarily. We could otherwise wrap them in a Lazy.
684
+ if (
685
+ typeof chunkValue === 'object' &&
686
+ chunkValue !== null &&
687
+ (Array.isArray(chunkValue) ||
688
+ chunkValue.$$typeof === REACT_ELEMENT_TYPE) &&
689
+ !chunkValue._debugInfo
690
+ ) {
691
+ // We should maybe use a unique symbol for arrays but this is a React owned array.
692
+ // $FlowFixMe[prop-missing]: This should be added to elements.
693
+ Object.defineProperty((chunkValue: any), '_debugInfo', {
694
+ configurable: false,
695
+ enumerable: false,
696
+ writable: true,
697
+ value: chunk._debugInfo,
698
+ });
699
+ }
700
+ }
701
+ return chunkValue;
702
+ case PENDING:
703
+ case BLOCKED:
704
+ case CYCLIC:
705
+ const parentChunk = initializingChunk;
706
+ chunk.then(
707
+ createModelResolver(
708
+ parentChunk,
709
+ parentObject,
710
+ key,
711
+ chunk.status === CYCLIC,
712
+ response,
713
+ map,
714
+ ),
715
+ createModelReject(parentChunk),
716
+ );
717
+ return (null: any);
718
default:
719
throw chunk.reason;
720
}
721
}
722
723
+function createMap(
724
+ response: Response,
725
+ model: Array<[any, any]>,
726
+): Map<any, any> {
727
+ return new Map(model);
728
+}
729
+
730
+function createSet(response: Response, model: Array<any>): Set<any> {
731
+ return new Set(model);
732
+}
733
+
734
+function createBlob(response: Response, model: Array<any>): Blob {
735
+ return new Blob(model.slice(1), {type: model[0]});
736
+}
737
+
738
+function createFormData(
739
+ response: Response,
740
+ model: Array<[any, any]>,
741
+): FormData {
742
+ const formData = new FormData();
743
+ for (let i = 0; i < model.length; i++) {
744
+ formData.append(model[i][0], model[i][1]);
745
+ }
746
+ return formData;
747
+}
748
+
749
+function createModel(response: Response, model: any): any {
750
+ return model;
751
+}
752
+
753
function parseModelString(
754
response: Response,
755
parentObject: Object,
@@ -710,8 +791,13 @@ function parseModelString(
791
case 'F': {
792
// Server Reference
793
const id = parseInt(value.slice(2), 16);
713
- const metadata = getOutlinedModel(response, id);
714
- return createServerReferenceProxy(response, metadata);
794
+ return getOutlinedModel(
795
+ response,
796
+ id,
797
+ parentObject,
798
+ key,
799
+ createServerReferenceProxy,
800
+ );
801
}
802
case 'T': {
803
// Temporary Reference
@@ -728,33 +814,31 @@ function parseModelString(
814
case 'Q': {
815
// Map
816
const id = parseInt(value.slice(2), 16);
731
- const data = getOutlinedModel(response, id);
732
- return new Map(data);
817
+ return getOutlinedModel(response, id, parentObject, key, createMap);
818
}
819
case 'W': {
820
// Set
821
const id = parseInt(value.slice(2), 16);
737
- const data = getOutlinedModel(response, id);
738
- return new Set(data);
822
+ return getOutlinedModel(response, id, parentObject, key, createSet);
823
}
824
case 'B': {
825
// Blob
826
if (enableBinaryFlight) {
827
const id = parseInt(value.slice(2), 16);
744
- const data = getOutlinedModel(response, id);
745
- return new Blob(data.slice(1), {type: data[0]});
828
+ return getOutlinedModel(response, id, parentObject, key, createBlob);
829
}
830
return undefined;
831
}
832
case 'K': {
833
// FormData
834
const id = parseInt(value.slice(2), 16);
752
- const data = getOutlinedModel(response, id);
753
- const formData = new FormData();
754
- for (let i = 0; i < data.length; i++) {
755
- formData.append(data[i][0], data[i][1]);
756
- }
757
- return formData;
835
+ return getOutlinedModel(
836
+ response,
837
+ id,
838
+ parentObject,
839
+ key,
840
+ createFormData,
841
+ );
842
}
843
case 'I': {
844
// $Infinity
@@ -803,62 +887,7 @@ function parseModelString(
887
default: {
888
// We assume that anything else is a reference ID.
889
const id = parseInt(value.slice(1), 16);
806
- const chunk = getChunk(response, id);
807
- switch (chunk.status) {
808
- case RESOLVED_MODEL:
809
- initializeModelChunk(chunk);
810
- break;
811
- case RESOLVED_MODULE:
812
- initializeModuleChunk(chunk);
813
- break;
814
- }
815
- // The status might have changed after initialization.
816
- switch (chunk.status) {
817
- case INITIALIZED:
818
- const chunkValue = chunk.value;
819
- if (__DEV__ && chunk._debugInfo) {
820
- // If we have a direct reference to an object that was rendered by a synchronous
821
- // server component, it might have some debug info about how it was rendered.
822
- // We forward this to the underlying object. This might be a React Element or
823
- // an Array fragment.
824
- // If this was a string / number return value we lose the debug info. We choose
825
- // that tradeoff to allow sync server components to return plain values and not
826
- // use them as React Nodes necessarily. We could otherwise wrap them in a Lazy.
827
- if (
828
- typeof chunkValue === 'object' &&
829
- chunkValue !== null &&
830
- (Array.isArray(chunkValue) ||
831
- chunkValue.$$typeof === REACT_ELEMENT_TYPE) &&
832
- !chunkValue._debugInfo
833
- ) {
834
- // We should maybe use a unique symbol for arrays but this is a React owned array.
835
- // $FlowFixMe[prop-missing]: This should be added to elements.
836
- Object.defineProperty(chunkValue, '_debugInfo', {
837
- configurable: false,
838
- enumerable: false,
839
- writable: true,
840
- value: chunk._debugInfo,
841
- });
842
- }
843
- }
844
- return chunkValue;
845
- case PENDING:
846
- case BLOCKED:
847
- case CYCLIC:
848
- const parentChunk = initializingChunk;
849
- chunk.then(
850
- createModelResolver(
851
- parentChunk,
852
- parentObject,
853
- key,
854
- chunk.status === CYCLIC,
855
- ),
856
- createModelReject(parentChunk),
857
- );
858
- return null;
859
- default:
860
- throw chunk.reason;
861
- }
890
+ return getOutlinedModel(response, id, parentObject, key, createModel);
891
}
892
}
893
}
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
+78
@@ -18,6 +18,9 @@ global.TextDecoder = require('util').TextDecoder;
18
if (typeof Blob === 'undefined') {
19
global.Blob = require('buffer').Blob;
20
}
21
+if (typeof File === 'undefined') {
22
+ global.File = require('buffer').File;
23
+}
24
25
// Don't wait before processing work on the server.
26
// TODO: we can replace this with FlightServer.act().
@@ -352,6 +355,81 @@ describe('ReactFlightDOMEdge', () => {
355
expect(await result.arrayBuffer()).toEqual(await blob.arrayBuffer());
356
});
357
358
+ if (typeof FormData !== 'undefined' && typeof File !== 'undefined') {
359
+ // @gate enableBinaryFlight
360
+ it('can transport FormData (blobs)', async () => {
361
+ const bytes = new Uint8Array([
362
+ 123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
363
+ ]);
364
+ const blob = new Blob([bytes, bytes], {
365
+ type: 'application/x-test',
366
+ });
367
+
368
+ const formData = new FormData();
369
+ formData.append('hi', 'world');
370
+ formData.append('file', blob, 'filename.test');
371
+
372
+ expect(formData.get('file') instanceof File).toBe(true);
373
+ expect(formData.get('file').name).toBe('filename.test');
374
+
375
+ const stream = passThrough(
376
+ ReactServerDOMServer.renderToReadableStream(formData),
377
+ );
378
+ const result = await ReactServerDOMClient.createFromReadableStream(
379
+ stream,
380
+ {
381
+ ssrManifest: {
382
+ moduleMap: null,
383
+ moduleLoading: null,
384
+ },
385
+ },
386
+ );
387
+
388
+ expect(result instanceof FormData).toBe(true);
389
+ expect(result.get('hi')).toBe('world');
390
+ const resultBlob = result.get('file');
391
+ expect(resultBlob instanceof Blob).toBe(true);
392
+ expect(resultBlob.name).toBe('blob'); // We should not pass through the file name for security.
393
+ expect(resultBlob.size).toBe(bytes.length * 2);
394
+ expect(await resultBlob.arrayBuffer()).toEqual(await blob.arrayBuffer());
395
+ });
396
+ }
397
+
398
+ it('can pass an async import that resolves later to an outline object like a Map', async () => {
399
+ let resolve;
400
+ const promise = new Promise(r => (resolve = r));
401
+
402
+ const asyncClient = clientExports(promise);
403
+
404
+ // We await the value on the servers so it's an async value that the client should wait for
405
+ const awaitedValue = await asyncClient;
406
+
407
+ const map = new Map();
408
+ map.set('value', awaitedValue);
409
+
410
+ const stream = passThrough(
411
+ ReactServerDOMServer.renderToReadableStream(map, webpackMap),
412
+ );
413
+
414
+ // Parsing the root blocks because the module hasn't loaded yet
415
+ const resultPromise = ReactServerDOMClient.createFromReadableStream(
416
+ stream,
417
+ {
418
+ ssrManifest: {
419
+ moduleMap: null,
420
+ moduleLoading: null,
421
+ },
422
+ },
423
+ );
424
+
425
+ // Afterwards we finally resolve the module value so it's available on the client
426
+ resolve('hello');
427
+
428
+ const result = await resultPromise;
429
+ expect(result instanceof Map).toBe(true);
430
+ expect(result.get('value')).toBe('hello');
431
+ });
432
+
433
it('warns if passing a this argument to bind() of a server reference', async () => {
434
const ServerModule = serverExports({
435
greet: function () {},
packages/react-server/src/ReactFlightServer.js
+13
-14
@@ -1239,27 +1239,25 @@ function serializeTypedArray(
1239
}
1240
1241
function serializeBlob(request: Request, blob: Blob): string {
1242
- const id = request.nextChunkId++;
1243
- request.pendingChunks++;
1242
+ const model: Array<string | Uint8Array> = [blob.type];
1243
+ const newTask = createTask(
1244
+ request,
1245
+ model,
1246
+ null,
1247
+ false,
1248
+ request.abortableTasks,
1249
+ );
1250
1251
const reader = blob.stream().getReader();
1252
1247
- const model: Array<string | Uint8Array> = [blob.type];
1248
-
1253
function progress(
1254
entry: {done: false, value: Uint8Array} | {done: true, value: void},
1255
): Promise<void> | void {
1256
if (entry.done) {
1253
- const blobId = outlineModel(request, model);
1254
- const blobReference = '$B' + blobId.toString(16);
1255
- const processedChunk = encodeReferenceChunk(request, id, blobReference);
1256
- request.completedRegularChunks.push(processedChunk);
1257
- if (request.destination !== null) {
1258
- flushCompletedChunks(request, request.destination);
1259
- }
1257
+ pingTask(request, newTask);
1258
return;
1259
}
1262
- // TODO: Emit the chunk early and refer to it later.
1260
+ // TODO: Emit the chunk early and refer to it later by dedupe.
1261
model.push(entry.value);
1262
// $FlowFixMe[incompatible-call]
1263
return reader.read().then(progress).catch(error);
@@ -1267,7 +1265,8 @@ function serializeBlob(request: Request, blob: Blob): string {
1265
1266
function error(reason: mixed) {
1267
const digest = logRecoverableError(request, reason);
1270
- emitErrorChunk(request, id, digest, reason);
1268
+ emitErrorChunk(request, newTask.id, digest, reason);
1269
+ request.abortableTasks.delete(newTask);
1270
if (request.destination !== null) {
1271
flushCompletedChunks(request, request.destination);
1272
}
@@ -1275,7 +1274,7 @@ function serializeBlob(request: Request, blob: Blob): string {
1274
// $FlowFixMe[incompatible-call]
1275
reader.read().then(progress).catch(error);
1276
1278
- return '$' + id.toString(16);
1277
+ return '$B' + newTask.id.toString(16);
1278
}
1279
1280
function escapeStringValue(value: string): string {