What is the intended way of importing lettable operators?

[sarunint]

RxJS version: 5.5

I've been using lettable operators since 5.5 was in beta, it was great. But I have a few concerns regarding the way to import them.

Are we supposed to do this:

import { map } from 'rxjs/operators';

or:

import { map } from 'rxjs/operators/map';

Either way, it works the same. But for the sake of consistency, shouldn't there be only one way of doing this?

[davideast]

As someone who used the deep import, I was told to use the rxjs/operators path.

https://twitter.com/IgorMinar/status/924088605810753536

The reason being ergonomics and the fact that deep imports are difficult to maintain.

[davideast]

@benlesh

[sarunint]

One more question. Since rxjs/operators is "unoffically offical" entry point to lettable operators, will rxjs/observable (or something similar) be available as an entry point to rxjs/observable/of or rxjs/observable/combineLatest, and will the last two disappear in v6 (along with rxjs/add/*)?

[kylecordes]

I'm really hoping we see a future version where we can import most or all of the RxJS stuff from a single place. Here is an example I have in a simple use of RxJS right now:

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { _throw } from 'rxjs/observable/throw';
import { delayWhen } from 'rxjs/operators';
import { timer } from 'rxjs/observable/timer';

This is rather tedious, of the 5 things I want, all 5 have to come from a different module.

I'd like to write something more like:

import { Observable, of, _throw, delayWhen, timer } from 'rxjs';

Of course I could accomplish this myself with some kind of wrapper, but I would like something close to this to become idiomatic, documented official usage. A man can dream?

[martinsik]

I think importing from rxjs/operators is almost the same as importing from rxjs or rxjs/Rx. It loads this file https://github.com/ReactiveX/rxjs/blob/master/src/operators.ts that imports all the operators. Then if you want to bundle your app (eg. with angular-cli) it'll include all operators including those you're not using.

So a preferred way should be always importing only the operators you want. Just like you did:

import { map } from 'rxjs/operators/map';
import { filter } from 'rxjs/operators/filter';
import { timer } from 'rxjs/observable/timer';

However, I'm not an export on JS bundlers so maybe there's a plugin or something (or maybe the bundler are just smart enough) that will let you use rxjs/operators and stay tree-shakable. Anyway if you stay with imports such as 'rxjs/observable/timer' you should be always fine.

[sarunint]

@martinsik No, it does not. When doing import { map } from 'rxjs/operators';, you selectively import the map operator. Tools like Webpack or Rollup are smart enough to not include operators that you don't use.

[martinsik]

@sarunint I tried it yesterday. The bundler can't know if any of the imports in rxjs/operators doesn't modify any global object (or prototype) so it needs to include all of them.

If you used import { map } from 'rxjs/operators'; I suppose you transpiled it to ES5(?) with some module system. Can you give me an example with eg. rollup config where you import from rxjs/operators and the bundle will only include operators you are using in your code?

[martinsik]

I tried importing an operator from rxjs/operators today in a real Angular 5.0.0 app with angular/cli@1.5.2 and RxJS 5.5.2 and it really does include all the operators.

[Brooooooklyn]

hi, if you guys use webpack & ts-loader, you may want to try https://github.com/brooooooklyn/ts-import-plugin#rxjs

[sarunint]

@martinsik here is my example: https://github.com/sarunint/rxjs-rollup

[ptitjes]

@sarunint In your example git, you actually do import map like that:

import { map } from 'rxjs/operators/map';

@martinsik wants to import like this:

import { map } from 'rxjs/operators';

And BTW, I believe angular apps use webpack by default. I may be wrong but Ionic/Angular ones do anyway! @martinsik, I think you should look into what @Brooooooklyn said...

[sarunint]

Whoa, that was my biggest mistake ever. I just trusted VSCode autoimport too much.

Will investigate asap

[martinsik]

@ptitjes Angular CLI is using webpack but you can't edit its configuration and add more another plugins. You can "eject" the config and maintain it yourself but that's absolute madness.

[ptitjes]

@martinsik Well, I do customize the webpack config in my Ionic/Angular app with some webpack-merge voodoo. You might want to look into it. It allows to tweak the config without copying it all.

[sarunint]

@martinsik Angular CLI should do the tree-shaking properly since it's using RxJS Path Mapping as described here.

Reference: https://github.com/angular/angular-cli/blob/c60e8af97784d13a6be8b89de82bf0f134266a8f/packages/%40angular/cli/models/webpack-configs/common.ts#L176-L185