refactor(devtools): create a reusable component for all prop mat-trees

Create a reusable component for object property inspection.

Author: hawkgs

devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts

@@ -16,7 +16,6 @@ describe('parseRoutes', () => {
       component: 'App Root',
       path: 'App Root',
       children: [],
-      data: [],
       isAux: false,
       isLazy: false,
       isActive: true,
@@ -31,7 +30,6 @@ describe('parseRoutes', () => {
     expect(parsedRoutes).toEqual({
       'component': 'App Root',
       'path': 'App Root',
-      'data': [],
       'children': [],
       'isAux': false,
       'isLazy': false,
@@ -121,10 +119,8 @@ describe('parseRoutes', () => {
           'canMatchGuards': [],
           'canDeactivateGuards': [],
           'providers': [],
-          'resolvers': [],
           'path': '/(outlet:component-one)',
           'pathMatch': undefined,
-          'data': [],
           'isAux': true,
           'isLazy': false,
           'isActive': false,
@@ -136,11 +132,10 @@ describe('parseRoutes', () => {
           'canMatchGuards': [],
           'canDeactivateGuards': [],
           'providers': [],
-          'resolvers': [],
           'path': '/component-two',
           'pathMatch': undefined,
           'title': 'Component Two',
-          'data': [{'key': 'name', 'value': 'component-two'}],
+          'data': {name: 'component-two'},
           'isAux': false,
           'isLazy': false,
           'isActive': false,
@@ -152,11 +147,9 @@ describe('parseRoutes', () => {
               'canMatchGuards': [],
               'canDeactivateGuards': [],
               'providers': [],
-              'resolvers': [],
               'path': '/component-two/component-two-one',
               'pathMatch': undefined,
               'title': '[Function]',
-              'data': [],
               'isAux': false,
               'isLazy': false,
               'isActive': false,
@@ -168,11 +161,9 @@ describe('parseRoutes', () => {
               'canMatchGuards': [],
               'canDeactivateGuards': [],
               'providers': [],
-              'resolvers': [],
               'path': '/component-two/component-two-two',
               'pathMatch': undefined,
               'title': 'titleResolver',
-              'data': [],
               'isAux': false,
               'isLazy': false,
               'isActive': false,
@@ -186,10 +177,8 @@ describe('parseRoutes', () => {
           'canMatchGuards': [],
           'canDeactivateGuards': [],
           'providers': [],
-          'resolvers': [],
           'path': '/lazy',
           'pathMatch': undefined,
-          'data': [],
           'isAux': false,
           'isLazy': true,
           'isActive': false,
@@ -201,10 +190,8 @@ describe('parseRoutes', () => {
           'canMatchGuards': [],
           'canDeactivateGuards': [],
           'providers': [],
-          'resolvers': [],
           'path': '/redirect',
           'pathMatch': undefined,
-          'data': [],
           'isAux': false,
           'isLazy': false,
           'isActive': false,
@@ -217,10 +204,8 @@ describe('parseRoutes', () => {
           'canMatchGuards': [],
           'canDeactivateGuards': [],
           'providers': [],
-          'resolvers': [],
           'path': '/redirect-fn',
           'pathMatch': undefined,
-          'data': [],
           'isAux': false,
           'isLazy': false,
           'isActive': false,
@@ -233,10 +218,8 @@ describe('parseRoutes', () => {
           'canMatchGuards': [],
           'canDeactivateGuards': [],
           'providers': [],
-          'resolvers': [],
           'path': '/redirect-named-fn',
           'pathMatch': undefined,
-          'data': [],
           'isAux': false,
           'isLazy': false,
           'isActive': false,
@@ -245,7 +228,6 @@ describe('parseRoutes', () => {
       ],
       'isAux': false,
       'isLazy': false,
-      'data': [],
       'isActive': true,
     } as any);
   });
@@ -428,7 +410,7 @@ describe('parseRoutes', () => {
 
     const parsedRoutes = parseRoutes(nestedRouter as any);
 
-    expect(parsedRoutes.children![0].resolvers).toEqual([{key: 'user', value: 'userResolver'}]);
+    expect(parsedRoutes.children![0].resolvers).toEqual({user: 'userResolver'});
   });
 
   it('should handle resolvers with arrow functions', () => {
@@ -448,7 +430,7 @@ describe('parseRoutes', () => {
 
     const parsedRoutes = parseRoutes(nestedRouter as any);
 
-    expect(parsedRoutes.children![0].resolvers).toEqual([{key: 'data', value: 'dataResolver'}]);
+    expect(parsedRoutes.children![0].resolvers).toEqual({data: 'dataResolver'});
   });
 
   it('should handle multiple resolvers on a single route', () => {
@@ -478,11 +460,11 @@ describe('parseRoutes', () => {
 
     const parsedRoutes = parseRoutes(nestedRouter as any);
 
-    expect(parsedRoutes.children![0].resolvers).toEqual([
-      {key: 'user', value: 'userResolver'},
-      {key: 'settings', value: 'settingsResolver'},
-      {key: 'permissions', value: 'PermissionsResolver'},
-    ]);
+    expect(parsedRoutes.children![0].resolvers).toEqual({
+      user: 'userResolver',
+      settings: 'settingsResolver',
+      permissions: 'PermissionsResolver',
+    });
   });
 
   it('should handle nested routes with resolvers', () => {
@@ -516,12 +498,10 @@ describe('parseRoutes', () => {
 
     const parsedRoutes = parseRoutes(nestedRouter as any);
 
-    expect(parsedRoutes.children![0].resolvers).toEqual([
-      {key: 'parentData', value: 'parentResolver'},
-    ]);
-    expect(parsedRoutes.children![0].children![0].resolvers).toEqual([
-      {key: 'childData', value: 'childResolver'},
-    ]);
+    expect(parsedRoutes.children![0].resolvers).toEqual({parentData: 'parentResolver'});
+    expect(parsedRoutes.children![0].children![0].resolvers).toEqual({
+      childData: 'childResolver',
+    });
   });
 });
 

devtools/projects/ng-devtools-backend/src/lib/router-tree.ts

@@ -85,7 +85,6 @@ export function parseRoutes(router: Router): Route {
     isAux: false,
     isLazy: false,
     isActive: true, // Root is always active.
-    data: [],
   };
 
   return root;
@@ -134,8 +133,6 @@ function assignChildrenToParent(
       canDeactivateGuards: getGuardNames(child, 'canDeactivate'),
       providers: getProviderName(child),
       path: routePath,
-      data: [],
-      resolvers: [],
       isAux,
       isLazy,
       isActive,
@@ -169,25 +166,15 @@ function assignChildrenToParent(
     }
 
     if (child.resolve) {
-      for (const el in child.resolve) {
-        if (child.resolve.hasOwnProperty(el)) {
-          routeConfig?.resolvers?.push({
-            key: el,
-            value: getClassOrFunctionName(child.resolve[el]),
-          });
-        }
+      routeConfig.resolvers = {};
+
+      for (const [name, resolver] of Object.entries(child.resolve)) {
+        routeConfig.resolvers[name] = getClassOrFunctionName(resolver);
       }
     }
 
     if (child.data) {
-      for (const el in child.data) {
-        if (child.data.hasOwnProperty(el)) {
-          routeConfig?.data?.push({
-            key: el,
-            value: child.data[el],
-          });
-        }
-      }
+      routeConfig.data = child.data;
     }
 
     return routeConfig;

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

@@ -32,6 +32,7 @@ ng_project(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view:signals-tab",
+        "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",
         "//devtools/projects/ng-devtools/src/lib/shared/split",
         "//devtools/projects/ng-devtools/src/lib/shared/split:responsive-split",
         "//devtools/projects/protocol",
@@ -54,6 +55,7 @@ ts_test_library(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
+        "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",
         "//devtools/projects/protocol",
     ],
 )

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

@@ -41,10 +41,8 @@ import {FlatNode} from './directive-forest/component-data-source';
 import {DirectiveForestComponent} from './directive-forest/directive-forest.component';
 import {IndexedNode} from './directive-forest/index-forest';
 import {constructPathOfKeysToPropertyValue} from './property-resolver/directive-property-resolver';
-import {
-  ElementPropertyResolver,
-  FlatNode as PropertyFlatNode,
-} from './property-resolver/element-property-resolver';
+import {ElementPropertyResolver} from './property-resolver/element-property-resolver';
+import {FlatNode as PropertyFlatNode} from '../../shared/object-tree-explorer/object-tree-types';
 import {PropertyTabComponent} from './property-tab/property-tab.component';
 import {FormsModule} from '@angular/forms';
 import {Platform} from '@angular/cdk/platform';

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts

@@ -19,10 +19,11 @@ import SpyObj = jasmine.SpyObj;
 import {By} from '@angular/platform-browser';
 import {FrameManager} from '../../application-services/frame_manager';
 import {Component, CUSTOM_ELEMENTS_SCHEMA, output, input} from '@angular/core';
-import {ElementPropertyResolver, FlatNode} from './property-resolver/element-property-resolver';
+import {ElementPropertyResolver} from './property-resolver/element-property-resolver';
 import {BreadcrumbsComponent} from './directive-forest/breadcrumbs/breadcrumbs.component';
 import {PropertyTabComponent} from './property-tab/property-tab.component';
 import {SignalGraphManager} from './signal-graph/signal-graph-manager';
+import {FlatNode} from '../../shared/object-tree-explorer/object-tree-types';
 
 @Component({
   selector: 'ng-directive-forest',

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/BUILD.bazel

@@ -19,6 +19,7 @@ ng_project(
         "//:node_modules/rxjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
+        "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",
         "//devtools/projects/protocol",
     ],
 )
@@ -37,6 +38,7 @@ ts_test_library(
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/material",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
+        "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",
         "//devtools/projects/protocol",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts

@@ -7,8 +7,7 @@
  */
 
 import {Descriptor} from '../../../../../../protocol';
-
-import {Property} from './element-property-resolver';
+import {Property} from '../../../shared/object-tree-explorer/object-tree-types';
 
 export const arrayifyProps = (
   props: {[prop: string]: Descriptor} | Descriptor[],

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts

@@ -17,10 +17,10 @@ import {
   Properties,
 } from '../../../../../../protocol';
 
-import {FlatNode, Property} from './element-property-resolver';
 import {getTreeFlattener} from './flatten';
 import {PropertyDataSource} from './property-data-source';
 import {getExpandedDirectiveProperties} from './property-expanded-directive-properties';
+import {FlatNode, Property} from '../../../shared/object-tree-explorer/object-tree-types';
 
 export interface DirectiveTreeData {
   dataSource: PropertyDataSource;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts

@@ -9,7 +9,6 @@
 import {Injectable} from '@angular/core';
 import {
   ComponentExplorerViewProperties,
-  Descriptor,
   DirectivePosition,
   DirectivesProperties,
   Events,
@@ -20,18 +19,6 @@ import {IndexedNode} from '../directive-forest/index-forest';
 
 import {DirectivePropertyResolver} from './directive-property-resolver';
 
-export interface FlatNode {
-  expandable: boolean;
-  prop: Property;
-  level: number;
-}
-
-export interface Property {
-  name: string;
-  descriptor: Descriptor;
-  parent: Property | null;
-}
-
 @Injectable()
 export class ElementPropertyResolver {
   private _directivePropertiesController = new Map<string, DirectivePropertyResolver>();

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts

@@ -11,7 +11,7 @@ import {Descriptor, PropType} from '../../../../../../protocol';
 import {Observable} from 'rxjs';
 
 import {arrayifyProps} from './arrayify-props';
-import {FlatNode, Property} from './element-property-resolver';
+import {FlatNode, Property} from '../../../shared/object-tree-explorer/object-tree-types';
 
 export const getTreeFlattener = () =>
   new MatTreeFlattener(