Merge pull request #117 from mpalourdio/subscription_to_observable

Replace Subscription by Observable

Author: mpalourdio

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v6.0.0
+- Angular 8.x is now the default supported version.
+- The `subscription` in `NgHttpLoaderComponent` has completely been removed in favor of an `observable`. As there's no need to unsubscribe anymore, `ngOnDestroy` has been removed.
+- The `observable` initialization has been moved to `ngOnInit`.
+- The tests suite could fail (and succeed) in some unexpected ways. This was caused by some race conditions introduced in v5.0.0. Those are now (hopefully) fixed.
+ 
 ## v5.1.0
 - This release introduces 2 new options: 
     - **backdrop** (`true` by default): If set to `false`, the spinner background elements will remain clickable, without any background color.

README.md

@@ -34,7 +34,8 @@ The HTTP interceptor listens to all HTTP requests and shows a spinner / loader i
 | >=0.1.0 <0.4.0 | ^4.3.0             |
 | >=0.4.0 <1.0.0 | ^5.0.0             |
 | >=1.0.0 <3.2.0 | ^6.0.0             |
-| >=3.2.0        | ^7.0.0             |
+| >=3.2.0 <5.1.0 | ^7.0.0             |
+| >=6.0.0        | ^8.0.0             |
 
 If you experience errors like below, **please double check the version you use.**
 

browserslist

@@ -1,11 +1,12 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
-#
-# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
 
 > 0.5%
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11
+not IE 9-11 # For IE 9-11 support, remove 'not'.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-http-loader",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "scripts": {
     "ng": "ng",
     "build": "ng build",
@@ -25,6 +25,7 @@
     "ng5",
     "ng6",
     "ng7",
+    "ng8",
     "loader",
     "progressbar",
     "spinner",
@@ -36,44 +37,43 @@
     "url": "https://github.com/mpalourdio/ng-http-loader/issues"
   },
   "peerDependencies": {
-    "@angular/common": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "rxjs": "^6.3.3"
+    "@angular/common": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "rxjs": "^6.4.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
-    "@angular-devkit/build-ng-packagr": "~0.13.0",
-    "@angular/cli": "~7.3.0",
-    "@angular/common": "^7.0.0",
-    "@angular/compiler": "^7.0.0",
-    "@angular/compiler-cli": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/language-service": "^7.0.0",
-    "@angular/platform-browser": "^7.0.0",
-    "@angular/platform-browser-dynamic": "^7.0.0",
-    "@types/jasmine": "~2.8.8",
+    "@angular-devkit/build-angular": "~0.800.0",
+    "@angular-devkit/build-ng-packagr": "~0.800.0",
+    "@angular/cli": "~8.0.0",
+    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^8.0.0",
+    "@angular/compiler-cli": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "@angular/language-service": "^8.0.0",
+    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
-    "codelyzer": "~4.5.0",
-    "core-js": "^2.5.4",
+    "codelyzer": "^5.0.0",
     "coveralls": "^3.0.1",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.0.0",
+    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-firefox-launcher": "^1.1.0",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^4.2.0",
-    "rxjs": "^6.3.3",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "ng-packagr": "^5.1.0",
+    "rxjs": "^6.4.0",
     "rxjs-tslint-rules": "^4.13.0",
     "ts-node": "~7.0.0",
-    "tsickle": ">=0.34.0",
+    "tsickle": "^0.35.0",
     "tslib": "^1.9.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.2.2",
-    "zone.js": "~0.8.26"
+    "tslint": "~5.15.0",
+    "typescript": "~3.4.3",
+    "zone.js": "~0.9.1"
   },
   "engines": {
     "node": ">= 8.9.0",

polyfills.ts

@@ -21,9 +21,6 @@
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
@@ -46,7 +43,7 @@
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge

src/lib/components/ng-http-loader.component.ts

@@ -7,9 +7,9 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { BehaviorSubject, merge, Observable, Subscription, timer } from 'rxjs';
-import { debounce, distinctUntilChanged, partition, switchMap, tap } from 'rxjs/operators';
+import { Component, Input, OnInit } from '@angular/core';
+import { merge, Observable, partition, timer } from 'rxjs';
+import { debounce, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
 import { PendingRequestsInterceptor } from '../services/pending-requests-interceptor.service';
 import { SpinnerVisibilityService } from '../services/spinner-visibility.service';
 import { Spinkit } from '../spinkits';
@@ -19,10 +19,10 @@ import { Spinkit } from '../spinkits';
     templateUrl: './ng-http-loader.component.html',
     styleUrls: ['./ng-http-loader.component.scss']
 })
