feat(core): implement getSignalGraph debug API

AleksanderBodurri · AleksanderBodurri · commit 87b020d2689b · 2024-08-12T12:50:52.000-04:00
Creates a debug api that returns two arrays of nodes and edges that represent a signal graph in the context of a particular injector.
diff --git a/packages/core/src/render3/debug/framework_injector_profiler.ts b/packages/core/src/render3/debug/framework_injector_profiler.ts
@@ -67,6 +67,7 @@ class DIDebugData {
     WeakMap<Type<unknown>, InjectedService[]>
   >();
   resolverToProviders = new WeakMap<Injector | TNode, ProviderRecord[]>();
+  resolverToEffects = new WeakMap<Injector | LView, any>();
   standaloneInjectorToComponent = new WeakMap<Injector, Type<unknown>>();
 
   reset() {
@@ -113,6 +114,24 @@ function handleInjectorProfilerEvent(injectorProfilerEvent: InjectorProfilerEven
     handleInstanceCreatedByInjectorEvent(context, injectorProfilerEvent.instance);
   } else if (type === InjectorProfilerEventType.ProviderConfigured) {
     handleProviderConfiguredEvent(context, injectorProfilerEvent.providerRecord);
+  } else if (type === InjectorProfilerEventType.EffectCreated) {
+    handleEffectCreatedEvent(context, injectorProfilerEvent.effect);
+  }
+}
+
+function handleEffectCreatedEvent(context: InjectorProfilerContext, effect: EffectRef): void {
+  const diResolver = getDIResolver(context.injector);
+  if (diResolver === null) {
+    throwError('An EffectCreated event must be run within an injection context.');
+  }
+
+  const diResolverToEffects = frameworkDIDebugData.resolverToEffects;
+  if (!diResolverToEffects.has(diResolver)) {
+    diResolverToEffects.set(diResolver, []);
+  }
+
+  if (diResolverToEffects.has(diResolver)) {
+    diResolverToEffects.get(diResolver).push(effect);
   }
 }
 
@@ -280,7 +299,7 @@ function handleProviderConfiguredEvent(
   resolverToProviders.get(diResolver)!.push(data);
 }
 
-function getDIResolver(injector: Injector | undefined): Injector | LView | null {
+export function getDIResolver(injector: Injector | undefined): Injector | LView | null {
   let diResolver: Injector | LView | null = null;
 
   if (injector === undefined) {
diff --git a/packages/core/src/render3/debug/injector_profiler.ts b/packages/core/src/render3/debug/injector_profiler.ts
@@ -35,6 +35,11 @@ export const enum InjectorProfilerEventType {
    * Emits when an injector configures a provider.
    */
   ProviderConfigured,
+
+  /**
+   * Emits when an effect is created.
+   */
+  EffectCreated,
 }
 
 /**
@@ -74,14 +79,21 @@ export interface ProviderConfiguredEvent {
   providerRecord: ProviderRecord;
 }
 
+export interface EffectCreatedEvent {
+  type: InjectorProfilerEventType.EffectCreated;
+  context: InjectorProfilerContext;
+  effect: unknown;
+}
+
 /**
  * An object representing an event that is emitted through the injector profiler
  */
 
 export type InjectorProfilerEvent =
   | InjectedServiceEvent
   | InjectorCreatedInstanceEvent
-  | ProviderConfiguredEvent;
+  | ProviderConfiguredEvent
+  | EffectCreatedEvent;
 
 /**
  * An object that contains information about a provider that has been configured
@@ -272,6 +284,16 @@ export function emitInjectEvent(token: Type<unknown>, value: unknown, flags: Inj
   });
 }
 
+export function emitEffectCreatedEvent(effect: unknown): void {
+  !ngDevMode && throwError('Injector profiler should never be called in production mode');
+
+  injectorProfiler({
+    type: InjectorProfilerEventType.EffectCreated,
+    context: getInjectorProfilerContext(),
+    effect,
+  });
+}
+
 export function runInInjectorProfilerContext(
   injector: Injector,
   token: Type<unknown>,
diff --git a/packages/core/src/render3/reactivity/effect.ts b/packages/core/src/render3/reactivity/effect.ts
@@ -22,6 +22,7 @@ import {FLAGS, LViewFlags, EFFECTS_TO_SCHEDULE} from '../interfaces/view';
 import {assertNotInReactiveContext} from './asserts';
 import {performanceMarkFeature} from '../../util/performance';
 import {PendingTasks} from '../../pending_tasks';
+import {emitEffectCreatedEvent, setInjectorProfilerContext} from '../debug/injector_profiler';
 
 /**
  * An effect can, optionally, register a cleanup function. If registered, the cleanup is executed
@@ -303,5 +304,14 @@ export function effect(
     (cdr._lView[EFFECTS_TO_SCHEDULE] ??= []).push(handle.watcher.notify);
   }
 
+  if (ngDevMode) {
+    const prevInjectorProfilerContext = setInjectorProfilerContext({injector, token: null});
+    try {
+      emitEffectCreatedEvent(handle);
+    } finally {
+      setInjectorProfilerContext(prevInjectorProfilerContext);
+    }
+  }
+
   return handle;
 }
diff --git a/packages/core/src/render3/util/discovery_utils.ts b/packages/core/src/render3/util/discovery_utils.ts
@@ -6,10 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {ComputedNode, SIGNAL, SignalNode} from '@angular/core/primitives/signals';
 import {ChangeDetectionStrategy} from '../../change_detection/constants';
 import {Injector} from '../../di/injector';
 import {ViewEncapsulation} from '../../metadata/view';
-import {assertLView} from '../assert';
+import {throwError} from '../../util/assert';
+import {assertLView, assertTNode} from '../assert';
 import {
   discoverLocalRefs,
   getComponentAtNodeIndex,
@@ -18,13 +20,28 @@ import {
   readPatchedLView,
 } from '../context_discovery';
 import {getComponentDef, getDirectiveDef} from '../definition';
-import {NodeInjector} from '../di';
+import {NodeInjector, getNodeInjectorLView, getNodeInjectorTNode} from '../di';
 import {DirectiveDef} from '../interfaces/definition';
 import {TElementNode, TNode, TNodeProviderIndexes} from '../interfaces/node';
-import {CLEANUP, CONTEXT, FLAGS, LView, LViewFlags, TVIEW, TViewType} from '../interfaces/view';
+import {
+  CLEANUP,
+  CONTEXT,
+  FLAGS,
+  HOST,
+  LView,
+  LViewFlags,
+  REACTIVE_TEMPLATE_CONSUMER,
+  TVIEW,
+  TViewType,
+} from '../interfaces/view';
 
 import {getRootContext} from './view_traversal_utils';
 import {getLViewParent, unwrapRNode} from './view_utils';
+import {isLView} from '../interfaces/type_checks';
+import {getFrameworkDIDebugData} from '../debug/framework_injector_profiler';
+import {Watch, WatchNode} from '@angular/core/primitives/signals/src/watch';
+import {R3Injector} from '../../di/r3_injector';
+import {ReactiveLViewConsumer} from '../reactive_lview_consumer';
 
 /**
  * Retrieves the component instance associated with a given DOM element.
@@ -513,3 +530,173 @@ function extractInputDebugMetadata<T>(inputs: DirectiveDef<T>['inputs']) {
 
   return res;
 }
+
+type SignalGraphNode<T> = SignalNode<T> | ComputedNode<T> | WatchNode | ReactiveLViewConsumer;
+
+interface DebugSignalNode<T> {
+  type: 'signal';
+  label: string;
+  value: T;
+}
+interface DebugEffectNode {
+  type: 'effect';
+  label: string;
+}
+
+interface DebugComputedNode<T> {
+  type: 'computed';
+  label: string;
+  value: T;
+}
+
+interface DebugTemplateNode {
+  type: 'template';
+  label: string;
+}
+
+type DebugSignalGraphNode<T> =
+  | DebugSignalNode<T>
+  | DebugEffectNode
+  | DebugComputedNode<T>
+  | DebugTemplateNode;
+
+interface DebugSignalGraphEdge {
+  from: number;
+  to: number;
+}
+
+interface DebugSignalGraph<T> {
+  nodes: DebugSignalGraphNode<T>[];
+  edges: DebugSignalGraphEdge[];
+}
+
+function isComputedNode<T>(node: SignalGraphNode<T>): node is ComputedNode<T> {
+  return (node as ComputedNode<T>).computation !== undefined;
+}
+
+function isTemplateNode<T>(node: SignalGraphNode<T>): node is ReactiveLViewConsumer {
+  return (
+    (node as ReactiveLViewConsumer).lView !== undefined &&
+    isLView((node as ReactiveLViewConsumer).lView)
+  );
+}
+
+function isEffectNode<T>(node: SignalGraphNode<T>): node is WatchNode {
+  return (node as WatchNode).cleanupFn !== undefined;
+}
+
+export function getSignalGraph(injector: Injector): DebugSignalGraph<unknown> {
+  if (!(injector instanceof NodeInjector) && !(injector instanceof R3Injector)) {
+    return throwError('getSignals must be called with a NodeInjector or an R3Injector');
+  }
+
+  const signalDependenciesMap = new Map<SignalGraphNode<unknown>, Set<SignalGraphNode<unknown>>>();
+
+  // if the injector is a NodeInjector, we need to extract the signals from the template
+  // otherwise if it is an R3Injector, we proceed as normal without this extra step since both cases
+  // require us to extract signals from the injector
+  if (injector instanceof NodeInjector) {
+    const tNode = getNodeInjectorTNode(injector)!;
+    const lView = getNodeInjectorLView(injector);
+
+    assertTNode(tNode);
+    assertLView(lView);
+    const templateLView = lView[tNode.index];
+    if (templateLView) {
+      const templateConsumer = templateLView[REACTIVE_TEMPLATE_CONSUMER];
+
+      if (templateConsumer) {
+        extractSignalNodesAndEdgesFromRoot(templateConsumer, signalDependenciesMap);
+      }
+    }
+  }
+
+  const effects = extractEffectsFromInjector(injector);
+  for (const effect of effects) {
+    const {watcher} = effect;
+    const signalRoot = watcher[SIGNAL];
+    extractSignalNodesAndEdgesFromRoot(signalRoot, signalDependenciesMap);
+  }
+
+  return extractNodesAndEdgesFromSignalMap(signalDependenciesMap);
+}
+
+function extractNodesAndEdgesFromSignalMap(
+  signalMap: Map<SignalGraphNode<unknown>, Set<SignalGraphNode<unknown>>>,
+): {
+  nodes: DebugSignalGraphNode<unknown>[];
+  edges: DebugSignalGraphEdge[];
+} {
+  const nodes = Array.from(signalMap.keys());
+  const debugSignalGraphNodes = nodes.map((signalGraphNode: SignalGraphNode<unknown>) => {
+    if (isComputedNode(signalGraphNode)) {
+      return {
+        label: signalGraphNode.debugName,
+        value: signalGraphNode.value,
+        type: 'computed',
+      };
+    }
+
+    if (isTemplateNode(signalGraphNode)) {
+      return {
+        label: signalGraphNode.lView?.[HOST]?.tagName?.toLowerCase?.(),
+        value: undefined,
+        type: 'template',
+      };
+    }
+
+    if (isEffectNode(signalGraphNode)) {
+      return {
+        label: signalGraphNode.debugName,
+        value: undefined,
+        type: 'effect',
+      };
+    }
+
+    return {
+      label: signalGraphNode.debugName,
+      value: signalGraphNode.value,
+      type: 'signal',
+    };
+  }) as DebugSignalGraphNode<unknown>[];
+
+  const edges: DebugSignalGraphEdge[] = [];
+  for (const [node, producers] of signalMap.entries()) {
+    for (const producer of producers) {
+      edges.push({from: nodes.indexOf(node), to: nodes.indexOf(producer)});
+    }
+  }
+
+  return {nodes: debugSignalGraphNodes, edges};
+}
+
+function extractEffectsFromInjector(injector: Injector) {
+  let diResolver: Injector | LView<unknown> = injector;
+  if (injector instanceof NodeInjector) {
+    const lView = getNodeInjectorLView(injector)!;
+    diResolver = lView;
+  }
+
+  const {resolverToEffects} = getFrameworkDIDebugData();
+  return resolverToEffects.get(diResolver) ?? [];
+}
+
+function extractSignalNodesAndEdgesFromRoot(
+  node: SignalGraphNode<unknown>,
+  signalDependenciesMap: Map<SignalGraphNode<unknown>, Set<SignalGraphNode<unknown>>>,
+): Map<SignalGraphNode<unknown>, Set<SignalGraphNode<unknown>>> {
+  if (signalDependenciesMap.has(node)) {
+    return signalDependenciesMap;
+  }
+
+  signalDependenciesMap.set(node, new Set());
+
+  const {producerNode} = node;
+
+  for (const producer of producerNode ?? []) {
+    signalDependenciesMap.get(node)!.add(producer as SignalNode<unknown>);
+    extractSignalNodesAndEdgesFromRoot(producer as SignalNode<unknown>, signalDependenciesMap);
+  }
+
+  return signalDependenciesMap;
+}
diff --git a/packages/core/src/render3/util/global_utils.ts b/packages/core/src/render3/util/global_utils.ts
@@ -22,6 +22,7 @@ import {
   getListeners,
   getOwningComponent,
   getRootComponents,
+  getSignalGraph,
 } from './discovery_utils';
 import {
   getDependenciesFromInjectable,
@@ -58,6 +59,7 @@ const globalUtilsFunctions = {
   'ɵgetInjectorResolutionPath': getInjectorResolutionPath,
   'ɵgetInjectorMetadata': getInjectorMetadata,
   'ɵsetProfiler': setProfiler,
+  'ɵgetSignalGraph': getSignalGraph,
 
   'getDirectiveMetadata': getDirectiveMetadata,
   'getComponent': getComponent,
diff --git a/packages/core/test/acceptance/discover_utils_spec.ts b/packages/core/test/acceptance/discover_utils_spec.ts
