Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: update operator imports in remaining examples #6739

Merged
merged 1 commit into from Jan 11, 2022
Merged

docs: update operator imports in remaining examples #6739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
117 changes: 63 additions & 54 deletions docs_app/content/deprecations/multicasting.md
View file
Open in desktop
Expand Up @@ -34,7 +34,8 @@ Instead of creating a [ConnectableObservable](/api/index/class/ConnectableObserv

<!-- prettier-ignore -->
```ts
import { ConnectableObservable, Subject, timer } from 'rxjs';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why this was changed? Was there some sort of automated fix?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't use any tool, all I use is WebStorm and this handful shortcut which works in this line as well, which is amazing, since this is not actual code, but a comment.

But, why I changed this line? Because I did the same set of changes in examples below this one - as I said in #6678, it was much easier for me to keep track of all objects I need. What I did with every changed example is to run the docs script, wait to re-render the example in browser and then I opened StackBlitz to verify that everything is working just fine. In the end, when SB opened and was ready, I checked every imported object to see if it is used - those that were not used were never highlighted in the code below - this is how ordering objects by the time they were used helped me.

In this particular example, it was just my OCD to make things consistent through entire file, nothing else. I don't ever expect anyone else to keep doing the same consistency changes as I did, sorry about that.

import { ConnectableObservable, timer, Subject } from 'rxjs';

// deprecated
const tick$ = new ConnectableObservable(
timer(1_000),
Expand All @@ -44,7 +45,8 @@ tick$.connect();

<!-- prettier-ignore -->
```ts
import { connectable, Subject, timer } from 'rxjs';
import { connectable, timer, Subject } from 'rxjs';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here.


// suggested refactor
const tick$ = connectable(timer(1_000), {
connector: () => new Subject()
Expand All @@ -56,7 +58,8 @@ In situations in which the `refCount` method is used, the [share](/api/operators

<!-- prettier-ignore -->
```ts
import { ConnectableObservable, Subject, timer } from 'rxjs';
import { ConnectableObservable, timer, Subject } from 'rxjs';

// deprecated
const tick$ = new ConnectableObservable(
timer(1_000),
Expand All @@ -66,8 +69,8 @@ const tick$ = new ConnectableObservable(

<!-- prettier-ignore -->
```ts
import { Subject, timer } from 'rxjs';
import { share } from 'rxjs/operators';
import { timer, share, Subject } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
share({ connector: () => new Subject() })
Expand All @@ -80,8 +83,8 @@ Where [multicast](/api/operators/multicast) is called with a subject factory, ca

<!-- prettier-ignore -->
```ts
import { ConnectableObservable, timer, Subject } from 'rxjs';
import { multicast } from 'rxjs/operators';
import { timer, multicast, Subject, ConnectableObservable } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
multicast(() => new Subject())
Expand All @@ -91,6 +94,7 @@ const tick$ = timer(1_000).pipe(
<!-- prettier-ignore -->
```ts
import { connectable, timer, Subject } from 'rxjs';

// suggested refactor
const tick$ = connectable(timer(1_000), {
connector: () => new Subject()
Expand All @@ -101,8 +105,8 @@ Where [multicast](/api/operators/multicast) is called with a subject instance, i

<!-- prettier-ignore -->
```ts
import { ConnectableObservable, timer, Subject } from 'rxjs';
import { multicast } from 'rxjs/operators';
import { timer, multicast, Subject, ConnectableObservable } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
multicast(new Subject())
Expand All @@ -112,6 +116,7 @@ const tick$ = timer(1_000).pipe(
<!-- prettier-ignore -->
```ts
import { connectable, timer, Subject } from 'rxjs';

// suggested refactor
const tick$ = connectable(timer(1_000), {
connector: () => new Subject(),
Expand All @@ -123,8 +128,8 @@ Where [multicast](/api/operators/multicast) is used in conjunction with [refCoun

<!-- prettier-ignore -->
```ts
import { timer, Subject } from 'rxjs';
import { multicast, refCount } from 'rxjs/operators';
import { timer, multicast, Subject, refCount } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
multicast(() => new Subject()),
Expand All @@ -134,8 +139,8 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { timer, Subject } from 'rxjs';
import { share } from 'rxjs/operators';
import { timer, share, Subject } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
share({ connector: () => new Subject() })
Expand All @@ -146,8 +151,8 @@ Where [multicast](/api/operators/multicast) is used with a selector, it can be r

<!-- prettier-ignore -->
```ts
import { timer, combineLatest } from 'rxjs';
import { multicast } from 'rxjs/operators';
import { timer, multicast, Subject, combineLatest } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
multicast(
Expand All @@ -159,8 +164,8 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { timer, combineLatest } from 'rxjs';
import { connect } from 'rxjs/operators';
import { timer, connect, combineLatest, Subject } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
connect((source) => combineLatest([source, source]), {
Expand All @@ -175,8 +180,8 @@ If you're using [publish](/api/operators/publish) to create a [ConnectableObserv

<!-- prettier-ignore -->
```ts
import { ConnectableObservable, timer } from 'rxjs';
import { publish } from 'rxjs/operators';
import { timer, publish, ConnectableObservable } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publish()
Expand All @@ -185,7 +190,8 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { connectable, timer } from 'rxjs';
import { connectable, timer, Subject } from 'rxjs';

// suggested refactor
const tick$ = connectable(timer(1_000), {
connector: () => new Subject<number>(),
Expand All @@ -197,8 +203,8 @@ And if [refCount](/api/operators/refCount) is being applied to the result of [pu

<!-- prettier-ignore -->
```ts
import { timer } from 'rxjs';
import { publish, refCount } from 'rxjs/operators';
import { timer, publish, refCount } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publish(),
Expand All @@ -208,14 +214,14 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { timer } from 'rxjs';
import { share } from 'rxjs/operators';
import { timer, share } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
share({
resetOnError: false,
resetOnComplete: false,
resetOnRefCountZero: false,
resetOnRefCountZero: false
})
);
```
Expand All @@ -224,8 +230,8 @@ If [publish](/api/operators/publish) is being called with a selector, you can us

<!-- prettier-ignore -->
```ts
import { timer, combineLatest } from 'rxjs';
import { publish } from 'rxjs/operators';
import { timer, publish, combineLatest } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publish((source) => combineLatest([source, source]))
Expand All @@ -234,8 +240,8 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { timer, combineLatest } from 'rxjs';
import { connect } from 'rxjs/operators';
import { timer, connect, combineLatest } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
connect((source) => combineLatest([source, source]))
Expand All @@ -248,8 +254,8 @@ If you're using [publishBehavior](/api/operators/publishBehavior) to create a [C

<!-- prettier-ignore -->
```ts
import { ConnectableObservable, timer } from 'rxjs';
import { publishBehavior } from 'rxjs/operators';
import { timer, publishBehavior, ConnectableObservable } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publishBehavior(0)
Expand All @@ -259,6 +265,7 @@ const tick$ = timer(1_000).pipe(
<!-- prettier-ignore -->
```ts
import { connectable, timer, BehaviorSubject } from 'rxjs';

// suggested refactor
const tick$ = connectable(timer(1_000), {
connector: () => new BehaviorSubject(0),
Expand All @@ -270,8 +277,8 @@ And if [refCount](/api/operators/refCount) is being applied to the result of [pu

<!-- prettier-ignore -->
```ts
import { timer } from 'rxjs';
import { publishBehavior, refCount } from 'rxjs/operators';
import { timer, publishBehavior, refCount } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publishBehavior(0),
Expand All @@ -281,15 +288,15 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { timer, BehaviorSubject } from 'rxjs';
import { share } from 'rxjs/operators';
import { timer, share, BehaviorSubject } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
share({
connector: () => new BehaviorSubject(0),
resetOnError: false,
resetOnComplete: false,
resetOnRefCountZero: false,
resetOnRefCountZero: false
})
);
```
Expand All @@ -300,8 +307,8 @@ If you're using [publishLast](/api/operators/publishLast) to create a [Connectab

<!-- prettier-ignore -->
```ts
import { ConnectableObservable, timer } from 'rxjs';
import { publishLast } from 'rxjs/operators';
import { timer, publishLast, ConnectableObservable } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publishLast()
Expand All @@ -311,6 +318,7 @@ const tick$ = timer(1_000).pipe(
<!-- prettier-ignore -->
```ts
import { connectable, timer, AsyncSubject } from 'rxjs';

// suggested refactor
const tick$ = connectable(timer(1_000), {
connector: () => new AsyncSubject<number>(),
Expand All @@ -322,8 +330,8 @@ And if [refCount](/api/operators/refCount) is being applied to the result of [pu

<!-- prettier-ignore -->
```ts
import { timer } from 'rxjs';
import { publishLast, refCount } from 'rxjs/operators';
import { timer, publishLast, refCount } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publishLast(),
Expand All @@ -333,15 +341,15 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { timer, AsyncSubject } from 'rxjs';
import { share } from 'rxjs/operators';
import { timer, share, AsyncSubject } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
share({
connector: () => new AsyncSubject(),
resetOnError: false,
resetOnComplete: false,
resetOnRefCountZero: false,
resetOnRefCountZero: false
})
);
```
Expand All @@ -352,8 +360,8 @@ If you're using [publishReplay](/api/operators/publishReplay) to create a [Conne

<!-- prettier-ignore -->
```ts
import { ConnectableObservable, timer } from 'rxjs';
import { publishReplay } from 'rxjs/operators';
import { timer, publishReplay, ConnectableObservable } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publishReplay(1)
Expand All @@ -363,6 +371,7 @@ const tick$ = timer(1_000).pipe(
<!-- prettier-ignore -->
```ts
import { connectable, timer, ReplaySubject } from 'rxjs';

// suggested refactor
const tick$ = connectable(timer(1_000), {
connector: () => new ReplaySubject<number>(1),
Expand All @@ -374,8 +383,8 @@ And if [refCount](/api/operators/refCount) is being applied to the result of [pu

<!-- prettier-ignore -->
```ts
import { timer } from 'rxjs';
import { publishReplay, refCount } from 'rxjs/operators';
import { timer, publishReplay, refCount } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publishReplay(1),
Expand All @@ -385,15 +394,15 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { timer, ReplaySubject } from 'rxjs';
import { share } from 'rxjs/operators';
import { timer, share, ReplaySubject } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
share({
connector: () => new ReplaySubject(1),
resetOnError: false,
resetOnComplete: false,
resetOnRefCountZero: false,
resetOnRefCountZero: false
})
);
```
Expand All @@ -402,8 +411,8 @@ If [publishReplay](/api/operators/publishReplay) is being called with a selector

<!-- prettier-ignore -->
```ts
import { timer, combineLatest } from 'rxjs';
import { publishReplay } from 'rxjs/operators';
import { timer, publishReplay, combineLatest } from 'rxjs';

// deprecated
const tick$ = timer(1_000).pipe(
publishReplay(1, undefined, (source) => combineLatest([source, source]))
Expand All @@ -412,8 +421,8 @@ const tick$ = timer(1_000).pipe(

<!-- prettier-ignore -->
```ts
import { timer, combineLatest, ReplaySubject } from 'rxjs';
import { connect } from 'rxjs/operators';
import { timer, connect, combineLatest, ReplaySubject } from 'rxjs';

// suggested refactor
const tick$ = timer(1_000).pipe(
connect((source) => combineLatest([source, source]), {
Expand Down
16 changes: 4 additions & 12 deletions docs_app/content/deprecations/resultSelector.md
View file
Open in desktop
Expand Up @@ -28,24 +28,16 @@ There were two reasons for actually deprecating those parameters:

Instead of using the `resultSelector` Argument, you can leverage the [`map`](/api/operators/map) operator on the inner Observable:

<!-- prettier-ignore -->
```ts

import {fromEvent, interval} from 'rxjs';
import {switchMap, map} from 'rxjs/operators';
import { fromEvent, switchMap, interval, map } from 'rxjs';

// deprecated
fromEvent(document, 'click').pipe(
switchMap(x => interval(0, 1000), (x) => x+1)
switchMap((x) => interval(1000), (_, x) => x + 1)
);
// suggested change
fromEvent(document, 'click').pipe(
switchMap(x => interval(0, 1000).pipe(
map(x => x+1)
))
switchMap((x) => interval(1000).pipe(map((x) => x + 1)))
);
```