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

Add Postpone API (#27238)

Browse Source 
This adds an experimental `unstable_postpone(reason)` API.

Currently we don't have a way to model effectively an Infinite Promise.
I.e. something that suspends but never resolves. The reason this is
useful is because you might have something else that unblocks it later.
E.g. by updating in place later, or by client rendering.

On the client this works to model as an Infinite Promise (in fact,
that's what this implementation does). However, in Fizz and Flight that
doesn't work because the stream needs to end at some point. We don't
have any way of knowing that we're suspended on infinite promises. It's
not enough to tag the promises because you could await those and thus
creating new promises. The only way we really have to signal this
through a series of indirections like async functions, is by throwing.
It's not 100% safe because these values can be caught but it's the best
we can do.

Effectively `postpone(reason)` behaves like a built-in [Catch
Boundary](https://github.com/facebook/react/pull/26854). It's like
`raise(Postpone, reason)` except it's built-in so it needs to be able to
be encoded and caught by Suspense boundaries.

In Flight and Fizz these behave pretty much the same as errors. Flight
just forwards it to retrigger on the client. In Fizz they just trigger
client rendering which itself might just postpone again or fill in the
value. The difference is how they get logged.

In Flight and Fizz they log to `onPostpone(reason)` instead of
`onError(error)`. This log is meant to help find deopts on the server
like finding places where you fall back to client rendering. The reason
that you pass in is for that purpose to help the reason for any deopts.

I do track the stack trace in DEV but I don't currently expose it to
`onPostpone`. This seems like a limitation. It might be better to expose
the Postpone object which is an Error object but that's more of an
implementation detail. I could also pass it as a second argument.

On the client after hydration they don't get passed to
`onRecoverableError`. There's no global `onPostpone` API to capture
postponed things on the client just like there's no `onError`. At that
point it's just assumed to be intentional. It doesn't have any `digest`
or reason passed to the client since it's not logged.

There are some hacky solutions that currently just tries to reuse as
much of the existing code as possible but should be more properly
implemented.
- Fiber is currently just converting it to a fake Promise object so that
it behaves like an infinite Promise.
- Fizz is encoding the magic digest string `"POSTPONE"` in the HTML so
we know to ignore it but it should probably just be something neater
that doesn't share namespace with digests.

Next I plan on using this in the `/static` entry points for additional
features.

Why "postpone"? It's basically a synonym to "defer" but we plan on using
"defer" for other purposes and it's overloaded anyway.

DiffTrain build for [ac1a16c67e](https://github.com/facebook/react/commit/ac1a16c67e268fcb2c52e91717cbc918c7c24446)
This commit is contained in:
sebmarkbage
2023-08-17 17:32:07 +00:00
parent d03f8fbb1b
commit 5cc1661577
24 changed files with 2024 additions and 1876 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiled/facebook-www/REVISION
+1 -1
View File
@@ -1 +1 @@
0fb5b61ac6951a492242618e4ace6c1826335efc
ac1a16c67e268fcb2c52e91717cbc918c7c24446
compiled/facebook-www/React-dev.modern.js
+1 -1
View File
@@ -27,7 +27,7 @@ if (
}
"use strict";
var ReactVersion = "18.3.0-www-modern-1d530573";
var ReactVersion = "18.3.0-www-modern-00d6344c";
// ATTENTION
// When adding new symbols to this file,
compiled/facebook-www/React-prod.modern.js
+1 -1
View File
@@ -615,4 +615,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-www-modern-8591a478";
exports.version = "18.3.0-www-modern-5d9b9771";
compiled/facebook-www/ReactART-dev.classic.js
+177 -172
View File
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}
var ReactVersion = "18.3.0-www-classic-5e6556f6";
var ReactVersion = "18.3.0-www-classic-04b4ce38";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
@@ -13065,182 +13065,181 @@ function throwException(
}
}
if (
value !== null &&
typeof value === "object" &&
typeof value.then === "function"
) {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
if (value !== null && typeof value === "object") {
if (typeof value.then === "function") {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
}
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
var suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (current === null) {
renderDidSuspend();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var suspenseBoundary = getSuspenseHandler();
var _isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
var _retryQueue = offscreenQueue.retryQueue;
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
} // Fall through
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource =
wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
} else {
var _retryQueue = offscreenQueue.retryQueue;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
}
}
}
break;
} // Fall through
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
return;
} else {
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
}
}
}
}
} // This is a regular error, not a Suspense wakeable.
value = createCapturedValueAtFiber(value, sourceFiber);
renderDidError(value); // We didn't find a boundary that could handle this type of exception. Start
@@ -15614,7 +15613,8 @@ function updateDehydratedSuspenseComponent(
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
// client side render instead.
var digest, message, stack;
var digest;
var message, stack;
{
var _getSuspenseInstanceF = getSuspenseInstanceFallbackErrorDetails();
@@ -15624,21 +15624,26 @@ function updateDehydratedSuspenseComponent(
stack = _getSuspenseInstanceF.stack;
}
var error;
var capturedValue = null; // TODO: Figure out a better signal than encoding a magic digest value.
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
{
var error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
}
error.digest = digest;
capturedValue = createCapturedValue(error, digest, stack);
}
error.digest = digest;
var capturedValue = createCapturedValue(error, digest, stack);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
compiled/facebook-www/ReactART-dev.modern.js
+177 -172
View File
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}
var ReactVersion = "18.3.0-www-modern-3e4bb1ea";
var ReactVersion = "18.3.0-www-modern-2dcc215c";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
@@ -12787,182 +12787,181 @@ function throwException(
}
}
if (
value !== null &&
typeof value === "object" &&
typeof value.then === "function"
) {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
if (value !== null && typeof value === "object") {
if (typeof value.then === "function") {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
}
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
var suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (current === null) {
renderDidSuspend();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var suspenseBoundary = getSuspenseHandler();
var _isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
var _retryQueue = offscreenQueue.retryQueue;
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
} // Fall through
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource =
wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
} else {
var _retryQueue = offscreenQueue.retryQueue;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
}
}
}
break;
} // Fall through
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
return;
} else {
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
}
}
}
}
} // This is a regular error, not a Suspense wakeable.
value = createCapturedValueAtFiber(value, sourceFiber);
renderDidError(value); // We didn't find a boundary that could handle this type of exception. Start
@@ -15314,7 +15313,8 @@ function updateDehydratedSuspenseComponent(
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
// client side render instead.
var digest, message, stack;
var digest;
var message, stack;
{
var _getSuspenseInstanceF = getSuspenseInstanceFallbackErrorDetails();
@@ -15324,21 +15324,26 @@ function updateDehydratedSuspenseComponent(
stack = _getSuspenseInstanceF.stack;
}
var error;
var capturedValue = null; // TODO: Figure out a better signal than encoding a magic digest value.
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
{
var error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
}
error.digest = digest;
capturedValue = createCapturedValue(error, digest, stack);
}
error.digest = digest;
var capturedValue = createCapturedValue(error, digest, stack);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
compiled/facebook-www/ReactART-prod.modern.js
+2 -2
View File
@@ -9759,7 +9759,7 @@ var slice = Array.prototype.slice,
return null;
},
bundleType: 0,
version: "18.3.0-www-modern-c25ea5bc",
version: "18.3.0-www-modern-0328f77f",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1283 = {
@@ -9790,7 +9790,7 @@ var internals$jscomp$inline_1283 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-modern-c25ea5bc"
reconcilerVersion: "18.3.0-www-modern-0328f77f"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1284 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
compiled/facebook-www/ReactDOM-dev.classic.js
+203 -199
View File
@@ -17614,216 +17614,214 @@ function throwException(
}
}
if (
value !== null &&
typeof value === "object" &&
typeof value.then === "function"
) {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
if (value !== null && typeof value === "object") {
if (typeof value.then === "function") {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
{
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
{
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
}
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
var suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (current === null) {
renderDidSuspend();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var suspenseBoundary = getSuspenseHandler();
var _isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
var _retryQueue = offscreenQueue.retryQueue;
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
} // Fall through
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource =
wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
} else {
var _retryQueue = offscreenQueue.retryQueue;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
}
}
}
break;
} // Fall through
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
return;
} else {
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
}
}
}
} else {
// This is a regular error, not a Suspense wakeable.
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
} // This is a regular error, not a Suspense wakeable.
var _suspenseBoundary = getSuspenseHandler(); // If the error was thrown during hydration, we may be able to recover by
// discarding the dehydrated content and switching to a client render.
// Instead of surfacing the error, find the nearest Suspense boundary
// and render it again without hydration.
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
if (_suspenseBoundary !== null) {
if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags$1) {
// Set a flag to indicate that we should try rendering the normal
// children again, not the fallback.
_suspenseBoundary.flags |= ForceClientRender;
}
var _suspenseBoundary = getSuspenseHandler(); // If the error was thrown during hydration, we may be able to recover by
// discarding the dehydrated content and switching to a client render.
// Instead of surfacing the error, find the nearest Suspense boundary
// and render it again without hydration.
markSuspenseBoundaryShouldCapture(
_suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Even though the user may not be affected by this error, we should
// still log it so it can be fixed.
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
return;
if (_suspenseBoundary !== null) {
if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags$1) {
// Set a flag to indicate that we should try rendering the normal
// children again, not the fallback.
_suspenseBoundary.flags |= ForceClientRender;
}
markSuspenseBoundaryShouldCapture(
_suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Even though the user may not be affected by this error, we should
// still log it so it can be fixed.
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
return;
}
}
@@ -20451,7 +20449,8 @@ function updateDehydratedSuspenseComponent(
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
// client side render instead.
var digest, message, stack;
var digest;
var message, stack;
{
var _getSuspenseInstanceF =
@@ -20462,21 +20461,26 @@ function updateDehydratedSuspenseComponent(
stack = _getSuspenseInstanceF.stack;
}
var error;
var capturedValue = null; // TODO: Figure out a better signal than encoding a magic digest value.
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
{
var error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
}
error.digest = digest;
capturedValue = createCapturedValue(error, digest, stack);
}
error.digest = digest;
var capturedValue = createCapturedValue(error, digest, stack);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
@@ -33940,7 +33944,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-e1c2495a";
var ReactVersion = "18.3.0-www-classic-87900e0d";
function createPortal$1(
children,
compiled/facebook-www/ReactDOM-dev.modern.js
+203 -199
View File
@@ -17521,216 +17521,214 @@ function throwException(
}
}
if (
value !== null &&
typeof value === "object" &&
typeof value.then === "function"
) {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
if (value !== null && typeof value === "object") {
if (typeof value.then === "function") {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
{
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
{
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
}
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
var suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (current === null) {
renderDidSuspend();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var suspenseBoundary = getSuspenseHandler();
var _isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
var _retryQueue = offscreenQueue.retryQueue;
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
} // Fall through
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource =
wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
} else {
var _retryQueue = offscreenQueue.retryQueue;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
}
}
}
break;
} // Fall through
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
return;
} else {
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
}
}
}
} else {
// This is a regular error, not a Suspense wakeable.
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
} // This is a regular error, not a Suspense wakeable.
var _suspenseBoundary = getSuspenseHandler(); // If the error was thrown during hydration, we may be able to recover by
// discarding the dehydrated content and switching to a client render.
// Instead of surfacing the error, find the nearest Suspense boundary
// and render it again without hydration.
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
if (_suspenseBoundary !== null) {
if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags$1) {
// Set a flag to indicate that we should try rendering the normal
// children again, not the fallback.
_suspenseBoundary.flags |= ForceClientRender;
}
var _suspenseBoundary = getSuspenseHandler(); // If the error was thrown during hydration, we may be able to recover by
// discarding the dehydrated content and switching to a client render.
// Instead of surfacing the error, find the nearest Suspense boundary
// and render it again without hydration.
markSuspenseBoundaryShouldCapture(
_suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Even though the user may not be affected by this error, we should
// still log it so it can be fixed.
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
return;
if (_suspenseBoundary !== null) {
if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags$1) {
// Set a flag to indicate that we should try rendering the normal
// children again, not the fallback.
_suspenseBoundary.flags |= ForceClientRender;
}
markSuspenseBoundaryShouldCapture(
_suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Even though the user may not be affected by this error, we should
// still log it so it can be fixed.
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
return;
}
}
@@ -20336,7 +20334,8 @@ function updateDehydratedSuspenseComponent(
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
// client side render instead.
var digest, message, stack;
var digest;
var message, stack;
{
var _getSuspenseInstanceF =
@@ -20347,21 +20346,26 @@ function updateDehydratedSuspenseComponent(
stack = _getSuspenseInstanceF.stack;
}
var error;
var capturedValue = null; // TODO: Figure out a better signal than encoding a magic digest value.
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
{
var error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
}
error.digest = digest;
capturedValue = createCapturedValue(error, digest, stack);
}
error.digest = digest;
var capturedValue = createCapturedValue(error, digest, stack);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
@@ -33785,7 +33789,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-3e4bb1ea";
var ReactVersion = "18.3.0-www-modern-2dcc215c";
function createPortal$1(
children,
compiled/facebook-www/ReactDOM-prod.classic.js
+19 -18
View File
@@ -10528,21 +10528,22 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
renderDidSuspendDelayIfPossible();
break a;
} else value = Error(formatProdErrorMessage(426));
} else if (
isHydrating &&
unitOfWork.mode & 1 &&
((wakeable = suspenseHandlerStackCursor.current), null !== wakeable)
) {
0 === (wakeable.flags & 65536) && (wakeable.flags |= 256);
markSuspenseBoundaryShouldCapture(
wakeable,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
if (isHydrating && unitOfWork.mode & 1) {
var suspenseBoundary$61 = suspenseHandlerStackCursor.current;
if (null !== suspenseBoundary$61) {
0 === (suspenseBoundary$61.flags & 65536) &&
(suspenseBoundary$61.flags |= 256);
markSuspenseBoundaryShouldCapture(
suspenseBoundary$61,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
}
root = value = createCapturedValueAtFiber(value, unitOfWork);
4 !== workInProgressRootExitStatus &&
@@ -16574,7 +16575,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1800 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-ac0b40a5",
version: "18.3.0-www-classic-a80847ca",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2159 = {
@@ -16604,7 +16605,7 @@ var internals$jscomp$inline_2159 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-classic-ac0b40a5"
reconcilerVersion: "18.3.0-www-classic-a80847ca"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2160 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16832,4 +16833,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-classic-ac0b40a5";
exports.version = "18.3.0-www-classic-a80847ca";
compiled/facebook-www/ReactDOM-prod.modern.js
+19 -18
View File
@@ -10360,21 +10360,22 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
renderDidSuspendDelayIfPossible();
break a;
} else value = Error(formatProdErrorMessage(426));
} else if (
isHydrating &&
unitOfWork.mode & 1 &&
((wakeable = suspenseHandlerStackCursor.current), null !== wakeable)
) {
0 === (wakeable.flags & 65536) && (wakeable.flags |= 256);
markSuspenseBoundaryShouldCapture(
wakeable,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
if (isHydrating && unitOfWork.mode & 1) {
var suspenseBoundary$61 = suspenseHandlerStackCursor.current;
if (null !== suspenseBoundary$61) {
0 === (suspenseBoundary$61.flags & 65536) &&
(suspenseBoundary$61.flags |= 256);
markSuspenseBoundaryShouldCapture(
suspenseBoundary$61,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
}
root = value = createCapturedValueAtFiber(value, unitOfWork);
4 !== workInProgressRootExitStatus &&
@@ -16104,7 +16105,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1759 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-c25ea5bc",
version: "18.3.0-www-modern-0328f77f",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2123 = {
@@ -16135,7 +16136,7 @@ var internals$jscomp$inline_2123 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-modern-c25ea5bc"
reconcilerVersion: "18.3.0-www-modern-0328f77f"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2124 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16291,4 +16292,4 @@ exports.unstable_createEventHandle = function (type, options) {
return eventHandle;
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-modern-c25ea5bc";
exports.version = "18.3.0-www-modern-0328f77f";
compiled/facebook-www/ReactDOM-profiling.classic.js
+19 -18
View File
@@ -11207,21 +11207,22 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
renderDidSuspendDelayIfPossible();
break a;
} else value = Error(formatProdErrorMessage(426));
} else if (
isHydrating &&
unitOfWork.mode & 1 &&
((wakeable = suspenseHandlerStackCursor.current), null !== wakeable)
) {
0 === (wakeable.flags & 65536) && (wakeable.flags |= 256);
markSuspenseBoundaryShouldCapture(
wakeable,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
if (isHydrating && unitOfWork.mode & 1) {
var suspenseBoundary$66 = suspenseHandlerStackCursor.current;
if (null !== suspenseBoundary$66) {
0 === (suspenseBoundary$66.flags & 65536) &&
(suspenseBoundary$66.flags |= 256);
markSuspenseBoundaryShouldCapture(
suspenseBoundary$66,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
}
root = value = createCapturedValueAtFiber(value, unitOfWork);
4 !== workInProgressRootExitStatus &&
@@ -17348,7 +17349,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1885 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-dfca71a7",
version: "18.3.0-www-classic-8964de47",
rendererPackageName: "react-dom"
};
(function (internals) {
@@ -17392,7 +17393,7 @@ var devToolsConfig$jscomp$inline_1885 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-classic-dfca71a7"
reconcilerVersion: "18.3.0-www-classic-8964de47"
});
assign(Internals, {
ReactBrowserEventEmitter: {
@@ -17607,7 +17608,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-classic-dfca71a7";
exports.version = "18.3.0-www-classic-8964de47";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
compiled/facebook-www/ReactDOM-profiling.modern.js
+19 -18
View File
@@ -11033,21 +11033,22 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
renderDidSuspendDelayIfPossible();
break a;
} else value = Error(formatProdErrorMessage(426));
} else if (
isHydrating &&
unitOfWork.mode & 1 &&
((wakeable = suspenseHandlerStackCursor.current), null !== wakeable)
) {
0 === (wakeable.flags & 65536) && (wakeable.flags |= 256);
markSuspenseBoundaryShouldCapture(
wakeable,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
if (isHydrating && unitOfWork.mode & 1) {
var suspenseBoundary$66 = suspenseHandlerStackCursor.current;
if (null !== suspenseBoundary$66) {
0 === (suspenseBoundary$66.flags & 65536) &&
(suspenseBoundary$66.flags |= 256);
markSuspenseBoundaryShouldCapture(
suspenseBoundary$66,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
}
root = value = createCapturedValueAtFiber(value, unitOfWork);
4 !== workInProgressRootExitStatus &&
@@ -16872,7 +16873,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1844 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-1ea20273",
version: "18.3.0-www-modern-5790f94f",
rendererPackageName: "react-dom"
};
(function (internals) {
@@ -16917,7 +16918,7 @@ var devToolsConfig$jscomp$inline_1844 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-modern-1ea20273"
reconcilerVersion: "18.3.0-www-modern-5790f94f"
});
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
exports.createPortal = function (children, container) {
@@ -17060,7 +17061,7 @@ exports.unstable_createEventHandle = function (type, options) {
return eventHandle;
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-modern-1ea20273";
exports.version = "18.3.0-www-modern-5790f94f";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
compiled/facebook-www/ReactDOMServer-dev.classic.js
+17 -4
View File
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-classic-9ea6402e";
var ReactVersion = "18.3.0-www-classic-6c503419";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -9553,7 +9553,8 @@ function createRequest(
onAllReady,
onShellReady,
onShellError,
onFatalError
onFatalError,
onPostpone
) {
prepareHostDispatcher();
var pingedTasks = [];
@@ -9579,6 +9580,7 @@ function createRequest(
completedBoundaries: [],
partialBoundaries: [],
onError: onError === undefined ? defaultErrorHandler : onError,
onPostpone: onPostpone === undefined ? noop : onPostpone,
onAllReady: onAllReady === undefined ? noop : onAllReady,
onShellReady: onShellReady === undefined ? noop : onShellReady,
onShellError: onShellError === undefined ? noop : onShellError,
@@ -9895,7 +9897,13 @@ function renderSuspenseBoundary(request, task, props) {
} catch (error) {
contentRootSegment.status = ERRORED;
newBoundary.forceClientRender = true;
newBoundary.errorDigest = logRecoverableError(request, error);
var errorDigest;
{
errorDigest = logRecoverableError(request, error);
}
newBoundary.errorDigest = errorDigest;
{
captureBoundaryErrorDetailsDev(newBoundary, error);
@@ -10849,7 +10857,11 @@ function renderNode(request, task, node) {
function erroredTask(request, boundary, segment, error) {
// Report the error to a global handler.
var errorDigest = logRecoverableError(request, error);
var errorDigest;
{
errorDigest = logRecoverableError(request, error);
}
if (boundary === null) {
fatalError(request, error);
@@ -11738,6 +11750,7 @@ function renderToStringImpl(
undefined,
onShellReady,
undefined,
undefined,
undefined
);
startWork(request); // If anything suspended and is still pending, we'll abort it before writing.
compiled/facebook-www/ReactDOMServer-dev.modern.js
+17 -4
View File
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-modern-1500f435";
var ReactVersion = "18.3.0-www-modern-778649fb";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -9312,7 +9312,8 @@ function createRequest(
onAllReady,
onShellReady,
onShellError,
onFatalError
onFatalError,
onPostpone
) {
prepareHostDispatcher();
var pingedTasks = [];
@@ -9338,6 +9339,7 @@ function createRequest(
completedBoundaries: [],
partialBoundaries: [],
onError: onError === undefined ? defaultErrorHandler : onError,
onPostpone: onPostpone === undefined ? noop : onPostpone,
onAllReady: onAllReady === undefined ? noop : onAllReady,
onShellReady: onShellReady === undefined ? noop : onShellReady,
onShellError: onShellError === undefined ? noop : onShellError,
@@ -9654,7 +9656,13 @@ function renderSuspenseBoundary(request, task, props) {
} catch (error) {
contentRootSegment.status = ERRORED;
newBoundary.forceClientRender = true;
newBoundary.errorDigest = logRecoverableError(request, error);
var errorDigest;
{
errorDigest = logRecoverableError(request, error);
}
newBoundary.errorDigest = errorDigest;
{
captureBoundaryErrorDetailsDev(newBoundary, error);
@@ -10597,7 +10605,11 @@ function renderNode(request, task, node) {
function erroredTask(request, boundary, segment, error) {
// Report the error to a global handler.
var errorDigest = logRecoverableError(request, error);
var errorDigest;
{
errorDigest = logRecoverableError(request, error);
}
if (boundary === null) {
fatalError(request, error);
@@ -11486,6 +11498,7 @@ function renderToStringImpl(
undefined,
onShellReady,
undefined,
undefined,
undefined
);
startWork(request); // If anything suspended and is still pending, we'll abort it before writing.
compiled/facebook-www/ReactDOMServer-prod.classic.js
+103 -97
View File
@@ -2667,7 +2667,8 @@ function createRequest(
onAllReady,
onShellReady,
onShellError,
onFatalError
onFatalError,
onPostpone
) {
ReactDOMCurrentDispatcher.current = ReactDOMServerDispatcher;
var pingedTasks = [],
@@ -2691,6 +2692,7 @@ function createRequest(
completedBoundaries: [],
partialBoundaries: [],
onError: void 0 === onError ? defaultErrorHandler : onError,
onPostpone: void 0 === onPostpone ? noop : onPostpone,
onAllReady: void 0 === onAllReady ? noop : onAllReady,
onShellReady: void 0 === onShellReady ? noop : onShellReady,
onShellError: void 0 === onShellError ? noop : onShellError,
@@ -2808,26 +2810,29 @@ function resolveDefaultProps(Component, baseProps) {
function renderElement(request, task, prevThenableState, type, props, ref) {
if ("function" === typeof type)
if (type.prototype && type.prototype.isReactComponent) {
ref = getMaskedContext(type, task.legacyContext);
prevThenableState = type.contextType;
prevThenableState = new type(
prevThenableState = getMaskedContext(type, task.legacyContext);
var JSCompiler_inline_result = type.contextType;
JSCompiler_inline_result = new type(
props,
"object" === typeof prevThenableState && null !== prevThenableState
? prevThenableState._currentValue2
: ref
"object" === typeof JSCompiler_inline_result &&
null !== JSCompiler_inline_result
? JSCompiler_inline_result._currentValue2
: prevThenableState
);
var initialState =
void 0 !== prevThenableState.state ? prevThenableState.state : null;
prevThenableState.updater = classComponentUpdater;
prevThenableState.props = props;
prevThenableState.state = initialState;
var internalInstance = { queue: [], replace: !1 };
prevThenableState._reactInternals = internalInstance;
void 0 !== JSCompiler_inline_result.state
? JSCompiler_inline_result.state
: null;
JSCompiler_inline_result.updater = classComponentUpdater;
JSCompiler_inline_result.props = props;
JSCompiler_inline_result.state = initialState;
ref = { queue: [], replace: !1 };
JSCompiler_inline_result._reactInternals = ref;
var contextType = type.contextType;
prevThenableState.context =
JSCompiler_inline_result.context =
"object" === typeof contextType && null !== contextType
? contextType._currentValue2
: ref;
: prevThenableState;
contextType = type.getDerivedStateFromProps;
"function" === typeof contextType &&
((contextType = contextType(props, initialState)),
@@ -2835,37 +2840,38 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
null === contextType || void 0 === contextType
? initialState
: assign({}, initialState, contextType)),
(prevThenableState.state = initialState));
(JSCompiler_inline_result.state = initialState));
if (
"function" !== typeof type.getDerivedStateFromProps &&
"function" !== typeof prevThenableState.getSnapshotBeforeUpdate &&
("function" === typeof prevThenableState.UNSAFE_componentWillMount ||
"function" === typeof prevThenableState.componentWillMount)
"function" !==
typeof JSCompiler_inline_result.getSnapshotBeforeUpdate &&
("function" ===
typeof JSCompiler_inline_result.UNSAFE_componentWillMount ||
"function" === typeof JSCompiler_inline_result.componentWillMount)
)
if (
((initialState = prevThenableState.state),
"function" === typeof prevThenableState.componentWillMount &&
prevThenableState.componentWillMount(),
"function" === typeof prevThenableState.UNSAFE_componentWillMount &&
prevThenableState.UNSAFE_componentWillMount(),
initialState !== prevThenableState.state &&
((initialState = JSCompiler_inline_result.state),
"function" === typeof JSCompiler_inline_result.componentWillMount &&
JSCompiler_inline_result.componentWillMount(),
"function" ===
typeof JSCompiler_inline_result.UNSAFE_componentWillMount &&
JSCompiler_inline_result.UNSAFE_componentWillMount(),
initialState !== JSCompiler_inline_result.state &&
classComponentUpdater.enqueueReplaceState(
prevThenableState,
prevThenableState.state,
JSCompiler_inline_result,
JSCompiler_inline_result.state,
null
),
null !== internalInstance.queue && 0 < internalInstance.queue.length)
null !== ref.queue && 0 < ref.queue.length)
) {
initialState = internalInstance.queue;
var oldReplace = internalInstance.replace;
internalInstance.queue = null;
internalInstance.replace = !1;
initialState = ref.queue;
var oldReplace = ref.replace;
ref.queue = null;
ref.replace = !1;
if (oldReplace && 1 === initialState.length)
prevThenableState.state = initialState[0];
JSCompiler_inline_result.state = initialState[0];
else {
internalInstance = oldReplace
? initialState[0]
: prevThenableState.state;
ref = oldReplace ? initialState[0] : JSCompiler_inline_result.state;
contextType = !0;
for (
oldReplace = oldReplace ? 1 : 0;
@@ -2876,30 +2882,30 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
partial =
"function" === typeof partial
? partial.call(
prevThenableState,
internalInstance,
JSCompiler_inline_result,
ref,
props,
ref
prevThenableState
)
: partial;
null != partial &&
(contextType
? ((contextType = !1),
(internalInstance = assign({}, internalInstance, partial)))
: assign(internalInstance, partial));
? ((contextType = !1), (ref = assign({}, ref, partial)))
: assign(ref, partial));
}
prevThenableState.state = internalInstance;
JSCompiler_inline_result.state = ref;
}
} else internalInstance.queue = null;
props = prevThenableState.render();
internalInstance = type.childContextTypes;
if (null !== internalInstance && void 0 !== internalInstance) {
ref = task.legacyContext;
if ("function" !== typeof prevThenableState.getChildContext) type = ref;
} else ref.queue = null;
props = JSCompiler_inline_result.render();
ref = type.childContextTypes;
if (null !== ref && void 0 !== ref) {
prevThenableState = task.legacyContext;
if ("function" !== typeof JSCompiler_inline_result.getChildContext)
type = prevThenableState;
else {
prevThenableState = prevThenableState.getChildContext();
for (var contextKey in prevThenableState)
if (!(contextKey in internalInstance))
JSCompiler_inline_result = JSCompiler_inline_result.getChildContext();
for (var contextKey in JSCompiler_inline_result)
if (!(contextKey in ref))
throw Error(
formatProdErrorMessage(
108,
@@ -2907,11 +2913,11 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
contextKey
)
);
type = assign({}, ref, prevThenableState);
type = assign({}, prevThenableState, JSCompiler_inline_result);
}
task.legacyContext = type;
renderNodeDestructiveImpl(request, task, null, props);
task.legacyContext = ref;
task.legacyContext = prevThenableState;
} else renderNodeDestructiveImpl(request, task, null, props);
} else if (
((contextKey = getMaskedContext(type, task.legacyContext)),
@@ -2919,8 +2925,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
(currentlyRenderingTask = task),
(thenableIndexCounter = localIdCounter = 0),
(thenableState = prevThenableState),
(prevThenableState = type(props, contextKey)),
(props = finishHooks(type, props, prevThenableState, contextKey)),
(JSCompiler_inline_result = type(props, contextKey)),
(props = finishHooks(type, props, JSCompiler_inline_result, contextKey)),
0 !== localIdCounter)
) {
type = task.treeContext;
@@ -2933,7 +2939,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
} else renderNodeDestructiveImpl(request, task, null, props);
else if ("string" === typeof type) {
contextKey = task.blockedSegment;
ref = pushStartInstance(
prevThenableState = pushStartInstance(
contextKey.chunks,
type,
props,
@@ -2943,14 +2949,14 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
contextKey.lastPushedText
);
contextKey.lastPushedText = !1;
prevThenableState = contextKey.formatContext;
JSCompiler_inline_result = contextKey.formatContext;
contextKey.formatContext = getChildFormatContext(
prevThenableState,
JSCompiler_inline_result,
type,
props
);
renderNode(request, task, ref);
contextKey.formatContext = prevThenableState;
renderNode(request, task, prevThenableState);
contextKey.formatContext = JSCompiler_inline_result;
a: {
task = contextKey.chunks;
switch (type) {
@@ -2974,13 +2980,13 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
case "wbr":
break a;
case "body":
if (1 >= prevThenableState.insertionMode) {
if (1 >= JSCompiler_inline_result.insertionMode) {
request.responseState.hasBody = !0;
break a;
}
break;
case "html":
if (0 === prevThenableState.insertionMode) break a;
if (0 === JSCompiler_inline_result.insertionMode) break a;
}
task.push("</", type, ">");
}
@@ -3011,7 +3017,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
prevThenableState = props.fallback;
props = props.children;
ref = new Set();
internalInstance = {
initialState = {
id: null,
rootSegmentID: -1,
parentFlushed: !1,
@@ -3023,17 +3029,17 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
errorDigest: null,
resources: new Set()
};
initialState = createPendingSegment(
contextType = createPendingSegment(
request,
contextKey.chunks.length,
internalInstance,
initialState,
contextKey.formatContext,
!1,
!1
);
contextKey.children.push(initialState);
contextKey.children.push(contextType);
contextKey.lastPushedText = !1;
contextType = createPendingSegment(
oldReplace = createPendingSegment(
request,
0,
null,
@@ -3041,29 +3047,27 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
!1,
!1
);
contextType.parentFlushed = !0;
task.blockedBoundary = internalInstance;
task.blockedSegment = contextType;
request.resources.boundaryResources = internalInstance.resources;
oldReplace.parentFlushed = !0;
task.blockedBoundary = initialState;
task.blockedSegment = oldReplace;
request.resources.boundaryResources = initialState.resources;
try {
if (
(renderNode(request, task, props),
request.responseState.generateStaticMarkup ||
(contextType.lastPushedText &&
contextType.textEmbedded &&
contextType.chunks.push("\x3c!-- --\x3e")),
(contextType.status = 1),
queueCompletedSegment(internalInstance, contextType),
0 === internalInstance.pendingTasks)
(oldReplace.lastPushedText &&
oldReplace.textEmbedded &&
oldReplace.chunks.push("\x3c!-- --\x3e")),
(oldReplace.status = 1),
queueCompletedSegment(initialState, oldReplace),
0 === initialState.pendingTasks)
)
break a;
} catch (error) {
(contextType.status = 4),
(internalInstance.forceClientRender = !0),
(internalInstance.errorDigest = logRecoverableError(
request,
error
));
(oldReplace.status = 4),
(initialState.forceClientRender = !0),
(JSCompiler_inline_result = logRecoverableError(request, error)),
(initialState.errorDigest = JSCompiler_inline_result);
} finally {
(request.resources.boundaryResources = type
? type.resources
@@ -3076,7 +3080,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
null,
prevThenableState,
type,
initialState,
contextType,
ref,
task.legacyContext,
task.context,
@@ -3115,14 +3119,14 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
contextKey = props.children;
type = type._context;
props = props.value;
prevThenableState = type._currentValue2;
JSCompiler_inline_result = type._currentValue2;
type._currentValue2 = props;
ref = currentActiveSnapshot;
prevThenableState = currentActiveSnapshot;
currentActiveSnapshot = props = {
parent: ref,
depth: null === ref ? 0 : ref.depth + 1,
parent: prevThenableState,
depth: null === prevThenableState ? 0 : prevThenableState.depth + 1,
context: type,
parentValue: prevThenableState,
parentValue: JSCompiler_inline_result,
value: props
};
task.context = props;
@@ -3447,13 +3451,14 @@ function performWork(request$jscomp$1) {
} else {
task.abortSet.delete(task);
segment.status = 4;
var request$jscomp$0 = request,
var errorDigest = void 0,
request$jscomp$0 = request,
boundary = task.blockedBoundary,
error$jscomp$0 = x,
errorDigest = logRecoverableError(
request$jscomp$0,
error$jscomp$0
);
error$jscomp$0 = x;
errorDigest = logRecoverableError(
request$jscomp$0,
error$jscomp$0
);
null === boundary
? fatalError(request$jscomp$0, error$jscomp$0)
: (boundary.pendingTasks--,
@@ -4085,6 +4090,7 @@ function renderToStringImpl(
readyToStream = !0;
},
void 0,
void 0,
void 0
);
children.flushScheduled = null !== children.destination;
@@ -4127,4 +4133,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-ac75653d";
exports.version = "18.3.0-www-classic-36080993";
compiled/facebook-www/ReactDOMServer-prod.modern.js
+126 -94
View File
@@ -2601,7 +2601,8 @@ function createRequest(
onAllReady,
onShellReady,
onShellError,
onFatalError
onFatalError,
onPostpone
) {
ReactDOMCurrentDispatcher.current = ReactDOMServerDispatcher;
var pingedTasks = [],
@@ -2625,6 +2626,7 @@ function createRequest(
completedBoundaries: [],
partialBoundaries: [],
onError: void 0 === onError ? defaultErrorHandler : onError,
onPostpone: void 0 === onPostpone ? noop : onPostpone,
onAllReady: void 0 === onAllReady ? noop : onAllReady,
onShellReady: void 0 === onShellReady ? noop : onShellReady,
onShellError: void 0 === onShellError ? noop : onShellError,
@@ -2742,63 +2744,71 @@ function resolveDefaultProps(Component, baseProps) {
function renderElement(request, task, prevThenableState, type, props, ref) {
if ("function" === typeof type)
if (type.prototype && type.prototype.isReactComponent) {
prevThenableState = emptyContextObject;
ref = type.contextType;
"object" === typeof ref &&
null !== ref &&
(prevThenableState = ref._currentValue2);
prevThenableState = new type(props, prevThenableState);
var initialState =
void 0 !== prevThenableState.state ? prevThenableState.state : null;
prevThenableState.updater = classComponentUpdater;
prevThenableState.props = props;
prevThenableState.state = initialState;
ref = { queue: [], replace: !1 };
prevThenableState._reactInternals = ref;
var JSCompiler_inline_result = emptyContextObject;
prevThenableState = type.contextType;
"object" === typeof prevThenableState &&
null !== prevThenableState &&
(JSCompiler_inline_result = prevThenableState._currentValue2);
JSCompiler_inline_result = new type(props, JSCompiler_inline_result);
ref =
void 0 !== JSCompiler_inline_result.state
? JSCompiler_inline_result.state
: null;
JSCompiler_inline_result.updater = classComponentUpdater;
JSCompiler_inline_result.props = props;
JSCompiler_inline_result.state = ref;
prevThenableState = { queue: [], replace: !1 };
JSCompiler_inline_result._reactInternals = prevThenableState;
var contextType = type.contextType;
prevThenableState.context =
JSCompiler_inline_result.context =
"object" === typeof contextType && null !== contextType
? contextType._currentValue2
: emptyContextObject;
contextType = type.getDerivedStateFromProps;
"function" === typeof contextType &&
((contextType = contextType(props, initialState)),
(initialState =
((contextType = contextType(props, ref)),
(ref =
null === contextType || void 0 === contextType
? initialState
: assign({}, initialState, contextType)),
(prevThenableState.state = initialState));
? ref
: assign({}, ref, contextType)),
(JSCompiler_inline_result.state = ref));
if (
"function" !== typeof type.getDerivedStateFromProps &&
"function" !== typeof prevThenableState.getSnapshotBeforeUpdate &&
("function" === typeof prevThenableState.UNSAFE_componentWillMount ||
"function" === typeof prevThenableState.componentWillMount)
"function" !==
typeof JSCompiler_inline_result.getSnapshotBeforeUpdate &&
("function" ===
typeof JSCompiler_inline_result.UNSAFE_componentWillMount ||
"function" === typeof JSCompiler_inline_result.componentWillMount)
)
if (
((type = prevThenableState.state),
"function" === typeof prevThenableState.componentWillMount &&
prevThenableState.componentWillMount(),
"function" === typeof prevThenableState.UNSAFE_componentWillMount &&
prevThenableState.UNSAFE_componentWillMount(),
type !== prevThenableState.state &&
((type = JSCompiler_inline_result.state),
"function" === typeof JSCompiler_inline_result.componentWillMount &&
JSCompiler_inline_result.componentWillMount(),
"function" ===
typeof JSCompiler_inline_result.UNSAFE_componentWillMount &&
JSCompiler_inline_result.UNSAFE_componentWillMount(),
type !== JSCompiler_inline_result.state &&
classComponentUpdater.enqueueReplaceState(
prevThenableState,
prevThenableState.state,
JSCompiler_inline_result,
JSCompiler_inline_result.state,
null
),
null !== ref.queue && 0 < ref.queue.length)
null !== prevThenableState.queue &&
0 < prevThenableState.queue.length)
)
if (
((type = ref.queue),
(contextType = ref.replace),
(ref.queue = null),
(ref.replace = !1),
((type = prevThenableState.queue),
(contextType = prevThenableState.replace),
(prevThenableState.queue = null),
(prevThenableState.replace = !1),
contextType && 1 === type.length)
)
prevThenableState.state = type[0];
JSCompiler_inline_result.state = type[0];
else {
ref = contextType ? type[0] : prevThenableState.state;
initialState = !0;
prevThenableState = contextType
? type[0]
: JSCompiler_inline_result.state;
ref = !0;
for (
contextType = contextType ? 1 : 0;
contextType < type.length;
@@ -2807,25 +2817,35 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
var partial = type[contextType];
partial =
"function" === typeof partial
? partial.call(prevThenableState, ref, props, void 0)
? partial.call(
JSCompiler_inline_result,
prevThenableState,
props,
void 0
)
: partial;
null != partial &&
(initialState
? ((initialState = !1), (ref = assign({}, ref, partial)))
: assign(ref, partial));
(ref
? ((ref = !1),
(prevThenableState = assign(
{},
prevThenableState,
partial
)))
: assign(prevThenableState, partial));
}
prevThenableState.state = ref;
JSCompiler_inline_result.state = prevThenableState;
}
else ref.queue = null;
props = prevThenableState.render();
else prevThenableState.queue = null;
props = JSCompiler_inline_result.render();
renderNodeDestructiveImpl(request, task, null, props);
} else if (
((currentlyRenderingComponent = {}),
(currentlyRenderingTask = task),
(thenableIndexCounter = localIdCounter = 0),
(thenableState = prevThenableState),
(prevThenableState = type(props, void 0)),
(props = finishHooks(type, props, prevThenableState, void 0)),
(JSCompiler_inline_result = type(props, void 0)),
(props = finishHooks(type, props, JSCompiler_inline_result, void 0)),
0 !== localIdCounter)
) {
type = task.treeContext;
@@ -2837,23 +2857,27 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
}
} else renderNodeDestructiveImpl(request, task, null, props);
else if ("string" === typeof type) {
prevThenableState = task.blockedSegment;
initialState = pushStartInstance(
prevThenableState.chunks,
JSCompiler_inline_result = task.blockedSegment;
ref = pushStartInstance(
JSCompiler_inline_result.chunks,
type,
props,
request.resources,
request.responseState,
prevThenableState.formatContext,
prevThenableState.lastPushedText
JSCompiler_inline_result.formatContext,
JSCompiler_inline_result.lastPushedText
);
prevThenableState.lastPushedText = !1;
ref = prevThenableState.formatContext;
prevThenableState.formatContext = getChildFormatContext(ref, type, props);
renderNode(request, task, initialState);
prevThenableState.formatContext = ref;
JSCompiler_inline_result.lastPushedText = !1;
prevThenableState = JSCompiler_inline_result.formatContext;
JSCompiler_inline_result.formatContext = getChildFormatContext(
prevThenableState,
type,
props
);
renderNode(request, task, ref);
JSCompiler_inline_result.formatContext = prevThenableState;
a: {
task = prevThenableState.chunks;
task = JSCompiler_inline_result.chunks;
switch (type) {
case "title":
case "style":
@@ -2875,17 +2899,17 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
case "wbr":
break a;
case "body":
if (1 >= ref.insertionMode) {
if (1 >= prevThenableState.insertionMode) {
request.responseState.hasBody = !0;
break a;
}
break;
case "html":
if (0 === ref.insertionMode) break a;
if (0 === prevThenableState.insertionMode) break a;
}
task.push("</", type, ">");
}
prevThenableState.lastPushedText = !1;
JSCompiler_inline_result.lastPushedText = !1;
} else {
switch (type) {
case REACT_LEGACY_HIDDEN_TYPE:
@@ -2911,8 +2935,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
prevThenableState = task.blockedSegment;
ref = props.fallback;
props = props.children;
initialState = new Set();
contextType = {
contextType = new Set();
partial = {
id: null,
rootSegmentID: -1,
parentFlushed: !1,
@@ -2920,19 +2944,19 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
forceClientRender: !1,
completedSegments: [],
byteSize: 0,
fallbackAbortableTasks: initialState,
fallbackAbortableTasks: contextType,
errorDigest: null,
resources: new Set()
};
partial = createPendingSegment(
var boundarySegment = createPendingSegment(
request,
prevThenableState.chunks.length,
contextType,
partial,
prevThenableState.formatContext,
!1,
!1
);
prevThenableState.children.push(partial);
prevThenableState.children.push(boundarySegment);
prevThenableState.lastPushedText = !1;
var contentRootSegment = createPendingSegment(
request,
@@ -2943,9 +2967,9 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
!1
);
contentRootSegment.parentFlushed = !0;
task.blockedBoundary = contextType;
task.blockedBoundary = partial;
task.blockedSegment = contentRootSegment;
request.resources.boundaryResources = contextType.resources;
request.resources.boundaryResources = partial.resources;
try {
if (
(renderNode(request, task, props),
@@ -2954,14 +2978,15 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
contentRootSegment.textEmbedded &&
contentRootSegment.chunks.push("\x3c!-- --\x3e")),
(contentRootSegment.status = 1),
queueCompletedSegment(contextType, contentRootSegment),
0 === contextType.pendingTasks)
queueCompletedSegment(partial, contentRootSegment),
0 === partial.pendingTasks)
)
break a;
} catch (error) {
(contentRootSegment.status = 4),
(contextType.forceClientRender = !0),
(contextType.errorDigest = logRecoverableError(request, error));
(partial.forceClientRender = !0),
(JSCompiler_inline_result = logRecoverableError(request, error)),
(partial.errorDigest = JSCompiler_inline_result);
} finally {
(request.resources.boundaryResources = type
? type.resources
@@ -2974,8 +2999,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
null,
ref,
type,
partial,
initialState,
boundarySegment,
contextType,
task.legacyContext,
task.context,
task.treeContext
@@ -2992,8 +3017,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
currentlyRenderingTask = task;
thenableIndexCounter = localIdCounter = 0;
thenableState = prevThenableState;
prevThenableState = type(props, ref);
props = finishHooks(type, props, prevThenableState, ref);
JSCompiler_inline_result = type(props, ref);
props = finishHooks(type, props, JSCompiler_inline_result, ref);
if (0 !== localIdCounter) {
type = task.treeContext;
task.treeContext = pushTreeContext(type, 1, 0);
@@ -3010,21 +3035,26 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
renderElement(request, task, prevThenableState, type, props, ref);
return;
case REACT_PROVIDER_TYPE:
prevThenableState = props.children;
JSCompiler_inline_result = props.children;
type = type._context;
props = props.value;
ref = type._currentValue2;
prevThenableState = type._currentValue2;
type._currentValue2 = props;
initialState = currentActiveSnapshot;
ref = currentActiveSnapshot;
currentActiveSnapshot = props = {
parent: initialState,
depth: null === initialState ? 0 : initialState.depth + 1,
parent: ref,
depth: null === ref ? 0 : ref.depth + 1,
context: type,
parentValue: ref,
parentValue: prevThenableState,
value: props
};
task.context = props;
renderNodeDestructiveImpl(request, task, null, prevThenableState);
renderNodeDestructiveImpl(
request,
task,
null,
JSCompiler_inline_result
);
request = currentActiveSnapshot;
if (null === request) throw Error(formatProdErrorMessage(403));
props = request.parentValue;
@@ -3041,8 +3071,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
renderNodeDestructiveImpl(request, task, null, props);
return;
case REACT_LAZY_TYPE:
ref = type._init;
type = ref(type._payload);
JSCompiler_inline_result = type._init;
type = JSCompiler_inline_result(type._payload);
props = resolveDefaultProps(type, props);
renderElement(request, task, prevThenableState, type, props, void 0);
return;
@@ -3345,13 +3375,14 @@ function performWork(request$jscomp$1) {
} else {
task.abortSet.delete(task);
segment.status = 4;
var request$jscomp$0 = request,
var errorDigest = void 0,
request$jscomp$0 = request,
boundary = task.blockedBoundary,
error$jscomp$0 = x,
errorDigest = logRecoverableError(
request$jscomp$0,
error$jscomp$0
);
error$jscomp$0 = x;
errorDigest = logRecoverableError(
request$jscomp$0,
error$jscomp$0
);
null === boundary
? fatalError(request$jscomp$0, error$jscomp$0)
: (boundary.pendingTasks--,
@@ -3983,6 +4014,7 @@ function renderToStringImpl(
readyToStream = !0;
},
void 0,
void 0,
void 0
);
children.flushScheduled = null !== children.destination;
@@ -4025,4 +4057,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-85743cda";
exports.version = "18.3.0-www-modern-ab005b15";
compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
+15 -3
View File
@@ -9202,7 +9202,8 @@ function createRequest(
onAllReady,
onShellReady,
onShellError,
onFatalError
onFatalError,
onPostpone
) {
prepareHostDispatcher();
var pingedTasks = [];
@@ -9228,6 +9229,7 @@ function createRequest(
completedBoundaries: [],
partialBoundaries: [],
onError: onError === undefined ? defaultErrorHandler : onError,
onPostpone: onPostpone === undefined ? noop : onPostpone,
onAllReady: onAllReady === undefined ? noop : onAllReady,
onShellReady: onShellReady === undefined ? noop : onShellReady,
onShellError: onShellError === undefined ? noop : onShellError,
@@ -9541,7 +9543,13 @@ function renderSuspenseBoundary(request, task, props) {
} catch (error) {
contentRootSegment.status = ERRORED;
newBoundary.forceClientRender = true;
newBoundary.errorDigest = logRecoverableError(request, error);
var errorDigest;
{
errorDigest = logRecoverableError(request, error);
}
newBoundary.errorDigest = errorDigest;
{
captureBoundaryErrorDetailsDev(newBoundary, error);
@@ -10484,7 +10492,11 @@ function renderNode(request, task, node) {
function erroredTask(request, boundary, segment, error) {
// Report the error to a global handler.
var errorDigest = logRecoverableError(request, error);
var errorDigest;
{
errorDigest = logRecoverableError(request, error);
}
if (boundary === null) {
fatalError(request, error);
compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
+119 -89
View File
@@ -2706,63 +2706,71 @@ function resolveDefaultProps(Component, baseProps) {
function renderElement(request, task, prevThenableState, type, props, ref) {
if ("function" === typeof type)
if (type.prototype && type.prototype.isReactComponent) {
prevThenableState = emptyContextObject;
ref = type.contextType;
"object" === typeof ref &&
null !== ref &&
(prevThenableState = ref._currentValue);
prevThenableState = new type(props, prevThenableState);
var initialState =
void 0 !== prevThenableState.state ? prevThenableState.state : null;
prevThenableState.updater = classComponentUpdater;
prevThenableState.props = props;
prevThenableState.state = initialState;
ref = { queue: [], replace: !1 };
prevThenableState._reactInternals = ref;
var JSCompiler_inline_result = emptyContextObject;
prevThenableState = type.contextType;
"object" === typeof prevThenableState &&
null !== prevThenableState &&
(JSCompiler_inline_result = prevThenableState._currentValue);
JSCompiler_inline_result = new type(props, JSCompiler_inline_result);
ref =
void 0 !== JSCompiler_inline_result.state
? JSCompiler_inline_result.state
: null;
JSCompiler_inline_result.updater = classComponentUpdater;
JSCompiler_inline_result.props = props;
JSCompiler_inline_result.state = ref;
prevThenableState = { queue: [], replace: !1 };
JSCompiler_inline_result._reactInternals = prevThenableState;
var contextType = type.contextType;
prevThenableState.context =
JSCompiler_inline_result.context =
"object" === typeof contextType && null !== contextType
? contextType._currentValue
: emptyContextObject;
contextType = type.getDerivedStateFromProps;
"function" === typeof contextType &&
((contextType = contextType(props, initialState)),
(initialState =
((contextType = contextType(props, ref)),
(ref =
null === contextType || void 0 === contextType
? initialState
: assign({}, initialState, contextType)),
(prevThenableState.state = initialState));
? ref
: assign({}, ref, contextType)),
(JSCompiler_inline_result.state = ref));
if (
"function" !== typeof type.getDerivedStateFromProps &&
"function" !== typeof prevThenableState.getSnapshotBeforeUpdate &&
("function" === typeof prevThenableState.UNSAFE_componentWillMount ||
"function" === typeof prevThenableState.componentWillMount)
"function" !==
typeof JSCompiler_inline_result.getSnapshotBeforeUpdate &&
("function" ===
typeof JSCompiler_inline_result.UNSAFE_componentWillMount ||
"function" === typeof JSCompiler_inline_result.componentWillMount)
)
if (
((type = prevThenableState.state),
"function" === typeof prevThenableState.componentWillMount &&
prevThenableState.componentWillMount(),
"function" === typeof prevThenableState.UNSAFE_componentWillMount &&
prevThenableState.UNSAFE_componentWillMount(),
type !== prevThenableState.state &&
((type = JSCompiler_inline_result.state),
"function" === typeof JSCompiler_inline_result.componentWillMount &&
JSCompiler_inline_result.componentWillMount(),
"function" ===
typeof JSCompiler_inline_result.UNSAFE_componentWillMount &&
JSCompiler_inline_result.UNSAFE_componentWillMount(),
type !== JSCompiler_inline_result.state &&
classComponentUpdater.enqueueReplaceState(
prevThenableState,
prevThenableState.state,
JSCompiler_inline_result,
JSCompiler_inline_result.state,
null
),
null !== ref.queue && 0 < ref.queue.length)
null !== prevThenableState.queue &&
0 < prevThenableState.queue.length)
)
if (
((type = ref.queue),
(contextType = ref.replace),
(ref.queue = null),
(ref.replace = !1),
((type = prevThenableState.queue),
(contextType = prevThenableState.replace),
(prevThenableState.queue = null),
(prevThenableState.replace = !1),
contextType && 1 === type.length)
)
prevThenableState.state = type[0];
JSCompiler_inline_result.state = type[0];
else {
ref = contextType ? type[0] : prevThenableState.state;
initialState = !0;
prevThenableState = contextType
? type[0]
: JSCompiler_inline_result.state;
ref = !0;
for (
contextType = contextType ? 1 : 0;
contextType < type.length;
@@ -2771,25 +2779,35 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
var partial = type[contextType];
partial =
"function" === typeof partial
? partial.call(prevThenableState, ref, props, void 0)
? partial.call(
JSCompiler_inline_result,
prevThenableState,
props,
void 0
)
: partial;
null != partial &&
(initialState
? ((initialState = !1), (ref = assign({}, ref, partial)))
: assign(ref, partial));
(ref
? ((ref = !1),
(prevThenableState = assign(
{},
prevThenableState,
partial
)))
: assign(prevThenableState, partial));
}
prevThenableState.state = ref;
JSCompiler_inline_result.state = prevThenableState;
}
else ref.queue = null;
props = prevThenableState.render();
else prevThenableState.queue = null;
props = JSCompiler_inline_result.render();
renderNodeDestructiveImpl(request, task, null, props);
} else if (
((currentlyRenderingComponent = {}),
(currentlyRenderingTask = task),
(thenableIndexCounter = localIdCounter = 0),
(thenableState = prevThenableState),
(prevThenableState = type(props, void 0)),
(props = finishHooks(type, props, prevThenableState, void 0)),
(JSCompiler_inline_result = type(props, void 0)),
(props = finishHooks(type, props, JSCompiler_inline_result, void 0)),
0 !== localIdCounter)
) {
type = task.treeContext;
@@ -2801,23 +2819,27 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
}
} else renderNodeDestructiveImpl(request, task, null, props);
else if ("string" === typeof type) {
prevThenableState = task.blockedSegment;
initialState = pushStartInstance(
prevThenableState.chunks,
JSCompiler_inline_result = task.blockedSegment;
ref = pushStartInstance(
JSCompiler_inline_result.chunks,
type,
props,
request.resources,
request.responseState,
prevThenableState.formatContext,
prevThenableState.lastPushedText
JSCompiler_inline_result.formatContext,
JSCompiler_inline_result.lastPushedText
);
prevThenableState.lastPushedText = !1;
ref = prevThenableState.formatContext;
prevThenableState.formatContext = getChildFormatContext(ref, type, props);
renderNode(request, task, initialState);
prevThenableState.formatContext = ref;
JSCompiler_inline_result.lastPushedText = !1;
prevThenableState = JSCompiler_inline_result.formatContext;
JSCompiler_inline_result.formatContext = getChildFormatContext(
prevThenableState,
type,
props
);
renderNode(request, task, ref);
JSCompiler_inline_result.formatContext = prevThenableState;
a: {
task = prevThenableState.chunks;
task = JSCompiler_inline_result.chunks;
switch (type) {
case "title":
case "style":
@@ -2839,17 +2861,17 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
case "wbr":
break a;
case "body":
if (1 >= ref.insertionMode) {
if (1 >= prevThenableState.insertionMode) {
request.responseState.hasBody = !0;
break a;
}
break;
case "html":
if (0 === ref.insertionMode) break a;
if (0 === prevThenableState.insertionMode) break a;
}
task.push("</", type, ">");
}
prevThenableState.lastPushedText = !1;
JSCompiler_inline_result.lastPushedText = !1;
} else {
switch (type) {
case REACT_LEGACY_HIDDEN_TYPE:
@@ -2875,8 +2897,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
prevThenableState = task.blockedSegment;
ref = props.fallback;
props = props.children;
initialState = new Set();
contextType = {
contextType = new Set();
partial = {
id: null,
rootSegmentID: -1,
parentFlushed: !1,
@@ -2884,19 +2906,19 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
forceClientRender: !1,
completedSegments: [],
byteSize: 0,
fallbackAbortableTasks: initialState,
fallbackAbortableTasks: contextType,
errorDigest: null,
resources: new Set()
};
partial = createPendingSegment(
var boundarySegment = createPendingSegment(
request,
prevThenableState.chunks.length,
contextType,
partial,
prevThenableState.formatContext,
!1,
!1
);
prevThenableState.children.push(partial);
prevThenableState.children.push(boundarySegment);
prevThenableState.lastPushedText = !1;
var contentRootSegment = createPendingSegment(
request,
@@ -2907,9 +2929,9 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
!1
);
contentRootSegment.parentFlushed = !0;
task.blockedBoundary = contextType;
task.blockedBoundary = partial;
task.blockedSegment = contentRootSegment;
request.resources.boundaryResources = contextType.resources;
request.resources.boundaryResources = partial.resources;
try {
if (
(renderNode(request, task, props),
@@ -2917,14 +2939,15 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
contentRootSegment.textEmbedded &&
contentRootSegment.chunks.push("\x3c!-- --\x3e"),
(contentRootSegment.status = 1),
queueCompletedSegment(contextType, contentRootSegment),
0 === contextType.pendingTasks)
queueCompletedSegment(partial, contentRootSegment),
0 === partial.pendingTasks)
)
break a;
} catch (error) {
(contentRootSegment.status = 4),
(contextType.forceClientRender = !0),
(contextType.errorDigest = logRecoverableError(request, error));
(partial.forceClientRender = !0),
(JSCompiler_inline_result = logRecoverableError(request, error)),
(partial.errorDigest = JSCompiler_inline_result);
} finally {
(request.resources.boundaryResources = type
? type.resources
@@ -2937,8 +2960,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
null,
ref,
type,
partial,
initialState,
boundarySegment,
contextType,
task.legacyContext,
task.context,
task.treeContext
@@ -2955,8 +2978,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
currentlyRenderingTask = task;
thenableIndexCounter = localIdCounter = 0;
thenableState = prevThenableState;
prevThenableState = type(props, ref);
props = finishHooks(type, props, prevThenableState, ref);
JSCompiler_inline_result = type(props, ref);
props = finishHooks(type, props, JSCompiler_inline_result, ref);
if (0 !== localIdCounter) {
type = task.treeContext;
task.treeContext = pushTreeContext(type, 1, 0);
@@ -2973,21 +2996,26 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
renderElement(request, task, prevThenableState, type, props, ref);
return;
case REACT_PROVIDER_TYPE:
prevThenableState = props.children;
JSCompiler_inline_result = props.children;
type = type._context;
props = props.value;
ref = type._currentValue;
prevThenableState = type._currentValue;
type._currentValue = props;
initialState = currentActiveSnapshot;
ref = currentActiveSnapshot;
currentActiveSnapshot = props = {
parent: initialState,
depth: null === initialState ? 0 : initialState.depth + 1,
parent: ref,
depth: null === ref ? 0 : ref.depth + 1,
context: type,
parentValue: ref,
parentValue: prevThenableState,
value: props
};
task.context = props;
renderNodeDestructiveImpl(request, task, null, prevThenableState);
renderNodeDestructiveImpl(
request,
task,
null,
JSCompiler_inline_result
);
request = currentActiveSnapshot;
if (null === request)
throw Error(
@@ -3007,8 +3035,8 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
renderNodeDestructiveImpl(request, task, null, props);
return;
case REACT_LAZY_TYPE:
ref = type._init;
type = ref(type._payload);
JSCompiler_inline_result = type._init;
type = JSCompiler_inline_result(type._payload);
props = resolveDefaultProps(type, props);
renderElement(request, task, prevThenableState, type, props, void 0);
return;
@@ -3867,9 +3895,10 @@ exports.renderNextChunk = function (stream) {
} else {
task.abortSet.delete(task);
segment.status = 4;
var boundary = task.blockedBoundary,
error$jscomp$0 = x,
errorDigest = logRecoverableError(request, error$jscomp$0);
var errorDigest = void 0,
boundary = task.blockedBoundary,
error$jscomp$0 = x;
errorDigest = logRecoverableError(request, error$jscomp$0);
null === boundary
? fatalError(request, error$jscomp$0)
: (boundary.pendingTasks--,
@@ -4116,6 +4145,7 @@ exports.renderToStream = function (children, options) {
completedBoundaries: [],
partialBoundaries: [],
onError: void 0 === streamingFormat ? defaultErrorHandler : streamingFormat,
onPostpone: noop,
onAllReady: noop,
onShellReady: noop,
onShellError: noop,
compiled/facebook-www/ReactDOMTesting-dev.classic.js
+203 -199
View File
@@ -17748,216 +17748,214 @@ function throwException(
}
}
if (
value !== null &&
typeof value === "object" &&
typeof value.then === "function"
) {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
if (value !== null && typeof value === "object") {
if (typeof value.then === "function") {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
{
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
{
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
}
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
var suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (current === null) {
renderDidSuspend();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var suspenseBoundary = getSuspenseHandler();
var _isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
var _retryQueue = offscreenQueue.retryQueue;
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
} // Fall through
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource =
wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
} else {
var _retryQueue = offscreenQueue.retryQueue;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
}
}
}
break;
} // Fall through
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
return;
} else {
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
}
}
}
} else {
// This is a regular error, not a Suspense wakeable.
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
} // This is a regular error, not a Suspense wakeable.
var _suspenseBoundary = getSuspenseHandler(); // If the error was thrown during hydration, we may be able to recover by
// discarding the dehydrated content and switching to a client render.
// Instead of surfacing the error, find the nearest Suspense boundary
// and render it again without hydration.
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
if (_suspenseBoundary !== null) {
if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags$1) {
// Set a flag to indicate that we should try rendering the normal
// children again, not the fallback.
_suspenseBoundary.flags |= ForceClientRender;
}
var _suspenseBoundary = getSuspenseHandler(); // If the error was thrown during hydration, we may be able to recover by
// discarding the dehydrated content and switching to a client render.
// Instead of surfacing the error, find the nearest Suspense boundary
// and render it again without hydration.
markSuspenseBoundaryShouldCapture(
_suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Even though the user may not be affected by this error, we should
// still log it so it can be fixed.
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
return;
if (_suspenseBoundary !== null) {
if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags$1) {
// Set a flag to indicate that we should try rendering the normal
// children again, not the fallback.
_suspenseBoundary.flags |= ForceClientRender;
}
markSuspenseBoundaryShouldCapture(
_suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Even though the user may not be affected by this error, we should
// still log it so it can be fixed.
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
return;
}
}
@@ -20585,7 +20583,8 @@ function updateDehydratedSuspenseComponent(
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
// client side render instead.
var digest, message, stack;
var digest;
var message, stack;
{
var _getSuspenseInstanceF =
@@ -20596,21 +20595,26 @@ function updateDehydratedSuspenseComponent(
stack = _getSuspenseInstanceF.stack;
}
var error;
var capturedValue = null; // TODO: Figure out a better signal than encoding a magic digest value.
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
{
var error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
}
error.digest = digest;
capturedValue = createCapturedValue(error, digest, stack);
}
error.digest = digest;
var capturedValue = createCapturedValue(error, digest, stack);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
@@ -34557,7 +34561,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-f1396fc3";
var ReactVersion = "18.3.0-www-classic-a029c8fa";
function createPortal$1(
children,
compiled/facebook-www/ReactDOMTesting-dev.modern.js
+203 -199
View File
@@ -17655,216 +17655,214 @@ function throwException(
}
}
if (
value !== null &&
typeof value === "object" &&
typeof value.then === "function"
) {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
if (value !== null && typeof value === "object") {
if (typeof value.then === "function") {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber, rootRenderLanes);
{
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
{
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
}
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
var suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (current === null) {
renderDidSuspend();
}
}
{
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
var name = getComponentNameFromFiber(sourceFiber) || "Unknown";
logComponentSuspended(name, wakeable);
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
}
} // Mark the nearest Suspense boundary to switch to rendering a fallback.
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var suspenseBoundary = getSuspenseHandler();
var _isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
var _retryQueue = offscreenQueue.retryQueue;
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
} // Fall through
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource =
wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
} else {
var _retryQueue = offscreenQueue.retryQueue;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
}
}
}
break;
} // Fall through
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
return;
} else {
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
}
}
}
} else {
// This is a regular error, not a Suspense wakeable.
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
} // This is a regular error, not a Suspense wakeable.
var _suspenseBoundary = getSuspenseHandler(); // If the error was thrown during hydration, we may be able to recover by
// discarding the dehydrated content and switching to a client render.
// Instead of surfacing the error, find the nearest Suspense boundary
// and render it again without hydration.
if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
markDidThrowWhileHydratingDEV();
if (_suspenseBoundary !== null) {
if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags$1) {
// Set a flag to indicate that we should try rendering the normal
// children again, not the fallback.
_suspenseBoundary.flags |= ForceClientRender;
}
var _suspenseBoundary = getSuspenseHandler(); // If the error was thrown during hydration, we may be able to recover by
// discarding the dehydrated content and switching to a client render.
// Instead of surfacing the error, find the nearest Suspense boundary
// and render it again without hydration.
markSuspenseBoundaryShouldCapture(
_suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Even though the user may not be affected by this error, we should
// still log it so it can be fixed.
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
return;
if (_suspenseBoundary !== null) {
if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags$1) {
// Set a flag to indicate that we should try rendering the normal
// children again, not the fallback.
_suspenseBoundary.flags |= ForceClientRender;
}
markSuspenseBoundaryShouldCapture(
_suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Even though the user may not be affected by this error, we should
// still log it so it can be fixed.
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
return;
}
}
@@ -20470,7 +20468,8 @@ function updateDehydratedSuspenseComponent(
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
// client side render instead.
var digest, message, stack;
var digest;
var message, stack;
{
var _getSuspenseInstanceF =
@@ -20481,21 +20480,26 @@ function updateDehydratedSuspenseComponent(
stack = _getSuspenseInstanceF.stack;
}
var error;
var capturedValue = null; // TODO: Figure out a better signal than encoding a magic digest value.
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
{
var error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
}
error.digest = digest;
capturedValue = createCapturedValue(error, digest, stack);
}
error.digest = digest;
var capturedValue = createCapturedValue(error, digest, stack);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
@@ -34402,7 +34406,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-abaab246";
var ReactVersion = "18.3.0-www-modern-02ec8d47";
function createPortal$1(
children,
compiled/facebook-www/ReactDOMTesting-prod.classic.js
+19 -18
View File
@@ -10800,21 +10800,22 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
renderDidSuspendDelayIfPossible();
break a;
} else value = Error(formatProdErrorMessage(426));
} else if (
isHydrating &&
unitOfWork.mode & 1 &&
((wakeable = suspenseHandlerStackCursor.current), null !== wakeable)
) {
0 === (wakeable.flags & 65536) && (wakeable.flags |= 256);
markSuspenseBoundaryShouldCapture(
wakeable,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
if (isHydrating && unitOfWork.mode & 1) {
var suspenseBoundary$61 = suspenseHandlerStackCursor.current;
if (null !== suspenseBoundary$61) {
0 === (suspenseBoundary$61.flags & 65536) &&
(suspenseBoundary$61.flags |= 256);
markSuspenseBoundaryShouldCapture(
suspenseBoundary$61,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
}
root = value = createCapturedValueAtFiber(value, unitOfWork);
4 !== workInProgressRootExitStatus &&
@@ -16903,7 +16904,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1829 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-72ab259a",
version: "18.3.0-www-classic-5f4d33c7",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2193 = {
@@ -16933,7 +16934,7 @@ var internals$jscomp$inline_2193 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-classic-72ab259a"
reconcilerVersion: "18.3.0-www-classic-5f4d33c7"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2194 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17312,4 +17313,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-classic-72ab259a";
exports.version = "18.3.0-www-classic-5f4d33c7";
compiled/facebook-www/ReactDOMTesting-prod.modern.js
+19 -18
View File
@@ -10687,21 +10687,22 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
renderDidSuspendDelayIfPossible();
break a;
} else value = Error(formatProdErrorMessage(426));
} else if (
isHydrating &&
unitOfWork.mode & 1 &&
((wakeable = suspenseHandlerStackCursor.current), null !== wakeable)
) {
0 === (wakeable.flags & 65536) && (wakeable.flags |= 256);
markSuspenseBoundaryShouldCapture(
wakeable,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
if (isHydrating && unitOfWork.mode & 1) {
var suspenseBoundary$61 = suspenseHandlerStackCursor.current;
if (null !== suspenseBoundary$61) {
0 === (suspenseBoundary$61.flags & 65536) &&
(suspenseBoundary$61.flags |= 256);
markSuspenseBoundaryShouldCapture(
suspenseBoundary$61,
returnFiber,
unitOfWork,
root,
thrownValue
);
queueHydrationError(createCapturedValueAtFiber(value, unitOfWork));
break a;
}
}
root = value = createCapturedValueAtFiber(value, unitOfWork);
4 !== workInProgressRootExitStatus &&
@@ -16488,7 +16489,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1788 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-1d530573",
version: "18.3.0-www-modern-00d6344c",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2157 = {
@@ -16519,7 +16520,7 @@ var internals$jscomp$inline_2157 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-modern-1d530573"
reconcilerVersion: "18.3.0-www-modern-00d6344c"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2158 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16826,4 +16827,4 @@ exports.unstable_createEventHandle = function (type, options) {
return eventHandle;
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-modern-1d530573";
exports.version = "18.3.0-www-modern-00d6344c";
compiled/facebook-www/ReactTestRenderer-dev.classic.js
+171 -166
View File
@@ -11275,173 +11275,172 @@ function throwException(
// The source fiber did not complete.
sourceFiber.flags |= Incomplete;
if (
value !== null &&
typeof value === "object" &&
typeof value.then === "function"
) {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber);
if (value !== null && typeof value === "object") {
if (typeof value.then === "function") {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber);
var suspenseBoundary = getSuspenseHandler();
var suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
var _retryQueue = offscreenQueue.retryQueue;
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
} // Fall through
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource =
wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
} else {
var _retryQueue = offscreenQueue.retryQueue;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
}
}
}
break;
} // Fall through
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
return;
} else {
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
}
}
}
}
} // This is a regular error, not a Suspense wakeable.
value = createCapturedValueAtFiber(value, sourceFiber);
renderDidError(value); // We didn't find a boundary that could handle this type of exception. Start
@@ -13386,7 +13385,8 @@ function updateDehydratedSuspenseComponent(
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
// client side render instead.
var digest, message, stack;
var digest;
var message, stack;
{
var _getSuspenseInstanceF = getSuspenseInstanceFallbackErrorDetails();
@@ -13396,21 +13396,26 @@ function updateDehydratedSuspenseComponent(
stack = _getSuspenseInstanceF.stack;
}
var error;
var capturedValue = null; // TODO: Figure out a better signal than encoding a magic digest value.
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
{
var error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
}
error.digest = digest;
capturedValue = createCapturedValue(error, digest, stack);
}
error.digest = digest;
var capturedValue = createCapturedValue(error, digest, stack);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
@@ -24323,7 +24328,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-f1396fc3";
var ReactVersion = "18.3.0-www-classic-a029c8fa";
// Might add PROFILE later.
compiled/facebook-www/ReactTestRenderer-dev.modern.js
+171 -166
View File
@@ -11275,173 +11275,172 @@ function throwException(
// The source fiber did not complete.
sourceFiber.flags |= Incomplete;
if (
value !== null &&
typeof value === "object" &&
typeof value.then === "function"
) {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber);
if (value !== null && typeof value === "object") {
if (typeof value.then === "function") {
// This is a wakeable. The component suspended.
var wakeable = value;
resetSuspendedComponent(sourceFiber);
var suspenseBoundary = getSuspenseHandler();
var suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
if (suspenseBoundary !== null) {
switch (suspenseBoundary.tag) {
case SuspenseComponent: {
// If this suspense boundary is not already showing a fallback, mark
// the in-progress render as suspended. We try to perform this logic
// as soon as soon as possible during the render phase, so the work
// loop can know things like whether it's OK to switch to other tasks,
// or whether it can wait for data to resolve before continuing.
// TODO: Most of these checks are already performed when entering a
// Suspense boundary. We should track the information on the stack so
// we don't have to recompute it on demand. This would also allow us
// to unify with `use` which needs to perform this logic even sooner,
// before `throwException` is called.
if (sourceFiber.mode & ConcurrentMode) {
if (getShellBoundary() === null) {
// Suspended in the "shell" of the app. This is an undesirable
// loading state. We should avoid committing this tree.
renderDidSuspendDelayIfPossible();
} else {
var _retryQueue = offscreenQueue.retryQueue;
// If we suspended deeper than the shell, we don't need to delay
// the commmit. However, we still call renderDidSuspend if this is
// a new boundary, to tell the work loop that a new fallback has
// appeared during this render.
// TODO: Theoretically we should be able to delete this branch.
// It's currently used for two things: 1) to throttle the
// appearance of successive loading states, and 2) in
// SuspenseList, to determine whether the children include any
// pending fallbacks. For 1, we should apply throttling to all
// retries, not just ones that render an additional fallback. For
// 2, we should check subtreeFlags instead. Then we can delete
// this branch.
var current = suspenseBoundary.alternate;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
if (current === null) {
renderDidSuspend();
}
}
}
suspenseBoundary.flags &= ~ForceClientRender;
markSuspenseBoundaryShouldCapture(
suspenseBoundary,
returnFiber,
sourceFiber,
root,
rootRenderLanes
); // Retry listener
//
// If the fallback does commit, we need to attach a different type of
// listener. This one schedules an update on the Suspense boundary to
// turn the fallback state off.
//
// Stash the wakeable on the boundary fiber so we can access it in the
// commit phase.
//
// When the wakeable resolves, we'll attempt to render the boundary
// again ("retry").
// Check if this is a Suspensey resource. We do not attach retry
// listeners to these, because we don't actually need them for
// rendering. Only for committing. Instead, if a fallback commits
// and the only thing that suspended was a Suspensey resource, we
// retry immediately.
// TODO: Refactor throwException so that we don't have to do this type
// check. The caller already knows what the cause was.
var isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
if (isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var retryQueue = suspenseBoundary.updateQueue;
if (retryQueue === null) {
suspenseBoundary.updateQueue = new Set([wakeable]);
} else {
retryQueue.add(wakeable);
}
}
break;
} // Fall through
}
case OffscreenComponent: {
if (suspenseBoundary.mode & ConcurrentMode) {
suspenseBoundary.flags |= ShouldCapture;
var _isSuspenseyResource =
wakeable === noopSuspenseyCommitThenable;
if (_isSuspenseyResource) {
suspenseBoundary.flags |= ScheduleRetry;
} else {
var offscreenQueue = suspenseBoundary.updateQueue;
if (offscreenQueue === null) {
var newOffscreenQueue = {
transitions: null,
markerInstances: null,
retryQueue: new Set([wakeable])
};
suspenseBoundary.updateQueue = newOffscreenQueue;
} else {
var _retryQueue = offscreenQueue.retryQueue;
if (_retryQueue === null) {
offscreenQueue.retryQueue = new Set([wakeable]);
} else {
_retryQueue.add(wakeable);
}
}
}
break;
} // Fall through
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
default: {
throw new Error(
"Unexpected Suspense handler tag (" +
suspenseBoundary.tag +
"). This " +
"is a bug in React."
);
}
} // We only attach ping listeners in concurrent mode. Legacy Suspense always
// commits fallbacks synchronously, so there are no pings.
if (suspenseBoundary.mode & ConcurrentMode) {
attachPingListener(root, wakeable, rootRenderLanes);
}
return;
} else {
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
// No boundary was found. Unless this is a sync update, this is OK.
// We can suspend and wait for more data to arrive.
if (root.tag === ConcurrentRoot) {
// In a concurrent root, suspending without a Suspense boundary is
// allowed. It will suspend indefinitely without committing.
//
// TODO: Should we have different behavior for discrete updates? What
// about flushSync? Maybe it should put the tree into an inert state,
// and potentially log a warning. Revisit this for a future release.
attachPingListener(root, wakeable, rootRenderLanes);
renderDidSuspendDelayIfPossible();
return;
} else {
// In a legacy root, suspending without a boundary is always an error.
var uncaughtSuspenseError = new Error(
"A component suspended while responding to synchronous input. This " +
"will cause the UI to be replaced with a loading indicator. To " +
"fix, updates that suspend should be wrapped " +
"with startTransition."
);
value = uncaughtSuspenseError;
}
}
}
}
} // This is a regular error, not a Suspense wakeable.
value = createCapturedValueAtFiber(value, sourceFiber);
renderDidError(value); // We didn't find a boundary that could handle this type of exception. Start
@@ -13386,7 +13385,8 @@ function updateDehydratedSuspenseComponent(
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
// client side render instead.
var digest, message, stack;
var digest;
var message, stack;
{
var _getSuspenseInstanceF = getSuspenseInstanceFallbackErrorDetails();
@@ -13396,21 +13396,26 @@ function updateDehydratedSuspenseComponent(
stack = _getSuspenseInstanceF.stack;
}
var error;
var capturedValue = null; // TODO: Figure out a better signal than encoding a magic digest value.
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
{
var error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
"The server could not finish this Suspense boundary, likely " +
"due to an error during server rendering. Switched to " +
"client rendering."
);
}
error.digest = digest;
capturedValue = createCapturedValue(error, digest, stack);
}
error.digest = digest;
var capturedValue = createCapturedValue(error, digest, stack);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
@@ -24323,7 +24328,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-8591a478";
var ReactVersion = "18.3.0-www-modern-5d9b9771";
// Might add PROFILE later.