Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Fizz] Don't double replay elements when it's the postpone point (#27440)

Browse Source 
The `resumeElement` function wasn't actually doing the correct thing
because it was resuming the element itself but what the child slot means
is that we're supposed to resume in the direct child of the element.
This is difficult to check for since it's all the possible branches that
the element can render into, so instead we just check this in
renderNode. It means the hottest path always checks the task which is
unfortunate.

And also, resuming using the correct nextSegmentId.

Fixes two bugs surfaced by this test.

---------

Co-authored-by: Josh Story <josh.c.story@gmail.com>

DiffTrain build for [a6ed60a8eb](https://github.com/facebook/react/commit/a6ed60a8eb0626e5f84d0bdbb62c0b61219150d3)
This commit is contained in:
sebmarkbage
2023-09-29 22:29:39 +00:00
parent a67bc42eca
commit 378167a655
9 changed files with 850 additions and 1315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiled/facebook-www/REVISION
+1 -1
View File
@@ -1 +1 @@
c7ba8c098889b6dc47fa9c807bbba3975a658584
a6ed60a8eb0626e5f84d0bdbb62c0b61219150d3
compiled/facebook-www/ReactART-dev.modern.js
+1 -1
View File
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}
var ReactVersion = "18.3.0-www-modern-10178652";
var ReactVersion = "18.3.0-www-modern-5845cabd";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
compiled/facebook-www/ReactART-prod.modern.js
+2 -2
View File
@@ -9772,7 +9772,7 @@ var slice = Array.prototype.slice,
return null;
},
bundleType: 0,
version: "18.3.0-www-modern-df7dbab9",
version: "18.3.0-www-modern-d368bffd",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1284 = {
@@ -9803,7 +9803,7 @@ var internals$jscomp$inline_1284 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-modern-df7dbab9"
reconcilerVersion: "18.3.0-www-modern-d368bffd"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1285 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
compiled/facebook-www/ReactDOMServer-dev.classic.js
+38 -126
View File
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-classic-93baf717";
var ReactVersion = "18.3.0-www-classic-bdb0331d";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -10566,11 +10566,7 @@ function replaySuspenseBoundary(
try {
// We use the safe form because we don't handle suspending here. Only error handling.
if (typeof childSlots === "number") {
resumeNode(request, task, childSlots, content, -1);
} else {
renderNode(request, task, content, -1);
}
renderNode(request, task, content, -1);
if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
throw new Error(
@@ -10625,57 +10621,28 @@ function replaySuspenseBoundary(
task.keyPath = prevKeyPath;
}
var fallbackKeyPath = [keyPath[0], "Suspense Fallback", keyPath[2]];
var suspendedFallbackTask; // We create suspended task for the fallback because we don't want to actually work
var fallbackKeyPath = [keyPath[0], "Suspense Fallback", keyPath[2]]; // We create suspended task for the fallback because we don't want to actually work
// on it yet in case we finish the main content, so we queue for later.
if (typeof fallbackSlots === "number") {
// Resuming directly in the fallback.
var resumedSegment = createPendingSegment(
request,
0,
null,
task.formatContext,
false,
false
);
resumedSegment.id = fallbackSlots;
resumedSegment.parentFlushed = true;
suspendedFallbackTask = createRenderTask(
request,
null,
fallback,
-1,
parentBoundary,
resumedSegment,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
} else {
var fallbackReplay = {
nodes: fallbackNodes,
slots: fallbackSlots,
pendingTasks: 0
};
suspendedFallbackTask = createReplayTask(
request,
null,
fallbackReplay,
fallback,
-1,
parentBoundary,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
}
var fallbackReplay = {
nodes: fallbackNodes,
slots: fallbackSlots,
pendingTasks: 0
};
var suspendedFallbackTask = createReplayTask(
request,
null,
fallbackReplay,
fallback,
-1,
parentBoundary,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
{
suspendedFallbackTask.componentStack = task.componentStack;
@@ -11433,53 +11400,6 @@ function resumeNode(request, task, segmentId, node, childIndex) {
}
}
function resumeElement(
request,
task,
keyPath,
segmentId,
prevThenableState,
type,
props,
ref
) {
var prevReplay = task.replay;
var blockedBoundary = task.blockedBoundary;
var resumedSegment = createPendingSegment(
request,
0,
null,
task.formatContext,
false,
false
);
resumedSegment.id = segmentId;
resumedSegment.parentFlushed = true;
try {
// Convert the current ReplayTask to a RenderTask.
var renderTask = task;
renderTask.replay = null;
renderTask.blockedSegment = resumedSegment;
renderElement(request, task, keyPath, prevThenableState, type, props, ref);
resumedSegment.status = COMPLETED;
if (blockedBoundary === null) {
request.completedRootSegment = resumedSegment;
} else {
queueCompletedSegment(blockedBoundary, resumedSegment);
if (blockedBoundary.parentFlushed) {
request.partialBoundaries.push(blockedBoundary);
}
}
} finally {
// Restore to a ReplayTask.
task.replay = prevReplay;
task.blockedSegment = null;
}
}
function replayElement(
request,
task,
@@ -11524,29 +11444,15 @@ function replayElement(
};
try {
if (typeof childSlots === "number") {
// Matched a resumable element.
resumeElement(
request,
task,
keyPath,
childSlots,
prevThenableState,
type,
props,
ref
);
} else {
renderElement(
request,
task,
keyPath,
prevThenableState,
type,
props,
ref
);
}
renderElement(
request,
task,
keyPath,
prevThenableState,
type,
props,
ref
);
if (
task.replay.pendingTasks === 1 &&
@@ -11682,8 +11588,14 @@ function renderNodeDestructiveImpl(
node,
childIndex
) {
// Stash the node we're working on. We'll pick up from this task in case
if (task.replay !== null && typeof task.replay.slots === "number") {
// TODO: Figure out a cheaper place than this hot path to do this check.
var resumeSegmentID = task.replay.slots;
resumeNode(request, task, resumeSegmentID, node, childIndex);
return;
} // Stash the node we're working on. We'll pick up from this task in case
// something suspends.
task.node = node;
task.childIndex = childIndex; // Handle object types
compiled/facebook-www/ReactDOMServer-dev.modern.js
+38 -126
View File
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-modern-10178652";
var ReactVersion = "18.3.0-www-modern-5845cabd";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -10325,11 +10325,7 @@ function replaySuspenseBoundary(
try {
// We use the safe form because we don't handle suspending here. Only error handling.
if (typeof childSlots === "number") {
resumeNode(request, task, childSlots, content, -1);
} else {
renderNode(request, task, content, -1);
}
renderNode(request, task, content, -1);
if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
throw new Error(
@@ -10384,57 +10380,28 @@ function replaySuspenseBoundary(
task.keyPath = prevKeyPath;
}
var fallbackKeyPath = [keyPath[0], "Suspense Fallback", keyPath[2]];
var suspendedFallbackTask; // We create suspended task for the fallback because we don't want to actually work
var fallbackKeyPath = [keyPath[0], "Suspense Fallback", keyPath[2]]; // We create suspended task for the fallback because we don't want to actually work
// on it yet in case we finish the main content, so we queue for later.
if (typeof fallbackSlots === "number") {
// Resuming directly in the fallback.
var resumedSegment = createPendingSegment(
request,
0,
null,
task.formatContext,
false,
false
);
resumedSegment.id = fallbackSlots;
resumedSegment.parentFlushed = true;
suspendedFallbackTask = createRenderTask(
request,
null,
fallback,
-1,
parentBoundary,
resumedSegment,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
} else {
var fallbackReplay = {
nodes: fallbackNodes,
slots: fallbackSlots,
pendingTasks: 0
};
suspendedFallbackTask = createReplayTask(
request,
null,
fallbackReplay,
fallback,
-1,
parentBoundary,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
}
var fallbackReplay = {
nodes: fallbackNodes,
slots: fallbackSlots,
pendingTasks: 0
};
var suspendedFallbackTask = createReplayTask(
request,
null,
fallbackReplay,
fallback,
-1,
parentBoundary,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
{
suspendedFallbackTask.componentStack = task.componentStack;
@@ -11181,53 +11148,6 @@ function resumeNode(request, task, segmentId, node, childIndex) {
}
}
function resumeElement(
request,
task,
keyPath,
segmentId,
prevThenableState,
type,
props,
ref
) {
var prevReplay = task.replay;
var blockedBoundary = task.blockedBoundary;
var resumedSegment = createPendingSegment(
request,
0,
null,
task.formatContext,
false,
false
);
resumedSegment.id = segmentId;
resumedSegment.parentFlushed = true;
try {
// Convert the current ReplayTask to a RenderTask.
var renderTask = task;
renderTask.replay = null;
renderTask.blockedSegment = resumedSegment;
renderElement(request, task, keyPath, prevThenableState, type, props, ref);
resumedSegment.status = COMPLETED;
if (blockedBoundary === null) {
request.completedRootSegment = resumedSegment;
} else {
queueCompletedSegment(blockedBoundary, resumedSegment);
if (blockedBoundary.parentFlushed) {
request.partialBoundaries.push(blockedBoundary);
}
}
} finally {
// Restore to a ReplayTask.
task.replay = prevReplay;
task.blockedSegment = null;
}
}
function replayElement(
request,
task,
@@ -11272,29 +11192,15 @@ function replayElement(
};
try {
if (typeof childSlots === "number") {
// Matched a resumable element.
resumeElement(
request,
task,
keyPath,
childSlots,
prevThenableState,
type,
props,
ref
);
} else {
renderElement(
request,
task,
keyPath,
prevThenableState,
type,
props,
ref
);
}
renderElement(
request,
task,
keyPath,
prevThenableState,
type,
props,
ref
);
if (
task.replay.pendingTasks === 1 &&
@@ -11430,8 +11336,14 @@ function renderNodeDestructiveImpl(
node,
childIndex
) {
// Stash the node we're working on. We'll pick up from this task in case
if (task.replay !== null && typeof task.replay.slots === "number") {
// TODO: Figure out a cheaper place than this hot path to do this check.
var resumeSegmentID = task.replay.slots;
resumeNode(request, task, resumeSegmentID, node, childIndex);
return;
} // Stash the node we're working on. We'll pick up from this task in case
// something suspends.
task.node = node;
task.childIndex = childIndex; // Handle object types
compiled/facebook-www/ReactDOMServer-prod.classic.js
+248 -315
View File
@@ -2289,16 +2289,16 @@ function hoistStylesheetDependency(stylesheet) {
function createRenderState(resumableState, generateStaticMarkup) {
var idPrefix = resumableState.idPrefix;
resumableState = idPrefix + "P:";
var JSCompiler_object_inline_segmentPrefix_1581 = idPrefix + "S:";
var JSCompiler_object_inline_segmentPrefix_1566 = idPrefix + "S:";
idPrefix += "B:";
var JSCompiler_object_inline_preconnects_1593 = new Set(),
JSCompiler_object_inline_fontPreloads_1594 = new Set(),
JSCompiler_object_inline_highImagePreloads_1595 = new Set(),
JSCompiler_object_inline_styles_1596 = new Map(),
JSCompiler_object_inline_bootstrapScripts_1597 = new Set(),
JSCompiler_object_inline_scripts_1598 = new Set(),
JSCompiler_object_inline_bulkPreloads_1599 = new Set(),
JSCompiler_object_inline_preloads_1600 = {
var JSCompiler_object_inline_preconnects_1578 = new Set(),
JSCompiler_object_inline_fontPreloads_1579 = new Set(),
JSCompiler_object_inline_highImagePreloads_1580 = new Set(),
JSCompiler_object_inline_styles_1581 = new Map(),
JSCompiler_object_inline_bootstrapScripts_1582 = new Set(),
JSCompiler_object_inline_scripts_1583 = new Set(),
JSCompiler_object_inline_bulkPreloads_1584 = new Set(),
JSCompiler_object_inline_preloads_1585 = {
images: new Map(),
stylesheets: new Map(),
scripts: new Map(),
@@ -2306,7 +2306,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
};
return {
placeholderPrefix: resumableState,
segmentPrefix: JSCompiler_object_inline_segmentPrefix_1581,
segmentPrefix: JSCompiler_object_inline_segmentPrefix_1566,
boundaryPrefix: idPrefix,
startInlineScript: "<script>",
htmlChunks: null,
@@ -2318,14 +2318,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
importMapChunks: [],
preloadChunks: [],
hoistableChunks: [],
preconnects: JSCompiler_object_inline_preconnects_1593,
fontPreloads: JSCompiler_object_inline_fontPreloads_1594,
highImagePreloads: JSCompiler_object_inline_highImagePreloads_1595,
styles: JSCompiler_object_inline_styles_1596,
bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1597,
scripts: JSCompiler_object_inline_scripts_1598,
bulkPreloads: JSCompiler_object_inline_bulkPreloads_1599,
preloads: JSCompiler_object_inline_preloads_1600,
preconnects: JSCompiler_object_inline_preconnects_1578,
fontPreloads: JSCompiler_object_inline_fontPreloads_1579,
highImagePreloads: JSCompiler_object_inline_highImagePreloads_1580,
styles: JSCompiler_object_inline_styles_1581,
bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1582,
scripts: JSCompiler_object_inline_scripts_1583,
bulkPreloads: JSCompiler_object_inline_bulkPreloads_1584,
preloads: JSCompiler_object_inline_preloads_1585,
boundaryResources: null,
stylesToHoist: !1,
generateStaticMarkup: generateStaticMarkup
@@ -3665,326 +3665,259 @@ function resumeNode(request, task, segmentId, node, childIndex) {
}
function renderNodeDestructiveImpl(
request,
task$jscomp$0,
task,
prevThenableState,
node$jscomp$0,
childIndex
) {
task$jscomp$0.node = node$jscomp$0;
task$jscomp$0.childIndex = childIndex;
if ("object" === typeof node$jscomp$0 && null !== node$jscomp$0) {
switch (node$jscomp$0.$$typeof) {
case REACT_ELEMENT_TYPE:
var type = node$jscomp$0.type,
key = node$jscomp$0.key,
props = node$jscomp$0.props,
ref = node$jscomp$0.ref,
name = getComponentNameFromType(type),
keyOrIndex = null == key ? (-1 === childIndex ? 0 : childIndex) : key;
key = [task$jscomp$0.keyPath, name, keyOrIndex];
if (null !== task$jscomp$0.replay)
a: {
var replay = task$jscomp$0.replay;
childIndex = replay.nodes;
for (
node$jscomp$0 = 0;
node$jscomp$0 < childIndex.length;
node$jscomp$0++
) {
var node = childIndex[node$jscomp$0];
if (keyOrIndex === node[1]) {
if (null !== name && name !== node[0])
throw Error(formatProdErrorMessage(489, name));
if (4 === node.length) {
name = node[2];
node = node[3];
task$jscomp$0.replay = {
nodes: name,
slots: node,
pendingTasks: 1
};
try {
if ("number" === typeof node) {
keyOrIndex = request;
var task = task$jscomp$0,
prevReplay = task.replay,
blockedBoundary = task.blockedBoundary,
resumedSegment = createPendingSegment(
keyOrIndex,
0,
null,
task.formatContext,
!1,
!1
);
resumedSegment.id = node;
resumedSegment.parentFlushed = !0;
try {
(task.replay = null),
(task.blockedSegment = resumedSegment),
renderElement(
keyOrIndex,
task,
key,
prevThenableState,
type,
props,
ref
),
(resumedSegment.status = 1),
null === blockedBoundary
? (keyOrIndex.completedRootSegment = resumedSegment)
: (queueCompletedSegment(
blockedBoundary,
resumedSegment
),
blockedBoundary.parentFlushed &&
keyOrIndex.partialBoundaries.push(
blockedBoundary
));
} finally {
(task.replay = prevReplay),
(task.blockedSegment = null);
}
} else
renderElement(
request,
task$jscomp$0,
key,
prevThenableState,
type,
props,
ref
);
if (
1 === task$jscomp$0.replay.pendingTasks &&
0 < task$jscomp$0.replay.nodes.length
)
throw Error(formatProdErrorMessage(488));
} catch (x) {
if (
"object" === typeof x &&
null !== x &&
(x === SuspenseException || "function" === typeof x.then)
)
throw x;
props = void 0;
var boundary = task$jscomp$0.blockedBoundary;
key = x;
props = logRecoverableError(request, key);
abortRemainingReplayNodes(
request,
boundary,
name,
node,
key,
props
);
} finally {
task$jscomp$0.replay.pendingTasks--,
(task$jscomp$0.replay = replay);
}
} else {
if (type !== REACT_SUSPENSE_TYPE)
throw Error(formatProdErrorMessage(490));
b: {
boundary = void 0;
prevReplay = node[5];
blockedBoundary = node[2];
resumedSegment = node[3];
type = null === node[4] ? [] : node[4][2];
replay = null === node[4] ? null : node[4][3];
ref = task$jscomp$0.keyPath;
name = task$jscomp$0.replay;
node = task$jscomp$0.blockedBoundary;
keyOrIndex = props.children;
props = props.fallback;
prevThenableState = new Set();
task = createSuspenseBoundary(request, prevThenableState);
task.parentFlushed = !0;
task.rootSegmentID = prevReplay;
task$jscomp$0.blockedBoundary = task;
task$jscomp$0.replay = {
nodes: blockedBoundary,
slots: resumedSegment,
pendingTasks: 1
};
request.renderState.boundaryResources = task.resources;
if (null !== task.replay && "number" === typeof task.replay.slots)
resumeNode(request, task, task.replay.slots, node$jscomp$0, childIndex);
else {
task.node = node$jscomp$0;
task.childIndex = childIndex;
if ("object" === typeof node$jscomp$0 && null !== node$jscomp$0) {
switch (node$jscomp$0.$$typeof) {
case REACT_ELEMENT_TYPE:
var type = node$jscomp$0.type,
key = node$jscomp$0.key,
props = node$jscomp$0.props,
ref = node$jscomp$0.ref,
name = getComponentNameFromType(type),
keyOrIndex =
null == key ? (-1 === childIndex ? 0 : childIndex) : key;
key = [task.keyPath, name, keyOrIndex];
if (null !== task.replay)
a: {
var replay = task.replay;
childIndex = replay.nodes;
for (
node$jscomp$0 = 0;
node$jscomp$0 < childIndex.length;
node$jscomp$0++
) {
var node = childIndex[node$jscomp$0];
if (keyOrIndex === node[1]) {
if (null !== name && name !== node[0])
throw Error(formatProdErrorMessage(489, name));
if (4 === node.length) {
name = node[2];
node = node[3];
task.replay = { nodes: name, slots: node, pendingTasks: 1 };
try {
"number" === typeof resumedSegment
? resumeNode(
request,
task$jscomp$0,
resumedSegment,
keyOrIndex,
-1
)
: renderNode(request, task$jscomp$0, keyOrIndex, -1);
if (
1 === task$jscomp$0.replay.pendingTasks &&
0 < task$jscomp$0.replay.nodes.length
(renderElement(
request,
task,
key,
prevThenableState,
type,
props,
ref
),
1 === task.replay.pendingTasks &&
0 < task.replay.nodes.length)
)
throw Error(formatProdErrorMessage(488));
task$jscomp$0.replay.pendingTasks--;
if (0 === task.pendingTasks && 0 === task.status) {
task.status = 1;
request.completedBoundaries.push(task);
break b;
}
} catch (error) {
(task.status = 4),
(boundary = logRecoverableError(request, error)),
(task.errorDigest = boundary),
task$jscomp$0.replay.pendingTasks--,
request.clientRenderedBoundaries.push(task);
} catch (x) {
if (
"object" === typeof x &&
null !== x &&
(x === SuspenseException ||
"function" === typeof x.then)
)
throw x;
props = void 0;
var boundary = task.blockedBoundary;
key = x;
props = logRecoverableError(request, key);
abortRemainingReplayNodes(
request,
boundary,
name,
node,
key,
props
);
} finally {
(request.renderState.boundaryResources = node
? node.resources
: null),
(task$jscomp$0.blockedBoundary = node),
(task$jscomp$0.replay = name),
(task$jscomp$0.keyPath = ref);
task.replay.pendingTasks--, (task.replay = replay);
}
key = [key[0], "Suspense Fallback", key[2]];
"number" === typeof replay
? ((boundary = createPendingSegment(
} else {
if (type !== REACT_SUSPENSE_TYPE)
throw Error(formatProdErrorMessage(490));
b: {
boundary = void 0;
prevThenableState = node[5];
type = node[2];
replay = node[3];
ref = null === node[4] ? [] : node[4][2];
node = null === node[4] ? null : node[4][3];
name = task.keyPath;
keyOrIndex = task.replay;
var parentBoundary = task.blockedBoundary,
content = props.children;
props = props.fallback;
var fallbackAbortSet = new Set(),
resumedBoundary = createSuspenseBoundary(
request,
0,
null,
task$jscomp$0.formatContext,
!1,
!1
)),
(boundary.id = replay),
(boundary.parentFlushed = !0),
(task$jscomp$0 = createRenderTask(
request,
null,
props,
-1,
node,
boundary,
prevThenableState,
key,
task$jscomp$0.formatContext,
task$jscomp$0.legacyContext,
task$jscomp$0.context,
task$jscomp$0.treeContext
)))
: (task$jscomp$0 = createReplayTask(
request,
null,
{ nodes: type, slots: replay, pendingTasks: 0 },
props,
-1,
node,
prevThenableState,
key,
task$jscomp$0.formatContext,
task$jscomp$0.legacyContext,
task$jscomp$0.context,
task$jscomp$0.treeContext
));
request.pingedTasks.push(task$jscomp$0);
fallbackAbortSet
);
resumedBoundary.parentFlushed = !0;
resumedBoundary.rootSegmentID = prevThenableState;
task.blockedBoundary = resumedBoundary;
task.replay = {
nodes: type,
slots: replay,
pendingTasks: 1
};
request.renderState.boundaryResources =
resumedBoundary.resources;
try {
renderNode(request, task, content, -1);
if (
1 === task.replay.pendingTasks &&
0 < task.replay.nodes.length
)
throw Error(formatProdErrorMessage(488));
task.replay.pendingTasks--;
if (
0 === resumedBoundary.pendingTasks &&
0 === resumedBoundary.status
) {
resumedBoundary.status = 1;
request.completedBoundaries.push(resumedBoundary);
break b;
}
} catch (error) {
(resumedBoundary.status = 4),
(boundary = logRecoverableError(request, error)),
(resumedBoundary.errorDigest = boundary),
task.replay.pendingTasks--,
request.clientRenderedBoundaries.push(
resumedBoundary
);
} finally {
(request.renderState.boundaryResources = parentBoundary
? parentBoundary.resources
: null),
(task.blockedBoundary = parentBoundary),
(task.replay = keyOrIndex),
(task.keyPath = name);
}
task = createReplayTask(
request,
null,
{ nodes: ref, slots: node, pendingTasks: 0 },
props,
-1,
parentBoundary,
fallbackAbortSet,
[key[0], "Suspense Fallback", key[2]],
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
request.pingedTasks.push(task);
}
}
childIndex.splice(node$jscomp$0, 1);
break a;
}
childIndex.splice(node$jscomp$0, 1);
break a;
}
}
}
else
renderElement(
else
renderElement(
request,
task,
key,
prevThenableState,
type,
props,
ref
);
return;
case REACT_PORTAL_TYPE:
throw Error(formatProdErrorMessage(257));
case REACT_LAZY_TYPE:
props = node$jscomp$0._init;
node$jscomp$0 = props(node$jscomp$0._payload);
renderNodeDestructiveImpl(
request,
task$jscomp$0,
key,
prevThenableState,
type,
props,
ref
task,
null,
node$jscomp$0,
childIndex
);
return;
}
if (isArrayImpl(node$jscomp$0)) {
renderChildrenArray(request, task, node$jscomp$0, childIndex);
return;
case REACT_PORTAL_TYPE:
throw Error(formatProdErrorMessage(257));
case REACT_LAZY_TYPE:
props = node$jscomp$0._init;
node$jscomp$0 = props(node$jscomp$0._payload);
renderNodeDestructiveImpl(
}
null === node$jscomp$0 || "object" !== typeof node$jscomp$0
? (props = null)
: ((props =
(MAYBE_ITERATOR_SYMBOL && node$jscomp$0[MAYBE_ITERATOR_SYMBOL]) ||
node$jscomp$0["@@iterator"]),
(props = "function" === typeof props ? props : null));
if (props && (props = props.call(node$jscomp$0))) {
node$jscomp$0 = props.next();
if (!node$jscomp$0.done) {
key = [];
do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
while (!node$jscomp$0.done);
renderChildrenArray(request, task, key, childIndex);
}
return;
}
if ("function" === typeof node$jscomp$0.then)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
task,
null,
node$jscomp$0,
unwrapThenable(node$jscomp$0),
childIndex
);
return;
}
if (isArrayImpl(node$jscomp$0)) {
renderChildrenArray(request, task$jscomp$0, node$jscomp$0, childIndex);
return;
}
null === node$jscomp$0 || "object" !== typeof node$jscomp$0
? (props = null)
: ((props =
(MAYBE_ITERATOR_SYMBOL && node$jscomp$0[MAYBE_ITERATOR_SYMBOL]) ||
node$jscomp$0["@@iterator"]),
(props = "function" === typeof props ? props : null));
if (props && (props = props.call(node$jscomp$0))) {
node$jscomp$0 = props.next();
if (!node$jscomp$0.done) {
key = [];
do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
while (!node$jscomp$0.done);
renderChildrenArray(request, task$jscomp$0, key, childIndex);
}
return;
}
if ("function" === typeof node$jscomp$0.then)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
null,
unwrapThenable(node$jscomp$0),
childIndex
);
if (
node$jscomp$0.$$typeof === REACT_CONTEXT_TYPE ||
node$jscomp$0.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
null,
node$jscomp$0._currentValue2,
childIndex
);
childIndex = Object.prototype.toString.call(node$jscomp$0);
throw Error(
formatProdErrorMessage(
31,
"[object Object]" === childIndex
? "object with keys {" + Object.keys(node$jscomp$0).join(", ") + "}"
: childIndex
if (
node$jscomp$0.$$typeof === REACT_CONTEXT_TYPE ||
node$jscomp$0.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
);
return renderNodeDestructiveImpl(
request,
task,
null,
node$jscomp$0._currentValue2,
childIndex
);
childIndex = Object.prototype.toString.call(node$jscomp$0);
throw Error(
formatProdErrorMessage(
31,
"[object Object]" === childIndex
? "object with keys {" + Object.keys(node$jscomp$0).join(", ") + "}"
: childIndex
)
);
}
"string" === typeof node$jscomp$0
? ((childIndex = task.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)))
: "number" === typeof node$jscomp$0 &&
((childIndex = task.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
"" + node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)));
}
"string" === typeof node$jscomp$0
? ((childIndex = task$jscomp$0.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)))
: "number" === typeof node$jscomp$0 &&
((childIndex = task$jscomp$0.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
"" + node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)));
}
function renderChildrenArray(request, task, children, childIndex) {
var prevKeyPath = task.keyPath;
@@ -5097,4 +5030,4 @@ exports.renderToString = function (children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-classic-57c30b64";
exports.version = "18.3.0-www-classic-ad1c14dc";
compiled/facebook-www/ReactDOMServer-prod.modern.js
+248 -315
View File
@@ -2289,16 +2289,16 @@ function hoistStylesheetDependency(stylesheet) {
function createRenderState(resumableState, generateStaticMarkup) {
var idPrefix = resumableState.idPrefix;
resumableState = idPrefix + "P:";
var JSCompiler_object_inline_segmentPrefix_1568 = idPrefix + "S:";
var JSCompiler_object_inline_segmentPrefix_1553 = idPrefix + "S:";
idPrefix += "B:";
var JSCompiler_object_inline_preconnects_1580 = new Set(),
JSCompiler_object_inline_fontPreloads_1581 = new Set(),
JSCompiler_object_inline_highImagePreloads_1582 = new Set(),
JSCompiler_object_inline_styles_1583 = new Map(),
JSCompiler_object_inline_bootstrapScripts_1584 = new Set(),
JSCompiler_object_inline_scripts_1585 = new Set(),
JSCompiler_object_inline_bulkPreloads_1586 = new Set(),
JSCompiler_object_inline_preloads_1587 = {
var JSCompiler_object_inline_preconnects_1565 = new Set(),
JSCompiler_object_inline_fontPreloads_1566 = new Set(),
JSCompiler_object_inline_highImagePreloads_1567 = new Set(),
JSCompiler_object_inline_styles_1568 = new Map(),
JSCompiler_object_inline_bootstrapScripts_1569 = new Set(),
JSCompiler_object_inline_scripts_1570 = new Set(),
JSCompiler_object_inline_bulkPreloads_1571 = new Set(),
JSCompiler_object_inline_preloads_1572 = {
images: new Map(),
stylesheets: new Map(),
scripts: new Map(),
@@ -2306,7 +2306,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
};
return {
placeholderPrefix: resumableState,
segmentPrefix: JSCompiler_object_inline_segmentPrefix_1568,
segmentPrefix: JSCompiler_object_inline_segmentPrefix_1553,
boundaryPrefix: idPrefix,
startInlineScript: "<script>",
htmlChunks: null,
@@ -2318,14 +2318,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
importMapChunks: [],
preloadChunks: [],
hoistableChunks: [],
preconnects: JSCompiler_object_inline_preconnects_1580,
fontPreloads: JSCompiler_object_inline_fontPreloads_1581,
highImagePreloads: JSCompiler_object_inline_highImagePreloads_1582,
styles: JSCompiler_object_inline_styles_1583,
bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1584,
scripts: JSCompiler_object_inline_scripts_1585,
bulkPreloads: JSCompiler_object_inline_bulkPreloads_1586,
preloads: JSCompiler_object_inline_preloads_1587,
preconnects: JSCompiler_object_inline_preconnects_1565,
fontPreloads: JSCompiler_object_inline_fontPreloads_1566,
highImagePreloads: JSCompiler_object_inline_highImagePreloads_1567,
styles: JSCompiler_object_inline_styles_1568,
bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1569,
scripts: JSCompiler_object_inline_scripts_1570,
bulkPreloads: JSCompiler_object_inline_bulkPreloads_1571,
preloads: JSCompiler_object_inline_preloads_1572,
boundaryResources: null,
stylesToHoist: !1,
generateStaticMarkup: generateStaticMarkup
@@ -3600,326 +3600,259 @@ function resumeNode(request, task, segmentId, node, childIndex) {
}
function renderNodeDestructiveImpl(
request,
task$jscomp$0,
task,
prevThenableState,
node$jscomp$0,
childIndex
) {
task$jscomp$0.node = node$jscomp$0;
task$jscomp$0.childIndex = childIndex;
if ("object" === typeof node$jscomp$0 && null !== node$jscomp$0) {
switch (node$jscomp$0.$$typeof) {
case REACT_ELEMENT_TYPE:
var type = node$jscomp$0.type,
key = node$jscomp$0.key,
props = node$jscomp$0.props,
ref = node$jscomp$0.ref,
name = getComponentNameFromType(type),
keyOrIndex = null == key ? (-1 === childIndex ? 0 : childIndex) : key;
key = [task$jscomp$0.keyPath, name, keyOrIndex];
if (null !== task$jscomp$0.replay)
a: {
var replay = task$jscomp$0.replay;
childIndex = replay.nodes;
for (
node$jscomp$0 = 0;
node$jscomp$0 < childIndex.length;
node$jscomp$0++
) {
var node = childIndex[node$jscomp$0];
if (keyOrIndex === node[1]) {
if (null !== name && name !== node[0])
throw Error(formatProdErrorMessage(489, name));
if (4 === node.length) {
name = node[2];
node = node[3];
task$jscomp$0.replay = {
nodes: name,
slots: node,
pendingTasks: 1
};
try {
if ("number" === typeof node) {
keyOrIndex = request;
var task = task$jscomp$0,
prevReplay = task.replay,
blockedBoundary = task.blockedBoundary,
resumedSegment = createPendingSegment(
keyOrIndex,
0,
null,
task.formatContext,
!1,
!1
);
resumedSegment.id = node;
resumedSegment.parentFlushed = !0;
try {
(task.replay = null),
(task.blockedSegment = resumedSegment),
renderElement(
keyOrIndex,
task,
key,
prevThenableState,
type,
props,
ref
),
(resumedSegment.status = 1),
null === blockedBoundary
? (keyOrIndex.completedRootSegment = resumedSegment)
: (queueCompletedSegment(
blockedBoundary,
resumedSegment
),
blockedBoundary.parentFlushed &&
keyOrIndex.partialBoundaries.push(
blockedBoundary
));
} finally {
(task.replay = prevReplay),
(task.blockedSegment = null);
}
} else
renderElement(
request,
task$jscomp$0,
key,
prevThenableState,
type,
props,
ref
);
if (
1 === task$jscomp$0.replay.pendingTasks &&
0 < task$jscomp$0.replay.nodes.length
)
throw Error(formatProdErrorMessage(488));
} catch (x) {
if (
"object" === typeof x &&
null !== x &&
(x === SuspenseException || "function" === typeof x.then)
)
throw x;
props = void 0;
var boundary = task$jscomp$0.blockedBoundary;
key = x;
props = logRecoverableError(request, key);
abortRemainingReplayNodes(
request,
boundary,
name,
node,
key,
props
);
} finally {
task$jscomp$0.replay.pendingTasks--,
(task$jscomp$0.replay = replay);
}
} else {
if (type !== REACT_SUSPENSE_TYPE)
throw Error(formatProdErrorMessage(490));
b: {
boundary = void 0;
prevReplay = node[5];
blockedBoundary = node[2];
resumedSegment = node[3];
type = null === node[4] ? [] : node[4][2];
replay = null === node[4] ? null : node[4][3];
ref = task$jscomp$0.keyPath;
name = task$jscomp$0.replay;
node = task$jscomp$0.blockedBoundary;
keyOrIndex = props.children;
props = props.fallback;
prevThenableState = new Set();
task = createSuspenseBoundary(request, prevThenableState);
task.parentFlushed = !0;
task.rootSegmentID = prevReplay;
task$jscomp$0.blockedBoundary = task;
task$jscomp$0.replay = {
nodes: blockedBoundary,
slots: resumedSegment,
pendingTasks: 1
};
request.renderState.boundaryResources = task.resources;
if (null !== task.replay && "number" === typeof task.replay.slots)
resumeNode(request, task, task.replay.slots, node$jscomp$0, childIndex);
else {
task.node = node$jscomp$0;
task.childIndex = childIndex;
if ("object" === typeof node$jscomp$0 && null !== node$jscomp$0) {
switch (node$jscomp$0.$$typeof) {
case REACT_ELEMENT_TYPE:
var type = node$jscomp$0.type,
key = node$jscomp$0.key,
props = node$jscomp$0.props,
ref = node$jscomp$0.ref,
name = getComponentNameFromType(type),
keyOrIndex =
null == key ? (-1 === childIndex ? 0 : childIndex) : key;
key = [task.keyPath, name, keyOrIndex];
if (null !== task.replay)
a: {
var replay = task.replay;
childIndex = replay.nodes;
for (
node$jscomp$0 = 0;
node$jscomp$0 < childIndex.length;
node$jscomp$0++
) {
var node = childIndex[node$jscomp$0];
if (keyOrIndex === node[1]) {
if (null !== name && name !== node[0])
throw Error(formatProdErrorMessage(489, name));
if (4 === node.length) {
name = node[2];
node = node[3];
task.replay = { nodes: name, slots: node, pendingTasks: 1 };
try {
"number" === typeof resumedSegment
? resumeNode(
request,
task$jscomp$0,
resumedSegment,
keyOrIndex,
-1
)
: renderNode(request, task$jscomp$0, keyOrIndex, -1);
if (
1 === task$jscomp$0.replay.pendingTasks &&
0 < task$jscomp$0.replay.nodes.length
(renderElement(
request,
task,
key,
prevThenableState,
type,
props,
ref
),
1 === task.replay.pendingTasks &&
0 < task.replay.nodes.length)
)
throw Error(formatProdErrorMessage(488));
task$jscomp$0.replay.pendingTasks--;
if (0 === task.pendingTasks && 0 === task.status) {
task.status = 1;
request.completedBoundaries.push(task);
break b;
}
} catch (error) {
(task.status = 4),
(boundary = logRecoverableError(request, error)),
(task.errorDigest = boundary),
task$jscomp$0.replay.pendingTasks--,
request.clientRenderedBoundaries.push(task);
} catch (x) {
if (
"object" === typeof x &&
null !== x &&
(x === SuspenseException ||
"function" === typeof x.then)
)
throw x;
props = void 0;
var boundary = task.blockedBoundary;
key = x;
props = logRecoverableError(request, key);
abortRemainingReplayNodes(
request,
boundary,
name,
node,
key,
props
);
} finally {
(request.renderState.boundaryResources = node
? node.resources
: null),
(task$jscomp$0.blockedBoundary = node),
(task$jscomp$0.replay = name),
(task$jscomp$0.keyPath = ref);
task.replay.pendingTasks--, (task.replay = replay);
}
key = [key[0], "Suspense Fallback", key[2]];
"number" === typeof replay
? ((boundary = createPendingSegment(
} else {
if (type !== REACT_SUSPENSE_TYPE)
throw Error(formatProdErrorMessage(490));
b: {
boundary = void 0;
prevThenableState = node[5];
type = node[2];
replay = node[3];
ref = null === node[4] ? [] : node[4][2];
node = null === node[4] ? null : node[4][3];
name = task.keyPath;
keyOrIndex = task.replay;
var parentBoundary = task.blockedBoundary,
content = props.children;
props = props.fallback;
var fallbackAbortSet = new Set(),
resumedBoundary = createSuspenseBoundary(
request,
0,
null,
task$jscomp$0.formatContext,
!1,
!1
)),
(boundary.id = replay),
(boundary.parentFlushed = !0),
(task$jscomp$0 = createRenderTask(
request,
null,
props,
-1,
node,
boundary,
prevThenableState,
key,
task$jscomp$0.formatContext,
task$jscomp$0.legacyContext,
task$jscomp$0.context,
task$jscomp$0.treeContext
)))
: (task$jscomp$0 = createReplayTask(
request,
null,
{ nodes: type, slots: replay, pendingTasks: 0 },
props,
-1,
node,
prevThenableState,
key,
task$jscomp$0.formatContext,
task$jscomp$0.legacyContext,
task$jscomp$0.context,
task$jscomp$0.treeContext
));
request.pingedTasks.push(task$jscomp$0);
fallbackAbortSet
);
resumedBoundary.parentFlushed = !0;
resumedBoundary.rootSegmentID = prevThenableState;
task.blockedBoundary = resumedBoundary;
task.replay = {
nodes: type,
slots: replay,
pendingTasks: 1
};
request.renderState.boundaryResources =
resumedBoundary.resources;
try {
renderNode(request, task, content, -1);
if (
1 === task.replay.pendingTasks &&
0 < task.replay.nodes.length
)
throw Error(formatProdErrorMessage(488));
task.replay.pendingTasks--;
if (
0 === resumedBoundary.pendingTasks &&
0 === resumedBoundary.status
) {
resumedBoundary.status = 1;
request.completedBoundaries.push(resumedBoundary);
break b;
}
} catch (error) {
(resumedBoundary.status = 4),
(boundary = logRecoverableError(request, error)),
(resumedBoundary.errorDigest = boundary),
task.replay.pendingTasks--,
request.clientRenderedBoundaries.push(
resumedBoundary
);
} finally {
(request.renderState.boundaryResources = parentBoundary
? parentBoundary.resources
: null),
(task.blockedBoundary = parentBoundary),
(task.replay = keyOrIndex),
(task.keyPath = name);
}
task = createReplayTask(
request,
null,
{ nodes: ref, slots: node, pendingTasks: 0 },
props,
-1,
parentBoundary,
fallbackAbortSet,
[key[0], "Suspense Fallback", key[2]],
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
request.pingedTasks.push(task);
}
}
childIndex.splice(node$jscomp$0, 1);
break a;
}
childIndex.splice(node$jscomp$0, 1);
break a;
}
}
}
else
renderElement(
else
renderElement(
request,
task,
key,
prevThenableState,
type,
props,
ref
);
return;
case REACT_PORTAL_TYPE:
throw Error(formatProdErrorMessage(257));
case REACT_LAZY_TYPE:
props = node$jscomp$0._init;
node$jscomp$0 = props(node$jscomp$0._payload);
renderNodeDestructiveImpl(
request,
task$jscomp$0,
key,
prevThenableState,
type,
props,
ref
task,
null,
node$jscomp$0,
childIndex
);
return;
}
if (isArrayImpl(node$jscomp$0)) {
renderChildrenArray(request, task, node$jscomp$0, childIndex);
return;
case REACT_PORTAL_TYPE:
throw Error(formatProdErrorMessage(257));
case REACT_LAZY_TYPE:
props = node$jscomp$0._init;
node$jscomp$0 = props(node$jscomp$0._payload);
renderNodeDestructiveImpl(
}
null === node$jscomp$0 || "object" !== typeof node$jscomp$0
? (props = null)
: ((props =
(MAYBE_ITERATOR_SYMBOL && node$jscomp$0[MAYBE_ITERATOR_SYMBOL]) ||
node$jscomp$0["@@iterator"]),
(props = "function" === typeof props ? props : null));
if (props && (props = props.call(node$jscomp$0))) {
node$jscomp$0 = props.next();
if (!node$jscomp$0.done) {
key = [];
do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
while (!node$jscomp$0.done);
renderChildrenArray(request, task, key, childIndex);
}
return;
}
if ("function" === typeof node$jscomp$0.then)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
task,
null,
node$jscomp$0,
unwrapThenable(node$jscomp$0),
childIndex
);
return;
}
if (isArrayImpl(node$jscomp$0)) {
renderChildrenArray(request, task$jscomp$0, node$jscomp$0, childIndex);
return;
}
null === node$jscomp$0 || "object" !== typeof node$jscomp$0
? (props = null)
: ((props =
(MAYBE_ITERATOR_SYMBOL && node$jscomp$0[MAYBE_ITERATOR_SYMBOL]) ||
node$jscomp$0["@@iterator"]),
(props = "function" === typeof props ? props : null));
if (props && (props = props.call(node$jscomp$0))) {
node$jscomp$0 = props.next();
if (!node$jscomp$0.done) {
key = [];
do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
while (!node$jscomp$0.done);
renderChildrenArray(request, task$jscomp$0, key, childIndex);
}
return;
}
if ("function" === typeof node$jscomp$0.then)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
null,
unwrapThenable(node$jscomp$0),
childIndex
);
if (
node$jscomp$0.$$typeof === REACT_CONTEXT_TYPE ||
node$jscomp$0.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
null,
node$jscomp$0._currentValue2,
childIndex
);
childIndex = Object.prototype.toString.call(node$jscomp$0);
throw Error(
formatProdErrorMessage(
31,
"[object Object]" === childIndex
? "object with keys {" + Object.keys(node$jscomp$0).join(", ") + "}"
: childIndex
if (
node$jscomp$0.$$typeof === REACT_CONTEXT_TYPE ||
node$jscomp$0.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
);
return renderNodeDestructiveImpl(
request,
task,
null,
node$jscomp$0._currentValue2,
childIndex
);
childIndex = Object.prototype.toString.call(node$jscomp$0);
throw Error(
formatProdErrorMessage(
31,
"[object Object]" === childIndex
? "object with keys {" + Object.keys(node$jscomp$0).join(", ") + "}"
: childIndex
)
);
}
"string" === typeof node$jscomp$0
? ((childIndex = task.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)))
: "number" === typeof node$jscomp$0 &&
((childIndex = task.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
"" + node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)));
}
"string" === typeof node$jscomp$0
? ((childIndex = task$jscomp$0.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)))
: "number" === typeof node$jscomp$0 &&
((childIndex = task$jscomp$0.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
"" + node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)));
}
function renderChildrenArray(request, task, children, childIndex) {
var prevKeyPath = task.keyPath;
@@ -5032,4 +4965,4 @@ exports.renderToString = function (children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-modern-df7dbab9";
exports.version = "18.3.0-www-modern-d368bffd";
compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
+37 -125
View File
@@ -10209,11 +10209,7 @@ function replaySuspenseBoundary(
try {
// We use the safe form because we don't handle suspending here. Only error handling.
if (typeof childSlots === "number") {
resumeNode(request, task, childSlots, content, -1);
} else {
renderNode(request, task, content, -1);
}
renderNode(request, task, content, -1);
if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
throw new Error(
@@ -10268,57 +10264,28 @@ function replaySuspenseBoundary(
task.keyPath = prevKeyPath;
}
var fallbackKeyPath = [keyPath[0], "Suspense Fallback", keyPath[2]];
var suspendedFallbackTask; // We create suspended task for the fallback because we don't want to actually work
var fallbackKeyPath = [keyPath[0], "Suspense Fallback", keyPath[2]]; // We create suspended task for the fallback because we don't want to actually work
// on it yet in case we finish the main content, so we queue for later.
if (typeof fallbackSlots === "number") {
// Resuming directly in the fallback.
var resumedSegment = createPendingSegment(
request,
0,
null,
task.formatContext,
false,
false
);
resumedSegment.id = fallbackSlots;
resumedSegment.parentFlushed = true;
suspendedFallbackTask = createRenderTask(
request,
null,
fallback,
-1,
parentBoundary,
resumedSegment,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
} else {
var fallbackReplay = {
nodes: fallbackNodes,
slots: fallbackSlots,
pendingTasks: 0
};
suspendedFallbackTask = createReplayTask(
request,
null,
fallbackReplay,
fallback,
-1,
parentBoundary,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
}
var fallbackReplay = {
nodes: fallbackNodes,
slots: fallbackSlots,
pendingTasks: 0
};
var suspendedFallbackTask = createReplayTask(
request,
null,
fallbackReplay,
fallback,
-1,
parentBoundary,
fallbackAbortSet,
fallbackKeyPath,
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
{
suspendedFallbackTask.componentStack = task.componentStack;
@@ -11065,53 +11032,6 @@ function resumeNode(request, task, segmentId, node, childIndex) {
}
}
function resumeElement(
request,
task,
keyPath,
segmentId,
prevThenableState,
type,
props,
ref
) {
var prevReplay = task.replay;
var blockedBoundary = task.blockedBoundary;
var resumedSegment = createPendingSegment(
request,
0,
null,
task.formatContext,
false,
false
);
resumedSegment.id = segmentId;
resumedSegment.parentFlushed = true;
try {
// Convert the current ReplayTask to a RenderTask.
var renderTask = task;
renderTask.replay = null;
renderTask.blockedSegment = resumedSegment;
renderElement(request, task, keyPath, prevThenableState, type, props, ref);
resumedSegment.status = COMPLETED;
if (blockedBoundary === null) {
request.completedRootSegment = resumedSegment;
} else {
queueCompletedSegment(blockedBoundary, resumedSegment);
if (blockedBoundary.parentFlushed) {
request.partialBoundaries.push(blockedBoundary);
}
}
} finally {
// Restore to a ReplayTask.
task.replay = prevReplay;
task.blockedSegment = null;
}
}
function replayElement(
request,
task,
@@ -11156,29 +11076,15 @@ function replayElement(
};
try {
if (typeof childSlots === "number") {
// Matched a resumable element.
resumeElement(
request,
task,
keyPath,
childSlots,
prevThenableState,
type,
props,
ref
);
} else {
renderElement(
request,
task,
keyPath,
prevThenableState,
type,
props,
ref
);
}
renderElement(
request,
task,
keyPath,
prevThenableState,
type,
props,
ref
);
if (
task.replay.pendingTasks === 1 &&
@@ -11314,8 +11220,14 @@ function renderNodeDestructiveImpl(
node,
childIndex
) {
// Stash the node we're working on. We'll pick up from this task in case
if (task.replay !== null && typeof task.replay.slots === "number") {
// TODO: Figure out a cheaper place than this hot path to do this check.
var resumeSegmentID = task.replay.slots;
resumeNode(request, task, resumeSegmentID, node, childIndex);
return;
} // Stash the node we're working on. We'll pick up from this task in case
// something suspends.
task.node = node;
task.childIndex = childIndex; // Handle object types
compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
+237 -304
View File
@@ -3540,337 +3540,270 @@ function resumeNode(request, task, segmentId, node, childIndex) {
}
function renderNodeDestructiveImpl(
request,
task$jscomp$0,
task,
prevThenableState,
node$jscomp$0,
childIndex
) {
task$jscomp$0.node = node$jscomp$0;
task$jscomp$0.childIndex = childIndex;
if ("object" === typeof node$jscomp$0 && null !== node$jscomp$0) {
switch (node$jscomp$0.$$typeof) {
case REACT_ELEMENT_TYPE:
var type = node$jscomp$0.type,
key = node$jscomp$0.key,
props = node$jscomp$0.props,
ref = node$jscomp$0.ref,
name = getComponentNameFromType(type),
keyOrIndex = null == key ? (-1 === childIndex ? 0 : childIndex) : key;
key = [task$jscomp$0.keyPath, name, keyOrIndex];
if (null !== task$jscomp$0.replay)
a: {
var replay = task$jscomp$0.replay;
childIndex = replay.nodes;
for (
node$jscomp$0 = 0;
node$jscomp$0 < childIndex.length;
node$jscomp$0++
) {
var node = childIndex[node$jscomp$0];
if (keyOrIndex === node[1]) {
if (null !== name && name !== node[0])
throw Error(
'Expected to see a component of type "' +
name +
"\" in this slot. The tree doesn't match so React will fallback to client rendering."
);
if (4 === node.length) {
name = node[2];
node = node[3];
task$jscomp$0.replay = {
nodes: name,
slots: node,
pendingTasks: 1
};
try {
if ("number" === typeof node) {
keyOrIndex = request;
var task = task$jscomp$0,
prevReplay = task.replay,
blockedBoundary = task.blockedBoundary,
resumedSegment = createPendingSegment(
keyOrIndex,
0,
null,
task.formatContext,
!1,
!1
);
resumedSegment.id = node;
resumedSegment.parentFlushed = !0;
try {
(task.replay = null),
(task.blockedSegment = resumedSegment),
renderElement(
keyOrIndex,
task,
key,
prevThenableState,
type,
props,
ref
),
(resumedSegment.status = 1),
null === blockedBoundary
? (keyOrIndex.completedRootSegment = resumedSegment)
: (queueCompletedSegment(
blockedBoundary,
resumedSegment
),
blockedBoundary.parentFlushed &&
keyOrIndex.partialBoundaries.push(
blockedBoundary
));
} finally {
(task.replay = prevReplay),
(task.blockedSegment = null);
}
} else
renderElement(
request,
task$jscomp$0,
key,
prevThenableState,
type,
props,
ref
);
if (
1 === task$jscomp$0.replay.pendingTasks &&
0 < task$jscomp$0.replay.nodes.length
)
throw Error(
"Couldn't find all resumable slots by key/index during replaying. The tree doesn't match so React will fallback to client rendering."
);
} catch (x) {
if (
"object" === typeof x &&
null !== x &&
(x === SuspenseException || "function" === typeof x.then)
)
throw x;
props = void 0;
var boundary = task$jscomp$0.blockedBoundary;
key = x;
props = logRecoverableError(request, key);
abortRemainingReplayNodes(
request,
boundary,
name,
node,
key,
props
);
} finally {
task$jscomp$0.replay.pendingTasks--,
(task$jscomp$0.replay = replay);
}
} else {
if (type !== REACT_SUSPENSE_TYPE)
if (null !== task.replay && "number" === typeof task.replay.slots)
resumeNode(request, task, task.replay.slots, node$jscomp$0, childIndex);
else {
task.node = node$jscomp$0;
task.childIndex = childIndex;
if ("object" === typeof node$jscomp$0 && null !== node$jscomp$0) {
switch (node$jscomp$0.$$typeof) {
case REACT_ELEMENT_TYPE:
var type = node$jscomp$0.type,
key = node$jscomp$0.key,
props = node$jscomp$0.props,
ref = node$jscomp$0.ref,
name = getComponentNameFromType(type),
keyOrIndex =
null == key ? (-1 === childIndex ? 0 : childIndex) : key;
key = [task.keyPath, name, keyOrIndex];
if (null !== task.replay)
a: {
var replay = task.replay;
childIndex = replay.nodes;
for (
node$jscomp$0 = 0;
node$jscomp$0 < childIndex.length;
node$jscomp$0++
) {
var node = childIndex[node$jscomp$0];
if (keyOrIndex === node[1]) {
if (null !== name && name !== node[0])
throw Error(
"Expected to see a Suspense boundary in this slot. The tree doesn't match so React will fallback to client rendering."
'Expected to see a component of type "' +
name +
"\" in this slot. The tree doesn't match so React will fallback to client rendering."
);
b: {
boundary = void 0;
prevReplay = node[5];
blockedBoundary = node[2];
resumedSegment = node[3];
type = null === node[4] ? [] : node[4][2];
replay = null === node[4] ? null : node[4][3];
ref = task$jscomp$0.keyPath;
name = task$jscomp$0.replay;
node = task$jscomp$0.blockedBoundary;
keyOrIndex = props.children;
props = props.fallback;
prevThenableState = new Set();
task = createSuspenseBoundary(request, prevThenableState);
task.parentFlushed = !0;
task.rootSegmentID = prevReplay;
task$jscomp$0.blockedBoundary = task;
task$jscomp$0.replay = {
nodes: blockedBoundary,
slots: resumedSegment,
pendingTasks: 1
};
request.renderState.boundaryResources = task.resources;
if (4 === node.length) {
name = node[2];
node = node[3];
task.replay = { nodes: name, slots: node, pendingTasks: 1 };
try {
"number" === typeof resumedSegment
? resumeNode(
request,
task$jscomp$0,
resumedSegment,
keyOrIndex,
-1
)
: renderNode(request, task$jscomp$0, keyOrIndex, -1);
if (
1 === task$jscomp$0.replay.pendingTasks &&
0 < task$jscomp$0.replay.nodes.length
(renderElement(
request,
task,
key,
prevThenableState,
type,
props,
ref
),
1 === task.replay.pendingTasks &&
0 < task.replay.nodes.length)
)
throw Error(
"Couldn't find all resumable slots by key/index during replaying. The tree doesn't match so React will fallback to client rendering."
);
task$jscomp$0.replay.pendingTasks--;
if (0 === task.pendingTasks && 0 === task.status) {
task.status = 1;
request.completedBoundaries.push(task);
break b;
}
} catch (error) {
(task.status = 4),
(boundary = logRecoverableError(request, error)),
(task.errorDigest = boundary),
task$jscomp$0.replay.pendingTasks--,
request.clientRenderedBoundaries.push(task);
} catch (x) {
if (
"object" === typeof x &&
null !== x &&
(x === SuspenseException ||
"function" === typeof x.then)
)
throw x;
props = void 0;
var boundary = task.blockedBoundary;
key = x;
props = logRecoverableError(request, key);
abortRemainingReplayNodes(
request,
boundary,
name,
node,
key,
props
);
} finally {
(request.renderState.boundaryResources = node
? node.resources
: null),
(task$jscomp$0.blockedBoundary = node),
(task$jscomp$0.replay = name),
(task$jscomp$0.keyPath = ref);
task.replay.pendingTasks--, (task.replay = replay);
}
key = [key[0], "Suspense Fallback", key[2]];
"number" === typeof replay
? ((boundary = createPendingSegment(
} else {
if (type !== REACT_SUSPENSE_TYPE)
throw Error(
"Expected to see a Suspense boundary in this slot. The tree doesn't match so React will fallback to client rendering."
);
b: {
boundary = void 0;
prevThenableState = node[5];
type = node[2];
replay = node[3];
ref = null === node[4] ? [] : node[4][2];
node = null === node[4] ? null : node[4][3];
name = task.keyPath;
keyOrIndex = task.replay;
var parentBoundary = task.blockedBoundary,
content = props.children;
props = props.fallback;
var fallbackAbortSet = new Set(),
resumedBoundary = createSuspenseBoundary(
request,
0,
null,
task$jscomp$0.formatContext,
!1,
!1
)),
(boundary.id = replay),
(boundary.parentFlushed = !0),
(task$jscomp$0 = createRenderTask(
request,
null,
props,
-1,
node,
boundary,
prevThenableState,
key,
task$jscomp$0.formatContext,
task$jscomp$0.legacyContext,
task$jscomp$0.context,
task$jscomp$0.treeContext
)))
: (task$jscomp$0 = createReplayTask(
request,
null,
{ nodes: type, slots: replay, pendingTasks: 0 },
props,
-1,
node,
prevThenableState,
key,
task$jscomp$0.formatContext,
task$jscomp$0.legacyContext,
task$jscomp$0.context,
task$jscomp$0.treeContext
));
request.pingedTasks.push(task$jscomp$0);
fallbackAbortSet
);
resumedBoundary.parentFlushed = !0;
resumedBoundary.rootSegmentID = prevThenableState;
task.blockedBoundary = resumedBoundary;
task.replay = {
nodes: type,
slots: replay,
pendingTasks: 1
};
request.renderState.boundaryResources =
resumedBoundary.resources;
try {
renderNode(request, task, content, -1);
if (
1 === task.replay.pendingTasks &&
0 < task.replay.nodes.length
)
throw Error(
"Couldn't find all resumable slots by key/index during replaying. The tree doesn't match so React will fallback to client rendering."
);
task.replay.pendingTasks--;
if (
0 === resumedBoundary.pendingTasks &&
0 === resumedBoundary.status
) {
resumedBoundary.status = 1;
request.completedBoundaries.push(resumedBoundary);
break b;
}
} catch (error) {
(resumedBoundary.status = 4),
(boundary = logRecoverableError(request, error)),
(resumedBoundary.errorDigest = boundary),
task.replay.pendingTasks--,
request.clientRenderedBoundaries.push(
resumedBoundary
);
} finally {
(request.renderState.boundaryResources = parentBoundary
? parentBoundary.resources
: null),
(task.blockedBoundary = parentBoundary),
(task.replay = keyOrIndex),
(task.keyPath = name);
}
task = createReplayTask(
request,
null,
{ nodes: ref, slots: node, pendingTasks: 0 },
props,
-1,
parentBoundary,
fallbackAbortSet,
[key[0], "Suspense Fallback", key[2]],
task.formatContext,
task.legacyContext,
task.context,
task.treeContext
);
request.pingedTasks.push(task);
}
}
childIndex.splice(node$jscomp$0, 1);
break a;
}
childIndex.splice(node$jscomp$0, 1);
break a;
}
}
}
else
renderElement(
request,
task$jscomp$0,
key,
prevThenableState,
type,
props,
ref
else
renderElement(
request,
task,
key,
prevThenableState,
type,
props,
ref
);
return;
case REACT_PORTAL_TYPE:
throw Error(
"Portals are not currently supported by the server renderer. Render them conditionally so that they only appear on the client render."
);
case REACT_LAZY_TYPE:
props = node$jscomp$0._init;
node$jscomp$0 = props(node$jscomp$0._payload);
renderNodeDestructiveImpl(
request,
task,
null,
node$jscomp$0,
childIndex
);
return;
}
if (isArrayImpl(node$jscomp$0)) {
renderChildrenArray(request, task, node$jscomp$0, childIndex);
return;
case REACT_PORTAL_TYPE:
throw Error(
"Portals are not currently supported by the server renderer. Render them conditionally so that they only appear on the client render."
);
case REACT_LAZY_TYPE:
props = node$jscomp$0._init;
node$jscomp$0 = props(node$jscomp$0._payload);
renderNodeDestructiveImpl(
}
null === node$jscomp$0 || "object" !== typeof node$jscomp$0
? (props = null)
: ((props =
(MAYBE_ITERATOR_SYMBOL && node$jscomp$0[MAYBE_ITERATOR_SYMBOL]) ||
node$jscomp$0["@@iterator"]),
(props = "function" === typeof props ? props : null));
if (props && (props = props.call(node$jscomp$0))) {
node$jscomp$0 = props.next();
if (!node$jscomp$0.done) {
key = [];
do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
while (!node$jscomp$0.done);
renderChildrenArray(request, task, key, childIndex);
}
return;
}
if ("function" === typeof node$jscomp$0.then)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
task,
null,
node$jscomp$0,
unwrapThenable(node$jscomp$0),
childIndex
);
return;
}
if (isArrayImpl(node$jscomp$0)) {
renderChildrenArray(request, task$jscomp$0, node$jscomp$0, childIndex);
return;
}
null === node$jscomp$0 || "object" !== typeof node$jscomp$0
? (props = null)
: ((props =
(MAYBE_ITERATOR_SYMBOL && node$jscomp$0[MAYBE_ITERATOR_SYMBOL]) ||
node$jscomp$0["@@iterator"]),
(props = "function" === typeof props ? props : null));
if (props && (props = props.call(node$jscomp$0))) {
node$jscomp$0 = props.next();
if (!node$jscomp$0.done) {
key = [];
do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
while (!node$jscomp$0.done);
renderChildrenArray(request, task$jscomp$0, key, childIndex);
}
return;
}
if ("function" === typeof node$jscomp$0.then)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
null,
unwrapThenable(node$jscomp$0),
childIndex
if (
node$jscomp$0.$$typeof === REACT_CONTEXT_TYPE ||
node$jscomp$0.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
return renderNodeDestructiveImpl(
request,
task,
null,
node$jscomp$0._currentValue,
childIndex
);
childIndex = Object.prototype.toString.call(node$jscomp$0);
throw Error(
"Objects are not valid as a React child (found: " +
("[object Object]" === childIndex
? "object with keys {" + Object.keys(node$jscomp$0).join(", ") + "}"
: childIndex) +
"). If you meant to render a collection of children, use an array instead."
);
if (
node$jscomp$0.$$typeof === REACT_CONTEXT_TYPE ||
node$jscomp$0.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
return renderNodeDestructiveImpl(
request,
task$jscomp$0,
null,
node$jscomp$0._currentValue,
childIndex
);
childIndex = Object.prototype.toString.call(node$jscomp$0);
throw Error(
"Objects are not valid as a React child (found: " +
("[object Object]" === childIndex
? "object with keys {" + Object.keys(node$jscomp$0).join(", ") + "}"
: childIndex) +
"). If you meant to render a collection of children, use an array instead."
);
}
"string" === typeof node$jscomp$0
? ((childIndex = task.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)))
: "number" === typeof node$jscomp$0 &&
((childIndex = task.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
"" + node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)));
}
"string" === typeof node$jscomp$0
? ((childIndex = task$jscomp$0.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)))
: "number" === typeof node$jscomp$0 &&
((childIndex = task$jscomp$0.blockedSegment),
null !== childIndex &&
(childIndex.lastPushedText = pushTextInstance(
childIndex.chunks,
"" + node$jscomp$0,
request.renderState,
childIndex.lastPushedText
)));
}
function renderChildrenArray(request, task, children, childIndex) {
var prevKeyPath = task.keyPath;