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.

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

docs(operators): fix code example #6577

Merged
merged 6 commits into from Sep 18, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 4 additions & 1 deletion src/internal/operators/combineLatestWith.ts
Expand Up @@ -16,7 +16,10 @@ import { combineLatest } from './combineLatest';
*
* Simple calculation from two inputs.
*
* ```
* ```ts
* import { fromEvent } from 'rxjs';
* import { map, combineLatestWith } from 'rxjs/operators';
*
* // Setup: Add two inputs to the page
* const input1 = document.createElement('input');
* document.body.appendChild(input1);
Expand Down
16 changes: 8 additions & 8 deletions src/internal/operators/connect.ts
Expand Up @@ -48,8 +48,8 @@ const DEFAULT_CONFIG: ConnectConfig<unknown> = {
* Sharing a totally synchronous observable
*
* ```ts
* import { defer, of } from 'rxjs';
* import { tap, connect } from 'rxjs/operators';
* import { defer, merge, of } from 'rxjs';
* import { tap, connect, filter, map } from 'rxjs/operators';
*
* const source$ = defer(() => {
* console.log('subscription started');
Expand All @@ -59,12 +59,12 @@ const DEFAULT_CONFIG: ConnectConfig<unknown> = {
* });
*
* source$.pipe(
* // Notice in here we're merging 3 subscriptions to `shared$`.
* connect((shared$) => merge(
* shared$.pipe(map(n => `all ${n}`)),
* shared$.pipe(filter(n => n % 2 === 0), map(n => `even ${n}`)),
* shared$.pipe(filter(n => n % 2 === 1), map(n => `odd ${n}`)),
* ))
* // Notice in here we're merging 3 subscriptions to `shared$`.
* connect((shared$) => merge(
* shared$.pipe(map(n => `all ${n}`)),
* shared$.pipe(filter(n => n % 2 === 0), map(n => `even ${n}`)),
* shared$.pipe(filter(n => n % 2 === 1), map(n => `odd ${n}`)),
* ))
* )
* .subscribe(console.log);
*
Expand Down
4 changes: 1 addition & 3 deletions src/internal/operators/endWith.ts
Expand Up @@ -45,9 +45,7 @@ export function endWith<T, A extends unknown[] = T[]>(...values: A): OperatorFun
* takeUntil(documentClicks$),
* endWith('interval ended by click'),
* )
* .subscribe(
* x = console.log(x);
* )
* .subscribe(x => console.log(x));
*
* // Result (assuming a user clicks after 15 seconds)
* // "interval started"
Expand Down
4 changes: 4 additions & 0 deletions src/internal/operators/filter.ts
Expand Up @@ -30,6 +30,10 @@ export function filter<T>(predicate: (value: T, index: number) => boolean): Mono
* import { fromEvent } from 'rxjs';
* import { filter } from 'rxjs/operators';
*
* const div = document.createElement('div');
* div.style.cssText = `width: 200px;height: 200px;background: #09c;`;
* document.body.appendChild(div);
*
* const clicks = fromEvent(document, 'click');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

BTW, find, findIndex, first all need a div element to run the example. Or maybe we can refactor to use Typescript only, eg:

range(1, 10)
  .pipe(filter(x => x % 2 === 1))

* const clicksOnDivs = clicks.pipe(filter(ev => ev.target.tagName === 'DIV'));
* clicksOnDivs.subscribe(x => console.log(x));
Expand Down
14 changes: 10 additions & 4 deletions src/internal/operators/finalize.ts
Expand Up @@ -38,12 +38,18 @@ import { operate } from '../util/lift';
*
* const source = interval(100).pipe(
* finalize(() => console.log('[finalize] Called')),
* tap(() => console.log('[next] Called'),
* () => console.log('[error] Not called'),
* () => console.log('[tap] Not called')),
* tap({
* next: () => console.log('[next] Called'),
* error: () => console.log('[error] Not called'),
* complete: () => console.log('[tap complete] Not called')
* })
* );
*
* const sub = source.subscribe(x => console.log(x), noop, () => console.log('[complete] Not called'));
* const sub = source.subscribe({
* next: x => console.log(x),
* error: noop,
* complete: () => console.log('[complete] Not called')
* });
*
* timer(150).subscribe(() => sub.unsubscribe());
*
Expand Down
4 changes: 4 additions & 0 deletions src/internal/operators/find.ts
Expand Up @@ -40,6 +40,10 @@ export function find<T>(predicate: (value: T, index: number, source: Observable<
* import { fromEvent } from 'rxjs';
* import { find } from 'rxjs/operators';
*
* const div = document.createElement('div');
* div.style.cssText = 'width: 200px; height: 200px; background: #09c;';
* document.body.appendChild(div);
*
* const clicks = fromEvent(document, 'click');
* const result = clicks.pipe(find(ev => ev.target.tagName === 'DIV'));
* result.subscribe(x => console.log(x));
Expand Down
4 changes: 4 additions & 0 deletions src/internal/operators/findIndex.ts
Expand Up @@ -34,6 +34,10 @@ export function findIndex<T>(predicate: (value: T, index: number, source: Observ
* import { fromEvent } from 'rxjs';
* import { findIndex } from 'rxjs/operators';
*
* const div = document.createElement('div');
* div.style.cssText = 'width: 200px; height: 200px; background: #09c;';
* document.body.appendChild(div);
*
* const clicks = fromEvent(document, 'click');
* const result = clicks.pipe(findIndex(ev => ev.target.tagName === 'DIV'));
* result.subscribe(x => console.log(x));
Expand Down
4 changes: 4 additions & 0 deletions src/internal/operators/first.ts
Expand Up @@ -53,6 +53,10 @@ export function first<T, D = T>(
* import { fromEvent } from 'rxjs';
* import { first } from 'rxjs/operators';
*
* const div = document.createElement('div');
* div.style.cssText = 'width: 200px; height: 200px; background: #09c;';
* document.body.appendChild(div);
*
* const clicks = fromEvent(document, 'click');
* const result = clicks.pipe(first(ev => ev.target.tagName === 'DIV'));
* result.subscribe(x => console.log(x));
Expand Down
2 changes: 1 addition & 1 deletion src/internal/operators/groupBy.ts
Expand Up @@ -110,7 +110,7 @@ export function groupBy<T, K, R>(
* { id: 3, name: 'TSLint' }
* )
* .pipe(
* groupBy(p => p.id, p => p.name),
* groupBy(p => p.id, { element: p => p.name }),
* mergeMap(group$ =>
* group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))
* ),
Expand Down
10 changes: 5 additions & 5 deletions src/internal/operators/ignoreElements.ts
Expand Up @@ -23,11 +23,11 @@ import { noop } from '../util/noop';
* of('you', 'talking', 'to', 'me').pipe(
* ignoreElements(),
* )
* .subscribe(
* word => console.log(word),
* err => console.log('error:', err),
* () => console.log('the end'),
* );
* .subscribe({
* next: word => console.log(word),
* error: err => console.log('error:', err),
* complete: () => console.log('the end'),
* });
* // result:
* // 'the end'
* ```
Expand Down
12 changes: 7 additions & 5 deletions src/internal/operators/observeOn.ts
Expand Up @@ -38,12 +38,14 @@ import { OperatorSubscriber } from './OperatorSubscriber';
* import { interval, animationFrameScheduler } from 'rxjs';
* import { observeOn } from 'rxjs/operators';
*
* const someDiv = document.querySelector("#someDiv");
* const intervals = interval(10); // Intervals are scheduled
* // with async scheduler by default...
* const someDiv = document.createElement('div');
* someDiv.style.cssText = 'width: 200px;background: #09c';
* document.body.appendChild(someDiv);
* const intervals = interval(10); // Intervals are scheduled
* // with async scheduler by default...
* intervals.pipe(
* observeOn(animationFrameScheduler), // ...but we will observe on animationFrame
* ) // scheduler to ensure smooth animation.
* observeOn(animationFrameScheduler), // ...but we will observe on animationFrame
* ) // scheduler to ensure smooth animation.
* .subscribe(val => {
* someDiv.style.height = val + 'px';
* });
Expand Down
2 changes: 1 addition & 1 deletion src/internal/operators/repeat.ts
Expand Up @@ -20,7 +20,7 @@ import { OperatorSubscriber } from './OperatorSubscriber';
* Repeat a message stream
* ```ts
* import { of } from 'rxjs';
* import { repeat, delay } from 'rxjs/operators';
* import { repeat } from 'rxjs/operators';
*
* const source = of('Repeat message');
* const example = source.pipe(repeat(3));
Expand Down
4 changes: 2 additions & 2 deletions src/internal/operators/switchAll.ts
Expand Up @@ -35,15 +35,15 @@ import { identity } from '../util/identity';
*
* // Output
* // click
* // 0
* // 1
* // 2
* // 3
* // 4
* // ...
* // click
* // 0
* // 1
* // 2
* // 3
* // ...
* // click
* // ...
Expand Down
19 changes: 11 additions & 8 deletions src/internal/operators/timeInterval.ts
Expand Up @@ -23,19 +23,22 @@ import { map } from './map';
* Emit interval between current value with the last value
*
* ```ts
* import { interval } from "rxjs";
* import { timeInterval, timeout } from "rxjs/operators";
*
* const seconds = interval(1000);
*
* seconds.pipe(timeInterval())
* .subscribe(
* value => console.log(value),
* err => console.log(err),
* );
* .subscribe({
* next: value => console.log(value),
* error: err => console.log(err),
* });
*
* seconds.pipe(timeout(900))
* .subscribe(
* value => console.log(value),
* err => console.log(err),
* );
* .subscribe({
* next: value => console.log(value),
* error: err => console.log(err),
* });
*
* // NOTE: The values will never be this precise,
* // intervals created with `interval` or `setInterval`
Expand Down