package.esm2022.src.hydration.annotate.mjs Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Show all versions of core Show documentation
Angular - the core framework
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import { isDetachedByI18n } from '../i18n/utils';
import { ViewEncapsulation } from '../metadata';
import { assertTNode } from '../render3/assert';
import { collectNativeNodes, collectNativeNodesInLContainer } from '../render3/collect_native_nodes';
import { getComponentDef } from '../render3/definition';
import { CONTAINER_HEADER_OFFSET } from '../render3/interfaces/container';
import { isLetDeclaration, isTNodeShape } from '../render3/interfaces/node';
import { hasI18n, isComponentHost, isLContainer, isProjectionTNode, isRootView, } from '../render3/interfaces/type_checks';
import { CONTEXT, HEADER_OFFSET, HOST, PARENT, RENDERER, TVIEW, } from '../render3/interfaces/view';
import { unwrapLView, unwrapRNode } from '../render3/util/view_utils';
import { TransferState } from '../transfer_state';
import { unsupportedProjectionOfDomNodes } from './error_handling';
import { collectDomEventsInfo } from './event_replay';
import { setJSActionAttributes } from '../event_delegation_utils';
import { getOrComputeI18nChildren, isI18nHydrationEnabled, isI18nHydrationSupportEnabled, trySerializeI18nBlock, } from './i18n';
import { CONTAINERS, DISCONNECTED_NODES, ELEMENT_CONTAINERS, I18N_DATA, MULTIPLIER, NODES, NUM_ROOT_NODES, TEMPLATE_ID, TEMPLATES, } from './interfaces';
import { calcPathForNode, isDisconnectedNode } from './node_lookup_utils';
import { isInSkipHydrationBlock, SKIP_HYDRATION_ATTR_NAME } from './skip_hydration';
import { EVENT_REPLAY_ENABLED_DEFAULT, IS_EVENT_REPLAY_ENABLED } from './tokens';
import { getLNodeForHydration, NGH_ATTR_NAME, NGH_DATA_KEY, processTextNodeBeforeSerialization, } from './utils';
/**
* A collection that tracks all serialized views (`ngh` DOM annotations)
* to avoid duplication. An attempt to add a duplicate view results in the
* collection returning the index of the previously collected serialized view.
* This reduces the number of annotations needed for a given page.
*/
class SerializedViewCollection {
constructor() {
this.views = [];
this.indexByContent = new Map();
}
add(serializedView) {
const viewAsString = JSON.stringify(serializedView);
if (!this.indexByContent.has(viewAsString)) {
const index = this.views.length;
this.views.push(serializedView);
this.indexByContent.set(viewAsString, index);
return index;
}
return this.indexByContent.get(viewAsString);
}
getAll() {
return this.views;
}
}
/**
* Global counter that is used to generate a unique id for TViews
* during the serialization process.
*/
let tViewSsrId = 0;
/**
* Generates a unique id for a given TView and returns this id.
* The id is also stored on this instance of a TView and reused in
* subsequent calls.
*
* This id is needed to uniquely identify and pick up dehydrated views
* at runtime.
*/
function getSsrId(tView) {
if (!tView.ssrId) {
tView.ssrId = `t${tViewSsrId++}`;
}
return tView.ssrId;
}
/**
* Computes the number of root nodes in a given view
* (or child nodes in a given container if a tNode is provided).
*/
function calcNumRootNodes(tView, lView, tNode) {
const rootNodes = [];
collectNativeNodes(tView, lView, tNode, rootNodes);
return rootNodes.length;
}
/**
* Computes the number of root nodes in all views in a given LContainer.
*/
function calcNumRootNodesInLContainer(lContainer) {
const rootNodes = [];
collectNativeNodesInLContainer(lContainer, rootNodes);
return rootNodes.length;
}
/**
* Annotates root level component's LView for hydration,
* see `annotateHostElementForHydration` for additional information.
*/
function annotateComponentLViewForHydration(lView, context) {
const hostElement = lView[HOST];
// Root elements might also be annotated with the `ngSkipHydration` attribute,
// check if it's present before starting the serialization process.
if (hostElement && !hostElement.hasAttribute(SKIP_HYDRATION_ATTR_NAME)) {
return annotateHostElementForHydration(hostElement, lView, context);
}
return null;
}
/**
* Annotates root level LContainer for hydration. This happens when a root component
* injects ViewContainerRef, thus making the component an anchor for a view container.
* This function serializes the component itself as well as all views from the view
* container.
*/
function annotateLContainerForHydration(lContainer, context) {
const componentLView = unwrapLView(lContainer[HOST]);
// Serialize the root component itself.
const componentLViewNghIndex = annotateComponentLViewForHydration(componentLView, context);
if (componentLViewNghIndex === null) {
// Component was not serialized (for example, if hydration was skipped by adding
// the `ngSkipHydration` attribute or this component uses i18n blocks in the template,
// but `withI18nSupport()` was not added), avoid annotating host element with the `ngh`
// attribute.
return;
}
const hostElement = unwrapRNode(componentLView[HOST]);
// Serialize all views within this view container.
const rootLView = lContainer[PARENT];
const rootLViewNghIndex = annotateHostElementForHydration(hostElement, rootLView, context);
const renderer = componentLView[RENDERER];
// For cases when a root component also acts as an anchor node for a ViewContainerRef
// (for example, when ViewContainerRef is injected in a root component), there is a need
// to serialize information about the component itself, as well as an LContainer that
// represents this ViewContainerRef. Effectively, we need to serialize 2 pieces of info:
// (1) hydration info for the root component itself and (2) hydration info for the
// ViewContainerRef instance (an LContainer). Each piece of information is included into
// the hydration data (in the TransferState object) separately, thus we end up with 2 ids.
// Since we only have 1 root element, we encode both bits of info into a single string:
// ids are separated by the `|` char (e.g. `10|25`, where `10` is the ngh for a component view
// and 25 is the `ngh` for a root view which holds LContainer).
const finalIndex = `${componentLViewNghIndex}|${rootLViewNghIndex}`;
renderer.setAttribute(hostElement, NGH_ATTR_NAME, finalIndex);
}
/**
* Annotates all components bootstrapped in a given ApplicationRef
* with info needed for hydration.
*
* @param appRef An instance of an ApplicationRef.
* @param doc A reference to the current Document instance.
* @return event types that need to be replayed
*/
export function annotateForHydration(appRef, doc) {
const injector = appRef.injector;
const isI18nHydrationEnabledVal = isI18nHydrationEnabled(injector);
const serializedViewCollection = new SerializedViewCollection();
const corruptedTextNodes = new Map();
const viewRefs = appRef._views;
const shouldReplayEvents = injector.get(IS_EVENT_REPLAY_ENABLED, EVENT_REPLAY_ENABLED_DEFAULT);
const eventTypesToReplay = {
regular: new Set(),
capture: new Set(),
};
for (const viewRef of viewRefs) {
const lNode = getLNodeForHydration(viewRef);
// An `lView` might be `null` if a `ViewRef` represents
// an embedded view (not a component view).
if (lNode !== null) {
const context = {
serializedViewCollection,
corruptedTextNodes,
isI18nHydrationEnabled: isI18nHydrationEnabledVal,
i18nChildren: new Map(),
eventTypesToReplay,
shouldReplayEvents,
};
if (isLContainer(lNode)) {
annotateLContainerForHydration(lNode, context);
}
else {
annotateComponentLViewForHydration(lNode, context);
}
insertCorruptedTextNodeMarkers(corruptedTextNodes, doc);
}
}
// Note: we *always* include hydration info key and a corresponding value
// into the TransferState, even if the list of serialized views is empty.
// This is needed as a signal to the client that the server part of the
// hydration logic was setup and enabled correctly. Otherwise, if a client
// hydration doesn't find a key in the transfer state - an error is produced.
const serializedViews = serializedViewCollection.getAll();
const transferState = injector.get(TransferState);
transferState.set(NGH_DATA_KEY, serializedViews);
return eventTypesToReplay;
}
/**
* Serializes the lContainer data into a list of SerializedView objects,
* that represent views within this lContainer.
*
* @param lContainer the lContainer we are serializing
* @param context the hydration context
* @returns an array of the `SerializedView` objects
*/
function serializeLContainer(lContainer, context) {
const views = [];
let lastViewAsString = '';
for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
let childLView = lContainer[i];
let template;
let numRootNodes;
let serializedView;
if (isRootView(childLView)) {
// If this is a root view, get an LView for the underlying component,
// because it contains information about the view to serialize.
childLView = childLView[HEADER_OFFSET];
// If we have an LContainer at this position, this indicates that the
// host element was used as a ViewContainerRef anchor (e.g. a `ViewContainerRef`
// was injected within the component class). This case requires special handling.
if (isLContainer(childLView)) {
// Calculate the number of root nodes in all views in a given container
// and increment by one to account for an anchor node itself, i.e. in this
// scenario we'll have a layout that would look like this:
// ``
// appears at projection location), skip annotations for this content
// since all DOM nodes in this projection were handled while processing
// a parent lView, which contains those nodes.
if (!isProjectionTNode(projectionHeadTNode) &&
!isInSkipHydrationBlock(projectionHeadTNode)) {
if (isDisconnectedNode(projectionHeadTNode, lView)) {
// Check whether this node is connected, since we may have a TNode
// in the data structure as a projection segment head, but the
// content projection slot might be disabled (e.g.
// case
if (tNode.type & 8 /* TNodeType.ElementContainer */) {
// An is represented by the number of
// top-level nodes. This information is needed to skip over
// those nodes to reach a corresponding anchor node (comment node).
ngh[ELEMENT_CONTAINERS] ??= {};
ngh[ELEMENT_CONTAINERS][noOffsetIndex] = calcNumRootNodes(tView, lView, tNode.child);
}
else if (tNode.type & (16 /* TNodeType.Projection */ | 128 /* TNodeType.LetDeclaration */)) {
// Current TNode represents an `` slot or `@let` declaration,
// thus it has no DOM elements associated with it, so the **next sibling**
// node would not be able to find an anchor. In this case, use full path instead.
let nextTNode = tNode.next;
// Skip over all `` slots and `@let` declarations in a row.
while (nextTNode !== null &&
nextTNode.type & (16 /* TNodeType.Projection */ | 128 /* TNodeType.LetDeclaration */)) {
nextTNode = nextTNode.next;
}
if (nextTNode && !isInSkipHydrationBlock(nextTNode)) {
// Handle a tNode after the `` slot.
appendSerializedNodePath(ngh, nextTNode, lView, i18nChildren);
}
}
else if (tNode.type & 1 /* TNodeType.Text */) {
const rNode = unwrapRNode(lView[i]);
processTextNodeBeforeSerialization(context, rNode);
}
}
}
return ngh;
}
/**
* Serializes node location in cases when it's needed, specifically:
*
* 1. If `tNode.projectionNext` is different from `tNode.next` - it means that
* the next `tNode` after projection is different from the one in the original
* template. Since hydration relies on `tNode.next`, this serialized info
* is required to help runtime code find the node at the correct location.
* 2. In certain content projection-based use-cases, it's possible that only
* a content of a projected element is rendered. In this case, content nodes
* require an extra annotation, since runtime logic can't rely on parent-child
* connection to identify the location of a node.
*/
function conditionallyAnnotateNodePath(ngh, tNode, lView, excludedParentNodes) {
if (isProjectionTNode(tNode)) {
// Do not annotate projection nodes (
© 2015 - 2024 Weber Informatics LLC | Privacy Policy