@angular/core 16.2.0-rc.0 → 16.2.0

package/fesm2022/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.2.0-rc.0
+ * @license Angular v16.2.0
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -6547,6 +6547,7 @@ const PLATFORM_ID = new InjectionToken('Platform ID', {
  * A [DI token](guide/glossary#di-token "DI token definition") that indicates the root directory of
  * the application
  * @publicApi
+ * @deprecated
  */
 const PACKAGE_ROOT_URL = new InjectionToken('Application Packages Root URL');
 // We keep this token here, rather than the animations package, so that modules that only care
@@ -8559,7 +8560,7 @@ function createElementNode(renderer, name, namespace) {
  * @param tView The `TView' of the `LView` from which elements should be added or removed
  * @param lView The view from which elements should be added or removed
  */
-function removeViewFromContainer(tView, lView) {
+function removeViewFromDOM(tView, lView) {
     const renderer = lView[RENDERER];
     applyView(tView, lView, renderer, 2 /* WalkTNodeTreeAction.Detach */, null, null);
     lView[HOST] = null;
@@ -8579,7 +8580,7 @@ function removeViewFromContainer(tView, lView) {
  * @param parentNativeNode The parent `RElement` where it should be inserted into.
  * @param beforeNode The node before which elements should be added, if insert mode
  */
-function addViewToContainer(tView, parentTNode, renderer, lView, parentNativeNode, beforeNode) {
+function addViewToDOM(tView, parentTNode, renderer, lView, parentNativeNode, beforeNode) {
     lView[HOST] = parentNativeNode;
     lView[T_HOST] = parentTNode;
     applyView(tView, lView, renderer, 1 /* WalkTNodeTreeAction.Insert */, parentNativeNode, beforeNode);
@@ -8590,7 +8591,7 @@ function addViewToContainer(tView, parentTNode, renderer, lView, parentNativeNod
  * @param tView The `TView' of the `LView` to be detached
  * @param lView the `LView` to be detached.
  */
-function renderDetachView(tView, lView) {
+function detachViewFromDOM(tView, lView) {
     applyView(tView, lView, lView[RENDERER], 2 /* WalkTNodeTreeAction.Detach */, null, null);
 }
 /**
@@ -8752,7 +8753,7 @@ function detachView(lContainer, removeIndex) {
             lContainer[indexInContainer - 1][NEXT] = viewToDetach[NEXT];
         }
         const removedLView = removeFromArray(lContainer, CONTAINER_HEADER_OFFSET + removeIndex);
-        removeViewFromContainer(viewToDetach[TVIEW], viewToDetach);
+        removeViewFromDOM(viewToDetach[TVIEW], viewToDetach);
         // notify query that a view has been removed
         const lQueries = removedLView[QUERIES];
         if (lQueries !== null) {
@@ -10517,6 +10518,10 @@ const NGH_DATA_KEY = makeStateKey(TRANSFER_STATE_TOKEN_ID);
  * state that contains the necessary hydration info for this component.
  */
 const NGH_ATTR_NAME = 'ngh';
+/**
+ * Marker used in a comment node to ensure hydration content integrity
+ */
+const SSR_CONTENT_INTEGRITY_MARKER = 'nghm';
 /**
  * Reference to a function that reads `ngh` attribute value from a given RNode
  * and retrieves hydration information from the TransferState using that value
@@ -10524,12 +10529,30 @@ const NGH_ATTR_NAME = 'ngh';
  *
  * @param rNode Component's host element.
  * @param injector Injector that this component has access to.
+ * @param isRootView Specifies whether we trying to read hydration info for the root view.
  */
-let _retrieveHydrationInfoImpl = (rNode, injector) => null;
-function retrieveHydrationInfoImpl(rNode, injector) {
-    const nghAttrValue = rNode.getAttribute(NGH_ATTR_NAME);
+let _retrieveHydrationInfoImpl = (rNode, injector, isRootView) => null;
+function retrieveHydrationInfoImpl(rNode, injector, isRootView = false) {
+    let nghAttrValue = rNode.getAttribute(NGH_ATTR_NAME);
     if (nghAttrValue == null)
         return null;
+    // 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 [componentViewNgh, rootViewNgh] = nghAttrValue.split('|');
+    nghAttrValue = isRootView ? rootViewNgh : componentViewNgh;
+    if (!nghAttrValue)
+        return null;
+    // We've read one of the ngh ids, keep the remaining one, so that
+    // we can set it back on the DOM element.
+    const remainingNgh = isRootView ? componentViewNgh : (rootViewNgh ? `|${rootViewNgh}` : '');
     let data = {};
     // An element might have an empty `ngh` attribute value (e.g. `<comp ngh="" />`),
     // which means that no special annotations are required. Do not attempt to read
@@ -10551,9 +10574,29 @@ function retrieveHydrationInfoImpl(rNode, injector) {
         data,
         firstChild: rNode.firstChild ?? null,
     };
-    // The `ngh` attribute is cleared from the DOM node now
-    // that the data has been retrieved.
-    rNode.removeAttribute(NGH_ATTR_NAME);
+    if (isRootView) {
+        // If there is hydration info present for the root view, it means that there was
+        // a ViewContainerRef injected in the root component. The root component host element
+        // acted as an anchor node in this scenario. As a result, the DOM nodes that represent
+        // embedded views in this ViewContainerRef are located as siblings to the host node,
+        // i.e. `<app-root /><#VIEW1><#VIEW2>...<!--container-->`. In this case, the current
+        // node becomes the first child of this root view and the next sibling is the first
+        // element in the DOM segment.
+        dehydratedView.firstChild = rNode;
+        // We use `0` here, since this is the slot (right after the HEADER_OFFSET)
+        // where a component LView or an LContainer is located in a root LView.
+        setSegmentHead(dehydratedView, 0, rNode.nextSibling);
+    }
+    if (remainingNgh) {
+        // If we have only used one of the ngh ids, store the remaining one
+        // back on this RNode.
+        rNode.setAttribute(NGH_ATTR_NAME, remainingNgh);
+    }
+    else {
+        // The `ngh` attribute is cleared from the DOM node now
+        // that the data has been retrieved for all indices.
+        rNode.removeAttribute(NGH_ATTR_NAME);
+    }
     // Note: don't check whether this node was claimed for hydration,
     // because this node might've been previously claimed while processing
     // template instructions.
@@ -10571,14 +10614,16 @@ function enableRetrieveHydrationInfoImpl() {
  * Retrieves hydration info by reading the value from the `ngh` attribute
  * and accessing a corresponding slot in TransferState storage.
  */
-function retrieveHydrationInfo(rNode, injector) {
-    return _retrieveHydrationInfoImpl(rNode, injector);
+function retrieveHydrationInfo(rNode, injector, isRootView = false) {
+    return _retrieveHydrationInfoImpl(rNode, injector, isRootView);
 }
 /**
- * Retrieves an instance of a component LView from a given ViewRef.
- * Returns an instance of a component LView or `null` in case of an embedded view.
+ * Retrieves the necessary object from a given ViewRef to serialize:
+ *  - an LView for component views
+ *  - an LContainer for cases when component acts as a ViewContainerRef anchor
+ *  - `null` in case of an embedded view
  */
-function getComponentLViewForHydration(viewRef) {
+function getLNodeForHydration(viewRef) {
     // Reading an internal field from `ViewRef` instance.
     let lView = viewRef._lView;
     const tView = lView[TVIEW];
@@ -10592,12 +10637,6 @@ function getComponentLViewForHydration(viewRef) {
     if (isRootView(lView)) {
         lView = lView[HEADER_OFFSET];
     }
-    // If a `ViewContainerRef` was injected in a component class, this resulted
-    // in an LContainer creation at that location. In this case, the component
-    // LView is in the LContainer's `HOST` slot.
-    if (isLContainer(lView)) {
-        lView = lView[HOST];
-    }
     return lView;
 }
 function getTextNodeContent(node) {
@@ -10900,7 +10939,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('16.2.0-rc.0');
+const VERSION = new Version('16.2.0');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -13638,7 +13677,7 @@ class ViewRef {
     }
     detachFromAppRef() {
         this._appRef = null;
-        renderDetachView(this._lView[TVIEW], this._lView);
+        detachViewFromDOM(this._lView[TVIEW], this._lView);
     }
     attachToAppRef(appRef) {
         if (this._attachedToViewContainer) {
@@ -13797,9 +13836,13 @@ class ComponentFactory extends ComponentFactory$1 {
         const nonSignalFlags = this.componentDef.onPush ? 64 /* LViewFlags.Dirty */ | 512 /* LViewFlags.IsRoot */ :
             16 /* LViewFlags.CheckAlways */ | 512 /* LViewFlags.IsRoot */;
         const rootFlags = this.componentDef.signals ? signalFlags : nonSignalFlags;
+        let hydrationInfo = null;
+        if (hostRNode !== null) {
+            hydrationInfo = retrieveHydrationInfo(hostRNode, rootViewInjector, true /* isRootView */);
+        }
         // Create the root view. Uses empty TView and ContentTemplate.
         const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null, null);
-        const rootLView = createLView(null, rootTView, null, rootFlags, null, null, environment, hostRenderer, rootViewInjector, null, null);
+        const rootLView = createLView(null, rootTView, null, rootFlags, null, null, environment, hostRenderer, rootViewInjector, null, hydrationInfo);
         // rootView is the parent when bootstrapping
         // TODO(misko): it looks like we are entering view here but we don't really need to as
         // `renderView` does that. However as the code is written it is needed because
@@ -13926,7 +13969,7 @@ function createRootComponentTNode(lView, rNode) {
 function createRootComponentView(tNode, hostRNode, rootComponentDef, rootDirectives, rootView, environment, hostRenderer) {
     const tView = rootView[TVIEW];
     applyRootComponentStyling(rootDirectives, tNode, hostRNode, hostRenderer);
-    // Hydration info is on the host element and needs to be retreived
+    // Hydration info is on the host element and needs to be retrieved
     // and passed to the component LView.
     let hydrationInfo = null;
     if (hostRNode !== null) {
@@ -23709,6 +23752,57 @@ class QueryList {
     }
 }
 
+function createAndRenderEmbeddedLView(declarationLView, templateTNode, context, options) {
+    const embeddedTView = templateTNode.tView;
+    ngDevMode && assertDefined(embeddedTView, 'TView must be defined for a template node.');
+    ngDevMode && assertTNodeForLView(templateTNode, declarationLView);
+    // Embedded views follow the change detection strategy of the view they're declared in.
+    const isSignalView = declarationLView[FLAGS] & 4096 /* LViewFlags.SignalView */;
+    const viewFlags = isSignalView ? 4096 /* LViewFlags.SignalView */ : 16 /* LViewFlags.CheckAlways */;
+    const embeddedLView = createLView(declarationLView, embeddedTView, context, viewFlags, null, templateTNode, null, null, null, options?.injector ?? null, options?.hydrationInfo ?? null);
+    const declarationLContainer = declarationLView[templateTNode.index];
+    ngDevMode && assertLContainer(declarationLContainer);
+    embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
+    const declarationViewLQueries = declarationLView[QUERIES];
+    if (declarationViewLQueries !== null) {
+        embeddedLView[QUERIES] = declarationViewLQueries.createEmbeddedView(embeddedTView);
+    }
+    // execute creation mode of a view
+    renderView(embeddedTView, embeddedLView, context);
+    return embeddedLView;
+}
+function getLViewFromLContainer(lContainer, index) {
+    const adjustedIndex = CONTAINER_HEADER_OFFSET + index;
+    // avoid reading past the array boundaries
+    if (adjustedIndex < lContainer.length) {
+        const lView = lContainer[adjustedIndex];
+        ngDevMode && assertLView(lView);
+        return lView;
+    }
+    return undefined;
+}
+function addLViewToLContainer(lContainer, lView, index, addToDOM = true) {
+    const tView = lView[TVIEW];
+    // insert to the view tree so the new view can be change-detected
+    insertView(tView, lView, lContainer, index);
+    // insert to the view to the DOM tree
+    if (addToDOM) {
+        const beforeNode = getBeforeNodeForView(index, lContainer);
+        const renderer = lView[RENDERER];
+        const parentRNode = nativeParentNode(renderer, lContainer[NATIVE]);
+        if (parentRNode !== null) {
+            addViewToDOM(tView, lContainer[T_HOST], renderer, lView, parentRNode, beforeNode);
+        }
+    }
+}
+function removeLViewFromLContainer(lContainer, index) {
+    const lView = detachView(lContainer, index);
+    if (lView !== undefined) {
+        destroyLView(lView[TVIEW], lView);
+    }
+    return lView;
+}
+
 /**
  * Represents an embedded template that can be used to instantiate embedded views.
  * To instantiate embedded views based on a template, use the `ViewContainerRef`
@@ -23754,25 +23848,13 @@ const R3TemplateRef = class TemplateRef extends ViewEngineTemplateRef {
         return this._declarationTContainer.tView?.ssrId || null;
     }
     createEmbeddedView(context, injector) {
-        return this.createEmbeddedViewImpl(context, injector, null);
+        return this.createEmbeddedViewImpl(context, injector);
     }
     /**
      * @internal
      */
     createEmbeddedViewImpl(context, injector, hydrationInfo) {
-        // Embedded views follow the change detection strategy of the view they're declared in.
-        const isSignalView = this._declarationLView[FLAGS] & 4096 /* LViewFlags.SignalView */;
-        const viewFlags = isSignalView ? 4096 /* LViewFlags.SignalView */ : 16 /* LViewFlags.CheckAlways */;
-        const embeddedTView = this._declarationTContainer.tView;
-        const embeddedLView = createLView(this._declarationLView, embeddedTView, context, viewFlags, null, embeddedTView.declTNode, null, null, null, injector || null, hydrationInfo || null);
-        const declarationLContainer = this._declarationLView[this._declarationTContainer.index];
-        ngDevMode && assertLContainer(declarationLContainer);
-        embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
-        const declarationViewLQueries = this._declarationLView[QUERIES];
-        if (declarationViewLQueries !== null) {
-            embeddedLView[QUERIES] = declarationViewLQueries.createEmbeddedView(embeddedTView);
-        }
-        renderView(embeddedTView, embeddedLView, context);
+        const embeddedLView = createAndRenderEmbeddedLView(this._declarationLView, this._declarationTContainer, context, { injector, hydrationInfo });
         return new ViewRef(embeddedLView);
     }
 };
@@ -23869,11 +23951,20 @@ function cleanupLView(lView) {
 function cleanupDehydratedViews(appRef) {
     const viewRefs = appRef._views;
     for (const viewRef of viewRefs) {
-        const lView = getComponentLViewForHydration(viewRef);
+        const lNode = getLNodeForHydration(viewRef);
         // An `lView` might be `null` if a `ViewRef` represents
         // an embedded view (not a component view).
-        if (lView !== null && lView[HOST] !== null) {
-            cleanupLView(lView);
+        if (lNode !== null && lNode[HOST] !== null) {
+            if (isLView(lNode)) {
+                cleanupLView(lNode);
+            }
+            else {
+                // Cleanup in the root component view
+                const componentLView = lNode[HOST];
+                cleanupLView(componentLView);
+                // Cleanup in all views within this view container
+                cleanupLContainer(lNode);
+            }
             ngDevMode && ngDevMode.dehydratedViewsCleanupRuns++;
         }
     }
@@ -24155,16 +24246,7 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
         // Logical operation of adding `LView` to `LContainer`
         const adjustedIdx = this._adjustIndex(index);
         const lContainer = this._lContainer;
-        insertView(tView, lView, lContainer, adjustedIdx);
-        // Physical operation of adding the DOM nodes.
-        if (!skipDomInsertion) {
-            const beforeNode = getBeforeNodeForView(adjustedIdx, lContainer);
-            const renderer = lView[RENDERER];
-            const parentRNode = nativeParentNode(renderer, lContainer[NATIVE]);
-            if (parentRNode !== null) {
-                addViewToContainer(tView, lContainer[T_HOST], renderer, lView, parentRNode, beforeNode);
-            }
-        }
+        addLViewToLContainer(lContainer, lView, adjustedIdx, !skipDomInsertion);
         viewRef.attachToViewContainerRef();
         addToArray(getOrCreateViewRefs(lContainer), adjustedIdx, viewRef);
         return viewRef;