docs(operators): fix code example (#6577)

* docs(operators): fix code example

* docs(operators): format `endWith` code example

Co-authored-by: Mladen Jakovljević <jakovljevic.mladen@gmail.com>

* chore: minor tweak to example code.

* chore: minor tweak to example code.

* chore: minor tweak to example code.

* docs(operators): fix code example

Co-authored-by: diye <diyews@users.noreply.github.com>
Co-authored-by: Mladen Jakovljević <jakovljevic.mladen@gmail.com>
Co-authored-by: Ben Lesh <ben@benlesh.com>

src/internal/operators/combineLatestWith.ts

@@ -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);

src/internal/operators/connect.ts

@@ -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');
@@ -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);
  *

src/internal/operators/endWith.ts

@@ -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"

src/internal/operators/filter.ts

@@ -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');
  * const clicksOnDivs = clicks.pipe(filter(ev => ev.target.tagName === 'DIV'));
  * clicksOnDivs.subscribe(x => console.log(x));

src/internal/operators/finalize.ts

@@ -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());
  *

src/internal/operators/find.ts

@@ -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));

src/internal/operators/findIndex.ts

@@ -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));

src/internal/operators/first.ts

@@ -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));

src/internal/operators/groupBy.ts

@@ -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}`]))
  *     ),

src/internal/operators/ignoreElements.ts

@@ -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'
  * ```

src/internal/operators/observeOn.ts

@@ -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';
  * });

src/internal/operators/repeat.ts

@@ -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));

src/internal/operators/switchAll.ts

@@ -35,15 +35,15 @@ import { identity } from '../util/identity';
  *
  * // Output
  * // click
+ * // 0
  * // 1
  * // 2
  * // 3
- * // 4
  * // ...
  * // click
+ * // 0
  * // 1
  * // 2
- * // 3
  * // ...
  * // click
  * // ...

src/internal/operators/timeInterval.ts

@@ -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`