refactor(aio): switch to pipeable RxJS operators (#22872)

PR Close #22872

aio/src/app/custom-elements/code/code.component.spec.ts

@@ -3,8 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatSnackBar } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import 'rxjs/add/operator/first';
-import 'rxjs/add/operator/toPromise';
+import { first } from 'rxjs/operators';
 
 import { CodeComponent } from './code.component';
 import { CodeModule } from './code.module';
@@ -65,7 +64,7 @@ describe('CodeComponent', () => {
   describe('pretty printing', () => {
     const untilCodeFormatted = () => {
       const emitter = hostComponent.codeComponent.codeFormatted;
-      return emitter.first().toPromise();
+      return emitter.pipe(first()).toPromise();
     };
     const hasLineNumbers = async () => {
       // presence of `<li>`s are a tell-tale for line numbers

aio/src/app/custom-elements/code/code.component.ts

@@ -3,7 +3,7 @@ import { Logger } from 'app/shared/logger.service';
 import { PrettyPrinter } from './pretty-printer.service';
 import { CopierService } from 'app/shared/copier.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import 'rxjs/add/operator/do';
+import { tap } from 'rxjs/operators';
 
 /**
  * If linenums is not set, this is the default maximum number of lines that
@@ -120,7 +120,7 @@ export class CodeComponent implements OnChanges {
 
     this.pretty
         .formatCode(leftAlignedCode, this.language, this.getLinenums(leftAlignedCode))
-        .do(() => this.codeFormatted.emit())
+        .pipe(tap(() => this.codeFormatted.emit()))
         .subscribe(c => this.setCodeHtml(c), err => { /* ignore failure to format */ }
     );
   }

aio/src/app/custom-elements/code/pretty-printer.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 
 import { from as fromPromise, Observable } from 'rxjs';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/first';
+import { first, map, share } from 'rxjs/operators';
 
 import { Logger } from 'app/shared/logger.service';
 
@@ -21,7 +20,7 @@ export class PrettyPrinter {
   private prettyPrintOne: Observable<PrettyPrintOne>;
 
   constructor(private logger: Logger) {
-    this.prettyPrintOne = fromPromise(this.getPrettyPrintOne()).share();
+    this.prettyPrintOne = fromPromise(this.getPrettyPrintOne()).pipe(share());
   }
 
   private getPrettyPrintOne(): Promise<PrettyPrintOne> {
@@ -50,15 +49,17 @@ export class PrettyPrinter {
    * @returns Observable<string> - Observable of formatted code
    */
   formatCode(code: string, language?: string, linenums?: number | boolean) {
-    return this.prettyPrintOne.map(ppo => {
-      try {
-        return ppo(code, language, linenums);
-      } catch (err) {
-        const msg = `Could not format code that begins '${code.substr(0, 50)}...'.`;
-        console.error(msg, err);
-        throw new Error(msg);
-      }
-    })
-    .first(); // complete immediately
+    return this.prettyPrintOne.pipe(
+      map(ppo => {
+        try {
+          return ppo(code, language, linenums);
+        } catch (err) {
+          const msg = `Could not format code that begins '${code.substr(0, 50)}...'.`;
+          console.error(msg, err);
+          throw new Error(msg);
+        }
+      }),
+      first(),  // complete immediately
+    );
   }
 }