[Flight] Rename Chunk constructor to ReactPromise (#30747)
When printing these in DevTools they show up as the name of the constructor so then you pass a Promise to the client it logs as "Chunk" which is confusing. Ideally we'd probably just name this Promise but 1) there's a slight difference in the .then method atm 2) it's a bit tricky to name a variable and get it from the global in the same scope. Closure compiler doesn't let us just name a function because it removes it and just uses the variable name.
Sebastian Markbåge committed
Aug 19, 2024 at 14:51 UTC
591adfa40d900e9af6d9250f1ae58d72366e7957
1 file changed
+24
-14
packages/react-client/src/ReactFlightClient.js
+24
-14
@@ -191,7 +191,12 @@ type SomeChunk<T> =
191
| ErroredChunk<T>;
192
193
// $FlowFixMe[missing-this-annot]
194
-function Chunk(status: any, value: any, reason: any, response: Response) {
194
+function ReactPromise(
195
+ status: any,
196
+ value: any,
197
+ reason: any,
198
+ response: Response,
199
+) {
200
this.status = status;
201
this.value = value;
202
this.reason = reason;
@@ -201,9 +206,9 @@ function Chunk(status: any, value: any, reason: any, response: Response) {
206
}
207
}
208
// We subclass Promise.prototype so that we get other methods like .catch
204
-Chunk.prototype = (Object.create(Promise.prototype): any);
209
+ReactPromise.prototype = (Object.create(Promise.prototype): any);
210
// TODO: This doesn't return a new Promise chain unlike the real .then
206
-Chunk.prototype.then = function <T>(
211
+ReactPromise.prototype.then = function <T>(
212
this: SomeChunk<T>,
213
resolve: (value: T) => mixed,
214
reject?: (reason: mixed) => mixed,
@@ -304,12 +309,12 @@ export function getRoot<T>(response: Response): Thenable<T> {
309
310
function createPendingChunk<T>(response: Response): PendingChunk<T> {
311
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
307
- return new Chunk(PENDING, null, null, response);
312
+ return new ReactPromise(PENDING, null, null, response);
313
}
314
315
function createBlockedChunk<T>(response: Response): BlockedChunk<T> {
316
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
312
- return new Chunk(BLOCKED, null, null, response);
317
+ return new ReactPromise(BLOCKED, null, null, response);
318
}
319
320
function createErrorChunk<T>(
@@ -317,7 +322,7 @@ function createErrorChunk<T>(
322
error: Error | Postpone,
323
): ErroredChunk<T> {
324
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
320
- return new Chunk(ERRORED, null, error, response);
325
+ return new ReactPromise(ERRORED, null, error, response);
326
}
327
328
function wakeChunk<T>(listeners: Array<(T) => mixed>, value: T): void {
@@ -391,7 +396,7 @@ function createResolvedModelChunk<T>(
396
value: UninitializedModel,
397
): ResolvedModelChunk<T> {
398
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
394
- return new Chunk(RESOLVED_MODEL, value, null, response);
399
+ return new ReactPromise(RESOLVED_MODEL, value, null, response);
400
}
401
402
function createResolvedModuleChunk<T>(
@@ -399,7 +404,7 @@ function createResolvedModuleChunk<T>(
404
value: ClientReference<T>,
405
): ResolvedModuleChunk<T> {
406
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
402
- return new Chunk(RESOLVED_MODULE, value, null, response);
407
+ return new ReactPromise(RESOLVED_MODULE, value, null, response);
408
}
409
410
function createInitializedTextChunk(
@@ -407,7 +412,7 @@ function createInitializedTextChunk(
412
value: string,
413
): InitializedChunk<string> {
414
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
410
- return new Chunk(INITIALIZED, value, null, response);
415
+ return new ReactPromise(INITIALIZED, value, null, response);
416
}
417
418
function createInitializedBufferChunk(
@@ -415,7 +420,7 @@ function createInitializedBufferChunk(
420
value: $ArrayBufferView | ArrayBuffer,
421
): InitializedChunk<Uint8Array> {
422
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
418
- return new Chunk(INITIALIZED, value, null, response);
423
+ return new ReactPromise(INITIALIZED, value, null, response);
424
}
425
426
function createInitializedIteratorResultChunk<T>(
@@ -424,7 +429,12 @@ function createInitializedIteratorResultChunk<T>(
429
done: boolean,
430
): InitializedChunk<IteratorResult<T, T>> {
431
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
427
- return new Chunk(INITIALIZED, {done: done, value: value}, null, response);
432
+ return new ReactPromise(
433
+ INITIALIZED,
434
+ {done: done, value: value},
435
+ null,
436
+ response,
437
+ );
438
}
439
440
function createInitializedStreamChunk<
@@ -437,7 +447,7 @@ function createInitializedStreamChunk<
447
// We use the reason field to stash the controller since we already have that
448
// field. It's a bit of a hack but efficient.
449
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
440
- return new Chunk(INITIALIZED, value, controller, response);
450
+ return new ReactPromise(INITIALIZED, value, controller, response);
451
}
452
453
function createResolvedIteratorResultChunk<T>(
@@ -449,7 +459,7 @@ function createResolvedIteratorResultChunk<T>(
459
const iteratorResultJSON =
460
(done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
461
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
452
- return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
462
+ return new ReactPromise(RESOLVED_MODEL, iteratorResultJSON, null, response);
463
}
464
465
function resolveIteratorResultChunk<T>(
@@ -1761,7 +1771,7 @@ function startAsyncIterable<T>(
1771
if (nextReadIndex === buffer.length) {
1772
if (closed) {
1773
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
1764
- return new Chunk(
1774
+ return new ReactPromise(
1775
INITIALIZED,
1776
{done: true, value: undefined},
1777
null,