fix(app): Directive class inheritance

fix #1140

Author: vogloblinsky

src/app/compiler/angular/deps/directive-dep.factory.ts

@@ -9,9 +9,9 @@ export class DirectiveDepFactory {
     constructor(private helper: ComponentHelper) {}
 
     public create(file: any, srcFile: any, name: any, props: any, IO: any): IDirectiveDep {
-        let sourceCode = srcFile.getText();
-        let hash = crypto.createHash('sha512').update(sourceCode).digest('hex');
-        let directiveDeps: IDirectiveDep = {
+        const sourceCode = srcFile.getText();
+        const hash = crypto.createHash('sha512').update(sourceCode).digest('hex');
+        const directiveDeps: IDirectiveDep = {
             name,
             id: 'directive-' + name + '-' + hash,
             file: file,
@@ -41,6 +41,9 @@ export class DirectiveDepFactory {
         if (IO.jsdoctags && IO.jsdoctags.length > 0) {
             directiveDeps.jsdoctags = IO.jsdoctags[0].tags;
         }
+        if (IO.extends) {
+            directiveDeps.extends = IO.extends;
+        }
         if (IO.implements && IO.implements.length > 0) {
             directiveDeps.implements = IO.implements;
         }
@@ -80,4 +83,5 @@ export interface IDirectiveDep extends IDep {
     jsdoctags?: Array<string>;
     implements?: any;
     accessors?: Object;
+    extends?: any;
 }

src/templates/partials/directive.hbs

@@ -41,6 +41,15 @@
             </p>
         {{/if}}
 
+        {{#if directive.extends}}
+            <p class="comment">
+                <h3>{{t "extends" }}</h3>
+            </p>
+            <p class="comment">
+                {{> link-type type=directive.extends }}
+            </p>
+        {{/if}}
+
         {{#if directive.implements}}
             <p class="comment">
                 <h3>{{t "implements" }}</h3>

src/utils/extends-merger.util.ts

@@ -24,7 +24,7 @@ export class ExtendsMerger {
         this.injectables = deps.injectables;
         this.directives = deps.directives;
 
-        this.components.forEach(component => {
+        const mergeExtendedProperties = component => {
             let ext;
             if (typeof component.extends !== 'undefined') {
                 ext = this.findInDependencies(component.extends);
@@ -117,7 +117,10 @@ export class ExtendsMerger {
                     recursiveScanWithInheritance(ext);
                 }
             }
-        });
+        };
+
+        this.components.forEach(mergeExtendedProperties);
+        this.directives.forEach(mergeExtendedProperties);
 
         const mergeExtendedClasses = el => {
             let ext;
@@ -151,6 +154,7 @@ export class ExtendsMerger {
 
         this.classes.forEach(mergeExtendedClasses);
         this.injectables.forEach(mergeExtendedClasses);
+        this.directives.forEach(mergeExtendedClasses);
 
         return deps;
     }

test/fixtures/sample-files-extends/src/app/a.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+
+/**
+ * The a directive
+ */
+@Directive({
+    selector: '[a]',
+})
+export class ADirective {
+    title: string;
+
+    /**
+     * constructor description
+     */
+    constructor() {}
+}

test/fixtures/sample-files-extends/src/app/do-nothing.directive.ts

@@ -0,0 +1,41 @@
+import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+import { ADirective } from './a.directive';
+
+/**
+ * This directive does nothing !
+ */
+@Directive({
+    selector: '[donothing]',
+})
+export class DoNothingDirective extends ADirective {
+    protected popover: string;
+
+    /**
+     * constructor description
+     */
+    constructor() {
+        console.log('Do nothing directive');
+    }
+
+    /**
+     * HostBinding description
+     */
+    @HostBinding('style.color') color: string;
+
+    /**
+     * HostListener description 1
+     */
+    @HostListener('mouseup', ['$event.clientX', '$event.clientY'])
+    onMouseup(mouseX: number, mouseY: number): void {}
+    /**
+     * HostListener description 2
+     */
+    @HostListener('mousedown', ['$event.clientX', '$event.clientY'])
+    onMousedown(mouseX: number, mouseY: number): void {}
+    /**
+     * HostListener description 3
+     */
+    @HostListener('focus', ['$event'])
+    @HostListener('click', ['$event'])
+    onClick(e: Event): void {}
+}

test/src/cli/cli-extends.spec.ts

@@ -39,6 +39,14 @@ describe('CLI simple generation - extends app', () => {
         expect(appComponentFile).to.contain('itisme');
     });
 
+    it('DoNothingDirective extends ADirective', () => {
+        const file = read(distFolder + '/directives/DoNothingDirective.html');
+        expect(file).to.contain('Extends');
+        expect(file).to.contain(
+            'code><a href="../directives/ADirective.html" target="_self" >ADirective'
+        );
+    });
+
     it('MyInitialClass extends SubClassA', () => {
         expect(myInitialClassFile).to.contain('meh');
         expect(myInitialClassFile).to.contain('myproperty');
@@ -51,7 +59,7 @@ describe('CLI simple generation - extends app', () => {
     });
 
     it('CharactersService extends AbstractService', () => {
-        let file = read(distFolder + '/injectables/CharactersService.html');
+        const file = read(distFolder + '/injectables/CharactersService.html');
         expect(file).to.contain(
             'code><a href="../injectables/AbstractService.html" target="_self" >AbstractService'
         );