fix: use rxjs lettable operators

BREAKING CHANGES:
rxjs >=5.5.0 is now required

package.json

@@ -38,7 +38,7 @@
     "@angular/common": ">=5.0.0 <6.0.0 || >=5.0.0-beta <6.0.0",
     "@angular/core": ">=5.0.0 <6.0.0 || >=5.0.0-beta <6.0.0",
     "mapbox-gl": "0.42.2",
-    "rxjs": "^5.5.5"
+    "rxjs": "^5.5.0"
   },
   "devDependencies": {
     "@angular/animations": "^5.1.1",
@@ -79,6 +79,7 @@
     "protractor": "~5.2.2",
     "protractor-browser-logs": "^1.0.351",
     "rxjs": "^5.5.5",
+    "rxjs-tslint-rules": "^3.3.0",
     "standard-version": "^4.2.0",
     "ts-node": "~4.0.1",
     "tslint": "~5.8.0",

src/app/demo/examples/live-update-feature.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { LngLatLike } from 'mapbox-gl';
 import { of } from 'rxjs/observable/of';
-import 'rxjs/add/operator/delay';
+import { delay } from 'rxjs/operators/delay';
 
 const hike = require('./hike.geo.json');
 
@@ -46,26 +46,26 @@ export class LiveUpdateFeatureComponent implements OnInit {
   constructor() { }
 
   ngOnInit() {
-    of(hike)
-      .delay(500) // Simulate call
-      .subscribe((data) => {
-        const coordinates = data.features[0].geometry.coordinates;
-        data.features[0].geometry.coordinates = [coordinates[0]];
-        this.data = data;
-        this.center = coordinates[0];
-        this.zoom = [14];
-        this.pitch = 30;
-        let i = 0;
-        const timer = window.setInterval(() => {
-          if (i < coordinates.length) {
-            this.center = coordinates[i];
-            data.features[0].geometry.coordinates.push(coordinates[i]);
-            this.data = { ...this.data };
-            i++;
-          } else {
-            window.clearInterval(timer);
-          }
-        }, 10);
-      });
+    of(hike).pipe(
+      delay(500), // Simulate call
+    ).subscribe((data) => {
+      const coordinates = data.features[0].geometry.coordinates;
+      data.features[0].geometry.coordinates = [coordinates[0]];
+      this.data = data;
+      this.center = coordinates[0];
+      this.zoom = [14];
+      this.pitch = 30;
+      let i = 0;
+      const timer = window.setInterval(() => {
+        if (i < coordinates.length) {
+          this.center = coordinates[i];
+          data.features[0].geometry.coordinates.push(coordinates[i]);
+          this.data = { ...this.data };
+          i++;
+        } else {
+          window.clearInterval(timer);
+        }
+      }, 10);
+    });
   }
 }

src/app/lib/layer/layer.component.ts

@@ -32,7 +32,6 @@ import {
   VectorSource,
   VideoSource
 } from 'mapbox-gl';
-import 'rxjs/add/operator/switchMap';
 import { MapService } from '../map/map.service';
 
 @Component({

src/app/lib/map/map.component.ts

@@ -11,7 +11,6 @@ import {
   PointLike,
   Style
 } from 'mapbox-gl';
-import 'rxjs/add/operator/first';
 import { MapService } from './map.service';
 import {
   AfterViewInit,

src/app/lib/map/map.service.spec.ts

@@ -1,8 +1,9 @@
 import { EventEmitter } from '@angular/core';
-import { TestBed, inject } from '@angular/core/testing';
+import { inject, TestBed } from '@angular/core/testing';
 
+import { EventData, MapBoxZoomEvent, MapMouseEvent, MapTouchEvent, Style } from 'mapbox-gl';
+import { first } from 'rxjs/operators/first';
 import { MapService } from './map.service';
-import { MapMouseEvent, MapTouchEvent, EventData, MapBoxZoomEvent, Style } from 'mapbox-gl';
 import { MapEvent } from './map.types';
 
 const countries = require('./countries.geo.json');
@@ -100,13 +101,13 @@ describe('MapService', () => {
   }));
 
   it('should fire load event', (done: DoneFn) => {
-    mapEvents.load.first().subscribe(() => {
+    mapEvents.load.pipe(first()).subscribe(() => {
       done();
     });
   });
 
   it('should update minZoom', (done: DoneFn) => inject([MapService], (service: MapService) => {
-    mapEvents.load.first().subscribe(() => {
+    mapEvents.load.pipe(first()).subscribe(() => {
       service.updateMinZoom(6);
       expect(service.mapInstance.getMinZoom()).toEqual(6);
       done();

src/app/lib/source/canvas-source.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { CanvasSourceOptions } from 'mapbox-gl';
-import 'rxjs/add/operator/switchMap';
 import { MapService } from '../map/map.service';
 
 @Component({

src/app/lib/source/geojson/draggable.directive.ts

@@ -1,10 +1,10 @@
-import { FeatureComponent } from './feature.component';
 import { Directive, Host, Input, OnDestroy, OnInit } from '@angular/core';
-import 'rxjs/add/operator/takeUntil';
 import { merge } from 'rxjs/observable/merge';
+import { takeUntil } from 'rxjs/operators/takeUntil';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
 import { LayerComponent } from '../../layer/layer.component';
 import { MapService } from '../../map/map.service';
+import { FeatureComponent } from './feature.component';
 
 @Directive({
   selector: '[mglDraggable]'
@@ -25,41 +25,41 @@ export class DraggableDirective implements OnInit, OnDestroy {
       throw new Error('mglDraggable only support point feature');
     }
     this.MapService.mapCreated$.subscribe(() => {
-      this.source.mouseEnter
-        .takeUntil(this.destroyed$)
-        .subscribe((evt) => {
-          const feature: GeoJSON.Feature<any> = this.MapService.queryRenderedFeatures(
-            evt.point,
-            {
-              layers: [this.source.id],
-              filter: [
-                'all',
-                ['==', '$type', 'Point'],
-                ['==', '$id', this.FeatureComponent.id]
-              ]
-            }
-          )[0];
-          if (!feature) {
-            return;
+      this.source.mouseEnter.pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe((evt) => {
+        const feature: GeoJSON.Feature<any> = this.MapService.queryRenderedFeatures(
+          evt.point,
+          {
+            layers: [this.source.id],
+            filter: [
+              'all',
+              ['==', '$type', 'Point'],
+              ['==', '$id', this.FeatureComponent.id]
+            ]
           }
-          this.MapService.changeCanvasCursor('move');
-          this.MapService.updateDragPan(false);
-          this.MapService.mapEvents.mouseDown
-            .takeUntil(merge(this.destroyed$, this.source.mouseLeave))
-            .subscribe(() => {
-              this.MapService.mapEvents.mouseMove
-                .takeUntil(merge(this.destroyed$, this.MapService.mapEvents.mouseUp))
-                .subscribe((evt) => {
-                  this.FeatureComponent.updateCoordinates([evt.lngLat.lng, evt.lngLat.lat]);
-                });
-            });
-        });
-      this.source.mouseLeave
-        .takeUntil(this.destroyed$)
-        .subscribe(() => {
-          this.MapService.changeCanvasCursor('');
-          this.MapService.updateDragPan(true);
+        )[0];
+        if (!feature) {
+          return;
+        }
+        this.MapService.changeCanvasCursor('move');
+        this.MapService.updateDragPan(false);
+        this.MapService.mapEvents.mouseDown.pipe(
+          takeUntil(merge(this.destroyed$, this.source.mouseLeave))
+        ).subscribe(() => {
+          this.MapService.mapEvents.mouseMove.pipe(
+            takeUntil(merge(this.destroyed$, this.MapService.mapEvents.mouseUp))
+          ).subscribe((evt) => {
+            this.FeatureComponent.updateCoordinates([evt.lngLat.lng, evt.lngLat.lat]);
+          });
         });
+      });
+      this.source.mouseLeave.pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe(() => {
+        this.MapService.changeCanvasCursor('');
+        this.MapService.updateDragPan(true);
+      });
     });
   }
 

src/app/lib/source/geojson/geojson-source.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { GeoJSONSource, GeoJSONSourceOptions } from 'mapbox-gl';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/switchMap';
+import { debounceTime } from 'rxjs/operators/debounceTime';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
 import { MapService } from '../../map/map.service';
@@ -52,7 +51,9 @@ export class GeoJSONSourceComponent implements OnInit, OnDestroy, OnChanges, Geo
         clusterRadius: this.clusterRadius,
         clusterMaxZoom: this.clusterMaxZoom,
       });
-      this.sub = this.updateFeatureData.debounceTime(0).subscribe(() => {
+      this.sub = this.updateFeatureData.pipe(
+        debounceTime(0)
+      ).subscribe(() => {
         const source = this.MapService.getSource<GeoJSONSource>(this.id);
         source.setData(this.data!);
       });

src/app/lib/source/image-source.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { ImageSourceOptions } from 'mapbox-gl';
-import 'rxjs/add/operator/switchMap';
 import { MapService } from '../map/map.service';
 
 @Component({

src/app/lib/source/raster-source.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { RasterSource } from 'mapbox-gl';
-import 'rxjs/add/operator/switchMap';
 import { MapService } from '../map/map.service';
 
 @Component({

src/app/lib/source/vector-source.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { VectorSource } from 'mapbox-gl';
-import 'rxjs/add/operator/switchMap';
 import { MapService } from '../map/map.service';
 
 @Component({

src/app/lib/source/video-source.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { VideoSourceOptions } from 'mapbox-gl';
-import 'rxjs/add/operator/switchMap';
 import { MapService } from '../map/map.service';
 
 @Component({

tslint.json

@@ -3,6 +3,9 @@
     "codelyzer",
     "tslint-consistent-codestyle"
   ],
+  "extends": [
+    "rxjs-tslint-rules"
+  ],
   "rules": {
     "callable-types": true,
     "class-name": true,
@@ -129,6 +132,18 @@
     "no-parameter-reassignment": true,
     "no-duplicate-imports": true,
     "space-within-parens": false,
-    "object-literal-shorthand": true
+    "object-literal-shorthand": true,
+    "rxjs-no-add": {
+      "severity": "error"
+    },
+    "rxjs-no-operator": {
+      "severity": "error"
+    },
+    "rxjs-no-patched": {
+      "severity": "error"
+    },
+    "rxjs-no-wholesale": {
+      "severity": "error"
+    }
   }
 }

yarn.lock

@@ -324,11 +324,11 @@
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
 
-"@types/v8flags@github:types/npm-v8flags#de224ae1cd5fd7dbb4e7158a6cc7a29e5315930d":
+"@types/v8flags@types/npm-v8flags#de224ae1cd5fd7dbb4e7158a6cc7a29e5315930d":
   version "2.0.0"
   resolved "https://codeload.github.com/types/npm-v8flags/tar.gz/de224ae1cd5fd7dbb4e7158a6cc7a29e5315930d"
 
-"@types/yn@github:types/npm-yn#ca75f6c82940fae6a06fb41d2d37a6aa9b4ea8e9":
+"@types/yn@types/npm-yn#ca75f6c82940fae6a06fb41d2d37a6aa9b4ea8e9":
   version "2.0.0"
   resolved "https://codeload.github.com/types/npm-yn/tar.gz/ca75f6c82940fae6a06fb41d2d37a6aa9b4ea8e9"
 
@@ -6069,12 +6069,25 @@ rw@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
 
+rxjs-tslint-rules@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/rxjs-tslint-rules/-/rxjs-tslint-rules-3.3.0.tgz#78309765e04ab7358e233a30b9f424dd192bb5b3"
+  dependencies:
+    resolve "^1.4.0"
+    tslib "^1.8.0"
+
 rxjs@^5.5.2:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.2.tgz#28d403f0071121967f18ad665563255d54236ac3"
   dependencies:
     symbol-observable "^1.0.1"
 
+rxjs@^5.5.5:
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.5.tgz#e164f11d38eaf29f56f08c3447f74ff02dd84e97"
+  dependencies:
+    symbol-observable "1.0.1"
+
 [email protected], safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -6775,6 +6788,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+[email protected]:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+
 symbol-observable@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
@@ -7008,6 +7025,10 @@ tslib@^1.7.1:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.0.tgz#dc604ebad64bcbf696d613da6c954aa0e7ea1eb6"
 
+tslib@^1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.1.tgz#6946af2d1d651a7b1863b531d6e5afa41aa44eac"
+
 tslint-consistent-codestyle@^1.11.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/tslint-consistent-codestyle/-/tslint-consistent-codestyle-1.11.0.tgz#051493eeb3536a74e98d14b66f38028a785f8c2b"