RXJS concatMap should also lazy pull? - rxjs

Question

If i use a range and limit the output with takeWhile:
Rx.Observable
.range( 1, 10 )
.do( idx => console.log('range: ', idx ))
.takeWhile( idx => idx <= 5 )
.subscribe( idx => console.log( 'res : ', idx ))
;
the output is:
range: 1
res : 1
range: 2
res : 2
range: 3
res : 3
range: 4
res : 4
range: 5
res : 5
range: 6
the produces values by range are not all consumed. 6 is pulled, does not pass the takeWhile, no more values are taken.
Now if i have a concatMap in between:
Rx.Observable
.range( 1, 10 )
.do( idx => console.log('range: ', idx ))
.concatMap( idx => {
var res = new Rx.Subject<number>();
setTimeout( () => {
res.next( idx );
res.complete();
}, 10 );
return res;
})
.takeWhile( idx => idx <= 5 )
.subscribe( idx => console.log( 'res: ', idx ))
;
The output is this:
range: 1
range: 2
range: 3
range: 4
range: 5
range: 6
range: 7
range: 8
range: 9
range: 10
res: 1
res: 2
res: 3
res: 4
res: 5
I would expect, that the values from range production would be limited here as well. concatMap preserves the order, so it makes only sense to pull the next value, when the previous observable is completed. But all range errors are pulled.
Is this a bug? Or what is the real behavior. Can you please help to understand.

Answer 1

Values produced by range() are buffered inside concatMap() operator and then pulled one by one. Then you're using setTimeout() to asynchronously emit values. Operators in general don't try to utilize any backpressure so all items from the source are emitted when they're ready.
Note that you could achieve the same even when using Observable.of() and the asynchronous scheduler Scheduler.async. This makes the emission from Observable.of to happen in a new event which makes it asynchronous.
const Observable = Rx.Observable;
const Scheduler = Rx.Scheduler;
Rx.Observable
.range( 1, 10 )
.do( idx => console.log('range: ', idx ))
.concatMap( idx => Observable.of(idx, Scheduler.async))
.takeWhile( idx => idx <= 5 )
.subscribe( idx => console.log( 'res: ', idx ));
See live demo: https://jsbin.com/xukolo/3/edit?js,console