Exporting a custom RxJS operator in an Angular library

Question

The following custom RxJS operator (actually just a .filter equivalent for demonstration) is currently declared in an Angular 4.0.0-rc.2 component.

declare module 'rxjs/Observable' {
  interface Observable<T> {
    restrictToCommand<U>(f: (x: T) => U): Observable<U>;
  }
}

Observable.prototype.restrictToCommand = function (cmd) {
  return new Observable((observer) => {
    const obs = {
      next: (x) => {
        if (x.command === cmd) {
          observer.next(x);
        }
      },
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    };
    return this.subscribe(obs);
  });
};

This works fine. However, I would like to extract this declaration to a library that is responsible for external communication. The main import of this library is a singleton service.

How to properly export the prototype extension and the module declaration from within that library?

It's not clear if the operator is already used by the library or just exists for convenience. — Estus Flask
– Estus Flask, Commented Mar 8, 2017 at 14:32
The library itself has no internal use for the operator, it is a convenience function meant for users that import the library. — Jens Habegger
– Jens Habegger, Commented Mar 8, 2017 at 14:33
Then follow the way that RxJS goes with rxjs/add/operator/... and provide restrictToCommandOperator.js in package root. — Estus Flask
– Estus Flask, Commented Mar 8, 2017 at 14:37
Thank you, that looks like a valid path. If you were to formulate an answer with a code example (for completeness sake) I'd probably accept it ;) — Jens Habegger
– Jens Habegger, Commented Mar 8, 2017 at 14:40

Estus Flask · Accepted Answer · 2017-03-08 15:19:17Z

2

If the operator isn't used by the library itself and exists for user's convenience, it can follow the the way that RxJS goes with rxjs/add/operator/....

Operator definition can be moved to a separate file in package root (restrictToCommandOperator.js and restrictToCommandOperator.d.ts) and be imported like

import 'packagename/restrictToCommandOperator';

It should be noted that this will work smoothly only if the package doesn't have rxjs dependency with version restrictions. If it does, there's a chance that there may be multiple RxJS package versions per user's project, and restrictToCommandOperator won't extend desired Observable.

answered Mar 8, 2017 at 15:19

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Exporting a custom RxJS operator in an Angular library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related