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 20, 2017 · 3707f2c · 3707f2c
1 parent b7cc8bc
commit 3707f2c
Show file tree

Hide file tree

Showing 65 changed files with 395 additions and 791 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "@angular/core": "^4.1.0",
     "@angular/platform-browser": "^4.1.0",
     "core-js": "^2.4.1",
-    "rxjs": "^5.0.1",
+    "rxjs": "^5.4.2",
     "systemjs": "0.19.43",
     "tslib": "^1.7.1",
     "zone.js": "^0.8.4"
@@ -43,7 +43,7 @@
     "@angular/compiler-cli": "^4.1.0",
     "@angular/forms": "^4.1.0",
     "@angular/http": "^4.1.0",
-    "@angular/material": "^2.0.0-beta.7",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser-dynamic": "^4.1.0",
     "@angular/platform-server": "^4.1.0",
     "@angular/router": "^4.1.0",

diff --git a/src/demo-app/app/demo-app-module.ts b/src/demo-app/app/demo-app-module.ts
diff --git a/src/demo-app/app/demo-app/demo-app.ts b/src/demo-app/app/demo-app/demo-app.ts
@@ -26,8 +26,8 @@ import {Component, ViewEncapsulation} from '@angular/core';
         StackOverflow,
         and CodePen.
         <span class="title" style="font-size: 0.7em; font-weight:normal;">
