ShowComponent hierarchy is now rendering routing relations (for now only where the routes definition specifies a component as outlet)

Author: CoderAllan

src/commands/showComponentHierarchy.ts

@@ -93,7 +93,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
       const component = componentDict[selector];
       if (component.isRoot) {
         this.generateDirectedGraphNodes(component.subComponents, component, true, '', appendNodes);
-        this.generateDirectedGraphEdges(component.subComponents, selector, "", appendEdges);
+        this.generateDirectedGraphEdges(componentDict, component.subComponents, component, "", appendEdges);
       }
     }
   }
@@ -112,14 +112,20 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
     }
   }
 
-  private generateDirectedGraphEdges(subComponents: Component[], selector: string, parentSelector: string, appendEdges: (edgeList: Edge[]) => void) {
+  private generateDirectedGraphEdges(componentDict: { [selector: string]: Component; }, subComponents: Component[], currentComponent: Component, parentSelector: string, appendEdges: (edgeList: Edge[]) => void) {
     if (parentSelector.length > 0) {
       const id = this.edges.length;
-      appendEdges([new Edge(id.toString(), parentSelector, selector, ArrowType.uses)]);
+      appendEdges([new Edge(id.toString(), parentSelector, currentComponent.selector, ArrowType.uses)]);
     }
-    if (subComponents.length > 0 && selector !== parentSelector) {
+    if (currentComponent.componentsRoutingToThis !== undefined && currentComponent.componentsRoutingToThis.length > 0) {
+      currentComponent.componentsRoutingToThis.forEach(componentRoutingToThis => {
+        const id = this.edges.length;
+        appendEdges([new Edge(id.toString(), componentRoutingToThis.selector, currentComponent.selector, ArrowType.route)]);
+      });
+    }
+    if (subComponents.length > 0 && currentComponent.selector !== parentSelector) {
       subComponents.forEach((subComponent) => {
-        this.generateDirectedGraphEdges(subComponent.subComponents, subComponent.selector, selector, appendEdges);
+        this.generateDirectedGraphEdges(componentDict, subComponent.subComponents, subComponent, currentComponent.selector, appendEdges);
       });
     }
   }

src/componentManager.ts

@@ -1,27 +1,37 @@
 import * as fs from 'fs';
 import path = require('path');
 
-import { Config, FileSystemUtils } from '@src';
+import { Config, FileSystemUtils, StringUtils } from '@src';
 import { Component } from '@model';
 
 export class ComponentManager {
   private static componentRegex = /@Component\({/ig;
+  private static componentClassNameRegex = /export\s+class\s+(.*?)\s+/ims;
   private static templateUrlRegex = /.*templateUrl:.+\/(.+)'/i;
   private static selectorRegex = /.*selector:.+'(.+)'/i;
   private static endBracketRegex = /}\)/i;
   private static routerOutletRegex = /<router-outlet.*?>.*?<\/router-outlet>/ims;
 
+  private static routesRegex = /:\s*?Routes\s*?=\s*?\[(.*?)\]/ims;
+  private static loadChildrenRegex = /loadChildren: .*?then\s*\(.+?=>.+?\.(.+?)\)/i;
+  private static routeComponentRegex = /component:\s*?(\w+?)\b/ig;
+  private static childrenRegex = /children\s*?:\s*?\[(.*?)\]/ims;
+
+
   public static scanWorkspaceForComponents(directoryPath: string): { [selector: string]: Component; } {
-    const fsUtils = new FileSystemUtils();
     const config = new Config();
-    const componentFilenames = fsUtils.listFiles(directoryPath, config.excludeDirectories, ComponentManager.isComponentFile);
+    const fsUtils = new FileSystemUtils();
+    const componentOrModuleFilenames = fsUtils.listFiles(directoryPath, config.excludeDirectories, this.isComponentOrModuleFile);
+    const componentFilenames = componentOrModuleFilenames.filter(FileSystemUtils.isComponentFile);
     const components = ComponentManager.scanComponents(componentFilenames);
     ComponentManager.enrichComponentsFromComponentTemplates(components);
+    const moduleFilenames = componentOrModuleFilenames.filter(FileSystemUtils.isModuleFile);
+    ComponentManager.enrichComponentsFromModules(moduleFilenames, components);
     return components;
   }
 
-  private static isComponentFile(filename: string): boolean {
-    return filename.endsWith('.component.ts');
+  private static isComponentOrModuleFile(filename: string): boolean {
+    return FileSystemUtils.isComponentFile(filename) || FileSystemUtils.isModuleFile(filename);
   }
 
   private static scanComponents(componentFilenames: string[]): { [selector: string]: Component; } {
@@ -55,6 +65,10 @@ export class ComponentManager {
           }
         }
       }
+      const componentClassNameMatch = this.componentClassNameRegex.exec(content);
+      if (componentClassNameMatch !== null) {
+        currentComponent.name = componentClassNameMatch[1];
+      }
       compHash[currentComponent.selector] = currentComponent;
     });
     return compHash;
@@ -91,4 +105,58 @@ export class ComponentManager {
     const match = this.routerOutletRegex.exec(template.toString());
     return match !== null;
   }
+
+  private static enrichComponentsFromModules(moduleFilenames: string[], componentHash: { [selector: string]: Component; }) {
+    moduleFilenames.forEach((moduleFilename) => {
+      const moduleContent = fs.readFileSync(moduleFilename);
+      const match = this.routesRegex.exec(moduleContent.toString());
+      if (match !== null) {
+        let routesBody = match[1];
+        this.parseRoutesBody(routesBody, moduleFilename, componentHash);
+      }
+    });
+  }
+
+  private static parseRoutesBody(routesBody: string, moduleFilename: string, componentDict: { [selector: string]: Component; }) {
+    routesBody = StringUtils.removeComments(routesBody);
+    const routesBodyParts = routesBody.split(",");
+    // We assume that the routing module has a corresponding module with the same name
+    // This only works if the routing module is named like 'moduleComponentName'-routing.module.ts
+    if (!FileSystemUtils.isRoutingModuleFile(moduleFilename)) {
+      return;
+    }
+    const moduleComponentFilename = moduleFilename.replace(FileSystemUtils.routingModuleFileExtension, FileSystemUtils.componentFileExtension);
+    const componentDictKey = Object.keys(componentDict).find(key => componentDict[key].filename.endsWith(moduleComponentFilename));
+    // if we didn't find the corresponding component we stop because we would not be able to link the components found in the routes to the current module component
+    if (componentDictKey === undefined) {
+      return;
+    }
+    const moduleComponent = componentDict[componentDictKey];
+    routesBodyParts.forEach((routesBodyPart) => {
+      const componentMatch = this.routeComponentRegex.exec(routesBodyPart);
+      if (componentMatch !== null) {
+        const componentName = componentMatch[1];
+        const componentSelector = Object.keys(componentDict).find(key => componentDict[key].name === componentName);
+        if (componentSelector !== undefined) {
+          const component = componentDict[componentSelector];
+          if (component !== undefined && componentSelector !== moduleComponent.selector) {
+            component.componentsRoutingToThis.push(moduleComponent);
+          }
+        }
+      }
+      else {
+        const loadChildrenMatch = this.loadChildrenRegex.exec(routesBodyPart);
+        if (loadChildrenMatch !== null) {
+          const moduleName = loadChildrenMatch[1];
+          console.log(`${moduleComponent.name} routing to module ${moduleName}`);
+        }
+      }
+      const childrenMatch = this.childrenRegex.exec(routesBodyPart);
+      if (childrenMatch !== null) {
+        const childrenRoutesBody = childrenMatch[1];
+        this.parseRoutesBody(childrenRoutesBody, moduleFilename, componentDict);
+      }
+    });
+
+  }
 }

src/filesystemUtils.ts

@@ -26,17 +26,28 @@ export class FileSystemUtils {
   }
 
   public fileExists(filename: string): boolean {
-    try{
+    try {
       return fs.lstatSync(filename).isFile();
     } catch {
       return false;
     }
   }
-  
+
+  public static componentFileExtension = '.component.ts';
+  public static isComponentFile(filename: string): boolean {
+    return filename.toLowerCase().endsWith(FileSystemUtils.componentFileExtension);
+  }
+  public static isModuleFile(filename: string): boolean {
+    return filename.toLowerCase().endsWith('.module.ts');
+  }
+  public static routingModuleFileExtension = '-routing.module.ts';
+  public static isRoutingModuleFile(filename: string): boolean {
+    return filename.toLowerCase().endsWith(FileSystemUtils.routingModuleFileExtension);
+  }
+
   private isDirectory(directoryName: any): boolean {
     return fs.lstatSync(directoryName).isDirectory();
   }
-
   public listDirectories(
     dir: string,
     excludeDirectories: string[]