Turned on strict mode and fixed the compilation errors

zefoy · May 18, 2018 · 0b138af · 0b138af
1 parent 8ac48fc
commit 0b138af
Show file tree

Hide file tree

Showing 10 changed files with 222 additions and 186 deletions.
diff --git a/example/src/app/app.component.ts b/example/src/app/app.component.ts
@@ -47,8 +47,8 @@ export class AppComponent {
     hideOnClick: false
   };
 
-  @ViewChild(SwiperComponent) componentRef: SwiperComponent;
-  @ViewChild(SwiperDirective) directiveRef: SwiperDirective;
+  @ViewChild(SwiperComponent) componentRef?: SwiperComponent;
+  @ViewChild(SwiperDirective) directiveRef?: SwiperDirective;
 
   constructor() {}
 
@@ -90,9 +90,9 @@ export class AppComponent {
       this.config.navigation = true;
     }
 
-    if (this.type === 'directive') {
+    if (this.type === 'directive' && this.directiveRef) {
       this.directiveRef.setIndex(0);
-    } else {
+    } else if (this.type === 'component' && this.componentRef && this.componentRef.directiveRef) {
       this.componentRef.directiveRef.setIndex(0);
     }
   }

diff --git a/example/src/tsconfig.json b/example/src/tsconfig.json
@@ -1,29 +1,7 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "",
-    "declaration": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "inlineSources": false,
-    "lib": [
-      "es2015",
-      "dom"
-    ],
-    "module": "es2015",
-    "moduleResolution": "node",
-    "outDir": "./dist",
-    "paths": {
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ]
-    },
-    "sourceMap": true,
-    "target": "es5",
-    "typeRoots": [
-      "./node_modules/@types"
-    ],
-    "types": [
-      "node"
-    ]
+    "outDir": "../dist",
+    "rootDir": "."
   }
 }
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "baseUrl": "",
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "inlineSources": false,
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "paths": {
+      "@angular/*": [
+        "./node_modules/@angular/*"
+      ]
+    },
+    "rootDir": ".",
+    "strict": true,
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "./node_modules/@types"
+    ],
+    "types": [
+      "node"
+      // Add this when 4.x types available: "swiper"
+    ]
+  }
+}
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -0,0 +1 @@
+declare module 'swiper/dist/js/swiper.js';
diff --git a/src/lib/swiper.component.html b/src/lib/swiper.component.html
@@ -5,8 +5,8 @@
 
   <div class="swiper-scrollbar" [hidden]="swiperConfig?.scrollbar !== true && swiperConfig?.scrollbar?.el !== '.swiper-scrollbar'"></div>
 
-  <div class="swiper-button-prev" [hidden]="swiperConfig?.navigation !== true && swiperConfig?.navigation?.prevEl !== '.swiper-button-prev'" [attr.disabled]="isAtFirst || null"></div>
+  <div class="swiper-button-prev" [hidden]="swiperConfig?.navigation !== true && swiperConfig?.navigation?.prevEl !== '.swiper-button-prev'" [attr.disabled]="isAtFirst || null"></div>
   <div class="swiper-button-next" [hidden]="swiperConfig?.navigation !== true && swiperConfig?.navigation?.nextEl !== '.swiper-button-next'" [attr.disabled]="isAtLast || null"></div>
 
-  <div class="swiper-pagination" [hidden]="swiperConfig?.pagination !== true && swiperConfig?.pagination?.el !== '.swiper-pagination'" (click)="directiveRef.setIndex($event.target.getAttribute('index'))"></div>
+  <div class="swiper-pagination" [hidden]="swiperConfig?.pagination !== true && swiperConfig?.pagination?.el !== '.swiper-pagination'" (click)="directiveRef?.setIndex($event.target.getAttribute('index'))"></div>
 </div>
