mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
8c8ee9ee61
This was missed that we track the child index on the task. The equivalent in retryRenderTask already has this. The effect is that a lazy node that suspends gets its child index reset to -1 even though it should resume in the index it left off.
4210 lines
134 KiB
JavaScript
4210 lines
134 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import type {
|
|
Destination,
|
|
Chunk,
|
|
PrecomputedChunk,
|
|
} from './ReactServerStreamConfig';
|
|
import type {
|
|
ReactNodeList,
|
|
ReactContext,
|
|
ReactProviderType,
|
|
OffscreenMode,
|
|
Wakeable,
|
|
Thenable,
|
|
ReactFormState,
|
|
} from 'shared/ReactTypes';
|
|
import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
|
|
import type {
|
|
RenderState,
|
|
ResumableState,
|
|
FormatContext,
|
|
BoundaryResources,
|
|
} from './ReactFizzConfig';
|
|
import type {ContextSnapshot} from './ReactFizzNewContext';
|
|
import type {ComponentStackNode} from './ReactFizzComponentStack';
|
|
import type {TreeContext} from './ReactFizzTreeContext';
|
|
import type {ThenableState} from './ReactFizzThenable';
|
|
|
|
import {
|
|
scheduleWork,
|
|
beginWriting,
|
|
writeChunk,
|
|
writeChunkAndReturn,
|
|
completeWriting,
|
|
flushBuffered,
|
|
close,
|
|
closeWithError,
|
|
} from './ReactServerStreamConfig';
|
|
import {
|
|
writeCompletedRoot,
|
|
writePlaceholder,
|
|
writeStartCompletedSuspenseBoundary,
|
|
writeStartPendingSuspenseBoundary,
|
|
writeStartClientRenderedSuspenseBoundary,
|
|
writeEndCompletedSuspenseBoundary,
|
|
writeEndPendingSuspenseBoundary,
|
|
writeEndClientRenderedSuspenseBoundary,
|
|
writeStartSegment,
|
|
writeEndSegment,
|
|
writeClientRenderBoundaryInstruction,
|
|
writeCompletedBoundaryInstruction,
|
|
writeCompletedSegmentInstruction,
|
|
pushTextInstance,
|
|
pushStartInstance,
|
|
pushEndInstance,
|
|
pushStartCompletedSuspenseBoundary,
|
|
pushEndCompletedSuspenseBoundary,
|
|
pushSegmentFinale,
|
|
getChildFormatContext,
|
|
writeResourcesForBoundary,
|
|
writePreamble,
|
|
writeHoistables,
|
|
writePostamble,
|
|
hoistResources,
|
|
setCurrentlyRenderingBoundaryResourcesTarget,
|
|
createBoundaryResources,
|
|
prepareHostDispatcher,
|
|
supportsRequestStorage,
|
|
requestStorage,
|
|
pushFormStateMarkerIsMatching,
|
|
pushFormStateMarkerIsNotMatching,
|
|
resetResumableState,
|
|
} from './ReactFizzConfig';
|
|
import {
|
|
constructClassInstance,
|
|
mountClassInstance,
|
|
} from './ReactFizzClassComponent';
|
|
import {
|
|
getMaskedContext,
|
|
processChildContext,
|
|
emptyContextObject,
|
|
} from './ReactFizzContext';
|
|
import {
|
|
readContext,
|
|
rootContextSnapshot,
|
|
switchContext,
|
|
getActiveContext,
|
|
pushProvider,
|
|
popProvider,
|
|
} from './ReactFizzNewContext';
|
|
import {
|
|
prepareToUseHooks,
|
|
finishHooks,
|
|
checkDidRenderIdHook,
|
|
resetHooksState,
|
|
HooksDispatcher,
|
|
currentResumableState,
|
|
setCurrentResumableState,
|
|
getThenableStateAfterSuspending,
|
|
unwrapThenable,
|
|
getFormStateCount,
|
|
getFormStateMatchingIndex,
|
|
} from './ReactFizzHooks';
|
|
import {DefaultCacheDispatcher} from './ReactFizzCache';
|
|
import {getStackByComponentStackNode} from './ReactFizzComponentStack';
|
|
import {emptyTreeContext, pushTreeContext} from './ReactFizzTreeContext';
|
|
|
|
import {
|
|
getIteratorFn,
|
|
REACT_ELEMENT_TYPE,
|
|
REACT_PORTAL_TYPE,
|
|
REACT_LAZY_TYPE,
|
|
REACT_SUSPENSE_TYPE,
|
|
REACT_LEGACY_HIDDEN_TYPE,
|
|
REACT_DEBUG_TRACING_MODE_TYPE,
|
|
REACT_STRICT_MODE_TYPE,
|
|
REACT_PROFILER_TYPE,
|
|
REACT_SUSPENSE_LIST_TYPE,
|
|
REACT_FRAGMENT_TYPE,
|
|
REACT_FORWARD_REF_TYPE,
|
|
REACT_MEMO_TYPE,
|
|
REACT_PROVIDER_TYPE,
|
|
REACT_CONTEXT_TYPE,
|
|
REACT_SERVER_CONTEXT_TYPE,
|
|
REACT_SCOPE_TYPE,
|
|
REACT_OFFSCREEN_TYPE,
|
|
REACT_POSTPONE_TYPE,
|
|
} from 'shared/ReactSymbols';
|
|
import ReactSharedInternals from 'shared/ReactSharedInternals';
|
|
import {
|
|
disableLegacyContext,
|
|
disableModulePatternComponents,
|
|
enableScopeAPI,
|
|
enableSuspenseAvoidThisFallbackFizz,
|
|
enableFloat,
|
|
enableCache,
|
|
enablePostpone,
|
|
} from 'shared/ReactFeatureFlags';
|
|
|
|
import assign from 'shared/assign';
|
|
import getComponentNameFromType from 'shared/getComponentNameFromType';
|
|
import isArray from 'shared/isArray';
|
|
import {SuspenseException, getSuspendedThenable} from './ReactFizzThenable';
|
|
import type {Postpone} from 'react/src/ReactPostpone';
|
|
|
|
const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
|
|
const ReactCurrentCache = ReactSharedInternals.ReactCurrentCache;
|
|
const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
|
|
|
|
// Linked list representing the identity of a component given the component/tag name and key.
|
|
// The name might be minified but we assume that it's going to be the same generated name. Typically
|
|
// because it's just the same compiled output in practice.
|
|
export type KeyNode = [
|
|
Root | KeyNode /* parent */,
|
|
string | null /* name */,
|
|
string | number /* key */,
|
|
];
|
|
|
|
type ResumeSlots =
|
|
| null // nothing to resume
|
|
| number // resume with segment ID at the root position
|
|
| {[index: number]: number}; // resume with segmentID at the index
|
|
|
|
type ReplaySuspenseBoundary = [
|
|
string | null /* name */,
|
|
string | number /* key */,
|
|
Array<ReplayNode> /* content keyed children */,
|
|
ResumeSlots /* content resumable slots */,
|
|
null | ReplayNode /* fallback content */,
|
|
number /* rootSegmentID */,
|
|
];
|
|
|
|
type ReplayNode =
|
|
| [
|
|
string | null /* name */,
|
|
string | number /* key */,
|
|
Array<ReplayNode> /* keyed children */,
|
|
ResumeSlots /* resumable slots */,
|
|
]
|
|
| ReplaySuspenseBoundary;
|
|
|
|
type PostponedHoles = {
|
|
workingMap: Map<KeyNode, ReplayNode>,
|
|
rootNodes: Array<ReplayNode>,
|
|
rootSlots: ResumeSlots,
|
|
};
|
|
|
|
type LegacyContext = {
|
|
[key: string]: any,
|
|
};
|
|
|
|
const CLIENT_RENDERED = 4; // if it errors or infinitely suspends
|
|
|
|
type SuspenseBoundary = {
|
|
status: 0 | 1 | 4 | 5,
|
|
rootSegmentID: number,
|
|
errorDigest: ?string, // the error hash if it errors
|
|
errorMessage?: string, // the error string if it errors
|
|
errorComponentStack?: string, // the error component stack if it errors
|
|
parentFlushed: boolean,
|
|
pendingTasks: number, // when it reaches zero we can show this boundary's content
|
|
completedSegments: Array<Segment>, // completed but not yet flushed segments.
|
|
byteSize: number, // used to determine whether to inline children boundaries.
|
|
fallbackAbortableTasks: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
|
|
resources: BoundaryResources,
|
|
trackedContentKeyPath: null | KeyNode, // used to track the path for replay nodes
|
|
trackedFallbackNode: null | ReplayNode, // used to track the fallback for replay nodes
|
|
};
|
|
|
|
type RenderTask = {
|
|
replay: null,
|
|
node: ReactNodeList,
|
|
childIndex: number,
|
|
ping: () => void,
|
|
blockedBoundary: Root | SuspenseBoundary,
|
|
blockedSegment: Segment, // the segment we'll write to
|
|
abortSet: Set<Task>, // the abortable set that this task belongs to
|
|
keyPath: Root | KeyNode, // the path of all parent keys currently rendering
|
|
formatContext: FormatContext, // the format's specific context (e.g. HTML/SVG/MathML)
|
|
legacyContext: LegacyContext, // the current legacy context that this task is executing in
|
|
context: ContextSnapshot, // the current new context that this task is executing in
|
|
treeContext: TreeContext, // the current tree context that this task is executing in
|
|
componentStack: null | ComponentStackNode, // DEV-only component stack
|
|
thenableState: null | ThenableState,
|
|
};
|
|
|
|
type ReplaySet = {
|
|
nodes: Array<ReplayNode>, // the possible paths to follow down the replaying
|
|
slots: ResumeSlots, // slots to resume
|
|
pendingTasks: number, // tracks the number of tasks currently tracking this set of nodes
|
|
// if pending tasks reach zero but there are still nodes left, it means we couldn't find
|
|
// them all in the tree, so we need to abort and client render the boundary.
|
|
};
|
|
|
|
type ReplayTask = {
|
|
replay: ReplaySet,
|
|
node: ReactNodeList,
|
|
childIndex: number,
|
|
ping: () => void,
|
|
blockedBoundary: Root | SuspenseBoundary,
|
|
blockedSegment: null, // we don't write to anything when we replay
|
|
abortSet: Set<Task>, // the abortable set that this task belongs to
|
|
keyPath: Root | KeyNode, // the path of all parent keys currently rendering
|
|
formatContext: FormatContext, // the format's specific context (e.g. HTML/SVG/MathML)
|
|
legacyContext: LegacyContext, // the current legacy context that this task is executing in
|
|
context: ContextSnapshot, // the current new context that this task is executing in
|
|
treeContext: TreeContext, // the current tree context that this task is executing in
|
|
componentStack: null | ComponentStackNode, // DEV-only component stack
|
|
thenableState: null | ThenableState,
|
|
};
|
|
|
|
export type Task = RenderTask | ReplayTask;
|
|
|
|
const PENDING = 0;
|
|
const COMPLETED = 1;
|
|
const FLUSHED = 2;
|
|
const ABORTED = 3;
|
|
const ERRORED = 4;
|
|
const POSTPONED = 5;
|
|
|
|
type Root = null;
|
|
|
|
type Segment = {
|
|
status: 0 | 1 | 2 | 3 | 4 | 5,
|
|
parentFlushed: boolean, // typically a segment will be flushed by its parent, except if its parent was already flushed
|
|
id: number, // starts as 0 and is lazily assigned if the parent flushes early
|
|
+index: number, // the index within the parent's chunks or 0 at the root
|
|
+chunks: Array<Chunk | PrecomputedChunk>,
|
|
+children: Array<Segment>,
|
|
// The context that this segment was created in.
|
|
parentFormatContext: FormatContext,
|
|
// If this segment represents a fallback, this is the content that will replace that fallback.
|
|
+boundary: null | SuspenseBoundary,
|
|
// used to discern when text separator boundaries are needed
|
|
lastPushedText: boolean,
|
|
textEmbedded: boolean,
|
|
};
|
|
|
|
const OPEN = 0;
|
|
const CLOSING = 1;
|
|
const CLOSED = 2;
|
|
|
|
export opaque type Request = {
|
|
destination: null | Destination,
|
|
flushScheduled: boolean,
|
|
+resumableState: ResumableState,
|
|
+renderState: RenderState,
|
|
+rootFormatContext: FormatContext,
|
|
+progressiveChunkSize: number,
|
|
status: 0 | 1 | 2,
|
|
fatalError: mixed,
|
|
nextSegmentId: number,
|
|
allPendingTasks: number, // when it reaches zero, we can close the connection.
|
|
pendingRootTasks: number, // when this reaches zero, we've finished at least the root boundary.
|
|
completedRootSegment: null | Segment, // Completed but not yet flushed root segments.
|
|
abortableTasks: Set<Task>,
|
|
pingedTasks: Array<Task>, // High priority tasks that should be worked on first.
|
|
// Queues to flush in order of priority
|
|
clientRenderedBoundaries: Array<SuspenseBoundary>, // Errored or client rendered but not yet flushed.
|
|
completedBoundaries: Array<SuspenseBoundary>, // Completed but not yet fully flushed boundaries to show.
|
|
partialBoundaries: Array<SuspenseBoundary>, // Partially completed boundaries that can flush its segments early.
|
|
trackedPostpones: null | PostponedHoles, // Gets set to non-null while we want to track postponed holes. I.e. during a prerender.
|
|
// onError is called when an error happens anywhere in the tree. It might recover.
|
|
// The return string is used in production primarily to avoid leaking internals, secondarily to save bytes.
|
|
// Returning null/undefined will cause a defualt error message in production
|
|
onError: (error: mixed) => ?string,
|
|
// onAllReady is called when all pending task is done but it may not have flushed yet.
|
|
// This is a good time to start writing if you want only HTML and no intermediate steps.
|
|
onAllReady: () => void,
|
|
// onShellReady is called when there is at least a root fallback ready to show.
|
|
// Typically you don't need this callback because it's best practice to always have a
|
|
// root fallback ready so there's no need to wait.
|
|
onShellReady: () => void,
|
|
// onShellError is called when the shell didn't complete. That means you probably want to
|
|
// emit a different response to the stream instead.
|
|
onShellError: (error: mixed) => void,
|
|
onFatalError: (error: mixed) => void,
|
|
// onPostpone is called when postpone() is called anywhere in the tree, which will defer
|
|
// rendering - e.g. to the client. This is considered intentional and not an error.
|
|
onPostpone: (reason: string) => void,
|
|
// Form state that was the result of an MPA submission, if it was provided.
|
|
formState: null | ReactFormState<any, any>,
|
|
};
|
|
|
|
// This is a default heuristic for how to split up the HTML content into progressive
|
|
// loading. Our goal is to be able to display additional new content about every 500ms.
|
|
// Faster than that is unnecessary and should be throttled on the client. It also
|
|
// adds unnecessary overhead to do more splits. We don't know if it's a higher or lower
|
|
// end device but higher end suffer less from the overhead than lower end does from
|
|
// not getting small enough pieces. We error on the side of low end.
|
|
// We base this on low end 3G speeds which is about 500kbits per second. We assume
|
|
// that there can be a reasonable drop off from max bandwidth which leaves you with
|
|
// as little as 80%. We can receive half of that each 500ms - at best. In practice,
|
|
// a little bandwidth is lost to processing and contention - e.g. CSS and images that
|
|
// are downloaded along with the main content. So we estimate about half of that to be
|
|
// the lower end throughput. In other words, we expect that you can at least show
|
|
// about 12.5kb of content per 500ms. Not counting starting latency for the first
|
|
// paint.
|
|
// 500 * 1024 / 8 * .8 * 0.5 / 2
|
|
const DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
|
|
|
|
function defaultErrorHandler(error: mixed) {
|
|
console['error'](error); // Don't transform to our wrapper
|
|
return null;
|
|
}
|
|
|
|
function noop(): void {}
|
|
|
|
export function createRequest(
|
|
children: ReactNodeList,
|
|
resumableState: ResumableState,
|
|
renderState: RenderState,
|
|
rootFormatContext: FormatContext,
|
|
progressiveChunkSize: void | number,
|
|
onError: void | ((error: mixed) => ?string),
|
|
onAllReady: void | (() => void),
|
|
onShellReady: void | (() => void),
|
|
onShellError: void | ((error: mixed) => void),
|
|
onFatalError: void | ((error: mixed) => void),
|
|
onPostpone: void | ((reason: string) => void),
|
|
formState: void | null | ReactFormState<any, any>,
|
|
): Request {
|
|
prepareHostDispatcher();
|
|
const pingedTasks: Array<Task> = [];
|
|
const abortSet: Set<Task> = new Set();
|
|
const request: Request = {
|
|
destination: null,
|
|
flushScheduled: false,
|
|
resumableState,
|
|
renderState,
|
|
rootFormatContext,
|
|
progressiveChunkSize:
|
|
progressiveChunkSize === undefined
|
|
? DEFAULT_PROGRESSIVE_CHUNK_SIZE
|
|
: progressiveChunkSize,
|
|
status: OPEN,
|
|
fatalError: null,
|
|
nextSegmentId: 0,
|
|
allPendingTasks: 0,
|
|
pendingRootTasks: 0,
|
|
completedRootSegment: null,
|
|
abortableTasks: abortSet,
|
|
pingedTasks: pingedTasks,
|
|
clientRenderedBoundaries: ([]: Array<SuspenseBoundary>),
|
|
completedBoundaries: ([]: Array<SuspenseBoundary>),
|
|
partialBoundaries: ([]: Array<SuspenseBoundary>),
|
|
trackedPostpones: null,
|
|
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,
|
|
onFatalError: onFatalError === undefined ? noop : onFatalError,
|
|
formState: formState === undefined ? null : formState,
|
|
};
|
|
// This segment represents the root fallback.
|
|
const rootSegment = createPendingSegment(
|
|
request,
|
|
0,
|
|
null,
|
|
rootFormatContext,
|
|
// Root segments are never embedded in Text on either edge
|
|
false,
|
|
false,
|
|
);
|
|
// There is no parent so conceptually, we're unblocked to flush this segment.
|
|
rootSegment.parentFlushed = true;
|
|
const rootTask = createRenderTask(
|
|
request,
|
|
null,
|
|
children,
|
|
-1,
|
|
null,
|
|
rootSegment,
|
|
abortSet,
|
|
null,
|
|
rootFormatContext,
|
|
emptyContextObject,
|
|
rootContextSnapshot,
|
|
emptyTreeContext,
|
|
);
|
|
pingedTasks.push(rootTask);
|
|
return request;
|
|
}
|
|
|
|
export function createPrerenderRequest(
|
|
children: ReactNodeList,
|
|
resumableState: ResumableState,
|
|
renderState: RenderState,
|
|
rootFormatContext: FormatContext,
|
|
progressiveChunkSize: void | number,
|
|
onError: void | ((error: mixed) => ?string),
|
|
onAllReady: void | (() => void),
|
|
onShellReady: void | (() => void),
|
|
onShellError: void | ((error: mixed) => void),
|
|
onFatalError: void | ((error: mixed) => void),
|
|
onPostpone: void | ((reason: string) => void),
|
|
): Request {
|
|
const request = createRequest(
|
|
children,
|
|
resumableState,
|
|
renderState,
|
|
rootFormatContext,
|
|
progressiveChunkSize,
|
|
onError,
|
|
onAllReady,
|
|
onShellReady,
|
|
onShellError,
|
|
onFatalError,
|
|
onPostpone,
|
|
);
|
|
// Start tracking postponed holes during this render.
|
|
request.trackedPostpones = {
|
|
workingMap: new Map(),
|
|
rootNodes: [],
|
|
rootSlots: null,
|
|
};
|
|
return request;
|
|
}
|
|
|
|
export function resumeRequest(
|
|
children: ReactNodeList,
|
|
postponedState: PostponedState,
|
|
renderState: RenderState,
|
|
onError: void | ((error: mixed) => ?string),
|
|
onAllReady: void | (() => void),
|
|
onShellReady: void | (() => void),
|
|
onShellError: void | ((error: mixed) => void),
|
|
onFatalError: void | ((error: mixed) => void),
|
|
onPostpone: void | ((reason: string) => void),
|
|
): Request {
|
|
prepareHostDispatcher();
|
|
const pingedTasks: Array<Task> = [];
|
|
const abortSet: Set<Task> = new Set();
|
|
const request: Request = {
|
|
destination: null,
|
|
flushScheduled: false,
|
|
resumableState: postponedState.resumableState,
|
|
renderState,
|
|
rootFormatContext: postponedState.rootFormatContext,
|
|
progressiveChunkSize: postponedState.progressiveChunkSize,
|
|
status: OPEN,
|
|
fatalError: null,
|
|
nextSegmentId: postponedState.nextSegmentId,
|
|
allPendingTasks: 0,
|
|
pendingRootTasks: 0,
|
|
completedRootSegment: null,
|
|
abortableTasks: abortSet,
|
|
pingedTasks: pingedTasks,
|
|
clientRenderedBoundaries: ([]: Array<SuspenseBoundary>),
|
|
completedBoundaries: ([]: Array<SuspenseBoundary>),
|
|
partialBoundaries: ([]: Array<SuspenseBoundary>),
|
|
trackedPostpones: null,
|
|
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,
|
|
onFatalError: onFatalError === undefined ? noop : onFatalError,
|
|
formState: null,
|
|
};
|
|
if (typeof postponedState.replaySlots === 'number') {
|
|
const resumedId = postponedState.replaySlots;
|
|
// We have a resume slot at the very root. This is effectively just a full rerender.
|
|
const rootSegment = createPendingSegment(
|
|
request,
|
|
0,
|
|
null,
|
|
postponedState.rootFormatContext,
|
|
// Root segments are never embedded in Text on either edge
|
|
false,
|
|
false,
|
|
);
|
|
rootSegment.id = resumedId;
|
|
// There is no parent so conceptually, we're unblocked to flush this segment.
|
|
rootSegment.parentFlushed = true;
|
|
const rootTask = createRenderTask(
|
|
request,
|
|
null,
|
|
children,
|
|
-1,
|
|
null,
|
|
rootSegment,
|
|
abortSet,
|
|
null,
|
|
postponedState.rootFormatContext,
|
|
emptyContextObject,
|
|
rootContextSnapshot,
|
|
emptyTreeContext,
|
|
);
|
|
pingedTasks.push(rootTask);
|
|
return request;
|
|
}
|
|
|
|
const replay: ReplaySet = {
|
|
nodes: postponedState.replayNodes,
|
|
slots: postponedState.replaySlots,
|
|
pendingTasks: 0,
|
|
};
|
|
const rootTask = createReplayTask(
|
|
request,
|
|
null,
|
|
replay,
|
|
children,
|
|
-1,
|
|
null,
|
|
abortSet,
|
|
null,
|
|
postponedState.rootFormatContext,
|
|
emptyContextObject,
|
|
rootContextSnapshot,
|
|
emptyTreeContext,
|
|
);
|
|
pingedTasks.push(rootTask);
|
|
return request;
|
|
}
|
|
|
|
let currentRequest: null | Request = null;
|
|
|
|
export function resolveRequest(): null | Request {
|
|
if (currentRequest) return currentRequest;
|
|
if (supportsRequestStorage) {
|
|
const store = requestStorage.getStore();
|
|
if (store) return store;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function pingTask(request: Request, task: Task): void {
|
|
const pingedTasks = request.pingedTasks;
|
|
pingedTasks.push(task);
|
|
if (request.pingedTasks.length === 1) {
|
|
request.flushScheduled = request.destination !== null;
|
|
scheduleWork(() => performWork(request));
|
|
}
|
|
}
|
|
|
|
function createSuspenseBoundary(
|
|
request: Request,
|
|
fallbackAbortableTasks: Set<Task>,
|
|
): SuspenseBoundary {
|
|
return {
|
|
status: PENDING,
|
|
rootSegmentID: -1,
|
|
parentFlushed: false,
|
|
pendingTasks: 0,
|
|
completedSegments: [],
|
|
byteSize: 0,
|
|
fallbackAbortableTasks,
|
|
errorDigest: null,
|
|
resources: createBoundaryResources(),
|
|
trackedContentKeyPath: null,
|
|
trackedFallbackNode: null,
|
|
};
|
|
}
|
|
|
|
function createRenderTask(
|
|
request: Request,
|
|
thenableState: ThenableState | null,
|
|
node: ReactNodeList,
|
|
childIndex: number,
|
|
blockedBoundary: Root | SuspenseBoundary,
|
|
blockedSegment: Segment,
|
|
abortSet: Set<Task>,
|
|
keyPath: Root | KeyNode,
|
|
formatContext: FormatContext,
|
|
legacyContext: LegacyContext,
|
|
context: ContextSnapshot,
|
|
treeContext: TreeContext,
|
|
): RenderTask {
|
|
request.allPendingTasks++;
|
|
if (blockedBoundary === null) {
|
|
request.pendingRootTasks++;
|
|
} else {
|
|
blockedBoundary.pendingTasks++;
|
|
}
|
|
const task: RenderTask = ({
|
|
replay: null,
|
|
node,
|
|
childIndex,
|
|
ping: () => pingTask(request, task),
|
|
blockedBoundary,
|
|
blockedSegment,
|
|
abortSet,
|
|
keyPath,
|
|
formatContext,
|
|
legacyContext,
|
|
context,
|
|
treeContext,
|
|
thenableState,
|
|
}: any);
|
|
if (__DEV__) {
|
|
task.componentStack = null;
|
|
}
|
|
abortSet.add(task);
|
|
return task;
|
|
}
|
|
|
|
function createReplayTask(
|
|
request: Request,
|
|
thenableState: ThenableState | null,
|
|
replay: ReplaySet,
|
|
node: ReactNodeList,
|
|
childIndex: number,
|
|
blockedBoundary: Root | SuspenseBoundary,
|
|
abortSet: Set<Task>,
|
|
keyPath: Root | KeyNode,
|
|
formatContext: FormatContext,
|
|
legacyContext: LegacyContext,
|
|
context: ContextSnapshot,
|
|
treeContext: TreeContext,
|
|
): ReplayTask {
|
|
request.allPendingTasks++;
|
|
if (blockedBoundary === null) {
|
|
request.pendingRootTasks++;
|
|
} else {
|
|
blockedBoundary.pendingTasks++;
|
|
}
|
|
replay.pendingTasks++;
|
|
const task: ReplayTask = ({
|
|
replay,
|
|
node,
|
|
childIndex,
|
|
ping: () => pingTask(request, task),
|
|
blockedBoundary,
|
|
blockedSegment: null,
|
|
abortSet,
|
|
keyPath,
|
|
formatContext,
|
|
legacyContext,
|
|
context,
|
|
treeContext,
|
|
thenableState,
|
|
}: any);
|
|
if (__DEV__) {
|
|
task.componentStack = null;
|
|
}
|
|
abortSet.add(task);
|
|
return task;
|
|
}
|
|
|
|
function createPendingSegment(
|
|
request: Request,
|
|
index: number,
|
|
boundary: null | SuspenseBoundary,
|
|
parentFormatContext: FormatContext,
|
|
lastPushedText: boolean,
|
|
textEmbedded: boolean,
|
|
): Segment {
|
|
return {
|
|
status: PENDING,
|
|
id: -1, // lazily assigned later
|
|
index,
|
|
parentFlushed: false,
|
|
chunks: [],
|
|
children: [],
|
|
parentFormatContext,
|
|
boundary,
|
|
lastPushedText,
|
|
textEmbedded,
|
|
};
|
|
}
|
|
|
|
// DEV-only global reference to the currently executing task
|
|
let currentTaskInDEV: null | Task = null;
|
|
function getCurrentStackInDEV(): string {
|
|
if (__DEV__) {
|
|
if (currentTaskInDEV === null || currentTaskInDEV.componentStack === null) {
|
|
return '';
|
|
}
|
|
return getStackByComponentStackNode(currentTaskInDEV.componentStack);
|
|
}
|
|
return '';
|
|
}
|
|
|
|
function pushBuiltInComponentStackInDEV(task: Task, type: string): void {
|
|
if (__DEV__) {
|
|
task.componentStack = {
|
|
tag: 0,
|
|
parent: task.componentStack,
|
|
type,
|
|
};
|
|
}
|
|
}
|
|
function pushFunctionComponentStackInDEV(task: Task, type: Function): void {
|
|
if (__DEV__) {
|
|
task.componentStack = {
|
|
tag: 1,
|
|
parent: task.componentStack,
|
|
type,
|
|
};
|
|
}
|
|
}
|
|
function pushClassComponentStackInDEV(task: Task, type: Function): void {
|
|
if (__DEV__) {
|
|
task.componentStack = {
|
|
tag: 2,
|
|
parent: task.componentStack,
|
|
type,
|
|
};
|
|
}
|
|
}
|
|
function popComponentStackInDEV(task: Task): void {
|
|
if (__DEV__) {
|
|
if (task.componentStack === null) {
|
|
console.error(
|
|
'Unexpectedly popped too many stack frames. This is a bug in React.',
|
|
);
|
|
} else {
|
|
task.componentStack = task.componentStack.parent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// stash the component stack of an unwinding error until it is processed
|
|
let lastBoundaryErrorComponentStackDev: ?string = null;
|
|
|
|
function captureBoundaryErrorDetailsDev(
|
|
boundary: SuspenseBoundary,
|
|
error: mixed,
|
|
) {
|
|
if (__DEV__) {
|
|
let errorMessage;
|
|
if (typeof error === 'string') {
|
|
errorMessage = error;
|
|
} else if (error && typeof error.message === 'string') {
|
|
errorMessage = error.message;
|
|
} else {
|
|
// eslint-disable-next-line react-internal/safe-string-coercion
|
|
errorMessage = String(error);
|
|
}
|
|
|
|
const errorComponentStack =
|
|
lastBoundaryErrorComponentStackDev || getCurrentStackInDEV();
|
|
lastBoundaryErrorComponentStackDev = null;
|
|
|
|
boundary.errorMessage = errorMessage;
|
|
boundary.errorComponentStack = errorComponentStack;
|
|
}
|
|
}
|
|
|
|
function logPostpone(request: Request, reason: string): void {
|
|
// If this callback errors, we intentionally let that error bubble up to become a fatal error
|
|
// so that someone fixes the error reporting instead of hiding it.
|
|
request.onPostpone(reason);
|
|
}
|
|
|
|
function logRecoverableError(request: Request, error: any): ?string {
|
|
// If this callback errors, we intentionally let that error bubble up to become a fatal error
|
|
// so that someone fixes the error reporting instead of hiding it.
|
|
const errorDigest = request.onError(error);
|
|
if (errorDigest != null && typeof errorDigest !== 'string') {
|
|
// eslint-disable-next-line react-internal/prod-error-codes
|
|
throw new Error(
|
|
`onError returned something with a type other than "string". onError should return a string and may return null or undefined but must not return anything else. It received something of type "${typeof errorDigest}" instead`,
|
|
);
|
|
}
|
|
return errorDigest;
|
|
}
|
|
|
|
function fatalError(request: Request, error: mixed): void {
|
|
// This is called outside error handling code such as if the root errors outside
|
|
// a suspense boundary or if the root suspense boundary's fallback errors.
|
|
// It's also called if React itself or its host configs errors.
|
|
const onShellError = request.onShellError;
|
|
onShellError(error);
|
|
const onFatalError = request.onFatalError;
|
|
onFatalError(error);
|
|
if (request.destination !== null) {
|
|
request.status = CLOSED;
|
|
closeWithError(request.destination, error);
|
|
} else {
|
|
request.status = CLOSING;
|
|
request.fatalError = error;
|
|
}
|
|
}
|
|
|
|
function renderSuspenseBoundary(
|
|
request: Request,
|
|
someTask: Task,
|
|
keyPath: KeyNode,
|
|
props: Object,
|
|
): void {
|
|
if (someTask.replay !== null) {
|
|
// If we're replaying through this pass, it means we're replaying through
|
|
// an already completed Suspense boundary. It's too late to do anything about it
|
|
// so we can just render through it.
|
|
const prevKeyPath = someTask.keyPath;
|
|
someTask.keyPath = keyPath;
|
|
const content: ReactNodeList = props.children;
|
|
try {
|
|
renderNode(request, someTask, content, -1);
|
|
} finally {
|
|
someTask.keyPath = prevKeyPath;
|
|
}
|
|
return;
|
|
}
|
|
// $FlowFixMe: Refined.
|
|
const task: RenderTask = someTask;
|
|
|
|
pushBuiltInComponentStackInDEV(task, 'Suspense');
|
|
|
|
const prevKeyPath = task.keyPath;
|
|
const parentBoundary = task.blockedBoundary;
|
|
const parentSegment = task.blockedSegment;
|
|
|
|
// Each time we enter a suspense boundary, we split out into a new segment for
|
|
// the fallback so that we can later replace that segment with the content.
|
|
// This also lets us split out the main content even if it doesn't suspend,
|
|
// in case it ends up generating a large subtree of content.
|
|
const fallback: ReactNodeList = props.fallback;
|
|
const content: ReactNodeList = props.children;
|
|
|
|
const fallbackAbortSet: Set<Task> = new Set();
|
|
const newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
|
|
if (request.trackedPostpones !== null) {
|
|
newBoundary.trackedContentKeyPath = keyPath;
|
|
}
|
|
const insertionIndex = parentSegment.chunks.length;
|
|
// The children of the boundary segment is actually the fallback.
|
|
const boundarySegment = createPendingSegment(
|
|
request,
|
|
insertionIndex,
|
|
newBoundary,
|
|
task.formatContext,
|
|
// boundaries never require text embedding at their edges because comment nodes bound them
|
|
false,
|
|
false,
|
|
);
|
|
parentSegment.children.push(boundarySegment);
|
|
// The parentSegment has a child Segment at this index so we reset the lastPushedText marker on the parent
|
|
parentSegment.lastPushedText = false;
|
|
|
|
// This segment is the actual child content. We can start rendering that immediately.
|
|
const contentRootSegment = createPendingSegment(
|
|
request,
|
|
0,
|
|
null,
|
|
task.formatContext,
|
|
// boundaries never require text embedding at their edges because comment nodes bound them
|
|
false,
|
|
false,
|
|
);
|
|
// We mark the root segment as having its parent flushed. It's not really flushed but there is
|
|
// no parent segment so there's nothing to wait on.
|
|
contentRootSegment.parentFlushed = true;
|
|
|
|
// Currently this is running synchronously. We could instead schedule this to pingedTasks.
|
|
// I suspect that there might be some efficiency benefits from not creating the suspended task
|
|
// and instead just using the stack if possible.
|
|
// TODO: Call this directly instead of messing with saving and restoring contexts.
|
|
|
|
// We can reuse the current context and task to render the content immediately without
|
|
// context switching. We just need to temporarily switch which boundary and which segment
|
|
// we're writing to. If something suspends, it'll spawn new suspended task with that context.
|
|
task.blockedBoundary = newBoundary;
|
|
task.blockedSegment = contentRootSegment;
|
|
if (enableFloat) {
|
|
setCurrentlyRenderingBoundaryResourcesTarget(
|
|
request.renderState,
|
|
newBoundary.resources,
|
|
);
|
|
}
|
|
task.keyPath = keyPath;
|
|
try {
|
|
// We use the safe form because we don't handle suspending here. Only error handling.
|
|
renderNode(request, task, content, -1);
|
|
pushSegmentFinale(
|
|
contentRootSegment.chunks,
|
|
request.renderState,
|
|
contentRootSegment.lastPushedText,
|
|
contentRootSegment.textEmbedded,
|
|
);
|
|
contentRootSegment.status = COMPLETED;
|
|
queueCompletedSegment(newBoundary, contentRootSegment);
|
|
if (newBoundary.pendingTasks === 0 && newBoundary.status === PENDING) {
|
|
newBoundary.status = COMPLETED;
|
|
// This must have been the last segment we were waiting on. This boundary is now complete.
|
|
// Therefore we won't need the fallback. We early return so that we don't have to create
|
|
// the fallback.
|
|
popComponentStackInDEV(task);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
contentRootSegment.status = ERRORED;
|
|
newBoundary.status = CLIENT_RENDERED;
|
|
let errorDigest;
|
|
if (
|
|
enablePostpone &&
|
|
typeof error === 'object' &&
|
|
error !== null &&
|
|
error.$$typeof === REACT_POSTPONE_TYPE
|
|
) {
|
|
const postponeInstance: Postpone = (error: any);
|
|
logPostpone(request, postponeInstance.message);
|
|
// TODO: Figure out a better signal than a magic digest value.
|
|
errorDigest = 'POSTPONE';
|
|
} else {
|
|
errorDigest = logRecoverableError(request, error);
|
|
}
|
|
newBoundary.errorDigest = errorDigest;
|
|
if (__DEV__) {
|
|
captureBoundaryErrorDetailsDev(newBoundary, error);
|
|
}
|
|
|
|
// We don't need to decrement any task numbers because we didn't spawn any new task.
|
|
// We don't need to schedule any task because we know the parent has written yet.
|
|
// We do need to fallthrough to create the fallback though.
|
|
} finally {
|
|
if (enableFloat) {
|
|
setCurrentlyRenderingBoundaryResourcesTarget(
|
|
request.renderState,
|
|
parentBoundary ? parentBoundary.resources : null,
|
|
);
|
|
}
|
|
task.blockedBoundary = parentBoundary;
|
|
task.blockedSegment = parentSegment;
|
|
task.keyPath = prevKeyPath;
|
|
}
|
|
|
|
const fallbackKeyPath = [keyPath[0], 'Suspense Fallback', keyPath[2]];
|
|
const trackedPostpones = request.trackedPostpones;
|
|
if (trackedPostpones !== null) {
|
|
// We create a detached replay node to track any postpones inside the fallback.
|
|
const fallbackReplayNode: ReplayNode = [
|
|
fallbackKeyPath[1],
|
|
fallbackKeyPath[2],
|
|
([]: Array<ReplayNode>),
|
|
null,
|
|
];
|
|
trackedPostpones.workingMap.set(fallbackKeyPath, fallbackReplayNode);
|
|
if (newBoundary.status === POSTPONED) {
|
|
// This must exist now.
|
|
const boundaryReplayNode: ReplaySuspenseBoundary =
|
|
(trackedPostpones.workingMap.get(keyPath): any);
|
|
boundaryReplayNode[4] = fallbackReplayNode;
|
|
} else {
|
|
// We might not inject it into the postponed tree, unless the content actually
|
|
// postpones too. We need to keep track of it until that happpens.
|
|
newBoundary.trackedFallbackNode = fallbackReplayNode;
|
|
}
|
|
}
|
|
// We create suspended task for the fallback because we don't want to actually work
|
|
// on it yet in case we finish the main content, so we queue for later.
|
|
const suspendedFallbackTask = createRenderTask(
|
|
request,
|
|
null,
|
|
fallback,
|
|
-1,
|
|
parentBoundary,
|
|
boundarySegment,
|
|
fallbackAbortSet,
|
|
fallbackKeyPath,
|
|
task.formatContext,
|
|
task.legacyContext,
|
|
task.context,
|
|
task.treeContext,
|
|
);
|
|
if (__DEV__) {
|
|
suspendedFallbackTask.componentStack = task.componentStack;
|
|
}
|
|
// TODO: This should be queued at a separate lower priority queue so that we only work
|
|
// on preparing fallbacks if we don't have any more main content to task on.
|
|
request.pingedTasks.push(suspendedFallbackTask);
|
|
|
|
popComponentStackInDEV(task);
|
|
}
|
|
|
|
function replaySuspenseBoundary(
|
|
request: Request,
|
|
task: ReplayTask,
|
|
keyPath: KeyNode,
|
|
props: Object,
|
|
id: number,
|
|
childNodes: Array<ReplayNode>,
|
|
childSlots: ResumeSlots,
|
|
fallbackNodes: Array<ReplayNode>,
|
|
fallbackSlots: ResumeSlots,
|
|
): void {
|
|
pushBuiltInComponentStackInDEV(task, 'Suspense');
|
|
|
|
const prevKeyPath = task.keyPath;
|
|
const previousReplaySet: ReplaySet = task.replay;
|
|
|
|
const parentBoundary = task.blockedBoundary;
|
|
|
|
const content: ReactNodeList = props.children;
|
|
const fallback: ReactNodeList = props.fallback;
|
|
|
|
const fallbackAbortSet: Set<Task> = new Set();
|
|
const resumedBoundary = createSuspenseBoundary(request, fallbackAbortSet);
|
|
resumedBoundary.parentFlushed = true;
|
|
// We restore the same id of this boundary as was used during prerender.
|
|
resumedBoundary.rootSegmentID = id;
|
|
|
|
// We can reuse the current context and task to render the content immediately without
|
|
// context switching. We just need to temporarily switch which boundary and replay node
|
|
// we're writing to. If something suspends, it'll spawn new suspended task with that context.
|
|
task.blockedBoundary = resumedBoundary;
|
|
task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
|
|
if (enableFloat) {
|
|
setCurrentlyRenderingBoundaryResourcesTarget(
|
|
request.renderState,
|
|
resumedBoundary.resources,
|
|
);
|
|
}
|
|
try {
|
|
// We use the safe form because we don't handle suspending here. Only error handling.
|
|
renderNode(request, task, content, -1);
|
|
if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
|
|
throw new Error(
|
|
"Couldn't find all resumable slots by key/index during replaying. " +
|
|
"The tree doesn't match so React will fallback to client rendering.",
|
|
);
|
|
}
|
|
task.replay.pendingTasks--;
|
|
if (
|
|
resumedBoundary.pendingTasks === 0 &&
|
|
resumedBoundary.status === PENDING
|
|
) {
|
|
resumedBoundary.status = COMPLETED;
|
|
request.completedBoundaries.push(resumedBoundary);
|
|
// This must have been the last segment we were waiting on. This boundary is now complete.
|
|
// Therefore we won't need the fallback. We early return so that we don't have to create
|
|
// the fallback.
|
|
popComponentStackInDEV(task);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
resumedBoundary.status = CLIENT_RENDERED;
|
|
let errorDigest;
|
|
if (
|
|
enablePostpone &&
|
|
typeof error === 'object' &&
|
|
error !== null &&
|
|
error.$$typeof === REACT_POSTPONE_TYPE
|
|
) {
|
|
const postponeInstance: Postpone = (error: any);
|
|
logPostpone(request, postponeInstance.message);
|
|
// TODO: Figure out a better signal than a magic digest value.
|
|
errorDigest = 'POSTPONE';
|
|
} else {
|
|
errorDigest = logRecoverableError(request, error);
|
|
}
|
|
resumedBoundary.errorDigest = errorDigest;
|
|
if (__DEV__) {
|
|
captureBoundaryErrorDetailsDev(resumedBoundary, error);
|
|
}
|
|
|
|
task.replay.pendingTasks--;
|
|
|
|
// The parent already flushed in the prerender so we need to schedule this to be emitted.
|
|
request.clientRenderedBoundaries.push(resumedBoundary);
|
|
|
|
// We don't need to decrement any task numbers because we didn't spawn any new task.
|
|
// We don't need to schedule any task because we know the parent has written yet.
|
|
// We do need to fallthrough to create the fallback though.
|
|
} finally {
|
|
if (enableFloat) {
|
|
setCurrentlyRenderingBoundaryResourcesTarget(
|
|
request.renderState,
|
|
parentBoundary ? parentBoundary.resources : null,
|
|
);
|
|
}
|
|
task.blockedBoundary = parentBoundary;
|
|
task.replay = previousReplaySet;
|
|
task.keyPath = prevKeyPath;
|
|
}
|
|
|
|
const fallbackKeyPath = [keyPath[0], 'Suspense Fallback', keyPath[2]];
|
|
|
|
// We create suspended task for the fallback because we don't want to actually work
|
|
// on it yet in case we finish the main content, so we queue for later.
|
|
const fallbackReplay = {
|
|
nodes: fallbackNodes,
|
|
slots: fallbackSlots,
|
|
pendingTasks: 0,
|
|
};
|
|
const suspendedFallbackTask = createReplayTask(
|
|
request,
|
|
null,
|
|
fallbackReplay,
|
|
fallback,
|
|
-1,
|
|
parentBoundary,
|
|
fallbackAbortSet,
|
|
fallbackKeyPath,
|
|
task.formatContext,
|
|
task.legacyContext,
|
|
task.context,
|
|
task.treeContext,
|
|
);
|
|
if (__DEV__) {
|
|
suspendedFallbackTask.componentStack = task.componentStack;
|
|
}
|
|
// TODO: This should be queued at a separate lower priority queue so that we only work
|
|
// on preparing fallbacks if we don't have any more main content to task on.
|
|
request.pingedTasks.push(suspendedFallbackTask);
|
|
|
|
popComponentStackInDEV(task);
|
|
}
|
|
|
|
function renderBackupSuspenseBoundary(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
props: Object,
|
|
) {
|
|
pushBuiltInComponentStackInDEV(task, 'Suspense');
|
|
|
|
const content = props.children;
|
|
const segment = task.blockedSegment;
|
|
const prevKeyPath = task.keyPath;
|
|
task.keyPath = keyPath;
|
|
if (segment === null) {
|
|
// Replay
|
|
renderNode(request, task, content, -1);
|
|
} else {
|
|
// Render
|
|
pushStartCompletedSuspenseBoundary(segment.chunks);
|
|
renderNode(request, task, content, -1);
|
|
pushEndCompletedSuspenseBoundary(segment.chunks);
|
|
}
|
|
task.keyPath = prevKeyPath;
|
|
|
|
popComponentStackInDEV(task);
|
|
}
|
|
|
|
function renderHostElement(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
type: string,
|
|
props: Object,
|
|
): void {
|
|
pushBuiltInComponentStackInDEV(task, type);
|
|
const segment = task.blockedSegment;
|
|
if (segment === null) {
|
|
// Replay
|
|
const children = props.children; // TODO: Make this a Config for replaying.
|
|
const prevContext = task.formatContext;
|
|
const prevKeyPath = task.keyPath;
|
|
task.formatContext = getChildFormatContext(prevContext, type, props);
|
|
task.keyPath = keyPath;
|
|
|
|
// We use the non-destructive form because if something suspends, we still
|
|
// need to pop back up and finish this subtree of HTML.
|
|
renderNode(request, task, children, -1);
|
|
|
|
// We expect that errors will fatal the whole task and that we don't need
|
|
// the correct context. Therefore this is not in a finally.
|
|
task.formatContext = prevContext;
|
|
task.keyPath = prevKeyPath;
|
|
} else {
|
|
// Render
|
|
const children = pushStartInstance(
|
|
segment.chunks,
|
|
type,
|
|
props,
|
|
request.resumableState,
|
|
request.renderState,
|
|
task.formatContext,
|
|
segment.lastPushedText,
|
|
);
|
|
segment.lastPushedText = false;
|
|
const prevContext = task.formatContext;
|
|
const prevKeyPath = task.keyPath;
|
|
task.formatContext = getChildFormatContext(prevContext, type, props);
|
|
task.keyPath = keyPath;
|
|
|
|
// We use the non-destructive form because if something suspends, we still
|
|
// need to pop back up and finish this subtree of HTML.
|
|
renderNode(request, task, children, -1);
|
|
|
|
// We expect that errors will fatal the whole task and that we don't need
|
|
// the correct context. Therefore this is not in a finally.
|
|
task.formatContext = prevContext;
|
|
task.keyPath = prevKeyPath;
|
|
pushEndInstance(
|
|
segment.chunks,
|
|
type,
|
|
props,
|
|
request.resumableState,
|
|
prevContext,
|
|
);
|
|
segment.lastPushedText = false;
|
|
}
|
|
popComponentStackInDEV(task);
|
|
}
|
|
|
|
function shouldConstruct(Component: any) {
|
|
return Component.prototype && Component.prototype.isReactComponent;
|
|
}
|
|
|
|
function renderWithHooks<Props, SecondArg>(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
prevThenableState: ThenableState | null,
|
|
Component: (p: Props, arg: SecondArg) => any,
|
|
props: Props,
|
|
secondArg: SecondArg,
|
|
): any {
|
|
const componentIdentity = {};
|
|
prepareToUseHooks(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
componentIdentity,
|
|
prevThenableState,
|
|
);
|
|
const result = Component(props, secondArg);
|
|
return finishHooks(Component, props, result, secondArg);
|
|
}
|
|
|
|
function finishClassComponent(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
instance: any,
|
|
Component: any,
|
|
props: any,
|
|
): ReactNodeList {
|
|
const nextChildren = instance.render();
|
|
|
|
if (__DEV__) {
|
|
if (instance.props !== props) {
|
|
if (!didWarnAboutReassigningProps) {
|
|
console.error(
|
|
'It looks like %s is reassigning its own `this.props` while rendering. ' +
|
|
'This is not supported and can lead to confusing bugs.',
|
|
getComponentNameFromType(Component) || 'a component',
|
|
);
|
|
}
|
|
didWarnAboutReassigningProps = true;
|
|
}
|
|
}
|
|
|
|
if (!disableLegacyContext) {
|
|
const childContextTypes = Component.childContextTypes;
|
|
if (childContextTypes !== null && childContextTypes !== undefined) {
|
|
const previousContext = task.legacyContext;
|
|
const mergedContext = processChildContext(
|
|
instance,
|
|
Component,
|
|
previousContext,
|
|
childContextTypes,
|
|
);
|
|
task.legacyContext = mergedContext;
|
|
renderNodeDestructive(request, task, null, nextChildren, -1);
|
|
task.legacyContext = previousContext;
|
|
return;
|
|
}
|
|
}
|
|
|
|
const prevKeyPath = task.keyPath;
|
|
task.keyPath = keyPath;
|
|
renderNodeDestructive(request, task, null, nextChildren, -1);
|
|
task.keyPath = prevKeyPath;
|
|
}
|
|
|
|
function renderClassComponent(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
Component: any,
|
|
props: any,
|
|
): void {
|
|
pushClassComponentStackInDEV(task, Component);
|
|
const maskedContext = !disableLegacyContext
|
|
? getMaskedContext(Component, task.legacyContext)
|
|
: undefined;
|
|
const instance = constructClassInstance(Component, props, maskedContext);
|
|
mountClassInstance(instance, Component, props, maskedContext);
|
|
finishClassComponent(request, task, keyPath, instance, Component, props);
|
|
popComponentStackInDEV(task);
|
|
}
|
|
|
|
const didWarnAboutBadClass: {[string]: boolean} = {};
|
|
const didWarnAboutModulePatternComponent: {[string]: boolean} = {};
|
|
const didWarnAboutContextTypeOnFunctionComponent: {[string]: boolean} = {};
|
|
const didWarnAboutGetDerivedStateOnFunctionComponent: {[string]: boolean} = {};
|
|
let didWarnAboutReassigningProps = false;
|
|
const didWarnAboutDefaultPropsOnFunctionComponent: {[string]: boolean} = {};
|
|
let didWarnAboutGenerators = false;
|
|
let didWarnAboutMaps = false;
|
|
let hasWarnedAboutUsingContextAsConsumer = false;
|
|
|
|
// This would typically be a function component but we still support module pattern
|
|
// components for some reason.
|
|
function renderIndeterminateComponent(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
prevThenableState: ThenableState | null,
|
|
Component: any,
|
|
props: any,
|
|
): void {
|
|
let legacyContext;
|
|
if (!disableLegacyContext) {
|
|
legacyContext = getMaskedContext(Component, task.legacyContext);
|
|
}
|
|
pushFunctionComponentStackInDEV(task, Component);
|
|
|
|
if (__DEV__) {
|
|
if (
|
|
Component.prototype &&
|
|
typeof Component.prototype.render === 'function'
|
|
) {
|
|
const componentName = getComponentNameFromType(Component) || 'Unknown';
|
|
|
|
if (!didWarnAboutBadClass[componentName]) {
|
|
console.error(
|
|
"The <%s /> component appears to have a render method, but doesn't extend React.Component. " +
|
|
'This is likely to cause errors. Change %s to extend React.Component instead.',
|
|
componentName,
|
|
componentName,
|
|
);
|
|
didWarnAboutBadClass[componentName] = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
const value = renderWithHooks(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
Component,
|
|
props,
|
|
legacyContext,
|
|
);
|
|
const hasId = checkDidRenderIdHook();
|
|
const formStateCount = getFormStateCount();
|
|
const formStateMatchingIndex = getFormStateMatchingIndex();
|
|
|
|
if (__DEV__) {
|
|
// Support for module components is deprecated and is removed behind a flag.
|
|
// Whether or not it would crash later, we want to show a good message in DEV first.
|
|
if (
|
|
typeof value === 'object' &&
|
|
value !== null &&
|
|
typeof value.render === 'function' &&
|
|
value.$$typeof === undefined
|
|
) {
|
|
const componentName = getComponentNameFromType(Component) || 'Unknown';
|
|
if (!didWarnAboutModulePatternComponent[componentName]) {
|
|
console.error(
|
|
'The <%s /> component appears to be a function component that returns a class instance. ' +
|
|
'Change %s to a class that extends React.Component instead. ' +
|
|
"If you can't use a class try assigning the prototype on the function as a workaround. " +
|
|
"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " +
|
|
'cannot be called with `new` by React.',
|
|
componentName,
|
|
componentName,
|
|
componentName,
|
|
);
|
|
didWarnAboutModulePatternComponent[componentName] = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (
|
|
// Run these checks in production only if the flag is off.
|
|
// Eventually we'll delete this branch altogether.
|
|
!disableModulePatternComponents &&
|
|
typeof value === 'object' &&
|
|
value !== null &&
|
|
typeof value.render === 'function' &&
|
|
value.$$typeof === undefined
|
|
) {
|
|
if (__DEV__) {
|
|
const componentName = getComponentNameFromType(Component) || 'Unknown';
|
|
if (!didWarnAboutModulePatternComponent[componentName]) {
|
|
console.error(
|
|
'The <%s /> component appears to be a function component that returns a class instance. ' +
|
|
'Change %s to a class that extends React.Component instead. ' +
|
|
"If you can't use a class try assigning the prototype on the function as a workaround. " +
|
|
"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " +
|
|
'cannot be called with `new` by React.',
|
|
componentName,
|
|
componentName,
|
|
componentName,
|
|
);
|
|
didWarnAboutModulePatternComponent[componentName] = true;
|
|
}
|
|
}
|
|
|
|
mountClassInstance(value, Component, props, legacyContext);
|
|
finishClassComponent(request, task, keyPath, value, Component, props);
|
|
} else {
|
|
// Proceed under the assumption that this is a function component
|
|
if (__DEV__) {
|
|
if (disableLegacyContext && Component.contextTypes) {
|
|
console.error(
|
|
'%s uses the legacy contextTypes API which is no longer supported. ' +
|
|
'Use React.createContext() with React.useContext() instead.',
|
|
getComponentNameFromType(Component) || 'Unknown',
|
|
);
|
|
}
|
|
}
|
|
if (__DEV__) {
|
|
validateFunctionComponentInDev(Component);
|
|
}
|
|
finishFunctionComponent(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
value,
|
|
hasId,
|
|
formStateCount,
|
|
formStateMatchingIndex,
|
|
);
|
|
}
|
|
popComponentStackInDEV(task);
|
|
}
|
|
|
|
function finishFunctionComponent(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
children: ReactNodeList,
|
|
hasId: boolean,
|
|
formStateCount: number,
|
|
formStateMatchingIndex: number,
|
|
) {
|
|
let didEmitFormStateMarkers = false;
|
|
if (formStateCount !== 0 && request.formState !== null) {
|
|
// For each useFormState hook, emit a marker that indicates whether we
|
|
// rendered using the form state passed at the root. We only emit these
|
|
// markers if form state is passed at the root.
|
|
const segment = task.blockedSegment;
|
|
if (segment === null) {
|
|
// Implies we're in reumable mode.
|
|
} else {
|
|
didEmitFormStateMarkers = true;
|
|
const target = segment.chunks;
|
|
for (let i = 0; i < formStateCount; i++) {
|
|
if (i === formStateMatchingIndex) {
|
|
pushFormStateMarkerIsMatching(target);
|
|
} else {
|
|
pushFormStateMarkerIsNotMatching(target);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const prevKeyPath = task.keyPath;
|
|
task.keyPath = keyPath;
|
|
if (hasId) {
|
|
// This component materialized an id. We treat this as its own level, with
|
|
// a single "child" slot.
|
|
const prevTreeContext = task.treeContext;
|
|
const totalChildren = 1;
|
|
const index = 0;
|
|
// Modify the id context. Because we'll need to reset this if something
|
|
// suspends or errors, we'll use the non-destructive render path.
|
|
task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
|
|
renderNode(request, task, children, -1);
|
|
// Like the other contexts, this does not need to be in a finally block
|
|
// because renderNode takes care of unwinding the stack.
|
|
task.treeContext = prevTreeContext;
|
|
} else if (didEmitFormStateMarkers) {
|
|
// If there were formState hooks, we must use the non-destructive path
|
|
// because this component is not a pure indirection; we emitted markers
|
|
// to the stream.
|
|
renderNode(request, task, children, -1);
|
|
} else {
|
|
// We're now successfully past this task, and we haven't modified the
|
|
// context stack. We don't have to pop back to the previous task every
|
|
// again, so we can use the destructive recursive form.
|
|
renderNodeDestructive(request, task, null, children, -1);
|
|
}
|
|
task.keyPath = prevKeyPath;
|
|
}
|
|
|
|
function validateFunctionComponentInDev(Component: any): void {
|
|
if (__DEV__) {
|
|
if (Component) {
|
|
if (Component.childContextTypes) {
|
|
console.error(
|
|
'%s(...): childContextTypes cannot be defined on a function component.',
|
|
Component.displayName || Component.name || 'Component',
|
|
);
|
|
}
|
|
}
|
|
|
|
if (Component.defaultProps !== undefined) {
|
|
const componentName = getComponentNameFromType(Component) || 'Unknown';
|
|
|
|
if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
|
|
console.error(
|
|
'%s: Support for defaultProps will be removed from function components ' +
|
|
'in a future major release. Use JavaScript default parameters instead.',
|
|
componentName,
|
|
);
|
|
didWarnAboutDefaultPropsOnFunctionComponent[componentName] = true;
|
|
}
|
|
}
|
|
|
|
if (typeof Component.getDerivedStateFromProps === 'function') {
|
|
const componentName = getComponentNameFromType(Component) || 'Unknown';
|
|
|
|
if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
|
|
console.error(
|
|
'%s: Function components do not support getDerivedStateFromProps.',
|
|
componentName,
|
|
);
|
|
didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true;
|
|
}
|
|
}
|
|
|
|
if (
|
|
typeof Component.contextType === 'object' &&
|
|
Component.contextType !== null
|
|
) {
|
|
const componentName = getComponentNameFromType(Component) || 'Unknown';
|
|
|
|
if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
|
|
console.error(
|
|
'%s: Function components do not support contextType.',
|
|
componentName,
|
|
);
|
|
didWarnAboutContextTypeOnFunctionComponent[componentName] = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function resolveDefaultProps(Component: any, baseProps: Object): Object {
|
|
if (Component && Component.defaultProps) {
|
|
// Resolve default props. Taken from ReactElement
|
|
const props = assign({}, baseProps);
|
|
const defaultProps = Component.defaultProps;
|
|
for (const propName in defaultProps) {
|
|
if (props[propName] === undefined) {
|
|
props[propName] = defaultProps[propName];
|
|
}
|
|
}
|
|
return props;
|
|
}
|
|
return baseProps;
|
|
}
|
|
|
|
function renderForwardRef(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
prevThenableState: null | ThenableState,
|
|
type: any,
|
|
props: Object,
|
|
ref: any,
|
|
): void {
|
|
pushFunctionComponentStackInDEV(task, type.render);
|
|
const children = renderWithHooks(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
type.render,
|
|
props,
|
|
ref,
|
|
);
|
|
const hasId = checkDidRenderIdHook();
|
|
const formStateCount = getFormStateCount();
|
|
const formStateMatchingIndex = getFormStateMatchingIndex();
|
|
finishFunctionComponent(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
children,
|
|
hasId,
|
|
formStateCount,
|
|
formStateMatchingIndex,
|
|
);
|
|
popComponentStackInDEV(task);
|
|
}
|
|
|
|
function renderMemo(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
prevThenableState: ThenableState | null,
|
|
type: any,
|
|
props: Object,
|
|
ref: any,
|
|
): void {
|
|
const innerType = type.type;
|
|
const resolvedProps = resolveDefaultProps(innerType, props);
|
|
renderElement(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
innerType,
|
|
resolvedProps,
|
|
ref,
|
|
);
|
|
}
|
|
|
|
function renderContextConsumer(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
context: ReactContext<any>,
|
|
props: Object,
|
|
): void {
|
|
// The logic below for Context differs depending on PROD or DEV mode. In
|
|
// DEV mode, we create a separate object for Context.Consumer that acts
|
|
// like a proxy to Context. This proxy object adds unnecessary code in PROD
|
|
// so we use the old behaviour (Context.Consumer references Context) to
|
|
// reduce size and overhead. The separate object references context via
|
|
// a property called "_context", which also gives us the ability to check
|
|
// in DEV mode if this property exists or not and warn if it does not.
|
|
if (__DEV__) {
|
|
if ((context: any)._context === undefined) {
|
|
// This may be because it's a Context (rather than a Consumer).
|
|
// Or it may be because it's older React where they're the same thing.
|
|
// We only want to warn if we're sure it's a new React.
|
|
if (context !== context.Consumer) {
|
|
if (!hasWarnedAboutUsingContextAsConsumer) {
|
|
hasWarnedAboutUsingContextAsConsumer = true;
|
|
console.error(
|
|
'Rendering <Context> directly is not supported and will be removed in ' +
|
|
'a future major release. Did you mean to render <Context.Consumer> instead?',
|
|
);
|
|
}
|
|
}
|
|
} else {
|
|
context = (context: any)._context;
|
|
}
|
|
}
|
|
const render = props.children;
|
|
|
|
if (__DEV__) {
|
|
if (typeof render !== 'function') {
|
|
console.error(
|
|
'A context consumer was rendered with multiple children, or a child ' +
|
|
"that isn't a function. A context consumer expects a single child " +
|
|
'that is a function. If you did pass a function, make sure there ' +
|
|
'is no trailing or leading whitespace around it.',
|
|
);
|
|
}
|
|
}
|
|
|
|
const newValue = readContext(context);
|
|
const newChildren = render(newValue);
|
|
|
|
const prevKeyPath = task.keyPath;
|
|
task.keyPath = keyPath;
|
|
renderNodeDestructive(request, task, null, newChildren, -1);
|
|
task.keyPath = prevKeyPath;
|
|
}
|
|
|
|
function renderContextProvider(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
type: ReactProviderType<any>,
|
|
props: Object,
|
|
): void {
|
|
const context = type._context;
|
|
const value = props.value;
|
|
const children = props.children;
|
|
let prevSnapshot;
|
|
if (__DEV__) {
|
|
prevSnapshot = task.context;
|
|
}
|
|
const prevKeyPath = task.keyPath;
|
|
task.context = pushProvider(context, value);
|
|
task.keyPath = keyPath;
|
|
renderNodeDestructive(request, task, null, children, -1);
|
|
task.context = popProvider(context);
|
|
task.keyPath = prevKeyPath;
|
|
if (__DEV__) {
|
|
if (prevSnapshot !== task.context) {
|
|
console.error(
|
|
'Popping the context provider did not return back to the original snapshot. This is a bug in React.',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderLazyComponent(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
prevThenableState: ThenableState | null,
|
|
lazyComponent: LazyComponentType<any, any>,
|
|
props: Object,
|
|
ref: any,
|
|
): void {
|
|
pushBuiltInComponentStackInDEV(task, 'Lazy');
|
|
const payload = lazyComponent._payload;
|
|
const init = lazyComponent._init;
|
|
const Component = init(payload);
|
|
const resolvedProps = resolveDefaultProps(Component, props);
|
|
renderElement(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
Component,
|
|
resolvedProps,
|
|
ref,
|
|
);
|
|
popComponentStackInDEV(task);
|
|
}
|
|
|
|
function renderOffscreen(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
props: Object,
|
|
): void {
|
|
const mode: ?OffscreenMode = (props.mode: any);
|
|
if (mode === 'hidden') {
|
|
// A hidden Offscreen boundary is not server rendered. Prerendering happens
|
|
// on the client.
|
|
} else {
|
|
// A visible Offscreen boundary is treated exactly like a fragment: a
|
|
// pure indirection.
|
|
const prevKeyPath = task.keyPath;
|
|
task.keyPath = keyPath;
|
|
renderNodeDestructive(request, task, null, props.children, -1);
|
|
task.keyPath = prevKeyPath;
|
|
}
|
|
}
|
|
|
|
function renderElement(
|
|
request: Request,
|
|
task: Task,
|
|
keyPath: KeyNode,
|
|
prevThenableState: ThenableState | null,
|
|
type: any,
|
|
props: Object,
|
|
ref: any,
|
|
): void {
|
|
if (typeof type === 'function') {
|
|
if (shouldConstruct(type)) {
|
|
renderClassComponent(request, task, keyPath, type, props);
|
|
return;
|
|
} else {
|
|
renderIndeterminateComponent(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
type,
|
|
props,
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
if (typeof type === 'string') {
|
|
renderHostElement(request, task, keyPath, type, props);
|
|
return;
|
|
}
|
|
|
|
switch (type) {
|
|
// LegacyHidden acts the same as a fragment. This only works because we
|
|
// currently assume that every instance of LegacyHidden is accompanied by a
|
|
// host component wrapper. In the hidden mode, the host component is given a
|
|
// `hidden` attribute, which ensures that the initial HTML is not visible.
|
|
// To support the use of LegacyHidden as a true fragment, without an extra
|
|
// DOM node, we would have to hide the initial HTML in some other way.
|
|
// TODO: Delete in LegacyHidden. It's an unstable API only used in the
|
|
// www build. As a migration step, we could add a special prop to Offscreen
|
|
// that simulates the old behavior (no hiding, no change to effects).
|
|
case REACT_LEGACY_HIDDEN_TYPE:
|
|
case REACT_DEBUG_TRACING_MODE_TYPE:
|
|
case REACT_STRICT_MODE_TYPE:
|
|
case REACT_PROFILER_TYPE:
|
|
case REACT_FRAGMENT_TYPE: {
|
|
const prevKeyPath = task.keyPath;
|
|
task.keyPath = keyPath;
|
|
renderNodeDestructive(request, task, null, props.children, -1);
|
|
task.keyPath = prevKeyPath;
|
|
return;
|
|
}
|
|
case REACT_OFFSCREEN_TYPE: {
|
|
renderOffscreen(request, task, keyPath, props);
|
|
return;
|
|
}
|
|
case REACT_SUSPENSE_LIST_TYPE: {
|
|
pushBuiltInComponentStackInDEV(task, 'SuspenseList');
|
|
// TODO: SuspenseList should control the boundaries.
|
|
const prevKeyPath = task.keyPath;
|
|
task.keyPath = keyPath;
|
|
renderNodeDestructive(request, task, null, props.children, -1);
|
|
task.keyPath = prevKeyPath;
|
|
popComponentStackInDEV(task);
|
|
return;
|
|
}
|
|
case REACT_SCOPE_TYPE: {
|
|
if (enableScopeAPI) {
|
|
const prevKeyPath = task.keyPath;
|
|
task.keyPath = keyPath;
|
|
renderNodeDestructive(request, task, null, props.children, -1);
|
|
task.keyPath = prevKeyPath;
|
|
return;
|
|
}
|
|
throw new Error('ReactDOMServer does not yet support scope components.');
|
|
}
|
|
case REACT_SUSPENSE_TYPE: {
|
|
if (
|
|
enableSuspenseAvoidThisFallbackFizz &&
|
|
props.unstable_avoidThisFallback === true
|
|
) {
|
|
renderBackupSuspenseBoundary(request, task, keyPath, props);
|
|
} else {
|
|
renderSuspenseBoundary(request, task, keyPath, props);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (typeof type === 'object' && type !== null) {
|
|
switch (type.$$typeof) {
|
|
case REACT_FORWARD_REF_TYPE: {
|
|
renderForwardRef(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
type,
|
|
props,
|
|
ref,
|
|
);
|
|
return;
|
|
}
|
|
case REACT_MEMO_TYPE: {
|
|
renderMemo(request, task, keyPath, prevThenableState, type, props, ref);
|
|
return;
|
|
}
|
|
case REACT_PROVIDER_TYPE: {
|
|
renderContextProvider(request, task, keyPath, type, props);
|
|
return;
|
|
}
|
|
case REACT_CONTEXT_TYPE: {
|
|
renderContextConsumer(request, task, keyPath, type, props);
|
|
return;
|
|
}
|
|
case REACT_LAZY_TYPE: {
|
|
renderLazyComponent(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
type,
|
|
props,
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
let info = '';
|
|
if (__DEV__) {
|
|
if (
|
|
type === undefined ||
|
|
(typeof type === 'object' &&
|
|
type !== null &&
|
|
Object.keys(type).length === 0)
|
|
) {
|
|
info +=
|
|
' You likely forgot to export your component from the file ' +
|
|
"it's defined in, or you might have mixed up default and " +
|
|
'named imports.';
|
|
}
|
|
}
|
|
|
|
throw new Error(
|
|
'Element type is invalid: expected a string (for built-in ' +
|
|
'components) or a class/function (for composite components) ' +
|
|
`but got: ${type == null ? type : typeof type}.${info}`,
|
|
);
|
|
}
|
|
|
|
function resumeNode(
|
|
request: Request,
|
|
task: ReplayTask,
|
|
segmentId: number,
|
|
node: ReactNodeList,
|
|
childIndex: number,
|
|
): void {
|
|
const prevReplay = task.replay;
|
|
const blockedBoundary = task.blockedBoundary;
|
|
const resumedSegment = createPendingSegment(
|
|
request,
|
|
0,
|
|
null,
|
|
task.formatContext,
|
|
false,
|
|
false,
|
|
);
|
|
resumedSegment.id = segmentId;
|
|
resumedSegment.parentFlushed = true;
|
|
try {
|
|
// Convert the current ReplayTask to a RenderTask.
|
|
const renderTask: RenderTask = (task: any);
|
|
renderTask.replay = null;
|
|
renderTask.blockedSegment = resumedSegment;
|
|
renderNode(request, task, node, childIndex);
|
|
resumedSegment.status = COMPLETED;
|
|
if (blockedBoundary === null) {
|
|
request.completedRootSegment = resumedSegment;
|
|
} else {
|
|
queueCompletedSegment(blockedBoundary, resumedSegment);
|
|
if (blockedBoundary.parentFlushed) {
|
|
request.partialBoundaries.push(blockedBoundary);
|
|
}
|
|
}
|
|
} finally {
|
|
// Restore to a ReplayTask.
|
|
task.replay = prevReplay;
|
|
task.blockedSegment = null;
|
|
}
|
|
}
|
|
|
|
function replayElement(
|
|
request: Request,
|
|
task: ReplayTask,
|
|
keyPath: KeyNode,
|
|
prevThenableState: ThenableState | null,
|
|
name: null | string,
|
|
keyOrIndex: number | string,
|
|
childIndex: number,
|
|
type: any,
|
|
props: Object,
|
|
ref: any,
|
|
replay: ReplaySet,
|
|
): void {
|
|
// We're replaying. Find the path to follow.
|
|
const replayNodes = replay.nodes;
|
|
for (let i = 0; i < replayNodes.length; i++) {
|
|
// Flow doesn't support refinement on tuples so we do it manually here.
|
|
const node = replayNodes[i];
|
|
if (keyOrIndex !== node[1]) {
|
|
continue;
|
|
}
|
|
if (node.length === 4) {
|
|
// Matched a replayable path.
|
|
// Let's double check that the component name matches as a precaution.
|
|
if (name !== null && name !== node[0]) {
|
|
throw new Error(
|
|
'Expected the resume to render <' +
|
|
(node[0]: any) +
|
|
'> in this slot but instead it rendered <' +
|
|
name +
|
|
'>. ' +
|
|
"The tree doesn't match so React will fallback to client rendering.",
|
|
);
|
|
}
|
|
const childNodes = node[2];
|
|
const childSlots = node[3];
|
|
const currentNode = task.node;
|
|
task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
|
|
try {
|
|
renderElement(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
type,
|
|
props,
|
|
ref,
|
|
);
|
|
if (
|
|
task.replay.pendingTasks === 1 &&
|
|
task.replay.nodes.length > 0
|
|
// TODO check remaining slots
|
|
) {
|
|
throw new Error(
|
|
"Couldn't find all resumable slots by key/index during replaying. " +
|
|
"The tree doesn't match so React will fallback to client rendering.",
|
|
);
|
|
}
|
|
task.replay.pendingTasks--;
|
|
} catch (x) {
|
|
if (
|
|
typeof x === 'object' &&
|
|
x !== null &&
|
|
(x === SuspenseException || typeof x.then === 'function')
|
|
) {
|
|
// Suspend
|
|
if (task.node === currentNode) {
|
|
// This same element suspended so we need to pop the replay we just added.
|
|
task.replay = replay;
|
|
}
|
|
throw x;
|
|
}
|
|
task.replay.pendingTasks--;
|
|
// Unlike regular render, we don't terminate the siblings if we error
|
|
// during a replay. That's because this component didn't actually error
|
|
// in the original prerender. What's unable to complete is the child
|
|
// replay nodes which might be Suspense boundaries which are able to
|
|
// absorb the error and we can still continue with siblings.
|
|
erroredReplay(request, task.blockedBoundary, x, childNodes, childSlots);
|
|
}
|
|
task.replay = replay;
|
|
} else {
|
|
// Let's double check that the component type matches.
|
|
if (type !== REACT_SUSPENSE_TYPE) {
|
|
const expectedType = 'Suspense';
|
|
throw new Error(
|
|
'Expected the resume to render <' +
|
|
expectedType +
|
|
'> in this slot but instead it rendered <' +
|
|
(getComponentNameFromType(type) || 'Unknown') +
|
|
'>. ' +
|
|
"The tree doesn't match so React will fallback to client rendering.",
|
|
);
|
|
}
|
|
// Matched a replayable path.
|
|
replaySuspenseBoundary(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
props,
|
|
node[5],
|
|
node[2],
|
|
node[3],
|
|
node[4] === null ? [] : node[4][2],
|
|
node[4] === null ? null : node[4][3],
|
|
);
|
|
}
|
|
// We finished rendering this node, so now we can consume this
|
|
// slot. This must happen after in case we rerender this task.
|
|
replayNodes.splice(i, 1);
|
|
return;
|
|
}
|
|
// We didn't find any matching nodes. We assume that this element was already
|
|
// rendered in the prelude and skip it.
|
|
}
|
|
|
|
// $FlowFixMe[missing-local-annot]
|
|
function validateIterable(iterable, iteratorFn: Function): void {
|
|
if (__DEV__) {
|
|
// We don't support rendering Generators because it's a mutation.
|
|
// See https://github.com/facebook/react/issues/12995
|
|
if (
|
|
typeof Symbol === 'function' &&
|
|
iterable[Symbol.toStringTag] === 'Generator'
|
|
) {
|
|
if (!didWarnAboutGenerators) {
|
|
console.error(
|
|
'Using Generators as children is unsupported and will likely yield ' +
|
|
'unexpected results because enumerating a generator mutates it. ' +
|
|
'You may convert it to an array with `Array.from()` or the ' +
|
|
'`[...spread]` operator before rendering. Keep in mind ' +
|
|
'you might need to polyfill these features for older browsers.',
|
|
);
|
|
}
|
|
didWarnAboutGenerators = true;
|
|
}
|
|
|
|
// Warn about using Maps as children
|
|
if ((iterable: any).entries === iteratorFn) {
|
|
if (!didWarnAboutMaps) {
|
|
console.error(
|
|
'Using Maps as children is not supported. ' +
|
|
'Use an array of keyed ReactElements instead.',
|
|
);
|
|
}
|
|
didWarnAboutMaps = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderNodeDestructive(
|
|
request: Request,
|
|
task: Task,
|
|
// The thenable state reused from the previous attempt, if any. This is almost
|
|
// always null, except when called by retryTask.
|
|
prevThenableState: ThenableState | null,
|
|
node: ReactNodeList,
|
|
childIndex: number,
|
|
): void {
|
|
if (__DEV__) {
|
|
// In Dev we wrap renderNodeDestructiveImpl in a try / catch so we can capture
|
|
// a component stack at the right place in the tree. We don't do this in renderNode
|
|
// becuase it is not called at every layer of the tree and we may lose frames
|
|
try {
|
|
return renderNodeDestructiveImpl(
|
|
request,
|
|
task,
|
|
prevThenableState,
|
|
node,
|
|
childIndex,
|
|
);
|
|
} catch (x) {
|
|
if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
|
|
// This is a Wakable, noop
|
|
} else {
|
|
// This is an error, stash the component stack if it is null.
|
|
lastBoundaryErrorComponentStackDev =
|
|
lastBoundaryErrorComponentStackDev !== null
|
|
? lastBoundaryErrorComponentStackDev
|
|
: getCurrentStackInDEV();
|
|
}
|
|
// rethrow so normal suspense logic can handle thrown value accordingly
|
|
throw x;
|
|
}
|
|
} else {
|
|
return renderNodeDestructiveImpl(
|
|
request,
|
|
task,
|
|
prevThenableState,
|
|
node,
|
|
childIndex,
|
|
);
|
|
}
|
|
}
|
|
|
|
// This function by it self renders a node and consumes the task by mutating it
|
|
// to update the current execution state.
|
|
function renderNodeDestructiveImpl(
|
|
request: Request,
|
|
task: Task,
|
|
prevThenableState: ThenableState | null,
|
|
node: ReactNodeList,
|
|
childIndex: number,
|
|
): void {
|
|
if (task.replay !== null && typeof task.replay.slots === 'number') {
|
|
// TODO: Figure out a cheaper place than this hot path to do this check.
|
|
const resumeSegmentID = task.replay.slots;
|
|
resumeNode(request, task, resumeSegmentID, node, childIndex);
|
|
return;
|
|
}
|
|
// Stash the node we're working on. We'll pick up from this task in case
|
|
// something suspends.
|
|
task.node = node;
|
|
task.childIndex = childIndex;
|
|
|
|
// Handle object types
|
|
if (typeof node === 'object' && node !== null) {
|
|
switch ((node: any).$$typeof) {
|
|
case REACT_ELEMENT_TYPE: {
|
|
const element: any = node;
|
|
const type = element.type;
|
|
const key = element.key;
|
|
const props = element.props;
|
|
const ref = element.ref;
|
|
const name = getComponentNameFromType(type);
|
|
const keyOrIndex =
|
|
key == null ? (childIndex === -1 ? 0 : childIndex) : key;
|
|
const keyPath = [task.keyPath, name, keyOrIndex];
|
|
if (task.replay !== null) {
|
|
replayElement(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
name,
|
|
keyOrIndex,
|
|
childIndex,
|
|
type,
|
|
props,
|
|
ref,
|
|
task.replay,
|
|
);
|
|
// No matches found for this node. We assume it's already emitted in the
|
|
// prelude and skip it during the replay.
|
|
} else {
|
|
// We're doing a plain render.
|
|
renderElement(
|
|
request,
|
|
task,
|
|
keyPath,
|
|
prevThenableState,
|
|
type,
|
|
props,
|
|
ref,
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
case REACT_PORTAL_TYPE:
|
|
throw new Error(
|
|
'Portals are not currently supported by the server renderer. ' +
|
|
'Render them conditionally so that they only appear on the client render.',
|
|
);
|
|
case REACT_LAZY_TYPE: {
|
|
const lazyNode: LazyComponentType<any, any> = (node: any);
|
|
const payload = lazyNode._payload;
|
|
const init = lazyNode._init;
|
|
let resolvedNode;
|
|
if (__DEV__) {
|
|
try {
|
|
resolvedNode = init(payload);
|
|
} catch (x) {
|
|
if (
|
|
typeof x === 'object' &&
|
|
x !== null &&
|
|
typeof x.then === 'function'
|
|
) {
|
|
// this Lazy initializer is suspending. push a temporary frame onto the stack so it can be
|
|
// popped off in spawnNewSuspendedTask. This aligns stack behavior between Lazy in element position
|
|
// vs Component position. We do not want the frame for Errors so we exclusively do this in
|
|
// the wakeable branch
|
|
pushBuiltInComponentStackInDEV(task, 'Lazy');
|
|
}
|
|
throw x;
|
|
}
|
|
} else {
|
|
resolvedNode = init(payload);
|
|
}
|
|
renderNodeDestructive(request, task, null, resolvedNode, childIndex);
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (isArray(node)) {
|
|
renderChildrenArray(request, task, node, childIndex);
|
|
return;
|
|
}
|
|
|
|
const iteratorFn = getIteratorFn(node);
|
|
if (iteratorFn) {
|
|
if (__DEV__) {
|
|
validateIterable(node, iteratorFn);
|
|
}
|
|
const iterator = iteratorFn.call(node);
|
|
if (iterator) {
|
|
// We need to know how many total children are in this set, so that we
|
|
// can allocate enough id slots to acommodate them. So we must exhaust
|
|
// the iterator before we start recursively rendering the children.
|
|
// TODO: This is not great but I think it's inherent to the id
|
|
// generation algorithm.
|
|
let step = iterator.next();
|
|
// If there are not entries, we need to push an empty so we start by checking that.
|
|
if (!step.done) {
|
|
const children = [];
|
|
do {
|
|
children.push(step.value);
|
|
step = iterator.next();
|
|
} while (!step.done);
|
|
renderChildrenArray(request, task, children, childIndex);
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Usables are a valid React node type. When React encounters a Usable in
|
|
// a child position, it unwraps it using the same algorithm as `use`. For
|
|
// example, for promises, React will throw an exception to unwind the
|
|
// stack, then replay the component once the promise resolves.
|
|
//
|
|
// A difference from `use` is that React will keep unwrapping the value
|
|
// until it reaches a non-Usable type.
|
|
//
|
|
// e.g. Usable<Usable<Usable<T>>> should resolve to T
|
|
const maybeUsable: Object = node;
|
|
if (typeof maybeUsable.then === 'function') {
|
|
const thenable: Thenable<ReactNodeList> = (maybeUsable: any);
|
|
return renderNodeDestructiveImpl(
|
|
request,
|
|
task,
|
|
null,
|
|
unwrapThenable(thenable),
|
|
childIndex,
|
|
);
|
|
}
|
|
|
|
if (
|
|
maybeUsable.$$typeof === REACT_CONTEXT_TYPE ||
|
|
maybeUsable.$$typeof === REACT_SERVER_CONTEXT_TYPE
|
|
) {
|
|
const context: ReactContext<ReactNodeList> = (maybeUsable: any);
|
|
return renderNodeDestructiveImpl(
|
|
request,
|
|
task,
|
|
null,
|
|
readContext(context),
|
|
childIndex,
|
|
);
|
|
}
|
|
|
|
// $FlowFixMe[method-unbinding]
|
|
const childString = Object.prototype.toString.call(node);
|
|
|
|
throw new Error(
|
|
`Objects are not valid as a React child (found: ${
|
|
childString === '[object Object]'
|
|
? 'object with keys {' + Object.keys(node).join(', ') + '}'
|
|
: childString
|
|
}). ` +
|
|
'If you meant to render a collection of children, use an array ' +
|
|
'instead.',
|
|
);
|
|
}
|
|
|
|
if (typeof node === 'string') {
|
|
const segment = task.blockedSegment;
|
|
if (segment === null) {
|
|
// We assume a text node doesn't have a representation in the replay set,
|
|
// since it can't postpone. If it does, it'll be left unmatched and error.
|
|
} else {
|
|
segment.lastPushedText = pushTextInstance(
|
|
segment.chunks,
|
|
node,
|
|
request.renderState,
|
|
segment.lastPushedText,
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (typeof node === 'number') {
|
|
const segment = task.blockedSegment;
|
|
if (segment === null) {
|
|
// We assume a text node doesn't have a representation in the replay set,
|
|
// since it can't postpone. If it does, it'll be left unmatched and error.
|
|
} else {
|
|
segment.lastPushedText = pushTextInstance(
|
|
segment.chunks,
|
|
'' + node,
|
|
request.renderState,
|
|
segment.lastPushedText,
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (__DEV__) {
|
|
if (typeof node === 'function') {
|
|
console.error(
|
|
'Functions are not valid as a React child. This may happen if ' +
|
|
'you return a Component instead of <Component /> from render. ' +
|
|
'Or maybe you meant to call this function rather than return it.',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
function replayFragment(
|
|
request: Request,
|
|
task: ReplayTask,
|
|
children: Array<any>,
|
|
childIndex: number,
|
|
): void {
|
|
// If we're supposed follow this array, we'd expect to see a ReplayNode matching
|
|
// this fragment.
|
|
const replay = task.replay;
|
|
const replayNodes = replay.nodes;
|
|
for (let j = 0; j < replayNodes.length; j++) {
|
|
const node = replayNodes[j];
|
|
if (node[1] !== childIndex) {
|
|
continue;
|
|
}
|
|
// Matched a replayable path.
|
|
const childNodes = node[2];
|
|
const childSlots = node[3];
|
|
task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
|
|
try {
|
|
renderChildrenArray(request, task, children, -1);
|
|
if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
|
|
throw new Error(
|
|
"Couldn't find all resumable slots by key/index during replaying. " +
|
|
"The tree doesn't match so React will fallback to client rendering.",
|
|
);
|
|
}
|
|
task.replay.pendingTasks--;
|
|
} catch (x) {
|
|
if (
|
|
typeof x === 'object' &&
|
|
x !== null &&
|
|
(x === SuspenseException || typeof x.then === 'function')
|
|
) {
|
|
// Suspend
|
|
throw x;
|
|
}
|
|
task.replay.pendingTasks--;
|
|
// Unlike regular render, we don't terminate the siblings if we error
|
|
// during a replay. That's because this component didn't actually error
|
|
// in the original prerender. What's unable to complete is the child
|
|
// replay nodes which might be Suspense boundaries which are able to
|
|
// absorb the error and we can still continue with siblings.
|
|
// This is an error, stash the component stack if it is null.
|
|
erroredReplay(request, task.blockedBoundary, x, childNodes, childSlots);
|
|
}
|
|
task.replay = replay;
|
|
// We finished rendering this node, so now we can consume this
|
|
// slot. This must happen after in case we rerender this task.
|
|
replayNodes.splice(j, 1);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function renderChildrenArray(
|
|
request: Request,
|
|
task: Task,
|
|
children: Array<any>,
|
|
childIndex: number,
|
|
): void {
|
|
const prevKeyPath = task.keyPath;
|
|
if (childIndex !== -1) {
|
|
task.keyPath = [task.keyPath, 'Fragment', childIndex];
|
|
if (task.replay !== null) {
|
|
replayFragment(
|
|
request,
|
|
// $FlowFixMe: Refined.
|
|
task,
|
|
children,
|
|
childIndex,
|
|
);
|
|
task.keyPath = prevKeyPath;
|
|
return;
|
|
}
|
|
}
|
|
const prevTreeContext = task.treeContext;
|
|
const totalChildren = children.length;
|
|
|
|
if (task.replay !== null) {
|
|
// Replay
|
|
// First we need to check if we have any resume slots at this level.
|
|
const resumeSlots = task.replay.slots;
|
|
if (resumeSlots !== null && typeof resumeSlots === 'object') {
|
|
for (let i = 0; i < totalChildren; i++) {
|
|
const node = children[i];
|
|
task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
|
|
// We need to use the non-destructive form so that we can safely pop back
|
|
// up and render the sibling if something suspends.
|
|
const resumeSegmentID = resumeSlots[i];
|
|
// TODO: If this errors we should still continue with the next sibling.
|
|
if (typeof resumeSegmentID === 'number') {
|
|
resumeNode(request, task, resumeSegmentID, node, i);
|
|
// We finished rendering this node, so now we can consume this
|
|
// slot. This must happen after in case we rerender this task.
|
|
delete resumeSlots[i];
|
|
} else {
|
|
renderNode(request, task, node, i);
|
|
}
|
|
}
|
|
task.treeContext = prevTreeContext;
|
|
task.keyPath = prevKeyPath;
|
|
return;
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < totalChildren; i++) {
|
|
const node = children[i];
|
|
task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
|
|
// We need to use the non-destructive form so that we can safely pop back
|
|
// up and render the sibling if something suspends.
|
|
renderNode(request, task, node, i);
|
|
}
|
|
|
|
// Because this context is always set right before rendering every child, we
|
|
// only need to reset it to the previous value at the very end.
|
|
task.treeContext = prevTreeContext;
|
|
task.keyPath = prevKeyPath;
|
|
}
|
|
|
|
function trackPostpone(
|
|
request: Request,
|
|
trackedPostpones: PostponedHoles,
|
|
task: Task,
|
|
segment: Segment,
|
|
): void {
|
|
segment.status = POSTPONED;
|
|
|
|
const keyPath = task.keyPath;
|
|
const boundary = task.blockedBoundary;
|
|
|
|
if (boundary === null) {
|
|
segment.id = request.nextSegmentId++;
|
|
trackedPostpones.rootSlots = segment.id;
|
|
if (request.completedRootSegment !== null) {
|
|
// Postpone the root if this was a deeper segment.
|
|
request.completedRootSegment.status = POSTPONED;
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (boundary !== null && boundary.status === PENDING) {
|
|
boundary.status = POSTPONED;
|
|
// We need to eagerly assign it an ID because we'll need to refer to
|
|
// it before flushing and we know that we can't inline it.
|
|
boundary.rootSegmentID = request.nextSegmentId++;
|
|
|
|
const boundaryKeyPath = boundary.trackedContentKeyPath;
|
|
if (boundaryKeyPath === null) {
|
|
throw new Error(
|
|
'It should not be possible to postpone at the root. This is a bug in React.',
|
|
);
|
|
}
|
|
|
|
const fallbackReplayNode = boundary.trackedFallbackNode;
|
|
|
|
const children: Array<ReplayNode> = [];
|
|
if (boundaryKeyPath === keyPath && task.childIndex === -1) {
|
|
// Since we postponed directly in the Suspense boundary we can't have written anything
|
|
// to its segment. Therefore this will end up becoming the root segment.
|
|
segment.id = boundary.rootSegmentID;
|
|
// We postponed directly inside the Suspense boundary so we mark this for resuming.
|
|
const boundaryNode: ReplaySuspenseBoundary = [
|
|
boundaryKeyPath[1],
|
|
boundaryKeyPath[2],
|
|
children,
|
|
boundary.rootSegmentID,
|
|
fallbackReplayNode,
|
|
boundary.rootSegmentID,
|
|
];
|
|
trackedPostpones.workingMap.set(boundaryKeyPath, boundaryNode);
|
|
addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
|
|
return;
|
|
} else {
|
|
let boundaryNode: void | ReplayNode =
|
|
trackedPostpones.workingMap.get(boundaryKeyPath);
|
|
if (boundaryNode === undefined) {
|
|
boundaryNode = [
|
|
boundaryKeyPath[1],
|
|
boundaryKeyPath[2],
|
|
children,
|
|
null,
|
|
fallbackReplayNode,
|
|
boundary.rootSegmentID,
|
|
];
|
|
trackedPostpones.workingMap.set(boundaryKeyPath, boundaryNode);
|
|
addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
|
|
} else {
|
|
// Upgrade to ReplaySuspenseBoundary.
|
|
const suspenseBoundary: ReplaySuspenseBoundary = (boundaryNode: any);
|
|
suspenseBoundary[4] = fallbackReplayNode;
|
|
suspenseBoundary[5] = boundary.rootSegmentID;
|
|
}
|
|
// Fall through to add the child node.
|
|
}
|
|
}
|
|
|
|
// We know that this will leave a hole so we might as well assign an ID now.
|
|
// We might have one already if we had a parent that gave us its ID.
|
|
if (segment.id === -1) {
|
|
if (segment.parentFlushed && boundary !== null) {
|
|
// If this segment's parent was already flushed, it means we really just
|
|
// skipped the parent and this segment is now the root.
|
|
segment.id = boundary.rootSegmentID;
|
|
} else {
|
|
segment.id = request.nextSegmentId++;
|
|
}
|
|
}
|
|
|
|
if (task.childIndex === -1) {
|
|
// Resume starting from directly inside the previous parent element.
|
|
if (keyPath === null) {
|
|
trackedPostpones.rootSlots = segment.id;
|
|
} else {
|
|
const workingMap = trackedPostpones.workingMap;
|
|
let resumableNode = workingMap.get(keyPath);
|
|
if (resumableNode === undefined) {
|
|
resumableNode = [
|
|
keyPath[1],
|
|
keyPath[2],
|
|
([]: Array<ReplayNode>),
|
|
segment.id,
|
|
];
|
|
addToReplayParent(resumableNode, keyPath[0], trackedPostpones);
|
|
} else {
|
|
resumableNode[3] = segment.id;
|
|
}
|
|
}
|
|
} else {
|
|
let slots;
|
|
if (keyPath === null) {
|
|
slots = trackedPostpones.rootSlots;
|
|
if (slots === null) {
|
|
slots = trackedPostpones.rootSlots = ({}: {[index: number]: number});
|
|
} else if (typeof slots === 'number') {
|
|
throw new Error(
|
|
'It should not be possible to postpone both at the root of an element ' +
|
|
'as well as a slot below. This is a bug in React.',
|
|
);
|
|
}
|
|
} else {
|
|
const workingMap = trackedPostpones.workingMap;
|
|
let resumableNode = workingMap.get(keyPath);
|
|
if (resumableNode === undefined) {
|
|
slots = ({}: {[index: number]: number});
|
|
resumableNode = ([
|
|
keyPath[1],
|
|
keyPath[2],
|
|
([]: Array<ReplayNode>),
|
|
slots,
|
|
]: ReplayNode);
|
|
workingMap.set(keyPath, resumableNode);
|
|
addToReplayParent(resumableNode, keyPath[0], trackedPostpones);
|
|
} else {
|
|
slots = resumableNode[3];
|
|
if (slots === null) {
|
|
slots = resumableNode[3] = ({}: {[index: number]: number});
|
|
} else if (typeof slots === 'number') {
|
|
throw new Error(
|
|
'It should not be possible to postpone both at the root of an element ' +
|
|
'as well as a slot below. This is a bug in React.',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
slots[task.childIndex] = segment.id;
|
|
}
|
|
}
|
|
|
|
function injectPostponedHole(
|
|
request: Request,
|
|
task: RenderTask,
|
|
reason: string,
|
|
): Segment {
|
|
logPostpone(request, reason);
|
|
// Something suspended, we'll need to create a new segment and resolve it later.
|
|
const segment = task.blockedSegment;
|
|
const insertionIndex = segment.chunks.length;
|
|
const newSegment = createPendingSegment(
|
|
request,
|
|
insertionIndex,
|
|
null,
|
|
task.formatContext,
|
|
// Adopt the parent segment's leading text embed
|
|
segment.lastPushedText,
|
|
// Assume we are text embedded at the trailing edge
|
|
true,
|
|
);
|
|
segment.children.push(newSegment);
|
|
// Reset lastPushedText for current Segment since the new Segment "consumed" it
|
|
segment.lastPushedText = false;
|
|
return newSegment;
|
|
}
|
|
|
|
function spawnNewSuspendedReplayTask(
|
|
request: Request,
|
|
task: ReplayTask,
|
|
thenableState: ThenableState | null,
|
|
x: Wakeable,
|
|
): void {
|
|
const newTask = createReplayTask(
|
|
request,
|
|
thenableState,
|
|
task.replay,
|
|
task.node,
|
|
task.childIndex,
|
|
task.blockedBoundary,
|
|
task.abortSet,
|
|
task.keyPath,
|
|
task.formatContext,
|
|
task.legacyContext,
|
|
task.context,
|
|
task.treeContext,
|
|
);
|
|
|
|
if (__DEV__) {
|
|
if (task.componentStack !== null) {
|
|
// We pop one task off the stack because the node that suspended will be tried again,
|
|
// which will add it back onto the stack.
|
|
newTask.componentStack = task.componentStack.parent;
|
|
}
|
|
}
|
|
const ping = newTask.ping;
|
|
x.then(ping, ping);
|
|
}
|
|
|
|
function spawnNewSuspendedRenderTask(
|
|
request: Request,
|
|
task: RenderTask,
|
|
thenableState: ThenableState | null,
|
|
x: Wakeable,
|
|
): void {
|
|
// Something suspended, we'll need to create a new segment and resolve it later.
|
|
const segment = task.blockedSegment;
|
|
const insertionIndex = segment.chunks.length;
|
|
const newSegment = createPendingSegment(
|
|
request,
|
|
insertionIndex,
|
|
null,
|
|
task.formatContext,
|
|
// Adopt the parent segment's leading text embed
|
|
segment.lastPushedText,
|
|
// Assume we are text embedded at the trailing edge
|
|
true,
|
|
);
|
|
segment.children.push(newSegment);
|
|
// Reset lastPushedText for current Segment since the new Segment "consumed" it
|
|
segment.lastPushedText = false;
|
|
const newTask = createRenderTask(
|
|
request,
|
|
thenableState,
|
|
task.node,
|
|
task.childIndex,
|
|
task.blockedBoundary,
|
|
newSegment,
|
|
task.abortSet,
|
|
task.keyPath,
|
|
task.formatContext,
|
|
task.legacyContext,
|
|
task.context,
|
|
task.treeContext,
|
|
);
|
|
|
|
if (__DEV__) {
|
|
if (task.componentStack !== null) {
|
|
// We pop one task off the stack because the node that suspended will be tried again,
|
|
// which will add it back onto the stack.
|
|
newTask.componentStack = task.componentStack.parent;
|
|
}
|
|
}
|
|
const ping = newTask.ping;
|
|
x.then(ping, ping);
|
|
}
|
|
|
|
// This is a non-destructive form of rendering a node. If it suspends it spawns
|
|
// a new task and restores the context of this task to what it was before.
|
|
function renderNode(
|
|
request: Request,
|
|
task: Task,
|
|
node: ReactNodeList,
|
|
childIndex: number,
|
|
): void {
|
|
// Snapshot the current context in case something throws to interrupt the
|
|
// process.
|
|
const previousFormatContext = task.formatContext;
|
|
const previousLegacyContext = task.legacyContext;
|
|
const previousContext = task.context;
|
|
const previousKeyPath = task.keyPath;
|
|
const previousTreeContext = task.treeContext;
|
|
let previousComponentStack = null;
|
|
if (__DEV__) {
|
|
previousComponentStack = task.componentStack;
|
|
}
|
|
let x;
|
|
// Store how much we've pushed at this point so we can reset it in case something
|
|
// suspended partially through writing something.
|
|
const segment = task.blockedSegment;
|
|
if (segment === null) {
|
|
// Replay
|
|
try {
|
|
return renderNodeDestructive(request, task, null, node, childIndex);
|
|
} catch (thrownValue) {
|
|
resetHooksState();
|
|
|
|
x =
|
|
thrownValue === SuspenseException
|
|
? // This is a special type of exception used for Suspense. For historical
|
|
// reasons, the rest of the Suspense implementation expects the thrown
|
|
// value to be a thenable, because before `use` existed that was the
|
|
// (unstable) API for suspending. This implementation detail can change
|
|
// later, once we deprecate the old API in favor of `use`.
|
|
getSuspendedThenable()
|
|
: thrownValue;
|
|
|
|
if (typeof x === 'object' && x !== null) {
|
|
// $FlowFixMe[method-unbinding]
|
|
if (typeof x.then === 'function') {
|
|
const wakeable: Wakeable = (x: any);
|
|
const thenableState = getThenableStateAfterSuspending();
|
|
spawnNewSuspendedReplayTask(
|
|
request,
|
|
// $FlowFixMe: Refined.
|
|
task,
|
|
thenableState,
|
|
wakeable,
|
|
);
|
|
|
|
// Restore the context. We assume that this will be restored by the inner
|
|
// functions in case nothing throws so we don't use "finally" here.
|
|
task.formatContext = previousFormatContext;
|
|
task.legacyContext = previousLegacyContext;
|
|
task.context = previousContext;
|
|
task.keyPath = previousKeyPath;
|
|
task.treeContext = previousTreeContext;
|
|
// Restore all active ReactContexts to what they were before.
|
|
switchContext(previousContext);
|
|
if (__DEV__) {
|
|
task.componentStack = previousComponentStack;
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
// TODO: Abort any undiscovered Suspense boundaries in the ReplayNode.
|
|
}
|
|
} else {
|
|
// Render
|
|
const childrenLength = segment.children.length;
|
|
const chunkLength = segment.chunks.length;
|
|
try {
|
|
return renderNodeDestructive(request, task, null, node, childIndex);
|
|
} catch (thrownValue) {
|
|
resetHooksState();
|
|
|
|
// Reset the write pointers to where we started.
|
|
segment.children.length = childrenLength;
|
|
segment.chunks.length = chunkLength;
|
|
|
|
x =
|
|
thrownValue === SuspenseException
|
|
? // This is a special type of exception used for Suspense. For historical
|
|
// reasons, the rest of the Suspense implementation expects the thrown
|
|
// value to be a thenable, because before `use` existed that was the
|
|
// (unstable) API for suspending. This implementation detail can change
|
|
// later, once we deprecate the old API in favor of `use`.
|
|
getSuspendedThenable()
|
|
: thrownValue;
|
|
|
|
if (typeof x === 'object' && x !== null) {
|
|
// $FlowFixMe[method-unbinding]
|
|
if (typeof x.then === 'function') {
|
|
const wakeable: Wakeable = (x: any);
|
|
const thenableState = getThenableStateAfterSuspending();
|
|
spawnNewSuspendedRenderTask(
|
|
request,
|
|
// $FlowFixMe: Refined.
|
|
task,
|
|
thenableState,
|
|
wakeable,
|
|
);
|
|
|
|
// Restore the context. We assume that this will be restored by the inner
|
|
// functions in case nothing throws so we don't use "finally" here.
|
|
task.formatContext = previousFormatContext;
|
|
task.legacyContext = previousLegacyContext;
|
|
task.context = previousContext;
|
|
task.keyPath = previousKeyPath;
|
|
task.treeContext = previousTreeContext;
|
|
// Restore all active ReactContexts to what they were before.
|
|
switchContext(previousContext);
|
|
if (__DEV__) {
|
|
task.componentStack = previousComponentStack;
|
|
}
|
|
return;
|
|
}
|
|
if (
|
|
enablePostpone &&
|
|
request.trackedPostpones !== null &&
|
|
x.$$typeof === REACT_POSTPONE_TYPE &&
|
|
task.blockedBoundary !== null // bubble if we're postponing in the shell
|
|
) {
|
|
// If we're tracking postpones, we inject a hole here and continue rendering
|
|
// sibling. Similar to suspending. If we're not tracking, we treat it more like
|
|
// an error. Notably this doesn't spawn a new task since nothing will fill it
|
|
// in during this prerender.
|
|
const postponeInstance: Postpone = (x: any);
|
|
const trackedPostpones = request.trackedPostpones;
|
|
const postponedSegment = injectPostponedHole(
|
|
request,
|
|
((task: any): RenderTask), // We don't use ReplayTasks in prerenders.
|
|
postponeInstance.message,
|
|
);
|
|
trackPostpone(request, trackedPostpones, task, postponedSegment);
|
|
|
|
// Restore the context. We assume that this will be restored by the inner
|
|
// functions in case nothing throws so we don't use "finally" here.
|
|
task.formatContext = previousFormatContext;
|
|
task.legacyContext = previousLegacyContext;
|
|
task.context = previousContext;
|
|
task.keyPath = previousKeyPath;
|
|
task.treeContext = previousTreeContext;
|
|
// Restore all active ReactContexts to what they were before.
|
|
switchContext(previousContext);
|
|
if (__DEV__) {
|
|
task.componentStack = previousComponentStack;
|
|
}
|
|
lastBoundaryErrorComponentStackDev = null;
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Restore the context. We assume that this will be restored by the inner
|
|
// functions in case nothing throws so we don't use "finally" here.
|
|
task.formatContext = previousFormatContext;
|
|
task.legacyContext = previousLegacyContext;
|
|
task.context = previousContext;
|
|
task.keyPath = previousKeyPath;
|
|
task.treeContext = previousTreeContext;
|
|
// Restore all active ReactContexts to what they were before.
|
|
switchContext(previousContext);
|
|
if (__DEV__) {
|
|
task.componentStack = previousComponentStack;
|
|
}
|
|
// We assume that we don't need the correct context.
|
|
// Let's terminate the rest of the tree and don't render any siblings.
|
|
throw x;
|
|
}
|
|
|
|
function erroredReplay(
|
|
request: Request,
|
|
boundary: Root | SuspenseBoundary,
|
|
error: mixed,
|
|
replayNodes: ReplayNode[],
|
|
resumeSlots: ResumeSlots,
|
|
): void {
|
|
// Erroring during a replay doesn't actually cause an error by itself because
|
|
// that component has already rendered. What causes the error is the resumable
|
|
// points that we did not yet finish which will be below the point of the reset.
|
|
// For example, if we're replaying a path to a Suspense boundary that is not done
|
|
// that doesn't error the parent Suspense boundary.
|
|
// This might be a bit strange that the error in a parent gets thrown at a child.
|
|
// We log it only once and reuse the digest.
|
|
let errorDigest;
|
|
if (
|
|
enablePostpone &&
|
|
typeof error === 'object' &&
|
|
error !== null &&
|
|
error.$$typeof === REACT_POSTPONE_TYPE
|
|
) {
|
|
const postponeInstance: Postpone = (error: any);
|
|
logPostpone(request, postponeInstance.message);
|
|
// TODO: Figure out a better signal than a magic digest value.
|
|
errorDigest = 'POSTPONE';
|
|
} else {
|
|
errorDigest = logRecoverableError(request, error);
|
|
}
|
|
abortRemainingReplayNodes(
|
|
request,
|
|
boundary,
|
|
replayNodes,
|
|
resumeSlots,
|
|
error,
|
|
errorDigest,
|
|
);
|
|
}
|
|
|
|
function erroredTask(
|
|
request: Request,
|
|
boundary: Root | SuspenseBoundary,
|
|
error: mixed,
|
|
) {
|
|
// Report the error to a global handler.
|
|
let errorDigest;
|
|
if (
|
|
enablePostpone &&
|
|
typeof error === 'object' &&
|
|
error !== null &&
|
|
error.$$typeof === REACT_POSTPONE_TYPE
|
|
) {
|
|
const postponeInstance: Postpone = (error: any);
|
|
logPostpone(request, postponeInstance.message);
|
|
// TODO: Figure out a better signal than a magic digest value.
|
|
errorDigest = 'POSTPONE';
|
|
} else {
|
|
errorDigest = logRecoverableError(request, error);
|
|
}
|
|
if (boundary === null) {
|
|
lastBoundaryErrorComponentStackDev = null;
|
|
fatalError(request, error);
|
|
} else {
|
|
boundary.pendingTasks--;
|
|
if (boundary.status !== CLIENT_RENDERED) {
|
|
boundary.status = CLIENT_RENDERED;
|
|
boundary.errorDigest = errorDigest;
|
|
if (__DEV__) {
|
|
captureBoundaryErrorDetailsDev(boundary, error);
|
|
}
|
|
|
|
// Regardless of what happens next, this boundary won't be displayed,
|
|
// so we can flush it, if the parent already flushed.
|
|
if (boundary.parentFlushed) {
|
|
// We don't have a preference where in the queue this goes since it's likely
|
|
// to error on the client anyway. However, intentionally client-rendered
|
|
// boundaries should be flushed earlier so that they can start on the client.
|
|
// We reuse the same queue for errors.
|
|
request.clientRenderedBoundaries.push(boundary);
|
|
}
|
|
} else {
|
|
lastBoundaryErrorComponentStackDev = null;
|
|
}
|
|
}
|
|
|
|
request.allPendingTasks--;
|
|
if (request.allPendingTasks === 0) {
|
|
const onAllReady = request.onAllReady;
|
|
onAllReady();
|
|
}
|
|
}
|
|
|
|
function abortTaskSoft(this: Request, task: Task): void {
|
|
// This aborts task without aborting the parent boundary that it blocks.
|
|
// It's used for when we didn't need this task to complete the tree.
|
|
// If task was needed, then it should use abortTask instead.
|
|
const request: Request = this;
|
|
const boundary = task.blockedBoundary;
|
|
const segment = task.blockedSegment;
|
|
if (segment !== null) {
|
|
segment.status = ABORTED;
|
|
finishedTask(request, boundary, segment);
|
|
}
|
|
}
|
|
|
|
function abortRemainingSuspenseBoundary(
|
|
request: Request,
|
|
rootSegmentID: number,
|
|
error: mixed,
|
|
errorDigest: ?string,
|
|
): void {
|
|
const resumedBoundary = createSuspenseBoundary(request, new Set());
|
|
resumedBoundary.parentFlushed = true;
|
|
// We restore the same id of this boundary as was used during prerender.
|
|
resumedBoundary.rootSegmentID = rootSegmentID;
|
|
|
|
resumedBoundary.status = CLIENT_RENDERED;
|
|
resumedBoundary.errorDigest = errorDigest;
|
|
if (__DEV__) {
|
|
const errorPrefix = 'The server did not finish this Suspense boundary: ';
|
|
let errorMessage;
|
|
if (error && typeof error.message === 'string') {
|
|
errorMessage = errorPrefix + error.message;
|
|
} else {
|
|
// eslint-disable-next-line react-internal/safe-string-coercion
|
|
errorMessage = errorPrefix + String(error);
|
|
}
|
|
const previousTaskInDev = currentTaskInDEV;
|
|
currentTaskInDEV = null;
|
|
try {
|
|
captureBoundaryErrorDetailsDev(resumedBoundary, errorMessage);
|
|
} finally {
|
|
currentTaskInDEV = previousTaskInDev;
|
|
}
|
|
}
|
|
if (resumedBoundary.parentFlushed) {
|
|
request.clientRenderedBoundaries.push(resumedBoundary);
|
|
}
|
|
}
|
|
|
|
function abortRemainingReplayNodes(
|
|
request: Request,
|
|
boundary: Root | SuspenseBoundary,
|
|
nodes: Array<ReplayNode>,
|
|
slots: ResumeSlots,
|
|
error: mixed,
|
|
errorDigest: ?string,
|
|
): void {
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
const node = nodes[i];
|
|
if (node.length === 4) {
|
|
abortRemainingReplayNodes(
|
|
request,
|
|
boundary,
|
|
node[2],
|
|
node[3],
|
|
error,
|
|
errorDigest,
|
|
);
|
|
} else {
|
|
const boundaryNode: ReplaySuspenseBoundary = node;
|
|
const rootSegmentID = boundaryNode[5];
|
|
abortRemainingSuspenseBoundary(
|
|
request,
|
|
rootSegmentID,
|
|
error,
|
|
errorDigest,
|
|
);
|
|
}
|
|
}
|
|
// Empty the set, since we've cleared it now.
|
|
nodes.length = 0;
|
|
|
|
if (slots !== null) {
|
|
// We had something still to resume in the parent boundary. We must trigger
|
|
// the error on the parent boundary since it's not able to complete.
|
|
if (boundary === null) {
|
|
throw new Error(
|
|
'We should not have any resumable nodes in the shell. ' +
|
|
'This is a bug in React.',
|
|
);
|
|
} else if (boundary.status !== CLIENT_RENDERED) {
|
|
boundary.status = CLIENT_RENDERED;
|
|
boundary.errorDigest = errorDigest;
|
|
if (__DEV__) {
|
|
captureBoundaryErrorDetailsDev(boundary, error);
|
|
}
|
|
if (boundary.parentFlushed) {
|
|
request.clientRenderedBoundaries.push(boundary);
|
|
}
|
|
}
|
|
// Empty the set
|
|
if (typeof slots === 'object') {
|
|
for (const index in slots) {
|
|
delete slots[(index: any)];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function abortTask(task: Task, request: Request, error: mixed): void {
|
|
// This aborts the task and aborts the parent that it blocks, putting it into
|
|
// client rendered mode.
|
|
const boundary = task.blockedBoundary;
|
|
const segment = task.blockedSegment;
|
|
if (segment !== null) {
|
|
segment.status = ABORTED;
|
|
}
|
|
|
|
if (boundary === null) {
|
|
if (request.status !== CLOSING && request.status !== CLOSED) {
|
|
const replay: null | ReplaySet = task.replay;
|
|
if (replay === null) {
|
|
// We didn't complete the root so we have nothing to show. We can close
|
|
// the request;
|
|
logRecoverableError(request, error);
|
|
fatalError(request, error);
|
|
return;
|
|
} else {
|
|
// If the shell aborts during a replay, that's not a fatal error. Instead
|
|
// we should be able to recover by client rendering all the root boundaries in
|
|
// the ReplaySet.
|
|
replay.pendingTasks--;
|
|
if (replay.pendingTasks === 0 && replay.nodes.length > 0) {
|
|
const errorDigest = logRecoverableError(request, error);
|
|
abortRemainingReplayNodes(
|
|
request,
|
|
null,
|
|
replay.nodes,
|
|
replay.slots,
|
|
error,
|
|
errorDigest,
|
|
);
|
|
}
|
|
request.pendingRootTasks--;
|
|
if (request.pendingRootTasks === 0) {
|
|
request.onShellError = noop;
|
|
const onShellReady = request.onShellReady;
|
|
onShellReady();
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
boundary.pendingTasks--;
|
|
if (boundary.status !== CLIENT_RENDERED) {
|
|
boundary.status = CLIENT_RENDERED;
|
|
boundary.errorDigest = logRecoverableError(request, error);
|
|
if (__DEV__) {
|
|
const errorPrefix =
|
|
'The server did not finish this Suspense boundary: ';
|
|
let errorMessage;
|
|
if (error && typeof error.message === 'string') {
|
|
errorMessage = errorPrefix + error.message;
|
|
} else {
|
|
// eslint-disable-next-line react-internal/safe-string-coercion
|
|
errorMessage = errorPrefix + String(error);
|
|
}
|
|
const previousTaskInDev = currentTaskInDEV;
|
|
currentTaskInDEV = task;
|
|
try {
|
|
captureBoundaryErrorDetailsDev(boundary, errorMessage);
|
|
} finally {
|
|
currentTaskInDEV = previousTaskInDev;
|
|
}
|
|
}
|
|
if (boundary.parentFlushed) {
|
|
request.clientRenderedBoundaries.push(boundary);
|
|
}
|
|
}
|
|
|
|
// If this boundary was still pending then we haven't already cancelled its fallbacks.
|
|
// We'll need to abort the fallbacks, which will also error that parent boundary.
|
|
boundary.fallbackAbortableTasks.forEach(fallbackTask =>
|
|
abortTask(fallbackTask, request, error),
|
|
);
|
|
boundary.fallbackAbortableTasks.clear();
|
|
}
|
|
|
|
request.allPendingTasks--;
|
|
if (request.allPendingTasks === 0) {
|
|
const onAllReady = request.onAllReady;
|
|
onAllReady();
|
|
}
|
|
}
|
|
|
|
function queueCompletedSegment(
|
|
boundary: SuspenseBoundary,
|
|
segment: Segment,
|
|
): void {
|
|
if (
|
|
segment.chunks.length === 0 &&
|
|
segment.children.length === 1 &&
|
|
segment.children[0].boundary === null
|
|
) {
|
|
// This is an empty segment. There's nothing to write, so we can instead transfer the ID
|
|
// to the child. That way any existing references point to the child.
|
|
const childSegment = segment.children[0];
|
|
childSegment.id = segment.id;
|
|
childSegment.parentFlushed = true;
|
|
if (childSegment.status === COMPLETED) {
|
|
queueCompletedSegment(boundary, childSegment);
|
|
}
|
|
} else {
|
|
const completedSegments = boundary.completedSegments;
|
|
completedSegments.push(segment);
|
|
}
|
|
}
|
|
|
|
function finishedTask(
|
|
request: Request,
|
|
boundary: Root | SuspenseBoundary,
|
|
segment: null | Segment,
|
|
) {
|
|
if (boundary === null) {
|
|
if (segment !== null && segment.parentFlushed) {
|
|
if (request.completedRootSegment !== null) {
|
|
throw new Error(
|
|
'There can only be one root segment. This is a bug in React.',
|
|
);
|
|
}
|
|
|
|
request.completedRootSegment = segment;
|
|
}
|
|
request.pendingRootTasks--;
|
|
if (request.pendingRootTasks === 0) {
|
|
// We have completed the shell so the shell can't error anymore.
|
|
request.onShellError = noop;
|
|
const onShellReady = request.onShellReady;
|
|
onShellReady();
|
|
}
|
|
} else {
|
|
boundary.pendingTasks--;
|
|
if (boundary.status === CLIENT_RENDERED) {
|
|
// This already errored.
|
|
} else if (boundary.pendingTasks === 0) {
|
|
if (boundary.status === PENDING) {
|
|
boundary.status = COMPLETED;
|
|
}
|
|
// This must have been the last segment we were waiting on. This boundary is now complete.
|
|
if (segment !== null && segment.parentFlushed) {
|
|
// Our parent segment already flushed, so we need to schedule this segment to be emitted.
|
|
// If it is a segment that was aborted, we'll write other content instead so we don't need
|
|
// to emit it.
|
|
if (segment.status === COMPLETED) {
|
|
queueCompletedSegment(boundary, segment);
|
|
}
|
|
}
|
|
if (boundary.parentFlushed) {
|
|
// The segment might be part of a segment that didn't flush yet, but if the boundary's
|
|
// parent flushed, we need to schedule the boundary to be emitted.
|
|
request.completedBoundaries.push(boundary);
|
|
}
|
|
|
|
// We can now cancel any pending task on the fallback since we won't need to show it anymore.
|
|
// This needs to happen after we read the parentFlushed flags because aborting can finish
|
|
// work which can trigger user code, which can start flushing, which can change those flags.
|
|
// If the boundary was POSTPONED, we still need to finish the fallback first.
|
|
if (boundary.status === COMPLETED) {
|
|
boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
|
|
boundary.fallbackAbortableTasks.clear();
|
|
}
|
|
} else {
|
|
if (segment !== null && segment.parentFlushed) {
|
|
// Our parent already flushed, so we need to schedule this segment to be emitted.
|
|
// If it is a segment that was aborted, we'll write other content instead so we don't need
|
|
// to emit it.
|
|
if (segment.status === COMPLETED) {
|
|
queueCompletedSegment(boundary, segment);
|
|
const completedSegments = boundary.completedSegments;
|
|
if (completedSegments.length === 1) {
|
|
// This is the first time since we last flushed that we completed anything.
|
|
// We can schedule this boundary to emit its partially completed segments early
|
|
// in case the parent has already been flushed.
|
|
if (boundary.parentFlushed) {
|
|
request.partialBoundaries.push(boundary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
request.allPendingTasks--;
|
|
if (request.allPendingTasks === 0) {
|
|
// This needs to be called at the very end so that we can synchronously write the result
|
|
// in the callback if needed.
|
|
const onAllReady = request.onAllReady;
|
|
onAllReady();
|
|
}
|
|
}
|
|
|
|
function retryTask(request: Request, task: Task): void {
|
|
if (enableFloat) {
|
|
const blockedBoundary = task.blockedBoundary;
|
|
setCurrentlyRenderingBoundaryResourcesTarget(
|
|
request.renderState,
|
|
blockedBoundary ? blockedBoundary.resources : null,
|
|
);
|
|
}
|
|
const segment = task.blockedSegment;
|
|
if (segment === null) {
|
|
retryReplayTask(
|
|
request,
|
|
// $FlowFixMe: Refined.
|
|
task,
|
|
);
|
|
} else {
|
|
retryRenderTask(
|
|
request,
|
|
// $FlowFixMe: Refined.
|
|
task,
|
|
segment,
|
|
);
|
|
}
|
|
}
|
|
|
|
function retryRenderTask(
|
|
request: Request,
|
|
task: RenderTask,
|
|
segment: Segment,
|
|
): void {
|
|
if (segment.status !== PENDING) {
|
|
// We completed this by other means before we had a chance to retry it.
|
|
return;
|
|
}
|
|
// We restore the context to what it was when we suspended.
|
|
// We don't restore it after we leave because it's likely that we'll end up
|
|
// needing a very similar context soon again.
|
|
switchContext(task.context);
|
|
let prevTaskInDEV = null;
|
|
if (__DEV__) {
|
|
prevTaskInDEV = currentTaskInDEV;
|
|
currentTaskInDEV = task;
|
|
}
|
|
|
|
const childrenLength = segment.children.length;
|
|
const chunkLength = segment.chunks.length;
|
|
try {
|
|
// We call the destructive form that mutates this task. That way if something
|
|
// suspends again, we can reuse the same task instead of spawning a new one.
|
|
|
|
// Reset the task's thenable state before continuing, so that if a later
|
|
// component suspends we can reuse the same task object. If the same
|
|
// component suspends again, the thenable state will be restored.
|
|
const prevThenableState = task.thenableState;
|
|
task.thenableState = null;
|
|
|
|
renderNodeDestructive(
|
|
request,
|
|
task,
|
|
prevThenableState,
|
|
task.node,
|
|
task.childIndex,
|
|
);
|
|
pushSegmentFinale(
|
|
segment.chunks,
|
|
request.renderState,
|
|
segment.lastPushedText,
|
|
segment.textEmbedded,
|
|
);
|
|
|
|
task.abortSet.delete(task);
|
|
segment.status = COMPLETED;
|
|
finishedTask(request, task.blockedBoundary, segment);
|
|
} catch (thrownValue) {
|
|
resetHooksState();
|
|
|
|
// Reset the write pointers to where we started.
|
|
segment.children.length = childrenLength;
|
|
segment.chunks.length = chunkLength;
|
|
|
|
const x =
|
|
thrownValue === SuspenseException
|
|
? // This is a special type of exception used for Suspense. For historical
|
|
// reasons, the rest of the Suspense implementation expects the thrown
|
|
// value to be a thenable, because before `use` existed that was the
|
|
// (unstable) API for suspending. This implementation detail can change
|
|
// later, once we deprecate the old API in favor of `use`.
|
|
getSuspendedThenable()
|
|
: thrownValue;
|
|
|
|
if (typeof x === 'object' && x !== null) {
|
|
// $FlowFixMe[method-unbinding]
|
|
if (typeof x.then === 'function') {
|
|
// Something suspended again, let's pick it back up later.
|
|
const ping = task.ping;
|
|
x.then(ping, ping);
|
|
task.thenableState = getThenableStateAfterSuspending();
|
|
return;
|
|
} else if (
|
|
enablePostpone &&
|
|
request.trackedPostpones !== null &&
|
|
x.$$typeof === REACT_POSTPONE_TYPE
|
|
) {
|
|
// If we're tracking postpones, we mark this segment as postponed and finish
|
|
// the task without filling it in. If we're not tracking, we treat it more like
|
|
// an error.
|
|
const trackedPostpones = request.trackedPostpones;
|
|
task.abortSet.delete(task);
|
|
const postponeInstance: Postpone = (x: any);
|
|
logPostpone(request, postponeInstance.message);
|
|
trackPostpone(request, trackedPostpones, task, segment);
|
|
finishedTask(request, task.blockedBoundary, segment);
|
|
lastBoundaryErrorComponentStackDev = null;
|
|
return;
|
|
}
|
|
}
|
|
task.abortSet.delete(task);
|
|
segment.status = ERRORED;
|
|
erroredTask(request, task.blockedBoundary, x);
|
|
return;
|
|
} finally {
|
|
if (enableFloat) {
|
|
setCurrentlyRenderingBoundaryResourcesTarget(request.renderState, null);
|
|
}
|
|
if (__DEV__) {
|
|
currentTaskInDEV = prevTaskInDEV;
|
|
}
|
|
}
|
|
}
|
|
|
|
function retryReplayTask(request: Request, task: ReplayTask): void {
|
|
if (task.replay.pendingTasks === 0) {
|
|
// There are no pending tasks working on this set, so we must have aborted.
|
|
return;
|
|
}
|
|
|
|
// We restore the context to what it was when we suspended.
|
|
// We don't restore it after we leave because it's likely that we'll end up
|
|
// needing a very similar context soon again.
|
|
switchContext(task.context);
|
|
let prevTaskInDEV = null;
|
|
if (__DEV__) {
|
|
prevTaskInDEV = currentTaskInDEV;
|
|
currentTaskInDEV = task;
|
|
}
|
|
|
|
try {
|
|
// We call the destructive form that mutates this task. That way if something
|
|
// suspends again, we can reuse the same task instead of spawning a new one.
|
|
|
|
// Reset the task's thenable state before continuing, so that if a later
|
|
// component suspends we can reuse the same task object. If the same
|
|
// component suspends again, the thenable state will be restored.
|
|
const prevThenableState = task.thenableState;
|
|
task.thenableState = null;
|
|
|
|
renderNodeDestructive(
|
|
request,
|
|
task,
|
|
prevThenableState,
|
|
task.node,
|
|
task.childIndex,
|
|
);
|
|
|
|
if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
|
|
throw new Error(
|
|
"Couldn't find all resumable slots by key/index during replaying. " +
|
|
"The tree doesn't match so React will fallback to client rendering.",
|
|
);
|
|
}
|
|
task.replay.pendingTasks--;
|
|
|
|
task.abortSet.delete(task);
|
|
finishedTask(request, task.blockedBoundary, null);
|
|
} catch (thrownValue) {
|
|
resetHooksState();
|
|
|
|
const x =
|
|
thrownValue === SuspenseException
|
|
? // This is a special type of exception used for Suspense. For historical
|
|
// reasons, the rest of the Suspense implementation expects the thrown
|
|
// value to be a thenable, because before `use` existed that was the
|
|
// (unstable) API for suspending. This implementation detail can change
|
|
// later, once we deprecate the old API in favor of `use`.
|
|
getSuspendedThenable()
|
|
: thrownValue;
|
|
|
|
if (typeof x === 'object' && x !== null) {
|
|
// $FlowFixMe[method-unbinding]
|
|
if (typeof x.then === 'function') {
|
|
// Something suspended again, let's pick it back up later.
|
|
const ping = task.ping;
|
|
x.then(ping, ping);
|
|
task.thenableState = getThenableStateAfterSuspending();
|
|
return;
|
|
}
|
|
}
|
|
task.replay.pendingTasks--;
|
|
task.abortSet.delete(task);
|
|
erroredReplay(
|
|
request,
|
|
task.blockedBoundary,
|
|
x,
|
|
task.replay.nodes,
|
|
task.replay.slots,
|
|
);
|
|
request.pendingRootTasks--;
|
|
if (request.pendingRootTasks === 0) {
|
|
request.onShellError = noop;
|
|
const onShellReady = request.onShellReady;
|
|
onShellReady();
|
|
}
|
|
request.allPendingTasks--;
|
|
if (request.allPendingTasks === 0) {
|
|
const onAllReady = request.onAllReady;
|
|
onAllReady();
|
|
}
|
|
return;
|
|
} finally {
|
|
if (enableFloat) {
|
|
setCurrentlyRenderingBoundaryResourcesTarget(request.renderState, null);
|
|
}
|
|
if (__DEV__) {
|
|
currentTaskInDEV = prevTaskInDEV;
|
|
}
|
|
}
|
|
}
|
|
|
|
export function performWork(request: Request): void {
|
|
if (request.status === CLOSED) {
|
|
return;
|
|
}
|
|
const prevContext = getActiveContext();
|
|
const prevDispatcher = ReactCurrentDispatcher.current;
|
|
ReactCurrentDispatcher.current = HooksDispatcher;
|
|
let prevCacheDispatcher;
|
|
if (enableCache) {
|
|
prevCacheDispatcher = ReactCurrentCache.current;
|
|
ReactCurrentCache.current = DefaultCacheDispatcher;
|
|
}
|
|
|
|
const prevRequest = currentRequest;
|
|
currentRequest = request;
|
|
|
|
let prevGetCurrentStackImpl;
|
|
if (__DEV__) {
|
|
prevGetCurrentStackImpl = ReactDebugCurrentFrame.getCurrentStack;
|
|
ReactDebugCurrentFrame.getCurrentStack = getCurrentStackInDEV;
|
|
}
|
|
const prevResumableState = currentResumableState;
|
|
setCurrentResumableState(request.resumableState);
|
|
try {
|
|
const pingedTasks = request.pingedTasks;
|
|
let i;
|
|
for (i = 0; i < pingedTasks.length; i++) {
|
|
const task = pingedTasks[i];
|
|
retryTask(request, task);
|
|
}
|
|
pingedTasks.splice(0, i);
|
|
if (request.destination !== null) {
|
|
flushCompletedQueues(request, request.destination);
|
|
}
|
|
} catch (error) {
|
|
logRecoverableError(request, error);
|
|
fatalError(request, error);
|
|
} finally {
|
|
setCurrentResumableState(prevResumableState);
|
|
ReactCurrentDispatcher.current = prevDispatcher;
|
|
if (enableCache) {
|
|
ReactCurrentCache.current = prevCacheDispatcher;
|
|
}
|
|
|
|
if (__DEV__) {
|
|
ReactDebugCurrentFrame.getCurrentStack = prevGetCurrentStackImpl;
|
|
}
|
|
if (prevDispatcher === HooksDispatcher) {
|
|
// This means that we were in a reentrant work loop. This could happen
|
|
// in a renderer that supports synchronous work like renderToString,
|
|
// when it's called from within another renderer.
|
|
// Normally we don't bother switching the contexts to their root/default
|
|
// values when leaving because we'll likely need the same or similar
|
|
// context again. However, when we're inside a synchronous loop like this
|
|
// we'll to restore the context to what it was before returning.
|
|
switchContext(prevContext);
|
|
}
|
|
currentRequest = prevRequest;
|
|
}
|
|
}
|
|
|
|
function flushSubtree(
|
|
request: Request,
|
|
destination: Destination,
|
|
segment: Segment,
|
|
): boolean {
|
|
segment.parentFlushed = true;
|
|
switch (segment.status) {
|
|
case PENDING: {
|
|
// We're emitting a placeholder for this segment to be filled in later.
|
|
// Therefore we'll need to assign it an ID - to refer to it by.
|
|
segment.id = request.nextSegmentId++;
|
|
// Fallthrough
|
|
}
|
|
case POSTPONED: {
|
|
const segmentID = segment.id;
|
|
// When this segment finally completes it won't be embedded in text since it will flush separately
|
|
segment.lastPushedText = false;
|
|
segment.textEmbedded = false;
|
|
return writePlaceholder(destination, request.renderState, segmentID);
|
|
}
|
|
case COMPLETED: {
|
|
segment.status = FLUSHED;
|
|
let r = true;
|
|
const chunks = segment.chunks;
|
|
let chunkIdx = 0;
|
|
const children = segment.children;
|
|
|
|
for (let childIdx = 0; childIdx < children.length; childIdx++) {
|
|
const nextChild = children[childIdx];
|
|
// Write all the chunks up until the next child.
|
|
for (; chunkIdx < nextChild.index; chunkIdx++) {
|
|
writeChunk(destination, chunks[chunkIdx]);
|
|
}
|
|
r = flushSegment(request, destination, nextChild);
|
|
}
|
|
// Finally just write all the remaining chunks
|
|
for (; chunkIdx < chunks.length - 1; chunkIdx++) {
|
|
writeChunk(destination, chunks[chunkIdx]);
|
|
}
|
|
if (chunkIdx < chunks.length) {
|
|
r = writeChunkAndReturn(destination, chunks[chunkIdx]);
|
|
}
|
|
return r;
|
|
}
|
|
default: {
|
|
throw new Error(
|
|
'Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
function flushSegment(
|
|
request: Request,
|
|
destination: Destination,
|
|
segment: Segment,
|
|
): boolean {
|
|
const boundary = segment.boundary;
|
|
if (boundary === null) {
|
|
// Not a suspense boundary.
|
|
return flushSubtree(request, destination, segment);
|
|
}
|
|
|
|
boundary.parentFlushed = true;
|
|
// This segment is a Suspense boundary. We need to decide whether to
|
|
// emit the content or the fallback now.
|
|
if (boundary.status === CLIENT_RENDERED) {
|
|
// Emit a client rendered suspense boundary wrapper.
|
|
// We never queue the inner boundary so we'll never emit its content or partial segments.
|
|
|
|
writeStartClientRenderedSuspenseBoundary(
|
|
destination,
|
|
request.renderState,
|
|
boundary.errorDigest,
|
|
boundary.errorMessage,
|
|
boundary.errorComponentStack,
|
|
);
|
|
// Flush the fallback.
|
|
flushSubtree(request, destination, segment);
|
|
|
|
return writeEndClientRenderedSuspenseBoundary(
|
|
destination,
|
|
request.renderState,
|
|
);
|
|
} else if (boundary.status !== COMPLETED) {
|
|
if (boundary.status === PENDING) {
|
|
// For pending boundaries we lazily assign an ID to the boundary
|
|
// and root segment.
|
|
boundary.rootSegmentID = request.nextSegmentId++;
|
|
}
|
|
|
|
if (boundary.completedSegments.length > 0) {
|
|
// If this is at least partially complete, we can queue it to be partially emitted early.
|
|
request.partialBoundaries.push(boundary);
|
|
}
|
|
|
|
// This boundary is still loading. Emit a pending suspense boundary wrapper.
|
|
|
|
const id = boundary.rootSegmentID;
|
|
writeStartPendingSuspenseBoundary(destination, request.renderState, id);
|
|
|
|
// Flush the fallback.
|
|
flushSubtree(request, destination, segment);
|
|
|
|
return writeEndPendingSuspenseBoundary(destination, request.renderState);
|
|
} else if (boundary.byteSize > request.progressiveChunkSize) {
|
|
// This boundary is large and will be emitted separately so that we can progressively show
|
|
// other content. We add it to the queue during the flush because we have to ensure that
|
|
// the parent flushes first so that there's something to inject it into.
|
|
// We also have to make sure that it's emitted into the queue in a deterministic slot.
|
|
// I.e. we can't insert it here when it completes.
|
|
|
|
// Assign an ID to refer to the future content by.
|
|
boundary.rootSegmentID = request.nextSegmentId++;
|
|
|
|
request.completedBoundaries.push(boundary);
|
|
// Emit a pending rendered suspense boundary wrapper.
|
|
writeStartPendingSuspenseBoundary(
|
|
destination,
|
|
request.renderState,
|
|
boundary.rootSegmentID,
|
|
);
|
|
|
|
// Flush the fallback.
|
|
flushSubtree(request, destination, segment);
|
|
|
|
return writeEndPendingSuspenseBoundary(destination, request.renderState);
|
|
} else {
|
|
if (enableFloat) {
|
|
hoistResources(request.renderState, boundary.resources);
|
|
}
|
|
// We can inline this boundary's content as a complete boundary.
|
|
writeStartCompletedSuspenseBoundary(destination, request.renderState);
|
|
|
|
const completedSegments = boundary.completedSegments;
|
|
|
|
if (completedSegments.length !== 1) {
|
|
throw new Error(
|
|
'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
|
|
);
|
|
}
|
|
|
|
const contentSegment = completedSegments[0];
|
|
flushSegment(request, destination, contentSegment);
|
|
|
|
return writeEndCompletedSuspenseBoundary(destination, request.renderState);
|
|
}
|
|
}
|
|
|
|
function flushClientRenderedBoundary(
|
|
request: Request,
|
|
destination: Destination,
|
|
boundary: SuspenseBoundary,
|
|
): boolean {
|
|
return writeClientRenderBoundaryInstruction(
|
|
destination,
|
|
request.resumableState,
|
|
request.renderState,
|
|
boundary.rootSegmentID,
|
|
boundary.errorDigest,
|
|
boundary.errorMessage,
|
|
boundary.errorComponentStack,
|
|
);
|
|
}
|
|
|
|
function flushSegmentContainer(
|
|
request: Request,
|
|
destination: Destination,
|
|
segment: Segment,
|
|
): boolean {
|
|
writeStartSegment(
|
|
destination,
|
|
request.renderState,
|
|
segment.parentFormatContext,
|
|
segment.id,
|
|
);
|
|
flushSegment(request, destination, segment);
|
|
return writeEndSegment(destination, segment.parentFormatContext);
|
|
}
|
|
|
|
function flushCompletedBoundary(
|
|
request: Request,
|
|
destination: Destination,
|
|
boundary: SuspenseBoundary,
|
|
): boolean {
|
|
if (enableFloat) {
|
|
setCurrentlyRenderingBoundaryResourcesTarget(
|
|
request.renderState,
|
|
boundary.resources,
|
|
);
|
|
}
|
|
const completedSegments = boundary.completedSegments;
|
|
let i = 0;
|
|
for (; i < completedSegments.length; i++) {
|
|
const segment = completedSegments[i];
|
|
flushPartiallyCompletedSegment(request, destination, boundary, segment);
|
|
}
|
|
completedSegments.length = 0;
|
|
|
|
if (enableFloat) {
|
|
writeResourcesForBoundary(
|
|
destination,
|
|
boundary.resources,
|
|
request.renderState,
|
|
);
|
|
}
|
|
|
|
return writeCompletedBoundaryInstruction(
|
|
destination,
|
|
request.resumableState,
|
|
request.renderState,
|
|
boundary.rootSegmentID,
|
|
boundary.resources,
|
|
);
|
|
}
|
|
|
|
function flushPartialBoundary(
|
|
request: Request,
|
|
destination: Destination,
|
|
boundary: SuspenseBoundary,
|
|
): boolean {
|
|
if (enableFloat) {
|
|
setCurrentlyRenderingBoundaryResourcesTarget(
|
|
request.renderState,
|
|
boundary.resources,
|
|
);
|
|
}
|
|
const completedSegments = boundary.completedSegments;
|
|
let i = 0;
|
|
for (; i < completedSegments.length; i++) {
|
|
const segment = completedSegments[i];
|
|
if (
|
|
!flushPartiallyCompletedSegment(request, destination, boundary, segment)
|
|
) {
|
|
i++;
|
|
completedSegments.splice(0, i);
|
|
// Only write as much as the buffer wants. Something higher priority
|
|
// might want to write later.
|
|
return false;
|
|
}
|
|
}
|
|
completedSegments.splice(0, i);
|
|
|
|
if (enableFloat) {
|
|
// The way this is structured we only write resources for partial boundaries
|
|
// if there is no backpressure. Later before we complete the boundary we
|
|
// will write resources regardless of backpressure before we emit the
|
|
// completion instruction
|
|
return writeResourcesForBoundary(
|
|
destination,
|
|
boundary.resources,
|
|
request.renderState,
|
|
);
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function flushPartiallyCompletedSegment(
|
|
request: Request,
|
|
destination: Destination,
|
|
boundary: SuspenseBoundary,
|
|
segment: Segment,
|
|
): boolean {
|
|
if (segment.status === FLUSHED) {
|
|
// We've already flushed this inline.
|
|
return true;
|
|
}
|
|
|
|
const segmentID = segment.id;
|
|
if (segmentID === -1) {
|
|
// This segment wasn't previously referred to. This happens at the root of
|
|
// a boundary. We make kind of a leap here and assume this is the root.
|
|
const rootSegmentID = (segment.id = boundary.rootSegmentID);
|
|
|
|
if (rootSegmentID === -1) {
|
|
throw new Error(
|
|
'A root segment ID must have been assigned by now. This is a bug in React.',
|
|
);
|
|
}
|
|
|
|
return flushSegmentContainer(request, destination, segment);
|
|
} else if (segmentID === boundary.rootSegmentID) {
|
|
// When we emit postponed boundaries, we might have assigned the ID already
|
|
// but it's still the root segment so we can't inject it into the parent yet.
|
|
return flushSegmentContainer(request, destination, segment);
|
|
} else {
|
|
flushSegmentContainer(request, destination, segment);
|
|
return writeCompletedSegmentInstruction(
|
|
destination,
|
|
request.resumableState,
|
|
request.renderState,
|
|
segmentID,
|
|
);
|
|
}
|
|
}
|
|
|
|
function flushCompletedQueues(
|
|
request: Request,
|
|
destination: Destination,
|
|
): void {
|
|
beginWriting(destination);
|
|
try {
|
|
// The structure of this is to go through each queue one by one and write
|
|
// until the sink tells us to stop. When we should stop, we still finish writing
|
|
// that item fully and then yield. At that point we remove the already completed
|
|
// items up until the point we completed them.
|
|
|
|
let i;
|
|
const completedRootSegment = request.completedRootSegment;
|
|
if (completedRootSegment !== null) {
|
|
if (completedRootSegment.status === POSTPONED) {
|
|
// We postponed the root, so we write nothing.
|
|
return;
|
|
} else if (request.pendingRootTasks === 0) {
|
|
if (enableFloat) {
|
|
writePreamble(
|
|
destination,
|
|
request.resumableState,
|
|
request.renderState,
|
|
request.allPendingTasks === 0 && request.trackedPostpones === null,
|
|
);
|
|
}
|
|
|
|
flushSegment(request, destination, completedRootSegment);
|
|
request.completedRootSegment = null;
|
|
writeCompletedRoot(destination, request.renderState);
|
|
} else {
|
|
// We haven't flushed the root yet so we don't need to check any other branches further down
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (enableFloat) {
|
|
writeHoistables(destination, request.resumableState, request.renderState);
|
|
}
|
|
|
|
// We emit client rendering instructions for already emitted boundaries first.
|
|
// This is so that we can signal to the client to start client rendering them as
|
|
// soon as possible.
|
|
const clientRenderedBoundaries = request.clientRenderedBoundaries;
|
|
for (i = 0; i < clientRenderedBoundaries.length; i++) {
|
|
const boundary = clientRenderedBoundaries[i];
|
|
if (!flushClientRenderedBoundary(request, destination, boundary)) {
|
|
request.destination = null;
|
|
i++;
|
|
clientRenderedBoundaries.splice(0, i);
|
|
return;
|
|
}
|
|
}
|
|
clientRenderedBoundaries.splice(0, i);
|
|
|
|
// Next we emit any complete boundaries. It's better to favor boundaries
|
|
// that are completely done since we can actually show them, than it is to emit
|
|
// any individual segments from a partially complete boundary.
|
|
const completedBoundaries = request.completedBoundaries;
|
|
for (i = 0; i < completedBoundaries.length; i++) {
|
|
const boundary = completedBoundaries[i];
|
|
if (!flushCompletedBoundary(request, destination, boundary)) {
|
|
request.destination = null;
|
|
i++;
|
|
completedBoundaries.splice(0, i);
|
|
return;
|
|
}
|
|
}
|
|
completedBoundaries.splice(0, i);
|
|
|
|
// Allow anything written so far to flush to the underlying sink before
|
|
// we continue with lower priorities.
|
|
completeWriting(destination);
|
|
beginWriting(destination);
|
|
|
|
// TODO: Here we'll emit data used by hydration.
|
|
|
|
// Next we emit any segments of any boundaries that are partially complete
|
|
// but not deeply complete.
|
|
const partialBoundaries = request.partialBoundaries;
|
|
for (i = 0; i < partialBoundaries.length; i++) {
|
|
const boundary = partialBoundaries[i];
|
|
if (!flushPartialBoundary(request, destination, boundary)) {
|
|
request.destination = null;
|
|
i++;
|
|
partialBoundaries.splice(0, i);
|
|
return;
|
|
}
|
|
}
|
|
partialBoundaries.splice(0, i);
|
|
|
|
// Next we check the completed boundaries again. This may have had
|
|
// boundaries added to it in case they were too larged to be inlined.
|
|
// New ones might be added in this loop.
|
|
const largeBoundaries = request.completedBoundaries;
|
|
for (i = 0; i < largeBoundaries.length; i++) {
|
|
const boundary = largeBoundaries[i];
|
|
if (!flushCompletedBoundary(request, destination, boundary)) {
|
|
request.destination = null;
|
|
i++;
|
|
largeBoundaries.splice(0, i);
|
|
return;
|
|
}
|
|
}
|
|
largeBoundaries.splice(0, i);
|
|
} finally {
|
|
if (
|
|
request.allPendingTasks === 0 &&
|
|
request.pingedTasks.length === 0 &&
|
|
request.clientRenderedBoundaries.length === 0 &&
|
|
request.completedBoundaries.length === 0
|
|
// We don't need to check any partially completed segments because
|
|
// either they have pending task or they're complete.
|
|
) {
|
|
request.flushScheduled = false;
|
|
if (enableFloat) {
|
|
// We write the trailing tags but only if don't have any data to resume.
|
|
// If we need to resume we'll write the postamble in the resume instead.
|
|
if (!enablePostpone || request.trackedPostpones === null) {
|
|
writePostamble(destination, request.resumableState);
|
|
}
|
|
}
|
|
completeWriting(destination);
|
|
flushBuffered(destination);
|
|
if (__DEV__) {
|
|
if (request.abortableTasks.size !== 0) {
|
|
console.error(
|
|
'There was still abortable task at the root when we closed. This is a bug in React.',
|
|
);
|
|
}
|
|
}
|
|
// We're done.
|
|
close(destination);
|
|
// We need to stop flowing now because we do not want any async contexts which might call
|
|
// float methods to initiate any flushes after this point
|
|
stopFlowing(request);
|
|
} else {
|
|
completeWriting(destination);
|
|
flushBuffered(destination);
|
|
}
|
|
}
|
|
}
|
|
|
|
export function startWork(request: Request): void {
|
|
request.flushScheduled = request.destination !== null;
|
|
if (supportsRequestStorage) {
|
|
scheduleWork(() => requestStorage.run(request, performWork, request));
|
|
} else {
|
|
scheduleWork(() => performWork(request));
|
|
}
|
|
}
|
|
|
|
function enqueueFlush(request: Request): void {
|
|
if (
|
|
request.flushScheduled === false &&
|
|
// If there are pinged tasks we are going to flush anyway after work completes
|
|
request.pingedTasks.length === 0 &&
|
|
// If there is no destination there is nothing we can flush to. A flush will
|
|
// happen when we start flowing again
|
|
request.destination !== null
|
|
) {
|
|
request.flushScheduled = true;
|
|
scheduleWork(() => {
|
|
// We need to existence check destination again here because it might go away
|
|
// in between the enqueueFlush call and the work execution
|
|
const destination = request.destination;
|
|
if (destination) {
|
|
flushCompletedQueues(request, destination);
|
|
} else {
|
|
request.flushScheduled = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
export function startFlowing(request: Request, destination: Destination): void {
|
|
if (request.status === CLOSING) {
|
|
request.status = CLOSED;
|
|
closeWithError(destination, request.fatalError);
|
|
return;
|
|
}
|
|
if (request.status === CLOSED) {
|
|
return;
|
|
}
|
|
if (request.destination !== null) {
|
|
// We're already flowing.
|
|
return;
|
|
}
|
|
request.destination = destination;
|
|
try {
|
|
flushCompletedQueues(request, destination);
|
|
} catch (error) {
|
|
logRecoverableError(request, error);
|
|
fatalError(request, error);
|
|
}
|
|
}
|
|
|
|
export function stopFlowing(request: Request): void {
|
|
request.destination = null;
|
|
}
|
|
|
|
// This is called to early terminate a request. It puts all pending boundaries in client rendered state.
|
|
export function abort(request: Request, reason: mixed): void {
|
|
try {
|
|
const abortableTasks = request.abortableTasks;
|
|
if (abortableTasks.size > 0) {
|
|
const error =
|
|
reason === undefined
|
|
? new Error('The render was aborted by the server without a reason.')
|
|
: reason;
|
|
abortableTasks.forEach(task => abortTask(task, request, error));
|
|
abortableTasks.clear();
|
|
}
|
|
if (request.destination !== null) {
|
|
flushCompletedQueues(request, request.destination);
|
|
}
|
|
} catch (error) {
|
|
logRecoverableError(request, error);
|
|
fatalError(request, error);
|
|
}
|
|
}
|
|
|
|
export function flushResources(request: Request): void {
|
|
enqueueFlush(request);
|
|
}
|
|
|
|
export function getFormState(
|
|
request: Request,
|
|
): ReactFormState<any, any> | null {
|
|
return request.formState;
|
|
}
|
|
|
|
export function getResumableState(request: Request): ResumableState {
|
|
return request.resumableState;
|
|
}
|
|
|
|
export function getRenderState(request: Request): RenderState {
|
|
return request.renderState;
|
|
}
|
|
|
|
function addToReplayParent(
|
|
node: ReplayNode,
|
|
parentKeyPath: Root | KeyNode,
|
|
trackedPostpones: PostponedHoles,
|
|
): void {
|
|
if (parentKeyPath === null) {
|
|
trackedPostpones.rootNodes.push(node);
|
|
} else {
|
|
const workingMap = trackedPostpones.workingMap;
|
|
let parentNode = workingMap.get(parentKeyPath);
|
|
if (parentNode === undefined) {
|
|
parentNode = ([
|
|
parentKeyPath[1],
|
|
parentKeyPath[2],
|
|
([]: Array<ReplayNode>),
|
|
null,
|
|
]: ReplayNode);
|
|
workingMap.set(parentKeyPath, parentNode);
|
|
addToReplayParent(parentNode, parentKeyPath[0], trackedPostpones);
|
|
}
|
|
parentNode[2].push(node);
|
|
}
|
|
}
|
|
|
|
export type PostponedState = {
|
|
nextSegmentId: number,
|
|
rootFormatContext: FormatContext,
|
|
progressiveChunkSize: number,
|
|
resumableState: ResumableState,
|
|
replayNodes: Array<ReplayNode>,
|
|
replaySlots: ResumeSlots,
|
|
};
|
|
|
|
// Returns the state of a postponed request or null if nothing was postponed.
|
|
export function getPostponedState(request: Request): null | PostponedState {
|
|
const trackedPostpones = request.trackedPostpones;
|
|
if (
|
|
trackedPostpones === null ||
|
|
(trackedPostpones.rootNodes.length === 0 &&
|
|
trackedPostpones.rootSlots === null)
|
|
) {
|
|
// Reset. Let the flushing behave as if we completed the whole document.
|
|
request.trackedPostpones = null;
|
|
return null;
|
|
}
|
|
if (
|
|
request.completedRootSegment !== null &&
|
|
request.completedRootSegment.status === POSTPONED
|
|
) {
|
|
// We postponed the root so we didn't flush anything.
|
|
resetResumableState(request.resumableState, request.renderState);
|
|
}
|
|
return {
|
|
nextSegmentId: request.nextSegmentId,
|
|
rootFormatContext: request.rootFormatContext,
|
|
progressiveChunkSize: request.progressiveChunkSize,
|
|
resumableState: request.resumableState,
|
|
replayNodes: trackedPostpones.rootNodes,
|
|
replaySlots: trackedPostpones.rootSlots,
|
|
};
|
|
}
|