refactor(devtools): display directive metadata from Wiz and ACX (angular#60475)

This updates the DevTools protocol to send Wiz/ACX metadata in addition to Angular metadata. Fortunately we don't need to worry about backwards compatibility here (`framework` is required for example), but the design roughly mirrors `DirectiveDebugMetadata` in `@angular/core`.

Beyond that, this is mostly plumbing through an extra data slice in the form of `props` provided by Wiz. An earlier version implemented `events` as their own slice as well, but was removed as there is currently no generic way to disambiguate events from any other form of callback passed in as a prop. Instead, event callbacks are visualized as functions under the "Props" category.

Working with `DirectiveMetadata` as a union is unfortunately a bit annoying since it requires casting to more specific `{Angular,Acx,Wiz}DirectiveMetadata` types for TS to allow property access, even when the properties are optional anyways.

This commit is mostly for adding Wiz, but does add a bit of ACX functionality which is not fully tested.

PR Close angular#60475

Author: dgp1130

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

@@ -16,7 +16,7 @@ import type {
   Type,
   ValueProvider,
   ɵAngularComponentDebugMetadata as AngularComponentDebugMetadata,
-  ɵAngularDirectiveDebugMetadata as AngularDirectiveDebugMetadata,
+  ɵAcxComponentDebugMetadata as AcxComponentDebugMetadata,
   ɵProviderRecord as ProviderRecord,
 } from '@angular/core';
 import {
@@ -52,6 +52,17 @@ enum ChangeDetectionStrategy {
   Default = 1,
 }
 
+enum AcxChangeDetectionStrategy {
+  Default = 0,
+  OnPush = 1,
+}
+
+enum Framework {
+  Angular = 'angular',
+  ACX = 'acx',
+  Wiz = 'wiz',
+}
+
 export const injectorToId = new WeakMap<Injector | HTMLElement, string>();
 export const nodeInjectorToResolutionPath = new WeakMap<HTMLElement, SerializedInjector[]>();
 export const idToInjector = new Map<string, Injector>();
@@ -121,7 +132,7 @@ export const getLatestComponentState = (
   const populateResultSet = (dir: DirectiveInstanceType | ComponentInstanceType) => {
     const {instance, name} = dir;
     const metadata = getDirectiveMetadata(instance);
-    if (injector) {
+    if (injector && metadata.framework === Framework.Angular) {
       metadata.dependencies = getDependenciesForDirective(
         injector,
         resolutionPathWithProviders,
@@ -220,16 +231,44 @@ const enum DirectiveMetadataKey {
 // the method directly interacts with the directive/component definition.
 const getDirectiveMetadata = (dir: any): DirectiveMetadata => {
   const getMetadata = ngDebugClient().getDirectiveMetadata!;
-  const metadata = getMetadata?.(dir) as
-    | (AngularDirectiveDebugMetadata & Partial<AngularComponentDebugMetadata>)
-    | null;
+  const metadata = getMetadata?.(dir);
   if (metadata) {
-    return {
-      inputs: metadata.inputs,
-      outputs: metadata.outputs,
-      encapsulation: metadata.encapsulation,
-      onPush: metadata.changeDetection === ChangeDetectionStrategy.OnPush,
-    };
+    const {framework} = metadata;
+    switch (framework) {
+      case undefined: // Back compat, older Angular versions did not set `framework`.
+      case Framework.Angular: {
+        const meta = metadata as typeof metadata & Partial<AngularComponentDebugMetadata>;
+        return {
+          framework: Framework.Angular,
+          name: meta.name,
+          inputs: meta.inputs,
+          outputs: meta.outputs,
+          encapsulation: meta.encapsulation,
+          onPush: meta.changeDetection === ChangeDetectionStrategy.OnPush,
+        };
+      }
+      case Framework.ACX: {
+        const meta = metadata as typeof metadata & Partial<AcxComponentDebugMetadata>;
+        return {
+          framework: Framework.ACX,
+          name: meta.name,
+          inputs: meta.inputs,
+          outputs: meta.outputs,
+          encapsulation: meta.encapsulation,
+          onPush: meta.changeDetection === AcxChangeDetectionStrategy.OnPush,
+        };
+      }
+      case Framework.Wiz: {
+        return {
+          framework: Framework.Wiz,
+          name: metadata.name,
+          props: metadata.props,
+        };
+      }
+      default: {
+        throw new Error(`Unknown framework: "${framework}".`);
+      }
+    }
   }
 
   // Used in older Angular versions, prior to the introduction of `getDirectiveMetadata`.
@@ -243,6 +282,7 @@ const getDirectiveMetadata = (dir: any): DirectiveMetadata => {
   };
 
   return {
+    framework: Framework.Angular,
     inputs: safelyGrabMetadata(DirectiveMetadataKey.INPUTS),
     outputs: safelyGrabMetadata(DirectiveMetadataKey.OUTPUTS),
     encapsulation: safelyGrabMetadata(DirectiveMetadataKey.ENCAPSULATION),
@@ -252,7 +292,16 @@ const getDirectiveMetadata = (dir: any): DirectiveMetadata => {
 
 export function isOnPushDirective(dir: any): boolean {
   const metadata = getDirectiveMetadata(dir.instance);
-  return Boolean(metadata.onPush);
+  switch (metadata.framework) {
+    case Framework.Angular:
+      return Boolean(metadata.onPush);
+    case Framework.ACX:
+      return Boolean(metadata.onPush);
+    case Framework.Wiz:
+      return false;
+    default:
+      throw new Error(`Unknown framework: "${metadata.framework}".`);
+  }
 }
 
 export function getInjectorProviders(injector: Injector) {

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

@@ -1,6 +1,6 @@
+load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
 load("//devtools/tools:ng_module.bzl", "ng_module")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
-load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -38,6 +38,7 @@ ts_test_library(
         ":property-resolver",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
         "//devtools/projects/protocol",
+        "//packages/core",
         "@npm//@angular/cdk",
         "@npm//@angular/material",
     ],

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {ɵFramework as Framework} from '@angular/core';
 import {Properties, PropType} from 'protocol';
 
 import {DirectivePropertyResolver} from './directive-property-resolver';
@@ -98,6 +99,7 @@ const properties: Properties = {
     },
   },
   metadata: {
+    framework: Framework.Angular,
     inputs: {
       i: 'i',
       i1: 'i_1',
@@ -133,6 +135,36 @@ describe('DirectivePropertyResolver', () => {
     expect(resolver.directiveStateControls.dataSource.data[0].prop.name).toBe('p');
   });
 
+  it('should register directive props', () => {
+    const resolver = new DirectivePropertyResolver(
+      messageBusMock,
+      {
+        props: {
+          foo: {
+            editable: false,
+            expandable: false,
+            preview: '',
+            type: PropType.Object,
+            value: {},
+            containerType: null,
+          },
+        },
+        metadata: {
+          framework: Framework.Wiz,
+          props: {
+            foo: 'foo',
+          },
+        },
+      },
+      {
+        element: [0],
+        directive: 0,
+      },
+    );
+
+    expect(resolver.directivePropControls.dataSource.data[0].prop.name).toBe('foo');
+  });
+
   it('should sort properties', () => {
     const resolver = new DirectivePropertyResolver(messageBusMock, properties, {
       element: [0],

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

@@ -7,7 +7,6 @@
  */
 
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {ViewEncapsulation} from '@angular/core';
 import {
   Descriptor,
   DirectiveMetadata,
@@ -59,6 +58,7 @@ export class DirectivePropertyResolver {
   );
 
   private _inputsDataSource: PropertyDataSource;
+  private _propsDataSource: PropertyDataSource;
   private _outputsDataSource: PropertyDataSource;
   private _stateDataSource: PropertyDataSource;
 
@@ -67,9 +67,10 @@ export class DirectivePropertyResolver {
     private _props: Properties,
     private _directivePosition: DirectivePosition,
   ) {
-    const {inputs, outputs, state} = this._classifyProperties();
+    const {inputs, props, outputs, state} = this._classifyProperties();
 
     this._inputsDataSource = this._createDataSourceFromProps(inputs);
+    this._propsDataSource = this._createDataSourceFromProps(props);
     this._outputsDataSource = this._createDataSourceFromProps(outputs);
     this._stateDataSource = this._createDataSourceFromProps(state);
   }
@@ -78,6 +79,10 @@ export class DirectivePropertyResolver {
     return getDirectiveControls(this._inputsDataSource);
   }
 
+  get directivePropControls(): DirectiveTreeData {
+    return getDirectiveControls(this._propsDataSource);
+  }
+
   get directiveOutputControls(): DirectiveTreeData {
     return getDirectiveControls(this._outputsDataSource);
   }
@@ -98,27 +103,21 @@ export class DirectivePropertyResolver {
     return this._directivePosition;
   }
 
-  get directiveViewEncapsulation(): ViewEncapsulation | undefined {
-    return this._props.metadata?.encapsulation;
-  }
-
-  get directiveHasOnPushStrategy(): boolean | undefined {
-    return this._props.metadata?.onPush;
-  }
-
   getExpandedProperties(): NestedProp[] {
     return [
       ...getExpandedDirectiveProperties(this._inputsDataSource.data),
+      ...getExpandedDirectiveProperties(this._propsDataSource.data),
       ...getExpandedDirectiveProperties(this._outputsDataSource.data),
       ...getExpandedDirectiveProperties(this._stateDataSource.data),
     ];
   }
 
   updateProperties(newProps: Properties): void {
     this._props = newProps;
-    const {inputs, outputs, state} = this._classifyProperties();
+    const {inputs, props, outputs, state} = this._classifyProperties();
 
     this._inputsDataSource.update(inputs);
+    this._propsDataSource.update(props);
     this._outputsDataSource.update(outputs);
     this._stateDataSource.update(state);
   }
@@ -142,28 +141,44 @@ export class DirectivePropertyResolver {
 
   private _classifyProperties(): {
     inputs: {[name: string]: Descriptor};
+    props: {[name: string]: Descriptor};
     outputs: {[name: string]: Descriptor};
     state: {[name: string]: Descriptor};
   } {
-    const inputLabels: Set<string> = new Set(Object.values(this._props.metadata?.inputs || {}));
-    const outputLabels: Set<string> = new Set(Object.values(this._props.metadata?.outputs || {}));
-
-    const inputs = {};
-    const outputs = {};
-    const state = {};
-    let propPointer: {[name: string]: Descriptor};
-
-    Object.keys(this.directiveProperties).forEach((propName) => {
-      propPointer = inputLabels.has(propName)
-        ? inputs
-        : outputLabels.has(propName)
-          ? outputs
-          : state;
-      propPointer[propName] = this.directiveProperties[propName];
-    });
+    const metadata = this._props.metadata;
+    if (!metadata) {
+      return {
+        inputs: {},
+        props: {},
+        outputs: {},
+        state: this.directiveProperties,
+      };
+    }
+
+    const inputLabels = new Set('inputs' in metadata ? Object.values(metadata.inputs) : []);
+    const propLabels = new Set('props' in metadata ? Object.values(metadata.props) : []);
+    const outputLabels = new Set('outputs' in metadata ? Object.values(metadata.outputs) : []);
+
+    const inputs: {[name: string]: Descriptor} = {};
+    const props: {[name: string]: Descriptor} = {};
+    const outputs: {[name: string]: Descriptor} = {};
+    const state: {[name: string]: Descriptor} = {};
+
+    for (const [propName, value] of Object.entries(this.directiveProperties)) {
+      if (inputLabels.has(propName)) {
+        inputs[propName] = value;
+      } else if (propLabels.has(propName)) {
+        props[propName] = value;
+      } else if (outputLabels.has(propName)) {
+        outputs[propName] = value;
+      } else {
+        state[propName] = value;
+      }
+    }
 
     return {
       inputs,
+      props,
       outputs,
       state,
     };

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

@@ -6,8 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core';
-import {ComponentType} from 'protocol';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ɵFramework as Framework,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import {AngularDirectiveMetadata, AcxDirectiveMetadata, ComponentType} from 'protocol';
 
 import {ElementPropertyResolver} from '../property-resolver/element-property-resolver';
 
@@ -22,7 +29,8 @@ export class ComponentMetadataComponent {
 
   private _nestedProps = inject(ElementPropertyResolver);
 
-  viewEncapsulationModes = ['Emulated', 'Native', 'None', 'ShadowDom'];
+  angularViewEncapsulationModes = ['Emulated', 'Native', 'None', 'ShadowDom'];
+  acxViewEncapsulationModes = ['Emulated', 'None'];
 
   readonly controller = computed(() => {
     const comp = this.currentSelectedComponent();
@@ -33,15 +41,32 @@ export class ComponentMetadataComponent {
   });
 
   readonly viewEncapsulation = computed(() => {
-    const encapsulationIndex = this.controller()?.directiveViewEncapsulation;
-    if (encapsulationIndex !== undefined) {
-      return this.viewEncapsulationModes[encapsulationIndex];
+    const metadata = this.controller()?.directiveMetadata;
+    if (!metadata) return undefined;
+
+    const encapsulation = (metadata as AngularDirectiveMetadata | AcxDirectiveMetadata)
+      .encapsulation;
+    if (!encapsulation) return undefined;
+
+    switch (metadata.framework) {
+      case Framework.Angular:
+        return this.angularViewEncapsulationModes[encapsulation];
+      case Framework.ACX:
+        return this.acxViewEncapsulationModes[encapsulation];
+      default:
+        return undefined;
     }
-    return undefined;
   });
 
   readonly changeDetectionStrategy = computed(() => {
-    const onPush = this.controller()?.directiveHasOnPushStrategy;
-    return onPush ? 'OnPush' : onPush !== undefined ? 'Default' : undefined;
+    const metadata = this.controller()?.directiveMetadata;
+    if (!metadata) return undefined;
+
+    const meta = metadata as Partial<AcxDirectiveMetadata | AngularDirectiveMetadata>;
+    if (meta.onPush !== undefined) {
+      return meta.onPush ? 'OnPush' : 'Default';
+    } else {
+      return undefined;
+    }
   });
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html

@@ -1,7 +1,7 @@
 @if (controlsLoaded()) {
   <mat-accordion cdkDropList (cdkDropListDropped)="drop($event)" [multi]="true">
-    @let dependencies = controller().directiveMetadata?.dependencies;
-    @if (dependencies && dependencies.length > 0) {
+    @let deps = dependencies();
+    @if (deps && deps.length > 0) {
       <div class="mat-accordion-content">
         <mat-expansion-panel [expanded]="true">
           <mat-expansion-panel-header collapsedHeight="25px" expandedHeight="25px">