New rule: disallow full import of RxJS operators

[rokerkony]

The reason behind this PR is better described in my article:
https://medium.com/p/prevent-coding-mistakes-write-a-tslint-rule-specific-for-your-own-project-987d26f91647

Shortly: it can decrease a size of a bundle when RxJS operators are imported in a wrong way

I know it is not exactly Angular related, but Angular requires RxJS as a dependency. Therefore I think it could be part of the Styleguide.

[intellix]

I was under the impression this was ok: import {delay, tap} from 'rxjs/operators'
Also, can't you already achieve this with import-blacklist from tslint?

[rokerkony]

@intellix Let me try this once more in the evening but when I checked on the codebase of https://github.com/erento with source-map-explorer the outcome was different.

The advantage is that it has a fixer as well, so it can automatically fix the imports.

[intellix]

ng new rxjs-test && cd rxjs-test
npm i source-map-explorer
ng build -prod -sm -oh=false
./node_modules/.bin/source-map-explorer dist/main.bundle.js

app.component.ts:

import { Component } from '@angular/core';
import { timer } from 'rxjs/observable/timer';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  timer = timer(100, 100).pipe(tap(console.log));
}

Before using above (20.67kb):

After using above (27.01kb):

[lazarljubenovic]

I don't think this belongs to codelyzer. Check out rxjs-lint-rules.

[rokerkony]

@intellix I don't know what you mean with before and after... but from curiosity I run the same example you posted and these are my results:
import { tap } from 'rxjs/operators/tap'; -> 24.49 KB
import { tap } from 'rxjs/operators'; -> 27.01 KB

So I have a bit different number then you in the first line — it shows it is better to import directly from rxjs/operators/tap.

@lazarljubenovic I still think it would be valuable for other angular users but I'm not pushing for it hard, so when you agree I should close it I will :)

[lazarljubenovic]

But Angular users can install the other module which already exists for the similar (same?) purpose. It's not like you're scoped on one linter plugin.

[intellix]

ok so it seems more stuff is pulled in. I was thinking it was more a case of importing all vs a single operator. All operators would probably be something like 150kb+

[wKoza]

I'm not sure this rule is durable. There are two things:

• Rxjs explains that the best way to use lettable / pipeable is:

import { map, filter, mergeMap, tap } from 'rxjs/operators';

see : ReactiveX/rxjs#3018 (comment)

• Our problem seems to be related to Webpack 3. Webpack 4 will improve it.

see: angular/angular-cli#9069 (comment)

So, using the deep import is a workaround. I'm not sure that a provisional rule has its place in codelyzer.

[lucasvanhalst]

They will remove the deep imports in rxjs 6, so don't think this rule should become a thing.

See here: https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#600-alpha1-2018-01-12

operators: Pipeable operators must now be imported from rxjs like so: import { map, filter, switchMap } from 'rxjs/operators';. No deep imports.

[rokerkony]

Thank you @wKoza and @lucasvanhalst for great arguments, I will close this PR as it really doesn't make sense when RxJS@6 will not have this problem anymore...