Skip to content

Commit 6c6f461

Browse files
sebmarkbagesebmarkbage
committed
Replace Implicit Options on SuspenseList with Explicit Options (#33424)
We want to change the defaults for `revealOrder` and `tail` on SuspenseList. This is an intermediate step to allow experimental users to upgrade. To explicitly specify these options I added `revealOrder="independent"` and `tail="visible"`. I then added warnings if `undefined` or `null` is passed. You must now always explicitly specify them. However, semantics are still preserved for now until the next step. We also want to change the rendering order of the `children` prop for `revealOrder="backwards"`. As an intermediate step I first added `revealOrder="unstable_legacy-backwards"` option. This will only be temporary until all users can switch to the new `"backwards"` semantics once we flip it in the next step. I also clarified the types that the directional props requires iterable children but not iterable inside of those. Rows with multiple items can be modeled as explicit fragments. DiffTrain build for [d742611](d742611)
1 parent 45da59b commit 6c6f461

37 files changed

+1226
-791
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1ae0a845bde5b95dfc319cadf366cb7b3fb1ca92
1+
d742611ce40545127032f4e221c78bf9f70eb437

‎compiled/facebook-www/REVISION_TRANSFORMS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1ae0a845bde5b95dfc319cadf366cb7b3fb1ca92
1+
d742611ce40545127032f4e221c78bf9f70eb437

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1537,7 +1537,7 @@ __DEV__ &&
15371537
exports.useTransition = function () {
15381538
return resolveDispatcher().useTransition();
15391539
};
1540-
exports.version = "19.2.0-www-classic-1ae0a845-20250603";
1540+
exports.version = "19.2.0-www-classic-d742611c-20250603";
15411541
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15421542
"function" ===
15431543
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1537,7 +1537,7 @@ __DEV__ &&
15371537
exports.useTransition = function () {
15381538
return resolveDispatcher().useTransition();
15391539
};
1540-
exports.version = "19.2.0-www-modern-1ae0a845-20250603";
1540+
exports.version = "19.2.0-www-modern-d742611c-20250603";
15411541
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15421542
"function" ===
15431543
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function (
635635
exports.useTransition = function () {
636636
return ReactSharedInternals.H.useTransition();
637637
};
638-
exports.version = "19.2.0-www-classic-1ae0a845-20250603";
638+
exports.version = "19.2.0-www-classic-d742611c-20250603";

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function (
635635
exports.useTransition = function () {
636636
return ReactSharedInternals.H.useTransition();
637637
};
638-
exports.version = "19.2.0-www-modern-1ae0a845-20250603";
638+
exports.version = "19.2.0-www-modern-d742611c-20250603";

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ exports.useSyncExternalStore = function (
639639
exports.useTransition = function () {
640640
return ReactSharedInternals.H.useTransition();
641641
};
642-
exports.version = "19.2.0-www-classic-1ae0a845-20250603";
642+
exports.version = "19.2.0-www-classic-d742611c-20250603";
643643
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
644644
"function" ===
645645
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ exports.useSyncExternalStore = function (
639639
exports.useTransition = function () {
640640
return ReactSharedInternals.H.useTransition();
641641
};
642-
exports.version = "19.2.0-www-modern-1ae0a845-20250603";
642+
exports.version = "19.2.0-www-modern-d742611c-20250603";
643643
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
644644
"function" ===
645645
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4734,7 +4734,10 @@ __DEV__ &&
47344734
return node;
47354735
} else if (
47364736
19 === node.tag &&
4737-
void 0 !== node.memoizedProps.revealOrder
4737+
("forwards" === node.memoizedProps.revealOrder ||
4738+
"backwards" === node.memoizedProps.revealOrder ||
4739+
"unstable_legacy-backwards" === node.memoizedProps.revealOrder ||
4740+
"together" === node.memoizedProps.revealOrder)
47384741
) {
47394742
if (0 !== (node.flags & 128)) return node;
47404743
} else if (null !== node.child) {
@@ -8371,21 +8374,30 @@ __DEV__ &&
83718374
(workInProgress.flags |= 128))
83728375
: (suspenseContext &= SubtreeSuspenseContextMask);
83738376
push(suspenseStackCursor, suspenseContext, workInProgress);
8377+
suspenseContext = null == revealOrder ? "null" : revealOrder;
83748378
if (
8375-
void 0 !== revealOrder &&
83768379
"forwards" !== revealOrder &&
8377-
"backwards" !== revealOrder &&
8380+
"unstable_legacy-backwards" !== revealOrder &&
83788381
"together" !== revealOrder &&
8379-
!didWarnAboutRevealOrder[revealOrder]
8382+
"independent" !== revealOrder &&
8383+
!didWarnAboutRevealOrder[suspenseContext]
83808384
)
83818385
if (
8382-
((didWarnAboutRevealOrder[revealOrder] = !0),
8383-
"string" === typeof revealOrder)
8386+
((didWarnAboutRevealOrder[suspenseContext] = !0), null == revealOrder)
83848387
)
8388+
console.error(
8389+
'The default for the <SuspenseList revealOrder="..."> prop is changing. To be future compatible you must explictly specify either "independent" (the current default), "together", "forwards" or "legacy_unstable-backwards".'
8390+
);
8391+
else if ("backwards" === revealOrder)
8392+
console.error(
8393+
'The rendering order of <SuspenseList revealOrder="backwards"> is changing. To be future compatible you must specify revealOrder="legacy_unstable-backwards" instead.'
8394+
);
8395+
else if ("string" === typeof revealOrder)
83858396
switch (revealOrder.toLowerCase()) {
83868397
case "together":
83878398
case "forwards":
83888399
case "backwards":
8400+
case "independent":
83898401
console.error(
83908402
'"%s" is not a valid value for revealOrder on <SuspenseList />. Use lowercase "%s" instead.',
83918403
revealOrder,
@@ -8402,32 +8414,48 @@ __DEV__ &&
84028414
break;
84038415
default:
84048416
console.error(
8405-
'"%s" is not a supported revealOrder on <SuspenseList />. Did you mean "together", "forwards" or "backwards"?',
8417+
'"%s" is not a supported revealOrder on <SuspenseList />. Did you mean "independent", "together", "forwards" or "backwards"?',
84068418
revealOrder
84078419
);
84088420
}
84098421
else
84108422
console.error(
8411-
'%s is not a supported value for revealOrder on <SuspenseList />. Did you mean "together", "forwards" or "backwards"?',
8423+
'%s is not a supported value for revealOrder on <SuspenseList />. Did you mean "independent", "together", "forwards" or "backwards"?',
84128424
revealOrder
84138425
);
8414-
void 0 === tailMode ||
8415-
didWarnAboutTailOptions[tailMode] ||
8416-
("collapsed" !== tailMode && "hidden" !== tailMode
8417-
? ((didWarnAboutTailOptions[tailMode] = !0),
8418-
console.error(
8419-
'"%s" is not a supported value for tail on <SuspenseList />. Did you mean "collapsed" or "hidden"?',
8420-
tailMode
8421-
))
8422-
: "forwards" !== revealOrder &&
8423-
"backwards" !== revealOrder &&
8424-
((didWarnAboutTailOptions[tailMode] = !0),
8425-
console.error(
8426-
'<SuspenseList tail="%s" /> is only valid if revealOrder is "forwards" or "backwards". Did you mean to specify revealOrder="forwards"?',
8427-
tailMode
8428-
)));
8426+
suspenseContext = null == tailMode ? "null" : tailMode;
8427+
if (!didWarnAboutTailOptions[suspenseContext])
8428+
if (null == tailMode) {
8429+
if (
8430+
"forwards" === revealOrder ||
8431+
"backwards" === revealOrder ||
8432+
"unstable_legacy-backwards" === revealOrder
8433+
)
8434+
(didWarnAboutTailOptions[suspenseContext] = !0),
8435+
console.error(
8436+
'The default for the <SuspenseList tail="..."> prop is changing. To be future compatible you must explictly specify either "visible" (the current default), "collapsed" or "hidden".'
8437+
);
8438+
} else
8439+
"visible" !== tailMode &&
8440+
"collapsed" !== tailMode &&
8441+
"hidden" !== tailMode
8442+
? ((didWarnAboutTailOptions[suspenseContext] = !0),
8443+
console.error(
8444+
'"%s" is not a supported value for tail on <SuspenseList />. Did you mean "visible", "collapsed" or "hidden"?',
8445+
tailMode
8446+
))
8447+
: "forwards" !== revealOrder &&
8448+
"backwards" !== revealOrder &&
8449+
"unstable_legacy-backwards" !== revealOrder &&
8450+
((didWarnAboutTailOptions[suspenseContext] = !0),
8451+
console.error(
8452+
'<SuspenseList tail="%s" /> is only valid if revealOrder is "forwards" or "backwards". Did you mean to specify revealOrder="forwards"?',
8453+
tailMode
8454+
));
84298455
a: if (
8430-
("forwards" === revealOrder || "backwards" === revealOrder) &&
8456+
("forwards" === revealOrder ||
8457+
"backwards" === revealOrder ||
8458+
"unstable_legacy-backwards" === revealOrder) &&
84318459
void 0 !== nextProps &&
84328460
null !== nextProps &&
84338461
!1 !== nextProps
@@ -8514,6 +8542,7 @@ __DEV__ &&
85148542
);
85158543
break;
85168544
case "backwards":
8545+
case "unstable_legacy-backwards":
85178546
renderLanes = null;
85188547
revealOrder = workInProgress.child;
85198548
for (workInProgress.child = null; null !== revealOrder; ) {
@@ -19076,10 +19105,10 @@ __DEV__ &&
1907619105
(function () {
1907719106
var internals = {
1907819107
bundleType: 1,
19079-
version: "19.2.0-www-classic-1ae0a845-20250603",
19108+
version: "19.2.0-www-classic-d742611c-20250603",
1908019109
rendererPackageName: "react-art",
1908119110
currentDispatcherRef: ReactSharedInternals,
19082-
reconcilerVersion: "19.2.0-www-classic-1ae0a845-20250603"
19111+
reconcilerVersion: "19.2.0-www-classic-d742611c-20250603"
1908319112
};
1908419113
internals.overrideHookState = overrideHookState;
1908519114
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19113,7 +19142,7 @@ __DEV__ &&
1911319142
exports.Shape = Shape;
1911419143
exports.Surface = Surface;
1911519144
exports.Text = Text;
19116-
exports.version = "19.2.0-www-classic-1ae0a845-20250603";
19145+
exports.version = "19.2.0-www-classic-d742611c-20250603";
1911719146
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1911819147
"function" ===
1911919148
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4640,7 +4640,10 @@ __DEV__ &&
46404640
return node;
46414641
} else if (
46424642
19 === node.tag &&
4643-
void 0 !== node.memoizedProps.revealOrder
4643+
("forwards" === node.memoizedProps.revealOrder ||
4644+
"backwards" === node.memoizedProps.revealOrder ||
4645+
"unstable_legacy-backwards" === node.memoizedProps.revealOrder ||
4646+
"together" === node.memoizedProps.revealOrder)
46444647
) {
46454648
if (0 !== (node.flags & 128)) return node;
46464649
} else if (null !== node.child) {
@@ -8202,21 +8205,30 @@ __DEV__ &&
82028205
(workInProgress.flags |= 128))
82038206
: (suspenseContext &= SubtreeSuspenseContextMask);
82048207
push(suspenseStackCursor, suspenseContext, workInProgress);
8208+
suspenseContext = null == revealOrder ? "null" : revealOrder;
82058209
if (
8206-
void 0 !== revealOrder &&
82078210
"forwards" !== revealOrder &&
8208-
"backwards" !== revealOrder &&
8211+
"unstable_legacy-backwards" !== revealOrder &&
82098212
"together" !== revealOrder &&
8210-
!didWarnAboutRevealOrder[revealOrder]
8213+
"independent" !== revealOrder &&
8214+
!didWarnAboutRevealOrder[suspenseContext]
82118215
)
82128216
if (
8213-
((didWarnAboutRevealOrder[revealOrder] = !0),
8214-
"string" === typeof revealOrder)
8217+
((didWarnAboutRevealOrder[suspenseContext] = !0), null == revealOrder)
82158218
)
8219+
console.error(
8220+
'The default for the <SuspenseList revealOrder="..."> prop is changing. To be future compatible you must explictly specify either "independent" (the current default), "together", "forwards" or "legacy_unstable-backwards".'
8221+
);
8222+
else if ("backwards" === revealOrder)
8223+
console.error(
8224+
'The rendering order of <SuspenseList revealOrder="backwards"> is changing. To be future compatible you must specify revealOrder="legacy_unstable-backwards" instead.'
8225+
);
8226+
else if ("string" === typeof revealOrder)
82168227
switch (revealOrder.toLowerCase()) {
82178228
case "together":
82188229
case "forwards":
82198230
case "backwards":
8231+
case "independent":
82208232
console.error(
82218233
'"%s" is not a valid value for revealOrder on <SuspenseList />. Use lowercase "%s" instead.',
82228234
revealOrder,
@@ -8233,32 +8245,48 @@ __DEV__ &&
82338245
break;
82348246
default:
82358247
console.error(
8236-
'"%s" is not a supported revealOrder on <SuspenseList />. Did you mean "together", "forwards" or "backwards"?',
8248+
'"%s" is not a supported revealOrder on <SuspenseList />. Did you mean "independent", "together", "forwards" or "backwards"?',
82378249
revealOrder
82388250
);
82398251
}
82408252
else
82418253
console.error(
8242-
'%s is not a supported value for revealOrder on <SuspenseList />. Did you mean "together", "forwards" or "backwards"?',
8254+
'%s is not a supported value for revealOrder on <SuspenseList />. Did you mean "independent", "together", "forwards" or "backwards"?',
82438255
revealOrder
82448256
);
8245-
void 0 === tailMode ||
8246-
didWarnAboutTailOptions[tailMode] ||
8247-
("collapsed" !== tailMode && "hidden" !== tailMode
8248-
? ((didWarnAboutTailOptions[tailMode] = !0),
8249-
console.error(
8250-
'"%s" is not a supported value for tail on <SuspenseList />. Did you mean "collapsed" or "hidden"?',
8251-
tailMode
8252-
))
8253-
: "forwards" !== revealOrder &&
8254-
"backwards" !== revealOrder &&
8255-
((didWarnAboutTailOptions[tailMode] = !0),
8256-
console.error(
8257-
'<SuspenseList tail="%s" /> is only valid if revealOrder is "forwards" or "backwards". Did you mean to specify revealOrder="forwards"?',
8258-
tailMode
8259-
)));
8257+
suspenseContext = null == tailMode ? "null" : tailMode;
8258+
if (!didWarnAboutTailOptions[suspenseContext])
8259+
if (null == tailMode) {
8260+
if (
8261+
"forwards" === revealOrder ||
8262+
"backwards" === revealOrder ||
8263+
"unstable_legacy-backwards" === revealOrder
8264+
)
8265+
(didWarnAboutTailOptions[suspenseContext] = !0),
8266+
console.error(
8267+
'The default for the <SuspenseList tail="..."> prop is changing. To be future compatible you must explictly specify either "visible" (the current default), "collapsed" or "hidden".'
8268+
);
8269+
} else
8270+
"visible" !== tailMode &&
8271+
"collapsed" !== tailMode &&
8272+
"hidden" !== tailMode
8273+
? ((didWarnAboutTailOptions[suspenseContext] = !0),
8274+
console.error(
8275+
'"%s" is not a supported value for tail on <SuspenseList />. Did you mean "visible", "collapsed" or "hidden"?',
8276+
tailMode
8277+
))
8278+
: "forwards" !== revealOrder &&
8279+
"backwards" !== revealOrder &&
8280+
"unstable_legacy-backwards" !== revealOrder &&
8281+
((didWarnAboutTailOptions[suspenseContext] = !0),
8282+
console.error(
8283+
'<SuspenseList tail="%s" /> is only valid if revealOrder is "forwards" or "backwards". Did you mean to specify revealOrder="forwards"?',
8284+
tailMode
8285+
));
82608286
a: if (
8261-
("forwards" === revealOrder || "backwards" === revealOrder) &&
8287+
("forwards" === revealOrder ||
8288+
"backwards" === revealOrder ||
8289+
"unstable_legacy-backwards" === revealOrder) &&
82628290
void 0 !== nextProps &&
82638291
null !== nextProps &&
82648292
!1 !== nextProps
@@ -8345,6 +8373,7 @@ __DEV__ &&
83458373
);
83468374
break;
83478375
case "backwards":
8376+
case "unstable_legacy-backwards":
83488377
renderLanes = null;
83498378
revealOrder = workInProgress.child;
83508379
for (workInProgress.child = null; null !== revealOrder; ) {
@@ -18848,10 +18877,10 @@ __DEV__ &&
1884818877
(function () {
1884918878
var internals = {
1885018879
bundleType: 1,
18851-
version: "19.2.0-www-modern-1ae0a845-20250603",
18880+
version: "19.2.0-www-modern-d742611c-20250603",
1885218881
rendererPackageName: "react-art",
1885318882
currentDispatcherRef: ReactSharedInternals,
18854-
reconcilerVersion: "19.2.0-www-modern-1ae0a845-20250603"
18883+
reconcilerVersion: "19.2.0-www-modern-d742611c-20250603"
1885518884
};
1885618885
internals.overrideHookState = overrideHookState;
1885718886
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -18885,7 +18914,7 @@ __DEV__ &&
1888518914
exports.Shape = Shape;
1888618915
exports.Surface = Surface;
1888718916
exports.Text = Text;
18888-
exports.version = "19.2.0-www-modern-1ae0a845-20250603";
18917+
exports.version = "19.2.0-www-modern-d742611c-20250603";
1888918918
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1889018919
"function" ===
1889118920
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)