-export class NgHttpLoaderComponent implements OnDestroy, OnInit {
+export class NgHttpLoaderComponent implements OnInit {
+
     public spinkit = Spinkit;
-    private _isVisible$ = new BehaviorSubject<boolean>(false);
-    private subscriptions: Subscription;
+    public isVisible$: Observable<boolean>;
     private visibleUntil = Date.now();
 
     @Input() public backdrop = true;
@@ -38,37 +38,29 @@ export class NgHttpLoaderComponent implements OnDestroy, OnInit {
     @Input() public spinner = Spinkit.skWave;
 
     constructor(private pendingRequestsInterceptor: PendingRequestsInterceptor, private spinnerVisibility: SpinnerVisibilityService) {
-        const [showSpinner$, hideSpinner$] = partition((h: boolean) => h)(this.pendingRequestsInterceptor.pendingRequestsStatus$);
-
-        this.subscriptions = merge(
-            this.pendingRequestsInterceptor.pendingRequestsStatus$.pipe(
-                switchMap(() => showSpinner$.pipe(debounce(() => timer(this.debounceDelay))))
-            ),
-            showSpinner$.pipe(
-                switchMap(() => hideSpinner$.pipe(debounce(() => this.getVisibilityTimer$())))
-            ),
+    }
+
+    private initIsvisibleObservable(): void {
+        const [showSpinner$, hideSpinner$] = partition(this.pendingRequestsInterceptor.pendingRequestsStatus$, h => h);
+
+        this.isVisible$ = merge(
+            this.pendingRequestsInterceptor.pendingRequestsStatus$
+                .pipe(switchMap(() => showSpinner$.pipe(debounce(() => timer(this.debounceDelay))))),
+            showSpinner$
+                .pipe(switchMap(() => hideSpinner$.pipe(debounce(() => this.getVisibilityTimer$())))),
             this.spinnerVisibility.visibility$,
-        )
-            .pipe(
-                distinctUntilChanged(),
-                tap(h => this.updateExpirationDelay(h))
-            )
-            .subscribe(h => this._isVisible$.next(h));
+        ).pipe(
+            distinctUntilChanged(),
+            tap(h => this.updateExpirationDelay(h))
+        );
     }
 
     public ngOnInit(): void {
+        this.initIsvisibleObservable();
         this.nullifySpinnerIfEntryComponentIsDefined();
         this.initFilters();
     }
 
-    public ngOnDestroy(): void {
-        this.subscriptions.unsubscribe();
-    }
-
-    get isVisible$(): Observable<boolean> {
-        return this._isVisible$.asObservable();
-    }
-
     private nullifySpinnerIfEntryComponentIsDefined(): void {
         if (this.entryComponent) {
             this.spinner = null;

src/test/components/ng-http-loader.component.on-push.spec.ts

@@ -40,6 +40,7 @@ describe('NgHttpLoaderComponent OnPush', () => {
         component = fixture.componentInstance;
         http = TestBed.get(HttpClient);
         httpMock = TestBed.get(HttpTestingController);
+        fixture.detectChanges();
     });
 
     it('should work as expected when the host component has ChangeDetectionStrategy.OnPush', fakeAsync(() => {

src/test/components/ng-http-loader.component.outlet.spec.ts

@@ -10,7 +10,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
-import { BehaviorSubject } from 'rxjs';
+import { of } from 'rxjs';
 import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
 import { SkThreeBounceComponent } from '../../lib/components/sk-three-bounce/sk-three-bounce.component';
 import { SPINKIT_COMPONENTS } from '../../lib/spinkits';
@@ -32,12 +32,11 @@ describe('NgHttpLoaderComponentOutlet', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(NgHttpLoaderComponent);
         component = fixture.componentInstance;
+        fixture.detectChanges();
     });
 
     it('should be possible to specify an entryComponent', () => {
-        spyOnProperty(component, 'isVisible$')
-            .and.returnValue(new BehaviorSubject(true).asObservable());
-
+        component.isVisible$ = of(true);
         component.entryComponent = SkThreeBounceComponent;
         fixture.detectChanges();
 
@@ -50,48 +49,36 @@ describe('NgHttpLoaderComponentOutlet', () => {
     });
 
     it('should force [spinner] to null if [entryComponent] is defined', () => {
-        spyOnProperty(component, 'isVisible$')
-            .and.returnValue(new BehaviorSubject(true).asObservable());
-
         component.spinner = 'spinner-name';
         component.entryComponent = SkThreeBounceComponent;
-        fixture.detectChanges();
+        component.ngOnInit();
 
         expect(component.spinner).toBeNull();
     });
 
     it('should correctly check [entryComponent] with empty string', () => {
-        spyOnProperty(component, 'isVisible$')
-            .and.returnValue(new BehaviorSubject(true).asObservable());
-
         const spinnerName = 'spinner-name';
         component.spinner = spinnerName;
         component.entryComponent = '';
-        fixture.detectChanges();
+        component.ngOnInit();
 
         expect(component.spinner).toBe(spinnerName);
     });
 
     it('should correctly check [entryComponent] with null', () => {
-        spyOnProperty(component, 'isVisible$')
-            .and.returnValue(new BehaviorSubject(true).asObservable());
-
         const spinnerName = 'spinner-name';
         component.spinner = spinnerName;
         component.entryComponent = null;
-        fixture.detectChanges();
+        component.ngOnInit();
 
         expect(component.spinner).toBe(spinnerName);
     });
 
     it('should correctly check [entryComponent] with undefined', () => {
-        spyOnProperty(component, 'isVisible$')
-            .and.returnValue(new BehaviorSubject(true).asObservable());
-
         const spinnerName = 'spinner-name';
         component.spinner = spinnerName;
         component.entryComponent = undefined;
-        fixture.detectChanges();
+        component.ngOnInit();
 
         expect(component.spinner).toBe(spinnerName);
     });