mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Josh Story
8bda71558c
follow up to https://github.com/facebook/react/pull/32163 This continues the work of making Suspense workable anywhere in a react-dom tree. See the prior PRs for how we handle server rendering and client rendering. In this change we update the hydration implementation to be able to locate expected nodes. In particular this means hydration understands now that the default hydration context is the document body when the container is above the body. One case that is unique to hydration is clearing Suspense boundaries. When hydration fails or when the server instructs the client to recover an errored boundary it's possible that the html, head, and body tags in the initial document were written from a fallback or a different primary content on the server and need to be replaced by the client render. However these tags (and in the case of head, their content) won't be inside the comment nodes that identify the bounds of the Suspense boundary. And when client rendering you may not even render the same singletons that were server rendered. So when server rendering a boudnary which contributes to the preamble (the html, head, and body tag openings plus the head contents) we emit a special marker comment just before closing the boundary out. This marker encodes which parts of the preamble this boundary owned. If we need to clear the suspense boundary on the client we read this marker and use it to reset the appropriate singleton state.
53 lines
2.0 KiB
JavaScript
53 lines
2.0 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
|
|
*/
|
|
|
|
// Renderers that don't support hydration
|
|
// can re-export everything from this module.
|
|
|
|
function shim(...args: any): empty {
|
|
throw new Error(
|
|
'The current renderer does not support hydration. ' +
|
|
'This error is likely caused by a bug in React. ' +
|
|
'Please file an issue.',
|
|
);
|
|
}
|
|
|
|
// Hydration (when unsupported)
|
|
export type SuspenseInstance = mixed;
|
|
export const supportsHydration = false;
|
|
export const isSuspenseInstancePending = shim;
|
|
export const isSuspenseInstanceFallback = shim;
|
|
export const getSuspenseInstanceFallbackErrorDetails = shim;
|
|
export const registerSuspenseInstanceRetry = shim;
|
|
export const canHydrateFormStateMarker = shim;
|
|
export const isFormStateMarkerMatching = shim;
|
|
export const getNextHydratableSibling = shim;
|
|
export const getNextHydratableSiblingAfterSingleton = shim;
|
|
export const getFirstHydratableChild = shim;
|
|
export const getFirstHydratableChildWithinContainer = shim;
|
|
export const getFirstHydratableChildWithinSuspenseInstance = shim;
|
|
export const getFirstHydratableChildWithinSingleton = shim;
|
|
export const canHydrateInstance = shim;
|
|
export const canHydrateTextInstance = shim;
|
|
export const canHydrateSuspenseInstance = shim;
|
|
export const hydrateInstance = shim;
|
|
export const hydrateTextInstance = shim;
|
|
export const hydrateSuspenseInstance = shim;
|
|
export const getNextHydratableInstanceAfterSuspenseInstance = shim;
|
|
export const commitHydratedContainer = shim;
|
|
export const commitHydratedSuspenseInstance = shim;
|
|
export const clearSuspenseBoundary = shim;
|
|
export const clearSuspenseBoundaryFromContainer = shim;
|
|
export const shouldDeleteUnhydratedTailInstances = shim;
|
|
export const diffHydratedPropsForDevWarnings = shim;
|
|
export const diffHydratedTextForDevWarnings = shim;
|
|
export const describeHydratableInstanceForDevWarnings = shim;
|
|
export const validateHydratableInstance = shim;
|
|
export const validateHydratableTextInstance = shim;
|