feat(lib): 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 27, 2017 · f8dc7c2 · f8dc7c2
1 parent 311f903
commit f8dc7c2
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 70 deletions.
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
@@ -177,7 +176,7 @@ describe('observable-media', () => {
         providers: [
           BreakPointRegistry,   // Registry of known/used BreakPoint(s)
           MockMatchMediaProvider,
-          CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(CUSTOM_BREAKPOINTS, excludeDefaults),
+          CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(CUSTOM_BREAKPOINTS, {defaults: excludeDefaults} ),
           OBSERVABLE_MEDIA_PROVIDER,
         ]
       });

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 {map} from 'rxjs/operator/map';
+import {filter} from 'rxjs/operator/filter';
 
 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';

diff --git a/src/lib/public_api.ts b/src/lib/public_api.ts
@@ -11,6 +11,7 @@
  * @description
  * Entry point for all public APIs of Angular Flex-Layout.
  */
+export * from './module';
 export * from './flexbox/index';
 export * from './media-query/index';
 export * from './utils/index';