refactor(devtools): use ng.getDirectiveMetadata for component name (angular#60475)

This reads the component name from `ng.getDirectiveMetadata`.

PR Close angular#60475

Author: dgp1130

devtools/projects/ng-devtools-backend/src/lib/directive-forest/BUILD.bazel

@@ -1,5 +1,5 @@
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -37,6 +37,7 @@ ts_test_library(
         ":directive-forest",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
         "//devtools/projects/ng-devtools-backend/src/lib:utils",
+        "//packages/core",
         "@npm//@types",
     ],
 )

devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts

@@ -6,27 +6,36 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {
+  ɵDirectiveDebugMetadata as DirectiveDebugMetadata,
+  ɵFramework as Framework,
+  ɵFrameworkAgnosticGlobalUtils as FrameworkAgnosticGlobalUtils,
+} from '@angular/core';
 import {RTreeStrategy} from './render-tree';
 
 describe('render tree extraction', () => {
   let treeStrategy: RTreeStrategy;
   let directiveMap: Map<Node, any[]>;
   let componentMap: Map<Element, any>;
+  let directiveMetadataMap: Map<any, DirectiveDebugMetadata>;
 
   beforeEach(() => {
     treeStrategy = new RTreeStrategy();
     directiveMap = new Map();
     componentMap = new Map();
+    directiveMetadataMap = new Map();
 
     (window as any).ng = {
-      getDirectiveMetadata(): void {},
+      getDirectiveMetadata(dir: any): DirectiveDebugMetadata | null {
+        return directiveMetadataMap.get(dir) ?? null;
+      },
       getComponent(element: Element): any {
         return componentMap.get(element);
       },
       getDirectives(node: Node): any {
         return directiveMap.get(node) || [];
       },
-    };
+    } satisfies Partial<FrameworkAgnosticGlobalUtils>;
   });
 
   afterEach(() => delete (window as any).ng);
@@ -106,4 +115,20 @@ describe('render tree extraction', () => {
     expect(rtree[0].children[0].children.length).toBe(0);
     expect(rtree[1].component?.instance).toBe(siblingComponent);
   });
+
+  it('should use component name from `ng.getDirectiveMetadata`', () => {
+    const appNode = document.createElement('app');
+
+    const appComponent = {};
+    componentMap.set(appNode, appComponent);
+    directiveMetadataMap.set(appComponent, {
+      framework: Framework.Angular,
+      name: 'AppComponent',
+      inputs: {},
+      outputs: {},
+    });
+
+    const rtree = treeStrategy.build(appNode);
+    expect(rtree[0].component!.name).toBe('AppComponent');
+  });
 });

devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts

@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ɵHydratedNode as HydrationNode} from '@angular/core';
+import type {
+  ɵFrameworkAgnosticGlobalUtils as FrameworkAgnosticGlobalUtils,
+  ɵHydratedNode as HydrationNode,
+} from '@angular/core';
 import {HydrationStatus} from 'protocol';
 
 import {ComponentTreeNode} from '../interfaces';
@@ -16,8 +19,9 @@ import {isCustomElement} from '../utils';
 const extractViewTree = (
   domNode: Node | Element,
   result: ComponentTreeNode[],
-  getComponent?: (element: Element) => {} | null,
-  getDirectives?: (node: Node) => {}[],
+  getComponent?: FrameworkAgnosticGlobalUtils['getComponent'],
+  getDirectives?: FrameworkAgnosticGlobalUtils['getDirectives'],
+  getDirectiveMetadata?: FrameworkAgnosticGlobalUtils['getDirectiveMetadata'],
 ): ComponentTreeNode[] => {
   // Ignore DOM Node if it came from a different frame. Use instanceof Node to check this.
   if (!(domNode instanceof Node)) {
@@ -50,19 +54,25 @@ const extractViewTree = (
     componentTreeNode.component = {
       instance: component,
       isElement: isCustomElement(domNode),
-      name: domNode.nodeName.toLowerCase(),
+      name: getDirectiveMetadata?.(component)?.name ?? domNode.nodeName.toLowerCase(),
     };
   }
   if (component || componentTreeNode.directives.length) {
     result.push(componentTreeNode);
   }
   if (componentTreeNode.component || componentTreeNode.directives.length) {
     domNode.childNodes.forEach((node) =>
-      extractViewTree(node, componentTreeNode.children, getComponent, getDirectives),
+      extractViewTree(
+        node,
+        componentTreeNode.children,
+        getComponent,
+        getDirectives,
+        getDirectiveMetadata,
+      ),
     );
   } else {
     domNode.childNodes.forEach((node) =>
-      extractViewTree(node, result, getComponent, getDirectives),
+      extractViewTree(node, result, getComponent, getDirectives, getDirectiveMetadata),
     );
   }
   return result;
@@ -98,8 +108,8 @@ export class RTreeStrategy {
     while (element.parentElement) {
       element = element.parentElement;
     }
-    const getComponent = ngDebugClient().getComponent;
-    const getDirectives = ngDebugClient().getDirectives;
-    return extractViewTree(element, [], getComponent, getDirectives);
+
+    const ng = ngDebugClient();
+    return extractViewTree(element, [], ng.getComponent, ng.getDirectives, ng.getDirectiveMetadata);
   }
 }