switchMap to the completed observable doesn't complete the root observable

[artfulsage]

Hey! I see that switchMap to the completed observable doesn't complete the root observable. Is there any solution for that?

interval(1000).pipe(switchMap(() => EMPTY)).subscribe();

[josepot]

Yes, that is by design and it's the expected behavior.

You could compose some of the existing operators to build a custom operator that behaves like that, though.

For instance:

import {
  switchMap,
  ObservableInput,
  concat,
  of,
  pipe,
  takeWhile,
  OperatorFunction,
} from "rxjs"

// Notice that `DONE` is an implementation detail, meaning that the
// consumers of the custom operator wouldn't know about its existence,
const DONE = Symbol("DONE")
const emitDoneOnComplete = <T>(source: ObservableInput<T>) =>
  concat(source, of(DONE))

export const switchMapUntilInnerCompletes = <I, O>(
  project: (value: I) => ObservableInput<O>,
): OperatorFunction<I, O> =>
  pipe(
    switchMap(pipe(project, emitDoneOnComplete)),
    takeWhile((value): value is O => value !== DONE),
  )

I haven't put much thought into its name though 😅 and I haven't tested it, but I'm quite certain that it should work 🙂

[josepot]

I wonder why there is no such operator out of box

I've been using RxJS for a while now, and I can't recall ever having needed this particular behavior TBH. That's not to say that it's not useful, I'm sure that it must be for some use cases, but I don't think that it's a "good primitive".

I'm of the opinion that RxJS should have less operators and not more.

IMO what's important is to have a rather small set of operators that are easy to compose, so that user can create any other custom behavior. In other words: I think that it's probably best to have just a few amount of good primitives on RxJS and then teach its users how to compose them in order to create any other behavior that they like. Otherwise the API surface would be overwhelming for new users, not to mention how difficult it would be to handle the maintainability of the library.

That being said, have a look at rxjs-etc.

[artfulsage]

Don't you think it's worse to add this operator to rxjs-etc? My case is showing modal with yes/no/cancel buttons as a part of some complex pipe. And when the user chooses to cancel it's easier to complete the pipe instead of returning null and so on. And also all this pipe steps are independent functions which don't know about each other. So when I construct the final pipe I don't know if and when its parts complete or not. And that's why it's much safer to use this new operator instead of switchMap.

[josepot]

Hey @artfulsage ! sorry for the late response (I'm on vacation 😄 ), yep, that makes sense! Maybe it could be a worthy addition, I'm not 100% sure TBH, but it doesn't hurt to open an issue/PR. Just take into account that if you do, then you will probably have to refine the implementation (b/c the one that I provided only accounts for the project arg and not for the index) and add (at least) the basic tests. But yeah, ofc, I would give it a shot, for sure!

[artfulsage]

@josepot the new issue cartant/rxjs-etc#104. But I don't understand what you mean by index. Could you provide a tip?

b/c the one that I provided only accounts for the project arg and not for the index

[josepot]

Sorry, I wrote that while being in a rush and I didn't explain myself well, sorry about that.

What I meant to say is that the project function that it's passed to switchMap takes 2 arguments the value (the emitted value of the source observable) and the index (which is the zero based index of the number of times that the source has emitted, like in a normal map function).

For instance, this:

from(['foo', 'bar', 'baz']).pipe(
  switchMap((value, idx) => of({ value, idx }))
).subscribe(console.log)

produces the following logs:

> { value: 'foo', idx: 0 }
> { value: 'bar', idx: 1 }
> { value: 'baz', idx: 2 }

In the implementation that I provided the project function (the one that its passed to switchMapUntilInnerCompletes) doesn't receive the index argument... But that's easy to solve, for instance, this implementation takes the index into account:

import {
  switchMap,
  ObservableInput,
  concat,
  of,
  pipe,
  takeWhile,
  OperatorFunction,
  from
} from "rxjs";

const DONE = Symbol("DONE");
const emitDoneOnComplete = <T>(source: ObservableInput<T>) =>
  concat(source, of(DONE));

export const switchMapUntilInnerCompletes = <I, O>(
  project: (value: I, idx: number) => ObservableInput<O>
): OperatorFunction<I, O> =>
  pipe(
    switchMap((value, idx) => emitDoneOnComplete(project(value, idx))),
    takeWhile((value): value is O => value !== DONE)
  );