updating operators

sumitarora · sumitarora · commit 135809322ba8 · 2018-02-23T02:49:17.000-05:00
diff --git a/src/operator-docs/combination/concatAll.ts b/src/operator-docs/combination/concatAll.ts
@@ -51,7 +51,10 @@ export const concatAll: OperatorDoc = {
           map(ev => interval(1000).pipe(take(4)))
         );
         const firstOrder = higherOrder.pipe(concatAll());
-        firstOrder.subscribe(x => console.log(x));
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     }
   ],
diff --git a/src/operator-docs/combination/forkJoin.ts b/src/operator-docs/combination/forkJoin.ts
@@ -81,7 +81,10 @@ export const forkJoin: OperatorDoc = {
         of(5, 6, 7, 8)
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );
@@ -102,7 +105,10 @@ export const forkJoin: OperatorDoc = {
         interval(500).pipe(take(4)) // emit 0, 1, 2, 3 every half a second and complete
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );
@@ -114,13 +120,20 @@ export const forkJoin: OperatorDoc = {
     {
       name: 'Use forkJoin with project function',
       code: `
-      const observable = Rx.Observable.forkJoin(
-        Rx.Observable.interval(1000).take(3), // emit 0, 1, 2 every second and complete
-        Rx.Observable.interval(500).take(4), // emit 0, 1, 2, 3 every half a second and complete
+      import { take } from 'rxjs/operators';
+      import { forkJoin } from 'rxjs/observable/forkJoin';
+      import { interval } from 'rxjs/observable/interval';
+
+      const observable = forkJoin(
+        interval(1000).pipe(take(3)), // emit 0, 1, 2 every second and complete
+        interval(500).pipe(take(4)), // emit 0, 1, 2, 3 every half a second and complete
         (n, m) => n + m
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );
diff --git a/src/operator-docs/combination/merge.ts b/src/operator-docs/combination/merge.ts
@@ -53,7 +53,10 @@ export const merge: OperatorDoc = {
         const clicks = fromEvent(document, 'click');
         const timer = interval(1000);
         const clicksOrTimer = clicks.pipe(merge(timer));
-        clicksOrTimer.subscribe(x => console.log(x));
+        clicksOrTimer.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     },
     {
@@ -68,7 +71,10 @@ export const merge: OperatorDoc = {
         const timer3 = interval(500).pipe(take(10));
         const concurrent = 2; // the argument
         const merged = timer1.pipe(merge(timer2, timer3, concurrent));
-        merged.subscribe(x => console.log(x));
+        merged.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     }
   ],
diff --git a/src/operator-docs/combination/mergeAll.ts b/src/operator-docs/combination/mergeAll.ts
@@ -45,14 +45,17 @@ export const mergeAll: OperatorDoc = {
         const clicks = fromEvent(document, 'click');
         const higherOrder = clicks.pipe(map((ev) => interval(1000)));
         const firstOrder = higherOrder.pipe(mergeAll());
-        firstOrder.subscribe(x => console.log(x));
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     },
     {
       name:
         'Count from 0 to 9 every second for each click, but only allow 2 concurrent timers',
       code: `
-        import { mergeAll, map } from 'rxjs/operators';
+        import { mergeAll, map, take } from 'rxjs/operators';
         import { fromEvent } from 'rxjs/observable/fromEvent';
         import { interval } from 'rxjs/observable/interval';
 
@@ -61,7 +64,10 @@ export const mergeAll: OperatorDoc = {
           map((ev) => interval(1000).pipe(take(10)))
         );
         const firstOrder = higherOrder.pipe(mergeAll(2));
-        firstOrder.subscribe(x => console.log(x));
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     }
   ],
diff --git a/src/operator-docs/combination/pairwise.ts b/src/operator-docs/combination/pairwise.ts
@@ -44,7 +44,10 @@ export const pairwise: OperatorDoc = {
           return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
         })
       );
-      distance.subscribe(x => console.log(x));
+      distance.subscribe(x => {
+        const output = \`<h3>$\{x.toString()\}<h3>\`;
+        document.getElementById('output').innerHTML = output;
+      });
     `
     }
   ],
diff --git a/src/operator-docs/combination/withLatestFrom.ts b/src/operator-docs/combination/withLatestFrom.ts
@@ -40,7 +40,10 @@ export const withLatestFrom: OperatorDoc = {
           map(ev => interval(1000).pipe(take(4)))
         );
         const firstOrder = higherOrder.pipe(concatAll());
-        firstOrder.subscribe(x => console.log(x));
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     }
   ],
