refactor(core): add skipped defer blocks count to ngDevMode (angular#59188)

This adds the skipped defer blocks to the counts in ngDevMode and the logged hydration information.

PR Close angular#59188

Author: thePunderWoman

packages/core/src/hydration/annotate.ts

@@ -391,12 +391,12 @@ function serializeLContainer(
       // If this is a defer block, serialize extra info.
       if (isDeferBlock(lView[TVIEW], tNode)) {
         const lDetails = getLDeferBlockDetails(lView, tNode);
+        const tDetails = getTDeferBlockDetails(lView[TVIEW], tNode);
 
-        if (context.isIncrementalHydrationEnabled) {
+        if (context.isIncrementalHydrationEnabled && tDetails.hydrateTriggers !== null) {
           const deferBlockId = `d${context.deferBlocks.size}`;
 
-          const tDetails = getTDeferBlockDetails(lView[TVIEW], tNode);
-          if (tDetails.hydrateTriggers?.has(DeferBlockTrigger.Never)) {
+          if (tDetails.hydrateTriggers.has(DeferBlockTrigger.Never)) {
             isHydrateNeverBlock = true;
           }
 
@@ -408,9 +408,13 @@ function serializeLContainer(
             [DEFER_PARENT_BLOCK_ID]: parentDeferBlockId,
             [NUM_ROOT_NODES]: rootNodes.length,
             [DEFER_BLOCK_STATE]: lDetails[CURRENT_DEFER_BLOCK_STATE],
-            [DEFER_HYDRATE_TRIGGERS]: serializeHydrateTriggers(tDetails.hydrateTriggers),
           };
 
+          const serializedTriggers = serializeHydrateTriggers(tDetails.hydrateTriggers);
+          if (serializedTriggers.length > 0) {
+            deferBlockInfo[DEFER_HYDRATE_TRIGGERS] = serializedTriggers;
+          }
+
           context.deferBlocks.set(deferBlockId, deferBlockInfo);
 
           const node = unwrapRNode(lContainer);
@@ -471,11 +475,8 @@ function serializeLContainer(
 }
 
 function serializeHydrateTriggers(
-  triggerMap: Map<DeferBlockTrigger, HydrateTriggerDetails | null> | null,
-): (DeferBlockTrigger | SerializedTriggerDetails)[] | null {
-  if (triggerMap === null) {
-    return null;
-  }
+  triggerMap: Map<DeferBlockTrigger, HydrateTriggerDetails | null>,
+): (DeferBlockTrigger | SerializedTriggerDetails)[] {
   const serializableDeferBlockTrigger = new Set<DeferBlockTrigger>([
     DeferBlockTrigger.Idle,
     DeferBlockTrigger.Immediate,

packages/core/src/hydration/api.ts

@@ -44,8 +44,10 @@ import {
 } from './tokens';
 import {
   appendDeferBlocksToJSActionMap,
+  countBlocksSkippedByHydration,
   enableRetrieveDeferBlockDataImpl,
   enableRetrieveHydrationInfoImpl,
+  isIncrementalHydrationEnabled,
   NGH_DATA_KEY,
   processBlockData,
   SSR_CONTENT_INTEGRITY_MARKER,
@@ -143,6 +145,9 @@ function printHydrationStats(injector: Injector) {
     `Angular hydrated ${ngDevMode!.hydratedComponents} component(s) ` +
     `and ${ngDevMode!.hydratedNodes} node(s), ` +
     `${ngDevMode!.componentsSkippedHydration} component(s) were skipped. ` +
+    (isIncrementalHydrationEnabled(injector)
+      ? `${ngDevMode!.deferBlocksWithIncrementalHydration} defer block(s) were configured to use incremental hydration. `
+      : '') +
     `Learn more at https://angular.dev/guide/hydration.`;
   // tslint:disable-next-line:no-console
   console.log(message);
@@ -282,6 +287,7 @@ export function withDomHydration(): EnvironmentProviders {
               whenStableWithTimeout(appRef, injector).then(() => {
                 cleanupDehydratedViews(appRef);
                 if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                  countBlocksSkippedByHydration(injector);
                   printHydrationStats(injector);
                 }
               });

packages/core/src/hydration/interfaces.ts

@@ -177,7 +177,7 @@ export interface SerializedDeferBlock {
    * The list of triggers that exist for incremental hydration, based on the
    * `Trigger` enum.
    */
-  [DEFER_HYDRATE_TRIGGERS]: (DeferBlockTrigger | SerializedTriggerDetails)[] | null;
+  [DEFER_HYDRATE_TRIGGERS]?: (DeferBlockTrigger | SerializedTriggerDetails)[];
 }
 
 export interface SerializedTriggerDetails {

packages/core/src/hydration/utils.ts

@@ -135,7 +135,6 @@ export function retrieveHydrationInfoImpl(
   const remainingNgh = isRootView ? componentViewNgh : rootNgh;
 
   let data: SerializedView = {};
-  let nghDeferData: {[key: string]: SerializedDeferBlock} | undefined;
   // 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
   // from the TransferState in this case.
@@ -144,8 +143,6 @@ export function retrieveHydrationInfoImpl(
     if (transferState !== null) {
       const nghData = transferState.get(NGH_DATA_KEY, []);
 
-      nghDeferData = transferState.get(NGH_DEFER_BLOCKS_KEY, {});
-
       // The nghAttrValue is always a number referencing an index
       // in the hydration TransferState data.
       data = nghData[Number(nghAttrValue)];
@@ -344,6 +341,14 @@ export function markRNodeAsSkippedByHydration(node: RNode) {
   ngDevMode.componentsSkippedHydration++;
 }
 
+export function countBlocksSkippedByHydration(injector: Injector) {
+  const transferState = injector.get(TransferState);
+  const nghDeferData = transferState.get(NGH_DEFER_BLOCKS_KEY, {});
+  if (ngDevMode) {
+    ngDevMode.deferBlocksWithIncrementalHydration = Object.keys(nghDeferData).length;
+  }
+}
+
 export function markRNodeAsHavingHydrationMismatch(
   node: RNode,
   expectedNodeDetails: string | null = null,

packages/core/src/util/ng_dev_mode.ts

@@ -54,6 +54,7 @@ declare global {
     dehydratedViewsRemoved: number;
     dehydratedViewsCleanupRuns: number;
     componentsSkippedHydration: number;
+    deferBlocksWithIncrementalHydration: number;
   }
 }
 
@@ -88,6 +89,7 @@ export function ngDevModeResetPerfCounters(): NgDevModePerfCounters {
     dehydratedViewsRemoved: 0,
     dehydratedViewsCleanupRuns: 0,
     componentsSkippedHydration: 0,
+    deferBlocksWithIncrementalHydration: 0,
   };
 
   // Make sure to refer to ngDevMode as ['ngDevMode'] for closure.

packages/platform-server/test/full_app_hydration_spec.ts

@@ -82,22 +82,14 @@ import {
   withNoopErrorHandler,
   verifyEmptyConsole,
   clearConsole,
+  resetNgDevModeCounters,
 } from './hydration_utils';
 
 import {CLIENT_RENDER_MODE_FLAG} from '@angular/core/src/hydration/api';
 
 describe('platform-server full application hydration integration', () => {
   beforeEach(() => {
-    if (typeof ngDevMode === 'object') {
-      // Reset all ngDevMode counters.
-      for (const metric of Object.keys(ngDevMode!)) {
-        const currentValue = (ngDevMode as unknown as {[key: string]: number | boolean})[metric];
-        if (typeof currentValue === 'number') {
-          // Rest only numeric values, which represent counters.
-          (ngDevMode as unknown as {[key: string]: number | boolean})[metric] = 0;
-        }
-      }
-    }
+    resetNgDevModeCounters();
   });
 
   afterEach(() => {

packages/platform-server/test/hydration_utils.ts

@@ -286,3 +286,17 @@ export function clearConsole(appRef: ApplicationRef) {
   const console = appRef.injector.get(Console) as DebugConsole;
   console.logs = [];
 }
+
+// Clears all the counts in ngDevMode
+export function resetNgDevModeCounters() {
+  if (typeof ngDevMode === 'object') {
+    // Reset all ngDevMode counters.
+    for (const metric of Object.keys(ngDevMode!)) {
+      const currentValue = (ngDevMode as unknown as {[key: string]: number | boolean})[metric];
+      if (typeof currentValue === 'number') {
+        // Rest only numeric values, which represent counters.
+        (ngDevMode as unknown as {[key: string]: number | boolean})[metric] = 0;
+      }
+    }
+  }
+}