Clean up component-info panel, including hiding accordion elements th…

…at are empty, expanding Providers and Properties by default, and so forth. (#575)

* Clean up component-info panel, including hiding accordion elements that
are empty, expanding Providers and Properties by default, and so forth.

* Cannot import reflect-metadata without overwriting data

* Emit is clear enough

src/frontend/components/component-info/component-info.html

@@ -17,7 +17,7 @@ <h4 class="primary-color col pt1 pb2 m0">
   </div>
 
   <div [hidden]="!(node && node.name)">
-    <accordion sectionTitle="Properties">
+    <accordion sectionTitle="Properties" *ngIf="hasProperties" [defaultExpanded]="true">
       <section-content>
         <ul class="list-reset m0"
           *ngIf="node && node.description">
@@ -30,8 +30,7 @@ <h4 class="primary-color col pt1 pb2 m0">
       </section-content>
     </accordion>
 
-    <accordion sectionTitle="Providers"
-      *ngIf="node && node.providers && node.providers.length > 0">
+    <accordion sectionTitle="Providers" *ngIf="hasProviders" [defaultExpanded]="true">
       <section-content>
         <span *ngFor="let provider of node.providers">
           <p class="m1 bold">{{provider.key}}</p>
@@ -44,8 +43,7 @@ <h4 class="primary-color col pt1 pb2 m0">
       </section-content>
     </accordion>
 
-    <accordion sectionTitle="Directives"
-      *ngIf="node && node.directives && node.directives.length > 0">
+    <accordion sectionTitle="Directives" *ngIf="hasDirectives">
       <section-content>
         <ul class="list-reset m0">
           <li *ngFor="let directive of node.directives">
@@ -94,7 +92,7 @@ <h4 class="primary-color col pt1 pb2 m0">
               <td>
                 <button class="btn btn-primary bg-olive mb1"
                   (click)="emitValue(output, prop.value)">
-                  Emit Value
+                  Emit
                 </button>
               </td>
               <td>
@@ -129,8 +127,7 @@ <h4 class="primary-color col pt1 pb2 m0">
       </section-content>
     </accordion>
 
-    <accordion sectionTitle="Dependencies"
-      *ngIf="node && node.dependencies && node.dependencies.length > 0">
+    <accordion sectionTitle="Dependencies" *ngIf="hasDependencies">
       <section-content>
         <bt-dependency
           [dependencies]="node.dependencies"
@@ -139,8 +136,7 @@ <h4 class="primary-color col pt1 pb2 m0">
       </section-content>
     </accordion>
 
-    <accordion [sectionTitle]='"Children"'
-      *ngIf="node && node.children && node.children.length > 0">
+    <accordion sectionTitle="Children" *ngIf="hasChildren">
       <section-content>
         <div id="tree-children"
           class="h4">

src/frontend/components/component-info/component-info.ts

@@ -100,6 +100,36 @@ export class ComponentInfo {
     return Object.keys(this.state).length > 0;
   }
 
+  private get hasProviders() {
+    return this.node &&
+        this.node.providers &&
+        this.node.providers.length > 0;
+  }
+
+  private get hasDirectives() {
+    return this.node &&
+           this.node.directives &&
+           this.node.directives.length > 0;
+  }
+
+  private get hasDependencies() {
+    return this.node &&
+           this.node.dependencies &&
+           this.node.dependencies.length > 0;
+  }
+
+  private get hasChildren() {
+    return this.node &&
+           this.node.children &&
+           this.node.children.length > 0;
+  }
+
+  private get hasProperties() {
+    return this.node &&
+           this.node.description &&
+           this.node.description.length > 0;
+  }
+
   private viewComponentSource() {
     chrome.devtools.inspectedWindow.eval(`
       var root = ng.probe(window.pathLookupNode('${this.node.id}'));

src/tree/node.ts

@@ -12,6 +12,7 @@ export interface Node {
   nativeElement: () => HTMLElement; // null on frontend
   listeners: Array<EventListener>;
   dependencies: Array<string>;
+  directives: Array<string>;
   injectors: Array<string>;
   providers: Array<Property>;
   input: Array<string>;

src/tree/transformer.ts

@@ -85,12 +85,20 @@ export const transform = (parentNode: Node, path: Path, element: Source,
 
     const isComponent = element.componentInstance != null;
 
+    const metadata = isComponent
+      ? getMetadata(element)
+      : null;
+
     const input = isComponent
-      ? getComponentInputs(element)
+      ? getComponentInputs(metadata, element)
       : [];
 
     const output = isComponent
-      ? getComponentOutputs(element)
+      ? getComponentOutputs(metadata, element)
+      : [];
+
+    const directives = isComponent
+      ? getComponentDirectives(metadata)
       : [];
 
     const assert = (): Node => {
@@ -103,6 +111,7 @@ export const transform = (parentNode: Node, path: Path, element: Source,
       attributes: cloneDeep(element.attributes),
       children: null,
       description: Description.getComponentDescription(element),
+      directives,
       classes: cloneDeep(element.classes),
       styles: cloneDeep(element.styles),
       injectors,
@@ -184,58 +193,67 @@ const getComponentProviders = (element: Source, name: string): Array<Property> =
     }
 };
 
-const getComponentInputs = (element: Source) => {
-  const metadata = Reflect.getOwnMetadata('annotations',
-    element.componentInstance.constructor);
-
-  const inputs =
-    (metadata && metadata.length > 0 && metadata[0].inputs) || [];
+const getMetadata = (element: Source) => {
+  const annotations =
+    Reflect.getOwnMetadata('annotations', element.componentInstance.constructor);
+  if (annotations) {
+    for (const decorator of annotations) {
+      if (decorator.constructor.name === 'ComponentMetadata') {
+        return decorator;
+      }
+    }
+  }
+  return null;
+};
 
-  const propMetadata = Reflect.getOwnMetadata('propMetadata',
-    element.componentInstance.constructor);
-  if (propMetadata == null) {
-    return inputs;
+const getComponentDirectives = (metadata): Array<string> => {
+  if (metadata == null || metadata.directives == null) {
+    return [];
   }
 
-  for (const key of Object.keys(propMetadata)) {
-    for (const meta of propMetadata[key]) {
-      if (meta.constructor.name === 'InputMetadata') {
-        if (inputs.indexOf(key) < 0) { // avoid duplicates
-          if (meta.bindingPropertyName) {
-            inputs.push(`${key}:${meta.bindingPropertyName}`);
-          } else {
-            inputs.push(key);
-          }
-        }
+  return metadata.directives.map((d: any) => d.name);
+};
+
+const getComponentInputs = (metadata, element: Source) => {
+  const inputs = metadata && metadata.inputs
+    ? metadata.inputs
+    : [];
+
+  eachProperty(element,
+    (key: string, meta) => {
+      if (meta.constructor.name === 'InputMetadata' && inputs.indexOf(key) < 0) {
+        const property = meta.bindingPropertyName
+          ? `${key}:${meta.bindingPropertyName}`
+          : key;
+        inputs.push(property);
       }
-    }
-  }
+    });
 
   return inputs;
 };
 
-const getComponentOutputs = (element: Source): Array<string> => {
-  const metadata = Reflect.getOwnMetadata('annotations',
-    element.componentInstance.constructor);
+const getComponentOutputs = (metadata, element: Source): Array<string> => {
+ const outputs = metadata && metadata.outputs
+    ? metadata.outputs
+    : [];
 
-  const outputs = (metadata && metadata.length > 0 && metadata[0].outputs) || [];
+  eachProperty(element,
+    (key: string, meta) => {
+      if (meta.constructor.name === 'OutputMetadata' && outputs.indexOf(key) < 0) {
+        outputs.push(key);
+      }
+    });
 
-  const propMetadata = Reflect.getOwnMetadata('propMetadata',
-    element.componentInstance.constructor);
-  if (propMetadata == null) {
-    return outputs;
-  }
+  return outputs;
+};
 
-  for (const key of Object.keys(propMetadata)) {
-    for (const meta of propMetadata[key]) {
-      if (meta.constructor.name === 'OutputMetadata') {
-        if (outputs.indexOf(key) < 0) { // avoid duplicates
-          outputs.push(key);
-        }
+const eachProperty = (element: Source, fn: (key: string, decorator) => void) => {
+  const propMetadata = Reflect.getOwnMetadata('propMetadata', element.componentInstance.constructor);
+  if (propMetadata) {
+    for (const key of Object.keys(propMetadata)) {
+      for (const meta of propMetadata[key]) {
+        fn(key, meta);
       }
     }
   }
-
-  return outputs;
 };
-