From 73530cd4ecbf7002ad92f62a1edb677db5ca13fd Mon Sep 17 00:00:00 2001 From: Wykks Date: Thu, 14 Dec 2017 22:09:26 +0100 Subject: [PATCH] fix: use rxjs lettable operators BREAKING CHANGES: rxjs >=5.5.0 is now required --- package.json | 3 +- .../examples/live-update-feature.component.ts | 44 ++++++------ src/app/lib/layer/layer.component.ts | 1 - src/app/lib/map/map.component.ts | 1 - src/app/lib/map/map.service.spec.ts | 9 +-- src/app/lib/source/canvas-source.component.ts | 1 - .../lib/source/geojson/draggable.directive.ts | 70 +++++++++---------- .../geojson/geojson-source.component.ts | 7 +- src/app/lib/source/image-source.component.ts | 1 - src/app/lib/source/raster-source.component.ts | 1 - src/app/lib/source/vector-source.component.ts | 1 - src/app/lib/source/video-source.component.ts | 1 - tslint.json | 17 ++++- yarn.lock | 25 ++++++- 14 files changed, 107 insertions(+), 75 deletions(-) diff --git a/package.json b/package.json index 6a8e60220..90f2544a3 100644 --- a/package.json +++ b/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", diff --git a/src/app/demo/examples/live-update-feature.component.ts b/src/app/demo/examples/live-update-feature.component.ts index a3f15949d..f45ef3bf4 100644 --- a/src/app/demo/examples/live-update-feature.component.ts +++ b/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); + }); } } diff --git a/src/app/lib/layer/layer.component.ts b/src/app/lib/layer/layer.component.ts index 00fa2115c..6eef1d95e 100644 --- a/src/app/lib/layer/layer.component.ts +++ b/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({ diff --git a/src/app/lib/map/map.component.ts b/src/app/lib/map/map.component.ts index f8899b507..7e9d425b6 100644 --- a/src/app/lib/map/map.component.ts +++ b/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, diff --git a/src/app/lib/map/map.service.spec.ts b/src/app/lib/map/map.service.spec.ts index e1b54a532..f62b55cc8 100644 --- a/src/app/lib/map/map.service.spec.ts +++ b/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(); diff --git a/src/app/lib/source/canvas-source.component.ts b/src/app/lib/source/canvas-source.component.ts index ade1fd5da..29c07491c 100644 --- a/src/app/lib/source/canvas-source.component.ts +++ b/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({ diff --git a/src/app/lib/source/geojson/draggable.directive.ts b/src/app/lib/source/geojson/draggable.directive.ts index 0a0780275..8ad91ab32 100644 --- a/src/app/lib/source/geojson/draggable.directive.ts +++ b/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 = 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 = 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); + }); }); } diff --git a/src/app/lib/source/geojson/geojson-source.component.ts b/src/app/lib/source/geojson/geojson-source.component.ts index afb4c8b7e..614ad0b82 100644 --- a/src/app/lib/source/geojson/geojson-source.component.ts +++ b/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(this.id); source.setData(this.data!); }); diff --git a/src/app/lib/source/image-source.component.ts b/src/app/lib/source/image-source.component.ts index 9df177446..64fcc7a61 100644 --- a/src/app/lib/source/image-source.component.ts +++ b/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({ diff --git a/src/app/lib/source/raster-source.component.ts b/src/app/lib/source/raster-source.component.ts index f97554ae6..072225abd 100644 --- a/src/app/lib/source/raster-source.component.ts +++ b/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({ diff --git a/src/app/lib/source/vector-source.component.ts b/src/app/lib/source/vector-source.component.ts index fc576411c..aad72bafa 100644 --- a/src/app/lib/source/vector-source.component.ts +++ b/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({ diff --git a/src/app/lib/source/video-source.component.ts b/src/app/lib/source/video-source.component.ts index 0d8273d76..3a61b705c 100644 --- a/src/app/lib/source/video-source.component.ts +++ b/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({ diff --git a/tslint.json b/tslint.json index 273881ea6..9e299bfc0 100644 --- a/tslint.json +++ b/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" + } } } diff --git a/yarn.lock b/yarn.lock index cc241689d..502bd10b5 100644 --- a/yarn.lock +++ b/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" + safe-buffer@5.1.1, 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" +symbol-observable@1.0.1: + 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"