feat(devtools): add transfer state tab (#62465)

Add transfer state tab, which is taking transfer state script by using APP_ID. Created internal api ɵgetTransferState to retrieve transfer state value from app into devtools app.

PR Close #62465

Author: Avcharov

devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts

@@ -21,6 +21,7 @@ import {
   SerializedInjector,
   SerializedProviderRecord,
   SignalNodePosition,
+  TransferStateValue,
 } from '../../../protocol';
 import {debounceTime} from 'rxjs/operators';
 import {
@@ -105,6 +106,8 @@ export const subscribeToClientEvents = (
 
   messageBus.on('logProvider', logProvider);
 
+  messageBus.on('getTransferState', getTransferStateCallback(messageBus));
+
   messageBus.on('log', ({message, level}) => {
     console[level](`[Angular DevTools]: ${message}`);
   });
@@ -662,6 +665,43 @@ const logProvider = (
   console.groupEnd();
 };
 
+const getTransferStateCallback = (messageBus: MessageBus<Events>) => () => {
+  const ng = ngDebugClient();
+
+  const forest = initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest();
+  if (forest.length === 0) {
+    messageBus.emit('transferStateData', [null]);
+    return;
+  }
+
+  const rootNode = forest[0];
+  if (!rootNode || !rootNode.nativeElement) {
+    messageBus.emit('transferStateData', [null]);
+    return;
+  }
+
+  const injector = getInjectorFromElementNode(rootNode.nativeElement);
+  if (!injector) {
+    messageBus.emit('transferStateData', [null]);
+    return;
+  }
+
+  const transferStateData = (ng.ɵgetTransferState?.(injector) ?? null) as Record<
+    string,
+    TransferStateValue
+  > | null;
+
+  if (
+    transferStateData &&
+    typeof transferStateData === 'object' &&
+    Object.keys(transferStateData).length > 0
+  ) {
+    messageBus.emit('transferStateData', [transferStateData]);
+  } else {
+    messageBus.emit('transferStateData', [null]);
+  }
+};
+
 const getInjectorInstance = (
   serializedInjector: SerializedInjector,
   serializedProvider: SerializedProviderRecord,

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.spec.ts

@@ -12,6 +12,7 @@ import {
   ngDebugProfilerApiIsSupported,
   ngDebugRoutesApiIsSupported,
   ngDebugSignalGraphApiIsSupported,
+  ngDebugTransferStateApiIsSupported,
 } from './ng-debug-api';
 import {Framework} from '../component-tree/core-enums';
 
@@ -134,4 +135,24 @@ describe('ng-debug-api', () => {
       expect(ngDebugSignalGraphApiIsSupported()).toBeFalse();
     });
   });
+
+  describe('ngDebugTransferStateApiIsSupported', () => {
+    beforeEach(() => mockRoot());
+
+    it('should support Transfer State API with getTransferState', () => {
+      (globalThis as any).ng = fakeNgGlobal(Framework.Angular);
+      (globalThis as any).ng.ɵgetTransferState = () => {};
+      expect(ngDebugTransferStateApiIsSupported()).toBeTrue();
+    });
+
+    it('should not support Transfer State API with no getTransferState', () => {
+      (globalThis as any).ng = fakeNgGlobal(Framework.ACX);
+      (globalThis as any).ng.ɵgetTransferState = 'not implemented';
+      expect(ngDebugTransferStateApiIsSupported()).toBeFalse();
+
+      (globalThis as any).ng = fakeNgGlobal(Framework.ACX);
+      (globalThis as any).ng.ɵgetTransferState = undefined;
+      expect(ngDebugTransferStateApiIsSupported()).toBeFalse();
+    });
+  });
 });

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.ts

@@ -81,3 +81,12 @@ export function ngDebugSignalGraphApiIsSupported(): boolean {
   const ng = ngDebugClient();
   return ngDebugApiIsSupported(ng, 'ɵgetSignalGraph');
 }
+
+/**
+ * Checks if transfer state is available.
+ * Transfer state is only relevant when Angular app uses Server-Side Rendering.
+ */
+export function ngDebugTransferStateApiIsSupported(): boolean {
+  const ng = ngDebugClient();
+  return ngDebugApiIsSupported(ng, 'ɵgetTransferState');
+}

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/supported-apis.ts

