Skip to content

Commit 59430f8

Browse files
gnoffgnoff
committed
[Fiber] Support Suspense boundaries anywhere (excluding hydration) (#32163)
This is a follow up to #32069 In the prior change I updated Fizz to allow you to render Suspense boundaries at any level within a react-dom application by treating the document body as the default render scope. This change updates Fiber to provide similar semantics. Note that this update still does not deliver hydration so unifying the Fizz and Fiber implementations in a single App is not possible yet. The implementation required a rework of the getHostSibling and getHostParent algorithms. Now most HostSingletons are invisible from a host positioning perspective. Head is special in that it is a valid host scope so when you have Placements inside of it, it will act as the parent. But body, and html, will not directly participate in host positioning. Additionally to support flipping to a fallback html, head, and body tag in a Suspense fallback I updated the offscreen hiding/unhide logic to pierce through singletons when lookin for matching hidable nod boundaries anywhere (excluding hydration) DiffTrain build for [c492f97](c492f97)
1 parent 4588368 commit 59430f8

34 files changed

+4114
-3442
lines changed

‎compiled/facebook-www/REVISION

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
b65afdd0c1f644f3630c4e8cfd9ac264c5ac329f
1+
c492f97541486458ce21653d2669d53d380f0538

‎compiled/facebook-www/REVISION_TRANSFORMS

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
b65afdd0c1f644f3630c4e8cfd9ac264c5ac329f
1+
c492f97541486458ce21653d2669d53d380f0538

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1957,7 +1957,7 @@ __DEV__ &&
19571957
exports.useTransition = function () {
19581958
return resolveDispatcher().useTransition();
19591959
};
1960-
exports.version = "19.1.0-www-classic-b65afdd0-20250124";
1960+
exports.version = "19.1.0-www-classic-c492f975-20250128";
19611961
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19621962
"function" ===
19631963
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1957,7 +1957,7 @@ __DEV__ &&
19571957
exports.useTransition = function () {
19581958
return resolveDispatcher().useTransition();
19591959
};
1960-
exports.version = "19.1.0-www-modern-b65afdd0-20250124";
1960+
exports.version = "19.1.0-www-modern-c492f975-20250128";
19611961
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19621962
"function" ===
19631963
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
630630
exports.useTransition = function () {
631631
return ReactSharedInternals.H.useTransition();
632632
};
633-
exports.version = "19.1.0-www-classic-b65afdd0-20250124";
633+
exports.version = "19.1.0-www-classic-c492f975-20250128";

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
630630
exports.useTransition = function () {
631631
return ReactSharedInternals.H.useTransition();
632632
};
633-
exports.version = "19.1.0-www-modern-b65afdd0-20250124";
633+
exports.version = "19.1.0-www-modern-c492f975-20250128";

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
634634
exports.useTransition = function () {
635635
return ReactSharedInternals.H.useTransition();
636636
};
637-
exports.version = "19.1.0-www-classic-b65afdd0-20250124";
637+
exports.version = "19.1.0-www-classic-c492f975-20250128";
638638
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
639639
"function" ===
640640
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
634634
exports.useTransition = function () {
635635
return ReactSharedInternals.H.useTransition();
636636
};
637-
exports.version = "19.1.0-www-modern-b65afdd0-20250124";
637+
exports.version = "19.1.0-www-modern-c492f975-20250128";
638638
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
639639
"function" ===
640640
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -10380,8 +10380,8 @@ __DEV__ &&
1038010380
}
1038110381
finishedRoot.effectDuration += popNestedEffectDurations(current);
1038210382
break;
10383-
case 26:
1038410383
case 27:
10384+
case 26:
1038510385
case 5:
1038610386
recursivelyTraverseLayoutEffects(finishedRoot, finishedWork);
1038710387
null === current && flags & 4 && commitHostMount(finishedWork);
@@ -11140,10 +11140,10 @@ __DEV__ &&
1114011140
? root._visibility & -2
1114111141
: root._visibility | 1),
1114211142
suspenseCallback &&
11143-
((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
11144-
null === current ||
11143+
(null === current ||
1114511144
retryQueue ||
11146-
root ||
11145+
offscreenSubtreeIsHidden ||
11146+
offscreenSubtreeWasHidden ||
1114711147
recursivelyTraverseDisappearLayoutEffects(finishedWork)),
1114811148
null === finishedWork.memoizedProps ||
1114911149
"manual" !== finishedWork.memoizedProps.mode)
@@ -11292,8 +11292,8 @@ __DEV__ &&
1129211292
);
1129311293
recursivelyTraverseDisappearLayoutEffects(finishedWork);
1129411294
break;
11295-
case 26:
1129611295
case 27:
11296+
case 26:
1129711297
case 5:
1129811298
safelyDetachRef(finishedWork, finishedWork.return);
1129911299
recursivelyTraverseDisappearLayoutEffects(finishedWork);
@@ -11367,8 +11367,8 @@ __DEV__ &&
1136711367
commitClassCallbacks(finishedWork);
1136811368
safelyAttachRef(finishedWork, finishedWork.return);
1136911369
break;
11370-
case 26:
1137111370
case 27:
11371+
case 26:
1137211372
case 5:
1137311373
recursivelyTraverseReappearLayoutEffects(
1137411374
finishedRoot,
@@ -16950,10 +16950,10 @@ __DEV__ &&
1695016950
(function () {
1695116951
var internals = {
1695216952
bundleType: 1,
16953-
version: "19.1.0-www-classic-b65afdd0-20250124",
16953+
version: "19.1.0-www-classic-c492f975-20250128",
1695416954
rendererPackageName: "react-art",
1695516955
currentDispatcherRef: ReactSharedInternals,
16956-
reconcilerVersion: "19.1.0-www-classic-b65afdd0-20250124"
16956+
reconcilerVersion: "19.1.0-www-classic-c492f975-20250128"
1695716957
};
1695816958
internals.overrideHookState = overrideHookState;
1695916959
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -16987,7 +16987,7 @@ __DEV__ &&
1698716987
exports.Shape = Shape;
1698816988
exports.Surface = Surface;
1698916989
exports.Text = Text;
16990-
exports.version = "19.1.0-www-classic-b65afdd0-20250124";
16990+
exports.version = "19.1.0-www-classic-c492f975-20250128";
1699116991
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1699216992
"function" ===
1699316993
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -10198,8 +10198,8 @@ __DEV__ &&
1019810198
}
1019910199
finishedRoot.effectDuration += popNestedEffectDurations(current);
1020010200
break;
10201-
case 26:
1020210201
case 27:
10202+
case 26:
1020310203
case 5:
1020410204
recursivelyTraverseLayoutEffects(finishedRoot, finishedWork);
1020510205
null === current && flags & 4 && commitHostMount(finishedWork);
@@ -10958,10 +10958,10 @@ __DEV__ &&
1095810958
? root._visibility & -2
1095910959
: root._visibility | 1),
1096010960
suspenseCallback &&
10961-
((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
10962-
null === current ||
10961+
(null === current ||
1096310962
retryQueue ||
10964-
root ||
10963+
offscreenSubtreeIsHidden ||
10964+
offscreenSubtreeWasHidden ||
1096510965
recursivelyTraverseDisappearLayoutEffects(finishedWork)),
1096610966
null === finishedWork.memoizedProps ||
1096710967
"manual" !== finishedWork.memoizedProps.mode)
@@ -11110,8 +11110,8 @@ __DEV__ &&
1111011110
);
1111111111
recursivelyTraverseDisappearLayoutEffects(finishedWork);
1111211112
break;
11113-
case 26:
1111411113
case 27:
11114+
case 26:
1111511115
case 5:
1111611116
safelyDetachRef(finishedWork, finishedWork.return);
1111711117
recursivelyTraverseDisappearLayoutEffects(finishedWork);
@@ -11185,8 +11185,8 @@ __DEV__ &&
1118511185
commitClassCallbacks(finishedWork);
1118611186
safelyAttachRef(finishedWork, finishedWork.return);
1118711187
break;
11188-
case 26:
1118911188
case 27:
11189+
case 26:
1119011190
case 5:
1119111191
recursivelyTraverseReappearLayoutEffects(
1119211192
finishedRoot,
@@ -16722,10 +16722,10 @@ __DEV__ &&
1672216722
(function () {
1672316723
var internals = {
1672416724
bundleType: 1,
16725-
version: "19.1.0-www-modern-b65afdd0-20250124",
16725+
version: "19.1.0-www-modern-c492f975-20250128",
1672616726
rendererPackageName: "react-art",
1672716727
currentDispatcherRef: ReactSharedInternals,
16728-
reconcilerVersion: "19.1.0-www-modern-b65afdd0-20250124"
16728+
reconcilerVersion: "19.1.0-www-modern-c492f975-20250128"
1672916729
};
1673016730
internals.overrideHookState = overrideHookState;
1673116731
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -16759,7 +16759,7 @@ __DEV__ &&
1675916759
exports.Shape = Shape;
1676016760
exports.Surface = Surface;
1676116761
exports.Text = Text;
16762-
exports.version = "19.1.0-www-modern-b65afdd0-20250124";
16762+
exports.version = "19.1.0-www-modern-c492f975-20250128";
1676316763
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1676416764
"function" ===
1676516765
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -7425,8 +7425,8 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
74257425
}
74267426
}
74277427
break;
7428-
case 26:
74297428
case 27:
7429+
case 26:
74307430
case 5:
74317431
recursivelyTraverseLayoutEffects(finishedRoot, finishedWork);
74327432
flags & 512 && safelyAttachRef(finishedWork, finishedWork.return);
@@ -8039,10 +8039,10 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
80398039
? root._visibility & -2
80408040
: root._visibility | 1),
80418041
instance &&
8042-
((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
8043-
null === current ||
8042+
(null === current ||
80448043
suspenseCallback ||
8045-
root ||
8044+
offscreenSubtreeIsHidden ||
8045+
offscreenSubtreeWasHidden ||
80468046
recursivelyTraverseDisappearLayoutEffects(finishedWork)),
80478047
null === finishedWork.memoizedProps ||
80488048
"manual" !== finishedWork.memoizedProps.mode)
@@ -8196,8 +8196,8 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber) {
81968196
);
81978197
recursivelyTraverseDisappearLayoutEffects(finishedWork);
81988198
break;
8199-
case 26:
82008199
case 27:
8200+
case 26:
82018201
case 5:
82028202
safelyDetachRef(finishedWork, finishedWork.return);
82038203
recursivelyTraverseDisappearLayoutEffects(finishedWork);
@@ -8271,8 +8271,8 @@ function recursivelyTraverseReappearLayoutEffects(
82718271
commitClassCallbacks(finishedWork);
82728272
safelyAttachRef(finishedWork, finishedWork.return);
82738273
break;
8274-
case 26:
82758274
case 27:
8275+
case 26:
82768276
case 5:
82778277
recursivelyTraverseReappearLayoutEffects(
82788278
finishedRoot,
@@ -10830,10 +10830,10 @@ var slice = Array.prototype.slice,
1083010830
})(React.Component);
1083110831
var internals$jscomp$inline_1514 = {
1083210832
bundleType: 0,
10833-
version: "19.1.0-www-classic-b65afdd0-20250124",
10833+
version: "19.1.0-www-classic-c492f975-20250128",
1083410834
rendererPackageName: "react-art",
1083510835
currentDispatcherRef: ReactSharedInternals,
10836-
reconcilerVersion: "19.1.0-www-classic-b65afdd0-20250124"
10836+
reconcilerVersion: "19.1.0-www-classic-c492f975-20250128"
1083710837
};
1083810838
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1083910839
var hook$jscomp$inline_1515 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -10859,4 +10859,4 @@ exports.RadialGradient = RadialGradient;
1085910859
exports.Shape = TYPES.SHAPE;
1086010860
exports.Surface = Surface;
1086110861
exports.Text = Text;
10862-
exports.version = "19.1.0-www-classic-b65afdd0-20250124";
10862+
exports.version = "19.1.0-www-classic-c492f975-20250128";

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -7184,8 +7184,8 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
71847184
}
71857185
}
71867186
break;
7187-
case 26:
71887187
case 27:
7188+
case 26:
71897189
case 5:
71907190
recursivelyTraverseLayoutEffects(finishedRoot, finishedWork);
71917191
flags & 512 && safelyAttachRef(finishedWork, finishedWork.return);
@@ -7798,10 +7798,10 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
77987798
? root._visibility & -2
77997799
: root._visibility | 1),
78007800
instance &&
7801-
((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
7802-
null === current ||
7801+
(null === current ||
78037802
suspenseCallback ||
7804-
root ||
7803+
offscreenSubtreeIsHidden ||
7804+
offscreenSubtreeWasHidden ||
78057805
recursivelyTraverseDisappearLayoutEffects(finishedWork)),
78067806
null === finishedWork.memoizedProps ||
78077807
"manual" !== finishedWork.memoizedProps.mode)
@@ -7955,8 +7955,8 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber) {
79557955
);
79567956
recursivelyTraverseDisappearLayoutEffects(finishedWork);
79577957
break;
7958-
case 26:
79597958
case 27:
7959+
case 26:
79607960
case 5:
79617961
safelyDetachRef(finishedWork, finishedWork.return);
79627962
recursivelyTraverseDisappearLayoutEffects(finishedWork);
@@ -8030,8 +8030,8 @@ function recursivelyTraverseReappearLayoutEffects(
80308030
commitClassCallbacks(finishedWork);
80318031
safelyAttachRef(finishedWork, finishedWork.return);
80328032
break;
8033-
case 26:
80348033
case 27:
8034+
case 26:
80358035
case 5:
80368036
recursivelyTraverseReappearLayoutEffects(
80378037
finishedRoot,
@@ -10550,10 +10550,10 @@ var slice = Array.prototype.slice,
1055010550
})(React.Component);
1055110551
var internals$jscomp$inline_1487 = {
1055210552
bundleType: 0,
10553-
version: "19.1.0-www-modern-b65afdd0-20250124",
10553+
version: "19.1.0-www-modern-c492f975-20250128",
1055410554
rendererPackageName: "react-art",
1055510555
currentDispatcherRef: ReactSharedInternals,
10556-
reconcilerVersion: "19.1.0-www-modern-b65afdd0-20250124"
10556+
reconcilerVersion: "19.1.0-www-modern-c492f975-20250128"
1055710557
};
1055810558
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1055910559
var hook$jscomp$inline_1488 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -10579,4 +10579,4 @@ exports.RadialGradient = RadialGradient;
1057910579
exports.Shape = TYPES.SHAPE;
1058010580
exports.Surface = Surface;
1058110581
exports.Text = Text;
10582-
exports.version = "19.1.0-www-modern-b65afdd0-20250124";
10582+
exports.version = "19.1.0-www-modern-c492f975-20250128";

0 commit comments

Comments
 (0)