HOO (Higher-order operator) append

[voliva]

Inspired by my answer in a stackoverflow question, I came up with append, an operator enhancer (or HOO🦉 if you will) that keeps the original value of the source. Source posted in my gist.

I think it could be useful for those cases where you want to map/switchMap/etc. the value to something else, but you need to keep in the original value for later use.

To use it, you just wrap any existing operator with it:

source$.pipe(
  append(switchMap((v) => fetchData(v)))
);

// Equivalent to
source$.pipe(
  switchMap((v) =>
    fetchData(v).pipe(
      map((r) => [v, r])
    )
  )
);

And it also has a perk! you can chain as many append as you want, and it won't build up nested arrays:

interval(1000)
  .pipe(
    append(switchMap((v) => fetchData("switchMapped " + v))),
    append(
      map(([original, switchMapped]) => `mapped ${original}, ${switchMapped}`)
    )
  )
  .subscribe(([original, switchMapped, mapped]) =>
    console.log(original, switchMapped, mapped)
  );

// Equivalent
interval(1000)
  .pipe(
    switchMap((v) =>
      fetchData("switchMapped " + v).pipe(
        map((r) => [v, r])
      )
    ),
    map(([original, switchMapped]) => [
      original,
      switchMapped,
      `mapped ${original}, ${switchMapped}`,
    ])
  )
  .subscribe(([original, switchMapped, mapped]) =>
    console.log(original, switchMapped, mapped)
  );

And do not worry, if your original value was an array, it will nest it as if it was a regular value (so it won't return a flat array with your values in it + the one returned by the operator):

of([1, 2, 3])
  .pipe(append(map((arr) => arr.length)))
  .subscribe(([originalArr, length]) => {
    console.log(originalArr, length); // Logs [1,2,3], 3
  });

(It uses a symbol to flag what arrays are appendable and which ones aren't. Another possibility would be to use a WeakSet instead).

And, of course, full typescript support. It uses tuple types, so you can have different types and it will work when destructuring those tuples.