diff --git a/src/lib/swiper.component.ts b/src/lib/swiper.component.ts
@@ -2,13 +2,12 @@ import { PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { NgZone, Inject, Optional, ElementRef, Component,
   AfterViewInit, OnDestroy, Input, Output, EventEmitter,
-  ViewChild, ViewEncapsulation } from '@angular/core';
-
-import { SWIPER_CONFIG } from './swiper.interfaces';
+  ViewChild, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
 
 import { SwiperDirective } from './swiper.directive';
 
-import { SwiperEvents, SwiperConfig, SwiperConfigInterface } from './swiper.interfaces';
+import { SWIPER_CONFIG, SwiperConfig, SwiperConfigInterface,
+  SwiperEvent, SwiperEvents } from './swiper.interfaces';
 
 @Component({
   selector: 'swiper',
@@ -18,34 +17,34 @@ import { SwiperEvents, SwiperConfig, SwiperConfigInterface } from './swiper.inte
   encapsulation: ViewEncapsulation.None
 })
 export class SwiperComponent implements AfterViewInit, OnDestroy {
-  private mo: any;
+  private mo: MutationObserver | null = null;
 
-  public swiperConfig: any;
-  public paginationBackup: any;
-  public paginationConfig: any;
+  public swiperConfig: any = null;
+  public paginationBackup: any = null;
+  public paginationConfig: any = null;
 
-  @Input() index: number = null;
+  @Input() index: number | null = null;
 
   @Input() disabled: boolean = false;
 
-  @Input() config: SwiperConfigInterface;
+  @Input() config?: SwiperConfigInterface;
 
   @Input() useSwiperClass: boolean = true;
 
   @Output() indexChange = new EventEmitter<number>();
 
-  @ViewChild('swiperSlides') swiperSlides: ElementRef;
+  @ViewChild('swiperSlides') swiperSlides?: ElementRef;
 
-  @ViewChild(SwiperDirective) directiveRef: SwiperDirective;
+  @ViewChild(SwiperDirective) directiveRef?: SwiperDirective;
 
   get isAtLast(): boolean {
-    return (!this.directiveRef || !this.directiveRef.swiper) ?
-      false : this.directiveRef.swiper['isEnd'];
+    return (!this.directiveRef || !this.directiveRef.swiper()) ?
+      false : this.directiveRef.swiper()['isEnd'];
   }
 
   get isAtFirst(): boolean {
-    return (!this.directiveRef || !this.directiveRef.swiper) ?
-      false : this.directiveRef.swiper['isBeginning'];
+    return (!this.directiveRef || !this.directiveRef.swiper()) ?
+      false : this.directiveRef.swiper()['isBeginning'];
   }
 
   @Output('init'                       ) S_INIT                           = new EventEmitter<any>();
@@ -98,7 +97,8 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
   @Output('slideChangeTransitionEnd'   ) S_SLIDECHANGETRANSITIONEND       = new EventEmitter<any>();
   @Output('slideChangeTransitionStart' ) S_SLIDECHANGETRANSITIONSTART     = new EventEmitter<any>();
 
-  constructor(private zone: NgZone, @Inject(PLATFORM_ID) private platformId: Object,
+  constructor(private zone: NgZone, private cdRef: ChangeDetectorRef,
+    @Inject(PLATFORM_ID) private platformId: Object,
     @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperConfigInterface) {}
 
   ngAfterViewInit(): void {
@@ -109,7 +109,7 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
     this.zone.runOutsideAngular(() => {
       this.updateClasses();
 
-      if (typeof MutationObserver !== 'undefined') {
+      if (this.swiperSlides && typeof MutationObserver !== 'undefined') {
         this.mo = new MutationObserver((mutations) => {
           this.updateClasses();
         });
@@ -122,10 +122,15 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
       if (this.directiveRef) {
         this.directiveRef.indexChange = this.indexChange;
 
-        SwiperEvents.forEach((eventName: string) => {
-          eventName = `S_${eventName.replace('swiper', '').toUpperCase()}`;
+        SwiperEvents.forEach((eventName: SwiperEvent) => {
+          if (this.directiveRef) {
+            const output = `S_${eventName.replace('swiper', '').toUpperCase()}`;
+
+            const directiveOutput = output as keyof SwiperDirective;
+            const componentOutput = output as keyof SwiperComponent;
 
-          this.directiveRef[eventName] = this[eventName];
+            this.directiveRef[directiveOutput] = this[componentOutput] as EventEmitter<any>;
+          }
         });
       }
     }, 0);
@@ -160,7 +165,7 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
           el: '.swiper-pagination',
 
           renderBullet: (index: number, className: string) => {
-            const children = this.swiperSlides.nativeElement.children;
+            const children = this.swiperSlides ? this.swiperSlides.nativeElement.children : [];
 
             let bullet = `<span class="${className} ${className}-middle" index="${index}"></span>`;
 
@@ -182,24 +187,28 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
       }
     }
 
-    return this.config;
+    return this.config as SwiperConfigInterface;
   }
 
   private updateClasses(): void {
-    let updateNeeded = false;
+    if (this.swiperSlides) {
+      let updateNeeded = false;
 
-    const children = this.swiperSlides.nativeElement.children;
+      const children = this.swiperSlides.nativeElement.children;
 
-    for (let i = 0; i < children.length; i++) {
-      if (!children[i].classList.contains('swiper-slide')) {
-        updateNeeded = true;
+      for (let i = 0; i < children.length; i++) {
+        if (!children[i].classList.contains('swiper-slide')) {
+          updateNeeded = true;
 
-        children[i].classList.add('swiper-slide');
+          children[i].classList.add('swiper-slide');
+        }
       }
-    }
 
-    if (updateNeeded) {
-      this.directiveRef.update();
+      if (updateNeeded && this.directiveRef) {
+        this.directiveRef.update();
+      }
     }
+
+    this.cdRef.detectChanges();
   }
 }
diff --git a/src/lib/swiper.directive.ts b/src/lib/swiper.directive.ts
@@ -6,9 +6,8 @@ import { NgZone, Inject, Optional, ElementRef, Directive,
   AfterViewInit, OnDestroy, DoCheck, OnChanges, Input, Output, EventEmitter,
   SimpleChanges, KeyValueDiffer, KeyValueDiffers } from '@angular/core';
 
-import { SWIPER_CONFIG } from './swiper.interfaces';
-
-import { SwiperEvents, SwiperConfig, SwiperConfigInterface } from './swiper.interfaces';
+import { SWIPER_CONFIG, SwiperConfig, SwiperConfigInterface,
+  SwiperEvent, SwiperEvents } from './swiper.interfaces';
 
 @Directive({
   selector: '[swiper]',
@@ -17,9 +16,9 @@ import { SwiperEvents, SwiperConfig, SwiperConfigInterface } from './swiper.inte
 export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnChanges {
   private instance: any;
 
-  private configDiff: KeyValueDiffer<string, any>;
+  private initialIndex: number | null = null;
 
-  private initialIndex: number;
+  private configDiff: KeyValueDiffer<string, any> | null = null;
 
   @Input()
   set index(index: number) {
@@ -30,7 +29,7 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
 
   @Input() disabled: boolean = false;
 
-  @Input('swiper') config: SwiperConfigInterface;
+  @Input('swiper') config?: SwiperConfigInterface;
 
   @Output() indexChange = new EventEmitter<number>();
 
@@ -127,7 +126,7 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
       this.initialIndex = null;
     }
 
-    params['on'] = {
+    params.on = {
       slideChange: () => {
         this.zone.run(() => {
           if (this.instance) {
@@ -146,18 +145,23 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
     }
 
     // Add native Swiper event handling
-    SwiperEvents.forEach((eventName) => {
-      eventName = eventName.replace('swiper', '');
-      eventName = eventName.charAt(0).toLowerCase() + eventName.slice(1);
+    SwiperEvents.forEach((eventName: SwiperEvent) => {
+      let swiperEvent = eventName.replace('swiper', '');
+
+      swiperEvent = eventName.charAt(0).toLowerCase() + eventName.slice(1);
 
-      this.instance.on(eventName, (...args) => {
+      this.instance.on(swiperEvent, (...args: any[]) => {
         if (args.length === 1) {
           args = args[0];
         }
 
-        if (this[`S_${eventName.toUpperCase()}`].observers.length > 0) {
+        const output = `S_${swiperEvent.toUpperCase()}`;
+
+        const emitter = this[output as keyof SwiperDirective] as EventEmitter<any>;
+
+        if (emitter.observers.length > 0) {
           this.zone.run(() => {
-            this[`S_${eventName.toUpperCase()}`].emit(args);
+            emitter.emit(args);
           });
         }
       });
@@ -240,7 +244,7 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
 
   public getIndex(real?: boolean): number {
     if (!this.instance) {
-      return this.initialIndex;
+      return this.initialIndex || 0;
     } else {
       return real ? this.instance.realIndex : this.instance.activeIndex;
     }