From 93d729d80c11c69446ca76ee53ddde594d83eec5 Mon Sep 17 00:00:00 2001 From: luillyfe Date: Mon, 19 Feb 2018 15:58:49 -0500 Subject: [PATCH 1/4] docs(operators): add documentation for concatMap --- src/operator-docs/transformation/concatMap.ts | 69 ++++++++++++++++++- 1 file changed, 67 insertions(+), 2 deletions(-) diff --git a/src/operator-docs/transformation/concatMap.ts b/src/operator-docs/transformation/concatMap.ts index a1f8ea53..064f407c 100644 --- a/src/operator-docs/transformation/concatMap.ts +++ b/src/operator-docs/transformation/concatMap.ts @@ -1,6 +1,71 @@ import { OperatorDoc } from '../operator.model'; export const concatMap: OperatorDoc = { - 'name': 'concatMap', - 'operatorType': 'transformation' + name: 'concatMap', + operatorType: 'transformation', + signature: `concatMap(project: (value: T, index: number) => ObservableInput, + ?resultSelector: (outerValue: T, innerValue: I, outerIndex: number, innerIndex: number) => R): Observable`, + parameters: [ + { + name: 'project', + type: 'function(value: T, index: number): ObservableInput', + attribute: '', + description: `A function that, when applied to an item emitted by the source + Observable, returns an Observable.` + }, + { + name: 'resultSelector', + type: + 'function(outerValue: T, innerValue: I, outerIndex: number, innerIndex: number): any', + attribute: 'optional', + description: `A function to produce the value on the output Observable based on the values + and the indices of the source (outer) emission and the inner Observable + emission. The arguments passed to this function are: + - 'outerValue': the value that came from the source. + - 'innerValue': the value that came from the projected Observable. + - 'outerIndex': the "index" of the value that came from the source. + - 'innerIndex': the "index" of the value from the projected Observable.` + } + ], + marbleUrl: 'http://reactivex.io/rxjs/img/concatMap.png', + shortDescription: { + description: `Project each source value to an Observable which is merge in the output observable, + in a serialized fashion waiting for each one to complete before merging the next one + Maps each value to an Observable, then flattens all of + these inner Observables using concatAll.` + }, + walkthrough: { + description: `You have to be care of managing the subscriptions of inner Observables + because they do not complete until you unsubscribe explicitely from them` + }, + examples: [ + { + name: 'Making memory leaks!', + code: ` + import { Observable } from 'rxjs/Observable'; + import 'rxjs/add/observable/interval'; + import 'rxjs/add/operator/mapTo'; + import 'rxjs/add/operator/mergeMap'; + const $click = Observable.fromEvent(document, 'click'); + const $interval = Observable.interval(3000) + .mapTo((iClick, IInterval) => Click(iClick), Interval(IInterval); + + $click.mergeMap(() => $interval, + (fromSource, fromInterval, iSource, IInterval) => fromInterval(iSource, IInterval)) + .subscribe(console.log); + `, + externalLink: { + platform: 'JSBin', + url: 'https://stackblitz.com/edit/concatmap?file=index.ts' + } + } + ], + relatedOperators: [ + 'concat', + 'concatAll', + 'concatMapTo', + 'exhaustMap', + 'mergeMap', + 'switchMap' + ] }; From 73e5d9401cb6e21493691d0a61e0f15be4a41df0 Mon Sep 17 00:00:00 2001 From: luillyfe Date: Mon, 19 Feb 2018 17:20:47 -0500 Subject: [PATCH 2/4] docs(operators): improved the live example --- src/operator-docs/transformation/concatMap.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/operator-docs/transformation/concatMap.ts b/src/operator-docs/transformation/concatMap.ts index 064f407c..941a0b91 100644 --- a/src/operator-docs/transformation/concatMap.ts +++ b/src/operator-docs/transformation/concatMap.ts @@ -40,7 +40,8 @@ export const concatMap: OperatorDoc = { }, examples: [ { - name: 'Making memory leaks!', + name: + 'Map the first click to inner observable (it ended the Observable of clicks)', code: ` import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/interval'; @@ -49,7 +50,7 @@ export const concatMap: OperatorDoc = { const $click = Observable.fromEvent(document, 'click'); const $interval = Observable.interval(3000) .mapTo((iClick, IInterval) => Click(iClick), Interval(IInterval); - + // the MergeMap's project function is executed just on time! $click.mergeMap(() => $interval, (fromSource, fromInterval, iSource, IInterval) => fromInterval(iSource, IInterval)) .subscribe(console.log); From 8915406d05372d0ce7fbedc85da04857fdfd2cc6 Mon Sep 17 00:00:00 2001 From: luillyfe Date: Wed, 21 Feb 2018 13:20:45 -0500 Subject: [PATCH 3/4] docs(operators): Added ES6 import and pipe operator --- src/operator-docs/transformation/concatMap.ts | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/operator-docs/transformation/concatMap.ts b/src/operator-docs/transformation/concatMap.ts index 941a0b91..279807fd 100644 --- a/src/operator-docs/transformation/concatMap.ts +++ b/src/operator-docs/transformation/concatMap.ts @@ -35,8 +35,10 @@ export const concatMap: OperatorDoc = { these inner Observables using concatAll.` }, walkthrough: { - description: `You have to be care of managing the subscriptions of inner Observables - because they do not complete until you unsubscribe explicitely from them` + description: `the source observable maps values to inner observable, subscribe and emit in order. + After subscribing the source observable is ended therefore the concatMap's project function + is only executed once. the second parameter 'resultFunction', allows you to access to the index of + source observable and inner observable (besides the items)` }, examples: [ { @@ -44,15 +46,19 @@ export const concatMap: OperatorDoc = { 'Map the first click to inner observable (it ended the Observable of clicks)', code: ` import { Observable } from 'rxjs/Observable'; - import 'rxjs/add/observable/interval'; - import 'rxjs/add/operator/mapTo'; - import 'rxjs/add/operator/mergeMap'; - const $click = Observable.fromEvent(document, 'click'); - const $interval = Observable.interval(3000) - .mapTo((iClick, IInterval) => Click(iClick), Interval(IInterval); - // the MergeMap's project function is executed just on time! - $click.mergeMap(() => $interval, - (fromSource, fromInterval, iSource, IInterval) => fromInterval(iSource, IInterval)) + import { interval } from 'rxjs/observable/interval'; + import { fromEvent } from 'rxjs/observable/fromEvent'; + + import { mapTo, concatMap } from 'rxjs/operators'; + + const $click = fromEvent(document, 'click'); + const $interval = interval(3000) + .pipe(mapTo((iClick, iInterval) => 'Click('+iClick+')'+', '+'Interval('+iInterval+')')); + // the ConcatMap's project function is executed just one time! + // Even if you make aditional cliks the ConcatMap's project function is not longer executed + // output; Click(0), Interval(0) -> Click(0), Interval(1) -> Click(0), Interval(2) -> etc + $click.pipe(concatMap(() => $interval, + (fromSource, fromInterval, indexSource, indexInterval) => fromInterval(indexSource, indexInterval))) .subscribe(console.log); `, externalLink: { From 0598275964b62c7d9dcda4017c618703da50f815 Mon Sep 17 00:00:00 2001 From: luillyfe Date: Mon, 5 Mar 2018 12:10:54 -0500 Subject: [PATCH 4/4] docs(operators): Improved description, Removed generic signature --- src/operator-docs/transformation/concatMap.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/operator-docs/transformation/concatMap.ts b/src/operator-docs/transformation/concatMap.ts index 279807fd..bc7004ca 100644 --- a/src/operator-docs/transformation/concatMap.ts +++ b/src/operator-docs/transformation/concatMap.ts @@ -3,8 +3,7 @@ import { OperatorDoc } from '../operator.model'; export const concatMap: OperatorDoc = { name: 'concatMap', operatorType: 'transformation', - signature: `concatMap(project: (value: T, index: number) => ObservableInput, - ?resultSelector: (outerValue: T, innerValue: I, outerIndex: number, innerIndex: number) => R): Observable`, + signature: `concatMap(project: Function, resultSelector?: Function): Observable`, parameters: [ { name: 'project', @@ -29,10 +28,9 @@ export const concatMap: OperatorDoc = { ], marbleUrl: 'http://reactivex.io/rxjs/img/concatMap.png', shortDescription: { - description: `Project each source value to an Observable which is merge in the output observable, - in a serialized fashion waiting for each one to complete before merging the next one - Maps each value to an Observable, then flattens all of - these inner Observables using concatAll.` + description: `Project each source value to an Observable which is then merged with the output observable + in a serialized fashion. The previous subscription must complete before the next begins. + Inner observables are flatened using concatAll.` }, walkthrough: { description: `the source observable maps values to inner observable, subscribe and emit in order. @@ -54,8 +52,8 @@ export const concatMap: OperatorDoc = { const $click = fromEvent(document, 'click'); const $interval = interval(3000) .pipe(mapTo((iClick, iInterval) => 'Click('+iClick+')'+', '+'Interval('+iInterval+')')); - // the ConcatMap's project function is executed just one time! - // Even if you make aditional cliks the ConcatMap's project function is not longer executed + // concatMap's project function is executed just one time! + // Aditional cliks are not longer taking into account // output; Click(0), Interval(0) -> Click(0), Interval(1) -> Click(0), Interval(2) -> etc $click.pipe(concatMap(() => $interval, (fromSource, fromInterval, indexSource, indexInterval) => fromInterval(indexSource, indexInterval)))