extract dependencies from angular components (#104)

GiladShoham · web-flow · commit f160ffa3e14e · 2019-06-11T17:12:39.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [unreleased]
 
+## [2.0.12-angular.2] - 2019-06-10
+
+- add rxjs package
+
+## [2.0.12-angular.1] - 2019-06-10
+
+- support angular components (experimental)
+
 ## [2.0.11] - 2019-06-05
 
 - [#1708](https://github.com/teambit/bit/issues/1708) support `require` with apostrophes
diff --git a/fixtures/angular/decorators/index.ts b/fixtures/angular/decorators/index.ts
@@ -0,0 +1,18 @@
+import { NgModule, Component } from '@angular/core';
+
+const styleUrl = './my-style2.css';
+
+@Component({
+  selector: 'main-component',
+  templateUrl: './my-template.html',
+  styleUrls: ['./my-style1.css', styleUrl]
+})
+export class MainComponent {}
+
+@NgModule({
+  imports: [],
+  exports: [MainComponent],
+  declarations: [MainComponent],
+  bootstrap: [MainComponent]
+})
+export class AppModule {}
diff --git a/fixtures/angular/decorators/my-style1.css b/fixtures/angular/decorators/my-style1.css
diff --git a/fixtures/angular/decorators/my-style2.css b/fixtures/angular/decorators/my-style2.css
diff --git a/fixtures/angular/decorators/my-template.html b/fixtures/angular/decorators/my-template.html
@@ -0,0 +1 @@
+<div>Hello world</div>
diff --git a/fixtures/angular/decorators/tsconfig.json b/fixtures/angular/decorators/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node"
+  },
+  "files": [
+    "index.ts"
+  ]
+}
diff --git a/fixtures/angular/html-deps/another-component.ts b/fixtures/angular/html-deps/another-component.ts
@@ -0,0 +1,7 @@
+import { NgModule, Component } from '@angular/core';
+
+@Component({
+  selector: 'another-component',
+  template: '<div>Hello world</div>'
+})
+export class AnotherComponent {}
diff --git a/fixtures/angular/html-deps/index.ts b/fixtures/angular/html-deps/index.ts
@@ -0,0 +1,11 @@
+import { AnotherComponent } from './another-component';
+import { MainComponent } from './main-component';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  imports: [],
+  exports: [MainComponent],
+  declarations: [MainComponent, AnotherComponent],
+  bootstrap: [MainComponent]
+})
+export class AppModule {}
diff --git a/fixtures/angular/html-deps/main-component.ts b/fixtures/angular/html-deps/main-component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'main-component',
+  template: '<another-component></another-component>'
+})
+export class MainComponent {}
diff --git a/fixtures/angular/html-deps/tsconfig.json b/fixtures/angular/html-deps/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node"
+  },
+  "files": [
+    "index.ts"
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bit-javascript",
-  "version": "2.0.11",
+  "version": "2.0.12-angular.2",
   "scripts": {
     "flow": "flow; test $? -eq 0 -o $? -eq 2",
     "lint": "eslint src && flow check || true",
@@ -34,6 +34,9 @@
   ],
   "main": "dist/index.js",
   "dependencies": {
+    "@angular/compiler": "^8.0.0",
+    "@angular/compiler-cli": "^8.0.0",
+    "@angular/core": "^8.0.0",
     "@babel/runtime": "^7.0.0",
     "@typescript-eslint/typescript-estree": "^1.1.0",
     "app-module-path": "^2.2.0",
@@ -54,6 +57,7 @@
     "lodash.set": "^4.3.2",
     "module-definition": "^2.2.4",
     "module-lookup-amd": "^5.0.1",
+    "ngast": "^0.3.0",
     "node-source-walk": "^4.2.0",
     "object-assign": "^4.1.1",
     "ora": "^1.2.0",
@@ -62,6 +66,7 @@
     "regenerator-runtime": "^0.10.5",
     "resolve": "^1.5.0",
     "resolve-dependency-path": "^1.0.2",
+    "rxjs": "^6.5.2",
     "sass-lookup": "^1.1.0",
     "stylable": "5.2.2",
     "stylus-lookup": "^1.0.2",
diff --git a/src/dependency-builder/build-tree.js b/src/dependency-builder/build-tree.js
@@ -387,7 +387,8 @@ export async function getDependencyTree({
   filePaths,
   bindingPrefix,
   resolveModulesConfig,
-  visited = {}
+  visited = {},
+  cacheProjectAst
 }: DependencyTreeParams): Promise<{ tree: Tree }> {
   const resolveConfigAbsolute = getResolveConfigAbsolute(consumerPath, resolveModulesConfig);
   const config = {
@@ -397,7 +398,8 @@ export async function getDependencyTree({
     webpackConfig: null,
     visited,
     nonExistent: [],
-    resolveConfig: resolveConfigAbsolute
+    resolveConfig: resolveConfigAbsolute,
+    cacheProjectAst
   };
   const { madgeTree, skipped, pathMap, errors } = generateTree(filePaths, config);
   const tree: Tree = groupDependencyTree(madgeTree, baseDir, bindingPrefix);
diff --git a/src/dependency-builder/dependency-tree/Config.js b/src/dependency-builder/dependency-tree/Config.js
@@ -17,6 +17,7 @@ function Config(options) {
   this.detectiveConfig = options.detective || options.detectiveConfig || {};
   this.pathMap = options.pathMap || [];
   this.resolveConfig = options.resolveConfig;
+  this.cacheProjectAst = options.cacheProjectAst;
 
   this.filter = options.filter;
 
diff --git a/src/dependency-builder/dependency-tree/index.js b/src/dependency-builder/dependency-tree/index.js
@@ -1,4 +1,5 @@
 import { isRelativeImport } from '../../utils';
+import extractAngularDependencies from '../platforms/angular/extract-dependencies';
 
 /**
  * this file had been forked from https://github.com/dependents/node-dependency-tree
@@ -90,7 +91,7 @@ module.exports._getDependencies = function (config) {
   dependencies.forEach(dependency => processDependency(dependency));
   pathMapFile.dependencies = pathMapDependencies;
   config.pathMap.push(pathMapFile);
-
+  processAngularDependencies();
   return resolvedDependencies;
 
   function processDependency(dependency) {
@@ -155,6 +156,24 @@ module.exports._getDependencies = function (config) {
       config.nonExistent[config.filename] = [dependency];
     }
   }
+  function processAngularDependencies() {
+    if (config.cacheProjectAst && config.cacheProjectAst.angular && config.filename.endsWith('.ts')) {
+      // no need to add to nonExistent array. if a file is missing, it'll fail during the AST
+      // generation and will throw an error
+      const { angularAst, angularDependencies } = extractAngularDependencies(
+        config.directory,
+        config.filename,
+        config.cacheProjectAst.angular
+      );
+      config.cacheProjectAst.angular = angularAst;
+      debug(`extracted additional ${angularDependencies.length} angular-dependencies: `, angularDependencies);
+      angularDependencies.forEach((angularDependency) => {
+        const pathMap = { importSource: '', resolvedDep: angularDependency };
+        pathMapDependencies.push(pathMap);
+      });
+      resolvedDependencies.push(...angularDependencies);
+    }
+  }
 };
 
 /**
diff --git a/src/dependency-builder/generate-tree-madge.js b/src/dependency-builder/generate-tree-madge.js
@@ -141,7 +141,8 @@ export default function generateTree(files = [], config) {
         },
         detective,
         nonExistent,
-        pathMap
+        pathMap,
+        cacheProjectAst: config.cacheProjectAst
       });
       Object.assign(depTree, dependencyTreeResult);
     } catch (err) {
diff --git a/src/dependency-builder/platforms/angular/extract-dependencies.js b/src/dependency-builder/platforms/angular/extract-dependencies.js
@@ -0,0 +1,62 @@
+// @flow
+import path from 'path';
+import fs from 'fs-extra';
+import { ProjectSymbols } from 'ngast';
+import R from 'ramda';
+
+export default function extractAngularDependencies(workspaceDir: string, fileName: string, existingAst: Object) {
+  const contextSymbols = R.isEmpty(existingAst) ? getAst() : existingAst;
+  const directive = contextSymbols.getDirectives().find(d => d.symbol.filePath === fileName);
+  return {
+    angularAst: contextSymbols,
+    angularDependencies: [...getDependenciesFromDecorator(), ...getDependenciesFromTemplate()]
+  };
+
+  function getAst() {
+    const resourceResolver = {
+      get(url) {
+        return fs.readFile(url, 'utf-8');
+      },
+      getSync(url) {
+        return fs.readFileSync(url, 'utf-8');
+      }
+    };
+
+    const program = path.join(workspaceDir, 'tsconfig.json');
+    const defaultErrorReporter = (e, pathStr) => console.error(e, pathStr);
+    return new ProjectSymbols(program, resourceResolver, defaultErrorReporter);
+  }
+
+  function getDependenciesFromDecorator(): string[] {
+    const dependencies = [];
+    if (!directive) return dependencies;
+    const templateUrl = directive.getNonResolvedMetadata().template.templateUrl;
+    const styleUrls = directive.getNonResolvedMetadata().template.styleUrls;
+    [templateUrl, ...styleUrls].forEach((url) => {
+      if (url) {
+        // for some reason, the url received is sometimes absolute sometimes relative to the fileName
+        const absolutePath = path.isAbsolute(url) ? url : path.join(path.dirname(fileName), url);
+        dependencies.push(absolutePath);
+      }
+    });
+    return dependencies;
+  }
+
+  function getDependenciesFromTemplate(): string[] {
+    if (!directive) return [];
+    // dependencies from templates
+    const appSelectors = contextSymbols
+      .getDirectives()
+      .filter(d => d.isComponent())
+      .map(d => d.getNonResolvedMetadata().selector);
+    const templateAst = directive.getTemplateAst().templateAst;
+    const selectorsFromTemplate = templateAst
+      .filter(t => t.name && t.constructor.name === 'ElementAst' && appSelectors.includes(t.name))
+      .map(t => t.name);
+    const dependenciesFromTemplate = contextSymbols
+      .getDirectives()
+      .filter(d => selectorsFromTemplate.includes(d.getNonResolvedMetadata().selector))
+      .map(d => d.symbol.filePath);
+    return dependenciesFromTemplate;
+  }
+}
diff --git a/src/dependency-builder/platforms/angular/extract-dependencies.spec.js b/src/dependency-builder/platforms/angular/extract-dependencies.spec.js
@@ -0,0 +1,41 @@
+import path from 'path';
+import { expect } from 'chai';
+import extractAngularDependencies from './extract-dependencies';
+
+describe('ExtractAngularDependencies', function () {
+  this.timeout(0);
+  describe('decorators', () => {
+    const fixtureDir = path.join(__dirname, '/../../../../fixtures/angular/decorators');
+    let angularDependencies;
+    before(() => {
+      const fileName = path.join(fixtureDir, 'index.ts');
+      const results = extractAngularDependencies(fixtureDir, fileName, {});
+      angularDependencies = results.angularDependencies;
+    });
+    it('should extract html directives', () => {
+      const htmlDirective = path.join(fixtureDir, 'my-template.html');
+      expect(angularDependencies).to.include(htmlDirective);
+    });
+    it('should extract css directives', () => {
+      const cssDirective = path.join(fixtureDir, 'my-style1.css');
+      expect(angularDependencies).to.include(cssDirective);
+    });
+    it('should extract directives entered as variables', () => {
+      const directiveAsVar = path.join(fixtureDir, 'my-style2.css');
+      expect(angularDependencies).to.include(directiveAsVar);
+    });
+  });
+  describe('template dependencies', () => {
+    const fixtureDir = path.join(__dirname, '/../../../../fixtures/angular/html-deps');
+    let angularDependencies;
+    before(() => {
+      const fileName = path.join(fixtureDir, 'main-component.ts');
+      const results = extractAngularDependencies(fixtureDir, fileName, {});
+      angularDependencies = results.angularDependencies;
+    });
+    it('should extract the dependencies from the html template', () => {
+      const componentDep = path.join(fixtureDir, 'another-component.ts');
+      expect(angularDependencies).to.include(componentDep);
+    });
+  });
+});
diff --git a/src/dependency-builder/types/dependency-tree-type.js b/src/dependency-builder/types/dependency-tree-type.js
@@ -61,5 +61,6 @@ export type DependencyTreeParams = {
   filePaths: string[],
   bindingPrefix: string,
   resolveModulesConfig: ?ResolveModulesConfig,
-  visited: ?Object
+  visited: ?Object,
+  cacheProjectAst: ?Object
 };