diff --git a/src/operator-docs/creation/empty.ts b/src/operator-docs/creation/empty.ts
@@ -32,8 +32,14 @@ export const empty: OperatorDoc = {
 
           const observable = empty();
           const subscription = observable.subscribe({
-            next: () => console.log('next'), // does not log anything
-            complete: () => console.log('complete'), // logs 'complete'
+            next: () => {
+              const output = \`<h3>next<h3>\`;
+              document.getElementById('output').innerHTML = output; // does not log anything
+            },
+            complete: () => {
+              const output = \`<h3>complete<h3>\`;
+              document.getElementById('output').innerHTML = output; // logs 'complete'
+            },
           });
       `
     },
@@ -45,8 +51,14 @@ export const empty: OperatorDoc = {
 
         const observable = empty().pipe(startWith('initial value'));
         const subscription = observable.subscribe({
-          next: (val) => console.log(\`next: \${val}\`), // logs 'next: initial value'
-          complete: () => console.log('complete'), // logs 'complete'
+          next: (val) => {
+            const output = \`<h3>next: \${val}\<h3>\`;
+            document.getElementById('output').innerHTML = output;  // logs 'next: initial value'
+          },
+          complete: () => {
+            const output = \`<h3>complete<h3>\`;
+            document.getElementById('output').innerHTML = output; // logs 'complete'
+          },
         });
       `
     },
@@ -65,8 +77,14 @@ export const empty: OperatorDoc = {
           )
         );
         const subscription = result.subscribe({
-          next: (x) => console.log(x), // logs result values
-          complete: () => console.log('complete'), // logs 'complete'
+          next: (val) => {
+            const output = \`<h3>\${val}\<h3>\`;
+            document.getElementById('output').innerHTML = output; // logs result values
+          },
+          complete: () => {
+            const output = \`<h3>complete<h3>\`;
+            document.getElementById('output').innerHTML = output; // logs 'complete'
+          },
         });
       `
     }

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,10 @@ export const concatAll: OperatorDoc = {`
`51`	`51`	`map(ev => interval(1000).pipe(take(4)))`
`52`	`52`	`);`
`53`	`53`	`const firstOrder = higherOrder.pipe(concatAll());`
`54`		`- firstOrder.subscribe(x => console.log(x));`
	`54`	`+ firstOrder.subscribe(x => {`
	`55`	+ const output = \`<h3>$\{x.toString()\}<h3>\`;
	`56`	`+ document.getElementById('output').innerHTML = output;`
	`57`	`+ });`
`55`	`58`	`
`56`	`59`	`}`
`57`	`60`	`],`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,10 @@ export const merge: OperatorDoc = {`
`53`	`53`	`const clicks = fromEvent(document, 'click');`
`54`	`54`	`const timer = interval(1000);`
`55`	`55`	`const clicksOrTimer = clicks.pipe(merge(timer));`
`56`		`- clicksOrTimer.subscribe(x => console.log(x));`
	`56`	`+ clicksOrTimer.subscribe(x => {`
	`57`	+ const output = \`<h3>$\{x.toString()\}<h3>\`;
	`58`	`+ document.getElementById('output').innerHTML = output;`
	`59`	`+ });`
`57`	`60`	`
`58`	`61`	`},`
`59`	`62`	`{`
`@@ -68,7 +71,10 @@ export const merge: OperatorDoc = {`
`68`	`71`	`const timer3 = interval(500).pipe(take(10));`
`69`	`72`	`const concurrent = 2; // the argument`
`70`	`73`	`const merged = timer1.pipe(merge(timer2, timer3, concurrent));`
`71`		`- merged.subscribe(x => console.log(x));`
	`74`	`+ merged.subscribe(x => {`
	`75`	+ const output = \`<h3>$\{x.toString()\}<h3>\`;
	`76`	`+ document.getElementById('output').innerHTML = output;`
	`77`	`+ });`
`72`	`78`	`
`73`	`79`	`}`
`74`	`80`	`],`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,10 @@ export const pairwise: OperatorDoc = {`
`44`	`44`	`return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));`
`45`	`45`	`})`
`46`	`46`	`);`
`47`		`- distance.subscribe(x => console.log(x));`
	`47`	`+ distance.subscribe(x => {`
	`48`	+ const output = \`<h3>$\{x.toString()\}<h3>\`;
	`49`	`+ document.getElementById('output').innerHTML = output;`
	`50`	`+ });`
`48`	`51`	`
`49`	`52`	`}`
`50`	`53`	`],`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,10 @@ export const withLatestFrom: OperatorDoc = {`
`40`	`40`	`map(ev => interval(1000).pipe(take(4)))`
`41`	`41`	`);`
`42`	`42`	`const firstOrder = higherOrder.pipe(concatAll());`
`43`		`- firstOrder.subscribe(x => console.log(x));`
	`43`	`+ firstOrder.subscribe(x => {`
	`44`	+ const output = \`<h3>$\{x.toString()\}<h3>\`;
	`45`	`+ document.getElementById('output').innerHTML = output;`
	`46`	`+ });`
`44`	`47`	`
`45`	`48`	`}`
`46`	`49`	`],`