@@ -12,6 +12,7 @@ import {
   ngDebugProfilerApiIsSupported,
   ngDebugRoutesApiIsSupported,
   ngDebugSignalGraphApiIsSupported,
+  ngDebugTransferStateApiIsSupported,
 } from './ng-debug-api';
 
 /**
@@ -24,11 +25,13 @@ export function getSupportedApis(): SupportedApis {
   const dependencyInjection = ngDebugDependencyInjectionApiIsSupported();
   const routes = ngDebugRoutesApiIsSupported();
   const signals = ngDebugSignalGraphApiIsSupported();
+  const transferState = ngDebugTransferStateApiIsSupported();
 
   return {
     profiler,
     dependencyInjection,
     routes,
     signals,
+    transferState,
   };
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel

@@ -33,6 +33,7 @@ ng_project(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler:profiler_rjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree:router-tree_rjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update:tab-update_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state:transfer-state_rjs",
         "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html

@@ -92,6 +92,11 @@
           [providers]="providers()"
         />
       }
+
+      @let transferStateVisible = activeTab() === 'Transfer State';
+      @defer (when transferStateVisible; prefetch on idle) {
+        <ng-transfer-state [hidden]="!transferStateVisible" />
+      }
     </div>
   }
 </mat-tab-nav-panel>
@@ -137,6 +142,16 @@
         <span class="ng-mat-menu-label-text">Enable Signal Graph (experimental)</span>
       </label>
     }
+    @if (supportedApis().transferState) {
+      <label mat-menu-item disableRipple>
+        <mat-slide-toggle
+          [checked]="transferStateTabEnabled()"
+          (change)="setTransferStateTab($event.checked)"
+        >
+          Show Transfer State Tab</mat-slide-toggle
+        >
+      </label>
+    }
   </div>
 </mat-menu>
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts

@@ -38,9 +38,10 @@ import {DirectiveExplorerComponent} from './directive-explorer/directive-explore
 import {InjectorTreeComponent} from './injector-tree/injector-tree.component';
 import {ProfilerComponent} from './profiler/profiler.component';
 import {RouterTreeComponent} from './router-tree/router-tree.component';
+import {TransferStateComponent} from './transfer-state/transfer-state.component';
 import {TabUpdate} from './tab-update/index';
 
-type Tab = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree';
+type Tab = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree' | 'Transfer State';
 
 @Component({
   selector: 'ng-devtools-tabs',
@@ -59,6 +60,7 @@ type Tab = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree';
     ProfilerComponent,
     RouterTreeComponent,
     InjectorTreeComponent,
+    TransferStateComponent,
     MatSlideToggle,
   ],
   providers: [TabUpdate],
@@ -76,6 +78,7 @@ export class DevToolsTabsComponent {
   readonly routerGraphEnabled = signal(false);
   readonly timingAPIEnabled = signal(false);
   readonly signalGraphEnabled = signal(false);
+  readonly transferStateTabEnabled = signal(false);
 
   readonly componentExplorerView = signal<ComponentExplorerView | null>(null);
   readonly providers = signal<SerializedProviderRecord[]>([]);
@@ -97,6 +100,9 @@ export class DevToolsTabsComponent {
     if (supportedApis.routes && this.routerGraphEnabled() && this.routes().length > 0) {
       tabs.push('Router Tree');
     }
+    if (supportedApis.transferState && this.transferStateTabEnabled()) {
+      tabs.push('Transfer State');
+    }
 
     return tabs;
   });
@@ -199,4 +205,11 @@ export class DevToolsTabsComponent {
   protected setSignalGraph(enabled: boolean): void {
     this.signalGraphEnabled.set(enabled);
   }
+
+  protected setTransferStateTab(enabled: boolean): void {
+    this.transferStateTabEnabled.set(enabled);
+    if (!enabled && this.activeTab() === 'Transfer State') {
+      this.activeTab.set('Components');
+    }
+  }
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/BUILD.bazel

@@ -0,0 +1,30 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+sass_binary(
+    name = "transfer_state_component_styles",
+    src = "transfer-state.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "transfer-state",
+    srcs = [
+        "transfer-state.component.ts",
+    ],
+    angular_assets = [
+        ":transfer-state.component.html",
+        ":transfer_state_component_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/shared/button:button_rjs",
+        "//devtools/projects/ng-devtools/src/lib/shared/utils:utils_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.html

@@ -0,0 +1,137 @@
+<div class="transfer-state-container">
+  <div class="header">
+    <h2>
+      <mat-icon>swap_horiz</mat-icon>
+      Transfer State
+    </h2>
+    <div class="actions">
+      <button ng-button btnType="icon" (click)="refresh()" matTooltip="Refresh transfer state">
+        <mat-icon>refresh</mat-icon>
+      </button>
+    </div>
+  </div>
+
+  @if (isLoading()) {
+    <div class="loading">
+      <mat-icon class="spinning">hourglass_empty</mat-icon>
+      Loading transfer state...
+    </div>
+  } @else if (error()) {
+    <div class="error-card">
+      <div class="card-header">
+        <mat-icon>error</mat-icon>
+        <h3>No Transfer State Found</h3>
+      </div>
+      <div class="card-content">
+        <p>{{ error() }}</p>
+        <p>
+          Transfer state is used in Server-Side Rendering (SSR) to pass data from the server to the
+          client. If you're expecting transfer state data, make sure:
+        </p>
+        <ul>
+          <li>The application is using SSR</li>
+          <li>Transfer state is being used in your components</li>
+          <li>You're inspecting the initial page load (not after client-side navigation)</li>
+        </ul>
+      </div>
+    </div>
+  } @else if (!hasData()) {
+    <div class="empty-card">
+      <div class="card-header">
+        <mat-icon>info</mat-icon>
+        <h3>Transfer State is Empty</h3>
+      </div>
+      <div class="card-content">
+        <p>No transfer state data found on this page.</p>
+        <p>This could be normal if the page doesn't use SSR or doesn't transfer any state.</p>
+      </div>
+    </div>
+  } @else {
+    <div class="transfer-state-content">
+      <div class="summary">
+        <div class="summary-card">
+          <div class="summary-stats">
+            <div class="stat">
+              <span class="stat-value">{{ transferStateItems().length }}</span>
+              <span class="stat-label">Keys</span>
+            </div>
+            <div class="stat">
+              <span class="stat-value">{{ totalSize() }}</span>
+              <span class="stat-label">Total Size</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="table-container">
+        <table mat-table [dataSource]="transferStateItems()" class="transfer-state-table">
+          <!-- Key Column -->
+          <ng-container matColumnDef="key">
+            <th mat-header-cell *matHeaderCellDef>Key</th>
+            <td mat-cell *matCellDef="let item" class="key-cell">
+              <code>{{ item.key }}</code>
+            </td>
+          </ng-container>
+
+          <!-- Type Column -->
+          <ng-container matColumnDef="type">
+            <th mat-header-cell *matHeaderCellDef>Type</th>
+            <td mat-cell *matCellDef="let item">
+              <span class="type-badge type-{{ item.type }}">{{ item.type }}</span>
+            </td>
+          </ng-container>
+
+          <!-- Size Column -->
+          <ng-container matColumnDef="size">
+            <th mat-header-cell *matHeaderCellDef>
+              Size
+              <mat-icon class="info-icon" matTooltip="Uncompressed size">help_outline</mat-icon>
+            </th>
+            <td mat-cell *matCellDef="let item">{{ item.size }}</td>
+          </ng-container>
+
+          <!-- Value Column -->
+          <ng-container matColumnDef="value">
+            <th mat-header-cell *matHeaderCellDef>Value</th>
+            <td mat-cell *matCellDef="let item" class="value-cell">
+              <div class="value-container">
+                <pre
+                  #valuePreview
+                  class="value-preview"
+                  [class.is-expanded]="item.isExpanded"
+                ><code>{{ getFormattedValue(item.value) }}</code></pre>
+                <div class="action-buttons">
+                  @if (isValueLong(valuePreview, item.isExpanded)) {
+                    <button
+                      ng-button
+                      btnType="icon"
+                      size="compact"
+                      class="expand-button"
+                      (click)="toggleExpanded(item)"
+                      [matTooltip]="item.isExpanded ? 'Collapse value' : 'Expand value'"
+                    >
+                      <mat-icon>{{ item.isExpanded ? 'expand_less' : 'expand_more' }}</mat-icon>
+                    </button>
+                  }
+                  <button
+                    ng-button
+                    btnType="icon"
+                    size="compact"
+                    class="copy-button"
+                    (click)="copyToClipboard(item)"
+                    [matTooltip]="item.isCopied ? 'Copied!' : 'Copy value to clipboard'"
+                  >
+                    <mat-icon>{{ item.isCopied ? 'check' : 'content_copy' }}</mat-icon>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+      </div>
+    </div>
+  }
+</div>