feat(devtools): update get signal graph (angular#61541)

add a function that we can inspect to jump to the source of a signal, and give every signal a unique id
that devtools can use to match signals across calls to getSignalGraph

PR Close angular#61541

Author: milomg

packages/core/src/render3/util/signal_debug.ts

@@ -28,8 +28,11 @@ import {
 
 export interface DebugSignalGraphNode {
   kind: string;
+  id: string;
+  epoch: number;
   label?: string;
   value?: unknown;
+  debuggableFn?: () => unknown;
 }
 
 export interface DebugSignalGraphEdge {
@@ -84,6 +87,9 @@ function getTemplateConsumer(injector: NodeInjector): ReactiveLViewConsumer | nu
   return templateLView[REACTIVE_TEMPLATE_CONSUMER];
 }
 
+const signalDebugMap = new WeakMap<ReactiveNode, string>();
+let counter = 0;
+
 function getNodesAndEdgesFromSignalMap(signalMap: ReadonlyMap<ReactiveNode, ReactiveNode[]>): {
   nodes: DebugSignalGraphNode[];
   edges: DebugSignalGraphEdge[];
@@ -95,27 +101,44 @@ function getNodesAndEdgesFromSignalMap(signalMap: ReadonlyMap<ReactiveNode, Reac
   for (const [consumer, producers] of signalMap.entries()) {
     const consumerIndex = nodes.indexOf(consumer);
 
+    let id = signalDebugMap.get(consumer);
+    if (!id) {
+      counter++;
+      id = counter.toString();
+      signalDebugMap.set(consumer, id);
+    }
+
     // collect node
-    if (isComputedNode(consumer) || isSignalNode(consumer)) {
+    if (isComputedNode(consumer)) {
       debugSignalGraphNodes.push({
         label: consumer.debugName,
         value: consumer.value,
         kind: consumer.kind,
+        epoch: consumer.version,
+        debuggableFn: consumer.computation,
+        id,
       });
-    } else if (isTemplateEffectNode(consumer)) {
+    } else if (isSignalNode(consumer)) {
       debugSignalGraphNodes.push({
-        label: consumer.debugName ?? consumer.lView?.[HOST]?.tagName?.toLowerCase?.(),
+        label: consumer.debugName,
+        value: consumer.value,
         kind: consumer.kind,
+        epoch: consumer.version,
+        id,
       });
-    } else if (isEffectNode(consumer)) {
+    } else if (isTemplateEffectNode(consumer)) {
       debugSignalGraphNodes.push({
-        label: consumer.debugName,
+        label: consumer.debugName ?? consumer.lView?.[HOST]?.tagName?.toLowerCase?.(),
         kind: consumer.kind,
+        epoch: consumer.version,
+        id,
       });
     } else {
       debugSignalGraphNodes.push({
         label: consumer.debugName,
         kind: consumer.kind,
+        epoch: consumer.version,
+        id,
       });
     }