refactor(devtools): check if signal graph is supported (#61915)

add a new devtools field in SupportedApis to check if the
getSignalGraphApi exists

PR Close #61915

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

@@ -11,6 +11,7 @@ import {
   ngDebugDependencyInjectionApiIsSupported,
   ngDebugProfilerApiIsSupported,
   ngDebugRoutesApiIsSupported,
+  ngDebugSignalGraphApiIsSupported,
 } from './ng-debug-api';
 import {Framework} from '../component-tree/core-enums';
 
@@ -113,4 +114,24 @@ describe('ng-debug-api', () => {
       expect(ngDebugRoutesApiIsSupported()).toBeFalse();
     });
   });
+
+  describe('ngDebugSignalGraphIsSupported', () => {
+    beforeEach(() => mockRoot());
+
+    it('should support Signal Graph API with getSignalGraph', () => {
+      (globalThis as any).ng = fakeNgGlobal(Framework.Angular);
+      (globalThis as any).ng.ɵgetSignalGraph = () => {};
+      expect(ngDebugSignalGraphApiIsSupported()).toBeTrue();
+    });
+
+    it('should not support Signal Graph API with no getSignalGraph', () => {
+      (globalThis as any).ng = fakeNgGlobal(Framework.ACX);
+      (globalThis as any).ng.ɵgetSignalGraph = 'not implemented';
+      expect(ngDebugSignalGraphApiIsSupported()).toBeFalse();
+
+      (globalThis as any).ng = fakeNgGlobal(Framework.ACX);
+      (globalThis as any).ng.ɵgetSignalGraph = undefined;
+      expect(ngDebugSignalGraphApiIsSupported()).toBeFalse();
+    });
+  });
 });

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

@@ -75,3 +75,9 @@ export function ngDebugRoutesApiIsSupported(): boolean {
     })
   );
 }
+
+/** Checks whether Signal Graph API is supported within window.ng */
+export function ngDebugSignalGraphApiIsSupported(): boolean {
+  const ng = ngDebugClient();
+  return ngDebugApiIsSupported(ng, 'ɵgetSignalGraph');
+}

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

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

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

@@ -66,6 +66,7 @@ export class DevToolsComponent implements OnDestroy {
     profiler: false,
     dependencyInjection: false,
     routes: false,
+    signals: false,
   });
   readonly ivy = signal<boolean | undefined>(undefined);
 

devtools/projects/protocol/src/lib/messages.ts

@@ -338,6 +338,7 @@ export interface SupportedApis {
   profiler: boolean;
   dependencyInjection: boolean;
   routes: boolean;
+  signals: boolean;
 }
 
 export interface Events {