Refactoring: Only one Component model now. Renaming of variables.

Detecting router outlets in component templates.

Author: CoderAllan

src/commands/componentHierarchyMarkdown.ts

@@ -1,5 +1,6 @@
 import { CommandBase } from '@commands';
-import { Config, Component, ComponentManager, FileSystemUtils } from '@src';
+import { Component } from '@model';
+import { Config, ComponentManager, FileSystemUtils } from '@src';
 import * as path from 'path';
 
 export class ComponentHierarchyMarkdown extends CommandBase {

src/commands/generateDependencyInjectionGraph.ts

@@ -96,20 +96,20 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
       const outputs = component.outputs.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Outputs: </b> ${outputs}`;
     }
-    if (component.viewchilds.length > 0) {
-      const viewchilds = component.viewchilds.map(i => i.name).join(", ");
+    if (component.viewChilds.length > 0) {
+      const viewchilds = component.viewChilds.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Viewchilds: </b> ${viewchilds}`;
     }
-    if (component.viewchildren.length > 0) {
-      const viewchildren = component.viewchildren.map(i => i.name).join(", ");
+    if (component.viewChildren.length > 0) {
+      const viewchildren = component.viewChildren.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Viewchildren: </b> ${viewchildren}`;
     }
-    if (component.contentchilds.length > 0) {
-      const contentchilds = component.contentchilds.map(i => i.name).join(", ");
+    if (component.contentChilds.length > 0) {
+      const contentchilds = component.contentChilds.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Contentchilds: </b> ${contentchilds}`;
     }
-    if (component.contentchildren.length > 0) {
-      const contentchildren = component.contentchildren.map(i => i.name).join(", ");
+    if (component.contentChildren.length > 0) {
+      const contentchildren = component.contentChildren.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Contentchildren: </b> ${contentchildren}`;
     }
     return nodeContent;

src/commands/modulesToMarkdown.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
-import { ArrayUtils, Config, FileSystemUtils, ModuleManager, NgModule } from '@src';
+import { ArrayUtils, Config, FileSystemUtils, ModuleManager } from '@src';
 import { CommandBase } from '@commands';
-import { Project } from '@model';
+import { NgModule, Project } from '@model';
 
 export class ModulesToMarkdown extends CommandBase {
   private config = new Config();

src/commands/showComponentHierarchy.ts

@@ -1,6 +1,6 @@
 import { ShowHierarchyBase } from './showHierarchyBase';
-import { Component, ComponentManager } from '@src';
-import { ArrowType, Edge, GraphState, Node, NodeType } from '@model';
+import { ComponentManager } from '@src';
+import { ArrowType, Component, Edge, GraphState, Node, NodeType } from '@model';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
@@ -99,10 +99,10 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
   }
 
   private generateDirectedGraphNodes(components: Component[], component: Component, isRoot: boolean, parentSelector: string, appendNodes: (nodeList: Node[]) => void) {
-    let componentFilename = component.tsFilename.replace(this.directoryPath, '.');
+    let componentFilename = component.filename.replace(this.directoryPath, '.');
     componentFilename = componentFilename.split('\\').join('/');
     const componentPosition = this.graphState.nodePositions[component.selector];
-    appendNodes([new Node(component.selector, component.selector, componentFilename, component.tsFilename, isRoot, isRoot ? NodeType.rootNode : NodeType.component, componentPosition)]);
+    appendNodes([new Node(component.selector, component.selector, componentFilename, component.filename, isRoot, isRoot ? NodeType.rootNode : NodeType.component, componentPosition)]);
     if (components.length > 0) {
       components.forEach((subComponent) => {
         if (parentSelector !== subComponent.selector) {

src/componentManager.ts

@@ -1,26 +1,15 @@
 import * as fs from 'fs';
 import path = require('path');
 
-import { Config , FileSystemUtils } from '@src';
-
-export class Component {
-
-  constructor(tsFilename: string, templateFilename: string, selector: string, subComponents: Component[], isRoot: boolean) {
-    this.tsFilename = tsFilename;
-    this.templateFilename = templateFilename;
-    this.selector = selector;
-    this.subComponents = subComponents;
-    this.isRoot = isRoot;
-  }
-  
-  public tsFilename: string;
-  public templateFilename: string;
-  public selector: string;
-  public subComponents: Component[];
-  public isRoot: boolean;
-}
+import { Config, FileSystemUtils } from '@src';
+import { Component } from '@model';
 
 export class ComponentManager {
+  private static componentRegex = /@Component\({/ig;
+  private static templateUrlRegex = /.*templateUrl:.+\/(.+)'/i;
+  private static selectorRegex = /.*selector:.+'(.+)'/i;
+  private static endBracketRegex = /}\)/i;
+  private static routerOutletRegex = /<router-outlet.*?>.*?<\/router-outlet>/ims;
 
   public static findComponents(directoryPath: string): { [selector: string]: Component; } {
     const fsUtils = new FileSystemUtils();
@@ -37,34 +26,30 @@ export class ComponentManager {
 
   private static scanWorkspaceForComponents(componentFilenames: string[]): { [selector: string]: Component; } {
     const compHash: { [selector: string]: Component; } = {};
-    const componentRegex = /@Component\({/ig;
-    const templateUrlRegex = /.*templateUrl:.+\/(.+)'/i;
-    const selectorRegex = /.*selector:.+'(.+)'/i;
-    const endBracketRegex = /}\)/i;
     componentFilenames.forEach((componentFilename) => {
       let componentDefinitionFound = false;
-      let currentComponent = new Component(componentFilename, "", "", [], true);
+      let currentComponent = new Component('', componentFilename, "", "", [], true);
       const content = fs.readFileSync(componentFilename, 'utf8');
       const lines: string[] = content.split('\n');
       for (let i: number = 0; i < lines.length; i++) {
         let line = lines[i];
-        let match = componentRegex.exec(line);
+        let match = this.componentRegex.exec(line);
         if (match) {
           componentDefinitionFound = true;
         }
         if (componentDefinitionFound) {
-          match = templateUrlRegex.exec(line);
+          match = this.templateUrlRegex.exec(line);
           if (match) {
             currentComponent.templateFilename = path.join(path.dirname(componentFilename), match[1]);
           }
-          match = selectorRegex.exec(line);
+          match = this.selectorRegex.exec(line);
           if (match) {
             let currentSelector = match[1];
             currentSelector = currentSelector.replace("[", "");
             currentSelector = currentSelector.replace("]", "");
             currentComponent.selector = currentSelector;
           }
-          match = endBracketRegex.exec(line);
+          match = this.endBracketRegex.exec(line);
           if (match) {
             break;
           }
@@ -77,27 +62,33 @@ export class ComponentManager {
 
   private static enrichComponentsFromComponentTemplates(componentHash: { [selector: string]: Component; }) {
     for (let selector1 in componentHash) {
-      if (fs.existsSync(componentHash[selector1].templateFilename)) {
-        const template = fs.readFileSync(componentHash[selector1].templateFilename); // We read the entire template file
+      const component = componentHash[selector1];
+      if (fs.existsSync(component.templateFilename)) {
+        const template = fs.readFileSync(component.templateFilename); // We read the entire template file
+        component.isRouterOutlet = this.isComponentRouterOutlet(template);
         for (let selector2 in componentHash) {  // then we check if the template contains each of the selectors we found in the components
           let pattern = `</${selector2}>`;
           let index = template.indexOf(pattern);
           if (index >= 0) {
-            componentHash[selector1].subComponents = componentHash[selector1].subComponents.concat(componentHash[selector2]);
+            component.subComponents = component.subComponents.concat(componentHash[selector2]);
             // If selector2 has been found in a template then it is not root
             componentHash[selector2].isRoot = false;
           }
           else {
             pattern = ` ${selector2}`;
             index = template.indexOf(pattern);
             if (index >= 0) {
-              componentHash[selector1].subComponents = componentHash[selector1].subComponents.concat(componentHash[selector2]);
+              component.subComponents = component.subComponents.concat(componentHash[selector2]);
               // If selector2 has been found in a template then it is not root
               componentHash[selector2].isRoot = false;
             }
           }
         }
       }
     }
-  }  
+  }
+  private static isComponentRouterOutlet(template: Buffer): boolean {
+    const match = this.routerOutletRegex.exec(template.toString());
+    return match !== null;
+  }
 }

src/model/Component.ts

@@ -4,8 +4,21 @@ export class Component extends NamedEntity {
   public dependencyInjections: NamedEntity[] = [];
   public inputs: NamedEntity[] = [];
   public outputs: NamedEntity[] = [];
-  public viewchilds: NamedEntity[] = [];
-  public viewchildren: NamedEntity[] = [];
-  public contentchilds: NamedEntity[] = [];
-  public contentchildren: NamedEntity[] = [];
+  public viewChilds: NamedEntity[] = [];
+  public viewChildren: NamedEntity[] = [];
+  public contentChilds: NamedEntity[] = [];
+  public contentChildren: NamedEntity[] = [];  
+  public templateFilename: string = '';
+  public selector: string = '';
+  public subComponents: Component[] = [];
+  public isRoot: boolean = false;
+  public isRouterOutlet: boolean = false;
+
+  constructor(className: string, filename: string, templateFilename: string = '', selector: string = '', subComponents: Component[] = [], isRoot: boolean = false) {
+    super(className, filename);
+    this.templateFilename = templateFilename;
+    this.selector = selector;
+    this.subComponents = subComponents;
+    this.isRoot = isRoot;
+  }
 }

src/model/Project.ts

@@ -1,4 +1,4 @@
-import { NgModule } from "@src";
+import { NgModule } from "@model";
 import { Component } from './Component';
 import { NamedEntity } from "./NamedEntity";
 

src/moduleManager.ts

@@ -43,7 +43,7 @@ export class ModuleManager {
         module.filename = filename;
         module.moduleName = moduleName;
 
-        regex = /:\s+routes\s+=\s+\[.*?\]/ims;
+        regex = /:\s+Routes\s+=\s+\[.*?\]/ims;
         match = regex.exec(fileContents.toString());
         if (match !== null) {
           module.isRoutingModule = true;
@@ -58,10 +58,11 @@ export class ModuleManager {
     regex = /@Component\s*\(\s*(\{.+?\})\s*\)\s*export\s+class\s+(\w+)\s+(.*)/ims;
     match = regex.exec(fileContents.toString());
     if (match !== null) {
+      const componentBody = match[1];
       const className = match[2];
       const component = new Component(className, filename);
       const classBody = match[3];
-      this.enrichComponent(component, classBody);
+      this.enrichComponent(component, classBody, componentBody);
       return component;
     }
     regex = /@Directive\s*\(\s*(\{.+?\})\s*\)\s*export\s+class\s+(\w+)\s+/ims;
@@ -81,7 +82,7 @@ export class ModuleManager {
     }
   }
 
-  private static enrichComponent(component: Component, classBody: string): void {
+  private static enrichComponent(component: Component, classBody: string, componentBody: string): void {
     let regex = /constructor\s*\((.*?)\)/ims;
     let match = regex.exec(classBody);
     if (match !== null) {
@@ -95,10 +96,10 @@ export class ModuleManager {
     }
     this.matchMultipleSpecificDecorator(classBody, '@Input', component.filename, component.inputs);
     this.matchMultipleSpecificDecorator(classBody, '@output', component.filename, component.outputs);
-    this.matchSpecificDecorator(classBody, '@ViewChild', component.filename, component.viewchilds);
-    this.matchSpecificDecorator(classBody, '@ViewChildren', component.filename, component.viewchildren);
-    this.matchSpecificDecorator(classBody, '@ContentChild', component.filename, component.contentchilds);
-    this.matchSpecificDecorator(classBody, '@ContentChildren', component.filename, component.contentchildren);
+    this.matchSpecificDecorator(classBody, '@ViewChild', component.filename, component.viewChilds);
+    this.matchSpecificDecorator(classBody, '@ViewChildren', component.filename, component.viewChildren);
+    this.matchSpecificDecorator(classBody, '@ContentChild', component.filename, component.contentChilds);
+    this.matchSpecificDecorator(classBody, '@ContentChildren', component.filename, component.contentChildren);
   }
 
   private static matchMultipleSpecificDecorator(classBody: string, decorator: string, filename: string, decoratorArray: NamedEntity[]) {