-            Hint: Click on any of the samples below to toggle the layout direction(s).
-          </span>
+                Hint: Click on any of the samples below to toggle the layout direction(s).
+              </span>
       </div>
     </div>
 

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({
   moduleId: module.id,

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,54 +1,48 @@
 import {Component, OnDestroy} from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 
-import {MediaChange} from '../../../lib/media-query/media-change';
-import {ObservableMedia} from '../../../lib/media-query/observable-media';
+import {MediaChange} from '@angular/flex-layout';
+import {ObservableMedia} from '@angular/flex-layout';
 
 @Component({
   moduleId: module.id,
   selector: 'demo-responsive-row-column',
   template: `
-    <md-card class='card-demo'>
+    <md-card class="card-demo">
       <md-card-title>Multiple Responsive Columns</md-card-title>
       <md-card-subtitle>Simple row with nested layout containers. Note: the 1st column is
         responsive.
       </md-card-subtitle>
       <md-card-content>
-        <div class='containerX'>
+        <div class="containerX">
 
-          <div class='colorNested box' fxLayout='row' *ngIf='isVisible'>
-            <div [fxLayout]='firstCol'
-                 [fxLayout.xs]='firstColXs'
-                 [fxLayout.md]='firstColMd'
-                 [fxLayout.lg]='firstColLg'
-                 [fxLayout.gt-lg]='firstColGtLg'
-                 fxFlex='50%'
-                 fxFlex.gt-sm='25'
+          <div class="colorNested box" fxLayout="row" *ngIf="isVisible">
+            <div [fxLayout]="firstCol"
+                 [fxLayout.xs]="firstColXs"
+                 [fxLayout.md]="firstColMd"
+                 [fxLayout.lg]="firstColLg"
+                 [fxLayout.gt-lg]="firstColGtLg"
+                 fxFlex="50%"
+                 fxFlex.gt-sm="25"
                  fxHide.md
-                 (click)='toggleLayoutFor(1)' style='cursor: pointer;'>
+                 (click)="toggleLayoutFor(1)" style="cursor: pointer;">
               <div fxFlex>Col #1: First item in row</div>
               <div fxFlex>Col #1: Second item in row</div>
             </div>
-            <div [fxLayout]='secondCol' fxFlex (click)='toggleLayoutFor(2)'
-                 style='cursor: pointer;'>
+            <div [fxLayout]="secondCol" fxFlex (click)="toggleLayoutFor(2)"
+                 style="cursor: pointer;">
               <div fxFlex>Col #2: First item in column</div>
               <div fxFlex>Col #2: Second item in column</div>
             </div>
           </div>
         </div>
       </md-card-content>
-      <!--<md-card-actions fxLayout='row' fxLayoutAlign='center'>-->
-      <!--<button md-raised-button
-                  (click)='isVisible = !isVisible'>
-                  {{ isVisible ? 'Remove' : 'Show' }}
-          </button>-->
-      <!--</md-card-actions>-->
-      <md-card-footer style='width:95%'>
-        <div fxLayout='row' class='hint' fxLayoutAlign='space-around'>
-          <div>&lt;div fxLayout='{{ firstCol }}' fxFlex='50%' fxFlex.gt-sm='25%' fxHide.md &gt;
+      <md-card-footer style="width:95%">
+        <div fxLayout="row" class="hint" fxLayoutAlign="space-around">
+          <div>&lt;div fxLayout="{{ firstCol }}" fxFlex="50%" fxFlex.gt-sm="25%" fxHide.md &gt;
           </div>
           <div fxFlex></div>
-          <div>&lt;div fxLayout='{{ secondCol }}' fxFlex &gt;</div>
+          <div>&lt;div fxLayout="{{ secondCol }}" fxFlex &gt;</div>
         </div>
       </md-card-footer>
     </md-card>

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({
   moduleId: module.id,

diff --git a/src/demo-app/app/docs-layout/FlexAlignSelf.demo.ts b/src/demo-app/app/docs-layout/FlexAlignSelf.demo.ts
@@ -40,9 +40,9 @@ import {Component} from '@angular/core';
 export class DemoFlexAlignSelf {
   public alignTo = 'center';
 
-  toggleAlignment () {
-      let j = ALIGN_OPTIONS.indexOf(this.alignTo);
-      this.alignTo = ALIGN_OPTIONS[ (j + 1) % ALIGN_OPTIONS.length ];
+  toggleAlignment() {
+    let j = ALIGN_OPTIONS.indexOf(this.alignTo);
+    this.alignTo = ALIGN_OPTIONS[(j + 1) % ALIGN_OPTIONS.length];
   }
 }
 

diff --git a/src/demo-app/app/docs-layout/_module.ts b/src/demo-app/app/docs-layout/_module.ts
@@ -6,10 +6,10 @@ import {Component} from '@angular/core';
     <demo-layout-alignment class='small-demo'></demo-layout-alignment>
     <demo-layout-fill class='small-demo'></demo-layout-fill>
     <demo-flex-row-fill class='small-demo'></demo-flex-row-fill>
-    <demo-flex-align-self class='small-demo'></demo-flex-align-self>
     <demo-flex-row-fill-wrap class='small-demo'></demo-flex-row-fill-wrap>
     <demo-flex-attribute-values class='small-demo'></demo-flex-attribute-values>
     <demo-flex-offset-values class='small-demo'></demo-flex-offset-values>
+    <demo-flex-align-self class='small-demo'></demo-flex-align-self>
   `
 })
 export class DemosLayoutAPI {
@@ -20,23 +20,23 @@ import {FormsModule} from '@angular/forms';
 import {SharedModule} from '../shared/_module';
 
 import {DemoLayoutAlignment} from './layoutAlignment.demo';
+import {DemoLayoutFill} from './layoutFill.demo';
 import {DemoFlexRowFill} from './flexRowFill.demo';
 import {DemoFlexRowFillWrap} from './flexRowFillWrap.demo';
 import {DemoFlexAttributeValues} from './flexOtherValues.demo';
 import {DemoFlexOffsetValues} from './flexOffetValues.demo';
-import {DemoLayoutFill} from './layoutFill.demo';
 import {DemoFlexAlignSelf} from './FlexAlignSelf.demo';
 
 @NgModule({
   declarations: [
     DemosLayoutAPI,       // used by the Router with the root app component
 
+    DemoLayoutAlignment,
+    DemoLayoutFill,
     DemoFlexRowFill,
     DemoFlexRowFillWrap,
-    DemoLayoutAlignment,
     DemoFlexAttributeValues,
     DemoFlexOffsetValues,
-    DemoLayoutFill,
     DemoFlexAlignSelf
   ],
   imports: [

diff --git a/src/demo-app/app/docs-layout/flexAlignSelf.demo.html b/src/demo-app/app/docs-layout/flexAlignSelf.demo.html
diff --git a/src/demo-app/app/docs-layout/flexRowFill.demo.ts b/src/demo-app/app/docs-layout/flexRowFill.demo.ts
@@ -4,22 +4,22 @@ import {Component} from '@angular/core';
   moduleId: module.id,
   selector: 'demo-flex-row-fill',
   template: `
-    <md-card class='card-demo' (click)='toggleDirection()'>
+    <md-card class="card-demo" (click)="toggleDirection()">
       <md-card-title>'Flex' to Fill Row</md-card-title>
-      <md-card-subtitle>Simple row using 'flex' on 3rd element to fill available main axis.
+      <md-card-subtitle>Simple row using "flex" on 3rd element to fill available main axis.
       </md-card-subtitle>
       <md-card-content>
-        <div class='containerX'>
-          <div [fxLayout]='direction' (click)='toggleDirection()' class='colored box'
-               style='cursor: pointer;'>
-            <div [fxFlex]='someValue'> fxFlex='20'</div>
-            <div fxFlex='60'> fxFlex='60'</div>
+        <div class="containerX">
+          <div [fxLayout]="direction" (click)="toggleDirection()" class="colored box"
+               style="cursor: pointer;">
+            <div [fxFlex]="someValue"> fxFlex="20"</div>
+            <div fxFlex="60"> fxFlex="60"</div>
             <div fxFlex> fxFlex</div>
           </div>
         </div>
       </md-card-content>
       <md-card-footer>
-        <div class='hint'>&lt;div fxLayout='{{ direction }}' &gt;</div>
+        <div class="hint">&lt;div fxLayout="{{ direction }}" &gt;</div>
       </md-card-footer>
     </md-card>
   `

diff --git a/src/demo-app/app/docs-layout/flexRowFillWrap.demo.ts b/src/demo-app/app/docs-layout/flexRowFillWrap.demo.ts
@@ -4,28 +4,28 @@ import {Component} from '@angular/core';
   moduleId: module.id,
   selector: 'demo-flex-row-fill-wrap',
   template: `
-    <md-card class='card-demo' (click)='toggleDirection()'>
+    <md-card class="card-demo" (click)="toggleDirection()">
       <md-card-title>'Flex' with Layout-Wrap</md-card-title>
-      <md-card-subtitle>Using 'layout-wrap' to wrap positioned items within a layout container
+      <md-card-subtitle>Using "layout-wrap" to wrap positioned items within a layout container
       </md-card-subtitle>
       <md-card-content>
-        <div class='containerX'>
-          <div [fxLayout]='direction' fxLayoutWrap class='colored wrapped box'
-               (click)='toggleDirection()' style='cursor: pointer;'>
+        <div class="containerX">
+          <div [fxLayout]="direction" fxLayoutWrap class="colored wrapped box"
+               (click)="toggleDirection()" style="cursor: pointer;">
 
-            <div fxFlex='30'> fxFlex='30'</div>
-            <div fxFlex='45'> fxFlex='45'</div>
-            <div fxFlex='19'> fxFlex='19'</div>
-            <div fxFlex='33'> fxFlex='33'</div>
-            <div fxFlex='67'> fxFlex='67'</div>
-            <div fxFlex='50'> fxFlex='50'</div>
+            <div fxFlex="30"> fxFlex="30"</div>
+            <div fxFlex="45"> fxFlex="45"</div>
+            <div fxFlex="19"> fxFlex="19"</div>
+            <div fxFlex="33"> fxFlex="33"</div>
+            <div fxFlex="67"> fxFlex="67"</div>
+            <div fxFlex="50"> fxFlex="50"</div>
             <div fxFlex> fxFlex</div>
 
           </div>
         </div>
       </md-card-content>
       <md-card-footer>
-        <div class='hint'>&lt;div fxLayout='{{ direction }}' &gt;</div>
+        <div class="hint">&lt;div fxLayout="{{ direction }}" &gt;</div>
       </md-card-footer>
     </md-card>
   `

diff --git a/src/demo-app/app/docs-layout/layoutAlignment.demo.html b/src/demo-app/app/docs-layout/layoutAlignment.demo.html
diff --git a/src/demo-app/app/docs-layout/layoutAlignment.demo.ts b/src/demo-app/app/docs-layout/layoutAlignment.demo.ts
@@ -2,6 +2,7 @@ import {Component} from '@angular/core';
 
 
 @Component({
+  moduleId: module.id,
   selector: 'demo-layout-alignment',
   styleUrls: [
     'layoutAlignment.demo.css',
@@ -79,7 +80,7 @@ export class DemoLayoutAlignment {
   public mainAxis = 'space-around';
   public crossAxis = 'center';
 
-  layoutAlign () {
-      return `${this.mainAxis} ${this.crossAxis}`;
+  layoutAlign() {
+    return `${this.mainAxis} ${this.crossAxis}`;
   }
 }
diff --git a/src/demo-app/app/docs-layout/layoutFill.demo.ts b/src/demo-app/app/docs-layout/layoutFill.demo.ts
@@ -7,20 +7,20 @@ import {Component} from '@angular/core';
     'layoutAlignment.demo.css',
   ],
   template: `
-    <md-card class='card-demo'>
-      <md-card-title><a href='' target='_blank'>Layout Fill</a></md-card-title>
+    <md-card class="card-demo">
+      <md-card-title><a href="" target="_blank">Layout Fill</a></md-card-title>
       <md-card-subtitle>Using 'fxFill' to fill available width and height of parent container.
       </md-card-subtitle>
-      <md-card-content class='large'>
-        <div fxLayout='column' fxFill>
+      <md-card-content class="large">
+        <div fxLayout="column" fxFill>
           <div fxLayout fxFlex>
-            <div class='one' fxFlex='20' fxLayoutAlign='center center'> A</div>
-            <div class='two' fxFlex='80' fxLayoutAlign='center center'> B</div>
+            <div class="one" fxFlex="20" fxLayoutAlign="center center"> A</div>
+            <div class="two" fxFlex="80" fxLayoutAlign="center center"> B</div>
           </div>
         </div>
       </md-card-content>
-      <md-card-footer class='bottomPad'>
-        <div class='hint'></div>
+      <md-card-footer class="bottomPad">
+        <div class="hint"></div>
       </md-card-footer>
     </md-card>
   `