Skip to content

Commit 2a21e54

Browse files
gnoffgnoff
committedSep 27, 2023
[Flight][Float] Preinitialize module imports during SSR (#27314)
Currently when we SSR a Flight response we do not emit any resources for module imports. This means that when the client hydrates it won't have already loaded the necessary scripts to satisfy the Imports defined in the Flight payload which will lead to a delay in hydration completing. This change updates `react-server-dom-webpack` and `react-server-dom-esm` to emit async script tags in the head when we encounter a modules in the flight response. To support this we need some additional server configuration. We need to know the path prefix for chunk loading and whether the chunks will load with CORS or not (and if so with what configuration). DiffTrain build for [701ac2e](701ac2e)
1 parent 60367bc commit 2a21e54

15 files changed

+557
-519
lines changed
 

‎compiled/facebook-www/REVISION

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
49eba01930e9e1f331b34967fca65d5a0ba62846
1+
701ac2e57290f913502c6012c15e815f412f84b7

‎compiled/facebook-www/React-dev.classic.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ if (
2727
}
2828
"use strict";
2929

30-
var ReactVersion = "18.3.0-www-classic-2db55f27";
30+
var ReactVersion = "18.3.0-www-classic-ceb12d9d";
3131

3232
// ATTENTION
3333
// When adding new symbols to this file,

‎compiled/facebook-www/React-prod.modern.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -615,4 +615,4 @@ exports.useSyncExternalStore = function (
615615
exports.useTransition = function () {
616616
return ReactCurrentDispatcher.current.useTransition();
617617
};
618-
exports.version = "18.3.0-www-modern-ee02aecb";
618+
exports.version = "18.3.0-www-modern-278b2a04";

‎compiled/facebook-www/React-profiling.modern.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -626,7 +626,7 @@ exports.useSyncExternalStore = function (
626626
exports.useTransition = function () {
627627
return ReactCurrentDispatcher.current.useTransition();
628628
};
629-
exports.version = "18.3.0-www-modern-957e7028";
629+
exports.version = "18.3.0-www-modern-70b3fc21";
630630

631631
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
632632
if (

‎compiled/facebook-www/ReactDOM-dev.classic.js

+41-30
Original file line numberDiff line numberDiff line change
@@ -33961,7 +33961,7 @@ function createFiberRoot(
3396133961
return root;
3396233962
}
3396333963

33964-
var ReactVersion = "18.3.0-www-classic-37c737b8";
33964+
var ReactVersion = "18.3.0-www-classic-23e6bc10";
3396533965

3396633966
function createPortal$1(
3396733967
children,
@@ -46072,6 +46072,25 @@ function createEventHandle(type, options) {
4607246072
}
4607346073
}
4607446074

46075+
function getCrossOriginString(input) {
46076+
if (typeof input === "string") {
46077+
return input === "use-credentials" ? input : "";
46078+
}
46079+
46080+
return undefined;
46081+
}
46082+
function getCrossOriginStringAs(as, input) {
46083+
if (as === "font") {
46084+
return "";
46085+
}
46086+
46087+
if (typeof input === "string") {
46088+
return input === "use-credentials" ? input : "";
46089+
}
46090+
46091+
return undefined;
46092+
}
46093+
4607546094
var Dispatcher = Internals.Dispatcher;
4607646095
function prefetchDNS(href) {
4607746096
{
@@ -46132,7 +46151,7 @@ function preconnect(href, options) {
4613246151

4613346152
if (dispatcher && typeof href === "string") {
4613446153
var crossOrigin = options
46135-
? getCrossOrigin("preconnect", options.crossOrigin)
46154+
? getCrossOriginString(options.crossOrigin)
4613646155
: null;
4613746156
dispatcher.preconnect(href, crossOrigin);
4613846157
} // We don't error because preconnect needs to be resilient to being called in a variety of scopes
@@ -46180,7 +46199,7 @@ function preload(href, options) {
4618046199
typeof options.as === "string"
4618146200
) {
4618246201
var as = options.as;
46183-
var crossOrigin = getCrossOrigin(as, options.crossOrigin);
46202+
var crossOrigin = getCrossOriginStringAs(as, options.crossOrigin);
4618446203
dispatcher.preload(href, as, {
4618546204
crossOrigin: crossOrigin,
4618646205
integrity:
@@ -46241,7 +46260,7 @@ function preloadModule(href, options) {
4624146260

4624246261
if (dispatcher && typeof href === "string") {
4624346262
if (options) {
46244-
var crossOrigin = getCrossOrigin(options.as, options.crossOrigin);
46263+
var crossOrigin = getCrossOriginStringAs(options.as, options.crossOrigin);
4624546264
dispatcher.preloadModule(href, {
4624646265
as:
4624746266
typeof options.as === "string" && options.as !== "script"
@@ -46287,7 +46306,7 @@ function preinit(href, options) {
4628746306
typeof options.as === "string"
4628846307
) {
4628946308
var as = options.as;
46290-
var crossOrigin = getCrossOrigin(as, options.crossOrigin);
46309+
var crossOrigin = getCrossOriginStringAs(as, options.crossOrigin);
4629146310
var integrity =
4629246311
typeof options.integrity === "string" ? options.integrity : undefined;
4629346312
var fetchPriority =
@@ -46374,37 +46393,29 @@ function preinitModule(href, options) {
4637446393
var dispatcher = Dispatcher.current;
4637546394

4637646395
if (dispatcher && typeof href === "string") {
46377-
if (
46378-
options == null ||
46379-
(typeof options === "object" &&
46380-
(options.as == null || options.as === "script"))
46381-
) {
46382-
var crossOrigin = options
46383-
? getCrossOrigin(undefined, options.crossOrigin)
46384-
: undefined;
46385-
dispatcher.preinitModuleScript(href, {
46386-
crossOrigin: crossOrigin,
46387-
integrity:
46388-
options && typeof options.integrity === "string"
46389-
? options.integrity
46390-
: undefined
46391-
});
46396+
if (typeof options === "object" && options !== null) {
46397+
if (options.as == null || options.as === "script") {
46398+
var crossOrigin = getCrossOriginStringAs(
46399+
options.as,
46400+
options.crossOrigin
46401+
);
46402+
dispatcher.preinitModuleScript(href, {
46403+
crossOrigin: crossOrigin,
46404+
integrity:
46405+
typeof options.integrity === "string"
46406+
? options.integrity
46407+
: undefined,
46408+
nonce: typeof options.nonce === "string" ? options.nonce : undefined
46409+
});
46410+
}
46411+
} else if (options == null) {
46412+
dispatcher.preinitModuleScript(href);
4639246413
}
4639346414
} // We don't error because preinit needs to be resilient to being called in a variety of scopes
4639446415
// and the runtime may not be capable of responding. The function is optimistic and not critical
4639546416
// so we favor silent bailout over warning or erroring.
4639646417
}
4639746418

46398-
function getCrossOrigin(as, crossOrigin) {
46399-
return as === "font"
46400-
? ""
46401-
: typeof crossOrigin === "string"
46402-
? crossOrigin === "use-credentials"
46403-
? "use-credentials"
46404-
: ""
46405-
: undefined;
46406-
}
46407-
4640846419
function getValueDescriptorExpectingObjectForWarning(thing) {
4640946420
return thing === null
4641046421
? "`null`"

‎compiled/facebook-www/ReactDOM-dev.modern.js

+41-30
Original file line numberDiff line numberDiff line change
@@ -33806,7 +33806,7 @@ function createFiberRoot(
3380633806
return root;
3380733807
}
3380833808

33809-
var ReactVersion = "18.3.0-www-modern-fe718cda";
33809+
var ReactVersion = "18.3.0-www-modern-dc7c521a";
3381033810

3381133811
function createPortal$1(
3381233812
children,
@@ -45160,6 +45160,25 @@ function createEventHandle(type, options) {
4516045160
}
4516145161
}
4516245162

45163+
function getCrossOriginString(input) {
45164+
if (typeof input === "string") {
45165+
return input === "use-credentials" ? input : "";
45166+
}
45167+
45168+
return undefined;
45169+
}
45170+
function getCrossOriginStringAs(as, input) {
45171+
if (as === "font") {
45172+
return "";
45173+
}
45174+
45175+
if (typeof input === "string") {
45176+
return input === "use-credentials" ? input : "";
45177+
}
45178+
45179+
return undefined;
45180+
}
45181+
4516345182
var Dispatcher = Internals.Dispatcher;
4516445183
function prefetchDNS(href) {
4516545184
{
@@ -45220,7 +45239,7 @@ function preconnect(href, options) {
4522045239

4522145240
if (dispatcher && typeof href === "string") {
4522245241
var crossOrigin = options
45223-
? getCrossOrigin("preconnect", options.crossOrigin)
45242+
? getCrossOriginString(options.crossOrigin)
4522445243
: null;
4522545244
dispatcher.preconnect(href, crossOrigin);
4522645245
} // We don't error because preconnect needs to be resilient to being called in a variety of scopes
@@ -45268,7 +45287,7 @@ function preload(href, options) {
4526845287
typeof options.as === "string"
4526945288
) {
4527045289
var as = options.as;
45271-
var crossOrigin = getCrossOrigin(as, options.crossOrigin);
45290+
var crossOrigin = getCrossOriginStringAs(as, options.crossOrigin);
4527245291
dispatcher.preload(href, as, {
4527345292
crossOrigin: crossOrigin,
4527445293
integrity:
@@ -45329,7 +45348,7 @@ function preloadModule(href, options) {
4532945348

4533045349
if (dispatcher && typeof href === "string") {
4533145350
if (options) {
45332-
var crossOrigin = getCrossOrigin(options.as, options.crossOrigin);
45351+
var crossOrigin = getCrossOriginStringAs(options.as, options.crossOrigin);
4533345352
dispatcher.preloadModule(href, {
4533445353
as:
4533545354
typeof options.as === "string" && options.as !== "script"
@@ -45375,7 +45394,7 @@ function preinit(href, options) {
4537545394
typeof options.as === "string"
4537645395
) {
4537745396
var as = options.as;
45378-
var crossOrigin = getCrossOrigin(as, options.crossOrigin);
45397+
var crossOrigin = getCrossOriginStringAs(as, options.crossOrigin);
4537945398
var integrity =
4538045399
typeof options.integrity === "string" ? options.integrity : undefined;
4538145400
var fetchPriority =
@@ -45462,37 +45481,29 @@ function preinitModule(href, options) {
4546245481
var dispatcher = Dispatcher.current;
4546345482

4546445483
if (dispatcher && typeof href === "string") {
45465-
if (
45466-
options == null ||
45467-
(typeof options === "object" &&
45468-
(options.as == null || options.as === "script"))
45469-
) {
45470-
var crossOrigin = options
45471-
? getCrossOrigin(undefined, options.crossOrigin)
45472-
: undefined;
45473-
dispatcher.preinitModuleScript(href, {
45474-
crossOrigin: crossOrigin,
45475-
integrity:
45476-
options && typeof options.integrity === "string"
45477-
? options.integrity
45478-
: undefined
45479-
});
45484+
if (typeof options === "object" && options !== null) {
45485+
if (options.as == null || options.as === "script") {
45486+
var crossOrigin = getCrossOriginStringAs(
45487+
options.as,
45488+
options.crossOrigin
45489+
);
45490+
dispatcher.preinitModuleScript(href, {
45491+
crossOrigin: crossOrigin,
45492+
integrity:
45493+
typeof options.integrity === "string"
45494+
? options.integrity
45495+
: undefined,
45496+
nonce: typeof options.nonce === "string" ? options.nonce : undefined
45497+
});
45498+
}
45499+
} else if (options == null) {
45500+
dispatcher.preinitModuleScript(href);
4548045501
}
4548145502
} // We don't error because preinit needs to be resilient to being called in a variety of scopes
4548245503
// and the runtime may not be capable of responding. The function is optimistic and not critical
4548345504
// so we favor silent bailout over warning or erroring.
4548445505
}
4548545506

45486-
function getCrossOrigin(as, crossOrigin) {
45487-
return as === "font"
45488-
? ""
45489-
: typeof crossOrigin === "string"
45490-
? crossOrigin === "use-credentials"
45491-
? "use-credentials"
45492-
: ""
45493-
: undefined;
45494-
}
45495-
4549645507
function getValueDescriptorExpectingObjectForWarning(thing) {
4549745508
return thing === null
4549845509
? "`null`"

0 commit comments

Comments
 (0)