[Fizz] Various smaller refactors (#27368)
Back ported from a larger PR.
Sebastian Markbåge committed
Sep 13, 2023 at 00:16 UTC
e5205658f40ad181279857dbb66e36b8ebcd8c0e
2 files changed
+44
-32
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+1
-1
@@ -3717,7 +3717,7 @@ export function writeEndSegment(
3717
}
3718
3719
const completeSegmentScript1Full = stringToPrecomputedChunk(
3720
- completeSegmentFunction + ';$RS("',
3720
+ completeSegmentFunction + '$RS("',
3721
);
3722
const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
3723
const completeSegmentScript2 = stringToPrecomputedChunk('","');
packages/react-server/src/ReactFizzServer.js
+43
-31
@@ -169,36 +169,40 @@ const REPLAY_SUSPENSE_BOUNDARY = 1;
169
const RESUME_ELEMENT = 2;
170
const RESUME_SLOT = 3;
171
172
-type ResumableParentNode =
172
+type ReplaySuspenseBoundary = [
173
+ 1, // REPLAY_SUSPENSE_BOUNDARY
174
+ string | null /* name */,
175
+ string | number /* key */,
176
+ Array<ResumableNode> /* children */,
177
+ SuspenseBoundaryID /* id */,
178
+];
179
+
180
+type ReplayNode =
181
| [
182
0, // REPLAY_NODE
183
string | null /* name */,
184
string | number /* key */,
185
Array<ResumableNode> /* children */,
186
]
179
- | [
180
- 1, // REPLAY_SUSPENSE_BOUNDARY
181
- string | null /* name */,
182
- string | number /* key */,
183
- Array<ResumableNode> /* children */,
184
- SuspenseBoundaryID,
185
- ];
186
-type ResumableNode =
187
- | ResumableParentNode
188
- | [
189
- 2, // RESUME_ELEMENT
190
- string | null /* name */,
191
- string | number /* key */,
192
- number /* segment id */,
193
- ]
194
- | [
195
- 3, // RESUME_SLOT
196
- number /* index */,
197
- number /* segment id */,
198
- ];
187
+ | ReplaySuspenseBoundary;
188
+
189
+type ResumeElement = [
190
+ 2, // RESUME_ELEMENT
191
+ string | null /* name */,
192
+ string | number /* key */,
193
+ number /* segment id */,
194
+];
195
+
196
+type ResumeSlot = [
197
+ 3, // RESUME_SLOT
198
+ number /* index */,
199
+ number /* segment id */,
200
+];
201
+
202
+type ResumableNode = ReplayNode | ResumeElement | ResumeSlot;
203
204
type PostponedHoles = {
201
- workingMap: Map<KeyNode, ResumableParentNode>,
205
+ workingMap: Map<KeyNode, ReplayNode>,
206
root: Array<ResumableNode>,
207
};
208
@@ -394,6 +398,7 @@ export function createRequest(
398
request,
399
null,
400
children,
401
+ -1,
402
null,
403
rootSegment,
404
abortSet,
@@ -494,6 +499,7 @@ export function resumeRequest(
499
request,
500
null,
501
children,
502
+ -1,
503
null,
504
rootSegment,
505
abortSet,
@@ -551,6 +557,7 @@ function createTask(
557
request: Request,
558
thenableState: ThenableState | null,
559
node: ReactNodeList,
560
+ childIndex: number,
561
blockedBoundary: Root | SuspenseBoundary,
562
blockedSegment: Segment,
563
abortSet: Set<Task>,
@@ -568,6 +575,7 @@ function createTask(
575
}
576
const task: Task = ({
577
node,
578
+ childIndex,
579
ping: () => pingTask(request, task),
580
blockedBoundary,
581
blockedSegment,
@@ -578,7 +586,6 @@ function createTask(
586
context,
587
treeContext,
588
thenableState,
581
- childIndex: -1,
589
}: any);
590
if (__DEV__) {
591
task.componentStack = null;
@@ -730,6 +737,8 @@ function renderSuspenseBoundary(
737
props: Object,
738
): void {
739
pushBuiltInComponentStackInDEV(task, 'Suspense');
740
+
741
+ const prevKeyPath = task.keyPath;
742
const parentBoundary = task.blockedBoundary;
743
const parentSegment = task.blockedSegment;
744
@@ -791,6 +800,7 @@ function renderSuspenseBoundary(
800
newBoundary.resources,
801
);
802
}
803
+ task.keyPath = keyPath;
804
try {
805
// We use the safe form because we don't handle suspending here. Only error handling.
806
renderNode(request, task, content, -1);
@@ -844,6 +854,7 @@ function renderSuspenseBoundary(
854
}
855
task.blockedBoundary = parentBoundary;
856
task.blockedSegment = parentSegment;
857
+ task.keyPath = prevKeyPath;
858
}
859
860
// We create suspended task for the fallback because we don't want to actually work
@@ -852,6 +863,7 @@ function renderSuspenseBoundary(
863
request,
864
null,
865
fallback,
866
+ -1,
867
parentBoundary,
868
boundarySegment,
869
fallbackAbortSet,
@@ -1938,7 +1950,7 @@ function trackPostpone(
1950
);
1951
}
1952
const children: Array<ResumableNode> = [];
1941
- const boundaryNode: ResumableParentNode = [
1953
+ const boundaryNode: ReplaySuspenseBoundary = [
1954
REPLAY_SUSPENSE_BOUNDARY,
1955
boundaryKeyPath[1],
1956
boundaryKeyPath[2],
@@ -1946,7 +1958,7 @@ function trackPostpone(
1958
boundary.id,
1959
];
1960
trackedPostpones.workingMap.set(boundaryKeyPath, boundaryNode);
1949
- addToResumableParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
1961
+ addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
1962
}
1963
1964
const keyPath = task.keyPath;
@@ -1964,11 +1976,11 @@ function trackPostpone(
1976
keyPath[2],
1977
segment.id,
1978
];
1967
- addToResumableParent(resumableElement, keyPath[0], trackedPostpones);
1979
+ addToReplayParent(resumableElement, keyPath[0], trackedPostpones);
1980
} else {
1981
// Resume at the slot within the array
1982
const resumableNode = [RESUME_SLOT, task.childIndex, segment.id];
1971
- addToResumableParent(resumableNode, keyPath, trackedPostpones);
1983
+ addToReplayParent(resumableNode, keyPath, trackedPostpones);
1984
}
1985
}
1986
@@ -2023,6 +2035,7 @@ function spawnNewSuspendedTask(
2035
request,
2036
thenableState,
2037
task.node,
2038
+ task.childIndex,
2039
task.blockedBoundary,
2040
newSegment,
2041
task.abortSet,
@@ -2032,7 +2045,6 @@ function spawnNewSuspendedTask(
2045
task.context,
2046
task.treeContext,
2047
);
2035
- newTask.childIndex = task.childIndex;
2048
2049
if (__DEV__) {
2050
if (task.componentStack !== null) {
@@ -3072,7 +3084,7 @@ export function getResumableState(request: Request): ResumableState {
3084
return request.resumableState;
3085
}
3086
3075
-function addToResumableParent(
3087
+function addToReplayParent(
3088
node: ResumableNode,
3089
parentKeyPath: Root | KeyNode,
3090
trackedPostpones: PostponedHoles,
@@ -3088,9 +3100,9 @@ function addToResumableParent(
3100
parentKeyPath[1],
3101
parentKeyPath[2],
3102
([]: Array<ResumableNode>),
3091
- ]: ResumableParentNode);
3103
+ ]: ReplayNode);
3104
workingMap.set(parentKeyPath, parentNode);
3093
- addToResumableParent(parentNode, parentKeyPath[0], trackedPostpones);
3105
+ addToReplayParent(parentNode, parentKeyPath[0], trackedPostpones);
3106
}
3107
parentNode[3].push(node);
3108
}