55. Project: a custom operator for debug logs

Project 7 — your own operator

When the same chain of operators is needed in several places, you can package it as a reusable operator. This is a perfectly legitimate technique, and it needs no magic — an operator is just a function of a certain shape.

The shape of a custom operator

function myOperator(arg1, arg2) {
  return source$ => source$.pipe(
    // ordinary operators
  );
}

// Usage:
stream$.pipe(myOperator(...))

The key point: the returned function takes source$ and returns a transformed Observable. That's exactly the "operator" signature.

Your task

In debugLabel, return a function: return source$ => source$.pipe(tap(value => events.push(label + ': ' + value)));
Values after tap pass through unchanged — that's important.

Deterministic check

This task's check runs in TestScheduler virtual time. If your solution is right, the console shows only Test Passed!. Don't add extra console.logs, or the check will fail.

Solution spoiler · click to reveal

const { tap } = Rx;

function debugLabel(label, events) {
  return source$ => source$.pipe(
    tap(value => events.push(label + ': ' + value))
  );
}

script.ts // TypeScript

CONSOLE · Console output

Hit Run to see the result...