function to get firstEvent from multiple events and emiiters

[nkitku]

I am trying to write a function to listen multiple event by different emitters and can be of kind EventTarget, NodeEmiiter and respond with which ever emit first

export const firstEventRx = (events: [any, string[]][]) => {
  const reactive = events
    .filter(([emitter]) => !!emitter)
    .flatMap(([emitter, eventNames]) =>
      eventNames.map((event) =>
        fromEvent(emitter, event).pipe(
          map((value) => ({ emitter, event, value })),
        ),
      ),
    );
  return firstValueFrom(race(reactive));
};

example

export const playAudioBuffer = async (
  arrayBuffer: ArrayBuffer,
  signal?: AbortSignal,
) => {
  await Player.load(arrayBuffer);
  if (signal?.aborted) throw new AbortErrorException();
  Player.play();
  const res = await firstEventRx([
    [signal!, ['abort']],
    [Player, ['ended', 'abort']],
  ]);
  if (res.emitter === signal) {
    Player.stop();
    throw new AbortErrorException();
  } else if (res.event === 'abort') {
    throw new AbortErrorException();
  }
};

it works well and collected by gcc if any of event fire,

is there way to improve typescript types and performance?

[benlesh]

Improving the TypeScript types is a bit difficult. You basically have to look into piggybacking on the EventMaps that are provided in @types/node and the lib dom TypeScript stuff. RxJS doesn't do it directly because we can't guarantee that someone is using RxJS in either Node or with the DOM.

Performance wise, there's nothing there that I'd consider a red flag for performance unless you're creating that reactive array over and over in rapid succession, or that events array is very, very large (which it doesn't look like it would be).

In general events like what you're dealing with in the example aren't going to be spammy enough that you need to micro-optimize there, and once the fromEvent observable subscription is set up, the work it does is pretty minimal.