feat: remove uses of rxjs patch operators

Usages of RxJS operators should use the "longhand" syntax, which avoids polluting the Observable.prototype in userland. Refactors the entire codebase not to use the patch operators from RxJS, because they pollute the user's setup. Instead, opts into importing the operators directly. > Refs angular/components#2622.
angular · Jul 17, 2017 · dada5fd · dada5fd
1 parent 732cd53
commit dada5fd
Show file tree

Hide file tree

Showing 20 changed files with 47 additions and 90 deletions.
diff --git a/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import 'rxjs/add/operator/filter';
 
 @Component({
   selector: 'demo-responsive-flex-directive',

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts
@@ -1,6 +1,5 @@
 import {Component, Inject, OnDestroy} from '@angular/core';
 import {Subscription} from "rxjs/Subscription";
-import 'rxjs/add/operator/filter';
 
 import {MediaChange} from "../../../lib/media-query/media-change";
 import { ObservableMedia } from "../../../lib/media-query/observable-media";

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import 'rxjs/add/operator/filter';
 
 @Component({
   selector: 'demo-responsive-style',

diff --git a/src/demo-app/app/github-issues/issue.181.demo.ts b/src/demo-app/app/github-issues/issue.181.demo.ts
@@ -1,6 +1,4 @@
 import {Component} from '@angular/core';
-import 'rxjs/add/operator/filter';
-
 
 @Component({
   selector: 'demo-issue-181',

diff --git a/src/demo-app/app/github-issues/issue.266.demo.ts b/src/demo-app/app/github-issues/issue.266.demo.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import 'rxjs/add/operator/filter';
 
 @Component({
   selector: 'demo-issue-266',

diff --git a/src/demo-app/app/github-issues/splitter/split-handle.directive.ts b/src/demo-app/app/github-issues/splitter/split-handle.directive.ts
@@ -1,9 +1,8 @@
 import { Directive, ElementRef, Output } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/takeUntil';
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/takeUntil';
-import 'rxjs/add/operator/switchMap';
+
+import {takeUntil} from 'rxjs/operator/takeUntil';
+import {switchMap} from 'rxjs/operator/switchMap';
 
 @Directive({
   selector: '[ngxSplitHandle]',
@@ -23,14 +22,14 @@ export class SplitHandleDirective {
     const mousemove$ = Observable.fromEvent(document, 'mousemove').map(getMouseEventPosition);
     const mouseup$ = Observable.fromEvent(document, 'mouseup');
 
-    this.drag = mousedown$
-        .switchMap(mousedown =>
-          mousemove$.map(mousemove => ({
-            x: mousemove.x,
-            y: mousemove.y
-          }))
-          .takeUntil(mouseup$)
-        );
+    this.drag = takeUntil.call(
+        switchMap.call(mousedown$, mousedown =>
+            mousemove$.map(mousemove => ({
+              x: mousemove.x,
+              y: mousemove.y
+            }))
+        ),
+        mouseup$);
   }
 
 }
diff --git a/src/demo-app/browser/vendor.ts b/src/demo-app/browser/vendor.ts
@@ -7,6 +7,3 @@ import '@angular/common';
 import '@angular/forms';
 import '@angular/router';
 import '@angular/material';
-
-// RxJS
-import 'rxjs/add/operator/map';
diff --git a/src/lib/flexbox/responsive/responsive-activation.spec.ts b/src/lib/flexbox/responsive/responsive-activation.spec.ts
@@ -8,9 +8,6 @@
 
 // RxJS Operators used by the classes...
 
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-
 import {TestBed, inject} from '@angular/core/testing';
 
 import {DEFAULT_BREAKPOINTS_PROVIDER} from '../../media-query/breakpoints/break-points-provider';

diff --git a/src/lib/flexbox/responsive/responsive-activation.ts b/src/lib/flexbox/responsive/responsive-activation.ts
@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Subscription} from 'rxjs/Subscription';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/filter';
-import {extendObject} from '../../utils/object-extend';
+import {map} from 'rxjs/operator/map';
 
 import {MediaChange, MediaQuerySubscriber} from '../../media-query/media-change';
 import {BreakPoint} from '../../media-query/breakpoints/break-point';
 import {MediaMonitor} from '../../media-query/media-monitor';
 
+import {extendObject} from '../../utils/object-extend';
+
 export declare type SubscriptionList = Subscription[ ];
 
 export interface BreakPointX extends BreakPoint {
@@ -118,8 +118,7 @@ export class ResponsiveActivation {
         };
 
         subscriptions.push(
-            this.mediaMonitor.observe(bp.alias)
-                .map(buildChanges)
+            map.call(this.mediaMonitor.observe(bp.alias), buildChanges)
                 .subscribe(change => {
                   this._onMonitorEvents(change);
                 })

diff --git a/src/lib/media-query/breakpoints/data/break-points.spec.ts b/src/lib/media-query/breakpoints/data/break-points.spec.ts
@@ -6,11 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// RxJS Operators used by the classes...
-
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-
 import {TestBed, inject, async} from '@angular/core/testing';
 
 import {BreakPoint} from '../break-point';

diff --git a/src/lib/media-query/breakpoints/data/orientation-break-points.spec.ts b/src/lib/media-query/breakpoints/data/orientation-break-points.spec.ts
@@ -6,11 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// RxJS Operators used by the classes...
-
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-
 import {TestBed, inject, async} from '@angular/core/testing';
 
 import {BreakPoint} from '../break-point';

diff --git a/src/lib/media-query/match-media.spec.ts b/src/lib/media-query/match-media.spec.ts
@@ -5,10 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-// RxJS Operators used by the classes...
-
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
 import {Observable} from 'rxjs/Observable';
 
 import {TestBed, inject, async} from '@angular/core/testing';

diff --git a/src/lib/media-query/match-media.ts b/src/lib/media-query/match-media.ts
@@ -9,10 +9,7 @@ import {Injectable, NgZone} from '@angular/core';
 
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Observable} from 'rxjs/Observable';
-
-// RxJS Operators used by the classes...
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
+import {filter} from 'rxjs/operator/filter';
 
 import {MediaChange} from './media-change';
 
@@ -76,10 +73,9 @@ export class MatchMedia {
   observe(mediaQuery?: string): Observable<MediaChange> {
     this.registerQuery(mediaQuery);
 
-    return this._observable$
-        .filter((change: MediaChange) => {
-          return mediaQuery ? (change.mediaQuery === mediaQuery) : true;
-        });
+    return filter.call(this._observable$, (change: MediaChange) => {
+      return mediaQuery ? (change.mediaQuery === mediaQuery) : true;
+    });
   }
 
   /**

diff --git a/src/lib/media-query/media-monitor.spec.ts b/src/lib/media-query/media-monitor.spec.ts
@@ -5,11 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-// RxJS Operators used by the classes...
-
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-
 import {TestBed, inject, async} from '@angular/core/testing';
 
 import {DEFAULT_BREAKPOINTS_PROVIDER} from './breakpoints/break-points-provider';

diff --git a/src/lib/media-query/media-monitor.ts b/src/lib/media-query/media-monitor.ts
@@ -15,7 +15,8 @@ import {MediaChange} from './media-change';
 import {mergeAlias} from '../utils/add-alias';
 
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
+import {filter} from 'rxjs/operator/filter';
+import {map} from 'rxjs/operator/map';
 
 /**
  * MediaMonitor uses the MatchMedia service to observe mediaQuery changes (both activations and
@@ -81,10 +82,9 @@ export class MediaMonitor {
     let bp = this._breakpoints.findByAlias(alias) || this._breakpoints.findByQuery(alias);
     let hasAlias = (change: MediaChange) => (bp ? change.mqAlias !== "" : true);
     // Note: the raw MediaChange events [from MatchMedia] do not contain important alias information
-    return this._matchMedia
-        .observe(bp ? bp.mediaQuery : alias)
-        .map(change => mergeAlias(change, bp))
-        .filter(hasAlias);
+
+    let media$ = this._matchMedia.observe(bp ? bp.mediaQuery : alias);
+    return filter.call(map.call(media$, change => mergeAlias(change, bp)), hasAlias);
   }
 
   /**

diff --git a/src/lib/media-query/mock/mock-match-media.spec.ts b/src/lib/media-query/mock/mock-match-media.spec.ts
@@ -6,11 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// RxJS Operators used by the classes...
-
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-
 import {TestBed, inject, async} from '@angular/core/testing';
 
 import {MediaChange} from '../media-change';

diff --git a/src/lib/media-query/observable-media-provider.ts b/src/lib/media-query/observable-media-provider.ts
@@ -10,9 +10,6 @@ import {
   SkipSelf
 } from '@angular/core';
 
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/filter';
-
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
 
 import {MatchMedia} from './match-media';

diff --git a/src/lib/media-query/observable-media.spec.ts b/src/lib/media-query/observable-media.spec.ts
@@ -5,14 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
-// RxJS Operators used by the classes...
-
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-
 import {TestBed, inject, async} from '@angular/core/testing';
 
+import {filter} from 'rxjs/operator/filter';
+import {map} from 'rxjs/operator/map';
+
 import {BreakPoint} from './breakpoints/break-point';
 import {BREAKPOINTS} from './breakpoints/break-points-token';
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
@@ -71,13 +68,15 @@ describe('observable-media', () => {
         [ObservableMedia, MatchMedia],
         (mediaService, matchMedia) => {
           let count = 0,
-              subscription = mediaService
-                  .asObservable()
-                  .filter(change => change.mqAlias == 'md')
-                  .map(change => change.mqAlias)
-                  .subscribe((alias) => {
-                    count += 1;
-                  });
+              subscription = map.call(
+                  filter.call(
+                      mediaService.asObservable(),
+                      change => change.mqAlias == 'md'
+                  ),
+                  change => change.mqAlias
+              ).subscribe(_ => {
+                count += 1;
+              });
 
 
           // Activate mediaQuery associated with 'md' alias

diff --git a/src/lib/media-query/observable-media.ts b/src/lib/media-query/observable-media.ts
@@ -9,8 +9,9 @@ import {Injectable} from '@angular/core';
 
 import {Subscription} from 'rxjs/Subscription';
 import {Observable, Subscribable} from "rxjs/Observable";
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/filter';
+
+import {filter} from 'rxjs/operator/filter';
+import {map} from 'rxjs/operator/map';
 
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
 
@@ -151,10 +152,14 @@ export class MediaService implements ObservableMedia {
      * Inject associated (if any) alias information into the MediaChange event
      * Exclude mediaQuery activations for overlapping mQs. List bounded mQ ranges only
      */
-    return this.mediaWatcher.observe()
-        .filter(activationsOnly)
-        .map(addAliasInformation)
-        .filter(excludeOverlaps);
+    return filter.call(
+        map.call(
+            filter.call(
+                this.mediaWatcher.observe(),
+                activationsOnly
+            ),
+            addAliasInformation),
+        excludeOverlaps);
   }
 
   /**

diff --git a/src/lib/module.ts b/src/lib/module.ts
@@ -5,8 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
 
 import {ModuleWithProviders, NgModule} from '@angular/core';
 import {MediaQueriesModule} from './media-query/_module';