mirror of
https://github.com/hanzoai/react.git
synced 2026-09-24 17:02:27 +00:00
Josh StoryandGitHub
d13652a8e7
* [Fizz] Improve text separator byte efficiency Previously text separators were inserted following any Text node in Fizz. This increases bytes sent when streaming and in some cases such as title elements these separators are not interpreted as comment nodes and leak into the visual aspects of a page as escaped text. The reason simple tracking on the last pushed type doesn't work is that Segments can be filled in asynchronously later and so you cannot know in a single pass whether the preceding content was a text node or not. This commit adds a concept of TextEmbedding which provides a best effort signal to Segments on whether they are embedded within text. This allows the later resolution of that Segment to add text separators when possibly necessary but avoid them when they are surely not. The current implementation can only "peek" head if the segment is a the Root Segment or a Suspense Boundary Segment. In these cases we know there is no trailing text embedding and we can eliminate the separator at the end of the segment if the last emitted element was Text. In normal Segments we cannot peek and thus have to assume there might be a trailing text embedding and we issue a separator defensively. This should be rare in practice as it is assumed most components that will cause segment creation will also emit some markup at the edges. * [Fizz] Improve separator efficiency when flushing delayed segments The method by which we get segment markup into the DOM differs depending on when the Segment resolves. If a Segment resolves before flushing begins for it's parent it will be emitted inline with the parent markup. In these cases separators may be necessary because they are how we clue the browser into breakup up text into distinct nodes that will later match up with what will be hydrated on the client. If a Segment resolves after flushing has happened a script will be used to patch up the DOM in the client. when this happens if there are any text nodes on the boundary of the patch they won't be "merged" and thus will continue to have distinct representation as Nodes in the DOM. Thus we can avoid doing any separators at the boundaries in these cases. After applying these changes the only time you will get text separators as follows * in between serial text nodes that emit at the same time - these are necessary and cannot be eliminated unless we stop relying on the browser to automatically parse the correct text nodes when processing this HTML * after a final text node in a non-boundary segment that resolves before it's parent has flushed - these are sometimes extraneous, like when the next emitted thing is a non-Text node. In all other cases text separators should be omitted which means the general byte efficiency of this approach should be pretty good
69 lines
2.9 KiB
JavaScript
69 lines
2.9 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
// This is a host config that's used for the `react-server` package on npm.
|
|
// It is only used by third-party renderers.
|
|
//
|
|
// Its API lets you pass the host config as an argument.
|
|
// However, inside the `react-server` we treat host config as a module.
|
|
// This file is a shim between two worlds.
|
|
//
|
|
// It works because the `react-server` bundle is wrapped in something like:
|
|
//
|
|
// module.exports = function ($$$config) {
|
|
// /* renderer code */
|
|
// }
|
|
//
|
|
// So `$$$config` looks like a global variable, but it's
|
|
// really an argument to a top-level wrapping function.
|
|
|
|
declare var $$$hostConfig: any;
|
|
export opaque type Destination = mixed; // eslint-disable-line no-undef
|
|
export opaque type ResponseState = mixed;
|
|
export opaque type FormatContext = mixed;
|
|
export opaque type SuspenseBoundaryID = mixed;
|
|
|
|
export const isPrimaryRenderer = false;
|
|
|
|
export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
|
|
export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID =
|
|
$$$hostConfig.UNINITIALIZED_SUSPENSE_BOUNDARY_ID;
|
|
export const assignSuspenseBoundaryID = $$$hostConfig.assignSuspenseBoundaryID;
|
|
export const makeId = $$$hostConfig.makeId;
|
|
export const pushTextInstance = $$$hostConfig.pushTextInstance;
|
|
export const pushStartInstance = $$$hostConfig.pushStartInstance;
|
|
export const pushEndInstance = $$$hostConfig.pushEndInstance;
|
|
export const pushStartCompletedSuspenseBoundary =
|
|
$$$hostConfig.pushStartCompletedSuspenseBoundary;
|
|
export const pushEndCompletedSuspenseBoundary =
|
|
$$$hostConfig.pushEndCompletedSuspenseBoundary;
|
|
export const pushSegmentFinale = $$$hostConfig.pushSegmentFinale;
|
|
export const writeCompletedRoot = $$$hostConfig.writeCompletedRoot;
|
|
export const writePlaceholder = $$$hostConfig.writePlaceholder;
|
|
export const writeStartCompletedSuspenseBoundary =
|
|
$$$hostConfig.writeStartCompletedSuspenseBoundary;
|
|
export const writeStartPendingSuspenseBoundary =
|
|
$$$hostConfig.writeStartPendingSuspenseBoundary;
|
|
export const writeStartClientRenderedSuspenseBoundary =
|
|
$$$hostConfig.writeStartClientRenderedSuspenseBoundary;
|
|
export const writeEndCompletedSuspenseBoundary =
|
|
$$$hostConfig.writeEndCompletedSuspenseBoundary;
|
|
export const writeEndPendingSuspenseBoundary =
|
|
$$$hostConfig.writeEndPendingSuspenseBoundary;
|
|
export const writeEndClientRenderedSuspenseBoundary =
|
|
$$$hostConfig.writeEndClientRenderedSuspenseBoundary;
|
|
export const writeStartSegment = $$$hostConfig.writeStartSegment;
|
|
export const writeEndSegment = $$$hostConfig.writeEndSegment;
|
|
export const writeCompletedSegmentInstruction =
|
|
$$$hostConfig.writeCompletedSegmentInstruction;
|
|
export const writeCompletedBoundaryInstruction =
|
|
$$$hostConfig.writeCompletedBoundaryInstruction;
|
|
export const writeClientRenderBoundaryInstruction =
|
|
$$$hostConfig.writeClientRenderBoundaryInstruction;
|