From 0c48fd86bd196a5c68f765a12f7abdcd6abd1710 Mon Sep 17 00:00:00 2001 From: Eyal Lapid Date: Thu, 13 Sep 2018 15:26:05 +0300 Subject: [PATCH 001/256] feat(github-buttons): fix js error for github buttons config (#116) addapted book.json to the newer gitbook github buttons plugin api --- book.json | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/book.json b/book.json index a79aa724..6e353008 100644 --- a/book.json +++ b/book.json @@ -24,9 +24,20 @@ "token": "UA-54001708-2" }, "github-buttons": { - "repo": "btroncone/learn-rxjs", - "types": ["star", "watch"], - "size": "large" + "buttons": [ + { + "user": "btroncone", + "repo": "learn-rxjs", + "type": "star", + "size": "small" + }, + { + "user": "btroncone", + "repo": "learn-rxjs", + "type": "watch", + "size": "small" + } + ] } } } From 40f3d853dd6412df72da4a32e30ac3e43752f5c3 Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 13 Sep 2018 08:35:11 -0400 Subject: [PATCH 002/256] chore(plugin): update button config --- book.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/book.json b/book.json index 6e353008..ab3a8e0c 100644 --- a/book.json +++ b/book.json @@ -29,13 +29,15 @@ "user": "btroncone", "repo": "learn-rxjs", "type": "star", - "size": "small" + "size": "small", + "count": true }, { "user": "btroncone", "repo": "learn-rxjs", "type": "watch", - "size": "small" + "size": "small", + "count": true } ] } From b8c6ce11e6b58d4e54db047f19e9999fff86b799 Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 13 Sep 2018 08:39:13 -0400 Subject: [PATCH 003/256] style(headings): remove references to RxJS version --- README.md | 50 +++++++++++++++++++++---------------------- operators/README.md | 4 ++-- operators/complete.md | 4 ++-- 3 files changed, 29 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index b2c8321d..a9f3fca5 100644 --- a/README.md +++ b/README.md @@ -36,21 +36,21 @@ points. Learning Rx may be difficult but it is certainly worth the effort! Operators are the horse-power behind observables, providing an elegant, declarative solution to complex asynchronous tasks. This section contains all -[RxJS 5 operators](/operators/README.md), included with clear, executable -examples in both [JSBin](https://jsbin.com) and -[JSFiddle](https://jsfiddle.net). Links to additional resources and recipes for -each operator are also provided, when applicable. +[RxJS operators](/operators/README.md), included with clear, executable examples +in both [JSBin](https://jsbin.com) and [JSFiddle](https://jsfiddle.net). Links +to additional resources and recipes for each operator are also provided, when +applicable. ##### Categories -* [Combination](/operators/combination/README.md) -* [Conditional](/operators/conditional/README.md) -* [Creation](/operators/creation/README.md) -* [Error Handling](/operators/error_handling/README.md) -* [Multicasting](/operators/multicasting/README.md) -* [Filtering](/operators/filtering/README.md) -* [Transformation](/operators/transformation/README.md) -* [Utility](/operators/utility/README.md) +- [Combination](/operators/combination/README.md) +- [Conditional](/operators/conditional/README.md) +- [Creation](/operators/creation/README.md) +- [Error Handling](/operators/error_handling/README.md) +- [Multicasting](/operators/multicasting/README.md) +- [Filtering](/operators/filtering/README.md) +- [Transformation](/operators/transformation/README.md) +- [Utility](/operators/utility/README.md) **OR...** @@ -79,37 +79,37 @@ experience! #### Reading -* [RxJS Introduction](http://reactivex.io/rxjs/manual/overview.html#introduction) - +- [RxJS Introduction](http://reactivex.io/rxjs/manual/overview.html#introduction) - Official Docs -* [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - +- [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - André Staltz #### Videos -* [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop) - +- [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop) - Jafar Husain -* [What is RxJS?](https://egghead.io/lessons/rxjs-what-is-rxjs) - Ben Lesh -* [Creating Observable from Scratch](https://egghead.io/lessons/rxjs-creating-observable-from-scratch) - +- [What is RxJS?](https://egghead.io/lessons/rxjs-what-is-rxjs) - Ben Lesh +- [Creating Observable from Scratch](https://egghead.io/lessons/rxjs-creating-observable-from-scratch) - Ben Lesh -* [Introduction to RxJS Marble Testing](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing) - +- [Introduction to RxJS Marble Testing](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing) - Brian Troncone -* [Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming) +- [Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming) :dollar: - André Staltz -* [Reactive Programming using Observables](https://www.youtube.com/watch?v=HT7JiiqnYYc&feature=youtu.be) - +- [Reactive Programming using Observables](https://www.youtube.com/watch?v=HT7JiiqnYYc&feature=youtu.be) - Jeremy Lund #### Exercises -* [Functional Programming in JavaScript](http://reactivex.io/learnrx/) - Jafar +- [Functional Programming in JavaScript](http://reactivex.io/learnrx/) - Jafar Husain #### Tools -* [Rx Marbles - Interactive diagrams of Rx Observables](http://rxmarbles.com/) - +- [Rx Marbles - Interactive diagrams of Rx Observables](http://rxmarbles.com/) - André Staltz -* [Rx Visualizer - Animated playground for Rx Observables](https://rxviz.com) - +- [Rx Visualizer - Animated playground for Rx Observables](https://rxviz.com) - Misha Moroshko -* [Reactive.how - Animated cards to learn Reactive Programming](http://reactive.how) - +- [Reactive.how - Animated cards to learn Reactive Programming](http://reactive.how) - Cédric Soulas _Interested in RxJS 4? Check out [Denis Stoyanov's](https://github.com/xgrommx) @@ -117,7 +117,7 @@ excellent [eBook](https://xgrommx.github.io/rx-book/)!_ ## Translations -* [简体中文](https://rxjs-cn.github.io/learn-rxjs-operators) +- [简体中文](https://rxjs-cn.github.io/learn-rxjs-operators) ### A Note On References diff --git a/operators/README.md b/operators/README.md index 8a958b47..8f917128 100644 --- a/operators/README.md +++ b/operators/README.md @@ -1,6 +1,6 @@ -# RxJS 5 Operators By Example +# RxJS Operators By Example -A complete list of RxJS 5 operators with clear explanations, relevant resources, +A complete list of RxJS operators with clear explanations, relevant resources, and executable examples. _[Prefer a complete list in alphabetical order?](complete.md)_ diff --git a/operators/complete.md b/operators/complete.md index f94ebb38..82a76371 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -1,6 +1,6 @@ -# RxJS 5 Operators By Example +# RxJS Operators By Example -A complete list of RxJS 5 operators with clear explanations, relevant resources, +A complete list of RxJS operators with clear explanations, relevant resources, and executable examples. _[Prefer a split by operator type?](README.md)_ From 9d3f3cbfbcd08bcc65f2bdf3cf33ab7dd7831b5b Mon Sep 17 00:00:00 2001 From: Chris McKnight Date: Wed, 26 Sep 2018 06:06:39 -0500 Subject: [PATCH 004/256] fix(operators): Fix link to finalize / finally (#117) --- operators/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/README.md b/operators/README.md index 8f917128..62ed7823 100644 --- a/operators/README.md +++ b/operators/README.md @@ -89,7 +89,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [do / tap](utility/do.md) :star: - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) - - [finalize / finally](finalize.md) + - [finalize / finally](utility/finalize.md) - [let](utility/let.md) - [toPromise](utility/topromise.md) - [timeout](utility/timeout.md) From 940663b5744c64985c021240cd038c462c237201 Mon Sep 17 00:00:00 2001 From: Matthew Date: Wed, 3 Oct 2018 12:33:22 +0100 Subject: [PATCH 005/256] Update switchmap.md (#118) docs: grammatical error --- operators/transformation/switchmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index f94cf5f6..951bc737 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -23,7 +23,7 @@ cancelling effect. On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed. You can remember this by the phrase **switch to a new observable**. -This works perfect for scenarios like +This works perfectly for scenarios like [typeaheads](https://angular-2-training-book.rangle.io/handout/http/search_with_switchmap.html) where you are no longer concerned with the response of the previous request when a new input arrives. This also is a safe option in situations where a long lived From 01880448c439ea44bf011e523ea29bf802ef065c Mon Sep 17 00:00:00 2001 From: Marco Lrv Date: Wed, 3 Oct 2018 12:35:04 +0100 Subject: [PATCH 006/256] Include finalize example (#119) --- operators/utility/finalize.md | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/operators/utility/finalize.md b/operators/utility/finalize.md index e82e03fc..592cf863 100644 --- a/operators/utility/finalize.md +++ b/operators/utility/finalize.md @@ -4,7 +4,25 @@ ## Call a function when observable completes or errors -### [ Examples Coming Soon! ] +### Examples + +##### Example 1: Execute callback function when the observable completes + +( [StackBlitz](https://stackblitz.com/edit/typescript-ohddud) ) + +```js +import { interval } from 'rxjs'; +import { take, finalize } from 'rxjs/operators'; + +//emit value in sequence every 1 second +const source = interval(1000); +//output: 0,1,2,3,4,5.... +const example = source.pipe( + take(5), //take only the first 5 values + finalize(() => console.log('Sequence complete')) // Execute when the observable completes +) +const subscribe = example.subscribe(val => console.log(val)); +``` ### Related Recipes From 4d714d5ec80cdaa62a5f74bbbbf1ed1e5add8d27 Mon Sep 17 00:00:00 2001 From: Marco Lrv Date: Wed, 10 Oct 2018 23:03:18 +0100 Subject: [PATCH 007/256] Included example and description for auditTime (#121) --- operators/filtering/audittime.md | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index 631ce0bf..f4f2a47c 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -1,10 +1,36 @@ # auditTime -#### signature: `audit(duration: number, scheduler?: Scheduler): Observable` +#### signature: `auditTime(duration: number, scheduler?: Scheduler): Observable` ## Ignore for given time then emit most recent value -### [ Examples Coming Soon! ] +### Why use `auditTime` + +When you are interested in ignoring a soruce observable for a given amout of time, you can use `auditTime`. A possible use case is to only emit certain events (i.e. mouse clicks) at a maximum rate per second. After the specified duration has passed, the timer is disabled and the most recent source value is emitted on the output Observable, and this process repeats for the next source value. + +--- + +:bulb: If you want the timer to reset whenever a new event occurs on the soruce observable, you can use [debounceTime](debouncetime.md) + +--- + +### Examples + +##### Example 1: Emit clicks at a rate of at most one click per second + +( [stackBlitz](https://stackblitz.com/edit/typescript-skykxw) ) + +```js +import { fromEvent } from 'rxjs'; +import { auditTime } from 'rxjs/operators'; + +// Create observable that emits click events +const source = fromEvent(document, 'click'); +// Emit clicks at a rate of at most one click per second +const example = source.pipe(auditTime(1000)) +// Output (example): '(1s) --- Clicked --- (1s) --- Clicked' +const subscribe = example.subscribe(val => console.log('Clicked')); +``` ### Additional Resources From cc01bc4ce0938ce123f7706ef780bb4c6234cb88 Mon Sep 17 00:00:00 2001 From: Spencer Sellers Date: Mon, 15 Oct 2018 15:48:39 -0500 Subject: [PATCH 008/256] Remove deprecation notice on .toPromise (#122) toPromise still exists, and is not mentioned in the RxJS 5 -> 6 migration guide. --- operators/utility/topromise.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 1627da92..7dec77b8 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -6,7 +6,7 @@ --- -:warning: `toPromise` has been deprecated! (RxJS 5.5+) +:warning: `toPromise` is not a pipable operator, as it does not return an observable. --- From cab37315a63089326aa30f1417019b8cda1e6360 Mon Sep 17 00:00:00 2001 From: Alan Russell Date: Sat, 10 Nov 2018 13:17:56 +0000 Subject: [PATCH 009/256] Update sample.md (#128) Fix import statement in Example 1 --- operators/filtering/sample.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index c030207b..cb05eb2b 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -18,7 +18,7 @@ ```js // RxJS v6+ import { interval } from 'rxjs'; -import { sample } 'rxjs/operators'; +import { sample } from 'rxjs/operators'; //emit value every 1s const source = interval(1000); From de2000f6df609d6c3dea2fe5f1d6f2425c4d00e5 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Sat, 10 Nov 2018 08:18:39 -0500 Subject: [PATCH 010/256] adds missing `from` to import in example (#125) * adds missing `from` to import in example * Update sample.md --- operators/filtering/last.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/operators/filtering/last.md b/operators/filtering/last.md index 0b4e104a..2ab559f3 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -24,7 +24,7 @@ ```js // RxJS v6+ import { from } from 'rxjs'; -import { last } 'rxjs/operators'; +import { last } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); //no arguments, emit last value @@ -43,7 +43,7 @@ const subscribe = example.subscribe(val => console.log(`Last value: ${val}`)); ```js // RxJS v6+ import { from } from 'rxjs'; -import { last } 'rxjs/operators'; +import { last } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); //emit last even number @@ -64,7 +64,7 @@ const subscribeTwo = exampleTwo.subscribe(val => ```js // RxJS v6+ import { from } from 'rxjs'; -import { last } 'rxjs/operators'; +import { last } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); //no values will pass given predicate, emit default From 18bdb41550f9cc0e3d6a25ff6470e272653b5461 Mon Sep 17 00:00:00 2001 From: Camden Brown Date: Sat, 10 Nov 2018 07:19:18 -0600 Subject: [PATCH 011/256] Correct spelling for "source" (#127) --- operators/filtering/audittime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index f4f2a47c..46d5177b 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -6,7 +6,7 @@ ### Why use `auditTime` -When you are interested in ignoring a soruce observable for a given amout of time, you can use `auditTime`. A possible use case is to only emit certain events (i.e. mouse clicks) at a maximum rate per second. After the specified duration has passed, the timer is disabled and the most recent source value is emitted on the output Observable, and this process repeats for the next source value. +When you are interested in ignoring a source observable for a given amout of time, you can use `auditTime`. A possible use case is to only emit certain events (i.e. mouse clicks) at a maximum rate per second. After the specified duration has passed, the timer is disabled and the most recent source value is emitted on the output Observable, and this process repeats for the next source value. --- From e56eda4fa3dfc037300960fd8ace56a8e3338c97 Mon Sep 17 00:00:00 2001 From: Bitcollage Date: Sat, 10 Nov 2018 14:20:04 +0100 Subject: [PATCH 012/256] improve definition of `of` observable (#123) --- operators/creation/of.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/creation/of.md b/operators/creation/of.md index 26ddb6a0..c23d3576 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -2,7 +2,7 @@ #### signature: `of(...values, scheduler: Scheduler): Observable` -## Emit variable amount of values in a sequence. +## Emit variable amount of values in a sequence and then emits a complete notification. ### Examples From d2ca0f85a441682c0d4a4673dc9bdfc62ea81fd8 Mon Sep 17 00:00:00 2001 From: Brandon Faulkner Date: Sat, 10 Nov 2018 07:20:34 -0600 Subject: [PATCH 013/256] Fixed typo in audittime.md (#124) Fixed a typo of the word "source' in audittime.md From 0ef474d37ca523ddebccc094a5e6a80098a56caa Mon Sep 17 00:00:00 2001 From: Eduardo Garcia Date: Wed, 14 Nov 2018 03:02:13 +0000 Subject: [PATCH 014/256] Fix typo: "seperate" > "separate" (#129) --- recipes/progressbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/recipes/progressbar.md b/recipes/progressbar.md index 9c360022..f6e1272a 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -57,7 +57,7 @@ const displayData = data => { updateContent(`
${data}
`); }; -// simulate 5 seperate requests that complete at variable length +// simulate 5 separate requests that complete at variable length const observables: Array> = [ requestOne, requestTwo, From a58b2902b182c465faaea4940352497ee5ad8158 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sun, 18 Nov 2018 15:44:06 -0500 Subject: [PATCH 015/256] chore(ua): update ua spots --- README.md | 2 +- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/creation/create.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/topromise.md | 2 +- recipes/gameloop.md | 2 +- recipes/http-polling.md | 2 +- recipes/progressbar.md | 2 +- recipes/smartcounter.md | 2 +- 74 files changed, 74 insertions(+), 74 deletions(-) diff --git a/README.md b/README.md index a9f3fca5..d09d05fd 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -
+
## Content diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index ec9b9cc7..e62bbc63 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -
+
### Examples diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 16f16243..a60b29ff 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -33,7 +33,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -
+
### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 5f9961c7..172b31a1 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -16,7 +16,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index cd33809f..8ad5c0e8 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,7 +15,7 @@ a single operator instead! --- -
+
### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 9e165a20..4f857dd5 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -35,7 +35,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -
+
### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 01343198..95d9e8a2 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 1e551d6a..ae1bf074 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,7 +11,7 @@ single operator instead! --- -
+
### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 0579e66b..b823cf7f 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,7 +4,7 @@ ## Emit the previous and current values as an array. -
+
### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index 9cd3ebd3..97153e3e 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,7 +4,7 @@ ## The observable to emit first is used. -
+
### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 303619ad..98e4f7ca 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,7 +12,7 @@ can also start with an initial value! --- -
+
### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index 1bbd2263..be77c45f 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,7 +11,7 @@ emits, try [combinelatest](combinelatest.md)! --- -
+
### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index eda2bc4a..b0d40573 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,7 +12,7 @@ source! --- -
+
### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 7b63189b..0d04703c 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -
+
### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 230c7e9f..44f8bf1d 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -
+
### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index 2f56e31e..f42d6ba6 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+
### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index c47e4ab1..aa8a873e 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -
+
### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index f229360c..459a8e6c 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -16,7 +16,7 @@ characters! --- -
+
### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 6cb19a64..0aff2222 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -
+
### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index ee514647..9b09748f 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -
+
### Examples diff --git a/operators/creation/range.md b/operators/creation/range.md index b58881cd..375d639c 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -
+
### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index c3772233..ac9051f4 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -
+
### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index e3df897e..cf1561bb 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -
+
### Examples diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 30402a7b..b2de28c1 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index deeb61de..2bbfe670 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -4,7 +4,7 @@ ## Retry an observable sequence a specific number of times should an error occur. -
+
### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 4adbd3fe..53969fe0 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -
+
### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 7a1130c4..cb1d6461 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 5cd30bdc..b9c981aa 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -
+
### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index 2ab559f3..b993a84e 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index cb05eb2b..0f464462 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -
+
### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 17417c2c..e213852e 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -
+
### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index 353e712c..fac27a32 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -
+
### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 6335f52a..3abaf981 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -
+
### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 732e7b88..99a376f6 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -25,7 +25,7 @@ number of emissions while `skip` will skip the first _n_ number of emissions. --- -
+
### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 285f1b0a..5f52921f 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 9d323d28..878d20c6 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -4,7 +4,7 @@ ## Emit values until provided expression is false. -
+
### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 2112354c..5d1765e3 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -
+
### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index e5d09c61..522b77eb 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit latest value when specified duration has passed. -
+
### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index d634bda7..b4125a35 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -
+
### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 06562f32..ef90bfae 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -
+
### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index fc343151..74abf7fc 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 8194eaee..4d747b55 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -
+
### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 240fbd82..7d53f134 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,7 +4,7 @@ ## Collect output values until provided observable emits, emit as array. -
+
### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index f92536f6..559776e6 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,7 +4,7 @@ ## Collect emitted values until provided number is fulfilled, emit as array. -
+
### Examples diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index fa896ec2..cc3fe4df 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -
+
### Examples diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 6f63f1f5..8e5d6795 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -
+
### Examples diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 662c4e00..ddef2a45 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,7 +4,7 @@ ## Map values to inner observable, subscribe and emit in order. -
+
### Examples diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 9c83a53e..08e86528 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -
+
### Examples diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index a60c3d54..ac698af4 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,7 +4,7 @@ ## Map to inner observable, ignore other values until that observable completes. -
+
### Examples diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index c71a4a22..ecd41a5e 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -
+
### Examples diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index cdf6b6ed..f13bdd26 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -
+
### Examples diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 9e9e6178..388b3b57 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -4,7 +4,7 @@ ## Apply projection with each value from source. -
+
### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index d77ae82a..2968f166 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -4,7 +4,7 @@ ## Map emissions to constant value. -
+
### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 2007306b..b9aa9514 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 4](#example-4-mergemap-with-concurrent-value). -
+
### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index bb9d4788..53161a21 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -
+
### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 7070bfd5..0f1e8e90 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -4,7 +4,7 @@ ## Select properties to emit. -
+
### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 96fa5310..d7304e68 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ :bulb: If you need the current accumulated value on each emission, try [scan](scan.md)! -
+
### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index ea7b4036..db6def32 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -11,7 +11,7 @@ scan! --- -
+
### Examples diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 951bc737..b6511679 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -
+
### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index ef8691a1..33651384 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -
+
### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 679393b5..92ddc3d6 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -
+
### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index add945b0..1a7fb4a7 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -
+
### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 5df63ddd..0a2a8afb 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -
+
### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 00fc0d30..29540807 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -
+
### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 059c855b..c3aa5fb4 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -
+
### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index 29b173f0..42085694 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,7 @@ ## Turn notification objects into notification values. -
+
### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index d70327a4..2b19e587 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index 39ac5997..97611f3e 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 593d21a9..2f5e19dd 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -
+
### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 7dec77b8..65520172 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/recipes/gameloop.md b/recipes/gameloop.md index e9acab39..e3439287 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -
+
### Example Code diff --git a/recipes/http-polling.md b/recipes/http-polling.md index 6b5d4440..fa282cb2 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -7,7 +7,7 @@ interval. This is a common task in web applications, and one that RxJS tends to handle really well as the continuous series of HTTP requests and responses is easy to reason about as a stream of data. -
+
### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index f6e1272a..b4896f1a 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -
+
### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index c6027972..91965958 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -
+
#### Vanilla JS From 06bab6d36416d87bc899227d884f54aa316bb362 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 30 Nov 2018 22:16:17 +0000 Subject: [PATCH 016/256] Update buffertoggle.md with another example (#132) --- operators/transformation/buffertoggle.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index cc3fe4df..786a6810 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -41,6 +41,23 @@ const subscribe = bufferToggleInterval.subscribe(val => ); ``` +##### Example 2: Toggle buffer on and off on mouse down/up +( [StackBlitz](https://stackblitz.com/edit/rxjs-buffertoggle-mousemove) ) + +```js +import { fromEvent } from 'rxjs'; +import { bufferToggle } from 'rxjs/operators'; + +fromEvent(document, 'mousemove') + .pipe( + bufferToggle( + fromEvent(document, 'mousedown'), + _ => fromEvent(document, 'mouseup') + ) + ) +.subscribe(console.log) +``` + ### Additional Resources * [bufferToggle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferToggle) From ecbfc8a5547a7d0c59144fe7f97d8e10eaeaaf2d Mon Sep 17 00:00:00 2001 From: adamlubek Date: Tue, 4 Dec 2018 13:55:32 +0000 Subject: [PATCH 017/256] Added repeat operator example (#133) * Added repeat operator --- operators/utility/README.md | 1 + operators/utility/repeat.md | 39 +++++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 operators/utility/repeat.md diff --git a/operators/utility/README.md b/operators/utility/README.md index 0d531317..5fbfc2c0 100644 --- a/operators/utility/README.md +++ b/operators/utility/README.md @@ -11,6 +11,7 @@ provide helpful utilities in your observable toolkit. * [dematerialize](dematerialize.md) * [finalize / finally](finalize.md) * [let](let.md) +* [repeat](repeat.md) * [timeout](timeout.md) * [toPromise](topromise.md) diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md new file mode 100644 index 00000000..ba06e5c2 --- /dev/null +++ b/operators/utility/repeat.md @@ -0,0 +1,39 @@ + +# repeat + +#### signature: `repeat(count: number): Observable` + +## Repeats the stream of items emitted by the source Observable at most count times. + +
+ +### Examples + +##### Example 1: Repeat 3 times + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-repeat-learnrxjs?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { repeat, delay } from 'rxjs/operators'; +import { of } from 'rxjs'; + +const delayedThing = of('delayed value').pipe(delay(2000)); + +delayedThing.pipe( + repeat(3) +) +.subscribe(console.log) + +``` + +### Additional Resources + +- [repeat](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-repeat) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/repeat.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/repeat.ts) From c3e30593ac357b6c14fe02f680c04659867fafbe Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 4 Dec 2018 08:57:47 -0500 Subject: [PATCH 018/256] chore(operators): add repeat to all tocs --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + 3 files changed, 3 insertions(+) diff --git a/SUMMARY.md b/SUMMARY.md index 66d88481..a7cb96cf 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -89,6 +89,7 @@ - [dematerialize](/operators/utility/dematerialize.md) - [finalize / finally](operators/utility/finalize.md) - [let](/operators/utility/let.md) + - [repeat](/operators/utility/repeat.md) - [timeout](/operators/utility/timeout.md) - [toPromise](/operators/utility/topromise.md) - [Full Listing](/operators/complete.md) diff --git a/operators/README.md b/operators/README.md index 62ed7823..a1420a8d 100644 --- a/operators/README.md +++ b/operators/README.md @@ -91,6 +91,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [delayWhen](utility/delaywhen.md) - [finalize / finally](utility/finalize.md) - [let](utility/let.md) + - [repeat](utility/repeat.md) - [toPromise](utility/topromise.md) - [timeout](utility/timeout.md) diff --git a/operators/complete.md b/operators/complete.md index 82a76371..08b6c7d4 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -56,6 +56,7 @@ _[Prefer a split by operator type?](README.md)_ - [publish](multicasting/publish.md) - [race](combination/race.md) - [range](creation/range.md) +- [repeat](utility/repeat.md) - [retry](error_handling/retry.md) - [retryWhen](error_handling/retrywhen.md) - [sample](filtering/sample.md) From 1eed93aeeeea26b81918b68312e16cd5d8c00e8b Mon Sep 17 00:00:00 2001 From: adamlubek Date: Mon, 10 Dec 2018 15:13:05 +0000 Subject: [PATCH 019/256] Added scan example of accumulating http responses (#134) --- operators/transformation/scan.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index db6def32..c13e1db3 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -85,6 +85,34 @@ const scanObs = interval(1000) .subscribe(console.log); ``` +##### Example 4: Accumulating http responses over time + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-scan-accumulate-request-responses?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { interval, of } from 'rxjs'; +import { scan, delay, repeat, mergeMap } from 'rxjs/operators'; + +const fakeRequest = of('response').pipe(delay(2000)); + +// output: +// ['response'], +// ['response','response'], +// ['response','response','response'], +// etc... + +interval(1000) + .pipe( + mergeMap(_ => fakeRequest), + scan((allResponses, currentResponse) => + [...allResponses, currentResponse], []), + ) + .subscribe(console.log); +``` + ### Related Recipes - [Smart Counter](../../recipes/smartcounter.md) From 02b7d4552f3ac37d2e4575d309cd994e53a7719d Mon Sep 17 00:00:00 2001 From: adamlubek Date: Tue, 11 Dec 2018 12:06:41 +0000 Subject: [PATCH 020/256] Added another zip example (#135) --- operators/combination/zip.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/operators/combination/zip.md b/operators/combination/zip.md index b0d40573..63821b44 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -63,6 +63,23 @@ const example = zip(source, source.pipe(take(2))); const subscribe = example.subscribe(val => console.log(val)); ``` +##### Example 3: get X/Y coordinates of drag start/finish (mouse down/up) + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-zip-mousedownup-coordinates?file=index.ts&devtoolsheight=50) ) + +```js +// RxJS v6+ +import { fromEvent, zip } from 'rxjs'; +import { map } from 'rxjs/operators'; + +const documentEvent = eventName => fromEvent(document, eventName) + .pipe(map((e: MouseEvent) => ({x: e.clientX, y: e.clientY}))); + +zip(documentEvent('mousedown'), documentEvent('mouseup')) + .subscribe(e => console.log(JSON.stringify(e))); +``` + ### Additional Resources - [zip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip) From f3c8f5eedd2fa3c980c39d6fb97f58ac6d252e32 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Thu, 13 Dec 2018 14:27:18 +0000 Subject: [PATCH 021/256] Added another example of http polling using repeat (#136) --- recipes/http-polling.md | 42 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 4 deletions(-) diff --git a/recipes/http-polling.md b/recipes/http-polling.md index fa282cb2..03d5f557 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,5 +1,11 @@ # HTTP Polling +
+ +### Examples + +##### Example 1 + _By [@barryrowe](https://twitter.com/barryrowe)_ This recipe demonstrates one way you can achieve polling an HTTP endpoint on an @@ -7,10 +13,6 @@ interval. This is a common task in web applications, and one that RxJS tends to handle really well as the continuous series of HTTP requests and responses is easy to reason about as a stream of data. -
- -### Example Code - ( [StackBlitz](https://stackblitz.com/edit/rxjs-http-poll-recipe-jc5cj7?file=index.ts&devtoolsheight=50) ) @@ -178,3 +180,35 @@ fromEvent(startButton, 'click') - [mergeMap](../operators/transformation/mergemap.md) - [switchMap](../operators/transformation/switchmap.md) - [timer](../operators/creation/timer.md) + + +##### Example 2: Simple http polling + +_By [@adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates polling an HTTP endpoint using repeat. It waits for 3 seconds following the response to poll again. Code below is simplifed to demonstrate bare bones of solution but link below contains verbose logging and error handling. + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-http-polling?file=index.ts&devtoolsheight=80) ) + +```js +// RxJS v6+ +import { of } from 'rxjs'; +import { delay, tap, mergeMap, repeat } from 'rxjs/operators'; + +const fakeDelayedRequest = () => of(new Date()).pipe(delay(1000)); + +const display = response => { + document.open(); + document.write(response); +}; + +const poll = of({}).pipe( + mergeMap(_ => fakeDelayedRequest()), + tap(display), + delay(3000), + repeat() +); + +poll.subscribe(); +``` From 1e691ef5ee7953882c22b2e6e05690824b50772e Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Dec 2018 09:34:54 -0500 Subject: [PATCH 022/256] chore(tools): added link to new rx visualization tool --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index d09d05fd..3c2acf11 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,7 @@ experience! Misha Moroshko - [Reactive.how - Animated cards to learn Reactive Programming](http://reactive.how) - Cédric Soulas +- [Rx Visualization - Visualizes programming with RxJS](https://fingerpich.github.io/rx-visualization/) - Mojtaba Zarei _Interested in RxJS 4? Check out [Denis Stoyanov's](https://github.com/xgrommx) excellent [eBook](https://xgrommx.github.io/rx-book/)!_ From a75b8b920c28392c599e2ebf7994e953dfa853c0 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Sat, 15 Dec 2018 12:27:34 +0000 Subject: [PATCH 023/256] Added iif operator (#137) * Added iif operator example * Updated Readme with iif link * Added iif operator link * Added iif operator link * Corrected example code * Added iif operator link --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/conditional/README.md | 3 +- operators/conditional/iif.md | 72 +++++++++++++++++++++++++++++++++ 5 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 operators/conditional/iif.md diff --git a/SUMMARY.md b/SUMMARY.md index a7cb96cf..c7d2a644 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -19,6 +19,7 @@ - [Conditional](/operators/conditional/README.md) - [defaultIfEmpty](/operators/conditional/defaultifempty.md) - [every](/operators/conditional/every.md) + - [iif](/operators/conditional/iif.md) - [Creation](/operators/creation/README.md) - [create](/operators/creation/create.md) - [empty](/operators/creation/empty.md) diff --git a/operators/README.md b/operators/README.md index a1420a8d..ffa9e740 100644 --- a/operators/README.md +++ b/operators/README.md @@ -22,6 +22,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [Conditional](conditional/README.md) - [defaultIfEmpty](conditional/defaultifempty.md) - [every](conditional/every.md) + - [iif](conditional/iif.md) - [Creation](creation/README.md) - [create](creation/create.md) - [empty](creation/empty.md) diff --git a/operators/complete.md b/operators/complete.md index 08b6c7d4..43eae3b6 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -40,6 +40,7 @@ _[Prefer a split by operator type?](README.md)_ - [from](creation/from.md) :star: - [fromEvent](creation/fromevent.md) - [groupBy](transformation/groupby.md) +- [iif](conditional/iif.md) - [ignoreElements](filtering/ignoreelements.md) - [interval](creation/interval.md) - [last](filtering/last.md) diff --git a/operators/conditional/README.md b/operators/conditional/README.md index 7abcaecd..8e5cb9c7 100644 --- a/operators/conditional/README.md +++ b/operators/conditional/README.md @@ -4,4 +4,5 @@ For use-cases that depend on a specific condition to be met, these operators do ## Contents * [defaultIfEmpty](defaultifempty.md) -* [every](every.md) \ No newline at end of file +* [every](every.md) +* [iif](iif.md) diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md new file mode 100644 index 00000000..0dff63c0 --- /dev/null +++ b/operators/conditional/iif.md @@ -0,0 +1,72 @@ +# iif + +#### signature: `iif(condition: () => boolean, trueResult: SubscribableOrPromise = EMPTY, falseResult: SubscribableOrPromise = EMPTY): Observable` + +## Decides at subscription time which Observable will actually be subscribed. + +
+ +### Examples + +##### Example 1: simple iif + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-iif?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { iif, of, interval } from 'rxjs'; +import { mergeMap } from 'rxjs/operators'; + +const r$ = of('R'); +const x$ = of('X'); + +interval(1000).pipe( + mergeMap(v => + iif( + () => v % 4 === 0, + r$, + x$ + )) +).subscribe(console.log); + +//output: R, X, X, X, R, X, X, X, etc... + +``` + +##### Example 2: iif with mouse moves + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-iif-mousemoves?file=index.ts?file=index.ts&devtoolsheight=50) ) + +```js +// RxJS v6+ +import { fromEvent, iif, of } from 'rxjs'; +import { mergeMap, map, throttleTime, filter } from 'rxjs/operators'; + +const r$ = of(`I'm saying R!!`); +const x$ = of(`X's always win!!`); + +fromEvent(document, 'mousemove').pipe( + throttleTime(50), + filter((move: MouseEvent) => move.clientY < 210), + map((move: MouseEvent) => move.clientY), + mergeMap(yCoord => + iif( + () => yCoord < 110, + r$, + x$ + )) +).subscribe(console.log); + +``` + +### Additional Resources + +- [iif](https://rxjs-dev.firebaseapp.com/api/index/function/iif) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/iif.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/iif.ts) From a62c6617c548f11bdbe7e980186d19f8cf99e9d7 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 19 Dec 2018 18:44:32 +0000 Subject: [PATCH 024/256] Added Horizontal Scroll Indicator recipe (#138) * Added horizontal scroll indicator recipe * Added Horizontal Scroll Indicator link * Added Horizontal Scroll Indicator link * Fixed ordering * Fixed alphabetical ordering of recipes --- SUMMARY.md | 3 +- recipes/README.md | 6 +-- recipes/horizontal-scroll-indicator.md | 65 ++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 recipes/horizontal-scroll-indicator.md diff --git a/SUMMARY.md b/SUMMARY.md index c7d2a644..a171e0ae 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -95,8 +95,9 @@ - [toPromise](/operators/utility/topromise.md) - [Full Listing](/operators/complete.md) - [Recipes](/recipes/README.md) - - [Http Polling](/recipes/http-polling.md) - [Game Loop](/recipes/gameloop.md) + - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) + - [Http Polling](/recipes/http-polling.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Concepts](/concepts/README.md) diff --git a/recipes/README.md b/recipes/README.md index 91c3b5fc..beebfc50 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -4,8 +4,8 @@ Common use-cases and interesting recipes to help learn RxJS. ### Contents -* [Progress Bar](progressbar.md) -* [Smart Counter](smartcounter.md) * [Game Loop](gameloop.md) +* [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) * [HTTP Polling](http-polling.md) - +* [Progress Bar](progressbar.md) +* [Smart Counter](smartcounter.md) diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md new file mode 100644 index 00000000..1c529be5 --- /dev/null +++ b/recipes/horizontal-scroll-indicator.md @@ -0,0 +1,65 @@ +# Horizontal scroll indicator + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates the creation of a horizontal scroll indicator. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-horizontal-scroll-indicator?file=index.ts) +) + +```js +// RxJS v6+ +import { fromEvent } from 'rxjs'; +import { throttleTime, tap } from 'rxjs/operators'; + +const scrollIndication = document.getElementById('indication'); +const getScrollWidth = () => { + const doc = document.documentElement; + // https://www.w3schools.com/howto/howto_js_scroll_indicator.asp + const winScroll = doc.scrollTop; + const height = doc.scrollHeight - doc.clientHeight; + + return (winScroll / height) * 100; +} +const setScroll = _ => + scrollIndication.style.width = getScrollWidth() + '%' + +fromEvent(document, 'scroll') + .pipe( + throttleTime(20), + tap(setScroll) + ) +.subscribe() +``` + +##### html + +```html + + +
 
+Scroll down!!! +
Boom!
+``` + +### Operators Used + +- [fromEvent](../operators/creation/fromevent.md) +- [tap](../operators/utility/do.md) +- [throttleTime](../operators/filtering/throttletime.md) From 77f43c6b463ce1e5b52169ebf79c89c251da3ede Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 19 Dec 2018 13:51:05 -0500 Subject: [PATCH 025/256] chore(operators): add related recipes for scroll indicator --- operators/creation/fromevent.md | 1 + operators/filtering/throttletime.md | 4 ++++ operators/utility/do.md | 4 ++++ 3 files changed, 9 insertions(+) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 0aff2222..78ffe4b4 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -34,6 +34,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Progress Bar](../../recipes/progressbar.md) - [Game Loop](../../recipes/gameloop.md) - [HTTP Polling](../../recipes/http-polling.md) +- [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) ### Additional Resources diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 522b77eb..b06398be 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -55,6 +55,10 @@ const example = source.pipe(throttleTime(1200)); const subscribe = example.subscribe(val => console.log(val)); ``` +### Related Recipes + +- [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) + ### Additional Resources - [throttleTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttleTime) diff --git a/operators/utility/do.md b/operators/utility/do.md index 2b19e587..138ace76 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -39,6 +39,10 @@ const example = source.pipe( const subscribe = example.subscribe(val => console.log(val)); ``` +### Related Recipes + +- [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) + ### Additional Resources - [do](http://reactivex.io/documentation/operators/do.html) :newspaper: - From f7966315b618421d492e913750c06d1d5124e3a9 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 21 Dec 2018 20:12:10 +0000 Subject: [PATCH 026/256] Added type ahead recipe (#139) * Added type ahead recipe * Added type-ahead recipe link * Added type ahead recipe link * Update fromevent.md * Corrected recipe title * Update map.md * Update of.md * Update switchmap.md * Update do.md * Update throttletime.md * Update distinctuntilchanged.md * Update debouncetime.md * Made markdown consistent with other pages --- SUMMARY.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/of.md | 4 ++ operators/filtering/debouncetime.md | 4 ++ operators/filtering/distinctuntilchanged.md | 4 ++ operators/filtering/throttletime.md | 1 + operators/transformation/map.md | 7 ++- operators/transformation/switchmap.md | 1 + operators/utility/do.md | 1 + recipes/README.md | 1 + recipes/type-ahead.md | 62 +++++++++++++++++++++ 11 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 recipes/type-ahead.md diff --git a/SUMMARY.md b/SUMMARY.md index a171e0ae..3a04d51a 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -100,6 +100,7 @@ - [Http Polling](/recipes/http-polling.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) + - [Type Ahead](/recipes/type-ahead.md) - [Concepts](/concepts/README.md) - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) - [Understanding Operator Imports](/concepts/operator-imports.md) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 78ffe4b4..084deaa3 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -35,6 +35,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Game Loop](../../recipes/gameloop.md) - [HTTP Polling](../../recipes/http-polling.md) - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) +- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/creation/of.md b/operators/creation/of.md index c23d3576..f245cae3 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -40,6 +40,10 @@ const source = of({ name: 'Brian' }, [1, 2, 3], function hello() { const subscribe = source.subscribe(val => console.log(val)); ``` +### Related Recipes + +- [Type Ahead](../../recipes/type-ahead.md) + ### Additional Resources - [of](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-of) diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index c53c5e95..edc1b88c 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -38,6 +38,10 @@ const subscribe = debouncedInput.subscribe(val => { }); ``` +### Related Recipes + +- [Type Ahead](../../recipes/type-ahead.md) + ### Additional Resources * [debounceTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime) diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index a6ea1bc6..f8fa8456 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -60,6 +60,10 @@ const nonDistinctObjects = myArrayWithDuplicateObjects .subscribe(val => console.log('DISTINCT OBJECTS:', val)); ``` +### Related Recipes + +- [Type Ahead](../../recipes/type-ahead.md) + ### Additional Resources * [distinctUntilChanged](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-distinctUntilChanged) diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index b06398be..ce3dfe8d 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -58,6 +58,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) +- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 388b3b57..f3217714 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -52,9 +52,10 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -* [Smart Counter](../../recipes/smartcounter.md) -* [Game Loop](../../recipes/gameloop.md) -* [HTTP Polling](../../recipes/http-polling.md) +- [Smart Counter](../../recipes/smartcounter.md) +- [Game Loop](../../recipes/gameloop.md) +- [HTTP Polling](../../recipes/http-polling.md) +- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index b6511679..ac7820e8 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -167,6 +167,7 @@ Resume Timer - [Smart Counter](../../recipes/smartcounter.md) - [Progress Bar](../../recipes/progressbar.md) - [HTTP Polling](../../recipes/http-polling.md) +- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index 138ace76..2b41d122 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -42,6 +42,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) +- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/recipes/README.md b/recipes/README.md index beebfc50..b08d9758 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -9,3 +9,4 @@ Common use-cases and interesting recipes to help learn RxJS. * [HTTP Polling](http-polling.md) * [Progress Bar](progressbar.md) * [Smart Counter](smartcounter.md) +* [Type Ahead](type-ahead.md) diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md new file mode 100644 index 00000000..f3029600 --- /dev/null +++ b/recipes/type-ahead.md @@ -0,0 +1,62 @@ +# Type Ahead + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates the creation of type ahead client side code. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-type-ahead?file=index.ts&devtoolsheight=50) +) + +```js +// RxJS v6+ +import { fromEvent, of } from 'rxjs'; +import { debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'; + +const getContinents = keys => [ + 'africa', + 'antarctica', + 'asia', + 'australia', + 'europe', + 'north america', + 'south america' +].filter(e => e.indexOf(keys.toLowerCase()) > -1); + +const fakeContinentsRequest = keys => of(getContinents(keys)) + .pipe( + tap(_ => console.log(`API CALL at ${new Date()}`)) + ); + +fromEvent(document.getElementById('type-ahead'), 'keyup') + .pipe( + debounceTime(200), + map((e: any) => e.target.value), + distinctUntilChanged(), + switchMap(fakeContinentsRequest), + tap(c => document.getElementById('output').innerText = c.join('\n')) + ).subscribe(); +``` + +##### html + +```html +Get continents + +
+
+``` + +### Operators Used +- [debounceTime](../operators/filtering/debouncetime.md) +- [distinctUntilChanged](../operators/filtering/distinctuntilchanged.md) +- [fromEvent](../operators/creation/fromevent.md) +- [map](../operators/transformation/map.md) +- [of](../operators/creation/of.md) +- [switchMap](../operators/transformation/switchmap.md) +- [tap](../operators/utility/do.md) +- [throttleTime](../operators/filtering/throttletime.md) From 3080e5abedfecb19764888684261e329ba63549f Mon Sep 17 00:00:00 2001 From: adamlubek Date: Sun, 23 Dec 2018 15:58:49 +0000 Subject: [PATCH 027/256] Added zip example to get mouse click duration (#140) --- operators/combination/zip.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 63821b44..67fc73d2 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -80,6 +80,31 @@ zip(documentEvent('mousedown'), documentEvent('mouseup')) .subscribe(e => console.log(JSON.stringify(e))); ``` +##### Example 4: mouse click duration + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-zip-mouseclickduration?file=index.ts&devtoolsheight=50) ) + +```js +// RxJS v6+ +import { fromEvent, zip } from 'rxjs'; +import { map } from 'rxjs/operators'; + +const eventTime = eventName => + fromEvent(document, eventName).pipe(map(() => new Date())); + +const mouseClickDuration = + zip( + eventTime('mousedown'), + eventTime('mouseup') + ).pipe( + map(([start, end]) => + Math.abs((start.getTime() - end.getTime()))) + ); + +mouseClickDuration.subscribe(console.log); +``` + ### Additional Resources - [zip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip) From 5a43477363e31802ec333d2b0916684f05a5745b Mon Sep 17 00:00:00 2001 From: adamlubek Date: Mon, 24 Dec 2018 12:38:39 +0000 Subject: [PATCH 028/256] Added key press tracking example with bufferCount (#141) * Added key press tracking example with bufferCount * Corrected typeo --- operators/transformation/buffercount.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 559776e6..327e776b 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -67,6 +67,31 @@ const subscribe = bufferEveryOne.subscribe(val => ); ``` +##### Example 3: Last n keyboard presses tracking + +( [StackBlitz](https://stackblitz.com/edit/rxjs-buffecount-keypresses-tracking?file=index.ts&devtoolsheight=50) ) + +```js +// RxJS v6+ +import { fromEvent, of } from 'rxjs'; +import { bufferCount, map, mergeMap, tap } from 'rxjs/operators'; + +const fakeKeyPressesPost = keypresses => of(201) + .pipe( + tap(_ => { + console.log(`received key presses are: ${keypresses}`); + document.getElementById('output').innerText = keypresses; + }) + ); + +fromEvent(document, 'keydown') + .pipe( + map((e: KeyboardEvent) => e.key), + bufferCount(5), + mergeMap(fakeKeyPressesPost) + ).subscribe(); +``` + ### Additional Resources * [bufferCount](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferCount) From dc9981398ff7e32faca3fda0bb34f840ef0d1ba2 Mon Sep 17 00:00:00 2001 From: Eduardo Garcia Date: Fri, 28 Dec 2018 12:37:45 +0000 Subject: [PATCH 029/256] Fix typo: "receieved" -> "received" (#142) --- operators/combination/forkjoin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 4f857dd5..3c8eab4d 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -19,7 +19,7 @@ value! This operator is best used when you have a group of observables and only care about the final emitted value of each. One common use case for this is if you wish to issue multiple requests on page load (or some other event) and only want -to take action when a response has been receieved for all. In this way it is +to take action when a response has been received for all. In this way it is similar to how you might use [`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all). From ca95ac017d57059760d422e35bfd067ea690415a Mon Sep 17 00:00:00 2001 From: adamlubek Date: Sat, 29 Dec 2018 15:11:42 +0000 Subject: [PATCH 030/256] Added sequenceEqual operator docs (#143) * Create sequenceequal.md * Update README.md * Update complete.md * Update README.md * Update SUMMARY.md --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/conditional/README.md | 1 + operators/conditional/sequenceequal.md | 71 ++++++++++++++++++++++++++ 5 files changed, 75 insertions(+) create mode 100644 operators/conditional/sequenceequal.md diff --git a/SUMMARY.md b/SUMMARY.md index 3a04d51a..cd4a795a 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -20,6 +20,7 @@ - [defaultIfEmpty](/operators/conditional/defaultifempty.md) - [every](/operators/conditional/every.md) - [iif](/operators/conditional/iif.md) + - [sequenceequal](/operators/conditional/sequenceequal.md) - [Creation](/operators/creation/README.md) - [create](/operators/creation/create.md) - [empty](/operators/creation/empty.md) diff --git a/operators/README.md b/operators/README.md index ffa9e740..26e47d0f 100644 --- a/operators/README.md +++ b/operators/README.md @@ -23,6 +23,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [defaultIfEmpty](conditional/defaultifempty.md) - [every](conditional/every.md) - [iif](conditional/iif.md) + - [sequenceequal](conditional/sequenceequal.md) - [Creation](creation/README.md) - [create](creation/create.md) - [empty](creation/empty.md) diff --git a/operators/complete.md b/operators/complete.md index 43eae3b6..c35b7863 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -62,6 +62,7 @@ _[Prefer a split by operator type?](README.md)_ - [retryWhen](error_handling/retrywhen.md) - [sample](filtering/sample.md) - [scan](transformation/scan.md) :star: +- [sequenceequal](conditional/sequenceequal.md) - [share](multicasting/share.md) :star: - [shareReplay](multicasting/sharereplay.md) :star: - [single](filtering/single.md) diff --git a/operators/conditional/README.md b/operators/conditional/README.md index 8e5cb9c7..75c1c6ff 100644 --- a/operators/conditional/README.md +++ b/operators/conditional/README.md @@ -6,3 +6,4 @@ For use-cases that depend on a specific condition to be met, these operators do * [defaultIfEmpty](defaultifempty.md) * [every](every.md) * [iif](iif.md) +* [sequenceequal](sequenceequal.md) diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md new file mode 100644 index 00000000..71aaaa70 --- /dev/null +++ b/operators/conditional/sequenceequal.md @@ -0,0 +1,71 @@ +# sequenceEqual + +#### signature: `sequenceEqual(compareTo: Observable, comparor?: (a: T, b: T) => boolean): OperatorFunction` + +## Compares all values of two observables in sequence using an optional comparor function and returns an observable of a single boolean value representing whether or not the two sequences are equal. + +
+ +### Examples + +##### Example 1: simple sequenceEqual + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-sequenceequal?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { of, from } from 'rxjs'; +import { sequenceEqual, switchMap } from 'rxjs/operators'; + +const expectedSequence = from([4, 5, 6]); + +of([1, 2, 3], [4, 5, 6], [7, 8, 9]).pipe( + switchMap(arr => + from(arr).pipe(sequenceEqual(expectedSequence))) +).subscribe(console.log); + +//output: false, true, false + +``` + +##### Example 2: sequenceEqual with keyboard events + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-sequenceequal-buffercount?file=index.ts&devtoolsheight=50) ) + +```js +// RxJS v6+ +import { from, fromEvent } from 'rxjs'; +import { sequenceEqual, map, bufferCount, mergeMap, tap } from 'rxjs/operators'; + +const expectedSequence = from(['q', 'w', 'e', 'r', 't', 'y']); +const setResult = text => + document.getElementById('result').innerText = text; + +fromEvent(document, 'keydown') + .pipe( + map((e: KeyboardEvent) => e.key), + tap(v => setResult(v)), + bufferCount(6), + mergeMap(keyDowns => + from(keyDowns) + .pipe( + sequenceEqual(expectedSequence), + tap(isItQwerty => + setResult(isItQwerty ? 'WELL DONE!' : 'TYPE AGAIN!')) + )) + ) + .subscribe(e => console.log(`did you say qwerty? ${e}`)); + +``` + +### Additional Resources + +- [sequenceEqual](https://rxjs-dev.firebaseapp.com/api/operators/sequenceEqual) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sequenceEqual.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sequenceEqual.ts) From 0b0468553badc33ac08c2ce4309a4e286aa23e24 Mon Sep 17 00:00:00 2001 From: Raz Luvaton Date: Tue, 1 Jan 2019 23:14:24 +0200 Subject: [PATCH 031/256] Remove Type Ahead from related recipes (#145) Remove `Type Ahead` from related recipes when it's not used there --- operators/filtering/throttletime.md | 1 - 1 file changed, 1 deletion(-) diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index ce3dfe8d..b06398be 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -58,7 +58,6 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) -- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources From 9b121d68f3b22f2edb1d37a42cab11a139d41213 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 25 Jan 2019 15:20:02 +0000 Subject: [PATCH 032/256] Added BehaviorSubject docs (#146) * Add documentation and examples for Subjects --- README.md | 22 +++++++-- SUMMARY.md | 6 ++- recipes/type-ahead.md | 1 - subjects/README.md | 28 +++++++++++ subjects/asyncsubject.md | 38 +++++++++++++++ subjects/behaviorsubject.md | 95 +++++++++++++++++++++++++++++++++++++ subjects/replaysubject.md | 37 +++++++++++++++ subjects/subject.md | 35 ++++++++++++++ 8 files changed, 257 insertions(+), 5 deletions(-) create mode 100644 subjects/README.md create mode 100644 subjects/asyncsubject.md create mode 100644 subjects/behaviorsubject.md create mode 100644 subjects/replaysubject.md create mode 100644 subjects/subject.md diff --git a/README.md b/README.md index 3c2acf11..bf33c71a 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ in both [JSBin](https://jsbin.com) and [JSFiddle](https://jsfiddle.net). Links to additional resources and recipes for each operator are also provided, when applicable. -##### Categories +##### Operator Categories - [Combination](/operators/combination/README.md) - [Conditional](/operators/conditional/README.md) @@ -56,6 +56,16 @@ applicable. [Complete listing in alphabetical order](/operators/complete.md) +#### Understanding Subjects + +A Subject is a special type of Observable which shares a single execution path among observers. + +- [What is a Subject?](/subjects/README.md) +- [AsyncSubject](/subjects/asyncsubject.md) +- [BehaviorSubject](/subjects/behaviorsubject.md) +- [ReplaySubject](/subjects/replaysubject.md) +- [Subject](/subjects/subject.md) + #### Concepts Without a solid base knowledge of how Observables work behind the scenes, it's @@ -63,13 +73,19 @@ easy for much of RxJS to feel like 'magic'. This section helps solidify the major concepts needed to feel comfortable with reactive programming and Observables. -[Complete Concept Listing](/concepts/README.md) +- [RxJS v5 -> v6 Upgrade](rxjs5-6.md) +- [Understanding Operator Imports](operator-imports.md) #### Recipes Recipes for common use-cases and interesting solutions with RxJS. -[Complete Recipe Listing](/recipes/README.md) +- [Game Loop](gameloop.md) +- [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) +- [HTTP Polling](http-polling.md) +- [Progress Bar](progressbar.md) +- [Smart Counter](smartcounter.md) +- [Type Ahead](type-ahead.md) ## Introductory Resources diff --git a/SUMMARY.md b/SUMMARY.md index cd4a795a..4a12557f 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -1,7 +1,6 @@ # Summary ### Learn RxJS - - [Operators](/operators/README.md) - [Combination](/operators/combination/README.md) - [combineAll](/operators/combination/combineall.md) @@ -95,6 +94,11 @@ - [timeout](/operators/utility/timeout.md) - [toPromise](/operators/utility/topromise.md) - [Full Listing](/operators/complete.md) +- [Subjects](/subjects/README.md) + - [AsyncSubject](/subjects/asyncsubject.md) + - [BehaviorSubject](/subjects/behaviorsubject.md) + - [ReplaySubject](/subjects/replaysubject.md) + - [Subject](/subjects/subject.md) - [Recipes](/recipes/README.md) - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index f3029600..bf939281 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -59,4 +59,3 @@ Get continents - [of](../operators/creation/of.md) - [switchMap](../operators/transformation/switchmap.md) - [tap](../operators/utility/do.md) -- [throttleTime](../operators/filtering/throttletime.md) diff --git a/subjects/README.md b/subjects/README.md new file mode 100644 index 00000000..12e0ce2b --- /dev/null +++ b/subjects/README.md @@ -0,0 +1,28 @@ +# Subjects + +A Subject is a special type of Observable which shares a single execution path among observers. + +You can think of this as a single speaker talking at a microphone in a room full of people. Their message (the subject) is being delivered to many (multicast) people (the observers) at once. This is the basis of **multicasting**. Typical observables would be comparable to a 1 on 1 conversation. + +There are 4 variants of subjects: + +- **Subject** - No intial value or replay behavior. +- **AsyncSubject** - Emits latest value to observers upon completion. +- **BehaviorSubject** - Requires an initial value and emits its current value (last emitted item) to new subscribers. +- **ReplaySubject** - Emits specified number of last emitted values (a replay) to new subscribers. + +## Contents + +* [AsyncSubject](asyncsubject.md) +* [BehaviorSubject](behaviorsubject.md) +* [ReplaySubject](replaysubject.md) +* [Subject](subject.md) + +### Additional Resources + +* [Official Overview](http://reactivex.io/rxjs/manual/overview.html#subject) + :newspaper: +* [Official Documentation](http://reactivex.io/documentation/subject.html) + :newspaper: +* [On The Subject Of Subjects (in RxJS)](https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93) + :newspaper: - Ben Lesh diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md new file mode 100644 index 00000000..3d6fd8c1 --- /dev/null +++ b/subjects/asyncsubject.md @@ -0,0 +1,38 @@ +# AsyncSubject + +## A Subject that only emits a its last value upon completion + +
+ +### Examples + +##### Example 1: simple AsyncSubject + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-asyncsubject?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { AsyncSubject } from 'rxjs'; + +const sub = new AsyncSubject(); + +sub.subscribe(console.log); + +sub.next(123); //nothing logged + +sub.subscribe(console.log); + +sub.next(456); //nothing logged +sub.complete(); //456, 456 logged by both subscribers +``` + +### Additional Resources + +- [AsyncSubject](https://rxjs-dev.firebaseapp.com/api/index/class/AsyncSubject) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/AsyncSubject.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/AsyncSubject.ts) diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md new file mode 100644 index 00000000..aafbefa9 --- /dev/null +++ b/subjects/behaviorsubject.md @@ -0,0 +1,95 @@ +# BehaviorSubject + +## A Subject that requires an initial value and emits its current value to new subscribers + +
+ +### Examples + +##### Example 1: simple BehaviorSubject + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-behaviorsubject-simpleexample?file=index.ts?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { BehaviorSubject } from 'rxjs'; + +const subject = new BehaviorSubject(123); + +//two new subscribers will get initial value => output: 123, 123 +subject.subscribe(console.log); +subject.subscribe(console.log); + +//two subscribers will get new value => output: 456, 456 +subject.next(456); + +//new subscriber will get latest value (456) => output: 456 +subject.subscribe(console.log); + +//all three subscribers will get new value => output: 789, 789, 789 +subject.next(789); + +// output: 123, 123, 456, 456, 456, 789, 789, 789 + +``` + +##### Example 2: BehaviorSubject with new subscribers created on mouse clicks + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-behaviorsubject-mouseclicks?file=index.ts) ) + +```js +// RxJS v6+ +import { BehaviorSubject, fromEvent, interval, merge } from 'rxjs'; +import { map, tap, mergeMap } from 'rxjs/operators'; + +const setElementText = (elemId, text) => + document.getElementById(elemId).innerText = text.toString(); +const addHtmlElement = coords => document.body.innerHTML += ` +
+
`; + +const subject = new BehaviorSubject(0); + +const click$ = fromEvent(document, 'click').pipe( + map((e: MouseEvent) => ({ + x: e.clientX, + y: e.clientY, + id: Math.random() })), + tap(addHtmlElement), + mergeMap(coords => + subject + .pipe(tap(v => setElementText(coords.id, v))) + ) +); + +const interval$ = interval(1000).pipe( + tap(v => subject.next(v)), + tap(v => setElementText('intervalValue', v)) +); + +merge(click$, interval$).subscribe(); + +``` + +### Additional Resources + +- [BehaviorSubject](https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/BehaviorSubject.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/BehaviorSubject.ts) diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md new file mode 100644 index 00000000..36f2f063 --- /dev/null +++ b/subjects/replaysubject.md @@ -0,0 +1,37 @@ +# ReplaySubject + +## A Subject that "replays" or emits old values to new subscribers + +
+ +### Examples + +##### Example 1: simple ReplaySubject + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-replaysubject-simple-example?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { ReplaySubject } from 'rxjs'; + +const sub = new ReplaySubject(3); + +sub.next(1); +sub.next(2); +sub.subscribe(console.log); // OUTPUT => 1,2 +sub.next(3); // OUTPUT => 3 +sub.next(4); // OUTPUT => 4 +sub.subscribe(console.log); // OUTPUT => 2,3,4 (log of last 3 values from new subscriber) +sub.next(5); // OUTPUT => 5,5 (log from both subscribers) +``` + +### Additional Resources + +- [ReplaySubject](https://rxjs-dev.firebaseapp.com/api/index/class/ReplaySubject) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/ReplaySubject.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/ReplaySubject.ts) diff --git a/subjects/subject.md b/subjects/subject.md new file mode 100644 index 00000000..c22695ae --- /dev/null +++ b/subjects/subject.md @@ -0,0 +1,35 @@ +# Subject + +## A special type of Observable which shares a single execution path among observers + +
+ +### Examples + +##### Example 1: simple Subject + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-subject-simple-example?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { Subject } from 'rxjs'; + +const sub = new Subject(); + +sub.next(1); +sub.subscribe(console.log); +sub.next(2); // OUTPUT => 2 +sub.subscribe(console.log); +sub.next(3); // OUTPUT => 3,3 (logged from both subscribers) +``` + +### Additional Resources + +- [Subject](https://rxjs-dev.firebaseapp.com/api/index/class/Subject) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subject.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subject.ts) From 214d11ff60e2517b7db7f5d6e71333fd664f8559 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 25 Jan 2019 11:28:58 -0500 Subject: [PATCH 033/256] chore(readme): update wording --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bf33c71a..43a8f1a7 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ applicable. A Subject is a special type of Observable which shares a single execution path among observers. -- [What is a Subject?](/subjects/README.md) +- [Overview](/subjects/README.md) - [AsyncSubject](/subjects/asyncsubject.md) - [BehaviorSubject](/subjects/behaviorsubject.md) - [ReplaySubject](/subjects/replaysubject.md) From cb5b0cae40ee1b918156e63d020c18ec66a3b4bc Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 25 Jan 2019 16:31:14 +0000 Subject: [PATCH 034/256] Added toArray operator docs (#147) * Add toArray operator --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/transformation/README.md | 1 + operators/transformation/toarray.md | 40 +++++++++++++++++++++++++++++ 5 files changed, 44 insertions(+) create mode 100644 operators/transformation/toarray.md diff --git a/SUMMARY.md b/SUMMARY.md index 4a12557f..7c8aab75 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -78,6 +78,7 @@ - [reduce](/operators/transformation/reduce.md) - [scan](/operators/transformation/scan.md) - [switchMap](/operators/transformation/switchmap.md) + - [toArray](/operators/transformation/toarray.md) - [window](/operators/transformation/window.md) - [windowCount](/operators/transformation/windowcount.md) - [windowTime](/operators/transformation/windowtime.md) diff --git a/operators/README.md b/operators/README.md index 26e47d0f..4a2082d6 100644 --- a/operators/README.md +++ b/operators/README.md @@ -82,6 +82,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [reduce](transformation/reduce.md) - [scan](transformation/scan.md) :star: - [switchMap](transformation/switchmap.md) :star: + - [toArray](transformation/toarray.md) - [window](transformation/window.md) - [windowCount](transformation/windowcount.md) - [windowTime](transformation/windowtime.md) diff --git a/operators/complete.md b/operators/complete.md index c35b7863..54a167bd 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -79,6 +79,7 @@ _[Prefer a split by operator type?](README.md)_ - [throw](creation/throw.md) - [timeout](utilit/timeout.md) - [timer](creation/timer.md) +- [toArray](transformation/toarray.md) - [toPromise](utility/topromise.md) - [window](transformation/window.md) - [windowCount](transformation/windowcount.md) diff --git a/operators/transformation/README.md b/operators/transformation/README.md index ca22e753..9f0dae2a 100644 --- a/operators/transformation/README.md +++ b/operators/transformation/README.md @@ -24,6 +24,7 @@ will encounter. * [reduce](reduce.md) * [scan](scan.md) :star: * [switchMap](switchmap.md) :star: +* [toArray](toarray.md) * [window](window.md) * [windowCount](windowcount.md) * [windowTime](windowtime.md) diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md new file mode 100644 index 00000000..4a0d2562 --- /dev/null +++ b/operators/transformation/toarray.md @@ -0,0 +1,40 @@ +# toArray + +#### signature: `toArray(): OperatorFunction` + +## Collects all source emissions and emits them as an array when the source completes. + +
+ +### Examples + +##### Example 1: get values emitted by interval as an array when interval completes + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-toarray?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { interval } from 'rxjs'; +import { toArray, take } from 'rxjs/operators'; + +interval(100) + .pipe( + take(10), + toArray() + ) + .subscribe(console.log); + +// output: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] +``` + +### Additional Resources + +- [toArray](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-toArray) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toArray.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toArray.ts) From fe180143aa590fda818cd1c64c77aace71065acc Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 25 Jan 2019 12:36:41 -0500 Subject: [PATCH 035/256] style(typo): fix typo in header --- subjects/asyncsubject.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index 3d6fd8c1..89811094 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -1,6 +1,6 @@ # AsyncSubject -## A Subject that only emits a its last value upon completion +## A Subject that only emits its last value upon completion
From 8960228fdef090691b5f625cd826b0d7df6cd604 Mon Sep 17 00:00:00 2001 From: Ihor Tsvietkov Date: Mon, 28 Jan 2019 23:21:44 +0200 Subject: [PATCH 036/256] Fix recipes link in Readme (#149) --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 43a8f1a7..58a2ef1b 100644 --- a/README.md +++ b/README.md @@ -80,12 +80,12 @@ Observables. Recipes for common use-cases and interesting solutions with RxJS. -- [Game Loop](gameloop.md) -- [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) -- [HTTP Polling](http-polling.md) -- [Progress Bar](progressbar.md) -- [Smart Counter](smartcounter.md) -- [Type Ahead](type-ahead.md) +- [Game Loop](/recipes/gameloop.md) +- [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) +- [HTTP Polling](/recipes/http-polling.md) +- [Progress Bar](/recipes/progressbar.md) +- [Smart Counter](/recipes/smartcounter.md) +- [Type Ahead](/recipes/type-ahead.md) ## Introductory Resources From 4011fe4588bd418ffba2f62efe4c886b42001959 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 28 Jan 2019 16:28:12 -0500 Subject: [PATCH 037/256] fix(readme): fix invalid path --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 58a2ef1b..14097e06 100644 --- a/README.md +++ b/README.md @@ -73,8 +73,8 @@ easy for much of RxJS to feel like 'magic'. This section helps solidify the major concepts needed to feel comfortable with reactive programming and Observables. -- [RxJS v5 -> v6 Upgrade](rxjs5-6.md) -- [Understanding Operator Imports](operator-imports.md) +- [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) +- [Understanding Operator Imports](/concepts/operator-imports.md) #### Recipes From 9b318f8122cf1780b5bedfdb4c45b00996875434 Mon Sep 17 00:00:00 2001 From: Francois Date: Tue, 29 Jan 2019 14:06:10 +0200 Subject: [PATCH 038/256] Corrected delayWhen example (#150) The comments in the example states that it will restart in 5 seconds, but this is not true since the val received by the delayWhen operator will be the invalid 6 value. Thus it will restart in 6 seconds. --- operators/error_handling/retrywhen.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 53969fe0..55bc22bb 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -34,7 +34,7 @@ const example = source.pipe( errors.pipe( //log error message tap(val => console.log(`Value ${val} was too high!`)), - //restart in 5 seconds + //restart in 6 seconds delayWhen(val => timer(val * 1000)) ) ) @@ -48,7 +48,7 @@ const example = source.pipe( 4 5 "Value 6 was too high!" - --Wait 5 seconds then repeat + --Wait 6 seconds then repeat */ const subscribe = example.subscribe(val => console.log(val)); ``` From b400233deafcf37f96d36b4f0fda4c75b4dfcdfc Mon Sep 17 00:00:00 2001 From: Tom Peck Date: Tue, 29 Jan 2019 11:19:16 -0500 Subject: [PATCH 039/256] Update SUMMARY.md (#151) Fix camel case error --- SUMMARY.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/SUMMARY.md b/SUMMARY.md index 7c8aab75..ed284859 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -19,7 +19,7 @@ - [defaultIfEmpty](/operators/conditional/defaultifempty.md) - [every](/operators/conditional/every.md) - [iif](/operators/conditional/iif.md) - - [sequenceequal](/operators/conditional/sequenceequal.md) + - [sequenceEqual](/operators/conditional/sequenceequal.md) - [Creation](/operators/creation/README.md) - [create](/operators/creation/create.md) - [empty](/operators/creation/empty.md) From c011bdf22e68aa16be342e3ef9d1d2708f0b1911 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Thu, 31 Jan 2019 22:46:08 +0000 Subject: [PATCH 040/256] Added lockscreen recipe (#148) * Create lockscreen.md * Update distinctuntilchanged.md * Update filter.md * Update from.md * Update fromevent.md * Update map.md * Update merge.md * Update repeat.md * Update sequenceequal.md * Update subject.md * Update switchmap.md * Update takeuntil.md * Update do.md * Update throttletime.md * Update lockscreen.md * Update toarray.md * Update lockscreen.md * Update SUMMARY.md * Update README.md * Update README.md * Update README.md * Update lockscreen.md * Update README.md * Update lockscreen.md * Update lockscreen.md * Update lockscreen.md * Update lockscreen.md * Update pluck.md * Made code more self explanatory --- README.md | 1 + SUMMARY.md | 1 + operators/combination/merge.md | 1 + operators/conditional/sequenceequal.md | 4 + operators/creation/from.md | 1 + operators/creation/fromevent.md | 1 + operators/filtering/distinctuntilchanged.md | 1 + operators/filtering/filter.md | 1 + operators/filtering/takeuntil.md | 4 + operators/filtering/throttletime.md | 1 + operators/transformation/map.md | 1 + operators/transformation/pluck.md | 3 + operators/transformation/switchmap.md | 1 + operators/transformation/toarray.md | 4 + operators/utility/do.md | 1 + operators/utility/repeat.md | 4 + recipes/README.md | 1 + recipes/lockscreen.md | 202 ++++++++++++++++++++ subjects/subject.md | 4 + 19 files changed, 237 insertions(+) create mode 100644 recipes/lockscreen.md diff --git a/README.md b/README.md index 14097e06..87808872 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [HTTP Polling](/recipes/http-polling.md) +- [Lockscreen](/recipes/lockscreen.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Type Ahead](/recipes/type-ahead.md) diff --git a/SUMMARY.md b/SUMMARY.md index ed284859..d47be151 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -104,6 +104,7 @@ - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [Http Polling](/recipes/http-polling.md) + - [Lockscreen](/recipes/lockscreen.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Type Ahead](/recipes/type-ahead.md) diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 95d9e8a2..57ec8081 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -74,6 +74,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [HTTP Polling](../../recipes/http-polling.md) +- [Lockscreen](../../recipes/lockscreen.md) ### Additional Resources diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 71aaaa70..ebe2be33 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -60,6 +60,10 @@ fromEvent(document, 'keydown') ``` +### Related Recipes + +- [Lockscreen](../../recipes/lockscreen.md) + ### Additional Resources - [sequenceEqual](https://rxjs-dev.firebaseapp.com/api/operators/sequenceEqual) diff --git a/operators/creation/from.md b/operators/creation/from.md index 459a8e6c..7400725d 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -96,6 +96,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Progress Bar](../../recipes/progressbar.md) - [HTTP Polling](../../recipes/http-polling.md) +- [Lockscreen](../../recipes/lockscreen.md) ### Additional Resources diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 084deaa3..6bc3b241 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -35,6 +35,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Game Loop](../../recipes/gameloop.md) - [HTTP Polling](../../recipes/http-polling.md) - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) +- [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index f8fa8456..254c58ce 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -62,6 +62,7 @@ const nonDistinctObjects = myArrayWithDuplicateObjects ### Related Recipes +- [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 002c47e1..b3f0c46c 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -78,6 +78,7 @@ const subscribe = example.subscribe(val => * [HTTP Polling](../../recipes/http-polling.md) * [Game Loop](../../recipes/gameloop.md) +* [Lockscreen](../../recipes/lockscreen.md) ### Additional Resources diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 5f52921f..aea6750e 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -76,6 +76,10 @@ const example = evenSource.pipe( const subscribe = example.subscribe(val => console.log(val)); ``` +### Related Recipes + +- [Lockscreen](../../recipes/lockscreen.md) + ### Additional Resources - [takeUntil](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeUntil) diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index b06398be..5cfcafea 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -58,6 +58,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) +- [Lockscreen](../../recipes/lockscreen.md) ### Additional Resources diff --git a/operators/transformation/map.md b/operators/transformation/map.md index f3217714..db4c8f88 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -55,6 +55,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Smart Counter](../../recipes/smartcounter.md) - [Game Loop](../../recipes/gameloop.md) - [HTTP Polling](../../recipes/http-polling.md) +- [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 0f1e8e90..a31fe51c 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -49,6 +49,9 @@ const example = source.pipe(pluck('job', 'title')); //output: "Developer" , undefined const subscribe = example.subscribe(val => console.log(val)); ``` +### Related Recipes + +- [Lockscreen](../../recipes/lockscreen.md) ### Additional Resources diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index ac7820e8..1b88e1ea 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -167,6 +167,7 @@ Resume Timer - [Smart Counter](../../recipes/smartcounter.md) - [Progress Bar](../../recipes/progressbar.md) - [HTTP Polling](../../recipes/http-polling.md) +- [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 4a0d2562..4b8564b1 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -29,6 +29,10 @@ interval(100) // output: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] ``` +### Related Recipes + +- [Lockscreen](../../recipes/lockscreen.md) + ### Additional Resources - [toArray](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-toArray) diff --git a/operators/utility/do.md b/operators/utility/do.md index 2b41d122..f5620b64 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -42,6 +42,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) +- [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index ba06e5c2..ec053aaa 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -28,6 +28,10 @@ delayedThing.pipe( ``` +### Related Recipes + +- [Lockscreen](../../recipes/lockscreen.md) + ### Additional Resources - [repeat](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-repeat) diff --git a/recipes/README.md b/recipes/README.md index b08d9758..880f6612 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -7,6 +7,7 @@ Common use-cases and interesting recipes to help learn RxJS. * [Game Loop](gameloop.md) * [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) * [HTTP Polling](http-polling.md) +* [Lockscreen](lockscreen.md) * [Progress Bar](progressbar.md) * [Smart Counter](smartcounter.md) * [Type Ahead](type-ahead.md) diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md new file mode 100644 index 00000000..41331d4d --- /dev/null +++ b/recipes/lockscreen.md @@ -0,0 +1,202 @@ +# Lockscreen + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of lockscreen functionality (known for example from smartphones). + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-lockscreen?file=index.ts&devtoolsheight=30) +) + +#### index.ts +```js +/* + Use mouse to 'swipe' across the lock pad (hold mouse button and swipe :) ). + Pad will turn green if password is correct or red if password is incorrect. + You can set password to whatever sequence you like. +*/ +// RxJS v6+ +import { from, fromEvent, Subject, merge, pipe } from 'rxjs'; +import { switchMap, takeUntil, repeat, tap, map, throttleTime, distinctUntilChanged, filter, toArray, sequenceEqual, pluck } from 'rxjs/operators'; +import { displaySelectedNumbersSoFar, markTouchedPad, pads, resetPasswordPad, setResult } from './dom-updater'; + +const sub = new Subject(); +const expectedPasswordUpdate$ = fromEvent(document.getElementById('expectedPassword'), 'keyup') + .pipe( + map((e: any) => e.target.value), + tap(pass => sub.next(pass.split('').map(e => parseInt(e)))) + ); +let expectedPassword = [1, 2, 5, 2]; +const expectedPassword$ = sub.pipe(tap((v: any) => expectedPassword = v)); + +const takeMouseSwipe = pipe( + switchMap(_ => fromEvent(document, 'mousemove')), + takeUntil(fromEvent(document, 'mouseup')), + throttleTime(50), +); +const checkIfPasswordMatch = password => from(password).pipe(sequenceEqual(from(expectedPassword))); +const getXYCoordsOfMousePosition = ({ clientX, clientY }: MouseEvent) => ({ x: clientX, y: clientY }); +const findSelectedPad = v => pads.find(r => + v.x > r.left && + v.x < r.right && + v.y > r.top && + v.y < r.bottom); +const getIdOfSelectedPad = pipe( + filter(v => !!v), + pluck('id'), + distinctUntilChanged() +); + +const actualPassword$ = fromEvent(document, 'mousedown') + .pipe( + tap(resetPasswordPad), + takeMouseSwipe, + map(getXYCoordsOfMousePosition), + map(findSelectedPad), + getIdOfSelectedPad, + tap(markTouchedPad), + tap(displaySelectedNumbersSoFar), + toArray(), + switchMap(checkIfPasswordMatch), + tap(setResult), + repeat() + ) + +merge( + expectedPassword$, + expectedPasswordUpdate$, + actualPassword$ +).subscribe(); +``` + +#### dom-updater.ts +```js + +const createPadObject = (id, rectange) => ({ + id: id, + left: rectange.left, + right: rectange.right, + top: rectange.top, + bottom: rectange.bottom +}); + +const setResultText = text => document.getElementById('result').innerText = text; + +const setPasswordPads = color => Array.from(document + .querySelectorAll('.cell')) + .forEach((v: HTMLElement) => v.style.background = color) + +const getPad = id => document.getElementById(`c${id}`); + +export const pads = Array + .from({ length: 9 }, (_, n) => n + 1) + .map(v => createPadObject(v, getPad(v).getBoundingClientRect())); + +export const markTouchedPad = v => { + const pad = getPad(v); + pad.style.background = 'lightgrey'; + if (!pad.animate) return; //animate does not work in IE + const animation: any = [ + { transform: 'scale(0.9)' }, + { transform: 'scale(1)' } + ]; + const animationOptions = { + duration: 300, + iterations: 1 + }; + pad.animate(animation, animationOptions); + document.getSelection().removeAllRanges(); +}; + +export const setResult = result => { + setPasswordPads(result ? 'MediumSeaGreen' : 'IndianRed'); + setResultText('Password ' + (result ? 'matches :)' : 'does not match :(')); +} + +export const displaySelectedNumbersSoFar = v => + document.getElementById('result').textContent += v; + +export const resetPasswordPad = () => { + setResultText(''); + setPasswordPads('gray'); +} +``` + +##### html + +``` + + +Expected Password: + +
+Password: +
+
+
1
+
2
+
3
+
+
+
4
+
5
+
6
+
+
+
7
+
8
+
9
+
+
+ +
+``` + +### Operators Used + +- [distinctUntilChanged](../operators/filtering/distinctuntilchanged.md) +- [filter](../operators/filtering/filter.md) +- [from](../operators/creation/from.md) +- [fromEvent](../operators/creation/fromevent.md) +- [map](../operators/transformation/map.md) +- [merge](../operators/combination/merge.md) +- [pluck](../operators/transformation/pluck.md) +- [repeat](../operators/utility/repeat.md) +- [sequenceEqual](../operators/conditional/sequenceequal.md) +- [Subject](../subjects/subject.md) +- [switchMap](../operators/transformation/switchmap.md) +- [takeUntil](../operators/filtering/takeuntil.md) +- [tap](../operators/utility/do.md) +- [throttleTime](../operators/filtering/throttletime.md) +- [toArray](../operators/transformation/toarray.md) diff --git a/subjects/subject.md b/subjects/subject.md index c22695ae..82eea793 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -24,6 +24,10 @@ sub.subscribe(console.log); sub.next(3); // OUTPUT => 3,3 (logged from both subscribers) ``` +### Related Recipes + +- [Lockscreen](../../recipes/lockscreen.md) + ### Additional Resources - [Subject](https://rxjs-dev.firebaseapp.com/api/index/class/Subject) From 5d48bbc2f26f97fdd33a56a37b50a82bae33505f Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 31 Jan 2019 19:14:52 -0500 Subject: [PATCH 041/256] chore(banner): update ua banner location --- README.md | 2 +- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/create.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/topromise.md | 2 +- recipes/gameloop.md | 2 +- recipes/horizontal-scroll-indicator.md | 2 +- recipes/http-polling.md | 2 +- recipes/lockscreen.md | 2 +- recipes/progressbar.md | 2 +- recipes/smartcounter.md | 2 +- recipes/type-ahead.md | 2 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 85 files changed, 85 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index 87808872..f082021b 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -
+
## Content diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index e62bbc63..ab84ac82 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -
+
### Examples diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index a60b29ff..ce38b2ff 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -33,7 +33,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -
+
### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 172b31a1..754abb06 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -16,7 +16,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 8ad5c0e8..d2aaa790 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,7 +15,7 @@ a single operator instead! --- -
+
### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 3c8eab4d..e8750bc9 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -35,7 +35,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -
+
### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 57ec8081..5568d522 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index ae1bf074..6f8d0698 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,7 +11,7 @@ single operator instead! --- -
+
### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index b823cf7f..698ca37e 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,7 +4,7 @@ ## Emit the previous and current values as an array. -
+
### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index 97153e3e..4b96dc97 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,7 +4,7 @@ ## The observable to emit first is used. -
+
### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 98e4f7ca..5e79e7c6 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,7 +12,7 @@ can also start with an initial value! --- -
+
### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index be77c45f..c699c9a2 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,7 +11,7 @@ emits, try [combinelatest](combinelatest.md)! --- -
+
### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 67fc73d2..b4ee7936 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,7 +12,7 @@ source! --- -
+
### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 0d04703c..ce050287 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -
+
### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 44f8bf1d..fa2bd069 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -
+
### Examples diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 0dff63c0..5ecfe818 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Decides at subscription time which Observable will actually be subscribed. -
+
### Examples diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index ebe2be33..f9ac566b 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares all values of two observables in sequence using an optional comparor function and returns an observable of a single boolean value representing whether or not the two sequences are equal. -
+
### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index f42d6ba6..50d4768a 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+
### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index aa8a873e..4e0f14b6 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -
+
### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index 7400725d..ee49f5c7 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -16,7 +16,7 @@ characters! --- -
+
### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 6bc3b241..51714871 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -
+
### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 9b09748f..cdaa9462 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -
+
### Examples diff --git a/operators/creation/range.md b/operators/creation/range.md index 375d639c..3a514619 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -
+
### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index ac9051f4..73dae9ce 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -
+
### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index cf1561bb..d41a7fb9 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -
+
### Examples diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index b2de28c1..b2d50918 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 2bbfe670..4e62caea 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -4,7 +4,7 @@ ## Retry an observable sequence a specific number of times should an error occur. -
+
### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 55bc22bb..ceeed4bd 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -
+
### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index cb1d6461..9b9016ce 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index b9c981aa..419eb3f2 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -
+
### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index b993a84e..c15c7317 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 0f464462..aefcec9c 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -
+
### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index e213852e..76ce2281 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -
+
### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index fac27a32..b02cd6c9 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -
+
### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 3abaf981..b9b6e16d 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -
+
### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 99a376f6..c7d9cbf7 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -25,7 +25,7 @@ number of emissions while `skip` will skip the first _n_ number of emissions. --- -
+
### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index aea6750e..63635406 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 878d20c6..1f45528d 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -4,7 +4,7 @@ ## Emit values until provided expression is false. -
+
### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 5d1765e3..8d50bdac 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -
+
### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 5cfcafea..1907cc25 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit latest value when specified duration has passed. -
+
### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index b4125a35..7a69389f 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -
+
### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index ef90bfae..0db6f26a 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -
+
### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 74abf7fc..a8af5930 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 4d747b55..e380a5c9 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -
+
### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 7d53f134..e2715807 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,7 +4,7 @@ ## Collect output values until provided observable emits, emit as array. -
+
### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 327e776b..80a87127 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,7 +4,7 @@ ## Collect emitted values until provided number is fulfilled, emit as array. -
+
### Examples diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 786a6810..a76ccd71 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -
+
### Examples diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 8e5d6795..0a9351d2 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -
+
### Examples diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index ddef2a45..dc5cd62d 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,7 +4,7 @@ ## Map values to inner observable, subscribe and emit in order. -
+
### Examples diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 08e86528..77cd8e7d 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -
+
### Examples diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index ac698af4..dd3c90c4 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,7 +4,7 @@ ## Map to inner observable, ignore other values until that observable completes. -
+
### Examples diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index ecd41a5e..173d1027 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -
+
### Examples diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index f13bdd26..239e1358 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -
+
### Examples diff --git a/operators/transformation/map.md b/operators/transformation/map.md index db4c8f88..4032df28 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -4,7 +4,7 @@ ## Apply projection with each value from source. -
+
### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 2968f166..7f7faf9b 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -4,7 +4,7 @@ ## Map emissions to constant value. -
+
### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index b9aa9514..79dccc13 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 4](#example-4-mergemap-with-concurrent-value). -
+
### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index 53161a21..9b009b03 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -
+
### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index a31fe51c..5de6c473 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -4,7 +4,7 @@ ## Select properties to emit. -
+
### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index d7304e68..1db82e63 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ :bulb: If you need the current accumulated value on each emission, try [scan](scan.md)! -
+
### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index c13e1db3..ab4adfba 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -11,7 +11,7 @@ scan! --- -
+
### Examples diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 1b88e1ea..531680d5 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -
+
### Examples diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 4b8564b1..0e89b792 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -
+
### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index 33651384..e4c61cd5 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -
+
### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 92ddc3d6..3dab5969 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -
+
### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 1a7fb4a7..3f8d785f 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -
+
### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 0a2a8afb..1ed77ae9 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -
+
### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 29540807..14e1d2da 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -
+
### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index c3aa5fb4..f328a9db 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -
+
### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index 42085694..6cfc6ec1 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,7 @@ ## Turn notification objects into notification values. -
+
### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index f5620b64..aa63fef4 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index 97611f3e..a9739760 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index ec053aaa..2395e66d 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -5,7 +5,7 @@ ## Repeats the stream of items emitted by the source Observable at most count times. -
+
### Examples diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 2f5e19dd..75fe4b01 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -
+
### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 65520172..9b2b01fc 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/recipes/gameloop.md b/recipes/gameloop.md index e3439287..5c1073d5 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -
+
### Example Code diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md index 1c529be5..beeb22c0 100644 --- a/recipes/horizontal-scroll-indicator.md +++ b/recipes/horizontal-scroll-indicator.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of a horizontal scroll indicator. -
+
### Example Code diff --git a/recipes/http-polling.md b/recipes/http-polling.md index 03d5f557..b3ec08a6 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,6 +1,6 @@ # HTTP Polling -
+
### Examples diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index 41331d4d..cd2d74b8 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of lockscreen functionality (known for example from smartphones). -
+
### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index b4896f1a..4416eb79 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -
+
### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 91965958..9c25ea5b 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -
+
#### Vanilla JS diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index bf939281..a10f3cda 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of type ahead client side code. -
+
### Example Code diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index 89811094..d9e8e7fb 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -2,7 +2,7 @@ ## A Subject that only emits its last value upon completion -
+
### Examples diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index aafbefa9..7a1de03c 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -2,7 +2,7 @@ ## A Subject that requires an initial value and emits its current value to new subscribers -
+
### Examples diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 36f2f063..83389b49 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -2,7 +2,7 @@ ## A Subject that "replays" or emits old values to new subscribers -
+
### Examples diff --git a/subjects/subject.md b/subjects/subject.md index 82eea793..84b26491 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -2,7 +2,7 @@ ## A special type of Observable which shares a single execution path among observers -
+
### Examples From 72160583d17cff4c5149872a4adddf5ee773f17c Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 31 Jan 2019 19:19:19 -0500 Subject: [PATCH 042/256] chore(banner): add missing banner to operators --- operators/filtering/debouncetime.md | 10 +++++--- operators/filtering/distinctuntilchanged.md | 14 +++++++---- operators/filtering/filter.md | 26 ++++++++++++++------- operators/filtering/skipuntil.md | 2 ++ 4 files changed, 36 insertions(+), 16 deletions(-) diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index edc1b88c..faf26f48 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -11,11 +11,15 @@ of user input must be controlled! --- +
+ ### Examples ##### Example 1: Debouncing based on time between input -( [StackBlitz](https://stackblitz.com/edit/typescript-adheqt?file=index.ts&devtoolsheight=50) | [jsBin](http://jsbin.com/kacijarogi/1/edit?js,console,output) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-adheqt?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/kacijarogi/1/edit?js,console,output) | [jsFiddle](https://jsfiddle.net/btroncone/7kbg4q2e/) ) ```js @@ -44,9 +48,9 @@ const subscribe = debouncedInput.subscribe(val => { ### Additional Resources -* [debounceTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime) +- [debounceTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime) :newspaper: - Official docs -* [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) +- [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 254c58ce..a482a332 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -11,11 +11,15 @@ must match! --- +
+ ### Examples ##### Example 1: distinctUntilChanged with basic values -( [StackBlitz](https://stackblitz.com/edit/typescript-bsb8mw?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/qoyoxeheva/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-bsb8mw?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/qoyoxeheva/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/xc2vzct7/) ) ```js @@ -38,7 +42,9 @@ const nonDistinctSub = myArrayWithDuplicatesInARow ##### Example 2: distinctUntilChanged with objects -( [StackBlitz](https://stackblitz.com/edit/typescript-moe7mh?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/mexocipave/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-moe7mh?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/mexocipave/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/t4ava5b4/) ) ```js @@ -67,9 +73,9 @@ const nonDistinctObjects = myArrayWithDuplicateObjects ### Additional Resources -* [distinctUntilChanged](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-distinctUntilChanged) +- [distinctUntilChanged](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-distinctUntilChanged) :newspaper: - Official docs -* [Filtering operator: distinct and distinctUntilChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-and-distinctuntilchanged?course=rxjs-beyond-the-basics-operators-in-depth) +- [Filtering operator: distinct and distinctUntilChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-and-distinctuntilchanged?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index b3f0c46c..ec30a4ee 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -11,11 +11,15 @@ out [takeWhile](takewhile.md)! --- +
+ ### Examples ##### Example 1: filter for even numbers -( [StackBlitz](https://stackblitz.com/edit/typescript-4g4cys?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/vafogoluye/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-4g4cys?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/vafogoluye/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/tkz0fuy2/) ) ```js @@ -33,7 +37,9 @@ const subscribe = example.subscribe(val => console.log(`Even number: ${val}`)); ##### Example 2: filter objects based on property -( [StackBlitz](https://stackblitz.com/edit/typescript-n73fsn?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/qihagaxuso/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-n73fsn?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/qihagaxuso/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/yjdsoug1/) ) ```js @@ -51,7 +57,9 @@ const subscribe = example.subscribe(val => console.log(`Over 30: ${val.name}`)); ##### Example 3: filter for number greater than specified value -( [StackBlitz](https://stackblitz.com/edit/typescript-eyvvfu?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/rakabaheyu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-eyvvfu?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/rakabaheyu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/g1tgreha/) ) ```js @@ -76,17 +84,17 @@ const subscribe = example.subscribe(val => ### Related Recipes -* [HTTP Polling](../../recipes/http-polling.md) -* [Game Loop](../../recipes/gameloop.md) -* [Lockscreen](../../recipes/lockscreen.md) +- [HTTP Polling](../../recipes/http-polling.md) +- [Game Loop](../../recipes/gameloop.md) +- [Lockscreen](../../recipes/lockscreen.md) ### Additional Resources -* [filter](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter) +- [filter](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter) :newspaper: - Official docs -* [Adding conditional logic with filter](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) +- [Adding conditional logic with filter](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist -* [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) +- [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index ffa427b0..8d7eb07b 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,6 +4,8 @@ ## Skip emitted values from source until provided observable emits. +
+ ### Examples ##### Example 1: Skip until observable emits From 30af9858ade32c93890a088fca4fa31849ddf917 Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 31 Jan 2019 19:21:03 -0500 Subject: [PATCH 043/256] chore(banner): add missing banner --- operators/filtering/debounce.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 7444cf85..4c5b96ba 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -11,11 +11,15 @@ --- +
+ ### Examples ##### Example 1: Debounce on timer -( [StackBlitz](https://stackblitz.com/edit/typescript-dzjbra?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/sorimeyoro/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-dzjbra?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/sorimeyoro/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/e5698yow/) ) ```js @@ -39,7 +43,9 @@ const subscribe = debouncedExample.subscribe(val => console.log(val)); ##### Example 2: Debounce at increasing interval -( [StackBlitz](https://stackblitz.com/edit/typescript-qnfidr?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/sotaretese/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-qnfidr?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/sotaretese/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/6ab34nq6/) ) ```js @@ -63,9 +69,9 @@ const subscribe = debouncedInterval.subscribe(val => ### Additional Resources -* [debounce](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounce) +- [debounce](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounce) :newspaper: - Official docs -* [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) +- [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- From 76b1ace1d2f79282b17704ae2ff6f7890385751b Mon Sep 17 00:00:00 2001 From: Marvin Irwin Date: Mon, 4 Feb 2019 06:15:13 -0800 Subject: [PATCH 044/256] style(typo): fix typo in audittime.md (#153) --- operators/filtering/audittime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index 46d5177b..dd7b64c0 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -10,7 +10,7 @@ When you are interested in ignoring a source observable for a given amout of tim --- -:bulb: If you want the timer to reset whenever a new event occurs on the soruce observable, you can use [debounceTime](debouncetime.md) +:bulb: If you want the timer to reset whenever a new event occurs on the source observable, you can use [debounceTime](debouncetime.md) --- From fb25b2e568bee17ac25636d374449dba3870fbbe Mon Sep 17 00:00:00 2001 From: adamlubek Date: Mon, 4 Feb 2019 14:18:21 +0000 Subject: [PATCH 045/256] Added switchMap error handling comparison (#152) * Added switchMap error handling comparison * Update switchmap.md * Update catch.md * style(catchError): add js tag to code example --- operators/error_handling/catch.md | 34 +++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index b2d50918..390d2330 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -64,6 +64,40 @@ const example = source.pipe( const subscribe = example.subscribe(val => console.log(val)); ``` +##### Example 3: Catching errors comparison when using switchMap/mergeMap/concatMap/exhaustMap + +( [StackBlitz](https://stackblitz.com/edit/rxjs-catcherror-withmapoperators?file=index.ts&devtoolsheight=80) ) + +```js +// switchMap in example below can be replaced with mergeMap/concatMap/exhaustMap, the same behaviour applies +import { throwError, fromEvent, of } from 'rxjs'; +import { catchError, tap, switchMap, mergeMap, concatMap, exhaustMap } from 'rxjs/operators'; + +const fakeRequest$ = of().pipe( + tap(_ => console.log('fakeRequest')), + throwError +); + +const iWillContinueListening$ = + fromEvent(document.getElementById('continued'), 'click') + .pipe( + switchMap(_ => + fakeRequest$.pipe( + catchError(_ => of('keep on clicking!!!')) + )) + ); + +const iWillStopListening$ = + fromEvent(document.getElementById('stopped'), 'click') + .pipe( + switchMap(_ => fakeRequest$), + catchError(_ => of('no more requests!!!')) + ); + +iWillContinueListening$.subscribe(console.log); +iWillStopListening$.subscribe(console.log); +``` + ### Additional Resources - [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) From bd8cf87f7ca1a2d15838876bc861e8810ec9e96f Mon Sep 17 00:00:00 2001 From: adamlubek Date: Tue, 5 Feb 2019 15:25:35 +0000 Subject: [PATCH 046/256] Added additional explanation comments (#154) --- recipes/lockscreen.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index cd2d74b8..f929f7d8 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -34,9 +34,11 @@ let expectedPassword = [1, 2, 5, 2]; const expectedPassword$ = sub.pipe(tap((v: any) => expectedPassword = v)); const takeMouseSwipe = pipe( + // take mouse moves switchMap(_ => fromEvent(document, 'mousemove')), + // once mouse is up, we end swipe takeUntil(fromEvent(document, 'mouseup')), - throttleTime(50), + throttleTime(50) ); const checkIfPasswordMatch = password => from(password).pipe(sequenceEqual(from(expectedPassword))); const getXYCoordsOfMousePosition = ({ clientX, clientY }: MouseEvent) => ({ x: clientX, y: clientY }); @@ -53,16 +55,21 @@ const getIdOfSelectedPad = pipe( const actualPassword$ = fromEvent(document, 'mousedown') .pipe( + // new stream so reset password pad and take swipe until mouse up tap(resetPasswordPad), takeMouseSwipe, + // as we swipe, we mark pads as touchedand and display selected numbers map(getXYCoordsOfMousePosition), map(findSelectedPad), getIdOfSelectedPad, tap(markTouchedPad), tap(displaySelectedNumbersSoFar), + // we need an array of numbers from current swipe which we can pass to checkIfPasswordMatch toArray(), + // on mouse up (swipe end), switchMap to new stream to check if password match switchMap(checkIfPasswordMatch), tap(setResult), + // takeUntil inside takeMouseSwipe terminated stream so we repeat from beginning (mousedown) repeat() ) From 4f6760d12e17c17aa397cd908a3f2d6f70ddacc6 Mon Sep 17 00:00:00 2001 From: tgoto63 Date: Thu, 7 Feb 2019 22:56:37 +0900 Subject: [PATCH 047/256] Fix forkJoin example on StackBlitz. (#156) --- operators/combination/forkjoin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index e8750bc9..951911cb 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -42,7 +42,7 @@ correct choice. In these cases you may better off with an operator like ##### Example 1: Observables completing after different durations ( -[StackBlitz](https://stackblitz.com/edit/typescript-bqxg9x?file=index.ts&devtoolsheight=100) +[StackBlitz](https://stackblitz.com/edit/typescript-mzbcrw?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/remiduhimu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/5fj77920/81/) ) From 67842d04e6b5ea94d92fab032fa1728b8016daaa Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 8 Feb 2019 18:56:49 +0000 Subject: [PATCH 048/256] Added Catch The Dot Game recipe (#155) * Create catch-the-dot-game.md * Update README.md * Update README.md * Update fromevent.md * Update map.md * Update scan.md * Update switchmap.md * Update takewhile.md * Update interval.md * Update do.md * Update SUMMARY.md --- README.md | 1 + SUMMARY.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/interval.md | 4 + operators/filtering/takewhile.md | 1 + operators/transformation/map.md | 1 + operators/transformation/scan.md | 1 + operators/transformation/switchmap.md | 1 + operators/utility/do.md | 1 + recipes/README.md | 1 + recipes/catch-the-dot-game.md | 115 ++++++++++++++++++++++++++ 11 files changed, 128 insertions(+) create mode 100644 recipes/catch-the-dot-game.md diff --git a/README.md b/README.md index f082021b..f89a3b59 100644 --- a/README.md +++ b/README.md @@ -80,6 +80,7 @@ Observables. Recipes for common use-cases and interesting solutions with RxJS. +- [Catch The Dot Game](/recipes/catch-the-dot-game.md) - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [HTTP Polling](/recipes/http-polling.md) diff --git a/SUMMARY.md b/SUMMARY.md index d47be151..01f8d896 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -101,6 +101,7 @@ - [ReplaySubject](/subjects/replaysubject.md) - [Subject](/subjects/subject.md) - [Recipes](/recipes/README.md) + - [Catch The Dot Game](/recipes/catch-the-dot-game.md) - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [Http Polling](/recipes/http-polling.md) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 51714871..cfc203d7 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -37,6 +37,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) ### Additional Resources diff --git a/operators/creation/interval.md b/operators/creation/interval.md index cdaa9462..e17fcd6a 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -25,6 +25,10 @@ const source = interval(1000); const subscribe = source.subscribe(val => console.log(val)); ``` +### Related Recipes + +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) + ### Additional Resources - [interval](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-interval) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 1f45528d..51d89163 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -58,6 +58,7 @@ source ### Related Recipes - [Smart Counter](../../recipes/smartcounter.md) +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) ### Additional Resources diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 4032df28..847f3252 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -57,6 +57,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) ### Additional Resources diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index ab4adfba..f802cbf9 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -117,6 +117,7 @@ interval(1000) - [Smart Counter](../../recipes/smartcounter.md) - [Progress Bar](../../recipes/progressbar.md) +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) ### Additional Resources diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 531680d5..a4f7fef3 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -169,6 +169,7 @@ Resume Timer - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index aa63fef4..7b029b99 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -44,6 +44,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) ### Additional Resources diff --git a/recipes/README.md b/recipes/README.md index 880f6612..63367d7c 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -4,6 +4,7 @@ Common use-cases and interesting recipes to help learn RxJS. ### Contents +* [Catch The Dot Game](catch-the-dot-game.md) * [Game Loop](gameloop.md) * [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) * [HTTP Polling](http-polling.md) diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md new file mode 100644 index 00000000..02f5523e --- /dev/null +++ b/recipes/catch-the-dot-game.md @@ -0,0 +1,115 @@ +# Catch The Dot Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe shows usage of scan operator for state management in simple game + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-catch-the-dot-game?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { fromEvent, interval } from 'rxjs'; +import { tap, scan, map, switchMap, takeWhile } from 'rxjs/operators'; +import { dot, updatedDot, setTimerText, resetDotSize, moveDot } from './dom-updater'; + +interface State { + score: number; + intrvl: number; +} +const makeInterval = (val: State) => interval(val.intrvl).pipe( + map(v => 5 - v), + tap(setTimerText) +); +const gameState: State = { score: 0, intrvl: 500 }; +const nextState = (acc: State) => ({ + score: acc.score += 1, + intrvl: acc.score % 3 === 0 ? acc.intrvl -= 50 : acc.intrvl +}); +const isNotGameOver = intervalValue => intervalValue >= 0; + +const game$ = fromEvent(dot, 'mouseover') + .pipe( + tap(moveDot), + scan(nextState, gameState), + tap(state => updatedDot(state.score)), + switchMap(makeInterval), + tap(resetDotSize), + takeWhile(isNotGameOver) + ); + +game$.subscribe( + n => { }, + e => { }, + () => setTimerText('ouch!') +); +``` + +#### dom-updater.ts +```js +const random = () => Math.random() * 300; +const elem = id => document.getElementById(id); +const setElementText = (elem, text) => + elem.innerText = text.toString(); +const timer = elem('timer'); +const setDotSize = size => { + dot.style.height = `${size}px`; + dot.style.width = `${size}px`; +} + +export const dot = elem('dot'); +export const updatedDot = score => { + if (score % 3 === 0) { + dot.style.backgroundColor = + '#' + (Math.random() * 0xFFFFFF << 0).toString(16); + } + setElementText(dot, score); +} +export const setTimerText = text => setElementText(timer, text); +export const moveDot = () => { + setDotSize(5); + dot.style.transform = `translate(${random()}px, ${random()}px)`; +} +export const resetDotSize = () => setDotSize(30); +``` + +##### html +``` + + +
+
+``` + +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [map](../operators/transformation/map.md) +- [scan](../operators/transformation/scan.md) +- [switchMap](../operators/transformation/switchmap.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) From 4afebb4a6a868eceee2590454fdd232d7e3b8d09 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 13 Feb 2019 20:42:45 +0000 Subject: [PATCH 049/256] Added defer docs (#159) * Create defer.md * Update README.md * Update README.md * Update complete.md * Update SUMMARY.md --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/creation/README.md | 1 + operators/creation/defer.md | 54 ++++++++++++++++++++++++++++++++++++ 5 files changed, 58 insertions(+) create mode 100644 operators/creation/defer.md diff --git a/SUMMARY.md b/SUMMARY.md index 01f8d896..41280b55 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -22,6 +22,7 @@ - [sequenceEqual](/operators/conditional/sequenceequal.md) - [Creation](/operators/creation/README.md) - [create](/operators/creation/create.md) + - [defer](/operators/creation/defer.md) - [empty](/operators/creation/empty.md) - [from](/operators/creation/from.md) - [fromEvent](/operators/creation/fromevent.md) diff --git a/operators/README.md b/operators/README.md index 4a2082d6..22173d23 100644 --- a/operators/README.md +++ b/operators/README.md @@ -26,6 +26,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [sequenceequal](conditional/sequenceequal.md) - [Creation](creation/README.md) - [create](creation/create.md) + - [defer](creation/defer.md) - [empty](creation/empty.md) - [from](creation/from.md) :star: - [fromEvent](creation/fromevent.md) diff --git a/operators/complete.md b/operators/complete.md index 54a167bd..5d0e8c2c 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -25,6 +25,7 @@ _[Prefer a split by operator type?](README.md)_ - [debounce](filtering/debounce.md) - [debounceTime](filtering/debouncetime.md) :star: - [defaultIfEmpty](conditional/defaultifempty.md) +- [defer](creation/defer.md) - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) - [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: diff --git a/operators/creation/README.md b/operators/creation/README.md index 0ddafabd..9ffcfbd6 100644 --- a/operators/creation/README.md +++ b/operators/creation/README.md @@ -7,6 +7,7 @@ generic to specific use-cases you are free, and encouraged, to turn ## Contents - [create](create.md) +- [defer](defer.md) - [empty](empty.md) - [from](from.md) :star: - [fromEvent](fromevent.md) diff --git a/operators/creation/defer.md b/operators/creation/defer.md new file mode 100644 index 00000000..b78e3296 --- /dev/null +++ b/operators/creation/defer.md @@ -0,0 +1,54 @@ +# create + +#### signature: `defer(observableFactory: function(): SubscribableOrPromise): Observable` + +## Create an observable with given subscription function. + +
+ +### Examples + +##### Example 1: Defer to get current date/time at the time of subscription + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-defer-example.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { defer, of, timer, merge } from 'rxjs'; +import { switchMap } from 'rxjs/operators'; + +const s1 = of(new Date()); //will capture current date time +const s2 = defer(() => of(new Date())); //will capture date time at the moment of subscription + +console.log(new Date()); + +timer(2000) + .pipe( + switchMap(_ => merge(s1, s2)) + ).subscribe(console.log); + +/* +OUTPUT => +2019-02-10T12:38:30.000Z (currrent date/time from first console log) +2019-02-10T12:38:30.000Z (date/time in s1 console log, captured date/time at the moment of observable creation) +2019-02-10T12:38:32.000Z (date/time in s2 console log, captured date/time at the moment of subscription) +*/ + +/*//NOTE: 'traditional' js equivalent of timer code above is: +setTimeout(() => { + s1.subscribe(console.log); + s2.subscribe(console.log); +}, 2000); +*/ +``` + +### Additional Resources + +- [defer](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-defer) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/defer.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/defer.ts) From 7b695b223c6331e337ae7b797b3a8f98bc387055 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Thu, 21 Feb 2019 00:51:11 +0000 Subject: [PATCH 050/256] Added subjects comparison (#160) --- subjects/README.md | 96 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/subjects/README.md b/subjects/README.md index 12e0ce2b..e82a82c0 100644 --- a/subjects/README.md +++ b/subjects/README.md @@ -18,6 +18,102 @@ There are 4 variants of subjects: * [ReplaySubject](replaysubject.md) * [Subject](subject.md) +## Subjects comparison + +( [Stackblitz](https://stackblitz.com/edit/rxjs-subjects-comparison?file=index.ts&devtoolsheight=100) ) + +```js +/* + s1 n(r) n(x) s2 n(j) c n(s) +Subject + s1 ^-----r------x--------------j------|---------- + s2 ---------------------^------j------|---------- +AsyncSubject + s1 ^----------------------------------j|--------- + s1 ---------------------^-------------j|--------- +BehaviorSubject + s1 ^a----r------x--------------j------|---------- + s2 ---------------------^x-----j------|---------- +ReplaySubject + s1 ^-----r------x--------------j------|---------- + s2 ---------------------^r-x---j------|---------- +*/ + +// RxJS v6+ +import { Subject, AsyncSubject, BehaviorSubject, ReplaySubject } from 'rxjs'; + +const subject = new Subject(); +const asyncSubject = new AsyncSubject(); +const behaviorSubject = new BehaviorSubject('a'); +const replaySubject = new ReplaySubject(2); + +const subjects = [subject, asyncSubject, behaviorSubject, replaySubject]; +const log = subjectType => e => console.log(`${subjectType}: ${e}`); + +console.log('SUBSCRIBE 1'); +subject.subscribe(log('s1 subject')); +asyncSubject.subscribe(log('s1 asyncSubject')); +behaviorSubject.subscribe(log('s1 behaviorSubject')); +replaySubject.subscribe(log('s1 replaySubject')); + +console.log('\nNEXT(r)'); +subjects.forEach(o => o.next('r')); + +console.log('\nNEXT(x)'); +subjects.forEach(o => o.next('x')); + +console.log('\nSUBSCRIBE 2'); +subject.subscribe(log('s2 subject')); +asyncSubject.subscribe(log('s2 asyncSubject')); +behaviorSubject.subscribe(log('s2 behaviorSubject')); +replaySubject.subscribe(log('s2 replaySubject')); + +console.log('\nNEXT(j)'); +subjects.forEach(o => o.next('j')); + +console.log('\nCOMPLETE'); +subjects.forEach(o => o.complete()); + +console.log('\nNEXT(s)'); +subjects.forEach(o => o.next('s')); + +/* +OUTPUT: + +SUBSCRIBE 1 +s1 behaviorSubject: a + +NEXT(r) +s1 subject: r +s1 behaviorSubject: r +s1 replaySubject: r + +NEXT(x) +s1 subject: x +s1 behaviorSubject: x +s1 replaySubject: x + +SUBSCRIBE 2 +s2 behaviorSubject: x +s2 replaySubject: r +s2 replaySubject: x + +NEXT(j) +s1 subject: j +s2 subject: j +s1 behaviorSubject: j +s2 behaviorSubject: j +s1 replaySubject: j +s2 replaySubject: j + +COMPLETE +s1 asyncSubject: j +s2 asyncSubject: j + +NEXT(s) +*/ +``` + ### Additional Resources * [Official Overview](http://reactivex.io/rxjs/manual/overview.html#subject) From 09cd6924eea0c2982bb346b555c561b455e6c79e Mon Sep 17 00:00:00 2001 From: adamlubek Date: Thu, 21 Feb 2019 20:30:48 +0000 Subject: [PATCH 051/256] Added flappy bird game recipe (#161) * Create flappy-bird-game.md * Update README.md * Update README.md * Update SUMMARY.md * Update fromevent.md * Update interval.md * Update merge.md * Update scan.md * Update takewhile.md * Update do.md * Update combinelatest.md --- README.md | 1 + SUMMARY.md | 1 + operators/combination/combinelatest.md | 4 + operators/combination/merge.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/interval.md | 1 + operators/filtering/takewhile.md | 1 + operators/transformation/scan.md | 1 + operators/utility/do.md | 1 + recipes/README.md | 1 + recipes/flappy-bird-game.md | 120 +++++++++++++++++++++++++ 11 files changed, 133 insertions(+) create mode 100644 recipes/flappy-bird-game.md diff --git a/README.md b/README.md index f89a3b59..c3777a05 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,7 @@ Observables. Recipes for common use-cases and interesting solutions with RxJS. - [Catch The Dot Game](/recipes/catch-the-dot-game.md) +- [Flappy Bird Game](/recipes/flappy-bird-game.md) - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [HTTP Polling](/recipes/http-polling.md) diff --git a/SUMMARY.md b/SUMMARY.md index 41280b55..badfb689 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -103,6 +103,7 @@ - [Subject](/subjects/subject.md) - [Recipes](/recipes/README.md) - [Catch The Dot Game](/recipes/catch-the-dot-game.md) + - [Flappy Bird Game](/recipes/flappy-bird-game.md) - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [Http Polling](/recipes/http-polling.md) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index ce38b2ff..4353cda1 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -157,6 +157,10 @@ const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black'))
Total:
``` +### Related Recipes + +- [Flappy Bird Game](../../recipes/flappy-bird-game.md) + ### Additional Resources - [combineLatest](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-combineLatest) diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 5568d522..062e0c9b 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -73,6 +73,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes +- [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index cfc203d7..6eb76c6b 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -38,6 +38,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Flappy Bird Game](../../recipes/flappy-bird-game.md) ### Additional Resources diff --git a/operators/creation/interval.md b/operators/creation/interval.md index e17fcd6a..7741d881 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -28,6 +28,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Flappy Bird Game](../../recipes/flappy-bird-game.md) ### Additional Resources diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 51d89163..73db48cd 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -59,6 +59,7 @@ source - [Smart Counter](../../recipes/smartcounter.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Flappy Bird Game](../../recipes/flappy-bird-game.md) ### Additional Resources diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index f802cbf9..799c88e2 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -118,6 +118,7 @@ interval(1000) - [Smart Counter](../../recipes/smartcounter.md) - [Progress Bar](../../recipes/progressbar.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Flappy Bird Game](../../recipes/flappy-bird-game.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index 7b029b99..30a782e4 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -45,6 +45,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Flappy Bird Game](../../recipes/flappy-bird-game.md) ### Additional Resources diff --git a/recipes/README.md b/recipes/README.md index 63367d7c..1a22ddc8 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -5,6 +5,7 @@ Common use-cases and interesting recipes to help learn RxJS. ### Contents * [Catch The Dot Game](catch-the-dot-game.md) +* [Flappy Bird Game](flappy-bird-game.md) * [Game Loop](gameloop.md) * [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) * [HTTP Polling](http-polling.md) diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md new file mode 100644 index 00000000..db4a6344 --- /dev/null +++ b/recipes/flappy-bird-game.md @@ -0,0 +1,120 @@ +# Flappy Bird Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Flappy Bird like game. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-flappy-bird?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { interval, merge, combineLatest, fromEvent } from 'rxjs'; +import { tap, scan, takeWhile } from 'rxjs/operators'; +import { paint } from './html-renderer'; + +const gamePipe = (x, y) => ({ x, y, checked: false }); +const gameSize = 10; +const createPipes = y => + (random => + Array.from(Array(gameSize).keys()) + .map(e => gamePipe(e, y)) + .filter(e => e.x < random || e.x > random + 2) + )(Math.floor(Math.random() * Math.floor(gameSize))) + +const gamePipes$ = interval(500) + .pipe( + scan(acc => + (acc.length < 2 ? [...acc, createPipes(gameSize)] : acc) + .filter(c => c.some(e => e.y > 0)) + .map(cols => cols.map(e => gamePipe(e.x, e.y - 1))), + [createPipes(gameSize / 2), createPipes(gameSize)] + ) + ); + +const fly = xPos => xPos > 0 ? xPos -= 1 : xPos; +const fall = xPos => xPos < gameSize - 1 ? xPos += 1 : gameSize - 1; +const bird$ = merge(interval(300), fromEvent(document, 'keydown')) + .pipe( + scan( + (xPos, curr) => curr instanceof KeyboardEvent ? fly(xPos) : fall(xPos), + gameSize - 1 + ) + ); + +const updateGame = (bird, pipes) => (game => ( + pipes.forEach(col => col.forEach(v => game[v.x][v.y] = 2)), + game[bird][0] = 1, + game +))(Array(gameSize).fill(0).map(e => Array(gameSize).fill(0))); + +const valueOnCollisionFor = pipes => ({ + when: predicate => + !pipes[0][0].checked && predicate ? (pipes[0][0].checked = true, 1) : 0 +}); + +combineLatest(bird$, gamePipes$) + .pipe( + scan( + (state, [bird, pipes]) => ({ + bird: bird, + pipes: pipes, + lives: state.lives - valueOnCollisionFor(pipes) + .when(pipes.some(c => c.some(c => c.y === 0 && c.x === bird))), + score: state.score + valueOnCollisionFor(pipes) + .when(pipes[0][0].y === 0) + }), + { lives: 3, score: 0, bird: 0, pipes: [] } + ), + tap(state => paint(updateGame(state.bird, state.pipes), state.lives, state.score)), + takeWhile(state => state.lives > 0), + ).subscribe(); +``` + +#### html-renderer.ts +```js +const createElem = col => { + const elem = document.createElement('div'); + elem.classList.add('board'); + elem.style.display = 'inline-block'; + elem.style.marginLeft = '10px'; + elem.style.height = '6px'; + elem.style.width = '6px'; + elem.style['background-color'] = + col === 0 + ? 'white' + : (col === 1 + ? 'cornflowerblue' + : col === 2 + ? 'gray' + : 'silver'); + elem.style['border-radius'] = '90%'; + return elem; +} + +export const paint = (game: number[][], lives, score) => { + document.body.innerHTML = `Lives: ${lives}, Score: ${score}`; + + game.forEach(row => { + const rowContainer = document.createElement('div'); + row.forEach(col => rowContainer.appendChild(createElem(col))); + document.body.appendChild(rowContainer); + }); +}; +``` + +### Operators Used + +- [combineLatest](../operators/combination/combinelatest.md) +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [merge](../operators/combination/merge.md) +- [scan](../operators/transformation/scan.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) From 05af3d3af7f7e296e64a9c6eefad828198797358 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Tue, 26 Feb 2019 15:59:30 +0000 Subject: [PATCH 052/256] Added space invaders recipe (#162) * Create space-invaders-game.md * Update README.md * Update SUMMARY.md * Update fromevent.md * Update interval.md * Update map.md * Update repeat.md * Update scan.md * Update startwith.md * Update takeuntil.md * Update do.md * Update withlatestfrom.md --- README.md | 1 + SUMMARY.md | 1 + operators/combination/startwith.md | 1 + operators/combination/withlatestfrom.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/interval.md | 1 + operators/filtering/takeuntil.md | 1 + operators/transformation/map.md | 1 + operators/transformation/scan.md | 1 + operators/utility/do.md | 1 + operators/utility/repeat.md | 1 + recipes/space-invaders-game.md | 244 ++++++++++++++++++++++++ 12 files changed, 255 insertions(+) create mode 100644 recipes/space-invaders-game.md diff --git a/README.md b/README.md index c3777a05..cc2f5da1 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Lockscreen](/recipes/lockscreen.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) - [Type Ahead](/recipes/type-ahead.md) ## Introductory Resources diff --git a/SUMMARY.md b/SUMMARY.md index badfb689..f66a338f 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -110,6 +110,7 @@ - [Lockscreen](/recipes/lockscreen.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) + - [Space Invaders Game](/recipes/space-invaders-game.md) - [Type Ahead](/recipes/type-ahead.md) - [Concepts](/concepts/README.md) - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 5e79e7c6..1a6aab3c 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -92,6 +92,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Smart Counter](../../recipes/smartcounter.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index c699c9a2..0a0a5779 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -83,6 +83,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Progress Bar](../../recipes/progressbar.md) - [Game Loop](../../recipes/gameloop.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 6eb76c6b..6e9583a8 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -39,6 +39,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 7741d881..e2c0064c 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -29,6 +29,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 63635406..6853b172 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -79,6 +79,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Lockscreen](../../recipes/lockscreen.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 847f3252..e5d60305 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -58,6 +58,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 799c88e2..91afcb9d 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -119,6 +119,7 @@ interval(1000) - [Progress Bar](../../recipes/progressbar.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index 30a782e4..c6fb13b5 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -46,6 +46,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 2395e66d..0fc5b1d8 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -31,6 +31,7 @@ delayedThing.pipe( ### Related Recipes - [Lockscreen](../../recipes/lockscreen.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) ### Additional Resources diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md new file mode 100644 index 00000000..60922017 --- /dev/null +++ b/recipes/space-invaders-game.md @@ -0,0 +1,244 @@ +# Space Invaders Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Space Invaders Game. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-space-invaders?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { fromEvent, interval } from 'rxjs'; +import { map, scan, tap, startWith, withLatestFrom, takeUntil, repeat } from 'rxjs/operators'; +import { gameUpdate, initialState } from './game'; +import { State, Input } from './interfaces'; +import { paint } from './html-renderer'; + +const spaceInvaders$ = + interval(100).pipe( + withLatestFrom(fromEvent(document, 'keydown').pipe( + startWith({ code: '' }), + takeUntil(fromEvent(document, 'keyup')), + repeat() + )), + map(([intrvl, event]: [number, KeyboardEvent]): Input => + ({ dlta: intrvl, key: event.code })), + scan(gameUpdate, initialState), + tap(e => paint(e.game, e.playerLives, e.score, e.isGameOver)), + ); + +spaceInvaders$.subscribe(); +``` + +#### game.ts +```js +import { State, Input } from './interfaces'; +import { empty, player, invader, shot, noOfInvadersRows } from './constants'; + +const gameObject = (x, y) => ({ x: x, y: y }); +const gameSize = 20; +const clearGame = () => Array(gameSize).fill(empty).map(e => Array(gameSize).fill(empty)); + +const createInvaders = () => Array.from(Array(noOfInvadersRows).keys()) + .reduce((invds, row) => [...invds, ...createRowOfInvaders(row)], []) +const createRowOfInvaders = row => Array.from(Array(gameSize / 2).keys()) + .filter(e => row % 2 === 0 ? e % 2 === 0 : e % 2 !== 0) + .map(e => gameObject(row, e + 4)); + +const invadersDirection = (state: State): number => + state.invaders.length && state.invaders[0].y <= 0 + ? 1 + : (state.invaders.length && state.invaders[state.invaders.length - 1].y >= gameSize - 1 + ? -1 + : state.invadersDirY); + +const drawGame = (state: State): number[][] => ( + keepShipWithinGame(state), + state.game = clearGame(), + state.game[state.game.length - 1][state.shipY] = player, + state.invaders.forEach(i => state.game[i.x][i.y] = invader), + state.invadersShoots.forEach(s => state.game[s.x][s.y] = shot), + state.shoots.forEach(s => state.game[s.x][s.y] = shot), + state.game +); + +const addInvaderShoot = state => (randomInvader => gameObject(randomInvader.x, randomInvader.y)) + (state.invaders[Math.floor(Math.random() * state.invaders.length)]); + +const collision = (e1, e2) => e1.x === e2.x && e1.y === e2.y; +const filterOutCollisions = (c1: any[], c2: any[]): any[] => + c1.filter(e1 => !c2.find(e2 => collision(e1, e2))); +const updateScore = (state: State): number => + state.shoots.find(s => state.invaders.find(i => collision(s, i))) ? state.score + 1 : state.score; + +const updateState = (state: State): State => ({ + delta: state.delta, + game: drawGame(state), + shipY: state.shipY, + playerLives: state.invadersShoots.some(e => e.x === gameSize - 1 && e.y === state.shipY) + ? state.playerLives - 1 + : state.playerLives, + isGameOver: state.playerLives <= 0, + score: updateScore(state), + invadersDirY: invadersDirection(state), + invaders: (!state.invaders.length + ? createInvaders() + : filterOutCollisions(state.invaders, state.shoots) + .map(i => state.delta % 10 === 0 + ? gameObject( + i.x + (state.delta % (state.shootFrequency + 10) === 0 ? 1 : 0), + i.y + state.invadersDirY) + : i)), + invadersShoots: ( + state.invadersShoots = state.delta % state.shootFrequency === 0 + ? [...state.invadersShoots, addInvaderShoot(state)] + : state.invadersShoots, + state.invadersShoots + .filter(e => e.x < gameSize - 1) + .map(e => gameObject(e.x + 1, e.y)) + ), + shoots: filterOutCollisions(state.shoots, state.invaders) + .filter(e => e.x > 0) + .map(e => gameObject(e.x - 1, e.y)), + shootFrequency: !state.invaders.length ? state.shootFrequency - 5 : state.shootFrequency +}); + +const keepShipWithinGame = (state: State): number => ( + state.shipY = state.shipY < 0 ? 0 : state.shipY, + state.shipY = state.shipY >= gameSize - 1 ? gameSize - 1 : state.shipY +); + +const updateShipY = (state: State, input: Input): number => + input.key !== 'ArrowLeft' && input.key !== 'ArrowRight' + ? state.shipY + : (state.shipY -= input.key === 'ArrowLeft' ? 1 : -1); + +const addShots = (state: State, input: Input) => + state.shoots = input.key === 'Space' + ? [...state.shoots, gameObject(gameSize - 2, state.shipY)] + : state.shoots; + +const isGameOver = (state: State): boolean => + state.playerLives <= 0 + || (state.invaders.length + && state.invaders[state.invaders.length - 1].x >= gameSize - 1 + ); + +export const initialState: State = { + delta: 0, + game: clearGame(), + shipY: 10, + playerLives: 3, + isGameOver: false, + score: 0, + invadersDirY: 1, + invaders: createInvaders(), + invadersShoots: [], + shoots: [], + shootFrequency: 20 +}; + +const processInput = (state: State, input: Input) => ( + updateShipY(state, input), + addShots(state, input) +); +const whileNotGameOver = (state: State, input: Input) => + state.delta = isGameOver(state) ? undefined : input.dlta; + +export const gameUpdate = (state: State, input: Input): State => + ( + whileNotGameOver(state, input), + processInput(state, input), + updateState(state) + ); +``` + +#### constants.ts +```js +export const empty = 0; +export const player = 1; +export const invader = 2; +export const shot = 3; +export const noOfInvadersRows = 6; +``` + +#### interfaces.ts +```js +export interface State { + delta: number, + game: number[][]; + shipY: number; + playerLives: number; + isGameOver: boolean; + score: number; + invadersDirY: number, + invaders: any[]; + invadersShoots: any[]; + shoots: any[]; + shootFrequency: number; +} + +export interface Input { + dlta: number, key: string +} +``` + +#### html-renderer.ts +```js +import { empty, player, invader, shot } from './constants'; + +const createElem = col => { + const elem = document.createElement('div'); + elem.classList.add('board'); + elem.style.display = 'inline-block'; + elem.style.marginLeft = '10px'; + elem.style.height = '6px'; + elem.style.width = '6px'; + elem.style['background-color'] = + col === empty + ? 'white' + : (col === player + ? 'cornflowerblue' + : col === invader + ? 'gray' + : 'silver'); + elem.style['border-radius'] = '90%'; + return elem; +} + +export const paint = (game: number[][], playerLives: number, score: number, isGameOver: boolean) => { + document.body.innerHTML = ''; + document.body.innerHTML += `Score: ${score} Lives: ${playerLives}`; + + if (isGameOver) { + document.body.innerHTML += ' GAME OVER!'; + return; + } + + game.forEach(row => { + const rowContainer = document.createElement('div'); + row.forEach(col => rowContainer.appendChild(createElem(col))); + document.body.appendChild(rowContainer); + }); + +}; +``` + +### Operators Used + +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [map](../operators/transformation/map.md) +- [repeat](../operators/utility/repeat.md) +- [scan](../operators/transformation/scan.md) +- [startWith](../operators/combination/startwith.md) +- [takeUntil](../operators/filtering/takeuntil.md) +- [tap](../operators/utility/do.md) +- [withLatestFrom](../operators/combination/withlatestfrom.md) From fbfc7416b81595d4022f6415e4ba45cf47c813d7 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Tue, 26 Feb 2019 16:28:15 +0000 Subject: [PATCH 053/256] Fixed stackblitz links (#163) * Update buffertoggle.md * Update defer.md --- operators/creation/defer.md | 2 +- operators/transformation/buffertoggle.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/operators/creation/defer.md b/operators/creation/defer.md index b78e3296..8a7dcb9a 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -11,7 +11,7 @@ ##### Example 1: Defer to get current date/time at the time of subscription ( -[StackBlitz](https://stackblitz.com/edit/rxjs-defer-example.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-defer-example?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index a76ccd71..7824a91d 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -42,7 +42,7 @@ const subscribe = bufferToggleInterval.subscribe(val => ``` ##### Example 2: Toggle buffer on and off on mouse down/up -( [StackBlitz](https://stackblitz.com/edit/rxjs-buffertoggle-mousemove) ) +( [StackBlitz](https://stackblitz.com/edit/rxjs-buffertoggle-mousemove?file=index.ts&devtoolsheight=50) ) ```js import { fromEvent } from 'rxjs'; From c4304c8fd0d57dc407b6c3f8284f8ce136e018a3 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 27 Feb 2019 14:24:14 +0000 Subject: [PATCH 054/256] Added swipe to refresh recipe (#164) * Create swipe-to-refresh.md * Update README.md * Update README.md * Update SUMMARY.md * Update delay.md * Update fromevent.md * Update finalize.md * Update map.md * Update mergemap.md * Update of.md * Update repeat.md * Update takeuntil.md * Update takewhile.md * Update do.md * Update iif.md * Update exhaustmap.md --- README.md | 1 + SUMMARY.md | 1 + operators/conditional/iif.md | 4 + operators/creation/fromevent.md | 1 + operators/creation/of.md | 1 + operators/filtering/takeuntil.md | 1 + operators/filtering/takewhile.md | 1 + operators/transformation/exhaustmap.md | 4 + operators/transformation/map.md | 1 + operators/transformation/mergemap.md | 1 + operators/utility/delay.md | 1 + operators/utility/do.md | 1 + operators/utility/finalize.md | 3 +- operators/utility/repeat.md | 1 + recipes/README.md | 2 + recipes/swipe-to-refresh.md | 106 +++++++++++++++++++++++++ 16 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 recipes/swipe-to-refresh.md diff --git a/README.md b/README.md index cc2f5da1..beb1cd43 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Type Ahead](/recipes/type-ahead.md) ## Introductory Resources diff --git a/SUMMARY.md b/SUMMARY.md index f66a338f..2a4d1533 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -111,6 +111,7 @@ - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) + - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Type Ahead](/recipes/type-ahead.md) - [Concepts](/concepts/README.md) - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 5ecfe818..2a9b4000 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -61,6 +61,10 @@ fromEvent(document, 'mousemove').pipe( ``` +### Related Recipes + +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) + ### Additional Resources - [iif](https://rxjs-dev.firebaseapp.com/api/index/function/iif) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 6e9583a8..241209a4 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -40,6 +40,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/creation/of.md b/operators/creation/of.md index f245cae3..94c0a753 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -42,6 +42,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 6853b172..ad73fb70 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -80,6 +80,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Lockscreen](../../recipes/lockscreen.md) - [Space Invaders Game](/recipes/space-invaders-game.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 73db48cd..74c63a67 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -60,6 +60,7 @@ source - [Smart Counter](../../recipes/smartcounter.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index dd3c90c4..ea7e4042 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -88,6 +88,10 @@ const exhaustSub = firstInterval .subscribe(s => console.log(s)); ``` +### Related Recipes + +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) + ### Outside Examples ##### `exhaustMap` for login effect in [@ngrx example app](https://github.com/ngrx/platform/tree/a9e522953832b09bb329bac4524637bc608c450a/example-app) diff --git a/operators/transformation/map.md b/operators/transformation/map.md index e5d60305..425b9bf3 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -59,6 +59,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 79dccc13..a37819c4 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -159,6 +159,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [HTTP Polling](../../recipes/http-polling.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 14e1d2da..eb7eff71 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -45,6 +45,7 @@ const subscribe = message.subscribe(val => console.log(val)); ### Related Recipes - [Progress Bar](../../recipes/progressbar.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index c6fb13b5..64ee1ef0 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -47,6 +47,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/utility/finalize.md b/operators/utility/finalize.md index 592cf863..0d74b91c 100644 --- a/operators/utility/finalize.md +++ b/operators/utility/finalize.md @@ -26,7 +26,8 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -* [HTTP Polling](../../recipes/http-polling.md) +- [HTTP Polling](../../recipes/http-polling.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 0fc5b1d8..b5b6e30b 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -32,6 +32,7 @@ delayedThing.pipe( - [Lockscreen](../../recipes/lockscreen.md) - [Space Invaders Game](/recipes/space-invaders-game.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/recipes/README.md b/recipes/README.md index 1a22ddc8..2424b8ab 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -12,4 +12,6 @@ Common use-cases and interesting recipes to help learn RxJS. * [Lockscreen](lockscreen.md) * [Progress Bar](progressbar.md) * [Smart Counter](smartcounter.md) +* [Space Invaders Game](space-invaders-game.md) +* [Swipe To Refresh](swipe-to-refresh.md) * [Type Ahead](type-ahead.md) diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md new file mode 100644 index 00000000..80d9348c --- /dev/null +++ b/recipes/swipe-to-refresh.md @@ -0,0 +1,106 @@ +# Swipe To Refresh + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-refresh?file=index.ts&devtoolsheight=40) +) + +#### index.ts +```js +// RxJS v6+ +import { fromEvent, iif, of, pipe } from 'rxjs'; +import { finalize, mergeMap, takeUntil, takeWhile, repeat, map, tap, exhaustMap, delay } from 'rxjs/operators'; + +const setRefreshPos = y => + document.getElementById('refresh').style.top = `${y}px`; +const resetRefresh = () => setRefreshPos(10); +const setData = data => document.getElementById('data').innerText = data; + +const fakeRequest = () => of(new Date().toUTCString()).pipe( + tap(_ => console.log('request')), delay(1000) +); + +const takeUntilMouseUpOrRefresh$ = pipe( + takeUntil(fromEvent(document, 'mouseup')), + takeWhile(y => y < 110), +); +const moveDot = y => of(y).pipe(tap(setRefreshPos)); +const refresh$ = of({}).pipe( + tap(resetRefresh), + tap(e => setData('...refreshing...')), + exhaustMap(_ => fakeRequest()), + tap(setData) +) + +fromEvent(document, 'mousedown').pipe( + mergeMap(_ => fromEvent(document, 'mousemove')), + map((e: MouseEvent) => e.clientY), + takeUntilMouseUpOrRefresh$, + finalize(resetRefresh), + exhaustMap(y => iif( + () => y < 100, + moveDot(y), + refresh$ + )), + finalize(() => console.log('end')), + repeat() +).subscribe(); + + +``` + +##### html + +``` + + +
+
+
Swipe gray dot down to get latest date/time
+``` + +### Operators Used + +- [delay](../operators/utility/delay.md) +- [exhaustMap](../operators/transformation/exhaustmap.md) +- [finalize](../operators/utility/finalize.md) +- [fromEvent](../operators/creation/fromevent.md) +- [iif](../operators/conditional/iif.md) +- [map](../operators/transformation/map.md) +- [mergeMap](../operators/transformation/mergemap.md) +- [of](../operators/creation/of.md) +- [repeat](../operators/utility/repeat.md) +- [takeUntil](../operators/filtering/takeuntil.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) From 9d3f9834823687d3f5ce3b0a80f4566c049399ec Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 28 Feb 2019 20:24:04 -0500 Subject: [PATCH 055/256] feat(takeUntil): add additional takeUntil example --- operators/filtering/takeuntil.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index ad73fb70..62de33aa 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -76,6 +76,36 @@ const example = evenSource.pipe( const subscribe = example.subscribe(val => console.log(val)); ``` +##### Example 3: Take mouse events on mouse down until mouse up + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-ug2ezf?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { fromEvent } from 'rxjs'; +import { takeUntil, mergeMap, map } from 'rxjs/operators'; + +const mousedown$ = fromEvent(document, 'mousedown') +const mouseup$ = fromEvent(document, 'mouseup'); +const mousemove$ = fromEvent(document, 'mousemove'); + +// after mousedown, take position until mouse up +mousedown$.pipe( + mergeMap(_ => { + return mousemove$.pipe( + map((e: any) => ({ + x: e.clientX, + y: e.clientY + })), + // complete inner observable on mouseup event + takeUntil(mouseup$) + ) + }) +) +.subscribe(console.log); +``` + ### Related Recipes - [Lockscreen](../../recipes/lockscreen.md) From 0c25e072bd6dd23c6f03de0f0286235c7e1d0eed Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 28 Feb 2019 20:26:53 -0500 Subject: [PATCH 056/256] chore(takeUntil): fix stackblitz link --- operators/filtering/takeuntil.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 62de33aa..b7a7271a 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -79,7 +79,7 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: Take mouse events on mouse down until mouse up ( -[StackBlitz](https://stackblitz.com/edit/rxjs-ug2ezf?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-ug2ezf?file=index.ts&devtoolsheight=50) ) ```js // RxJS v6+ From afbd88dcd588be3de0e5f182c9a9211d3f681233 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 1 Mar 2019 13:54:42 +0000 Subject: [PATCH 057/256] Added Alphabet Invasion Game recipe (#165) * Create alphabet-invasion-game.md * Update README.md * Update README.md * Update SUMMARY.md * Update combinelatest.md * Update interval.md * Update map.md * Update scan.md * Update startwith.md * Update switchmap.md * Update alphabet-invasion-game.md * Update fromevent.md * Update takewhile.md * Update behaviorsubject.md --- README.md | 1 + SUMMARY.md | 1 + operators/combination/combinelatest.md | 1 + operators/combination/startwith.md | 3 +- operators/creation/fromevent.md | 5 +- operators/creation/interval.md | 1 + operators/filtering/takewhile.md | 3 +- operators/transformation/map.md | 5 +- operators/transformation/scan.md | 3 +- operators/transformation/switchmap.md | 1 + recipes/README.md | 1 + recipes/alphabet-invasion-game.md | 93 ++++++++++++++++++++++++++ subjects/behaviorsubject.md | 4 ++ 13 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 recipes/alphabet-invasion-game.md diff --git a/README.md b/README.md index beb1cd43..a9e924a9 100644 --- a/README.md +++ b/README.md @@ -80,6 +80,7 @@ Observables. Recipes for common use-cases and interesting solutions with RxJS. +- [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) - [Catch The Dot Game](/recipes/catch-the-dot-game.md) - [Flappy Bird Game](/recipes/flappy-bird-game.md) - [Game Loop](/recipes/gameloop.md) diff --git a/SUMMARY.md b/SUMMARY.md index 2a4d1533..13d81e1d 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -102,6 +102,7 @@ - [ReplaySubject](/subjects/replaysubject.md) - [Subject](/subjects/subject.md) - [Recipes](/recipes/README.md) + - [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) - [Catch The Dot Game](/recipes/catch-the-dot-game.md) - [Flappy Bird Game](/recipes/flappy-bird-game.md) - [Game Loop](/recipes/gameloop.md) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 4353cda1..19097305 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -159,6 +159,7 @@ const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black')) ### Related Recipes +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) ### Additional Resources diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 1a6aab3c..8167d24f 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -91,8 +91,9 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Smart Counter](../../recipes/smartcounter.md) -- [Space Invaders Game](/recipes/space-invaders-game.md) +- [Space Invaders Game](../../recipes/space-invaders-game.md) ### Additional Resources diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 241209a4..28458bd6 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -39,8 +39,9 @@ const subscribe = example.subscribe(val => console.log(val)); - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) -- [Space Invaders Game](/recipes/space-invaders-game.md) -- [Swipe To Refresh](/recipes/swipe-to-refresh.md) +- [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Swipe To Refresh](../../recipes/swipe-to-refresh.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) ### Additional Resources diff --git a/operators/creation/interval.md b/operators/creation/interval.md index e2c0064c..9ca1a9a6 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -27,6 +27,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 74c63a67..46ff9a94 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -60,7 +60,8 @@ source - [Smart Counter](../../recipes/smartcounter.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) -- [Swipe To Refresh](/recipes/swipe-to-refresh.md) +- [Swipe To Refresh](../../recipes/swipe-to-refresh.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) ### Additional Resources diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 425b9bf3..26df31f9 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -58,8 +58,9 @@ const subscribe = example.subscribe(val => console.log(val)); - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) -- [Space Invaders Game](/recipes/space-invaders-game.md) -- [Swipe To Refresh](/recipes/swipe-to-refresh.md) +- [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Swipe To Refresh](../../recipes/swipe-to-refresh.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) ### Additional Resources diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 91afcb9d..f07f4414 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -119,7 +119,8 @@ interval(1000) - [Progress Bar](../../recipes/progressbar.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) -- [Space Invaders Game](/recipes/space-invaders-game.md) +- [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) ### Additional Resources diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index a4f7fef3..e0fce1d4 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -170,6 +170,7 @@ Resume Timer - [Lockscreen](../../recipes/lockscreen.md) - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) ### Additional Resources diff --git a/recipes/README.md b/recipes/README.md index 2424b8ab..bd8a0421 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -4,6 +4,7 @@ Common use-cases and interesting recipes to help learn RxJS. ### Contents +* [Alphabet Invasion Game](alphabet-invasion-game.md) * [Catch The Dot Game](catch-the-dot-game.md) * [Flappy Bird Game](flappy-bird-game.md) * [Game Loop](gameloop.md) diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md new file mode 100644 index 00000000..83c104ae --- /dev/null +++ b/recipes/alphabet-invasion-game.md @@ -0,0 +1,93 @@ +# Alphabet Invasion Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Alphabet Invasion Game. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-alphabet-invasion?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { interval, fromEvent, combineLatest, BehaviorSubject } from 'rxjs'; +import { scan, startWith, map, takeWhile, switchMap } from 'rxjs/operators'; + +const randomLetter = () => String.fromCharCode( + Math.random() * ('z'.charCodeAt(0) - 'a'.charCodeAt(0)) + 'a'.charCodeAt(0)); +const levelChangeThreshold = 20; +const speedAdjust = 50; +const endThreshold = 15; +const gameWidth = 30; + +const intervalSubject = new BehaviorSubject(600); + +const letters$ = intervalSubject.pipe( + switchMap(i => interval(i) + .pipe( + scan((a, c) => ({ + intrvl: i, + ltrs: [({ + letter: randomLetter(), + yPos: Math.floor(Math.random() * gameWidth) + }), ...a.ltrs] + }), { ltrs: [], i: 0 }) + ))); + +const keys$ = fromEvent(document, 'keydown') + .pipe( + startWith({ key: '' }), + map((e: KeyboardEvent) => e.key) + ); + +const renderGame = state => ( + document.body.innerHTML = `Score: ${state.score}, Level: ${state.level}
`, + state.letters.forEach(l => document.body.innerHTML += + ' '.repeat(l.yPos) + l.letter + '
'), + document.body.innerHTML += + '
'.repeat(endThreshold - state.letters.length - 1) + '-'.repeat(gameWidth) +); +const renderGameOver = () => document.body.innerHTML += '
GAME OVER!'; +const noop = () => { }; + +const game$ = combineLatest(keys$, letters$).pipe( + scan((state, [key, letters]) => ( + letters.ltrs[letters.ltrs.length - 1] + && letters.ltrs[letters.ltrs.length - 1].letter === key + ? (state.score = state.score + 1, letters.ltrs.pop()) + : noop, + state.score > 0 && state.score % levelChangeThreshold === 0 + ? ( + letters.ltrs = [], + state.level = state.level + 1, + state.score = state.score + 1, + intervalSubject.next(letters.intrvl - speedAdjust)) + : noop, + ({ score: state.score, letters: letters.ltrs, level: state.level })), + { score: 0, letters: [], level: 0 }), + takeWhile(state => state.letters.length < endThreshold), +) + +game$.subscribe( + renderGame, + noop, + renderGameOver +); +``` + +### Operators Used + +- [BehaviorSubject](../subjects/behaviorsubject.md) +- [combineLatest](../operators/combination/combinelatest.md) +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [map](../operators/transformation/map.md) +- [scan](../operators/transformation/scan.md) +- [startWith](../operators/combination/startwith.md) +- [switchMap](../operators/transformation/switchmap.md) +- [takeWhile](../operators/filtering/takewhile.md) diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 7a1de03c..b20aeb57 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -84,6 +84,10 @@ merge(click$, interval$).subscribe(); ``` +### Related Recipes + +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) + ### Additional Resources - [BehaviorSubject](https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject) From eb833cf757811d0d46ed6796642ceae68efc6840 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 1 Mar 2019 15:34:37 +0000 Subject: [PATCH 058/256] Added TS interfaces to Alphabet Invasion Game (#166) --- recipes/alphabet-invasion-game.md | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index 83c104ae..a9f754dc 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -17,6 +17,7 @@ This recipe demonstrates RxJs implementation of Alphabet Invasion Game. // RxJS v6+ import { interval, fromEvent, combineLatest, BehaviorSubject } from 'rxjs'; import { scan, startWith, map, takeWhile, switchMap } from 'rxjs/operators'; +import { State, Letter, Letters } from './interfaces'; const randomLetter = () => String.fromCharCode( Math.random() * ('z'.charCodeAt(0) - 'a'.charCodeAt(0)) + 'a'.charCodeAt(0)); @@ -30,13 +31,13 @@ const intervalSubject = new BehaviorSubject(600); const letters$ = intervalSubject.pipe( switchMap(i => interval(i) .pipe( - scan((a, c) => ({ + scan((letters) => ({ intrvl: i, ltrs: [({ letter: randomLetter(), yPos: Math.floor(Math.random() * gameWidth) - }), ...a.ltrs] - }), { ltrs: [], i: 0 }) + }), ...letters.ltrs] + }), { ltrs: [], intrvl: 0 }) ))); const keys$ = fromEvent(document, 'keydown') @@ -45,7 +46,7 @@ const keys$ = fromEvent(document, 'keydown') map((e: KeyboardEvent) => e.key) ); -const renderGame = state => ( +const renderGame = (state: State) => ( document.body.innerHTML = `Score: ${state.score}, Level: ${state.level}
`, state.letters.forEach(l => document.body.innerHTML += ' '.repeat(l.yPos) + l.letter + '
'), @@ -56,7 +57,7 @@ const renderGameOver = () => document.body.innerHTML += '
GAME OVER!'; const noop = () => { }; const game$ = combineLatest(keys$, letters$).pipe( - scan((state, [key, letters]) => ( + scan<[string, Letters], State>((state, [key, letters]) => ( letters.ltrs[letters.ltrs.length - 1] && letters.ltrs[letters.ltrs.length - 1].letter === key ? (state.score = state.score + 1, letters.ltrs.pop()) @@ -69,7 +70,7 @@ const game$ = combineLatest(keys$, letters$).pipe( intervalSubject.next(letters.intrvl - speedAdjust)) : noop, ({ score: state.score, letters: letters.ltrs, level: state.level })), - { score: 0, letters: [], level: 0 }), + { score: 0, letters: [], level: 1 }), takeWhile(state => state.letters.length < endThreshold), ) @@ -80,6 +81,23 @@ game$.subscribe( ); ``` +#### interfaces.ts +```js +export interface Letter { + letter: String; + yPos: number; +} +export interface Letters { + ltrs: Letter[]; + intrvl: number; +} +export interface State { + score: number; + letters: Letter[]; + level: number; +} +``` + ### Operators Used - [BehaviorSubject](../subjects/behaviorsubject.md) From 5dd94208bbe6137d0a5e59161a3fad5c2d2ced33 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Tue, 5 Mar 2019 18:18:34 +0000 Subject: [PATCH 059/256] Added mine sweeper game recipe (#167) * Create mine-sweeper-game.md * Update README.md * Update README.md * Update SUMMARY.md * Update SUMMARY.md * Update README.md * Update filter.md * Update finalize.md * Update fromevent.md * Update map.md * Update of.md * Update pluck.md * Update switchmap.md * Update takewhile.md * Update do.md --- README.md | 1 + SUMMARY.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/of.md | 1 + operators/filtering/filter.md | 1 + operators/filtering/takewhile.md | 1 + operators/transformation/map.md | 1 + operators/transformation/pluck.md | 1 + operators/transformation/switchmap.md | 1 + operators/utility/do.md | 1 + operators/utility/finalize.md | 1 + recipes/README.md | 1 + recipes/mine-sweeper-game.md | 132 ++++++++++++++++++++++++++ 13 files changed, 144 insertions(+) create mode 100644 recipes/mine-sweeper-game.md diff --git a/README.md b/README.md index a9e924a9..7d3311d8 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [HTTP Polling](/recipes/http-polling.md) - [Lockscreen](/recipes/lockscreen.md) +- [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) diff --git a/SUMMARY.md b/SUMMARY.md index 13d81e1d..18d97fcd 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -109,6 +109,7 @@ - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [Http Polling](/recipes/http-polling.md) - [Lockscreen](/recipes/lockscreen.md) + - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 28458bd6..7576cb7c 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -42,6 +42,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Swipe To Refresh](../../recipes/swipe-to-refresh.md) - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) ### Additional Resources diff --git a/operators/creation/of.md b/operators/creation/of.md index 94c0a753..057d5b72 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -42,6 +42,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Type Ahead](../../recipes/type-ahead.md) diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index ec30a4ee..6e5b360e 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -87,6 +87,7 @@ const subscribe = example.subscribe(val => - [HTTP Polling](../../recipes/http-polling.md) - [Game Loop](../../recipes/gameloop.md) - [Lockscreen](../../recipes/lockscreen.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) ### Additional Resources diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 46ff9a94..2fef1be7 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -62,6 +62,7 @@ source - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Swipe To Refresh](../../recipes/swipe-to-refresh.md) - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) ### Additional Resources diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 26df31f9..01edee59 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -61,6 +61,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Swipe To Refresh](../../recipes/swipe-to-refresh.md) - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) ### Additional Resources diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 5de6c473..6ec75e04 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -52,6 +52,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Lockscreen](../../recipes/lockscreen.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) ### Additional Resources diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index e0fce1d4..34a6829d 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -171,6 +171,7 @@ Resume Timer - [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index 64ee1ef0..c43b5d09 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -48,6 +48,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) ### Additional Resources diff --git a/operators/utility/finalize.md b/operators/utility/finalize.md index 0d74b91c..659c6a50 100644 --- a/operators/utility/finalize.md +++ b/operators/utility/finalize.md @@ -27,6 +27,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [HTTP Polling](../../recipes/http-polling.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/recipes/README.md b/recipes/README.md index bd8a0421..f5b76065 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -11,6 +11,7 @@ Common use-cases and interesting recipes to help learn RxJS. * [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) * [HTTP Polling](http-polling.md) * [Lockscreen](lockscreen.md) +* [Mine Sweeper Game](mine-sweeper-game.md) * [Progress Bar](progressbar.md) * [Smart Counter](smartcounter.md) * [Space Invaders Game](space-invaders-game.md) diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md new file mode 100644 index 00000000..023fcfeb --- /dev/null +++ b/recipes/mine-sweeper-game.md @@ -0,0 +1,132 @@ +# Mine Sweeper Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Mine Sweeper Game. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-minesweeper?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { fromEvent, of } from 'rxjs'; +import { map, tap, filter, pluck, switchMap, takeWhile, finalize } from 'rxjs/operators'; +import { renderMinefield, renderScore, renderGameOver } from './html-renderer'; +import { size, mine } from './constants'; +import { addMines, addMarks } from './mines'; + +const mines$ = of(Array(size).fill(0).map(e => Array(size).fill(0))) + .pipe( + map(addMines), + map(addMarks), + tap(renderMinefield) + ); + +const click$ = mines => fromEvent(document, 'click') + .pipe( + map(({ clientX, clientY }: MouseEvent) => + document.elementFromPoint(clientX, clientY)), + filter(elem => elem.id !== ''), + tap(elem => (val => ( + renderScore(val === mine || elem.innerHTML !== '_' ? 0 : val), + elem.innerHTML = val) + )(mines[elem.id[0]][elem.id[1]])), + pluck('id'), + takeWhile(([x, y]) => mines[x][y] !== mine), + finalize(renderGameOver) + ); + +mines$.pipe(switchMap(click$)).subscribe(); + +``` + +#### mines.ts +```js +import { size, mine } from './constants'; + +const randomNumber = () => Math.floor(Math.random() * Math.floor(size)); + +export const addMines = arr => { + for (let i = 0; i < size/2; i++) { + arr[randomNumber()][randomNumber()] = mine; + } + + return arr; +} + +const mark = (arr, x, y) => + arr[x] !== undefined && arr[x][y] !== undefined + ? arr[x][y] += (arr[x][y] === mine ? 0 : 1) + : () => { }; + +export const addMarks = arr => { + for (let ri = 0; ri < size; ri++) { + for (let ci = 0; ci < size; ci++) { + if (arr[ri][ci] === mine) { + mark(arr, ri - 1, ci + 1); + mark(arr, ri - 1, ci); + mark(arr, ri - 1, ci - 1); + mark(arr, ri, ci + 1); + mark(arr, ri, ci - 1); + mark(arr, ri + 1, ci + 1); + mark(arr, ri + 1, ci); + mark(arr, ri + 1, ci - 1); + } + } + } + return arr; +}; +``` + +#### constants.ts +```js +export const mine = 9; +export const size = 10; +``` + +#### html-renderer.ts +```js +export const renderMinefield = arr => + arr.forEach((r, ri) => + (elem => + r.forEach((c, ci) => + (col => ( + col.innerText = '_', + col.id = `${ri}${ci}`, + elem.appendChild(document.createTextNode('\u00A0\u00A0')), + elem.appendChild(col)) + )(document.createElement('span')), + document.body.appendChild(elem))) + (document.createElement('div'))); + +export const renderScore = val => + (scoreElem => scoreElem.innerText = parseInt(scoreElem.innerText) + val)(document.getElementById('score')); + +export const renderGameOver = () => document.body.innerHTML += '
GAME OVER'; + +const addElem = decorator => (elem => ( + decorator(elem), + document.body.appendChild(elem)) +)(document.createElement('span')); + +addElem(elem => elem.innerText = 'Score: '); +addElem(elem => (elem.id = 'score', elem.innerText = '0')); +``` + +### Operators Used + +- [filter](../operators/filtering/filter.md) +- [finalize](../operators/utility/finalize.md) +- [fromEvent](../operators/creation/fromevent.md) +- [map](../operators/transformation/map.md) +- [of](../operators/creation/of.md) +- [pluck](../operators/transformation/pluck.md) +- [switchMap](../operators/transformation/switchmap.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) From 5af881eea9067c0bb523e0928eadd9132bfc6da5 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 5 Mar 2019 16:08:47 -0500 Subject: [PATCH 060/256] chore(repeat): update wording and tip --- operators/utility/repeat.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index b5b6e30b..aaf4940a 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -3,7 +3,13 @@ #### signature: `repeat(count: number): Observable` -## Repeats the stream of items emitted by the source Observable at most count times. +## Repeats an observable on completion. + +--- + +:bulb: Like [`retry`](../error_handling/retry.md) but for non error cases! + +---
@@ -24,6 +30,7 @@ const delayedThing = of('delayed value').pipe(delay(2000)); delayedThing.pipe( repeat(3) ) +// delayed value...delayed value...delayed value .subscribe(console.log) ``` From 202cfd2eff7e4bb378acc8e4d4e0d856de9ed7a7 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 5 Mar 2019 16:13:01 -0500 Subject: [PATCH 061/256] chore(retry): add retry tips --- operators/error_handling/retry.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 4e62caea..3b7c9ad9 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -4,6 +4,16 @@ ## Retry an observable sequence a specific number of times should an error occur. +--- + +:bulb: Useful for retrying HTTP requests! + +:bulb: If you only want to retry in certain cases, check out [`retryWhen`](./retrywhen.md)! + +:bulb: For non error cases check out [`repeat`](../utility/repeat.md)! + +--- +
### Examples From 82d599b50a171c245d843d87cfa2db264bd7a3b8 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 6 Mar 2019 16:10:21 +0000 Subject: [PATCH 062/256] Update every.md (#168) --- operators/conditional/every.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/operators/conditional/every.md b/operators/conditional/every.md index fa2bd069..c73b6a4f 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -52,6 +52,39 @@ const example = allEvens.pipe( const subscribe = example.subscribe(val => console.log(val)); ``` +##### Example 3: Values arriving over time and completing stream prematurely due to every returning false + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-every-example?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +console.clear(); +import { concat, of } from 'rxjs'; +import { every, delay, tap } from 'rxjs/operators'; + +const log = console.log; +const returnCode = request => Number.isInteger(request) + ? 200 + : 400; +const fakeRequest = request => of({ code: returnCode(request) }) + .pipe( + tap(_ => log(request)), + delay(1000) + ); + +const apiCalls$ = concat( + fakeRequest(1), + fakeRequest("invalid payload"), + fakeRequest(2) //this won't execute as every will return false for previous line +).pipe( + every(e => e.code === 200), + tap(e => log(`all request successful: ${e}`)) +); + +apiCalls$.subscribe(); +``` + ### Additional Resources - [every](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-every) From b75a16d8669d13db9d115cf1c0bce1e7c1e84945 Mon Sep 17 00:00:00 2001 From: stanislasdrg Date: Thu, 7 Mar 2019 12:51:53 +0000 Subject: [PATCH 063/256] Added missing observer.complete() (#169) --- operators/creation/create.md | 1 + 1 file changed, 1 insertion(+) diff --git a/operators/creation/create.md b/operators/creation/create.md index 50d4768a..7e81cc0d 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -25,6 +25,7 @@ import { Observable } from 'rxjs'; const hello = Observable.create(function(observer) { observer.next('Hello'); observer.next('World'); + observer.complete(); }); //output: 'Hello'...'World' From 04d6975cb4378b97b8bdbcac6bc81f0a36ea1c38 Mon Sep 17 00:00:00 2001 From: Dave Dannenberg Date: Thu, 7 Mar 2019 19:48:58 -0700 Subject: [PATCH 064/256] defer is the title, not create (#170) --- operators/creation/defer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/creation/defer.md b/operators/creation/defer.md index 8a7dcb9a..ddd0a3ac 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -1,4 +1,4 @@ -# create +# defer #### signature: `defer(observableFactory: function(): SubscribableOrPromise): Observable` From 9e387f2d8748bee83cfb653e980daa37db1a5fe7 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Mon, 11 Mar 2019 20:08:40 +0000 Subject: [PATCH 065/256] feat(operators): time based operators comparison * Create time-based-operators-comparison.md * Update README.md * Update SUMMARY.md * Update throttletime.md * Update buffertime.md * Update debouncetime.md * Update audittime.md * Update time-based-operators-comparison.md * style(comparison): small wording and description tweaks --- README.md | 1 + SUMMARY.md | 1 + concepts/time-based-operators-comparison.md | 78 +++++++++++++++++++++ operators/filtering/audittime.md | 1 + operators/filtering/debouncetime.md | 1 + operators/filtering/throttletime.md | 1 + operators/transformation/buffertime.md | 1 + 7 files changed, 84 insertions(+) create mode 100644 concepts/time-based-operators-comparison.md diff --git a/README.md b/README.md index 7d3311d8..7557192a 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ major concepts needed to feel comfortable with reactive programming and Observables. - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) +- [Time based operators comparison](/concepts/time-based-operators-comparison.md) - [Understanding Operator Imports](/concepts/operator-imports.md) #### Recipes diff --git a/SUMMARY.md b/SUMMARY.md index 18d97fcd..621ee38b 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -117,4 +117,5 @@ - [Type Ahead](/recipes/type-ahead.md) - [Concepts](/concepts/README.md) - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) + - [Time based operators comparison](/concepts/time-based-operators-comparison.md) - [Understanding Operator Imports](/concepts/operator-imports.md) diff --git a/concepts/time-based-operators-comparison.md b/concepts/time-based-operators-comparison.md new file mode 100644 index 00000000..2582fa3d --- /dev/null +++ b/concepts/time-based-operators-comparison.md @@ -0,0 +1,78 @@ +# Time based operators comparison + +RxJS offers a rich selection of time based operators but this diversity can come at cost when choosing the right operator for a task at hand. Below is a visual comparison of popular time based operators. + +Compared operators: + +- [auditTime](../operators/filtering/audittime.md) +- [bufferTime](../operators/transformation/buffertime.md) +- [debounceTime](../operators/filtering/debouncetime.md) +- sampleTime +- [throttleTime](../operators/filtering/throttletime.md) + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-time-based-operators-comparison?file=index.ts&devtoolsheight=100)) + +```js +/* +interval ^0-------1-------2-------3-------4-------5-------6-------7-------8-------9------| +auditTime ^------------------------3-------------------------------7----------------------| +bufferTime ^----------------[0,1]-------------------[2,3,4]-----------------[5,6,7]-[8,9]--| +debounceTime ^------------------------------------------------------------------------9------| +sampleTime ^----------------1-----------------------4-----------------------7--------------| +throttleTime ^0-------------------------------4-------------------------------8--------------| +*/ + +// RxJS v6+ +import { interval, merge } from 'rxjs'; +import { auditTime, bufferTime, debounceTime, sampleTime, throttleTime, tap, take } from 'rxjs/operators'; + +const takeValue = 10; +const intrvl = 1000; +const time = 3000; + +const intervaled = (operator, operatorName) => + interval(intrvl) + .pipe( + take(takeValue), + operator, + tap(x => console.log(`${operatorName}:${x}`)) + ); + +merge( + interval(intrvl).pipe(take(takeValue), tap(v => console.log(`i: ${v}`))), + intervaled(auditTime(time), "audtiTime"), + intervaled(bufferTime(time), "bufferTime"), + intervaled(debounceTime(time), "debounceTime"), + intervaled(sampleTime(time), "sampleTime"), + intervaled(throttleTime(time), "throttleTime") +).subscribe(); + +// output +/* +0 +throttleTime:0 +1 +2 +bufferTime:0,1 +sampleTime:1 +3 +audtiTime:3 +4 +throttleTime:4 +5 +bufferTime:2,3,4 +sampleTime:4 +6 +7 +audtiTime:7 +8 +bufferTime:5,6,7 +sampleTime:7 +throttleTime:8 +9 +bufferTime:8,9 +debounceTime:9 + +*/ +``` diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index dd7b64c0..6ad60497 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -36,6 +36,7 @@ const subscribe = example.subscribe(val => console.log('Clicked')); * [auditTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-auditTime) :newspaper: - Official docs +* [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index faf26f48..b6c7b3ce 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -52,6 +52,7 @@ const subscribe = debouncedInput.subscribe(val => { :newspaper: - Official docs - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 1907cc25..c6de2ec1 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -66,6 +66,7 @@ const subscribe = example.subscribe(val => console.log(val)); :newspaper: - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index 63b4df46..e996e5f3 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -55,6 +55,7 @@ const subscribe = example.subscribe(val => * [bufferTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferTime) :newspaper: - Official docs +* [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- From 6650f265400a7fd581ed2ef813223dcc629f44f6 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 11 Mar 2019 16:11:17 -0400 Subject: [PATCH 066/256] style(readme): update description wording --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 7557192a..46731db9 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,7 @@ points. Learning Rx may be difficult but it is certainly worth the effort! Operators are the horse-power behind observables, providing an elegant, declarative solution to complex asynchronous tasks. This section contains all -[RxJS operators](/operators/README.md), included with clear, executable examples -in both [JSBin](https://jsbin.com) and [JSFiddle](https://jsfiddle.net). Links +[RxJS operators](/operators/README.md), included with clear, executable examples. Links to additional resources and recipes for each operator are also provided, when applicable. From f62e575294e69f8a6a82731ee104aa6949b66683 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 13 Mar 2019 15:38:10 +0000 Subject: [PATCH 067/256] feat(recipes): tank battle game recipe * Create tank-battle-game.md * Update README.md * Update README.md * Update SUMMARY.md * Update combinelatest.md * Update fromevent.md * Update interval.md * Update scan.md * Update startwith.md * Update do.md * Update tank-battle-game.md --- README.md | 1 + SUMMARY.md | 1 + operators/combination/combinelatest.md | 1 + operators/combination/startwith.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/interval.md | 3 +- operators/transformation/scan.md | 1 + operators/utility/do.md | 1 + recipes/README.md | 1 + recipes/tank-battle-game.md | 210 +++++++++++++++++++++++++ 10 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 recipes/tank-battle-game.md diff --git a/README.md b/README.md index 46731db9..2bf4efa5 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) +- [Tank Battle Game](/recipes/tank-battle-game.md) - [Type Ahead](/recipes/type-ahead.md) ## Introductory Resources diff --git a/SUMMARY.md b/SUMMARY.md index 621ee38b..3d283c63 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -114,6 +114,7 @@ - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) + - [Tank Battle Game](/recipes/tank-battle-game.md) - [Type Ahead](/recipes/type-ahead.md) - [Concepts](/concepts/README.md) - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 19097305..29b1aa2d 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -161,6 +161,7 @@ const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black')) - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Tank Battle Game](../../recipes/tank-battle-game.md) ### Additional Resources diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 8167d24f..679033e0 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -94,6 +94,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Tank Battle Game](../../recipes/tank-battle-game.md) ### Additional Resources diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 7576cb7c..7cbdc702 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -43,6 +43,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Swipe To Refresh](../../recipes/swipe-to-refresh.md) - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Tank Battle Game](../../recipes/tank-battle-game.md) ### Additional Resources diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 9ca1a9a6..4e8048ea 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -30,7 +30,8 @@ const subscribe = source.subscribe(val => console.log(val)); - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) -- [Space Invaders Game](/recipes/space-invaders-game.md) +- [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Tank Battle Game](../../recipes/tank-battle-game.md) ### Additional Resources diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index f07f4414..e87df842 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -121,6 +121,7 @@ interval(1000) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Tank Battle Game](../../recipes/tank-battle-game.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index c43b5d09..314c4a0a 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -49,6 +49,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Space Invaders Game](/recipes/space-invaders-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Tank Battle Game](../../recipes/tank-battle-game.md) ### Additional Resources diff --git a/recipes/README.md b/recipes/README.md index f5b76065..3f7e7afc 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -16,4 +16,5 @@ Common use-cases and interesting recipes to help learn RxJS. * [Smart Counter](smartcounter.md) * [Space Invaders Game](space-invaders-game.md) * [Swipe To Refresh](swipe-to-refresh.md) +* [Tank Battle Game](tank-battle-game.md) * [Type Ahead](type-ahead.md) diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md new file mode 100644 index 00000000..d96d9033 --- /dev/null +++ b/recipes/tank-battle-game.md @@ -0,0 +1,210 @@ +# Tank Battle Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Tank Battle like game. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-tank-battle?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { fromEvent, combineLatest, interval } from 'rxjs'; +import { scan, tap, startWith } from 'rxjs/operators'; +import { gameSize, down, up, right, left, p1Color, p2Color } from './constants'; +import { State } from './interfaces'; +import { updatePlayer, addShots, updateShots, checkCollisions, initialState } from './game'; +import { paint } from './html-renderer'; + +combineLatest( + interval(100), + fromEvent(document, 'keydown').pipe(startWith({ key: '' })) +).pipe( + scan<[number, KeyboardEvent], State>((state, [_, event]) => ( + updatePlayer(state.players[0], event.key, 'w', 's', 'a', 'd'), + updatePlayer(state.players[1], event.key, 'i', 'k', 'j', 'l'), + addShots(state, event.key), + state.shots = updateShots(state.shots), + checkCollisions(state), + state), + initialState + ), + tap(paint) +).subscribe(); +``` + +#### game.ts +```js +import { gameSize, down, up, right, left, p1Color, p2Color, p1Shot, p2Shot } from './constants'; +import { GameObject, State } from './interfaces'; + +const gameObject = (x, y, g, c): GameObject => ({ x, y, g, s: 0, c: c }); +const noop = (): void => { }; + +export const updatePlayer = (p: GameObject, key: string, u, d, l, r): GameObject => ( + (key === d + ? (p.x += p.x < gameSize - 1 ? 1 : 0, p.g = down) + : key === u + ? (p.x += p.x > 0 ? -1 : 0, p.g = up) + : noop), + (key === r + ? (p.y += p.y < gameSize - 1 ? 1 : 0, p.g = right) + : key === l + ? (p.y += p.y > 0 ? -1 : 0, p.g = left) + : noop), + p); + +export const addShot = (player: GameObject): GameObject => + ({ x: player.x, y: player.y, g: player.g }); + +export const addShots = (state: State, key: string): void => + state.shots.push( + key === p1Shot + ? addShot(state.players[0]) + : key === p2Shot + ? addShot(state.players[1]) + : []); + +export const updateShots = (shots: GameObject[]): GameObject[] => shots + .filter(s => + s.x > 0 + && s.x < gameSize - 1 + && s.y > 0 + && s.y < gameSize) + .map(s => ( + s.g === down + ? s.x += 1 + : s.g === up + ? s.x += -1 + : s.g === right + ? s.y += 1 + : s.g === left + ? s.y += -1 + : () => { }, s)); + +export const initialState: State = { + players: [ + gameObject(1, 1, right, p1Color), + gameObject(gameSize - 2, gameSize - 2, left, p2Color) + ], + shots: [] +}; + +export const checkCollisions = (state: State): void => + state.players.forEach((p, i) => { + const collidingShotIndex = state.shots.findIndex(s => s.x === p.x && s.y === p.y); + if (collidingShotIndex > -1) { + if (i === 0) { + state.players[1].s += 1; + } else { + state.players[0].s += 1; + } + state.shots.splice(collidingShotIndex, 1); + } + }); +``` + +#### interfaces.ts +```js +export interface GameObject { + x: number; + y: number; + g: string; + s: number; + c: string; +} + +export interface State { + players: GameObject[]; + shots: GameObject[]; +} +``` + +#### constants.ts +```js +export const gameSize = 20; +export const up = '^'; +export const down = 'v'; +export const left = '<'; +export const right = '>'; +export const empty = 0; +export const p1Color = 'DarkViolet'; +export const p2Color = 'CornflowerBlue'; +export const p1Shot = 'c'; +export const p2Shot = 'n'; +``` + +#### html-renderer.ts +```js + +import { gameSize, empty, p1Color, p2Color } from './constants'; +import { State, GameObject } from './interfaces'; + +const createElem = (gameObject: GameObject) => { + const elem = document.createElement('div'); + elem.style.display = 'inline-block'; + elem.style.marginLeft = '10px'; + elem.style.height = '6px'; + elem.style.width = '6px'; + elem.style.color = gameObject.c; + elem.innerText = gameObject === empty ? ' ' : gameObject.g; + + return elem; +} + +const paintPlayerScore = (score: number, color: string) => { + const scoreElem = document.createElement('span'); + scoreElem.innerHTML = `P1: ${score} `; + scoreElem.style.color = color; + document.body.appendChild(scoreElem); +} + +const paintScores = (state: State) => { + document.body.innerHTML = 'Scores: '; + paintPlayerScore(state.players[0].s, p1Color); + paintPlayerScore(state.players[1].s, p2Color); +} + +const painInfo = () => { + document.body.innerHTML += 'This game requires 2 players :)'; + document.body.innerHTML += '
'; + document.body.innerHTML += 'Player 1 controls: wsad, fire: c'; + document.body.innerHTML += '
'; + document.body.innerHTML += 'Player 2 controls: ikjl, fire: n'; +} + +const emptyGame = () => Array(gameSize).fill(empty).map(_ => Array(gameSize).fill(empty)); +const paintGame = (state: State) => { + const game = emptyGame(); + state.players.forEach(p => game[p.x][p.y] = { g: p.g, c: p.c }); + state.shots.forEach(s => game[s.x][s.y] = { g: '*', c: 'black' }); + + game.forEach(row => { + const rowContainer = document.createElement('div'); + row.forEach(col => rowContainer.appendChild(createElem(col))); + document.body.appendChild(rowContainer); + }); +} + +export const paint = (state: State) => { + paintScores(state); + document.body.innerHTML += '
'; + paintGame(state); + painInfo(); +} +``` + +### Operators Used + +- [combineLatest](../operators/combination/combinelatest.md) +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [scan](../operators/transformation/scan.md) +- [startWith](../operators/combination/startwith.md) +- [tap](../operators/utility/do.md) From 94b03da6a5706177baa4876092964c2452dcfdcd Mon Sep 17 00:00:00 2001 From: adamlubek Date: Thu, 14 Mar 2019 16:57:42 +0000 Subject: [PATCH 068/256] feat(operators): add timeInterval docs * Create timeinterval.md * Update README.md * Update README.md * Update complete.md * Update SUMMARY.md --- SUMMARY.md | 1 + operators/README.md | 3 ++- operators/complete.md | 1 + operators/utility/README.md | 1 + operators/utility/timeinterval.md | 40 +++++++++++++++++++++++++++++++ 5 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 operators/utility/timeinterval.md diff --git a/SUMMARY.md b/SUMMARY.md index 3d283c63..d1045d07 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -93,6 +93,7 @@ - [finalize / finally](operators/utility/finalize.md) - [let](/operators/utility/let.md) - [repeat](/operators/utility/repeat.md) + - [timeInterval](/operators/utility/timeinterval.md) - [timeout](/operators/utility/timeout.md) - [toPromise](/operators/utility/topromise.md) - [Full Listing](/operators/complete.md) diff --git a/operators/README.md b/operators/README.md index 22173d23..106fda0d 100644 --- a/operators/README.md +++ b/operators/README.md @@ -96,8 +96,9 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [finalize / finally](utility/finalize.md) - [let](utility/let.md) - [repeat](utility/repeat.md) - - [toPromise](utility/topromise.md) + - [timeInterval](utility/timeinterval.md) - [timeout](utility/timeout.md) + - [toPromise](utility/topromise.md) :star: - _commonly used_ diff --git a/operators/complete.md b/operators/complete.md index 5d0e8c2c..6a79532e 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -78,6 +78,7 @@ _[Prefer a split by operator type?](README.md)_ - [throttle](filtering/throttle.md) - [throttleTime](filtering/throttletime.md) - [throw](creation/throw.md) +- [timeInterval](utility/timeinterval.md) - [timeout](utilit/timeout.md) - [timer](creation/timer.md) - [toArray](transformation/toarray.md) diff --git a/operators/utility/README.md b/operators/utility/README.md index 5fbfc2c0..bbe8339e 100644 --- a/operators/utility/README.md +++ b/operators/utility/README.md @@ -12,6 +12,7 @@ provide helpful utilities in your observable toolkit. * [finalize / finally](finalize.md) * [let](let.md) * [repeat](repeat.md) +* [timeInterval](timeinterval.md) * [timeout](timeout.md) * [toPromise](topromise.md) diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md new file mode 100644 index 00000000..46b25492 --- /dev/null +++ b/operators/utility/timeinterval.md @@ -0,0 +1,40 @@ + +# timeInterval + +#### signature: `timeInterval(scheduler: *): Observable> | WebSocketSubject | Observable` + +## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions + + +
+ +### Examples + +##### Example 1: Time between mouse clicks + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-time-interval?file=index.ts&devtoolsheight=50) ) + +```js +// RxJS v6+ +import { fromEvent } from 'rxjs'; +import { timeInterval, tap } from 'rxjs/operators'; + +fromEvent(document, 'mousedown').pipe( + timeInterval(), + tap(console.log) +).subscribe(i => + document.body.innerText = `milliseconds since last click: ${i.interval}` +); + +``` + +### Additional Resources + +- [timeInterval](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-timeInterval) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeInterval.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeInterval.ts) From 6b366ea8dd3da764204ef94532620c146c69ddad Mon Sep 17 00:00:00 2001 From: adamlubek Date: Mon, 18 Mar 2019 15:35:01 +0000 Subject: [PATCH 069/256] feat(recipes): Added click ninja game recipe * Create click-ninja-game.md * Update README.md * Update README.md * Update SUMMARY.md * Update finalize.md * Update repeat.md * Update scan.md * Update takewhile.md * Update do.md * Update timeinterval.md * Update fromevent.md --- README.md | 1 + SUMMARY.md | 1 + operators/creation/fromevent.md | 17 +++--- operators/filtering/takewhile.md | 7 ++- operators/transformation/scan.md | 7 ++- operators/utility/do.md | 9 +-- operators/utility/finalize.md | 1 + operators/utility/repeat.md | 1 + operators/utility/timeinterval.md | 5 ++ recipes/README.md | 1 + recipes/click-ninja-game.md | 98 +++++++++++++++++++++++++++++++ 11 files changed, 130 insertions(+), 18 deletions(-) create mode 100644 recipes/click-ninja-game.md diff --git a/README.md b/README.md index 2bf4efa5..4b0b5c19 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) - [Catch The Dot Game](/recipes/catch-the-dot-game.md) +- [Click Ninja Game](/recipes/click-ninja-game.md) - [Flappy Bird Game](/recipes/flappy-bird-game.md) - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) diff --git a/SUMMARY.md b/SUMMARY.md index d1045d07..d8ba584e 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -105,6 +105,7 @@ - [Recipes](/recipes/README.md) - [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) - [Catch The Dot Game](/recipes/catch-the-dot-game.md) + - [Click Ninja Game](/recipes/click-ninja-game.md) - [Flappy Bird Game](/recipes/flappy-bird-game.md) - [Game Loop](/recipes/gameloop.md) - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 7cbdc702..15105a44 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -30,20 +30,21 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -- [Smart Counter](../../recipes/smartcounter.md) -- [Progress Bar](../../recipes/progressbar.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Click Ninja Game](../../recipes/click-ninja-game.md) +- [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Game Loop](../../recipes/gameloop.md) -- [HTTP Polling](../../recipes/http-polling.md) - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) +- [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) -- [Type Ahead](../../recipes/type-ahead.md) -- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) -- [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Progress Bar](../../recipes/progressbar.md) +- [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Swipe To Refresh](../../recipes/swipe-to-refresh.md) -- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) -- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) +- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 2fef1be7..f4f1241c 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -57,12 +57,13 @@ source ### Related Recipes -- [Smart Counter](../../recipes/smartcounter.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) -- [Swipe To Refresh](../../recipes/swipe-to-refresh.md) -- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Smart Counter](../../recipes/smartcounter.md) +- [Swipe To Refresh](../../recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index e87df842..587f4050 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -115,12 +115,13 @@ interval(1000) ### Related Recipes -- [Smart Counter](../../recipes/smartcounter.md) -- [Progress Bar](../../recipes/progressbar.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Progress Bar](../../recipes/progressbar.md) +- [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) -- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index 314c4a0a..f4378130 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -41,15 +41,16 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -- [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) -- [Lockscreen](../../recipes/lockscreen.md) -- [Type Ahead](../../recipes/type-ahead.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) +- [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) +- [Lockscreen](../../recipes/lockscreen.md) +- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) -- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) +- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/utility/finalize.md b/operators/utility/finalize.md index 659c6a50..30c5a7e0 100644 --- a/operators/utility/finalize.md +++ b/operators/utility/finalize.md @@ -26,6 +26,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes +- [Click Ninja Game](../../recipes/click-ninja-game.md) - [HTTP Polling](../../recipes/http-polling.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index aaf4940a..484ef115 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -37,6 +37,7 @@ delayedThing.pipe( ### Related Recipes +- [Click Ninja Game](../../recipes/click-ninja-game.md) - [Lockscreen](../../recipes/lockscreen.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 46b25492..18bdc68b 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -29,6 +29,11 @@ fromEvent(document, 'mousedown').pipe( ``` +### Related Recipes + +- [Click Ninja Game](../../recipes/click-ninja-game.md) + + ### Additional Resources - [timeInterval](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-timeInterval) diff --git a/recipes/README.md b/recipes/README.md index 3f7e7afc..cb4adc25 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -6,6 +6,7 @@ Common use-cases and interesting recipes to help learn RxJS. ### Contents * [Alphabet Invasion Game](alphabet-invasion-game.md) * [Catch The Dot Game](catch-the-dot-game.md) +* [Click Ninja Game](click-ninja-game.md) * [Flappy Bird Game](flappy-bird-game.md) * [Game Loop](gameloop.md) * [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md new file mode 100644 index 00000000..0be18c9b --- /dev/null +++ b/recipes/click-ninja-game.md @@ -0,0 +1,98 @@ +# Click Ninja Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe shows usage of time interval operator in a simple game + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-click-ninja?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { fromEvent, TimeInterval } from 'rxjs'; +import { timeInterval, takeWhile, scan, tap, repeat, finalize } from 'rxjs/operators'; +import { render, clear } from './html-renderer'; + +interface State { + score: number; + interval: number; + threshold: number; +} + +fromEvent(document, 'mousedown').pipe( + timeInterval(), + scan, State>((state, timeInterval) => ({ + score: state.score + 1, + interval: timeInterval.interval, + threshold: state.threshold - 2 + }), { score: 0, interval: 0, threshold: 300 }), + takeWhile((state: State) => state.interval < state.threshold), + tap((state: State) => render(state.score, Math.floor(state.score / 10))), + finalize(clear), + repeat() +).subscribe(); +``` + +#### html-renderer.ts +```js +const texts = { + 0: 'click, click', + 1: 'keep clicking', + 2: 'wow', + 3: 'not tired yet?!', + 4: 'click master!', + 5: 'inhuman!!!', + 6: 'ininhuman!!!' +}; + +const text = (score: number, level: number) => `${texts[level]} \n ${score}` + +export const render = (score: number, level: number) => { + const id = 'level' + level; + const element = document.getElementById(id); + const innerText = text(score, level); + if (element) { + element.innerText = innerText; + } else { + const elem = document.createElement('div'); + elem.id = id; + elem.style.zIndex = `${level}`; + elem.style.position = 'absolute'; + elem.style.height = '150px'; + elem.style.width = '150px'; + elem.style.borderRadius = '10px' + const position = level * 20; + elem.style.top = position + 'px'; + elem.style.left = position + 'px'; + const col = 100 + position; + elem.style.background = `rgb(0,${col},0)`; + elem.style.color = 'white'; + elem.innerText = innerText; + elem.style.textAlign = 'center'; + elem.style.verticalAlign = 'middle'; + elem.style.lineHeight = '90px'; + document.body.appendChild(elem); + } +}; + +export const clear = () => document.body.innerText = ''; +``` + +##### html +``` +
How fast can you click?!
+``` + +- [finalize](../operators/utility/finalize.md) +- [fromEvent](../operators/creation/fromevent.md) +- [repeat](../operators/utility/repeat.md) +- [scan](../operators/transformation/scan.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) +- [timeInterval](../operators/utility/timeinterval.md) From 81b1bc36b859b7dfdfc2f5e09d922736603547b7 Mon Sep 17 00:00:00 2001 From: Christos Paschalidis Date: Wed, 20 Mar 2019 17:07:32 +0100 Subject: [PATCH 070/256] feat(operators): add ajax operator * adds ajax operator * example 4 * links * adds signature * adds ajax to summary.md * last spot --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/creation/README.md | 1 + operators/creation/ajax.md | 169 +++++++++++++++++++++++++++++++++++ 5 files changed, 173 insertions(+) create mode 100644 operators/creation/ajax.md diff --git a/SUMMARY.md b/SUMMARY.md index d8ba584e..72f4069d 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -21,6 +21,7 @@ - [iif](/operators/conditional/iif.md) - [sequenceEqual](/operators/conditional/sequenceequal.md) - [Creation](/operators/creation/README.md) + - [ajax](/operators/creation/ajax.md) - [create](/operators/creation/create.md) - [defer](/operators/creation/defer.md) - [empty](/operators/creation/empty.md) diff --git a/operators/README.md b/operators/README.md index 106fda0d..20788ebf 100644 --- a/operators/README.md +++ b/operators/README.md @@ -25,6 +25,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [iif](conditional/iif.md) - [sequenceequal](conditional/sequenceequal.md) - [Creation](creation/README.md) + - [ajax](creation/ajax.md) :star: - [create](creation/create.md) - [defer](creation/defer.md) - [empty](creation/empty.md) diff --git a/operators/complete.md b/operators/complete.md index 6a79532e..a321c91d 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -7,6 +7,7 @@ _[Prefer a split by operator type?](README.md)_ ### Contents (In Alphabetical Order) +- [ajax](creation/ajax.md) :star: - [audit](filtering/audit.md) - [auditTime](filtering/audittime.md) - [buffer](transformation/buffer.md) diff --git a/operators/creation/README.md b/operators/creation/README.md index 9ffcfbd6..1975355f 100644 --- a/operators/creation/README.md +++ b/operators/creation/README.md @@ -6,6 +6,7 @@ generic to specific use-cases you are free, and encouraged, to turn ## Contents +- [ajax](ajax.md) :star: - [create](create.md) - [defer](defer.md) - [empty](empty.md) diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md new file mode 100644 index 00000000..a2a827f3 --- /dev/null +++ b/operators/creation/ajax.md @@ -0,0 +1,169 @@ +# ajax + +#### signature: `ajax(urlOrRequest: string | AjaxRequest)` + +## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. + + +
+ +### Examples + +##### Example 1: Observable that emits the response object that is being returned from the request. + +( [StackBlitz](https://stackblitz.com/edit/rxjs-raqi89) ) + +```js +// RxJS v6+ +import { ajax } from 'rxjs/ajax'; + +const githubUsers = `https://api.github.com/users?per_page=2`; + +const users = ajax(githubUsers) + +const subscribe = users.subscribe( + res => console.log(res), + err => console.error(err) + ); + +/* output +{ + "originalEvent":{ + "isTrusted":true + }, + "xhr":{ + + }, + "request":{ + "async":true, + "crossDomain":true, + "withCredentials":false, + "headers":{ + + }, + "method":"GET", + "responseType":"json", + "timeout":0, + "url":"https://api.github.com/users?per_page=2" + }, + "status":200, + "responseType":"json", + "response":[ + { + "login":"mojombo", + "id":1, + "node_id":"MDQ6VXNlcjE=", + "avatar_url":"https://avatars0.githubusercontent.com/u/1?v=4", + "gravatar_id":"", + ... + }, + { + "login":"defunkt", + "id":2, + "node_id":"MDQ6VXNlcjI=", + "avatar_url":"https://avatars0.githubusercontent.com/u/2?v=4", + "gravatar_id":"", + "... + } + ] +} +*/ + +``` + +##### Example 2: Observable that emits only the json key of the response object that is being returned from the request. + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-8jkrhl) +) + +```js +// RxJS v6+ +import { ajax } from 'rxjs/ajax'; + +const githubUsers = `https://api.github.com/users?per_page=2`; + +const users = ajax.getJSON(githubUsers) + +const subscribe = users.subscribe( + res => console.log(res), + err => console.error(err) + ); + +/* output +[ + { + "login":"mojombo", + "id":1, + "node_id":"MDQ6VXNlcjE=", + "avatar_url":"https://avatars0.githubusercontent.com/u/1?v=4", + "gravatar_id":"", + "... + }, + { + "login":"defunkt", + "id":2, + "node_id":"MDQ6VXNlcjI=", + "avatar_url":"https://avatars0.githubusercontent.com/u/2?v=4", + "gravatar_id":"", + ... + } +] +*/ +``` + +##### Example 3: Observable that emits the error object that is being returned from the request. + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-vnxkth) +) + +```js +// RxJS v6+ +import { ajax } from 'rxjs/ajax'; + +const githubUsers = `https://api.github.com/error`; + +const users = ajax.getJSON(githubUsers) + +const subscribe = users.subscribe( + res => console.log(res), + err => console.error(err) + ); + +/* output +Error: ajax error 404 +*/ +``` + + +##### Example 4: Ajax operator with object as input. + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-vqnnot) +) + +```js +// RxJS v6+ +import { ajax } from 'rxjs/ajax'; + +const githubUsers = `https://api.github.com/error`; + +const users = ajax({ url: githubUsers, method:"GET", headers:{ /*some headers*/ }, body: { /*in case you need a body*/ }} ) + +const subscribe = users.subscribe( + res => console.log(res), + err => console.error(err) + ); + +``` + +### Additional Resources + +- [ajax](https://rxjs.dev/api/ajax/ajax) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/6.4.0/src/internal/observable/dom/ajax.ts#L20-L19](https://github.com/ReactiveX/rxjs/blob/6.4.0/src/internal/observable/dom/ajax.ts#L20-L19) From c6f4e081b12878b0be71e4db21f29f39cb3c2423 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 27 Mar 2019 19:38:37 +0000 Subject: [PATCH 071/256] feat(recipes): add platform jumper game recipe * Create platform-jumper-game.md * Update README.md * Update README.md * Update SUMMARY.md * Update combinelatest.md * Update fromevent.md * Update interval.md * Update of.md * Update pluck.md * Update scan.md * Update startwith.md * Update takewhile.md * Update do.md * Update switchmap.md --- README.md | 1 + SUMMARY.md | 1 + operators/combination/combinelatest.md | 1 + operators/combination/startwith.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/interval.md | 1 + operators/creation/of.md | 1 + operators/filtering/takewhile.md | 1 + operators/transformation/pluck.md | 1 + operators/transformation/scan.md | 1 + operators/transformation/switchmap.md | 11 +- operators/utility/do.md | 1 + recipes/README.md | 1 + recipes/platform-jumper-game.md | 193 +++++++++++++++++++++++++ 14 files changed, 211 insertions(+), 5 deletions(-) create mode 100644 recipes/platform-jumper-game.md diff --git a/README.md b/README.md index 4b0b5c19..b37250bd 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [HTTP Polling](/recipes/http-polling.md) - [Lockscreen](/recipes/lockscreen.md) - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) +- [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) diff --git a/SUMMARY.md b/SUMMARY.md index 72f4069d..f1264a41 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -113,6 +113,7 @@ - [Http Polling](/recipes/http-polling.md) - [Lockscreen](/recipes/lockscreen.md) - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) + - [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 29b1aa2d..7fb15085 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -161,6 +161,7 @@ const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black')) - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) ### Additional Resources diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 679033e0..2d375a88 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -92,6 +92,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 15105a44..d2434cae 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -39,6 +39,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 4e8048ea..7bec916d 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -30,6 +30,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) diff --git a/operators/creation/of.md b/operators/creation/of.md index 057d5b72..913cda24 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -43,6 +43,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Type Ahead](../../recipes/type-ahead.md) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index f4f1241c..5470da33 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -62,6 +62,7 @@ source - [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Smart Counter](../../recipes/smartcounter.md) - [Swipe To Refresh](../../recipes/swipe-to-refresh.md) diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 6ec75e04..5b228fac 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -53,6 +53,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Lockscreen](../../recipes/lockscreen.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) ### Additional Resources diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 587f4050..b5888c9b 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -119,6 +119,7 @@ interval(1000) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 34a6829d..54fc186e 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -164,14 +164,15 @@ Resume Timer ### Related Recipes -- [Smart Counter](../../recipes/smartcounter.md) -- [Progress Bar](../../recipes/progressbar.md) +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) -- [Type Ahead](../../recipes/type-ahead.md) -- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) -- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) +- [Progress Bar](../../recipes/progressbar.md) +- [Smart Counter](../../recipes/smartcounter.md) +- [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index f4378130..c2843b39 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -47,6 +47,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) - [Lockscreen](../../recipes/lockscreen.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) diff --git a/recipes/README.md b/recipes/README.md index cb4adc25..14413464 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -13,6 +13,7 @@ Common use-cases and interesting recipes to help learn RxJS. * [HTTP Polling](http-polling.md) * [Lockscreen](lockscreen.md) * [Mine Sweeper Game](mine-sweeper-game.md) +* [Platform Jumper Game](platform-jumper-game.md) * [Progress Bar](progressbar.md) * [Smart Counter](smartcounter.md) * [Space Invaders Game](space-invaders-game.md) diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md new file mode 100644 index 00000000..33985e04 --- /dev/null +++ b/recipes/platform-jumper-game.md @@ -0,0 +1,193 @@ +# Platform Jumper Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Platform Jumper game. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-platform-jumper?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { interval, of, fromEvent, combineLatest } from 'rxjs'; +import { scan, tap, startWith, pluck, switchMap, takeWhile } from 'rxjs/operators'; +import { gameSize } from './constants'; +import { render } from './html-renderer'; +import { Player, Platform } from './interfaces'; +import { updatePlayer, updatePlatforms, initialPlatforms, initialPlayer, handleCollisions, handleKeypresses } from './game'; + +const gameSpeed = 500; + +const platforms$ = interval(gameSpeed) + .pipe( + scan(updatePlatforms, initialPlatforms) + ); + +const keys$ = (initialPlayer: Player) => fromEvent(document, 'keydown') + .pipe( + startWith({ key: '' }), + pluck('key'), + scan( + (plyr: Player, key: string) => handleKeypresses(plyr, key), + initialPlayer + ) + ); + +const player$ = of(initialPlayer()) + .pipe( + switchMap(p => combineLatest(interval(gameSpeed / 4), keys$(p)) + .pipe( + scan<[number, Player], Player>((_, [__, player]) => updatePlayer(player)) + )), + ); + +combineLatest(player$, platforms$) + .pipe( + scan<[Player, Platform[]], [Player, Platform[]]>( + (_, [player, platforms]) => handleCollisions([player, platforms])), + tap(render), + takeWhile(([player, platforms]) => player.lives > 0) + ) + .subscribe() +``` + +#### game.ts +```js +import { Player, Platform } from './interfaces'; +import { gameSize } from './constants'; + +const newPlatform = (x, y): Platform => ({ x, y, scored: false }); +const newPlayer = (x, y, jumpValue, score, lives): Player => + ({ x, y, jumpValue, canJump: false, score: score, lives: lives }); +const startingY = 4; +export const initialPlayer = (): Player => newPlayer(0, startingY, 0, 0, 3); +export const initialPlatforms = [newPlatform(gameSize / 2, startingY)]; + +const random = y => { + let min = Math.ceil(y - 4); + let max = Math.floor(y + 4); + min = min < 0 ? 0 : min; + max = max > gameSize - 1 ? gameSize - 1 : max; + + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +export const updatePlatforms = (platforms: Platform[]): Platform[] => + ( + platforms[platforms.length - 1].x > gameSize / 5 + ? platforms.push(newPlatform(1, random(platforms[platforms.length - 1].y))) + : () => { }, + platforms + .filter(e => e.x < gameSize - 1) + .map(e => newPlatform(e.x + 1, e.y)) + ); + +export const handleKeypresses = (player: Player, key: string) => key === 'ArrowRight' + ? newPlayer(player.x, player.y + (player.y < (gameSize - 1) ? 1 : 0), player.jumpValue, player.score, player.lives) + : key === 'ArrowLeft' + ? newPlayer(player.x, player.y - (player.y > 0 ? 1 : 0), player.jumpValue, player.score, player.lives) + : key === 'ArrowUp' + ? newPlayer(player.x, player.y, (player.x === gameSize - 1 || player.canJump) ? 6 : 0, player.score, player.lives) + : player; + +export const updatePlayer = (player: Player): Player => + ( + player.jumpValue -= player.jumpValue > 0 ? 1 : 0, + player.x -= player.x - 3 > 0 ? player.jumpValue : 0, + player.x += player.x < gameSize - 1 ? 1 : 0, + player.x === gameSize - 1 ? (player.lives -= 1, player.x = 1) : () => { }, + player + ); + +const handleCollidingPlatform = (collidingPlatform: Platform, player: Player) => { + if (player.canJump) { + return; + } + + if (!collidingPlatform) { + player.canJump = false; + return; + } + + if (!collidingPlatform.scored) { + player.score += 1; + } + collidingPlatform.scored = true; + + player.canJump = true; +} + +export const handleCollisions = ([player, platforms]: [Player, Platform[]]): [Player, Platform[]] => + ( + handleCollidingPlatform(platforms.find(p => p.x - 1 === player.x && p.y === player.y), player), + player.x = player.canJump + ? (collidingPlatforms => + collidingPlatforms.length + ? (platform => platform.x - 1)(collidingPlatforms[collidingPlatforms.length - 1]) + : player.x) + (platforms.filter(p => p.y === player.y && p.x >= player.x)) + : (player.x), + [player, platforms] + ); +``` + +#### interfaces.ts +```js +export interface Player { + x: number; + y: number; + jumpValue: number; + canJump: boolean; + score: number; + lives: number; +} + +export interface Platform { + x: number; + y: number; + scored: boolean; +} +``` + +#### constants.ts +```js +export const gameSize = 20; +``` + +#### html-renderer.ts +```js +import { gameSize } from './constants'; +import { Player, Platform } from './interfaces'; + +export const render = ([player, platforms]: [Player, Platform[]]) => { + document.body.innerHTML = `Lives: ${player.lives} Score: ${player.score}
`; + + const game = Array(gameSize).fill(0).map(_ => Array(gameSize).fill(0)); + game[player.x][player.y] = '*'; + platforms.forEach(p => game[p.x][p.y] = '_'); + + game.forEach(r => { + r.forEach(c => document.body.innerHTML += c === 0 ? '...' : c); + document.body.innerHTML += '
'; + }); +} +``` + +### Operators Used + +- [combineLatest](../operators/combination/combinelatest.md) +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [of](../operators/creation/of.md) +- [pluck](../operators/transformation/pluck.md) +- [scan](../operators/transformation/scan.md) +- [startWith](../operators/combination/startwith.md) +- [switchMap](../operators/transformation/switchmap.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) From 07e3ebcb663d07c697b78dbfc6441be8336ad3d6 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sun, 31 Mar 2019 13:43:04 -0400 Subject: [PATCH 072/256] chore(banner): update banner references --- README.md | 2 +- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/topromise.md | 2 +- recipes/alphabet-invasion-game.md | 2 +- recipes/catch-the-dot-game.md | 2 +- recipes/click-ninja-game.md | 2 +- recipes/flappy-bird-game.md | 2 +- recipes/gameloop.md | 2 +- recipes/horizontal-scroll-indicator.md | 2 +- recipes/http-polling.md | 2 +- recipes/lockscreen.md | 2 +- recipes/mine-sweeper-game.md | 2 +- recipes/platform-jumper-game.md | 2 +- recipes/progressbar.md | 2 +- recipes/smartcounter.md | 2 +- recipes/space-invaders-game.md | 2 +- recipes/swipe-to-refresh.md | 2 +- recipes/tank-battle-game.md | 2 +- recipes/type-ahead.md | 2 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 102 files changed, 102 insertions(+), 102 deletions(-) diff --git a/README.md b/README.md index b37250bd..d82c6a58 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -
+
## Content diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index ab84ac82..294f0421 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -
+
### Examples diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 7fb15085..7f6242b2 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -33,7 +33,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -
+
### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 754abb06..a30608a7 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -16,7 +16,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index d2aaa790..53107a10 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,7 +15,7 @@ a single operator instead! --- -
+
### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 951911cb..c311d74e 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -35,7 +35,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -
+
### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 062e0c9b..392c3932 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 6f8d0698..a41aa50c 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,7 +11,7 @@ single operator instead! --- -
+
### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 698ca37e..32eee252 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,7 +4,7 @@ ## Emit the previous and current values as an array. -
+
### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index 4b96dc97..c69b3bcb 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,7 +4,7 @@ ## The observable to emit first is used. -
+
### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 2d375a88..ae7b40cf 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,7 +12,7 @@ can also start with an initial value! --- -
+
### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index 0a0a5779..36224b1a 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,7 +11,7 @@ emits, try [combinelatest](combinelatest.md)! --- -
+
### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index b4ee7936..1cc67780 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,7 +12,7 @@ source! --- -
+
### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index ce050287..8a75a2bb 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -
+
### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index c73b6a4f..468c4df3 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -
+
### Examples diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 2a9b4000..61f21717 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Decides at subscription time which Observable will actually be subscribed. -
+
### Examples diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index f9ac566b..894d9026 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares all values of two observables in sequence using an optional comparor function and returns an observable of a single boolean value representing whether or not the two sequences are equal. -
+
### Examples diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index a2a827f3..d7e32cbc 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -5,7 +5,7 @@ ## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. -
+
### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index 7e81cc0d..b779dfcc 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+
### Examples diff --git a/operators/creation/defer.md b/operators/creation/defer.md index ddd0a3ac..aa81aad2 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+
### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index 4e0f14b6..d635d437 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -
+
### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index ee49f5c7..addb4a91 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -16,7 +16,7 @@ characters! --- -
+
### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index d2434cae..7c4e10a0 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -
+
### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 7bec916d..74720c20 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -
+
### Examples diff --git a/operators/creation/range.md b/operators/creation/range.md index 3a514619..40ae7c8f 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -
+
### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 73dae9ce..fd0a3955 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -
+
### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index d41a7fb9..d349b78c 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -
+
### Examples diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 390d2330..7ca822a7 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 3b7c9ad9..aabc9ed2 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -14,7 +14,7 @@ --- -
+
### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index ceeed4bd..32b1b576 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -
+
### Examples diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 4c5b96ba..542eb5fa 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index b6c7b3ce..3608aba2 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -11,7 +11,7 @@ of user input must be controlled! --- -
+
### Examples diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index a482a332..418d0d28 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -11,7 +11,7 @@ must match! --- -
+
### Examples diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 6e5b360e..c72b05ed 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -11,7 +11,7 @@ out [takeWhile](takewhile.md)! --- -
+
### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 9b9016ce..58729986 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 419eb3f2..aded3595 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -
+
### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index c15c7317..d58eb338 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index aefcec9c..dd0c35de 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -
+
### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 76ce2281..09531f54 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -
+
### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index b02cd6c9..d73f2ab1 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -
+
### Examples diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 8d7eb07b..600c187a 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided observable emits. -
+
### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index b9b6e16d..48f74221 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -
+
### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index c7d9cbf7..99eded7f 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -25,7 +25,7 @@ number of emissions while `skip` will skip the first _n_ number of emissions. --- -
+
### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index b7a7271a..557b27b5 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 5470da33..cee76077 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -4,7 +4,7 @@ ## Emit values until provided expression is false. -
+
### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 8d50bdac..2451eb04 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -
+
### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index c6de2ec1..9d6a0b11 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit latest value when specified duration has passed. -
+
### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 7a69389f..b2c32255 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -
+
### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 0db6f26a..50009bbb 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -
+
### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index a8af5930..e405a5c7 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index e380a5c9..000138e8 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -
+
### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index e2715807..de635838 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,7 +4,7 @@ ## Collect output values until provided observable emits, emit as array. -
+
### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 80a87127..73a4c3c4 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,7 +4,7 @@ ## Collect emitted values until provided number is fulfilled, emit as array. -
+
### Examples diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 7824a91d..66568d31 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -
+
### Examples diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 0a9351d2..400a3a62 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -
+
### Examples diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index dc5cd62d..d96f3fb1 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,7 +4,7 @@ ## Map values to inner observable, subscribe and emit in order. -
+
### Examples diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 77cd8e7d..aece65c9 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -
+
### Examples diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index ea7e4042..4b4a643e 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,7 +4,7 @@ ## Map to inner observable, ignore other values until that observable completes. -
+
### Examples diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 173d1027..bcfd2952 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -
+
### Examples diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index 239e1358..4d5e0df1 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -
+
### Examples diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 01edee59..ceb7386c 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -4,7 +4,7 @@ ## Apply projection with each value from source. -
+
### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 7f7faf9b..ca0b9260 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -4,7 +4,7 @@ ## Map emissions to constant value. -
+
### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index a37819c4..190ffb7b 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 4](#example-4-mergemap-with-concurrent-value). -
+
### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index 9b009b03..0ce84c61 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -
+
### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 5b228fac..ae6ea3ad 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -4,7 +4,7 @@ ## Select properties to emit. -
+
### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 1db82e63..8d0afe34 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ :bulb: If you need the current accumulated value on each emission, try [scan](scan.md)! -
+
### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index b5888c9b..f59c7514 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -11,7 +11,7 @@ scan! --- -
+
### Examples diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 54fc186e..5494f664 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -
+
### Examples diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 0e89b792..a23a6abc 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -
+
### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index e4c61cd5..6f2d187d 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -
+
### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 3dab5969..36c0d7a7 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -
+
### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 3f8d785f..e734c611 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -
+
### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 1ed77ae9..a8941e13 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -
+
### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index eb7eff71..987ab8a1 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -
+
### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index f328a9db..7aed1bec 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -
+
### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index 6cfc6ec1..ea57e50b 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,7 @@ ## Turn notification objects into notification values. -
+
### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index c2843b39..dcd54780 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index a9739760..a71dd994 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 484ef115..b6892695 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 18bdc68b..68170318 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -6,7 +6,7 @@ ## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions -
+
### Examples diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 75fe4b01..32f2bcb0 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -
+
### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 9b2b01fc..5cb31bfa 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index a9f754dc..369b5791 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Alphabet Invasion Game. -
+
### Example Code diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index 02f5523e..f173687c 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of scan operator for state management in simple game -
+
### Example Code diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md index 0be18c9b..b6479936 100644 --- a/recipes/click-ninja-game.md +++ b/recipes/click-ninja-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of time interval operator in a simple game -
+
### Example Code diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md index db4a6344..94a5f167 100644 --- a/recipes/flappy-bird-game.md +++ b/recipes/flappy-bird-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Flappy Bird like game. -
+
### Example Code diff --git a/recipes/gameloop.md b/recipes/gameloop.md index 5c1073d5..037197b3 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -
+
### Example Code diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md index beeb22c0..6c043303 100644 --- a/recipes/horizontal-scroll-indicator.md +++ b/recipes/horizontal-scroll-indicator.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of a horizontal scroll indicator. -
+
### Example Code diff --git a/recipes/http-polling.md b/recipes/http-polling.md index b3ec08a6..ddd481c0 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,6 +1,6 @@ # HTTP Polling -
+
### Examples diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index f929f7d8..01fcecb3 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of lockscreen functionality (known for example from smartphones). -
+
### Example Code diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md index 023fcfeb..65782732 100644 --- a/recipes/mine-sweeper-game.md +++ b/recipes/mine-sweeper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Mine Sweeper Game. -
+
### Example Code diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md index 33985e04..b2d5deac 100644 --- a/recipes/platform-jumper-game.md +++ b/recipes/platform-jumper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Platform Jumper game. -
+
### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index 4416eb79..e9709d9d 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -
+
### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 9c25ea5b..9106389d 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -
+
#### Vanilla JS diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index 60922017..ff5533d1 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Space Invaders Game. -
+
### Example Code diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md index 80d9348c..b682cd73 100644 --- a/recipes/swipe-to-refresh.md +++ b/recipes/swipe-to-refresh.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. -
+
### Example Code diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md index d96d9033..b1cc126f 100644 --- a/recipes/tank-battle-game.md +++ b/recipes/tank-battle-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Tank Battle like game. -
+
### Example Code diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index a10f3cda..797e43e4 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of type ahead client side code. -
+
### Example Code diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index d9e8e7fb..3f95a93b 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -2,7 +2,7 @@ ## A Subject that only emits its last value upon completion -
+
### Examples diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index b20aeb57..e03c1701 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -2,7 +2,7 @@ ## A Subject that requires an initial value and emits its current value to new subscribers -
+
### Examples diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 83389b49..57025173 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -2,7 +2,7 @@ ## A Subject that "replays" or emits old values to new subscribers -
+
### Examples diff --git a/subjects/subject.md b/subjects/subject.md index 84b26491..0a721dfc 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -2,7 +2,7 @@ ## A special type of Observable which shares a single execution path among observers -
+
### Examples From 08b3460dd9a08a7628d63ff8b1b0830bfbfa33a3 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 1 Apr 2019 12:22:37 -0400 Subject: [PATCH 073/256] chore(banner): update banner location --- README.md | 2 +- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/topromise.md | 2 +- recipes/alphabet-invasion-game.md | 2 +- recipes/catch-the-dot-game.md | 2 +- recipes/click-ninja-game.md | 2 +- recipes/flappy-bird-game.md | 2 +- recipes/gameloop.md | 2 +- recipes/horizontal-scroll-indicator.md | 2 +- recipes/http-polling.md | 2 +- recipes/lockscreen.md | 2 +- recipes/mine-sweeper-game.md | 2 +- recipes/platform-jumper-game.md | 2 +- recipes/progressbar.md | 2 +- recipes/smartcounter.md | 2 +- recipes/space-invaders-game.md | 2 +- recipes/swipe-to-refresh.md | 2 +- recipes/tank-battle-game.md | 2 +- recipes/type-ahead.md | 2 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 102 files changed, 102 insertions(+), 102 deletions(-) diff --git a/README.md b/README.md index d82c6a58..9feea888 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -
+
## Content diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 294f0421..00e8e286 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -
+
### Examples diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 7f6242b2..36e99d72 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -33,7 +33,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -
+
### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index a30608a7..a5371c07 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -16,7 +16,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 53107a10..64445256 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,7 +15,7 @@ a single operator instead! --- -
+
### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index c311d74e..4cdd7d75 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -35,7 +35,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -
+
### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 392c3932..89a3ae11 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index a41aa50c..b385b9d0 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,7 +11,7 @@ single operator instead! --- -
+
### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 32eee252..b8079580 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,7 +4,7 @@ ## Emit the previous and current values as an array. -
+
### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index c69b3bcb..441cc4b6 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,7 +4,7 @@ ## The observable to emit first is used. -
+
### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index ae7b40cf..1290902d 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,7 +12,7 @@ can also start with an initial value! --- -
+
### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index 36224b1a..de3c0503 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,7 +11,7 @@ emits, try [combinelatest](combinelatest.md)! --- -
+
### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 1cc67780..c4d804eb 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,7 +12,7 @@ source! --- -
+
### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 8a75a2bb..ef3f9236 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -
+
### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 468c4df3..ec34ed03 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -
+
### Examples diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 61f21717..b25762c6 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Decides at subscription time which Observable will actually be subscribed. -
+
### Examples diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 894d9026..9286c424 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares all values of two observables in sequence using an optional comparor function and returns an observable of a single boolean value representing whether or not the two sequences are equal. -
+
### Examples diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index d7e32cbc..5cca888d 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -5,7 +5,7 @@ ## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. -
+
### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index b779dfcc..147d0794 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+
### Examples diff --git a/operators/creation/defer.md b/operators/creation/defer.md index aa81aad2..ddec64d3 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+
### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index d635d437..f9f76c22 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -
+
### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index addb4a91..1d91b1c2 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -16,7 +16,7 @@ characters! --- -
+
### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 7c4e10a0..74b1e936 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -
+
### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 74720c20..6f5cb4aa 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -
+
### Examples diff --git a/operators/creation/range.md b/operators/creation/range.md index 40ae7c8f..8965141b 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -
+
### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index fd0a3955..4d1f5769 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -
+
### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index d349b78c..3b7b5e42 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -
+
### Examples diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 7ca822a7..3b9ae4a3 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index aabc9ed2..ef150e8f 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -14,7 +14,7 @@ --- -
+
### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 32b1b576..2b39b6a4 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -
+
### Examples diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 542eb5fa..d6889913 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 3608aba2..f5686470 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -11,7 +11,7 @@ of user input must be controlled! --- -
+
### Examples diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 418d0d28..62dbc694 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -11,7 +11,7 @@ must match! --- -
+
### Examples diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index c72b05ed..3c697416 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -11,7 +11,7 @@ out [takeWhile](takewhile.md)! --- -
+
### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 58729986..0cdbc8c3 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index aded3595..4cad5f5f 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -
+
### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index d58eb338..0fa192e2 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index dd0c35de..8c03ce47 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -
+
### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 09531f54..7ff04cf8 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -
+
### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index d73f2ab1..d0deb648 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -
+
### Examples diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 600c187a..cb4bb728 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided observable emits. -
+
### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 48f74221..82d0f93d 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -
+
### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 99eded7f..483c4221 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -25,7 +25,7 @@ number of emissions while `skip` will skip the first _n_ number of emissions. --- -
+
### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 557b27b5..b5a9d931 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index cee76077..a3599e4c 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -4,7 +4,7 @@ ## Emit values until provided expression is false. -
+
### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 2451eb04..78b04758 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -
+
### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 9d6a0b11..817039c9 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit latest value when specified duration has passed. -
+
### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index b2c32255..98d5149c 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -
+
### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 50009bbb..a06db094 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -
+
### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index e405a5c7..75a1369a 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 000138e8..44233df7 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -
+
### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index de635838..fe95fade 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,7 +4,7 @@ ## Collect output values until provided observable emits, emit as array. -
+
### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 73a4c3c4..d05aabeb 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,7 +4,7 @@ ## Collect emitted values until provided number is fulfilled, emit as array. -
+
### Examples diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 66568d31..701f1ea6 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -
+
### Examples diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 400a3a62..3a8650f3 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -
+
### Examples diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index d96f3fb1..436bc78c 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,7 +4,7 @@ ## Map values to inner observable, subscribe and emit in order. -
+
### Examples diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index aece65c9..fa86d005 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -
+
### Examples diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 4b4a643e..d2f4e1b4 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,7 +4,7 @@ ## Map to inner observable, ignore other values until that observable completes. -
+
### Examples diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index bcfd2952..69582efe 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -
+
### Examples diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index 4d5e0df1..22fbf796 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -
+
### Examples diff --git a/operators/transformation/map.md b/operators/transformation/map.md index ceb7386c..ed8b5f1a 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -4,7 +4,7 @@ ## Apply projection with each value from source. -
+
### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index ca0b9260..aa74f6a9 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -4,7 +4,7 @@ ## Map emissions to constant value. -
+
### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 190ffb7b..67df1da6 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 4](#example-4-mergemap-with-concurrent-value). -
+
### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index 0ce84c61..bc638ce6 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -
+
### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index ae6ea3ad..dd52fde3 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -4,7 +4,7 @@ ## Select properties to emit. -
+
### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 8d0afe34..e9582201 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ :bulb: If you need the current accumulated value on each emission, try [scan](scan.md)! -
+
### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index f59c7514..c103930b 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -11,7 +11,7 @@ scan! --- -
+
### Examples diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 5494f664..ca7c7654 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -
+
### Examples diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index a23a6abc..04df404f 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -
+
### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index 6f2d187d..b5fe0fa0 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -
+
### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 36c0d7a7..6532476a 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -
+
### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index e734c611..768a98ed 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -
+
### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index a8941e13..3450cba5 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -
+
### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 987ab8a1..afcdf026 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -
+
### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 7aed1bec..349c934f 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -
+
### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index ea57e50b..346c98a9 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,7 @@ ## Turn notification objects into notification values. -
+
### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index dcd54780..500b294f 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index a71dd994..0c92cadb 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index b6892695..1f045566 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 68170318..d2b86cf9 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -6,7 +6,7 @@ ## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions -
+
### Examples diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 32f2bcb0..27a43338 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -
+
### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 5cb31bfa..5dbb7982 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index 369b5791..05b122dc 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Alphabet Invasion Game. -
+
### Example Code diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index f173687c..a5b8eebb 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of scan operator for state management in simple game -
+
### Example Code diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md index b6479936..700b639c 100644 --- a/recipes/click-ninja-game.md +++ b/recipes/click-ninja-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of time interval operator in a simple game -
+
### Example Code diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md index 94a5f167..fe6f4cd6 100644 --- a/recipes/flappy-bird-game.md +++ b/recipes/flappy-bird-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Flappy Bird like game. -
+
### Example Code diff --git a/recipes/gameloop.md b/recipes/gameloop.md index 037197b3..979ccb4e 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -
+
### Example Code diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md index 6c043303..53d36c7b 100644 --- a/recipes/horizontal-scroll-indicator.md +++ b/recipes/horizontal-scroll-indicator.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of a horizontal scroll indicator. -
+
### Example Code diff --git a/recipes/http-polling.md b/recipes/http-polling.md index ddd481c0..d8e2a4e3 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,6 +1,6 @@ # HTTP Polling -
+
### Examples diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index 01fcecb3..591f8b5f 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of lockscreen functionality (known for example from smartphones). -
+
### Example Code diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md index 65782732..44464391 100644 --- a/recipes/mine-sweeper-game.md +++ b/recipes/mine-sweeper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Mine Sweeper Game. -
+
### Example Code diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md index b2d5deac..c933dd76 100644 --- a/recipes/platform-jumper-game.md +++ b/recipes/platform-jumper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Platform Jumper game. -
+
### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index e9709d9d..7a93f57f 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -
+
### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 9106389d..04ae818d 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -
+
#### Vanilla JS diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index ff5533d1..fc6eec8a 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Space Invaders Game. -
+
### Example Code diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md index b682cd73..b5d8e371 100644 --- a/recipes/swipe-to-refresh.md +++ b/recipes/swipe-to-refresh.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. -
+
### Example Code diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md index b1cc126f..cfbbbc7c 100644 --- a/recipes/tank-battle-game.md +++ b/recipes/tank-battle-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Tank Battle like game. -
+
### Example Code diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index 797e43e4..bcae53a5 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of type ahead client side code. -
+
### Example Code diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index 3f95a93b..7bf6f02a 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -2,7 +2,7 @@ ## A Subject that only emits its last value upon completion -
+
### Examples diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index e03c1701..7a65aff4 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -2,7 +2,7 @@ ## A Subject that requires an initial value and emits its current value to new subscribers -
+
### Examples diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 57025173..1ed18744 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -2,7 +2,7 @@ ## A Subject that "replays" or emits old values to new subscribers -
+
### Examples diff --git a/subjects/subject.md b/subjects/subject.md index 0a721dfc..f277b5f0 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -2,7 +2,7 @@ ## A special type of Observable which shares a single execution path among observers -
+
### Examples From b441c2d334528607026b7f5edfbe006da9932c67 Mon Sep 17 00:00:00 2001 From: Sergio Bernal Date: Tue, 2 Apr 2019 16:27:23 +0200 Subject: [PATCH 074/256] chore(readme): add missing pairwise and dematerialize operators --- operators/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/operators/README.md b/operators/README.md index 20788ebf..eb5271f2 100644 --- a/operators/README.md +++ b/operators/README.md @@ -15,6 +15,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [forkJoin](combination/forkjoin.md) - [merge](combination/merge.md) :star: - [mergeAll](combination/mergeall.md) + - [pairwise](combination/pairwise.md) - [race](combination/race.md) - [startWith](combination/startwith.md) :star: - [withLatestFrom](combination/withlatestfrom.md) :star: @@ -94,6 +95,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [do / tap](utility/do.md) :star: - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) + - [dematerialize](utility/dematerialize.md) - [finalize / finally](utility/finalize.md) - [let](utility/let.md) - [repeat](utility/repeat.md) From 021c5648b0c000bb892a4b9b8ca7d43d9492bc68 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Tue, 2 Apr 2019 15:28:12 +0100 Subject: [PATCH 075/256] feat(operators): add groupBy example --- operators/transformation/groupby.md | 30 +++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index 22fbf796..cef88b41 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -42,6 +42,36 @@ const example = source.pipe( const subscribe = example.subscribe(val => console.log(val)); ``` +##### Example 2: Group by into key - values + +( [StackBlitz](https://stackblitz.com/edit/rxjs-groupby-key-vals?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { from, of, zip } from 'rxjs'; +import { groupBy, mergeMap, toArray } from 'rxjs/operators'; + +const people = [ + { name: 'Sue', age: 25 }, + { name: 'Joe', age: 30 }, + { name: 'Frank', age: 25 }, + { name: 'Sarah', age: 35 } +]; + +from(people).pipe( + groupBy(person => person.age, p => p.name), + mergeMap(group => zip(of(group.key), group.pipe(toArray()))) +).subscribe(console.log); + +/* + output: + [25, ["Sue", "Frank"]] + [30, ["Joe"]] + [35, ["Sarah"]] +*/ +``` + + ### Additional Resources * [groupBy](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-groupBy) From 786ca66254c86e393312f0dd9616a3118ac191ce Mon Sep 17 00:00:00 2001 From: Kwinten Pisman Date: Tue, 2 Apr 2019 15:31:02 +0100 Subject: [PATCH 076/256] feat(operators): add additional resource link to various operators --- operators/combination/combinelatest.md | 2 ++ operators/combination/merge.md | 2 ++ operators/creation/interval.md | 2 ++ operators/creation/of.md | 2 ++ operators/creation/timer.md | 2 ++ operators/filtering/debouncetime.md | 2 ++ operators/filtering/filter.md | 2 ++ operators/filtering/take.md | 2 ++ operators/filtering/takeuntil.md | 2 ++ operators/transformation/concatmap.md | 2 ++ operators/transformation/map.md | 2 ++ operators/transformation/mergemap.md | 2 ++ operators/transformation/reduce.md | 2 ++ operators/transformation/scan.md | 2 ++ operators/transformation/switchmap.md | 2 ++ operators/utility/do.md | 2 ++ 16 files changed, 32 insertions(+) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 36e99d72..90e74361 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -172,6 +172,8 @@ const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black')) :video_camera: :dollar: - John Linquist - [Combination operator: combineLatest](https://egghead.io/lessons/rxjs-combination-operator-combinelatest?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Build your own combineLatest operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=combineLatest#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 89a3ae11..d87d8c9a 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -87,6 +87,8 @@ const subscribe = example.subscribe(val => console.log(val)); :video_camera: :dollar: - André Staltz - [Combination operator: merge](https://egghead.io/lessons/rxjs-combination-operator-merge?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Build your own merge operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=merge#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 6f5cb4aa..2778363b 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -40,6 +40,8 @@ const subscribe = source.subscribe(val => console.log(val)); :newspaper: - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz +- [Build your own interval operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=interval#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/creation/of.md b/operators/creation/of.md index 913cda24..55b5cef3 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -53,6 +53,8 @@ const subscribe = source.subscribe(val => console.log(val)); :newspaper: - Official docs - [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz +- [Build your own of operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=of#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/creation/timer.md b/operators/creation/timer.md index 3b7b5e42..5b23bfd2 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -56,6 +56,8 @@ const subscribe = source.subscribe(val => console.log(val)); :newspaper: - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz +- [Build your own timer operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=timer#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index f5686470..ea4fa50c 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -53,6 +53,8 @@ const subscribe = debouncedInput.subscribe(val => { - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) +- [Build your own debounceTime operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=debounceTime#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 3c697416..185ec401 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -97,6 +97,8 @@ const subscribe = example.subscribe(val => :video_camera: :dollar: - John Linquist - [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Build your own filter operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=filter#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 483c4221..e18ce265 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -103,6 +103,8 @@ const subscribe = oneClickEvent.subscribe(); :newspaper: - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Build your own take operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=take#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index b5a9d931..be467fa6 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -121,6 +121,8 @@ mousedown$.pipe( Angular in Depth * [Stopping a stream with takeUntil](https://egghead.io/lessons/rxjs-stopping-a-stream-with-takeuntil?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist +- [Build your own takeUntil operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=takeUntil#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 436bc78c..feedc9a7 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -99,6 +99,8 @@ const subscribe = example.subscribe(val => :newspaper: - Official docs * [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz +* [Build your own concatMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=concatMap#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/transformation/map.md b/operators/transformation/map.md index ed8b5f1a..0d897445 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -71,6 +71,8 @@ const subscribe = example.subscribe(val => console.log(val)); :video_camera: - Ben Lesh * [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Build your own map operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=map#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 67df1da6..2c380260 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -173,6 +173,8 @@ const subscribe = example.subscribe(val => console.log(val)); :video_camera: :dollar: - André Staltz - [Use RxJS mergeMap for fine grain custom behavior](https://egghead.io/lessons/rxjs-use-rxjs-mergemap-for-fine-grain-custom-behavior?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz +- [Build your own mergeMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=mergeMap#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index e9582201..9926cec8 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -38,6 +38,8 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); :newspaper: - Official docs - [Scan() vs reduce() | RxJS TUTORIAL](https://www.youtube.com/watch?v=myEeo2rZc3g) :video_camera: - Academind +- [Build your own reduce operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=reduce#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index c103930b..8efe9994 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -135,6 +135,8 @@ interval(1000) :video_camera: :dollar: - John Linquist - [Transformation operator: scan](https://egghead.io/lessons/rxjs-transformation-operator-scan?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Build your own scan operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=scan#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index ca7c7654..236e1b61 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -186,6 +186,8 @@ Resume Timer :video_camera: :dollar: - André Staltz - [Use switchMap as a safe default to flatten observables in RxJS](https://egghead.io/lessons/rxjs-use-switchmap-as-a-safe-default-to-flatten-observables-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz +- [Build your own switchMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=switchMap#app) + :video_camera: - Kwinten Pisman --- diff --git a/operators/utility/do.md b/operators/utility/do.md index 500b294f..096a7bba 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -61,6 +61,8 @@ const subscribe = example.subscribe(val => console.log(val)); :video_camera: :dollar: - John Linquist - [Utility operator: do](https://egghead.io/lessons/rxjs-utility-operator-do?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz +- [Build your own tap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=tap#app) + :video_camera: - Kwinten Pisman --- From bdd9178838e3ee446792bf910c5c73a741dbb4fc Mon Sep 17 00:00:00 2001 From: adamlubek Date: Thu, 4 Apr 2019 14:42:01 +0100 Subject: [PATCH 077/256] feat(recipes): add breakout game recipe * Create breakout-game.md * Update README.md * Update README.md * Update SUMMARY.md * Update combinelatest.md * Update fromevent.md * Update interval.md * Update mergemap.md * Update of.md * Update pluck.md * Update scan.md * Update startwith.md * Update takewhile.md * Update do.md * Update toarray.md --- README.md | 1 + SUMMARY.md | 1 + operators/combination/combinelatest.md | 1 + operators/combination/startwith.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/interval.md | 1 + operators/creation/of.md | 1 + operators/filtering/takewhile.md | 1 + operators/transformation/mergemap.md | 1 + operators/transformation/pluck.md | 1 + operators/transformation/scan.md | 1 + operators/transformation/toarray.md | 1 + operators/utility/do.md | 1 + recipes/README.md | 1 + recipes/breakout-game.md | 157 +++++++++++++++++++++++++ 15 files changed, 171 insertions(+) create mode 100644 recipes/breakout-game.md diff --git a/README.md b/README.md index 9feea888..f214a4ac 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,7 @@ Observables. Recipes for common use-cases and interesting solutions with RxJS. - [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) +- [Breakout Game](/recipes/breakout-game.md) - [Catch The Dot Game](/recipes/catch-the-dot-game.md) - [Click Ninja Game](/recipes/click-ninja-game.md) - [Flappy Bird Game](/recipes/flappy-bird-game.md) diff --git a/SUMMARY.md b/SUMMARY.md index f1264a41..081168ae 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -105,6 +105,7 @@ - [Subject](/subjects/subject.md) - [Recipes](/recipes/README.md) - [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) + - [Breakout Game](/recipes/breakout-game.md) - [Catch The Dot Game](/recipes/catch-the-dot-game.md) - [Click Ninja Game](/recipes/click-ninja-game.md) - [Flappy Bird Game](/recipes/flappy-bird-game.md) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 90e74361..ff4b85bc 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -160,6 +160,7 @@ const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black')) ### Related Recipes - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Breakout Game](../../recipes/breakout-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 1290902d..46365e09 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -92,6 +92,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Breakout Game](../../recipes/breakout-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 74b1e936..edc01244 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -31,6 +31,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Breakout Game](../../recipes/breakout-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 2778363b..5d4c34ee 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -28,6 +28,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Breakout Game](../../recipes/breakout-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) diff --git a/operators/creation/of.md b/operators/creation/of.md index 55b5cef3..60b5974d 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -42,6 +42,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes +- [Breakout Game](../../recipes/breakout-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index a3599e4c..9e0a8e48 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -58,6 +58,7 @@ source ### Related Recipes - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Breakout Game](../../recipes/breakout-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 2c380260..028d574b 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -158,6 +158,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes +- [Breakout Game](../../recipes/breakout-game.md) - [HTTP Polling](../../recipes/http-polling.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index dd52fde3..02f306dc 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -51,6 +51,7 @@ const subscribe = example.subscribe(val => console.log(val)); ``` ### Related Recipes +- [Breakout Game](../../recipes/breakout-game.md) - [Lockscreen](../../recipes/lockscreen.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 8efe9994..cdd5b38d 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -116,6 +116,7 @@ interval(1000) ### Related Recipes - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Breakout Game](../../recipes/breakout-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 04df404f..d2793514 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -31,6 +31,7 @@ interval(100) ### Related Recipes +- [Breakout Game](../../recipes/breakout-game.md) - [Lockscreen](../../recipes/lockscreen.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index 096a7bba..f337ceb6 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -41,6 +41,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes +- [Breakout Game](../../recipes/breakout-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) diff --git a/recipes/README.md b/recipes/README.md index 14413464..6e0ac0b6 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -5,6 +5,7 @@ Common use-cases and interesting recipes to help learn RxJS. ### Contents * [Alphabet Invasion Game](alphabet-invasion-game.md) +* [Breakout Game](breakout-game.md) * [Catch The Dot Game](catch-the-dot-game.md) * [Click Ninja Game](click-ninja-game.md) * [Flappy Bird Game](flappy-bird-game.md) diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md new file mode 100644 index 00000000..d3b64033 --- /dev/null +++ b/recipes/breakout-game.md @@ -0,0 +1,157 @@ +# Breakout Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Breakout game. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-breakout?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { fromEvent, of, interval, combineLatest, generate, noop } from 'rxjs'; +import { map, mergeMap, pluck, startWith, scan, toArray, takeWhile, tap } from 'rxjs/operators'; +import { gameSize } from './constants'; +import { Player, Ball, GameObject } from './interfaces'; +import { render } from './html-renderer'; + +const createGameObject = (x, y) => ({ x, y }); + +const player$ = combineLatest( + of({ ...createGameObject(gameSize - 2, (gameSize / 2) - 1), score: 0, lives: 3 }), + fromEvent(document, 'keyup').pipe(startWith({ code: '' }), pluck('code')) +).pipe( + map(([player, key]) => ( + key === 'ArrowLeft' + ? player.y -= 1 + : key === 'ArrowRight' + ? player.y += 1 + : noop + , player) + ) +) + +const ball$ = combineLatest( + of({ ...createGameObject(gameSize / 2, (gameSize - 3)), dirX: 1, dirY: 1 }), + interval(150) +).pipe( + map(([ball, _]: [Ball, number]) => ( + ball.dirX *= ball.x > 0 ? 1 : -1, + ball.dirY *= (ball.y > 0 && ball.y < gameSize - 1) ? 1 : -1, + ball.x += 1 * ball.dirX, + ball.y -= 1 * ball.dirY, + ball) + ) +) + +const bricks$ = generate(1, x => x < 8, x => x + 1) + .pipe( + mergeMap(r => generate(r % 2 === 0 ? 1 : 0, x => x < gameSize, x => x + 2) + .pipe(map(c => createGameObject(r, c))) + ), + toArray() + ) + +const processGameCollisions = (_, [player, ball, bricks]: [Player, Ball, GameObject[]]) + : [Player, Ball, GameObject[]] => ( + (collidingBrickIndex => collidingBrickIndex > -1 + ? (bricks.splice(collidingBrickIndex, 1), ball.dirX *= -1, player.score++) + : noop + )(bricks.findIndex(e => e.x === ball.x && e.y === ball.y)), + ball.dirX *= player.x === ball.x && player.y === ball.y ? -1 : 1, + ball.x > player.x ? (player.lives-- , ball.x = (gameSize / 2) - 3) : noop, + [player, ball, bricks] + ) + +combineLatest(player$, ball$, bricks$) + .pipe( + scan<[Player, Ball, GameObject[]], [Player, Ball, GameObject[]]>(processGameCollisions), + tap(render), + takeWhile(([player]: [Player, Ball, GameObject[]]) => player.lives > 0) + ).subscribe() +``` + +#### interfaces.ts +```js +export interface GameObject { + x: number; + y: number; +} +export interface Player extends GameObject { + score: number; + lives: number; +} +export interface Ball extends GameObject { + dirX: number; + dirY: number; +} +``` + +#### constants.ts +```js +export const gameSize = 20; +``` + +#### html-renderer.ts +```js +import { gameSize } from './constants'; +import { Player, Ball, GameObject } from './interfaces'; + +const empty = 0; +const plyer = 1; +const bll = 2; +const brick = 3; + +const createElem = col => { + const elem = document.createElement('div'); + elem.classList.add('board'); + elem.style.display = 'inline-block'; + elem.style.marginLeft = '10px'; + elem.style.height = '6px'; + elem.style.width = '6px'; + elem.style['background-color'] = + col === empty + ? 'white' + : (col === plyer + ? 'cornflowerblue' + : col === bll + ? 'gray' + : 'silver'); + elem.style['border-radius'] = col === bll ? '100%' : '0%'; + return elem; +} + +export const render = ([player, ball, bricks]: [Player, Ball, GameObject[]]) => { + const game = Array(gameSize).fill(0).map(e => Array(gameSize).fill(0)); + game[player.x][player.y] = plyer; + game[ball.x][ball.y] = bll; + bricks.forEach(b => game[b.x][b.y] = brick); + + document.body.innerHTML = `Score: ${player.score} Lives: ${player.lives}
`; + game.forEach(r => { + const rowContainer = document.createElement('div'); + r.forEach(c => rowContainer.appendChild(createElem(c))); + document.body.appendChild(rowContainer); + }); +}; +``` + +### Operators Used + +- [combineLatest](../operators/combination/combinelatest.md) +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [mergeMap](../operators/transformation/mergemap.md) +- [of](../operators/creation/of.md) +- [pluck](../operators/transformation/pluck.md) +- [scan](../operators/transformation/scan.md) +- [startWith](../operators/combination/startwith.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) +- [toArray](../operators/transformation/toarray.md) From df6062ce71630a06c4c6a96ddce12e0c67aab4df Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 4 Apr 2019 10:02:57 -0400 Subject: [PATCH 078/256] chore(readme): add additional introduction resource --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index f214a4ac..3ce81b11 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,7 @@ experience! Official Docs - [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - André Staltz +- [RxJS: Observables, Observers and Operators Introduction](https://ultimatecourses.com/blog/rxjs-observables-observers-operators) - Todd Motto #### Videos From 9cf6a8a76997b0c68c11d4a59ba7052b7a545f9e Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 4 Apr 2019 16:16:15 -0400 Subject: [PATCH 079/256] style(examples): remove text shadow from code samples --- styles/website.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/website.css b/styles/website.css index 9369d46f..24d562d4 100644 --- a/styles/website.css +++ b/styles/website.css @@ -2,3 +2,8 @@ text-align: center; padding: 10px 0; } + +code[class*='language-'], +pre[class*='language-'] { + text-shadow: none !important; +} From 684d761c6222c0c478ad9380075aad0aca06c57c Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 5 Apr 2019 13:55:16 +0100 Subject: [PATCH 080/256] feat(operators): add generate operator docs * Create generate.md * Update README.md * Update README.md * Update complete.md * Update SUMMARY.md * Update breakout-game.md * Update generate.md --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/creation/README.md | 1 + operators/creation/generate.md | 81 ++++++++++++++++++++++++++++++++++ recipes/breakout-game.md | 1 + 6 files changed, 86 insertions(+) create mode 100644 operators/creation/generate.md diff --git a/SUMMARY.md b/SUMMARY.md index 081168ae..94e2a3eb 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -27,6 +27,7 @@ - [empty](/operators/creation/empty.md) - [from](/operators/creation/from.md) - [fromEvent](/operators/creation/fromevent.md) + - [generate](/operators/creation/generate.md) - [interval](/operators/creation/interval.md) - [of](/operators/creation/of.md) - [range](/operators/creation/range.md) diff --git a/operators/README.md b/operators/README.md index eb5271f2..38777aa8 100644 --- a/operators/README.md +++ b/operators/README.md @@ -32,6 +32,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [empty](creation/empty.md) - [from](creation/from.md) :star: - [fromEvent](creation/fromevent.md) + - [generate](creation/generate.md) - [interval](creation/interval.md) - [of](creation/of.md) :star: - [range](creation/range.md) diff --git a/operators/complete.md b/operators/complete.md index a321c91d..5b14c350 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -41,6 +41,7 @@ _[Prefer a split by operator type?](README.md)_ - [forkJoin](combination/forkjoin.md) - [from](creation/from.md) :star: - [fromEvent](creation/fromevent.md) +- [generate](creation/generate.md) - [groupBy](transformation/groupby.md) - [iif](conditional/iif.md) - [ignoreElements](filtering/ignoreelements.md) diff --git a/operators/creation/README.md b/operators/creation/README.md index 1975355f..108f700f 100644 --- a/operators/creation/README.md +++ b/operators/creation/README.md @@ -12,6 +12,7 @@ generic to specific use-cases you are free, and encouraged, to turn - [empty](empty.md) - [from](from.md) :star: - [fromEvent](fromevent.md) +- [generate](generate.md) - [interval](interval.md) - [of](of.md) :star: - [range](range.md) diff --git a/operators/creation/generate.md b/operators/creation/generate.md new file mode 100644 index 00000000..f9292129 --- /dev/null +++ b/operators/creation/generate.md @@ -0,0 +1,81 @@ +# generate + +#### signature: `generate(initialStateOrOptions: S | GenerateOptions, condition?: ConditionFunc, iterate?: IterateFunc, resultSelectorOrObservable?: (ResultFunc) | SchedulerLike, scheduler?: SchedulerLike): Observable` + +## Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages. + +
+ +### Examples + +##### Example 1: Generate + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-generate?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { generate } from 'rxjs'; + +generate( + 2, + x => x <= 8, + x => x + 3 +).subscribe(console.log); + +/* +OUTPUT: +2 +5 +8 +*/ + +``` + +##### Example 2: Generate with result selector + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-generate-result-selector?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { generate } from 'rxjs'; + +generate( + 2, + x => x <= 38, + x => x + 3, + x => '.'.repeat(x) +).subscribe(console.log); + +/* +OUTPUT: +.. +..... +........ +........... +.............. +................. +.................... +....................... +.......................... +............................. +................................ +................................... +...................................... +*/ +``` + +### Related Recipes + +- [Breakout Game](../../recipes/breakout-game.md) + +### Additional Resources + +- [generate](https://rxjs-dev.firebaseapp.com/api/index/function/generate) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/generate.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/generate.ts) diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md index d3b64033..87a042e8 100644 --- a/recipes/breakout-game.md +++ b/recipes/breakout-game.md @@ -146,6 +146,7 @@ export const render = ([player, ball, bricks]: [Player, Ball, GameObject[]]) => - [combineLatest](../operators/combination/combinelatest.md) - [fromEvent](../operators/creation/fromevent.md) +- [generate](../operators/creation/generate.md) - [interval](../operators/creation/interval.md) - [mergeMap](../operators/transformation/mergemap.md) - [of](../operators/creation/of.md) From 7fdeba17fc115ad86f69d4c7ed1202de351a4b87 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 9 Apr 2019 14:44:23 -0400 Subject: [PATCH 081/256] feat(article): add rxjs primer article * feat(article): add rxjs introduction article * chore(readme): fix broken link * chore(readme): small wording updates * Update concepts/rxjs-primer.md Co-Authored-By: btroncone * Update concepts/rxjs-primer.md Co-Authored-By: btroncone * style(article): add link to operator tree --- README.md | 21 +- SUMMARY.md | 2 + concepts/README.md | 6 +- concepts/rxjs-primer.md | 521 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 542 insertions(+), 8 deletions(-) create mode 100644 concepts/rxjs-primer.md diff --git a/README.md b/README.md index 3ce81b11..cb310896 100644 --- a/README.md +++ b/README.md @@ -30,15 +30,20 @@ points. Learning Rx may be difficult but it is certainly worth the effort!
+### Brand New to RxJS? + +Start getting familiar with all the key concepts needed to be productive with +our [RxJS Primer](./concepts/rxjs-primer.md)! + ## Content #### Operators Operators are the horse-power behind observables, providing an elegant, declarative solution to complex asynchronous tasks. This section contains all -[RxJS operators](/operators/README.md), included with clear, executable examples. Links -to additional resources and recipes for each operator are also provided, when -applicable. +[RxJS operators](/operators/README.md), included with clear, executable +examples. Links to additional resources and recipes for each operator are also +provided, when applicable. ##### Operator Categories @@ -57,7 +62,8 @@ applicable. #### Understanding Subjects -A Subject is a special type of Observable which shares a single execution path among observers. +A Subject is a special type of Observable which shares a single execution path +among observers. - [Overview](/subjects/README.md) - [AsyncSubject](/subjects/asyncsubject.md) @@ -72,6 +78,7 @@ easy for much of RxJS to feel like 'magic'. This section helps solidify the major concepts needed to feel comfortable with reactive programming and Observables. +- [RxJS Primer](/concepts/rxjs-primer.md) - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) - [Time based operators comparison](/concepts/time-based-operators-comparison.md) - [Understanding Operator Imports](/concepts/operator-imports.md) @@ -110,7 +117,8 @@ experience! Official Docs - [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - André Staltz -- [RxJS: Observables, Observers and Operators Introduction](https://ultimatecourses.com/blog/rxjs-observables-observers-operators) - Todd Motto +- [RxJS: Observables, Observers and Operators Introduction](https://ultimatecourses.com/blog/rxjs-observables-observers-operators) - + Todd Motto #### Videos @@ -139,7 +147,8 @@ experience! Misha Moroshko - [Reactive.how - Animated cards to learn Reactive Programming](http://reactive.how) - Cédric Soulas -- [Rx Visualization - Visualizes programming with RxJS](https://fingerpich.github.io/rx-visualization/) - Mojtaba Zarei +- [Rx Visualization - Visualizes programming with RxJS](https://fingerpich.github.io/rx-visualization/) - + Mojtaba Zarei _Interested in RxJS 4? Check out [Denis Stoyanov's](https://github.com/xgrommx) excellent [eBook](https://xgrommx.github.io/rx-book/)!_ diff --git a/SUMMARY.md b/SUMMARY.md index 94e2a3eb..3fe0e4d3 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -1,6 +1,7 @@ # Summary ### Learn RxJS + - [Operators](/operators/README.md) - [Combination](/operators/combination/README.md) - [combineAll](/operators/combination/combineall.md) @@ -123,6 +124,7 @@ - [Tank Battle Game](/recipes/tank-battle-game.md) - [Type Ahead](/recipes/type-ahead.md) - [Concepts](/concepts/README.md) + - [RxJS Primer](/concepts/rxjs-primer.md) - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) - [Time based operators comparison](/concepts/time-based-operators-comparison.md) - [Understanding Operator Imports](/concepts/operator-imports.md) diff --git a/concepts/README.md b/concepts/README.md index c3627632..5dfd3ac7 100644 --- a/concepts/README.md +++ b/concepts/README.md @@ -4,5 +4,7 @@ Short explanations of common RxJS scenarios and use-cases. ### Contents -* [RxJS v5 -> v6 Upgrade](rxjs5-6.md) -* [Understanding Operator Imports](operator-imports.md) +- [RxJS Primer](rxjs-primer.md) +- [RxJS v5 -> v6 Upgrade](rxjs5-6.md) +- [Time Based Operator Comparison](time-based-operator-comparison.md) +- [Understanding Operator Imports](operator-imports.md) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md new file mode 100644 index 00000000..a9324818 --- /dev/null +++ b/concepts/rxjs-primer.md @@ -0,0 +1,521 @@ +# RxJS Primer + +Brand new to RxJS? In this article we will take a crash course through all the +major concepts you will need to begin getting a grasp on, and start being +productive with RxJS. Hold on tight and let's get started! + +## What is an Observable? + +An observable represents a stream, or source of data that can arrive over time. +You can create an observable from nearly anything, but the most common use case +in RxJS is from events. This can be anything from mouse moves, button clicks, +input into a text field, or even route changes. The easiest way to create an +observable is through the built in creation functions. For example, we can use +the [`fromEvent`](../operators/creation/fromevent.md) helper function to create +an observable of mouse click events: + +```js +// import the fromEvent operator +import { fromEvent } from 'rxjs'; + +// grab button reference +const button = document.getElementById('myButton'); + +// create an observable of button clicks +const myObservable = fromEvent(button, 'click'); +``` + +At this point we have an observable but it's not doing anything. **This is +because observables are cold, or do not activate a producer (like wiring up an +event listener), until there is a...** + +## Subscription + +Subscriptions are what set everything in motion. You can think of this like a +faucet, you have a stream of water ready to be tapped (observable), someone just +needs to turn the handle. In the case of observables, that role belongs to the +`subscriber`. + +To create a subscription, you call the `subscribe` method, supplying a function +(or object) - also known as an `observer`. This is where you can decide how to +**react**(-ive programming) to each event. Let's walk through what happens in +the previous scenario when a subscription is created: + +```js +// import the fromEvent operator +import { fromEvent } from 'rxjs'; + +// grab button reference +const button = document.getElementById('myButton'); + +// create an observable of button clicks +const myObservable = fromEvent(button, 'click'); + +// for now, let's just log the event on each click +const subscription = myObservable.subscribe(event => console.log(event)); +``` + +In the example above, calling `myObservable.subscribe()` will: + +1. Set up an event listener on our button for click events. +2. Call the function we passed to the subscribe method (observer) on each click + event. +3. Return a subscription object with an `unsubscribe` which contains clean up + logic, like removing appropriate event listeners. + +The subscribe method also accepts an object map to handle the case of error or +completion. You probably won't use this as much as simply supplying a function, +but it's good to be aware of should the need arise: + +```js +// instead of a function, we will pass an object with next, error, and complete methods +const subscription = myObservable.subscribe({ + // on successful emissions + next: event => console.log(event), + // on errors + error: error => console.log(error), + // called once on completion + complete: () => console.log('complete!') +}); +``` + +It's important to note that each subscription will create a new execution +context. This means calling `subscribe` a second time will create a new event +listener: + +```js +// addEventListener called +const subscription = myObservable.subscribe(event => console.log(event)); + +// addEvent listener called again! +const secondSubscription = myObservable.subscribe(event => console.log(event)); + +// clean up with unsubscribe +subscription.unsubscribe(); +secondSubscription.unsubscribe(); +``` + +By default, a subscription creates a one on one, one-sided conversation between +the observable and observer. This is like your boss (the observable) yelling +(emitting) at you (the observer) for merging a bad PR. This is also known as +**unicasting**. If you prefer a conference talk scenario - one observable, many +observers - you will take a different approach which includes **multicasting** +with `Subjects` (either explicitly or behind the scenes). More on that in a +future article! + +It's worth noting that when we discuss an Observable source emitting data to +observers, this is a push based model. The source doesn't know or care what +subscribers do with the data, it simply pushes it down the line. + +While working on a stream of events is nice, it's only so useful on it's own. +**What makes RxJS the "lodash for events" are its...** + +## Operators + +Operators offer a way to manipulate values from a source, returning an +observable of the transformed values. Many of the RxJS operators will look +familiar if you are used to JavaScripts `Array` methods. For instance, if you +want to transform emitted values from an observable source, you can use +[`map`](../operators/transformation/map.md): + +```js +// import the from operator +import { of } from 'rxjs'; +/* + * 'of' allows you to deliver values in a sequence + * In this case, it will emit 1,2,3,4,5 in order. + */ +const dataSource = of(1, 2, 3, 4, 5); + +// subscribe to our source observable +const subscription = dataSource + .pipe( + // add 1 to each emitted value + map(value => value + 1) + ) + // log: 2, 3, 4, 5, 6 + .subscribe(value => console.log(value)); +``` + +Or if you want to filter for specific values, you can use +[`filter`](../operators/filtering/filter.md): + +```js +// import the from operator +import { of } from 'rxjs'; +import { filter } from 'rxjs/operators'; + +const dataSource = from(1, 2, 3, 4, 5); + +// subscribe to our source observable +const subscription = dataSource + .pipe( + // only accept values 2 or greater + filter(value => value >= 2) + ) + // log: 2, 3, 4, 5 + .subscribe(value => console.log(value)); +``` + +In practice, if there is a problem you need to solve, it's more than likely +**there is an operator for that**. And while the sheer number of operators can +be overwhelming as you begin your RxJS journey, you can narrow it down to a +small handful (and we will) to start being effective. Over time, you will come +to appreciate the flexibility of the operator library when obscure scenarios +inevitably arrive. + +**One thing you may have noticed in the example above, is operators exist within +a...** + +## Pipe + +The `pipe` function is the assembly line from your observable data source +through your operators. Just like raw material in a factory goes through a +series of stops before it becomes a finished product, source data can pass +through a `pipe`-line of operators where you can manipulate, filter, and +transform the data to fit your use case. It's not uncommon to use 5 (or more) +operators within an observable chain, contained within the `pipe` function. + +For instance, a typeahead solution built with observables may use a group of +operators to optimize both the request and display process: + +```js +// observable of values from a text box, pipe chains operators together +inputValue + .pipe( + // wait for a 200ms pause + debounceTime(200), + // if the value is the same, ignore + distinctUntilChanged(), + // if an updated value comes through while request is still active cancel previous request and 'switch' to new observable + switchMap(searchTerm => typeaheadApi.search(term)) + ) + // create a subscription + .subscribe(results => { + // update the dom + }); +``` + +**But how do you know which operator fits your use-case? The good news is...** + +## Operators can be grouped into common categories + +The first stop when looking for the correct operator is finding a related +category. Need to filter data from a source? Check out the +[`filtering`](../operators/filtering/README.md) operators. Trying to track down +a bug, or debug the flow of data through your observable stream? There are +[`utility`](../operators/utility/README.md) operators that will do the trick. +**The operator categories include...** + +### [Creation operators](../operators/creation/README.md) + +These operators allow the creation of an observable from nearly anything. From +generic to specific use-cases you are free to turn everything into a stream. + +For example, suppose we are creating a progress bar as a user scrolls through an +article. We could turn the scroll event into a stream by utilizing the +[`fromEvent`](../operators/creation/fromevent.md) operator: + +```js +fromEvent(scrollContainerElement, 'scroll') + .pipe( + // we will discuss cleanup strategies like this in future article + takeUntil(userLeavesArticle) + ) + .subscribe(event => { + // calculate and update DOM + }); +``` + +The most commonly used creation operators are +[`of`](../operators/creation/of.md), [`from`](../operators/creation/from.md), +and [`fromEvent`](../operators/creation/fromevent.md). + +### [Combination operators](../operators/combination/README.md) + +The combination operators allow the joining of information from multiple +observables. Order, time, and structure of emitted values is the primary +variation among these operators. + +For example, we can combine updates from multiple data sources to perform a +calculation: + +```js +// give me the last emitted value from each source, whenever either source emits +combineLatest(sourceOne, sourceTwo).subscribe( + ([latestValueFromSourceOne, latestValueFromSourceTwo]) => { + // perform calculation + } +); +``` + +The most commonly used combination operators are +[`combineLatest`](../operators/combination/combinelatest.md), +[`concat`](../operators/combination/concat.md), +[`merge`](../operators/combination/merge.md), +[`startWith`](../operators/combination/startwith.md), and +[`withLatestFrom`](../operators/combination/withlatestfrom.md). + +### [Error handling operators](../operators/error_handling/README.md) + +The error handling operators provide effective ways to gracefully handle errors +and perform retries, should they occur. + +For example, we can use +[`catchError`](../operators/error_handling/catcherror.md) to safeguard against +failed network requests: + +```js +source + .pipe( + mergeMap(value => { + return makeRequest(value).pipe( + catchError(handleErrorByReturningObservable) + ); + }) + ) + .subscribe(value => { + // take action + }); +``` + +The most commonly used error handling operators is +[`catchError`](../operators/error_handling/catcherror.md). + +### [Filtering operators](../operators/filtering/README.md) + +The filtering operators provide techniques for accepting - or declining - values +from an observable source and dealing with backpressure, or the build up of +values within a stream. + +For example, we can use the [`take`](../operators/filtering/take.md) operator to +capture only the first `5` emitted values from a source: + +```js +source.pipe(take(5)).subscribe(value => { + // take action +}); +``` + +The most commonly used filtering operators are +[`debounceTime`](../operators/filtering/debouncetime), +[`distinctUntilChanged`](../operators/filtering/distinctuntilchanged), +[`filter`](../operators/filtering/filter), +[`take`](../operators/filtering/take), and +[`takeUntil`](../operators/filtering/takeuntil). + +### [Multicasting operators](../operators/multicasting/README.md) + +In RxJS observables are cold, or unicast (one source per subscriber) by default. +These operators can make an observable hot, or multicast, allowing side-effects +to be shared among multiple subscribers. + +For example, we may want late subscribers to share, and receive the last emitted +value from an active source: + +```js +const source = data.pipe(shareReplay()); + +const firstSubscriber = source.subscribe(value => { + // perform some action +}); + +// sometime later... + +// second subscriber gets last emitted value on subscription, shares execution context with 'firstSubscriber' +const secondSubscriber = source.subscribe(value => { + // perform some action +}); +``` + +The most commonly used multicasting operator is +[`shareReplay`](../operators/multicasting/sharereplay.md). + +### [Transformation operators](../operators/transformation/README.md) + +Transforming values as they pass through an operator chain is a common task. +These operators provide transformation techniques for nearly any use-case you +will encounter. + +For example, we may want to accumulate a state object from a source over time, +similar to [Redux](https://redux.js.org/): + +```js +source + .pipe( + scan((accumulatedState, currentState) => { + return { ...accumulatedState, ...currentState }; + }) + ) + .subscribe(); +``` + +The most commonly used transformation operators are +[`concatMap`](../operators/transformation/concatmap.md), +[`map`](../operators/transformation/map.md), +[`mergeMap`](../operators/transformation/mergemap.md), +[`scan`](../operators/transformation/scan.md), and +[`switchMap`](../operators/transformation/switchmap.md). + +## Operators have common behaviors + +While operators can be grouped into common categories, operators within a +category often share common behavior. By recognizing this common behavior you +can start creating a [_'choose your own operator'_ tree](https://rxjs-dev.firebaseapp.com/operator-decision-tree) in your mind. + +**For instance, a large amount of operators can grouped into...** + +#### Operators that flatten + +Or, in other words, operators that manage the subscription of an inner +observable, emitting those values into a single observable source. One common +use case for flattening operators is handling HTTP requests in a observable or +promise based API, but that is really just scratching the surface: + +```js +fromEvent(button, 'click') + .pipe( + mergeMap(value => { + // this 'inner' subscription is managed by mergeMap, with response value emitted to observer + return makeHttpRequest(value); + }) + ) + .subscribe(response => { + // do something + }); +``` + +**We can then divide the flattening operators into common behaviors like...** + +#### Operators that `switch` + +Like a light switch, `switch` based operators will turn off (unsubscribe) the +current observable and turn on a new observable on emissions from the source. +Switch operators are useful in situations you don't want (or need) more than one +active observable at a time: + +```js +inputValueChanges + // only the last value is important, if new value comes through cancel previous request / observable + .pipe( + // make GET request for data + switchMap(requestObservable) + ) + .subscribe(); +``` + +Switch based operators include `switchAll`, +[`switchMap`](../operators/transformation/switchmap.md), and `switchMapTo`. + +#### Operators that `concat` + +Comparable to a line at the ATM machine, the next transaction can't begin until +the previous completes. In observable terms, only one subscription will occur at +a time, in order, triggered by the completion of the previous. These are useful +in situations where order of execution is important: + +```js +concat( + firstObservable, + // will begin when 'firstObservable` completes + secondObservable, + // will begin when 'secondObservable` completes + thirdObservable +).subscribe(values => { + // take action +}); +``` + +Merge based operators include [`concat`](../operators/combination/concat.md), +[`concatAll`](../operators/combination/concatall.md), +[`concatMap`](../operators/transformation/concatmap.md), and +[`concatMapTo`](../operators/transformation/concatmapto.md). + +#### Operators that `merge` + +Like your merging lane on the interstate, merge based operators support multiple +active observables flowing into one lane in a first come first serve basis. +Merge operators are useful in situations where you want to trigger an action +when an event from one of many sources occurs: + +```js +merge(firstObservable, secondObservable) + // any emissions from first or second observable as they occur + .pipe(mergeMap(saveActivity)) + .subscribe(); +``` + +Merge based operators include [`merge`](../operators/combination/merge.md), +[`mergeMap`](../operators/transformation/mergemap.md), `mergeMapTo` and +[`mergeAll`](../operators/combination/mergeall.md). + +## Other similarities between operators + +There are also operators that share a similar goal but offer flexibility in +their triggers. For instance, for unsubscribing from an observable after a +specific condition is met, we could use: + +1. [`take`](../operators/filtering/take.md) when we know we only ever want `x` + values. +2. `takeLast` when you just want the last value. +3. [`takeWhile`](../operators/filtering/takewhile.md) when we have a predicate + expression to supply. +4. [`takeUntil`](../operators/filtering/takeuntil.md) when we only want the + source to remain active until another source emits. + +While the number of RxJS operators can seem overhelming at first, these common +behaviors and patterns can bridge the gap rather quickly while learning RxJS. + +## What does this get me? + +As you become more familiar with push based programming through Observables, you +can begin to model all async behavior in your applications through observable +streams. This opens up simple solutions and flexibility for notably complex +behavior. + +For instance, suppose we wanted to make a request which saved user activity when +they answered a quiz question. Our initial implementation may use the +[`mergeMap`](../opearators/transformation/mergemap.md) operator, which fires off +a save request on each event: + +```js +const formEvents = fromEvent(formField, 'click'); +const subscription = formEvents + .pipe( + map(convertToAppropriateValue), + mergeMap(saveRequest) + ) + .subscribe(); +``` + +Later, it's determined that we need to ensure order of these saves. Armed with +the knowledge of operator behavior from above, instead of implementing a complex +queueing system we can instead replace the +[`mergeMap`](../operators/transformation/mergemap.md) operator with +[`concatMap`](../operators/transformation/concatmap.md) and push up our changes: + +```js +const formEvents = fromEvent(formField, 'click'); +const subscription = formEvents + .pipe( + map(convertToAppropriateValue), + // now the next request won't begin until the previous completes + concatMap(saveRequest) + ) + .subscribe(); +``` + +With the change of one word we are now queueing our event requests, and this is +just scratching the surface of what is possible! + +## Keep Going! + +Learning RxJS can be intimidating, but it's a path I promise is worth the +investment. If some of these concepts are still fuzzy (or make no sense at +all!), don't worry! It will all click soon. + +Start checking out the operators on the left hand side of the site for common +examples and use-cases, as well as the additional +[introductory resources](../README.md#introductory-resources) we have collected +from across the web. Good luck and enjoy your journey to becoming a reactive +programming expert! From 34fb54b89d3bb61411ebb861f1333c6f11c0018a Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 10 Apr 2019 09:58:20 -0400 Subject: [PATCH 082/256] feat(operators): add switchMapTo reference (#185) --- SUMMARY.md | 1 + concepts/rxjs-primer.md | 7 ++- operators/README.md | 1 + operators/complete.md | 1 + operators/transformation/README.md | 49 ++++++++++----------- operators/transformation/switchmapto.md | 57 +++++++++++++++++++++++++ 6 files changed, 90 insertions(+), 26 deletions(-) create mode 100644 operators/transformation/switchmapto.md diff --git a/SUMMARY.md b/SUMMARY.md index 3fe0e4d3..d5ce9ed1 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -82,6 +82,7 @@ - [reduce](/operators/transformation/reduce.md) - [scan](/operators/transformation/scan.md) - [switchMap](/operators/transformation/switchmap.md) + - [switchMapTo](/operators/transformation/switchmapto.md) - [toArray](/operators/transformation/toarray.md) - [window](/operators/transformation/window.md) - [windowCount](/operators/transformation/windowcount.md) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index a9324818..e207f018 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -361,7 +361,9 @@ The most commonly used transformation operators are While operators can be grouped into common categories, operators within a category often share common behavior. By recognizing this common behavior you -can start creating a [_'choose your own operator'_ tree](https://rxjs-dev.firebaseapp.com/operator-decision-tree) in your mind. +can start creating a +[_'choose your own operator'_ tree](https://rxjs-dev.firebaseapp.com/operator-decision-tree) +in your mind. **For instance, a large amount of operators can grouped into...** @@ -405,7 +407,8 @@ inputValueChanges ``` Switch based operators include `switchAll`, -[`switchMap`](../operators/transformation/switchmap.md), and `switchMapTo`. +[`switchMap`](../operators/transformation/switchmap.md), and +[`switchMapTo`](../operators/transformation/switchmapto.md). #### Operators that `concat` diff --git a/operators/README.md b/operators/README.md index 38777aa8..9c0c38d8 100644 --- a/operators/README.md +++ b/operators/README.md @@ -86,6 +86,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [reduce](transformation/reduce.md) - [scan](transformation/scan.md) :star: - [switchMap](transformation/switchmap.md) :star: + - [switchMapTo](transformation/switchmapto.md) - [toArray](transformation/toarray.md) - [window](transformation/window.md) - [windowCount](transformation/windowcount.md) diff --git a/operators/complete.md b/operators/complete.md index 5b14c350..b6862908 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -74,6 +74,7 @@ _[Prefer a split by operator type?](README.md)_ - [skipWhile](filtering/skipwhile.md) - [startWith](combination/startwith.md) :star: - [switchMap](transformation/switchmap.md) :star: +- [switchMapTo](transformation/switchmapto.md) - [take](filtering/take.md) :star: - [takeUntil](filtering/takeuntil.md) :star: - [takeWhile](filtering/takewhile.md) diff --git a/operators/transformation/README.md b/operators/transformation/README.md index 9f0dae2a..605bea6c 100644 --- a/operators/transformation/README.md +++ b/operators/transformation/README.md @@ -6,29 +6,30 @@ will encounter. ## Contents -* [buffer](buffer.md) -* [bufferCount](buffercount.md) -* [bufferTime](buffertime.md) :star: -* [bufferToggle](buffertoggle.md) -* [bufferWhen](bufferwhen.md) -* [concatMap](concatmap.md) :star: -* [concatMapTo](concatmapto.md) -* [exhaustMap](exhaustmap.md) -* [expand](expand.md) -* [groupBy](groupby.md) -* [map](map.md) :star: -* [mapTo](mapto.md) -* [mergeMap / flatMap](mergemap.md) :star: -* [partition](partition.md) -* [pluck](pluck.md) -* [reduce](reduce.md) -* [scan](scan.md) :star: -* [switchMap](switchmap.md) :star: -* [toArray](toarray.md) -* [window](window.md) -* [windowCount](windowcount.md) -* [windowTime](windowtime.md) -* [windowToggle](windowtoggle.md) -* [windowWhen](windowwhen.md) +- [buffer](buffer.md) +- [bufferCount](buffercount.md) +- [bufferTime](buffertime.md) :star: +- [bufferToggle](buffertoggle.md) +- [bufferWhen](bufferwhen.md) +- [concatMap](concatmap.md) :star: +- [concatMapTo](concatmapto.md) +- [exhaustMap](exhaustmap.md) +- [expand](expand.md) +- [groupBy](groupby.md) +- [map](map.md) :star: +- [mapTo](mapto.md) +- [mergeMap / flatMap](mergemap.md) :star: +- [partition](partition.md) +- [pluck](pluck.md) +- [reduce](reduce.md) +- [scan](scan.md) :star: +- [switchMap](switchmap.md) :star: +- [switchMapTo](switchmapto.md) +- [toArray](toarray.md) +- [window](window.md) +- [windowCount](windowcount.md) +- [windowTime](windowtime.md) +- [windowToggle](windowtoggle.md) +- [windowWhen](windowwhen.md) :star: - _commonly used_ diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md new file mode 100644 index 00000000..6ae5df68 --- /dev/null +++ b/operators/transformation/switchmapto.md @@ -0,0 +1,57 @@ +# switchMapTo + +#### signature: `switchMapTo(innerObservable: Observable, resultSelector: function(outerValue, innerValue, outerIndex, innerIndex): any): Observable` + +## Map to same inner observable, complete previous inner observable. + +--- + +:bulb: If you need to consider the emitted value from the source, try +[`switchMap`](switchmap.md)! + +--- + +
+ +### Examples + +##### Example 1: Restart countdown on click, until countdown completes one time + +( [StackBlitz](https://stackblitz.com/edit/typescript-r97ngc?file=index.ts) ) + +```js +// RxJS v6+ +import { interval, fromEvent } from 'rxjs'; +import { + switchMapTo, + scan, + startWith, + takeWhile, + finalize +} from 'rxjs/operators'; + +const COUNTDOWN_TIME = 10; + +// reference +const countdownElem = document.getElementById('countdown'); + +// streams +const click$ = fromEvent(document, 'click'); +const countdown$ = interval(1000).pipe( + scan((acc, _) => --acc, COUNTDOWN_TIME), + startWith(COUNTDOWN_TIME) +); + +click$ + .pipe( + switchMapTo(countdown$), + takeWhile(val => val >= 0), + finalize(() => (countdownElem.innerHTML = "We're done here!")) + ) + .subscribe((val: any) => (countdownElem.innerHTML = val)); +``` + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMapTo.ts) From 85e16647ceea68edced0b1af71da0acc4bdcfd5e Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 10 Apr 2019 18:04:32 +0100 Subject: [PATCH 083/256] feat(operators): add timeoutWith documentation (#186) * Create timeoutwith.md * Update README.md * Update SUMMARY.md * Update README.md * Update complete.md * style(timeoutWith): slight wording update --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 3 +- operators/utility/README.md | 1 + operators/utility/timeoutwith.md | 48 ++++++++++++++++++++++++++++++++ 5 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 operators/utility/timeoutwith.md diff --git a/SUMMARY.md b/SUMMARY.md index d5ce9ed1..a2b3396f 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -99,6 +99,7 @@ - [repeat](/operators/utility/repeat.md) - [timeInterval](/operators/utility/timeinterval.md) - [timeout](/operators/utility/timeout.md) + - [timeoutWith](/operators/utility/timeoutwith.md) - [toPromise](/operators/utility/topromise.md) - [Full Listing](/operators/complete.md) - [Subjects](/subjects/README.md) diff --git a/operators/README.md b/operators/README.md index 9c0c38d8..f0b7e881 100644 --- a/operators/README.md +++ b/operators/README.md @@ -103,6 +103,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [repeat](utility/repeat.md) - [timeInterval](utility/timeinterval.md) - [timeout](utility/timeout.md) + - [timeoutWith](utility/timeoutwith.md) - [toPromise](utility/topromise.md) :star: - _commonly used_ diff --git a/operators/complete.md b/operators/complete.md index b6862908..731c8b5a 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -82,7 +82,8 @@ _[Prefer a split by operator type?](README.md)_ - [throttleTime](filtering/throttletime.md) - [throw](creation/throw.md) - [timeInterval](utility/timeinterval.md) -- [timeout](utilit/timeout.md) +- [timeout](utility/timeout.md) +- [timeoutWith](utility/timeoutwith.md) - [timer](creation/timer.md) - [toArray](transformation/toarray.md) - [toPromise](utility/topromise.md) diff --git a/operators/utility/README.md b/operators/utility/README.md index bbe8339e..6c987184 100644 --- a/operators/utility/README.md +++ b/operators/utility/README.md @@ -14,6 +14,7 @@ provide helpful utilities in your observable toolkit. * [repeat](repeat.md) * [timeInterval](timeinterval.md) * [timeout](timeout.md) +* [timeoutWith](timeoutwith.md) * [toPromise](topromise.md) :star: - _commonly used_ diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md new file mode 100644 index 00000000..8d8dffd7 --- /dev/null +++ b/operators/utility/timeoutwith.md @@ -0,0 +1,48 @@ +# timeoutWith + +#### signature: `timeoutWith(due: number | Date, withObservable: ObservableInput, scheduler: SchedulerLike = async): OperatorFunction` + +## Subscribe to second Observable if no emission occurs in given time span. + +
+ +### Examples + +##### Example 1: Timeout after 1 second + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-timeoutwith?file=index.ts&devtoolsheight=100) ) + +```js +// RxJS v6+ +import { of } from 'rxjs'; +import { timeoutWith, delay, concatMap } from 'rxjs/operators'; + +const fakeRequest = delayTime => of('!response!').pipe(delay(delayTime)); +const requestTimeoutLogger = of('logging request timeout'); +const timeoutThreshold = 1000; + +of(timeoutThreshold + 1, timeoutThreshold - 1, timeoutThreshold + 3) + .pipe( + concatMap(e => fakeRequest(e) + .pipe(timeoutWith(timeoutThreshold, requestTimeoutLogger)) + ) + ).subscribe(console.log); + +/* + OUTPUT: + logging request timeout + !response! + logging request timeout +*/ +``` + +### Additional Resources + +- [timeoutWith](https://rxjs-dev.firebaseapp.com/api/operators/timeoutWith) + :newspaper: - Official Docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeoutWith.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeoutWith.ts) From fa2cda12b776bf7d5b773fb06efc6461ffae487f Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 11 Apr 2019 14:48:49 -0400 Subject: [PATCH 084/256] style(iif): slight description wording tweak --- operators/conditional/iif.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index b25762c6..195ca1a2 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -2,7 +2,7 @@ #### signature: `iif(condition: () => boolean, trueResult: SubscribableOrPromise = EMPTY, falseResult: SubscribableOrPromise = EMPTY): Observable` -## Decides at subscription time which Observable will actually be subscribed. +## Subscribe to first or second observable based on a condition
From 1f65962bae8d4b412514585b0effde9c6a803052 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 11 Apr 2019 16:14:34 -0400 Subject: [PATCH 085/256] feat(iif): add additional iif example (#187) --- operators/conditional/iif.md | 69 ++++++++++++++++---------- operators/conditional/sequenceequal.md | 31 ++++++------ operators/creation/defer.md | 16 ++++-- operators/creation/generate.md | 24 ++++----- operators/transformation/toarray.md | 2 +- operators/utility/timeoutwith.md | 12 +++-- 6 files changed, 86 insertions(+), 68 deletions(-) diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 195ca1a2..e07d7b72 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -1,6 +1,6 @@ # iif -#### signature: `iif(condition: () => boolean, trueResult: SubscribableOrPromise = EMPTY, falseResult: SubscribableOrPromise = EMPTY): Observable` +#### signature: `iif(condition: () => boolean, trueResult: SubscribableOrPromise = EMPTY, falseResult: SubscribableOrPromise = EMPTY): Observable` ## Subscribe to first or second observable based on a condition @@ -11,7 +11,8 @@ ##### Example 1: simple iif ( -[Stackblitz](https://stackblitz.com/edit/rxjs-iif?file=index.ts&devtoolsheight=100) ) +[Stackblitz](https://stackblitz.com/edit/rxjs-iif?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -21,23 +22,18 @@ import { mergeMap } from 'rxjs/operators'; const r$ = of('R'); const x$ = of('X'); -interval(1000).pipe( - mergeMap(v => - iif( - () => v % 4 === 0, - r$, - x$ - )) -).subscribe(console.log); - -//output: R, X, X, X, R, X, X, X, etc... +interval(1000) + .pipe(mergeMap(v => iif(() => v % 4 === 0, r$, x$))) + .subscribe(console.log); +// output: R, X, X, X, R, X, X, X, etc... ``` ##### Example 2: iif with mouse moves ( -[Stackblitz](https://stackblitz.com/edit/rxjs-iif-mousemoves?file=index.ts?file=index.ts&devtoolsheight=50) ) +[Stackblitz](https://stackblitz.com/edit/rxjs-iif-mousemoves?file=index.ts?file=index.ts&devtoolsheight=50) +) ```js // RxJS v6+ @@ -47,18 +43,39 @@ import { mergeMap, map, throttleTime, filter } from 'rxjs/operators'; const r$ = of(`I'm saying R!!`); const x$ = of(`X's always win!!`); -fromEvent(document, 'mousemove').pipe( - throttleTime(50), - filter((move: MouseEvent) => move.clientY < 210), - map((move: MouseEvent) => move.clientY), - mergeMap(yCoord => - iif( - () => yCoord < 110, - r$, - x$ - )) -).subscribe(console.log); +fromEvent(document, 'mousemove') + .pipe( + throttleTime(50), + filter((move: MouseEvent) => move.clientY < 210), + map((move: MouseEvent) => move.clientY), + mergeMap(yCoord => iif(() => yCoord < 110, r$, x$)) + ) + .subscribe(console.log); +``` + +##### Example 3: iif with default + +( +[Stackblitz](https://stackblitz.com/edit/rxjs-iif-pqmw2f?file=index.ts?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { fromEvent, iif, of, interval, pipe } from 'rxjs'; +import { mergeMap } from 'rxjs/operators'; +interval(1000) + .pipe( + mergeMap(v => + iif( + () => !!(v % 2), + of(v) + // if not supplied defaults to EMPTY + ) + ) + // output: 1,3,5... + ) + .subscribe(console.log); ``` ### Related Recipes @@ -67,8 +84,8 @@ fromEvent(document, 'mousemove').pipe( ### Additional Resources -- [iif](https://rxjs-dev.firebaseapp.com/api/index/function/iif) - :newspaper: - Official docs +- [iif](https://rxjs-dev.firebaseapp.com/api/index/function/iif) :newspaper: - + Official docs --- diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 9286c424..6f89f949 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -1,6 +1,6 @@ # sequenceEqual -#### signature: `sequenceEqual(compareTo: Observable, comparor?: (a: T, b: T) => boolean): OperatorFunction` +#### signature: `sequenceEqual(compareTo: Observable, comparor?: (a, b) => boolean): OperatorFunction` ## Compares all values of two observables in sequence using an optional comparor function and returns an observable of a single boolean value representing whether or not the two sequences are equal. @@ -11,7 +11,8 @@ ##### Example 1: simple sequenceEqual ( -[Stackblitz](https://stackblitz.com/edit/rxjs-sequenceequal?file=index.ts&devtoolsheight=100) ) +[Stackblitz](https://stackblitz.com/edit/rxjs-sequenceequal?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -20,19 +21,18 @@ import { sequenceEqual, switchMap } from 'rxjs/operators'; const expectedSequence = from([4, 5, 6]); -of([1, 2, 3], [4, 5, 6], [7, 8, 9]).pipe( - switchMap(arr => - from(arr).pipe(sequenceEqual(expectedSequence))) -).subscribe(console.log); +of([1, 2, 3], [4, 5, 6], [7, 8, 9]) + .pipe(switchMap(arr => from(arr).pipe(sequenceEqual(expectedSequence)))) + .subscribe(console.log); //output: false, true, false - ``` ##### Example 2: sequenceEqual with keyboard events ( -[Stackblitz](https://stackblitz.com/edit/rxjs-sequenceequal-buffercount?file=index.ts&devtoolsheight=50) ) +[Stackblitz](https://stackblitz.com/edit/rxjs-sequenceequal-buffercount?file=index.ts&devtoolsheight=50) +) ```js // RxJS v6+ @@ -40,8 +40,7 @@ import { from, fromEvent } from 'rxjs'; import { sequenceEqual, map, bufferCount, mergeMap, tap } from 'rxjs/operators'; const expectedSequence = from(['q', 'w', 'e', 'r', 't', 'y']); -const setResult = text => - document.getElementById('result').innerText = text; +const setResult = text => (document.getElementById('result').innerText = text); fromEvent(document, 'keydown') .pipe( @@ -49,15 +48,13 @@ fromEvent(document, 'keydown') tap(v => setResult(v)), bufferCount(6), mergeMap(keyDowns => - from(keyDowns) - .pipe( - sequenceEqual(expectedSequence), - tap(isItQwerty => - setResult(isItQwerty ? 'WELL DONE!' : 'TYPE AGAIN!')) - )) + from(keyDowns).pipe( + sequenceEqual(expectedSequence), + tap(isItQwerty => setResult(isItQwerty ? 'WELL DONE!' : 'TYPE AGAIN!')) + ) + ) ) .subscribe(e => console.log(`did you say qwerty? ${e}`)); - ``` ### Related Recipes diff --git a/operators/creation/defer.md b/operators/creation/defer.md index ddec64d3..9a6c2576 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -4,6 +4,14 @@ ## Create an observable with given subscription function. +--- + +:bulb: +[`defer`](https://github.com/ReactiveX/rxjs/blob/ecc73d2a1564d0d3edffba90eec76510e509236c/src/internal/observable/iif.ts#L94-L100) +is used as part of the [`iif`](../conditional/iif.md) operator! + +--- +
### Examples @@ -11,7 +19,8 @@ ##### Example 1: Defer to get current date/time at the time of subscription ( -[StackBlitz](https://stackblitz.com/edit/rxjs-defer-example?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-defer-example?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -24,9 +33,8 @@ const s2 = defer(() => of(new Date())); //will capture date time at the moment o console.log(new Date()); timer(2000) - .pipe( - switchMap(_ => merge(s1, s2)) - ).subscribe(console.log); + .pipe(switchMap(_ => merge(s1, s2))) + .subscribe(console.log); /* OUTPUT => diff --git a/operators/creation/generate.md b/operators/creation/generate.md index f9292129..794a8e22 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -1,6 +1,6 @@ # generate -#### signature: `generate(initialStateOrOptions: S | GenerateOptions, condition?: ConditionFunc, iterate?: IterateFunc, resultSelectorOrObservable?: (ResultFunc) | SchedulerLike, scheduler?: SchedulerLike): Observable` +#### signature: `generate(initialStateOrOptions: GenerateOptions, condition?: ConditionFunc, iterate?: IterateFunc, resultSelectorOrObservable?: (ResultFunc) | SchedulerLike, scheduler?: SchedulerLike): Observable` ## Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages. @@ -11,17 +11,14 @@ ##### Example 1: Generate ( -[StackBlitz](https://stackblitz.com/edit/rxjs-generate?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-generate?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ import { generate } from 'rxjs'; -generate( - 2, - x => x <= 8, - x => x + 3 -).subscribe(console.log); +generate(2, x => x <= 8, x => x + 3).subscribe(console.log); /* OUTPUT: @@ -29,24 +26,21 @@ OUTPUT: 5 8 */ - ``` ##### Example 2: Generate with result selector ( -[StackBlitz](https://stackblitz.com/edit/rxjs-generate-result-selector?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-generate-result-selector?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ import { generate } from 'rxjs'; -generate( - 2, - x => x <= 38, - x => x + 3, - x => '.'.repeat(x) -).subscribe(console.log); +generate(2, x => x <= 38, x => x + 3, x => '.'.repeat(x)).subscribe( + console.log +); /* OUTPUT: diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index d2793514..d9c355ca 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -1,6 +1,6 @@ # toArray -#### signature: `toArray(): OperatorFunction` +#### signature: `toArray(): OperatorFunction` ## Collects all source emissions and emits them as an array when the source completes. diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index 8d8dffd7..0d67a180 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -1,6 +1,6 @@ # timeoutWith -#### signature: `timeoutWith(due: number | Date, withObservable: ObservableInput, scheduler: SchedulerLike = async): OperatorFunction` +#### signature: `timeoutWith(due: number | Date, withObservable: ObservableInput, scheduler: SchedulerLike = async): OperatorFunction` ## Subscribe to second Observable if no emission occurs in given time span. @@ -11,7 +11,8 @@ ##### Example 1: Timeout after 1 second ( -[StackBlitz](https://stackblitz.com/edit/rxjs-timeoutwith?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-timeoutwith?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -24,10 +25,11 @@ const timeoutThreshold = 1000; of(timeoutThreshold + 1, timeoutThreshold - 1, timeoutThreshold + 3) .pipe( - concatMap(e => fakeRequest(e) - .pipe(timeoutWith(timeoutThreshold, requestTimeoutLogger)) + concatMap(e => + fakeRequest(e).pipe(timeoutWith(timeoutThreshold, requestTimeoutLogger)) ) - ).subscribe(console.log); + ) + .subscribe(console.log); /* OUTPUT: From 4dc0c7d1975385f074ba9aad2a9a971bd6c5ae76 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 12 Apr 2019 10:13:27 -0400 Subject: [PATCH 086/256] feat(operators): add takeLast operator (#188) * feat(iif): add additional iif example * feat(operators): add takeLast operator --- SUMMARY.md | 1 + concepts/rxjs-primer.md | 3 ++- operators/README.md | 1 + operators/complete.md | 1 + operators/filtering/README.md | 39 +++++++++++++++-------------- operators/filtering/take.md | 21 ++++++++-------- operators/filtering/takelast.md | 44 +++++++++++++++++++++++++++++++++ 7 files changed, 80 insertions(+), 30 deletions(-) create mode 100644 operators/filtering/takelast.md diff --git a/SUMMARY.md b/SUMMARY.md index a2b3396f..b78db8f2 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -59,6 +59,7 @@ - [skipUntil](/operators/filtering/skipuntil.md) - [skipWhile](/operators/filtering/skipwhile.md) - [take](/operators/filtering/take.md) + - [takeLast](/operators/filtering/takelast.md) - [takeUntil](/operators/filtering/takeuntil.md) - [takeWhile](/operators/filtering/takewhile.md) - [throttle](/operators/filtering/throttle.md) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index e207f018..a9d0b907 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -460,7 +460,8 @@ specific condition is met, we could use: 1. [`take`](../operators/filtering/take.md) when we know we only ever want `x` values. -2. `takeLast` when you just want the last value. +2. [`takeLast`](../operators/filtering/takelast.md) when you just want the last + n values. 3. [`takeWhile`](../operators/filtering/takewhile.md) when we have a predicate expression to supply. 4. [`takeUntil`](../operators/filtering/takeuntil.md) when we only want the diff --git a/operators/README.md b/operators/README.md index f0b7e881..c2224f4b 100644 --- a/operators/README.md +++ b/operators/README.md @@ -58,6 +58,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [skipUntil](filtering/skipuntil.md) - [skipWhile](filtering/skipwhile.md) - [take](filtering/take.md) :star: + - [takeLast](filtering/takelast.md) - [takeUntil](filtering/takeuntil.md) :star: - [takeWhile](filtering/takewhile.md) - [throttle](filtering/throttle.md) diff --git a/operators/complete.md b/operators/complete.md index 731c8b5a..e6ce4e35 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -76,6 +76,7 @@ _[Prefer a split by operator type?](README.md)_ - [switchMap](transformation/switchmap.md) :star: - [switchMapTo](transformation/switchmapto.md) - [take](filtering/take.md) :star: +- [takeLast](filtering/takelast.md) - [takeUntil](filtering/takeuntil.md) :star: - [takeWhile](filtering/takewhile.md) - [throttle](filtering/throttle.md) diff --git a/operators/filtering/README.md b/operators/filtering/README.md index 4fe79ec0..4a5f9591 100644 --- a/operators/filtering/README.md +++ b/operators/filtering/README.md @@ -9,24 +9,25 @@ with ## Contents -* [audit](audit.md) -* [auditTime](audittime.md) -* [debounce](debounce.md) -* [debounceTime](debouncetime.md) :star: -* [distinctUntilChanged](distinctuntilchanged.md) :star: -* [filter](filter.md) :star: -* [first](first.md) -* [ignoreElements](ignoreelements.md) -* [last](last.md) -* [sample](sample.md) -* [single](single.md) -* [skip](skip.md) -* [skipUntil](skipuntil.md) -* [skipWhile](skipwhile.md) -* [take](take.md) :star: -* [takeUntil](takeuntil.md) :star: -* [takeWhile](takewhile.md) -* [throttle](throttle.md) -* [throttleTime](throttletime.md) +- [audit](audit.md) +- [auditTime](audittime.md) +- [debounce](debounce.md) +- [debounceTime](debouncetime.md) :star: +- [distinctUntilChanged](distinctuntilchanged.md) :star: +- [filter](filter.md) :star: +- [first](first.md) +- [ignoreElements](ignoreelements.md) +- [last](last.md) +- [sample](sample.md) +- [single](single.md) +- [skip](skip.md) +- [skipUntil](skipuntil.md) +- [skipWhile](skipwhile.md) +- [take](take.md) :star: +- [takeLast](takelast.md) +- [takeUntil](takeuntil.md) :star: +- [takeWhile](takewhile.md) +- [throttle](throttle.md) +- [throttleTime](throttletime.md) :star: - _commonly used_ diff --git a/operators/filtering/take.md b/operators/filtering/take.md index e18ce265..8a5b5528 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -4,15 +4,15 @@ ## Emit provided number of values before completing. -### Why use `take` +### Why use `take`? -When you are interested in only the first set number of emission, you want to -use `take`. Maybe you want to see what the user first clicked on when he/she -first entered the page, you would want to subscribe to the click event and just -take the first emission. There is a race and you want to observe the race, but -you're only interested in the first who crosses the finish line. This operator -is clear and straight forward, you just want to see the first _n_ numbers of -emission to do whatever it is you need. +When you are interested in only the first emission, you want to use `take`. +Maybe you want to see what the user first clicked on when they entered the page, +or you would want to subscribe to the click event and just take the first +emission. Another use-case is when you need to take a snapshot of data at a +particular point in time but do not require further emissions. For example, a +stream of user token updates, or a route guard based on a stream in an Angular +application. --- @@ -20,8 +20,9 @@ emission to do whatever it is you need. another observable, you can use [takeUntil](takeuntil.md) or [takeWhile](takewhile.md)! -:bulb: `take` is the opposite of `skip` where `take` will take the first _n_ -number of emissions while `skip` will skip the first _n_ number of emissions. +:bulb: `take` is the opposite of [`skip`](./skip.md) where `take` will take the +first _n_ number of emissions while `skip` will skip the first _n_ number of +emissions. --- diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md new file mode 100644 index 00000000..0cea6857 --- /dev/null +++ b/operators/filtering/takelast.md @@ -0,0 +1,44 @@ +# takeLast + +#### signature: `takeLast(count: number): Observable` + +## Emit the last n emitted values before completion + +--- + +:bulb: If you want only the last emission from multiple observables, on +completion of multiple observables, try [forkJoin](../combination/forkjoin.md)! + +--- + +
+ +### Examples + +##### Example 1: take the last 2 emitted values before completion + +( +[StackBlitz](https://stackblitz.com/edit/typescript-zss7oo?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { of } from 'rxjs'; +import { takeLast } from 'rxjs/operators'; + +const source = of('Ignore', 'Ignore', 'Hello', 'World!'); +// take the last 2 emitted values +const example = source.pipe(takeLast(2)); +// Hello, World! +const subscribe = example.subscribe(val => console.log(val)); +``` + +### Additional Resources + +- [takeLast](https://rxjs-dev.firebaseapp.com/api/operators/takeLast) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeLast.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeLast.ts) From 50c3979a4a7b4cd51bbe803ae1f25ecd988ef1fd Mon Sep 17 00:00:00 2001 From: btroncone Date: Fri, 12 Apr 2019 20:30:15 -0400 Subject: [PATCH 087/256] feature(operators): add mergeScan operator --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/transformation/README.md | 1 + operators/transformation/mergescan.md | 53 +++++++++++++++++++++++++++ 5 files changed, 57 insertions(+) create mode 100644 operators/transformation/mergescan.md diff --git a/SUMMARY.md b/SUMMARY.md index b78db8f2..37305e5b 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -78,6 +78,7 @@ - [map](/operators/transformation/map.md) - [mapTo](/operators/transformation/mapto.md) - [mergeMap / flatMap](/operators/transformation/mergemap.md) + - [mergeScan](/operators/transformation/mergescan.md) - [partition](/operators/transformation/partition.md) - [pluck](/operators/transformation/pluck.md) - [reduce](/operators/transformation/reduce.md) diff --git a/operators/README.md b/operators/README.md index c2224f4b..f64b5363 100644 --- a/operators/README.md +++ b/operators/README.md @@ -82,6 +82,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [map](transformation/map.md) :star: - [mapTo](transformation/mapto.md) - [mergeMap / flatMap](transformation/mergemap.md) :star: + - [mergeScan](transformation/mergescan.md) - [partition](transformation/partition.md) - [pluck](transformation/pluck.md) - [reduce](transformation/reduce.md) diff --git a/operators/complete.md b/operators/complete.md index e6ce4e35..04c68e76 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -53,6 +53,7 @@ _[Prefer a split by operator type?](README.md)_ - [merge](combination/merge.md) :star: - [mergeAll](combination/mergeall.md) - [mergeMap / flatMap](transformation/mergemap.md) :star: +- [mergeScan](transformation/mergescan.md) - [multicast](multicasting/multicast.md) - [of](creation/of.md) :star: - [partition](transformation/partition.md) diff --git a/operators/transformation/README.md b/operators/transformation/README.md index 605bea6c..18502201 100644 --- a/operators/transformation/README.md +++ b/operators/transformation/README.md @@ -19,6 +19,7 @@ will encounter. - [map](map.md) :star: - [mapTo](mapto.md) - [mergeMap / flatMap](mergemap.md) :star: +- [mergeScan](mergescan.md) - [partition](partition.md) - [pluck](pluck.md) - [reduce](reduce.md) diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md new file mode 100644 index 00000000..d0d3c28c --- /dev/null +++ b/operators/transformation/mergescan.md @@ -0,0 +1,53 @@ +# mergeScan + +#### signature: `mergeScan(accumulator: (acc, value, index: number) => ObservableInput, seed, concurrent: number = Number.POSITIVE_INFINITY): OperatorFunction` + +## Accumulate value over time via merged observables. + +
+ +### Examples + +##### Example 1: Accumulate total duration mouse held down over time + +( +[StackBlitz](https://stackblitz.com/edit/typescript-gzaak8?file=index.ts&devtoolsheight=50) +) + +```js +// RxJS v6+ +import { fromEvent, interval } from 'rxjs'; +import { mergeScan, take, takeUntil, map, scan } from 'rxjs/operators'; + +// reference +const durationElem = document.getElementById('duration'); + +// streams +const mouseDown$ = fromEvent(document, 'mousedown'); +const mouseMove$ = fromEvent(document, 'mousemove'); +const mouseUp$ = fromEvent(document, 'mouseup'); + +// accumulate time mouse held down over time +mouseDown$ + .pipe( + mergeScan((acc, curr) => { + return interval(1000).pipe( + scan((a, _) => ++a, 0), + map((val: any) => val + acc), + takeUntil(mouseUp$) + ); + }, 0) + // output: 1s...2s...3s...4s... + ) + .subscribe(val => (durationElem.innerHTML = `${val}s`)); +``` + +### Additional Resources + +- [pluck](https://rxjs-dev.firebaseapp.com/api/operators/mergeScan) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeScan.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeScan.ts) From f2db8115a9d3152a642fd8ad749151835508e581 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 12 Apr 2019 20:32:33 -0400 Subject: [PATCH 088/256] style(operators): remove unneeded code in mergeScan --- operators/transformation/mergescan.md | 1 - 1 file changed, 1 deletion(-) diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index d0d3c28c..31c4752f 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -24,7 +24,6 @@ const durationElem = document.getElementById('duration'); // streams const mouseDown$ = fromEvent(document, 'mousedown'); -const mouseMove$ = fromEvent(document, 'mousemove'); const mouseUp$ = fromEvent(document, 'mouseup'); // accumulate time mouse held down over time From 0dc542028f23a2ffc05adfeede4dd52e59d6b9d2 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 15 Apr 2019 10:10:24 -0400 Subject: [PATCH 089/256] style(operators): fix forkJoin typo --- operators/combination/forkjoin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 4cdd7d75..646601ea 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -32,7 +32,7 @@ can [catch the error on the outside](#example-3-handling-errors-on-outside). It's also worth noting that if you have an observable that emits more than one item, and you are concerned with the previous emissions `forkJoin` is not the -correct choice. In these cases you may better off with an operator like +correct choice. In these cases you may be better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md).
From 25807f3107aff23069343cd457e72ebc4b7bcf99 Mon Sep 17 00:00:00 2001 From: Arturo Romero Date: Fri, 19 Apr 2019 16:53:30 -0700 Subject: [PATCH 090/256] style(article): add import to example --- concepts/rxjs-primer.md | 1 + 1 file changed, 1 insertion(+) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index a9d0b907..79993c8a 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -121,6 +121,7 @@ want to transform emitted values from an observable source, you can use ```js // import the from operator import { of } from 'rxjs'; +import { map } from 'rxjs/operators'; /* * 'of' allows you to deliver values in a sequence * In this case, it will emit 1,2,3,4,5 in order. From c17e04723ef58c6b0cf6ddb7200c15715805c04c Mon Sep 17 00:00:00 2001 From: btroncone Date: Tue, 23 Apr 2019 19:58:22 -0400 Subject: [PATCH 091/256] feat(operators): updates for rxjs 6.5+ --- operators/combination/forkjoin.md | 41 ++++++++++++++++++++---- operators/transformation/partition.md | 46 ++++++++++++++++++++++++++- operators/utility/do.md | 44 +++++++++++++++++++++---- 3 files changed, 116 insertions(+), 15 deletions(-) diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 646601ea..fbf88505 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -39,7 +39,34 @@ correct choice. In these cases you may be better off with an operator like ### Examples -##### Example 1: Observables completing after different durations +##### Example 1: (RxJS 6.5+) Using a dictionary of sources + +( +[StackBlitz](https://stackblitz.com/edit/typescript-u5pzuf?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6.5+ +import { ajax } from 'rxjs/ajax'; +import { forkJoin } from 'rxjs'; + +/* + when all observables complete, provide the last + emitted value from each as dictionary +*/ +forkJoin( + // as of RxJS 6.5+ we can use a dictionary of sources + { + google: ajax.getJSON('https://api.github.com/users/google'), + microsoft: ajax.getJSON('https://api.github.com/users/microsoft'), + users: ajax.getJSON('https://api.github.com/users') + } +) + // { google: object, microsoft: object, users: array } + .subscribe(console.log); +``` + +##### Example 2: Observables completing after different durations ( [StackBlitz](https://stackblitz.com/edit/typescript-mzbcrw?file=index.ts&devtoolsheight=100) @@ -76,7 +103,7 @@ const example = forkJoin( const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 2: Making a variable number of requests +##### Example 3: Making a variable number of requests ( [StackBlitz](https://stackblitz.com/edit/typescript-3mbbjw?file=index.ts&devtoolsheight=100) @@ -109,7 +136,7 @@ const example = source.pipe(mergeMap(q => forkJoin(...q.map(myPromise)))); const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 3: Handling errors on outside +##### Example 4: Handling errors on outside ( [StackBlitz](https://stackblitz.com/edit/typescript-xgskpm?file=index.ts&devtoolsheight=100) @@ -137,7 +164,7 @@ const example = forkJoin( const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 4: Getting successful results when one inner observable errors +##### Example 5: Getting successful results when one inner observable errors ( [StackBlitz](https://stackblitz.com/edit/typescript-hydgiu?file=index.ts&devtoolsheight=100) @@ -165,7 +192,7 @@ const example = forkJoin( const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 5: forkJoin in Angular +##### Example 6: forkJoin in Angular ( [plunker](https://plnkr.co/edit/ElTrOg8NfR3WbbAfjBXQ?p=preview) ) @@ -217,8 +244,8 @@ export class App { ### Additional Resources -- [forkJoin](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-forkJoin) - :newspaper: - Official docs +- [forkJoin](https://rxjs.dev/api/index/function/forkJoin) :newspaper: - + Official docs --- diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index bc638ce6..9e379190 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -83,5 +83,49 @@ const subscribe = merge( --- +##### Example 3: (v6.5+) Partition as a static function + +( +[StackBlitz](https://stackblitz.com/edit/typescript-vmfvp8?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6.5+ +import { merge, of, from, partition } from 'rxjs'; +import { map, catchError } from 'rxjs/operators'; + +const source = from([1, 2, 3, 4, 5, 6]); +//if greater than 3 throw +const example = source.pipe( + map(val => { + if (val > 3) { + throw `${val} greater than 3!`; + } + return { success: val }; + }), + catchError(val => of({ error: val })) +); +// split on success or error +const [success, error] = partition(example, res => res.success); +/* + Output: + "Success! 1" + "Success! 2" + "Success! 3" + "Error! 4 greater than 3!" +*/ +const subscribe = merge( + success.pipe(map(val => `Success! ${val.success}`)), + error.pipe(map(val => `Error! ${val.error}`)) +).subscribe(val => console.log(val)); +``` + +### Additional Resources + +- [partition](https://rxjs.dev/api/index/function/partition) :newspaper: - + Official docs + +--- + > :file_folder: Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/partition.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/partition.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/partition.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/partition.ts) diff --git a/operators/utility/do.md b/operators/utility/do.md index f337ceb6..d2400ccf 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -1,6 +1,6 @@ -# do / tap +# tap / do -#### signature: `do(nextOrObserver: function, error: function, complete: function): Observable` +#### signature: `tap(nextOrObserver: function, error: function, complete: function): Observable` ## Transparently perform actions or side-effects, such as logging. @@ -14,7 +14,7 @@ ### Examples -##### Example 1: Logging with do +##### Example 1: Logging with tap ( [StackBlitz](https://stackblitz.com/edit/typescript-cd2gjp?file=index.ts&devtoolsheight=100) @@ -27,18 +27,49 @@ import { of } from 'rxjs'; import { tap, map } from 'rxjs/operators'; const source = of(1, 2, 3, 4, 5); -//transparently log values from source with 'do' +// transparently log values from source with 'tap' const example = source.pipe( tap(val => console.log(`BEFORE MAP: ${val}`)), map(val => val + 10), tap(val => console.log(`AFTER MAP: ${val}`)) ); -//'do' does not transform values +//'tap' does not transform values //output: 11...12...13...14...15 const subscribe = example.subscribe(val => console.log(val)); ``` +##### Example 1: Using tap with object + +( +[StackBlitz](https://stackblitz.com/edit/typescript-3xykpb?file=index.ts&devtoolsheight=100)) + +```js +// RxJS v6+ +import { of } from 'rxjs'; +import { tap, map } from 'rxjs/operators'; + +const source = of(1, 2, 3, 4, 5); + +// tap also accepts an object map to log next, error, and complete +const example = source + .pipe( + map(val => val + 10), + tap({ + next: val => { + // on next 11, etc. + console.log('on next', val); + }, + error: error => { + console.log('on error', error.message); + }, + complete: () => console.log('on complete') + }) + ) + // output: 11, 12, 13, 14, 15 + .subscribe(val => console.log(val)); +``` + ### Related Recipes - [Breakout Game](../../recipes/breakout-game.md) @@ -56,8 +87,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [do](http://reactivex.io/documentation/operators/do.html) :newspaper: - - Official docs +- [tap](https://rxjs.dev/api/operators/tap) :newspaper: - Official docs - [Logging a stream with do](https://egghead.io/lessons/rxjs-logging-a-stream-with-do?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist - [Utility operator: do](https://egghead.io/lessons/rxjs-utility-operator-do?course=rxjs-beyond-the-basics-operators-in-depth) From 4473976d300353c6ce5fc1c5e51a049431016a2b Mon Sep 17 00:00:00 2001 From: btroncone Date: Tue, 23 Apr 2019 20:11:18 -0400 Subject: [PATCH 092/256] style(operators): update tap order --- SUMMARY.md | 2 +- operators/README.md | 2 +- operators/complete.md | 2 +- operators/utility/README.md | 22 +++++++++++----------- operators/utility/do.md | 2 +- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/SUMMARY.md b/SUMMARY.md index 37305e5b..e0ac2081 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -92,7 +92,7 @@ - [windowToggle](/operators/transformation/windowtoggle.md) - [windowWhen](/operators/transformation/windowwhen.md) - [Utility](/operators/utility/README.md) - - [do / tap](/operators/utility/do.md) + - [tap / do](/operators/utility/do.md) - [delay](/operators/utility/delay.md) - [delayWhen](/operators/utility/delaywhen.md) - [dematerialize](/operators/utility/dematerialize.md) diff --git a/operators/README.md b/operators/README.md index f64b5363..a4c1f922 100644 --- a/operators/README.md +++ b/operators/README.md @@ -96,7 +96,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [windowToggle](transformation/windowtoggle.md) - [windowWhen](transformation/windowwhen.md) - [Utility](utility/README.md) - - [do / tap](utility/do.md) :star: + - [tap / do](utility/do.md) :star: - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) - [dematerialize](utility/dematerialize.md) diff --git a/operators/complete.md b/operators/complete.md index 04c68e76..d7e029d7 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -30,7 +30,7 @@ _[Prefer a split by operator type?](README.md)_ - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) - [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: -- [do / tap](utility/do.md) :star: +- [tap / do](utility/do.md) :star: - [empty](creation/empty.md) - [every](conditional/every.md) - [exhaustMap](transformation/exhaustmap.md) diff --git a/operators/utility/README.md b/operators/utility/README.md index 6c987184..a507bdf7 100644 --- a/operators/utility/README.md +++ b/operators/utility/README.md @@ -5,16 +5,16 @@ provide helpful utilities in your observable toolkit. ## Contents -* [do / tap](do.md) :star: -* [delay](delay.md) :star: -* [delayWhen](delaywhen.md) -* [dematerialize](dematerialize.md) -* [finalize / finally](finalize.md) -* [let](let.md) -* [repeat](repeat.md) -* [timeInterval](timeinterval.md) -* [timeout](timeout.md) -* [timeoutWith](timeoutwith.md) -* [toPromise](topromise.md) +- [tap / do](do.md) :star: +- [delay](delay.md) :star: +- [delayWhen](delaywhen.md) +- [dematerialize](dematerialize.md) +- [finalize / finally](finalize.md) +- [let](let.md) +- [repeat](repeat.md) +- [timeInterval](timeinterval.md) +- [timeout](timeout.md) +- [timeoutWith](timeoutwith.md) +- [toPromise](topromise.md) :star: - _commonly used_ diff --git a/operators/utility/do.md b/operators/utility/do.md index d2400ccf..e6ad783b 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -39,7 +39,7 @@ const example = source.pipe( const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 1: Using tap with object +##### Example 2: Using tap with object ( [StackBlitz](https://stackblitz.com/edit/typescript-3xykpb?file=index.ts&devtoolsheight=100)) From 2b6c23ae0c6e0a6269491056745303daae77eab0 Mon Sep 17 00:00:00 2001 From: btroncone Date: Tue, 23 Apr 2019 20:21:01 -0400 Subject: [PATCH 093/256] style(examples): update code styling --- styles/website.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/website.css b/styles/website.css index 24d562d4..fc934ac0 100644 --- a/styles/website.css +++ b/styles/website.css @@ -6,4 +6,5 @@ code[class*='language-'], pre[class*='language-'] { text-shadow: none !important; + border-radius: 4px; } From 1e3ec648000cb7e30dee1906931272e6d516adc9 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 24 Apr 2019 09:27:10 -0400 Subject: [PATCH 094/256] feat(operators): add buffer example (#191) --- operators/transformation/buffer.md | 40 ++++++++++++++++++++++++------ 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index fe95fade..7c0ede49 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -8,10 +8,36 @@ ### Examples -##### Example 1: Buffer until document click +##### Example 1: Using buffer to recognize double clicks -( [StackBlitz](https://stackblitz.com/edit/typescript-nwp2cl?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/fazimarajo/edit?js,console,output) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-x5zyn5?file=index.ts&devtoolsheight=50)) + +```js +// RxJS v6+ +import { fromEvent } from 'rxjs'; +import { buffer, filter, throttleTime } from 'rxjs/operators'; + +// streams +const clicks$ = fromEvent(document, 'click'); + +/* +Collect clicks that occur, after 250ms emit array of clicks +*/ +clicks$ + .pipe( + buffer(clicks$.pipe(throttleTime(250))), + // if array is greater than 1, double click occured + filter(clickArray => clickArray.length > 1) + ) + .subscribe(() => console.log('Double Click!')); +``` + +##### Example 2: Buffer until document click + +( +[StackBlitz](https://stackblitz.com/edit/typescript-nwp2cl?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/fazimarajo/edit?js,console,output) | [jsFiddle](https://jsfiddle.net/btroncone/7451s67k/) ) ```js @@ -36,13 +62,13 @@ const subscribe = myBufferedInterval.subscribe(val => ### Related Recipes -* [Game Loop](../../recipes/gameloop.md) +- [Game Loop](../../recipes/gameloop.md) ### Additional Resources -* [buffer](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-buffer) - :newspaper: - Official docs -* [Transformation operator: buffer](https://egghead.io/lessons/rxjs-transformation-operator-buffer?course=rxjs-beyond-the-basics-operators-in-depth) +- [buffer](https://rxjs-dev.firebaseapp.com/api/operators/buffer) :newspaper: - + Official docs +- [Transformation operator: buffer](https://egghead.io/lessons/rxjs-transformation-operator-buffer?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- From d6dec0dd3aaf781a5c0e27ee96de633a26538db0 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 24 Apr 2019 14:36:07 +0100 Subject: [PATCH 095/256] feat(recipes): add matrix digital rain recipe (#190) * Create matrix-digital-rain.md * Update README.md * Update README.md * Update SUMMARY.md * Update interval.md * Update scan.md --- README.md | 1 + SUMMARY.md | 1 + operators/creation/interval.md | 1 + operators/transformation/scan.md | 1 + recipes/README.md | 1 + recipes/matrix-digital-rain.md | 81 ++++++++++++++++++++++++++++++++ 6 files changed, 86 insertions(+) create mode 100644 recipes/matrix-digital-rain.md diff --git a/README.md b/README.md index cb310896..847d7875 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [HTTP Polling](/recipes/http-polling.md) - [Lockscreen](/recipes/lockscreen.md) +- [Matrix Digital Rain](/recipes/matrix-digital-rain.md) - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) diff --git a/SUMMARY.md b/SUMMARY.md index e0ac2081..b50ea305 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -119,6 +119,7 @@ - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - [Http Polling](/recipes/http-polling.md) - [Lockscreen](/recipes/lockscreen.md) + - [Matrix Digital Rain](/recipes/matrix-digital-rain.md) - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 5d4c34ee..9332ef6c 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -31,6 +31,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Breakout Game](../../recipes/breakout-game.md) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Matrix Digital Rain](../../recipes/matrix-digital-rain.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index cdd5b38d..778ba9a4 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -120,6 +120,7 @@ interval(1000) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) +- [Matrix Digital Rain](../../recipes/matrix-digital-rain.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) - [Smart Counter](../../recipes/smartcounter.md) diff --git a/recipes/README.md b/recipes/README.md index 6e0ac0b6..6f639799 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -13,6 +13,7 @@ Common use-cases and interesting recipes to help learn RxJS. * [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) * [HTTP Polling](http-polling.md) * [Lockscreen](lockscreen.md) +* [Matrix Digital Rain](matrix-digital-rain.md) * [Mine Sweeper Game](mine-sweeper-game.md) * [Platform Jumper Game](platform-jumper-game.md) * [Progress Bar](progressbar.md) diff --git a/recipes/matrix-digital-rain.md b/recipes/matrix-digital-rain.md new file mode 100644 index 00000000..f86fa781 --- /dev/null +++ b/recipes/matrix-digital-rain.md @@ -0,0 +1,81 @@ +# Matrix Digital Rain + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Matrix Digital Rain. + +
+ +### Example Code + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-matrix?file=index.ts) +) + +#### index.ts +```js +// RxJS v6+ +import { interval } from 'rxjs'; +import { scan } from 'rxjs/operators'; +import { render } from './html-renderer'; +import { markForRemoval, updateDrops, updateMatrix } from './matrix'; + +interval(300) + .pipe( + scan(matrix => ( + markForRemoval(matrix), + updateDrops(matrix), + updateMatrix(matrix) + ), []) + ).subscribe(render); +``` + +#### matrix.ts +```js +const drop = (x: number, y: number) => ({ x, y, d: [], remove: false }); +const random = (max: number) => Math.floor(Math.random() * Math.floor(max)); +const ranodmChar = () => String.fromCharCode(random(128)); + +export const markForRemoval = matrix => + matrix.forEach(drop => drop.remove = drop.remove + ? true + : drop.d.length > 20); +export const updateDrops = matrix => + matrix.forEach(drop => drop.d = drop.remove + ? drop.d.slice(1).map(e => ranodmChar()) + : [ + ranodmChar(), + ...drop.d.map(e => ranodmChar()) + ]); +export const updateMatrix = matrix => [ + ...matrix, + drop(random(window.innerHeight) / 4, random(window.innerWidth)) +]; +``` + +#### html-renderer.ts +```js +const createElem = drop => { + const elem = document.createElement('div'); + elem.style.position = 'absolute'; + elem.style.marginTop = drop.x + 'px'; + elem.style.marginLeft = drop.y + 'px'; + elem.style.fontSize = '12px'; + elem.innerHTML = drop.d.reduce((acc, c) => acc += '
' + c, ''); + elem.style['color'] = `rgb(21, ${100 + drop.d.length * 10}, 21)`; + return elem; +} + +export const render = matrix => { + document.body.innerHTML = ''; + const container = document.createElement('div'); + container.style.position = 'relative'; + matrix.forEach(m => container.appendChild(createElem(m))); + document.body.appendChild(container); +} +``` + +### Operators Used + +- [interval](../operators/creation/interval.md) +- [scan](../operators/transformation/scan.md) From ab2cbcbc294ce6e346a86333c46f575b063b9e45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Zvjerkovi=C4=87?= Date: Thu, 25 Apr 2019 14:51:02 +0200 Subject: [PATCH 096/256] feat(operators): add takeWhile inclusive flag (#192) --- operators/filtering/takewhile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 9e0a8e48..4fb7510a 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -1,6 +1,6 @@ # takeWhile -#### signature: `takeWhile(predicate: function(value, index): boolean): Observable` +#### signature: `takeWhile(predicate: function(value, index): boolean, inclusive?: boolean): Observable` ## Emit values until provided expression is false. From d80bdf0480c2f9ea624a5976a29a054b86b98b0b Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 09:02:07 -0400 Subject: [PATCH 097/256] feat(operators): add takeWhile inclusive example --- operators/combination/forkjoin.md | 2 +- operators/filtering/takewhile.md | 26 +++++++++++++++++++++++--- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index fbf88505..1b321bb6 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -39,7 +39,7 @@ correct choice. In these cases you may be better off with an operator like ### Examples -##### Example 1: (RxJS 6.5+) Using a dictionary of sources +##### Example 1: (v6.5+) Using a dictionary of sources ( [StackBlitz](https://stackblitz.com/edit/typescript-u5pzuf?file=index.ts&devtoolsheight=100) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 4fb7510a..e26c4230 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -28,7 +28,27 @@ const example = source.pipe(takeWhile(val => val <= 4)); const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 2: Difference between takeWhile() and filter() +##### Example 2: (v6.4+) takeWhile with inclusive flag + +( +[StackBlitz](https://stackblitz.com/edit/typescript-3bwfup?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6.4+ +import { of } from 'rxjs'; +import { takeWhile, filter } from 'rxjs/operators'; + +const source = of(3, 3, 3, 9, 10); + +source + // with inclusive flag, the last value before complete will also be emitted + .pipe(takeWhile(val => val === 3, true)) + // log: 3, 3, 3, 9 + .subscribe(console.log); +``` + +##### Example 3: Difference between takeWhile() and filter() ( [StackBlitz](https://stackblitz.com/edit/typescript-roozza?file=index.ts&devtoolsheight=100) @@ -44,12 +64,12 @@ import { takeWhile, filter } from 'rxjs/operators'; const source = of(3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3); // allow values until value from source equals 3, then complete -// output: [3, 3, 3] +// log: 3, 3, 3 source .pipe(takeWhile(it => it === 3)) .subscribe(val => console.log('takeWhile', val)); -// output: [3, 3, 3, 3, 3, 3, 3] +// log: 3, 3, 3, 3, 3, 3, 3 source .pipe(filter(it => it === 3)) .subscribe(val => console.log('filter', val)); From 930a65e393e6dbd904774685cc1c92d8eb3ffd32 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 09:04:16 -0400 Subject: [PATCH 098/256] style(operators): fix takeWhile example formatting --- operators/filtering/takewhile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index e26c4230..34be71e0 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -48,7 +48,7 @@ source .subscribe(console.log); ``` -##### Example 3: Difference between takeWhile() and filter() +##### Example 3: Difference between `takeWhile` and [`filter`](filter.md) ( [StackBlitz](https://stackblitz.com/edit/typescript-roozza?file=index.ts&devtoolsheight=100) From 02dc3c464edf020234e5fbefeff45272fd1b5ac6 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 09:05:09 -0400 Subject: [PATCH 099/256] fix(operators): update takeWhile doc reference --- operators/filtering/takewhile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 34be71e0..aad81927 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -89,7 +89,7 @@ source ### Additional Resources -- [takeWhile](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile) +- [takeWhile](https://rxjs-dev.firebaseapp.com/api/operators/takeWhile) :newspaper: - Official docs - [Completing a stream with takeWhile](https://egghead.io/lessons/rxjs-completing-a-stream-with-takewhile?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist From dfe243e06da074c69438863537974fddb41032a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Zvjerkovi=C4=87?= Date: Thu, 25 Apr 2019 15:32:00 +0200 Subject: [PATCH 100/256] feat(operators): add takeWhile tip for inclusive (#193) * feat(operators): add takeWhile inclusive flag * feat(operators): add takeWhile inclusive parameter description --- operators/filtering/takewhile.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index aad81927..4329fa40 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -4,6 +4,12 @@ ## Emit values until provided expression is false. +--- + +:bulb: When optional `inclusive` parameter is set to `true` it will also emit the first item that didn't pass the predicate. + +--- +
### Examples From 682251a5ef9fb58b8e2669aad03e080593505a63 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 12:51:10 -0400 Subject: [PATCH 101/256] style(operators): update takeWhile formatting --- operators/filtering/takewhile.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index aad81927..6af5eccc 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -21,7 +21,7 @@ import { of } from 'rxjs'; import { takeWhile } from 'rxjs/operators'; //emit 1,2,3,4,5 -const source = of(1, 2, 3, 4, 5); +const source$ = of(1, 2, 3, 4, 5); //allow values until value from source is greater than 4, then complete const example = source.pipe(takeWhile(val => val <= 4)); //output: 1,2,3,4 @@ -39,12 +39,12 @@ const subscribe = example.subscribe(val => console.log(val)); import { of } from 'rxjs'; import { takeWhile, filter } from 'rxjs/operators'; -const source = of(3, 3, 3, 9, 10); +const source$ = of(1, 2, 3, 9); -source +source$ // with inclusive flag, the last value before complete will also be emitted - .pipe(takeWhile(val => val === 3, true)) - // log: 3, 3, 3, 9 + .pipe(takeWhile(val => val <= 3, true)) + // log: 1, 2, 3, 9 .subscribe(console.log); ``` @@ -61,16 +61,16 @@ import { of } from 'rxjs'; import { takeWhile, filter } from 'rxjs/operators'; // emit 3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3 -const source = of(3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3); +const source$ = of(3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3); // allow values until value from source equals 3, then complete // log: 3, 3, 3 -source +source$ .pipe(takeWhile(it => it === 3)) .subscribe(val => console.log('takeWhile', val)); // log: 3, 3, 3, 3, 3, 3, 3 -source +source$ .pipe(filter(it => it === 3)) .subscribe(val => console.log('filter', val)); ``` From 9cde51341bd28385404777254bc02b9190199cc5 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 12:51:56 -0400 Subject: [PATCH 102/256] style(operators): takeWhile formatting update --- operators/filtering/takewhile.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 37cc298e..8ccdc2ba 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -6,7 +6,8 @@ --- -:bulb: When optional `inclusive` parameter is set to `true` it will also emit the first item that didn't pass the predicate. +:bulb: When the optional `inclusive` parameter is set to `true` it will also +emit the first item that didn't pass the predicate. --- From 604a3523052871106ba214eac53ce0677ed788bf Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 12:56:49 -0400 Subject: [PATCH 103/256] style(operators): update takeWhile formatting --- operators/filtering/takewhile.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 8ccdc2ba..1a6e8710 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -29,10 +29,12 @@ import { takeWhile } from 'rxjs/operators'; //emit 1,2,3,4,5 const source$ = of(1, 2, 3, 4, 5); + //allow values until value from source is greater than 4, then complete -const example = source.pipe(takeWhile(val => val <= 4)); -//output: 1,2,3,4 -const subscribe = example.subscribe(val => console.log(val)); +source$ + .pipe(takeWhile(val => val <= 4)); + // log: 1,2,3,4 + .subscribe(val => console.log(val)); ``` ##### Example 2: (v6.4+) takeWhile with inclusive flag @@ -71,14 +73,14 @@ import { takeWhile, filter } from 'rxjs/operators'; const source$ = of(3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3); // allow values until value from source equals 3, then complete -// log: 3, 3, 3 source$ .pipe(takeWhile(it => it === 3)) + // log: 3, 3, 3 .subscribe(val => console.log('takeWhile', val)); -// log: 3, 3, 3, 3, 3, 3, 3 source$ .pipe(filter(it => it === 3)) + // log: 3, 3, 3, 3, 3, 3, 3 .subscribe(val => console.log('filter', val)); ``` From 3d9672f399626033bdcd0ee985c8d04d92631b19 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 13:01:44 -0400 Subject: [PATCH 104/256] style(operators): update takeWhile explanation --- operators/filtering/takewhile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 1a6e8710..5155f416 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -51,7 +51,7 @@ import { takeWhile, filter } from 'rxjs/operators'; const source$ = of(1, 2, 3, 9); source$ - // with inclusive flag, the last value before complete will also be emitted + // with inclusive flag, the value causing the predicate to return false will also be emitted .pipe(takeWhile(val => val <= 3, true)) // log: 1, 2, 3, 9 .subscribe(console.log); From 9fbcf986928f2f39dc43687ba1df33b262e3cefe Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 16:27:38 -0400 Subject: [PATCH 105/256] feat(operators): add endWith operators --- SUMMARY.md | 1 + operators/README.md | 1 + operators/combination/README.md | 33 ++++++----- operators/combination/endwith.md | 94 ++++++++++++++++++++++++++++++++ operators/complete.md | 1 + 5 files changed, 115 insertions(+), 15 deletions(-) create mode 100644 operators/combination/endwith.md diff --git a/SUMMARY.md b/SUMMARY.md index b50ea305..2d00233a 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -8,6 +8,7 @@ - [combineLatest](/operators/combination/combinelatest.md) - [concat](/operators/combination/concat.md) - [concatAll](/operators/combination/concatall.md) + - [endWith](/operators/combination/endwith.md) - [forkJoin](/operators/combination/forkjoin.md) - [merge](/operators/combination/merge.md) - [mergeAll](/operators/combination/mergeall.md) diff --git a/operators/README.md b/operators/README.md index a4c1f922..d68d472a 100644 --- a/operators/README.md +++ b/operators/README.md @@ -12,6 +12,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [combineLatest](combination/combinelatest.md) :star: - [concat](combination/concat.md) :star: - [concatAll](combination/concatall.md) + - [endWith](combination/endwith.md) - [forkJoin](combination/forkjoin.md) - [merge](combination/merge.md) :star: - [mergeAll](combination/mergeall.md) diff --git a/operators/combination/README.md b/operators/combination/README.md index cd5a48f7..49c6e8a7 100644 --- a/operators/combination/README.md +++ b/operators/combination/README.md @@ -1,20 +1,23 @@ # Combination Operators -The combination operators allow the joining of information from multiple observables. -Order, time, and structure of emitted values is the primary variation among these operators. +The combination operators allow the joining of information from multiple +observables. Order, time, and structure of emitted values is the primary +variation among these operators. ## Contents -* [combineAll](combineall.md) -* [combineLatest](combinelatest.md) :star: -* [concat](concat.md) :star: -* [concatAll](concatall.md) -* [forkJoin](forkjoin.md) -* [merge](merge.md) :star: -* [mergeAll](mergeall.md) -* [pairwise](pairwise.md) -* [race](race.md) -* [startWith](startwith.md) :star: -* [withLatestFrom](withlatestfrom.md) :star: -* [zip](zip.md) -:star: - *commonly used* +- [combineAll](combineall.md) +- [combineLatest](combinelatest.md) :star: +- [concat](concat.md) :star: +- [concatAll](concatall.md) +- [endWith](endwith.md) +- [forkJoin](forkjoin.md) +- [merge](merge.md) :star: +- [mergeAll](mergeall.md) +- [pairwise](pairwise.md) +- [race](race.md) +- [startWith](startwith.md) :star: +- [withLatestFrom](withlatestfrom.md) :star: +- [zip](zip.md) + +:star: - _commonly used_ diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md new file mode 100644 index 00000000..34afeee5 --- /dev/null +++ b/operators/combination/endwith.md @@ -0,0 +1,94 @@ +# endWith + +#### signature: `endWith(an: Values): Observable` + +## Emit given value(s) on completion. + +--- + +:bulb: If you want to start with a value instead, check out +[`startWith`](startWith.md)! + +:bulb: If you want to perform an action on completion, but do not want to emit a +value, check out [`finalize`](../utility/finalize.md)! + +--- + +
+ +### Examples + +##### Example 1: Basic `endWith` example + +( +[StackBlitz](https://stackblitz.com/edit/typescript-gexe9u?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { endWith } from 'rxjs/operators'; +import { of } from 'rxjs'; + +const source$ = of('Hello', 'Friend', 'Goodbye'); + +source$ + // emit on completion + .pipe(endWith('Friend')) + // 'Hello', 'Friend', 'Goodbye', 'Friend' + .subscribe(console.log(val)); +``` + +##### Example 2: endWith multiple values + +( +[StackBlitz](https://stackblitz.com/edit/typescript-dyed7x?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { endWith } from 'rxjs/operators'; +import { of } from 'rxjs'; + +const source$ = of('Hello', 'Friend'); + +source$ + // emit on completion + .pipe(endWith('Goodbye', 'Friend')) + // 'Hello', 'Friend', 'Goodbye', 'Friend' + .subscribe(console.log(val)); +``` + +##### Example 3: Comparison to [`finalize`](../utility/finalize.md) + +( +[StackBlitz](https://stackblitz.com/edit/typescript-lkk1pj?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { endWith, finalize } from 'rxjs/operators'; +import { of } from 'rxjs'; + +const source$ = of('Hello', 'Friend'); + +source$ + // emit on completion + .pipe( + endWith('Goodbye', 'Friend'), + // this function is invoke when unsubscribe methods are called + finalize(() => console.log('Finally')) + ) + // 'Hello', 'Friend', 'Goodbye', 'Friend' + .subscribe(val => console.log(val)); +// 'Finally' +``` + +### Additional Resources + +- [endWith](https://rxjs-dev.firebaseapp.com/api/operators/endWith) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/endWith.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/endWith.ts) diff --git a/operators/complete.md b/operators/complete.md index d7e029d7..88ad7b1d 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -30,6 +30,7 @@ _[Prefer a split by operator type?](README.md)_ - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) - [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: +- [endWith](combination/endwith.md) - [tap / do](utility/do.md) :star: - [empty](creation/empty.md) - [every](conditional/every.md) From c6cfa0608053b61ebfe47a223dea11f47d113ff8 Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 25 Apr 2019 20:16:18 -0400 Subject: [PATCH 106/256] feat(operators): add distinctUntilKeyChanged --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/filtering/README.md | 1 + operators/filtering/distinctuntilchanged.md | 67 ++++++++++++------- .../filtering/distinctuntilkeychanged.md | 45 +++++++++++++ 6 files changed, 93 insertions(+), 23 deletions(-) create mode 100644 operators/filtering/distinctuntilkeychanged.md diff --git a/SUMMARY.md b/SUMMARY.md index 2d00233a..b2ca78cb 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -50,6 +50,7 @@ - [debounce](/operators/filtering/debounce.md) - [debounceTime](/operators/filtering/debouncetime.md) - [distinctUntilChanged](/operators/filtering/distinctuntilchanged.md) + - [distinctUntilKeyChanged](/operators/filtering/distinctuntilkeychanged.md) - [filter](/operators/filtering/filter.md) - [first](/operators/filtering/first.md) - [ignoreElements](/operators/filtering/ignoreelements.md) diff --git a/operators/README.md b/operators/README.md index d68d472a..726f337f 100644 --- a/operators/README.md +++ b/operators/README.md @@ -49,6 +49,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [debounce](filtering/debounce.md) - [debounceTime](filtering/debouncetime.md) :star: - [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: + - [distinctUntilKeyChanged](distinctuntilkeychanged.md) - [filter](filtering/filter.md) :star: - [first](filtering/first.md) - [ignoreElements](filtering/ignoreelements.md) diff --git a/operators/complete.md b/operators/complete.md index 88ad7b1d..b03aa968 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -30,6 +30,7 @@ _[Prefer a split by operator type?](README.md)_ - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) - [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: +- [distinctUntilKeyChanged](filtering/distinctuntilkeychanged.md) - [endWith](combination/endwith.md) - [tap / do](utility/do.md) :star: - [empty](creation/empty.md) diff --git a/operators/filtering/README.md b/operators/filtering/README.md index 4a5f9591..29b97762 100644 --- a/operators/filtering/README.md +++ b/operators/filtering/README.md @@ -14,6 +14,7 @@ with - [debounce](debounce.md) - [debounceTime](debouncetime.md) :star: - [distinctUntilChanged](distinctuntilchanged.md) :star: +- [distinctUntilKeyChanged](distinctuntilkeychanged.md) - [filter](filter.md) :star: - [first](first.md) - [ignoreElements](ignoreelements.md) diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 62dbc694..941ab12f 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -9,6 +9,9 @@ :bulb: distinctUntilChanged uses `===` comparison by default, object references must match! +:bulb: If you want to compare based on an object property, you can use +[`distinctUntilKeyChanged`](distinctuntilkeychanged.md) instead! + ---
@@ -19,33 +22,27 @@ must match! ( [StackBlitz](https://stackblitz.com/edit/typescript-bsb8mw?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/qoyoxeheva/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/xc2vzct7/) ) +) ```js // RxJS v6+ import { from } from 'rxjs'; import { distinctUntilChanged } from 'rxjs/operators'; -//only output distinct values, based on the last emitted value -const myArrayWithDuplicatesInARow = from([1, 1, 2, 2, 3, 1, 2, 3]); +// only output distinct values, based on the last emitted value +const source$ = from([1, 1, 2, 2, 3, 3]); -const distinctSub = myArrayWithDuplicatesInARow +source$ .pipe(distinctUntilChanged()) - //output: 1,2,3,1,2,3 - .subscribe(val => console.log('DISTINCT SUB:', val)); - -const nonDistinctSub = myArrayWithDuplicatesInARow - //output: 1,1,2,2,3,1,2,3 - .subscribe(val => console.log('NON DISTINCT SUB:', val)); + // output: 1,2,3 + .subscribe(console.log); ``` ##### Example 2: distinctUntilChanged with objects ( [StackBlitz](https://stackblitz.com/edit/typescript-moe7mh?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/mexocipave/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/t4ava5b4/) ) +) ```js // RxJS v6+ @@ -53,17 +50,41 @@ import { from } from 'rxjs'; import { distinctUntilChanged } from 'rxjs/operators'; const sampleObject = { name: 'Test' }; + //Objects must be same reference -const myArrayWithDuplicateObjects = from([ - sampleObject, - sampleObject, - sampleObject -]); -//only out distinct objects, based on last emitted value -const nonDistinctObjects = myArrayWithDuplicateObjects +const source$ = from([sampleObject, sampleObject, sampleObject]); + +// only emit distinct objects, based on last emitted value +source$ .pipe(distinctUntilChanged()) - //output: 'DISTINCT OBJECTS: {name: 'Test'} - .subscribe(val => console.log('DISTINCT OBJECTS:', val)); + // output: {name: 'Test'} + .subscribe(console.log); +``` + +##### Example 3: Using custom comparer function + +( +[StackBlitz](https://stackblitz.com/edit/typescript-hzta27?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { from } from 'rxjs'; +import { distinctUntilChanged } from 'rxjs/operators'; + +// only output distinct values, based on the last emitted value +const source$ = from([ + { name: 'Brian' }, + { name: 'Joe' }, + { name: 'Joe' }, + { name: 'Sue' } +]); + +source$ + // custom compare for name + .pipe(distinctUntilChanged((prev, curr) => prev.name === curr.name)) + // output: { name: 'Brian }, { name: 'Joe' }, { name: 'Sue' } + .subscribe(console.log); ``` ### Related Recipes @@ -73,7 +94,7 @@ const nonDistinctObjects = myArrayWithDuplicateObjects ### Additional Resources -- [distinctUntilChanged](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-distinctUntilChanged) +- [distinctUntilChanged](https://rxjs.dev/api/operators/distinctUntilChanged) :newspaper: - Official docs - [Filtering operator: distinct and distinctUntilChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-and-distinctuntilchanged?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md new file mode 100644 index 00000000..e446614f --- /dev/null +++ b/operators/filtering/distinctuntilkeychanged.md @@ -0,0 +1,45 @@ +# distinctUntilKeyChanged + +#### signature: `distinctUntilKeyChanged(key, compare: fn): Observable` + +## Only emit when the specified key value has changed + +
+ +### Examples + +##### Example 1: Compare based on key + +( +[StackBlitz](https://stackblitz.com/edit/typescript-hzta27?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { from } from 'rxjs'; +import { distinctUntilKeyChanged } from 'rxjs/operators'; + +// only output distinct values, based on the last emitted value +const source$ = from([ + { name: 'Brian' }, + { name: 'Joe' }, + { name: 'Joe' }, + { name: 'Sue' } +]); + +source$ + // custom compare based on name property + .pipe(distinctUntilKeyChanged('name')) + // output: { name: 'Brian }, { name: 'Joe' }, { name: 'Sue' } + .subscribe(console.log); +``` + +### Additional Resources + +- [distinctUntilKeyChanged](https://rxjs.dev/api/operators/distinctUntilKeyChanged) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilKeyChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilKeyChanged.ts) From b5657a5903a6fb48e306bdf29e520870868a498e Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 25 Apr 2019 21:04:07 -0400 Subject: [PATCH 107/256] feat(operators): update combineLatest examples --- operators/combination/combinelatest.md | 94 +++++++++++--------------- 1 file changed, 40 insertions(+), 54 deletions(-) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index ff4b85bc..2bb7b087 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -6,8 +6,6 @@ --- -:bulb: This operator can be used as either a static or instance method! - :bulb: [combineAll](combineall.md) can be used to apply combineLatest to emitted observables when a source completes! @@ -37,32 +35,25 @@ is likely a better option. ### Examples -( -[example tests](https://github.com/btroncone/learn-rxjs/blob/master/operators/specs/combination/combinelatest-spec.ts) -) - ##### Example 1: Combining observables emitting at 3 intervals ( [StackBlitz](https://stackblitz.com/edit/typescript-vadvm2?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/tinumesuda/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/mygy9j86/69/) ) +) ```js // RxJS v6+ import { timer, combineLatest } from 'rxjs'; -//timerOne emits first value at 1s, then once every 4s -const timerOne = timer(1000, 4000); -//timerTwo emits first value at 2s, then once every 4s -const timerTwo = timer(2000, 4000); -//timerThree emits first value at 3s, then once every 4s -const timerThree = timer(3000, 4000); - -//when one timer emits, emit the latest values from each timer as an array -const combined = combineLatest(timerOne, timerTwo, timerThree); +// timerOne emits first value at 1s, then once every 4s +const timerOne$ = timer(1000, 4000); +// timerTwo emits first value at 2s, then once every 4s +const timerTwo$ = timer(2000, 4000); +// timerThree emits first value at 3s, then once every 4s +const timerThree$ = timer(3000, 4000); -const subscribe = combined.subscribe( +// when one timer emits, emit the latest values from each timer as an array +combineLatest(timerOne$, timerTwo$, timerThree$).subscribe( ([timerValOne, timerValTwo, timerValThree]) => { /* Example: @@ -83,78 +74,73 @@ const subscribe = combined.subscribe( ( [StackBlitz](https://stackblitz.com/edit/typescript-prtbvd?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/codotapula/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/uehasmb6/) ) +) ```js // RxJS v6+ import { timer, combineLatest } from 'rxjs'; -//timerOne emits first value at 1s, then once every 4s -const timerOne = timer(1000, 4000); -//timerTwo emits first value at 2s, then once every 4s -const timerTwo = timer(2000, 4000); -//timerThree emits first value at 3s, then once every 4s -const timerThree = timer(3000, 4000); - -//combineLatest also takes an optional projection function -const combinedProject = combineLatest( - timerOne, - timerTwo, - timerThree, +const timerOne$ = timer(1000, 4000); +const timerTwo$ = timer(2000, 4000); +const timerThree$ = timer(3000, 4000); + +combineLatest( + timerOne$, + timerTwo$, + timerThree$, + // combineLatest also takes an optional projection function (one, two, three) => { return `Timer One (Proj) Latest: ${one}, Timer Two (Proj) Latest: ${two}, Timer Three (Proj) Latest: ${three}`; } -); -//log values -const subscribe = combinedProject.subscribe(latestValuesProject => - console.log(latestValuesProject) -); +).subscribe(console.log); ``` ##### Example 3: Combining events from 2 buttons ( [StackBlitz](https://stackblitz.com/edit/typescript-ihcxud?file=index.ts&devtoolsheight=50) -| [jsBin](http://jsbin.com/buridepaxi/edit?html,js,output) | -[jsFiddle](https://jsfiddle.net/btroncone/9rsf6t9v/14/) ) +) ```js // RxJS v6+ import { fromEvent, combineLatest } from 'rxjs'; import { mapTo, startWith, scan, tap, map } from 'rxjs/operators'; -// helper function to set HTML -const setHtml = id => val => (document.getElementById(id).innerHTML = val); +// elem refs +const redTotal = document.getElementById('red-total'); +const blackTotal = document.getElementById('black-total'); +const total = document.getElementById('total'); const addOneClick$ = id => fromEvent(document.getElementById(id), 'click').pipe( // map every click to 1 mapTo(1), - startWith(0), // keep a running total - scan((acc, curr) => acc + curr), - // set HTML for appropriate element - tap(setHtml(`${id}Total`)) + scan((acc, curr) => acc + curr, 0), + startWith(0) ); -const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black')) - .pipe(map(([val1, val2]) => val1 + val2)) - .subscribe(setHtml('total')); +combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe( + ([red, black]: any) => { + redTotal.innerHTML = red; + blackTotal.innerHTML = black; + total.innerHTML = red + black; + } +); ``` ###### HTML ```html
- - + +
-
Red:
-
Black:
-
Total:
+
Red:
+
Black:
+
Total:
``` ### Related Recipes @@ -167,7 +153,7 @@ const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black')) ### Additional Resources -- [combineLatest](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-combineLatest) +- [combineLatest](https://rxjs.dev/api/index/function/combineLatest) :newspaper: - Official docs - [Combining streams with combineLatest](https://egghead.io/lessons/rxjs-combining-streams-with-combinelatest?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist From 49f0c2f0e3c843f6217a9aeb80309968e35f444f Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 21:40:47 -0400 Subject: [PATCH 108/256] feat(operators): update concat examples --- operators/combination/concat.md | 111 ++++++++++---------------------- 1 file changed, 34 insertions(+), 77 deletions(-) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index a5371c07..588ffde6 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -2,15 +2,13 @@ #### signature: `concat(observables: ...*): Observable` -## Subscribe to observables in order as previous completes, emit values. +## Subscribe to observables in order as previous completes --- :bulb: You can think of concat like a line at a ATM, the next transaction (subscription) cannot start until the previous completes! -:bulb: This operator can be used as either a static or instance method! - :bulb: If throughput, not order, is a primary concern, try [merge](merge.md) instead! @@ -20,108 +18,67 @@ instead! ### Examples -( -[example tests](https://github.com/btroncone/learn-rxjs/blob/master/operators/specs/combination/concat-spec.ts) -) - -##### Example 1: concat 2 basic observables - -( -[StackBlitz](https://stackblitz.com/edit/typescript-ec6wed?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/gegubutele/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/rxwnr3hh/) ) - -```js -// RxJS v6+ -import { concat } from 'rxjs/operators'; -import { of } from 'rxjs'; - -//emits 1,2,3 -const sourceOne = of(1, 2, 3); -//emits 4,5,6 -const sourceTwo = of(4, 5, 6); -//emit values from sourceOne, when complete, subscribe to sourceTwo -const example = sourceOne.pipe(concat(sourceTwo)); -//output: 1,2,3,4,5,6 -const subscribe = example.subscribe(val => - console.log('Example: Basic concat:', val) -); -``` - -##### Example 2: concat as static method +##### Example 1: Basic concat usage with three observables ( [StackBlitz](https://stackblitz.com/edit/typescript-ks8chl?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/xihagewune/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/5qdtvhu8/) ) +) ```js // RxJS v6+ import { of, concat } from 'rxjs'; -//emits 1,2,3 -const sourceOne = of(1, 2, 3); -//emits 4,5,6 -const sourceTwo = of(4, 5, 6); - -//used as static -const example = concat(sourceOne, sourceTwo); -//output: 1,2,3,4,5,6 -const subscribe = example.subscribe(val => console.log(val)); +concat( + of(1, 2, 3), + // subscribed after first completes + of(4, 5, 6), + // subscribed after second completes + of(7, 8, 9) +) +// log: 1, 2, 3, 4, 5, 6, 7, 8, 9 +.subscribe(console.log); ``` -##### Example 3: concat with delayed source +##### Example 2: concat with delayed observable ( -[StackBlitz](https://stackblitz.com/edit/typescript-vsphry?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/nezonosubi/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/L2s49msx/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-vsphry?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ -import { delay, concat } from 'rxjs/operators'; -import { of } from 'rxjs'; - -//emits 1,2,3 -const sourceOne = of(1, 2, 3); -//emits 4,5,6 -const sourceTwo = of(4, 5, 6); - -//delay 3 seconds then emit -const sourceThree = sourceOne.pipe(delay(3000)); -//sourceTwo waits on sourceOne to complete before subscribing -const example = sourceThree.pipe(concat(sourceTwo)); -//output: 1,2,3,4,5,6 -const subscribe = example.subscribe(val => - console.log('Example: Delayed source one:', val) -); +import { of, concat } from 'rxjs'; +import { delay } from 'rxjs/operators'; + +concat( + of(1,2,3).pipe(delay(3000)), + // after 3s, the first observable will complete and subsquent observable subscribed with values emitted + of(4,5,6) +) +// log: 1,2,3,4,5,6 +.subscribe(console.log); ``` -##### Example 4: concat with source that does not complete +##### Example 3: (Warning!) concat with source that does not complete ( -[StackBlitz](https://stackblitz.com/edit/typescript-njc2jw?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/vixajoxaze/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/4bhtb81u/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-njc2jw?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ import { interval, of, concat } from 'rxjs'; -//when source never completes, the subsequent observables never runs -const source = concat(interval(1000), of('This', 'Never', 'Runs')); -//outputs: 0,1,2,3,4.... -const subscribe = source.subscribe(val => - console.log( - 'Example: Source never completes, second observable never runs:', - val - ) -); +// when source never completes, any subsequent observables never run +concat( + interval(1000), + of('This', 'Never', 'Runs') +) +// log: 1,2,3,4..... +.subscribe(console.log); ``` ### Additional Resources -- [concat](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concat) +- [concat](https://rxjs.dev/api/index/function/concat) :newspaper: - Official docs - [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz From 850a21dc1287af4fd4980e2ba3ad0e298cf21186 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 22:13:55 -0400 Subject: [PATCH 109/256] feat(operators): add find operator --- SUMMARY.md | 1 + operators/README.md | 1 + operators/complete.md | 1 + operators/filtering/README.md | 1 + operators/filtering/find.md | 52 +++++++++++++++++++++++++++++++++++ 5 files changed, 56 insertions(+) create mode 100644 operators/filtering/find.md diff --git a/SUMMARY.md b/SUMMARY.md index b2ca78cb..83a7c36c 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -52,6 +52,7 @@ - [distinctUntilChanged](/operators/filtering/distinctuntilchanged.md) - [distinctUntilKeyChanged](/operators/filtering/distinctuntilkeychanged.md) - [filter](/operators/filtering/filter.md) + - [find](/operators/filtering/find.md) - [first](/operators/filtering/first.md) - [ignoreElements](/operators/filtering/ignoreelements.md) - [last](/operators/filtering/last.md) diff --git a/operators/README.md b/operators/README.md index 726f337f..fa226da0 100644 --- a/operators/README.md +++ b/operators/README.md @@ -51,6 +51,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: - [distinctUntilKeyChanged](distinctuntilkeychanged.md) - [filter](filtering/filter.md) :star: + - [find](filtering/find.md) - [first](filtering/first.md) - [ignoreElements](filtering/ignoreelements.md) - [last](filtering/last.md) diff --git a/operators/complete.md b/operators/complete.md index b03aa968..9a855381 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -39,6 +39,7 @@ _[Prefer a split by operator type?](README.md)_ - [expand](transformation/expand.md) - [filter](filtering/filter.md) :star: - [finalize / finally](utility/finalize.md) +- [find](filtering/find.md) - [first](filtering/first.md) - [forkJoin](combination/forkjoin.md) - [from](creation/from.md) :star: diff --git a/operators/filtering/README.md b/operators/filtering/README.md index 29b97762..a97ae2de 100644 --- a/operators/filtering/README.md +++ b/operators/filtering/README.md @@ -16,6 +16,7 @@ with - [distinctUntilChanged](distinctuntilchanged.md) :star: - [distinctUntilKeyChanged](distinctuntilkeychanged.md) - [filter](filter.md) :star: +- [find](find.md) - [first](first.md) - [ignoreElements](ignoreelements.md) - [last](last.md) diff --git a/operators/filtering/find.md b/operators/filtering/find.md new file mode 100644 index 00000000..2b743d8c --- /dev/null +++ b/operators/filtering/find.md @@ -0,0 +1,52 @@ +# find + +#### signature: `find(predicate: function)` + +## Emit the first item that passes predicate, complete. + +--- + +:bulb: If you always want the first item emitted, regardless of condition, try [`first`](first.md)! + +--- + +
+ +### Examples + + +##### Example 1: Find click inside box, repeat when click occurs outside of box + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-hd63we?file=index.ts)) + +```js +// RxJS v6+ + +// elem ref +const status = document.getElementById('status'); + +// streams +const clicks$ = fromEvent(document, 'click'); + +clicks$ + .pipe( + find((event: any) => event.target.id === 'box'), + mapTo('Found!'), + startWith('Find me!'), + // reset when click outside box + repeatWhen(() => clicks$.pipe(filter((event: any) => event.target.id !== 'box'))) + ) +.subscribe(message => status.innerHTML = message); +``` + + +### Additional Resources + +- [find](https://rxjs-dev.firebaseapp.com/api/operators/find) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/find.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/find.ts) From 76195ecd0f487fdb2be79a3e041101e7708aec75 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 25 Apr 2019 22:19:08 -0400 Subject: [PATCH 110/256] style(operators): update formatting in find --- operators/filtering/find.md | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/operators/filtering/find.md b/operators/filtering/find.md index 2b743d8c..dd5a7970 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -6,7 +6,8 @@ --- -:bulb: If you always want the first item emitted, regardless of condition, try [`first`](first.md)! +:bulb: If you always want the first item emitted, regardless of condition, try +[`first`](first.md)! --- @@ -14,14 +15,22 @@ ### Examples - ##### Example 1: Find click inside box, repeat when click occurs outside of box -( -[StackBlitz](https://stackblitz.com/edit/rxjs-hd63we?file=index.ts)) +( [StackBlitz](https://stackblitz.com/edit/rxjs-hd63we?file=index.ts)) ```js // RxJS v6+ +import { fromEvent, interval } from 'rxjs'; +import { + find, + repeatWhen, + mapTo, + startWith, + tap, + take, + filter +} from 'rxjs/operators'; // elem ref const status = document.getElementById('status'); @@ -35,16 +44,17 @@ clicks$ mapTo('Found!'), startWith('Find me!'), // reset when click outside box - repeatWhen(() => clicks$.pipe(filter((event: any) => event.target.id !== 'box'))) + repeatWhen(() => + clicks$.pipe(filter((event: any) => event.target.id !== 'box')) + ) ) -.subscribe(message => status.innerHTML = message); + .subscribe(message => (status.innerHTML = message)); ``` - ### Additional Resources -- [find](https://rxjs-dev.firebaseapp.com/api/operators/find) - :newspaper: - Official docs +- [find](https://rxjs-dev.firebaseapp.com/api/operators/find) :newspaper: - + Official docs --- From be7b7cab54ee9931a98582f46147bb49d22f1829 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 26 Apr 2019 09:31:50 -0400 Subject: [PATCH 111/256] feat(operators): update switchMap examples --- operators/transformation/switchmap.md | 134 ++++++++++---------------- 1 file changed, 49 insertions(+), 85 deletions(-) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 236e1b61..3950e2b4 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -42,85 +42,26 @@ cancel a request if the source emits quickly enough. In these scenarios ### Examples -##### Example 1: Restart interval every 5 seconds - -( -[StackBlitz](https://stackblitz.com/edit/typescript-eb62ap?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/birepuveya/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/6pz981gd/) ) - -```js -// RxJS v6+ -import { timer, interval } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; - -//emit immediately, then every 5s -const source = timer(0, 5000); -//switch to new inner observable when source emits, emit items that are emitted -const example = source.pipe(switchMap(() => interval(500))); -//output: 0,1,2,3,4,5,6,7,8,9...0,1,2,3,4,5,6,7,8 -const subscribe = example.subscribe(val => console.log(val)); -``` - -##### Example 2: Reset on every click +##### Example 1: Restart interval on every click ( [StackBlitz](https://stackblitz.com/edit/typescript-s4pvix?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/zoruboxogo/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/y11v8aqz/) ) +) ```js // RxJS v6+ import { interval, fromEvent } from 'rxjs'; -import { switchMap, mapTo } from 'rxjs/operators'; - -//emit every click -const source = fromEvent(document, 'click'); -//if another click comes within 3s, message will not be emitted -const example = source.pipe( - switchMap(val => interval(3000).pipe(mapTo('Hello, I made it!'))) -); -//(click)...3s...'Hello I made it!'...(click)...2s(click)... -const subscribe = example.subscribe(val => console.log(val)); -``` - -##### Example 3: Using a `resultSelector` function - -( -[StackBlitz](https://stackblitz.com/edit/typescript-bmibzi?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/qobapubeze/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/nqfu534y/) ) - -```js -// RxJS v6+ -import { timer, interval } from 'rxjs'; import { switchMap } from 'rxjs/operators'; -//emit immediately, then every 5s -const source = timer(0, 5000); -//switch to new inner observable when source emits, invoke project function and emit values -const example = source.pipe( - switchMap( - _ => interval(2000), - (outerValue, innerValue, outerIndex, innerIndex) => ({ - outerValue, - innerValue, - outerIndex, - innerIndex - }) +fromEvent(document, 'click') + .pipe( + // restart counter on every click + switchMap(() => interval(1000)) ) -); -/* - Output: - {outerValue: 0, innerValue: 0, outerIndex: 0, innerIndex: 0} - {outerValue: 0, innerValue: 1, outerIndex: 0, innerIndex: 1} - {outerValue: 1, innerValue: 0, outerIndex: 1, innerIndex: 0} - {outerValue: 1, innerValue: 1, outerIndex: 1, innerIndex: 1} -*/ -const subscribe = example.subscribe(val => console.log(val)); + .subscribe(console.log); ``` -##### Example 4: Countdown timer with switchMap +##### Example 2: Countdown timer with pause and resume ( [StackBlitz](https://stackblitz.com/edit/typescript-ivdebg?file=index.ts) ) @@ -129,12 +70,15 @@ const subscribe = example.subscribe(val => console.log(val)); import { interval, fromEvent, merge, empty } from 'rxjs'; import { switchMap, scan, takeWhile, startWith, mapTo } from 'rxjs/operators'; -const countdownSeconds = 10; -const setHTML = id => val => (document.getElementById(id).innerHTML = val); +const COUNTDOWN_SECONDS = 10; + +// elem refs +const remainingLabel = document.getElementById('remaining'); const pauseButton = document.getElementById('pause'); const resumeButton = document.getElementById('resume'); -const interval$ = interval(1000).pipe(mapTo(-1)); +// streams +const interval$ = interval(1000).pipe(mapTo(-1)); const pause$ = fromEvent(pauseButton, 'click').pipe(mapTo(false)); const resume$ = fromEvent(resumeButton, 'click').pipe(mapTo(true)); @@ -142,24 +86,44 @@ const timer$ = merge(pause$, resume$) .pipe( startWith(true), switchMap(val => (val ? interval$ : empty())), - scan((acc, curr) => (curr ? curr + acc : acc), countdownSeconds), + scan((acc, curr) => (curr ? curr + acc : acc), COUNTDOWN_SECONDS), takeWhile(v => v >= 0) ) - .subscribe(setHTML('remaining')); + .subscribe((val: any) => (remainingLabel.innerHTML = val)); ``` -###### HTML - -```html -

-Time remaining: -

- - +##### Example 3: Using a `resultSelector` function + +( +[StackBlitz](https://stackblitz.com/edit/typescript-bmibzi?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { timer, interval } from 'rxjs'; +import { switchMap } from 'rxjs/operators'; + +// switch to new inner observable when source emits, emit result of project function +timer(0, 5000) + .pipe( + switchMap( + _ => interval(2000), + (outerValue, innerValue, outerIndex, innerIndex) => ({ + outerValue, + innerValue, + outerIndex, + innerIndex + }) + ) + ) + /* + Output: + {outerValue: 0, innerValue: 0, outerIndex: 0, innerIndex: 0} + {outerValue: 0, innerValue: 1, outerIndex: 0, innerIndex: 1} + {outerValue: 1, innerValue: 0, outerIndex: 1, innerIndex: 0} + {outerValue: 1, innerValue: 1, outerIndex: 1, innerIndex: 1} +*/ + .subscribe(console.log); ``` ### Related Recipes @@ -172,7 +136,7 @@ Resume Timer - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) - [Smart Counter](../../recipes/smartcounter.md) -- [Type Ahead](../../recipes/type-ahead.md) +- [Typeahead](../../recipes/type-ahead.md) ### Additional Resources From 5f97fd5a8d80fa5b1a7276dc47a153cfbcc4ed8c Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 26 Apr 2019 09:33:36 -0400 Subject: [PATCH 112/256] style(operators): fix endwith typo --- operators/combination/endwith.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 34afeee5..da996440 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -75,7 +75,7 @@ source$ // emit on completion .pipe( endWith('Goodbye', 'Friend'), - // this function is invoke when unsubscribe methods are called + // this function is invoked when unsubscribe methods are called finalize(() => console.log('Finally')) ) // 'Hello', 'Friend', 'Goodbye', 'Friend' From 60b9e6266198d2c2750dc099fda4727178f93dcf Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 29 Apr 2019 11:25:59 -0400 Subject: [PATCH 113/256] fix(typo): fix typo in operators --- concepts/rxjs-primer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index 79993c8a..c453c288 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -146,7 +146,7 @@ Or if you want to filter for specific values, you can use import { of } from 'rxjs'; import { filter } from 'rxjs/operators'; -const dataSource = from(1, 2, 3, 4, 5); +const dataSource = of(1, 2, 3, 4, 5); // subscribe to our source observable const subscription = dataSource From 9843b4041214bb8912b179adf4c74fd62d819d80 Mon Sep 17 00:00:00 2001 From: Vittorio Zamboni Date: Mon, 29 Apr 2019 18:27:31 +0100 Subject: [PATCH 114/256] fix(articles): update broken links in filtering operators examples (#196) --- concepts/rxjs-primer.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index c453c288..a730fd93 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -299,11 +299,11 @@ source.pipe(take(5)).subscribe(value => { ``` The most commonly used filtering operators are -[`debounceTime`](../operators/filtering/debouncetime), -[`distinctUntilChanged`](../operators/filtering/distinctuntilchanged), -[`filter`](../operators/filtering/filter), -[`take`](../operators/filtering/take), and -[`takeUntil`](../operators/filtering/takeuntil). +[`debounceTime`](../operators/filtering/debouncetime.md), +[`distinctUntilChanged`](../operators/filtering/distinctuntilchanged.md), +[`filter`](../operators/filtering/filter.md), +[`take`](../operators/filtering/take.md), and +[`takeUntil`](../operators/filtering/takeuntil.md). ### [Multicasting operators](../operators/multicasting/README.md) From a3e41a15e7699f2a30d3c93492bb3526efc5f86b Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 30 Apr 2019 16:00:25 -0400 Subject: [PATCH 115/256] chore(banner): update banner --- README.md | 2 +- operators/combination/combineall.md | 11 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 37 ++-- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 4 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 33 +-- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 15 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 64 +++--- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/generate.md | 2 +- operators/creation/interval.md | 4 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 4 +- operators/error_handling/catch.md | 44 ++-- operators/error_handling/retry.md | 5 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- .../filtering/distinctuntilkeychanged.md | 2 +- operators/filtering/filter.md | 4 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 35 ++-- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 27 ++- operators/transformation/buffertoggle.md | 25 +-- operators/transformation/bufferwhen.md | 12 +- operators/transformation/concatmap.md | 22 +- operators/transformation/concatmapto.md | 13 +- operators/transformation/exhaustmap.md | 39 ++-- operators/transformation/expand.md | 11 +- operators/transformation/groupby.md | 28 +-- operators/transformation/map.md | 21 +- operators/transformation/mapto.md | 12 +- operators/transformation/mergemap.md | 2 +- operators/transformation/mergescan.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 3 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 10 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 16 +- operators/utility/timeinterval.md | 24 +-- operators/utility/timeout.md | 10 +- operators/utility/timeoutwith.md | 2 +- operators/utility/topromise.md | 5 +- package.json | 8 +- recipes/alphabet-invasion-game.md | 109 +++++----- recipes/breakout-game.md | 40 ++-- recipes/catch-the-dot-game.md | 61 +++--- recipes/click-ninja-game.md | 15 +- recipes/flappy-bird-game.md | 101 +++++----- recipes/gameloop.md | 9 +- recipes/horizontal-scroll-indicator.md | 15 +- recipes/http-polling.md | 11 +- recipes/lockscreen.md | 128 +++++++----- recipes/matrix-digital-rain.md | 33 +-- recipes/mine-sweeper-game.md | 102 ++++++---- recipes/platform-jumper-game.md | 145 +++++++++----- recipes/progressbar.md | 8 +- recipes/smartcounter.md | 27 +-- recipes/space-invaders-game.md | 189 +++++++++++------- recipes/swipe-to-refresh.md | 60 +++--- recipes/tank-battle-game.md | 162 +++++++++------ recipes/type-ahead.md | 49 +++-- subjects/asyncsubject.md | 5 +- subjects/behaviorsubject.md | 29 ++- subjects/replaysubject.md | 5 +- subjects/subject.md | 7 +- 113 files changed, 1126 insertions(+), 854 deletions(-) diff --git a/README.md b/README.md index 847d7875..95d9c0eb 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -
+
### Brand New to RxJS? diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 00e8e286..6a65460d 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -
+
### Examples @@ -27,7 +27,12 @@ import { interval } from 'rxjs'; const source = interval(1000).pipe(take(2)); //map each emitted value from source to interval observable that takes 5 values const example = source.pipe( - map(val => interval(1000).pipe(map(i => `Result (${val}): ${i}`), take(5))) + map(val => + interval(1000).pipe( + map(i => `Result (${val}): ${i}`), + take(5) + ) + ) ); /* 2 values from source will map to 2 (inner) interval observables that emit every 1s @@ -52,7 +57,7 @@ const subscribe = combined.subscribe(val => console.log(val)); ### Additional Resources -* [combineAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-combineAll) +- [combineAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-combineAll) :newspaper: - Official docs --- diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 2bb7b087..401096d9 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -31,7 +31,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -
+
### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 588ffde6..15c42b63 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -14,7 +14,7 @@ instead! --- -
+
### Examples @@ -30,19 +30,20 @@ import { of, concat } from 'rxjs'; concat( of(1, 2, 3), - // subscribed after first completes - of(4, 5, 6), + // subscribed after first completes + of(4, 5, 6), // subscribed after second completes of(7, 8, 9) ) -// log: 1, 2, 3, 4, 5, 6, 7, 8, 9 -.subscribe(console.log); + // log: 1, 2, 3, 4, 5, 6, 7, 8, 9 + .subscribe(console.log); ``` ##### Example 2: concat with delayed observable ( -[StackBlitz](https://stackblitz.com/edit/typescript-vsphry?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/typescript-vsphry?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -50,36 +51,34 @@ import { of, concat } from 'rxjs'; import { delay } from 'rxjs/operators'; concat( - of(1,2,3).pipe(delay(3000)), + of(1, 2, 3).pipe(delay(3000)), // after 3s, the first observable will complete and subsquent observable subscribed with values emitted - of(4,5,6) + of(4, 5, 6) ) -// log: 1,2,3,4,5,6 -.subscribe(console.log); + // log: 1,2,3,4,5,6 + .subscribe(console.log); ``` ##### Example 3: (Warning!) concat with source that does not complete ( -[StackBlitz](https://stackblitz.com/edit/typescript-njc2jw?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/typescript-njc2jw?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ import { interval, of, concat } from 'rxjs'; // when source never completes, any subsequent observables never run -concat( - interval(1000), - of('This', 'Never', 'Runs') -) -// log: 1,2,3,4..... -.subscribe(console.log); +concat(interval(1000), of('This', 'Never', 'Runs')) + // log: 1,2,3,4..... + .subscribe(console.log); ``` ### Additional Resources -- [concat](https://rxjs.dev/api/index/function/concat) - :newspaper: - Official docs +- [concat](https://rxjs.dev/api/index/function/concat) :newspaper: - Official + docs - [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 64445256..ab2ec33a 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,7 +15,7 @@ a single operator instead! --- -
+
### Examples diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index da996440..e22836c9 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -14,7 +14,7 @@ value, check out [`finalize`](../utility/finalize.md)! --- -
+
### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 1b321bb6..8232642b 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -35,7 +35,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may be better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -
+
### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index d87d8c9a..0324bc2a 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -
+
### Examples @@ -88,7 +88,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Combination operator: merge](https://egghead.io/lessons/rxjs-combination-operator-merge?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz - [Build your own merge operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=merge#app) - :video_camera: - Kwinten Pisman + :video_camera: - Kwinten Pisman --- diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index b385b9d0..2959129f 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,7 +11,7 @@ single operator instead! --- -
+
### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index b8079580..43edd4e2 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,7 +4,7 @@ ## Emit the previous and current values as an array. -
+
### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index 441cc4b6..8ef2b571 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,7 +4,7 @@ ## The observable to emit first is used. -
+
### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 46365e09..e9240443 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,7 +12,7 @@ can also start with an initial value! --- -
+
### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index de3c0503..0efbaa1a 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,7 +11,7 @@ emits, try [combinelatest](combinelatest.md)! --- -
+
### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index c4d804eb..4ff51071 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,7 +12,7 @@ source! --- -
+
### Examples @@ -66,24 +66,29 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: get X/Y coordinates of drag start/finish (mouse down/up) ( -[StackBlitz](https://stackblitz.com/edit/rxjs-zip-mousedownup-coordinates?file=index.ts&devtoolsheight=50) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-zip-mousedownup-coordinates?file=index.ts&devtoolsheight=50) +) ```js // RxJS v6+ import { fromEvent, zip } from 'rxjs'; import { map } from 'rxjs/operators'; -const documentEvent = eventName => fromEvent(document, eventName) - .pipe(map((e: MouseEvent) => ({x: e.clientX, y: e.clientY}))); +const documentEvent = eventName => + fromEvent(document, eventName).pipe( + map((e: MouseEvent) => ({ x: e.clientX, y: e.clientY })) + ); -zip(documentEvent('mousedown'), documentEvent('mouseup')) - .subscribe(e => console.log(JSON.stringify(e))); +zip(documentEvent('mousedown'), documentEvent('mouseup')).subscribe(e => + console.log(JSON.stringify(e)) +); ``` ##### Example 4: mouse click duration ( -[StackBlitz](https://stackblitz.com/edit/rxjs-zip-mouseclickduration?file=index.ts&devtoolsheight=50) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-zip-mouseclickduration?file=index.ts&devtoolsheight=50) +) ```js // RxJS v6+ @@ -93,15 +98,11 @@ import { map } from 'rxjs/operators'; const eventTime = eventName => fromEvent(document, eventName).pipe(map(() => new Date())); -const mouseClickDuration = - zip( - eventTime('mousedown'), - eventTime('mouseup') - ).pipe( - map(([start, end]) => - Math.abs((start.getTime() - end.getTime()))) - ); - +const mouseClickDuration = zip( + eventTime('mousedown'), + eventTime('mouseup') +).pipe(map(([start, end]) => Math.abs(start.getTime() - end.getTime()))); + mouseClickDuration.subscribe(console.log); ``` diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index ef3f9236..619bb75a 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -
+
### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index ec34ed03..042b133d 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -
+
### Examples @@ -55,7 +55,8 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: Values arriving over time and completing stream prematurely due to every returning false ( -[Stackblitz](https://stackblitz.com/edit/rxjs-every-example?file=index.ts&devtoolsheight=100) ) +[Stackblitz](https://stackblitz.com/edit/rxjs-every-example?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -64,18 +65,16 @@ import { concat, of } from 'rxjs'; import { every, delay, tap } from 'rxjs/operators'; const log = console.log; -const returnCode = request => Number.isInteger(request) - ? 200 - : 400; -const fakeRequest = request => of({ code: returnCode(request) }) - .pipe( +const returnCode = request => (Number.isInteger(request) ? 200 : 400); +const fakeRequest = request => + of({ code: returnCode(request) }).pipe( tap(_ => log(request)), delay(1000) ); const apiCalls$ = concat( fakeRequest(1), - fakeRequest("invalid payload"), + fakeRequest('invalid payload'), fakeRequest(2) //this won't execute as every will return false for previous line ).pipe( every(e => e.code === 200), diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index e07d7b72..32b99af0 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Subscribe to first or second observable based on a condition -
+
### Examples diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 6f89f949..cdaa98b4 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares all values of two observables in sequence using an optional comparor function and returns an observable of a single boolean value representing whether or not the two sequences are equal. -
+
### Examples diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index 5cca888d..1ee56a46 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -4,8 +4,7 @@ ## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. - -
+
### Examples @@ -19,12 +18,12 @@ import { ajax } from 'rxjs/ajax'; const githubUsers = `https://api.github.com/users?per_page=2`; -const users = ajax(githubUsers) +const users = ajax(githubUsers); const subscribe = users.subscribe( - res => console.log(res), - err => console.error(err) - ); + res => console.log(res), + err => console.error(err) +); /* output { @@ -68,14 +67,11 @@ const subscribe = users.subscribe( ] } */ - ``` ##### Example 2: Observable that emits only the json key of the response object that is being returned from the request. -( -[StackBlitz](https://stackblitz.com/edit/rxjs-8jkrhl) -) +( [StackBlitz](https://stackblitz.com/edit/rxjs-8jkrhl) ) ```js // RxJS v6+ @@ -83,12 +79,12 @@ import { ajax } from 'rxjs/ajax'; const githubUsers = `https://api.github.com/users?per_page=2`; -const users = ajax.getJSON(githubUsers) +const users = ajax.getJSON(githubUsers); const subscribe = users.subscribe( - res => console.log(res), - err => console.error(err) - ); + res => console.log(res), + err => console.error(err) +); /* output [ @@ -114,9 +110,7 @@ const subscribe = users.subscribe( ##### Example 3: Observable that emits the error object that is being returned from the request. -( -[StackBlitz](https://stackblitz.com/edit/rxjs-vnxkth) -) +( [StackBlitz](https://stackblitz.com/edit/rxjs-vnxkth) ) ```js // RxJS v6+ @@ -124,24 +118,21 @@ import { ajax } from 'rxjs/ajax'; const githubUsers = `https://api.github.com/error`; -const users = ajax.getJSON(githubUsers) +const users = ajax.getJSON(githubUsers); const subscribe = users.subscribe( - res => console.log(res), - err => console.error(err) - ); + res => console.log(res), + err => console.error(err) +); /* output Error: ajax error 404 -*/ +*/ ``` - ##### Example 4: Ajax operator with object as input. -( -[StackBlitz](https://stackblitz.com/edit/rxjs-vqnnot) -) +( [StackBlitz](https://stackblitz.com/edit/rxjs-vqnnot) ) ```js // RxJS v6+ @@ -149,19 +140,26 @@ import { ajax } from 'rxjs/ajax'; const githubUsers = `https://api.github.com/error`; -const users = ajax({ url: githubUsers, method:"GET", headers:{ /*some headers*/ }, body: { /*in case you need a body*/ }} ) +const users = ajax({ + url: githubUsers, + method: 'GET', + headers: { + /*some headers*/ + }, + body: { + /*in case you need a body*/ + } +}); const subscribe = users.subscribe( - res => console.log(res), - err => console.error(err) - ); - + res => console.log(res), + err => console.error(err) +); ``` ### Additional Resources -- [ajax](https://rxjs.dev/api/ajax/ajax) - :newspaper: - Official docs +- [ajax](https://rxjs.dev/api/ajax/ajax) :newspaper: - Official docs --- diff --git a/operators/creation/create.md b/operators/creation/create.md index 147d0794..0dd6b1e7 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+
### Examples diff --git a/operators/creation/defer.md b/operators/creation/defer.md index 9a6c2576..0f981a53 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -12,7 +12,7 @@ is used as part of the [`iif`](../conditional/iif.md) operator! --- -
+
### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index f9f76c22..9cadbf0a 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -
+
### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index 1d91b1c2..d73f37fb 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -16,7 +16,7 @@ characters! --- -
+
### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index edc01244..0ccd698f 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -
+
### Examples diff --git a/operators/creation/generate.md b/operators/creation/generate.md index 794a8e22..b6507cc1 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -4,7 +4,7 @@ ## Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages. -
+
### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 9332ef6c..87373435 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -
+
### Examples @@ -43,7 +43,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz - [Build your own interval operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=interval#app) - :video_camera: - Kwinten Pisman + :video_camera: - Kwinten Pisman --- diff --git a/operators/creation/range.md b/operators/creation/range.md index 8965141b..a33d5b93 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -
+
### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 4d1f5769..6835db97 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -
+
### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index 5b23bfd2..a5823ee4 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -
+
### Examples @@ -57,7 +57,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz - [Build your own timer operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=timer#app) - :video_camera: - Kwinten Pisman + :video_camera: - Kwinten Pisman --- diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 3b9ae4a3..f139c496 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -
+
### Examples @@ -66,33 +66,41 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: Catching errors comparison when using switchMap/mergeMap/concatMap/exhaustMap -( [StackBlitz](https://stackblitz.com/edit/rxjs-catcherror-withmapoperators?file=index.ts&devtoolsheight=80) ) +( +[StackBlitz](https://stackblitz.com/edit/rxjs-catcherror-withmapoperators?file=index.ts&devtoolsheight=80) +) ```js // switchMap in example below can be replaced with mergeMap/concatMap/exhaustMap, the same behaviour applies import { throwError, fromEvent, of } from 'rxjs'; -import { catchError, tap, switchMap, mergeMap, concatMap, exhaustMap } from 'rxjs/operators'; +import { + catchError, + tap, + switchMap, + mergeMap, + concatMap, + exhaustMap +} from 'rxjs/operators'; const fakeRequest$ = of().pipe( tap(_ => console.log('fakeRequest')), throwError ); -const iWillContinueListening$ = - fromEvent(document.getElementById('continued'), 'click') - .pipe( - switchMap(_ => - fakeRequest$.pipe( - catchError(_ => of('keep on clicking!!!')) - )) - ); - -const iWillStopListening$ = - fromEvent(document.getElementById('stopped'), 'click') - .pipe( - switchMap(_ => fakeRequest$), - catchError(_ => of('no more requests!!!')) - ); +const iWillContinueListening$ = fromEvent( + document.getElementById('continued'), + 'click' +).pipe( + switchMap(_ => fakeRequest$.pipe(catchError(_ => of('keep on clicking!!!')))) +); + +const iWillStopListening$ = fromEvent( + document.getElementById('stopped'), + 'click' +).pipe( + switchMap(_ => fakeRequest$), + catchError(_ => of('no more requests!!!')) +); iWillContinueListening$.subscribe(console.log); iWillStopListening$.subscribe(console.log); diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index ef150e8f..f03b2ca4 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -8,13 +8,14 @@ :bulb: Useful for retrying HTTP requests! -:bulb: If you only want to retry in certain cases, check out [`retryWhen`](./retrywhen.md)! +:bulb: If you only want to retry in certain cases, check out +[`retryWhen`](./retrywhen.md)! :bulb: For non error cases check out [`repeat`](../utility/repeat.md)! --- -
+
### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 2b39b6a4..5d5ab236 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -
+
### Examples diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index d6889913..09c97c61 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index ea4fa50c..cfface84 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -11,7 +11,7 @@ of user input must be controlled! --- -
+
### Examples diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 941ab12f..9ba22293 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -14,7 +14,7 @@ must match! --- -
+
### Examples diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index e446614f..4d15f432 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -4,7 +4,7 @@ ## Only emit when the specified key value has changed -
+
### Examples diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 185ec401..f8c4398b 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -11,7 +11,7 @@ out [takeWhile](takewhile.md)! --- -
+
### Examples @@ -98,7 +98,7 @@ const subscribe = example.subscribe(val => - [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz - [Build your own filter operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=filter#app) - :video_camera: - Kwinten Pisman + :video_camera: - Kwinten Pisman --- diff --git a/operators/filtering/find.md b/operators/filtering/find.md index dd5a7970..cecbb2db 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 0cdbc8c3..1f0aab4d 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 4cad5f5f..91cce0ec 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -
+
### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index 0fa192e2..f1a438f4 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 8c03ce47..563032b7 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -
+
### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 7ff04cf8..4b842b33 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -
+
### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index d0deb648..1e7a8f36 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -
+
### Examples diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index cb4bb728..34b7c89f 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided observable emits. -
+
### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 82d0f93d..859b033c 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -
+
### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 8a5b5528..ae802d46 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -26,7 +26,7 @@ emissions. --- -
+
### Examples diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index 0cea6857..9723dbf4 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -11,7 +11,7 @@ completion of multiple observables, try [forkJoin](../combination/forkjoin.md)! --- -
+
### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index be467fa6..35558d1f 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,7 +10,7 @@ --- -
+
### Examples @@ -79,31 +79,33 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: Take mouse events on mouse down until mouse up ( -[StackBlitz](https://stackblitz.com/edit/rxjs-ug2ezf?file=index.ts&devtoolsheight=50) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-ug2ezf?file=index.ts&devtoolsheight=50) +) ```js // RxJS v6+ import { fromEvent } from 'rxjs'; import { takeUntil, mergeMap, map } from 'rxjs/operators'; -const mousedown$ = fromEvent(document, 'mousedown') +const mousedown$ = fromEvent(document, 'mousedown'); const mouseup$ = fromEvent(document, 'mouseup'); const mousemove$ = fromEvent(document, 'mousemove'); // after mousedown, take position until mouse up -mousedown$.pipe( - mergeMap(_ => { - return mousemove$.pipe( - map((e: any) => ({ - x: e.clientX, - y: e.clientY - })), - // complete inner observable on mouseup event - takeUntil(mouseup$) - ) - }) -) -.subscribe(console.log); +mousedown$ + .pipe( + mergeMap(_ => { + return mousemove$.pipe( + map((e: any) => ({ + x: e.clientX, + y: e.clientY + })), + // complete inner observable on mouseup event + takeUntil(mouseup$) + ); + }) + ) + .subscribe(console.log); ``` ### Related Recipes @@ -121,6 +123,7 @@ mousedown$.pipe( Angular in Depth * [Stopping a stream with takeUntil](https://egghead.io/lessons/rxjs-stopping-a-stream-with-takeuntil?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist + - [Build your own takeUntil operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=takeUntil#app) :video_camera: - Kwinten Pisman diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 5155f416..349a55ee 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -11,7 +11,7 @@ emit the first item that didn't pass the predicate. --- -
+
### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 78b04758..e398a691 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -
+
### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 817039c9..b6b13d5d 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit latest value when specified duration has passed. -
+
### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 98d5149c..b79c7dd2 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -
+
### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index a06db094..c24ae3b0 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -
+
### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 75a1369a..98ba015f 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 44233df7..12c5cf13 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -
+
### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 7c0ede49..280b1e1d 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,7 +4,7 @@ ## Collect output values until provided observable emits, emit as array. -
+
### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index d05aabeb..067d5460 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,14 +4,15 @@ ## Collect emitted values until provided number is fulfilled, emit as array. -
+
### Examples ##### Example 1: Collect buffer and emit after specified number of values -( [StackBlitz](https://stackblitz.com/edit/typescript-osryhu?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/suveqaromu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-osryhu?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/suveqaromu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/ky9myc5b/) ) ```js @@ -32,8 +33,9 @@ const subscribe = bufferThree.subscribe(val => ##### Example 2: Overlapping buffers -( [StackBlitz](https://stackblitz.com/edit/typescript-vvccar?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/kiloxiraya/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-vvccar?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/kiloxiraya/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/3c67qcz1/) ) ```js @@ -69,16 +71,18 @@ const subscribe = bufferEveryOne.subscribe(val => ##### Example 3: Last n keyboard presses tracking -( [StackBlitz](https://stackblitz.com/edit/rxjs-buffecount-keypresses-tracking?file=index.ts&devtoolsheight=50) ) +( +[StackBlitz](https://stackblitz.com/edit/rxjs-buffecount-keypresses-tracking?file=index.ts&devtoolsheight=50) +) ```js // RxJS v6+ import { fromEvent, of } from 'rxjs'; import { bufferCount, map, mergeMap, tap } from 'rxjs/operators'; -const fakeKeyPressesPost = keypresses => of(201) - .pipe( - tap(_ => { +const fakeKeyPressesPost = keypresses => + of(201).pipe( + tap(_ => { console.log(`received key presses are: ${keypresses}`); document.getElementById('output').innerText = keypresses; }) @@ -89,12 +93,13 @@ fromEvent(document, 'keydown') map((e: KeyboardEvent) => e.key), bufferCount(5), mergeMap(fakeKeyPressesPost) - ).subscribe(); + ) + .subscribe(); ``` ### Additional Resources -* [bufferCount](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferCount) +- [bufferCount](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferCount) :newspaper: - Official docs --- diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 701f1ea6..225db1d9 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,13 +4,15 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -
+
### Examples ##### Example 1: Toggle buffer on and off at interval -( [StackBlitz](https://stackblitz.com/edit/typescript-xu3sq8?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/relavezugo/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-xu3sq8?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/relavezugo/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/6ad3w3wf/) ) ```js @@ -29,10 +31,7 @@ const closingInterval = val => { }; //every 5s a new buffer will start, collecting emitted values for 3s then emitting buffered values const bufferToggleInterval = sourceInterval.pipe( - bufferToggle( - startInterval, - closingInterval - ) + bufferToggle(startInterval, closingInterval) ); //log to console //ex. emitted buffers [4,5,6]...[9,10,11] @@ -42,7 +41,10 @@ const subscribe = bufferToggleInterval.subscribe(val => ``` ##### Example 2: Toggle buffer on and off on mouse down/up -( [StackBlitz](https://stackblitz.com/edit/rxjs-buffertoggle-mousemove?file=index.ts&devtoolsheight=50) ) + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-buffertoggle-mousemove?file=index.ts&devtoolsheight=50) +) ```js import { fromEvent } from 'rxjs'; @@ -50,17 +52,16 @@ import { bufferToggle } from 'rxjs/operators'; fromEvent(document, 'mousemove') .pipe( - bufferToggle( - fromEvent(document, 'mousedown'), - _ => fromEvent(document, 'mouseup') + bufferToggle(fromEvent(document, 'mousedown'), _ => + fromEvent(document, 'mouseup') ) ) -.subscribe(console.log) + .subscribe(console.log); ``` ### Additional Resources -* [bufferToggle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferToggle) +- [bufferToggle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferToggle) :newspaper: - Official docs --- diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 3a8650f3..1cce9e05 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,13 +4,15 @@ ## Collect all values until closing selector emits, emit buffered values. -
+
### Examples ##### Example 1: Emit buffer based on interval -( [StackBlitz](https://stackblitz.com/edit/typescript-f4a2fu?file=index.ts&devtoolsheight=10) | [jsBin](http://jsbin.com/vugerupube/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-f4a2fu?file=index.ts&devtoolsheight=10) +| [jsBin](http://jsbin.com/vugerupube/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/nr9agfuL/) ) ```js @@ -23,7 +25,9 @@ const oneSecondInterval = interval(1000); //return an observable that emits value every 5 seconds const fiveSecondInterval = () => interval(5000); //every five seconds, emit buffered values -const bufferWhenExample = oneSecondInterval.pipe(bufferWhen(fiveSecondInterval)); +const bufferWhenExample = oneSecondInterval.pipe( + bufferWhen(fiveSecondInterval) +); //log values //ex. output: [0,1,2,3]...[4,5,6,7,8] const subscribe = bufferWhenExample.subscribe(val => @@ -33,7 +37,7 @@ const subscribe = bufferWhenExample.subscribe(val => ### Additional Resources -* [bufferWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferWhen) +- [bufferWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferWhen) :newspaper: - Official docs --- diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index feedc9a7..ebfd489a 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,13 +4,15 @@ ## Map values to inner observable, subscribe and emit in order. -
+
### Examples ##### Example 1: Demonstrating the difference between `concatMap` and [`mergeMap`](./mergemap.md) -( [StackBlitz](https://stackblitz.com/edit/typescript-pkyxa1?file=index.ts&devtoolsheight=100) ) +( +[StackBlitz](https://stackblitz.com/edit/typescript-pkyxa1?file=index.ts&devtoolsheight=100) +) :bulb: Note the difference between `concatMap` and [`mergeMap`](./mergemap.md). Because `concatMap` does not subscribe to the next observable until the previous @@ -47,8 +49,9 @@ const mergeMapExample = source ##### Example 2: Map to promise -( [StackBlitz](https://stackblitz.com/edit/typescript-rv9byk?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/celixodeba/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-rv9byk?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/celixodeba/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/Lym33L97//) ) ```js @@ -70,8 +73,9 @@ const subscribe = example.subscribe(val => ##### Example 3: Supplying a projection function -( [StackBlitz](https://stackblitz.com/edit/typescript-2elzt7?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/vihacewozo/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-2elzt7?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/vihacewozo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/5sr5zzgy/) ) ```js @@ -95,11 +99,11 @@ const subscribe = example.subscribe(val => ### Additional Resources -* [concatMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMap) +- [concatMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMap) :newspaper: - Official docs -* [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) +- [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz -* [Build your own concatMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=concatMap#app) +- [Build your own concatMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=concatMap#app) :video_camera: - Kwinten Pisman --- diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index fa86d005..ea36d060 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,13 +4,15 @@ ## Subscribe to provided observable when previous completes, emit values. -
+
### Examples ##### Example 1: Map to basic observable (simulating request) -( [StackBlitz](https://stackblitz.com/edit/typescript-fkkh6c?file=index.ts&devtoolsheight=50) ) +( +[StackBlitz](https://stackblitz.com/edit/typescript-fkkh6c?file=index.ts&devtoolsheight=50) +) ```js // RxJS v6+ @@ -29,8 +31,9 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Using projection with `concatMap` -( [StackBlitz](https://stackblitz.com/edit/typescript-8kcfm1?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/fogefebisu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-8kcfm1?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/fogefebisu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/s19wtscb/) ) ```js @@ -69,7 +72,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [concatMapTo](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMapTo) +- [concatMapTo](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMapTo) :newspaper: - Official docs --- diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index d2f4e1b4..db988e58 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,14 +4,15 @@ ## Map to inner observable, ignore other values until that observable completes. -
+
### Examples ##### Example 1: exhaustMap with interval -( [Stackblitz](https://stackblitz.com/edit/typescript-3qydhn?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/woposeqobo/1/edit?js,console) | +( +[Stackblitz](https://stackblitz.com/edit/typescript-3qydhn?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/woposeqobo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/9ovzapp9/) ) ```js @@ -20,7 +21,10 @@ import { interval, merge, of } from 'rxjs'; import { delay, take, exhaustMap } from 'rxjs/operators'; const sourceInterval = interval(1000); -const delayedInterval = sourceInterval.pipe(delay(10), take(4)); +const delayedInterval = sourceInterval.pipe( + delay(10), + take(4) +); const exhaustSub = merge( // delay 10ms, then start interval emitting 4 values @@ -30,24 +34,25 @@ const exhaustSub = merge( ) .pipe(exhaustMap(_ => sourceInterval.pipe(take(5)))) /* - * The first emitted value (of(true)) will be mapped - * to an interval observable emitting 1 value every - * second, completing after 5. - * Because the emissions from the delayed interval - * fall while this observable is still active they will be ignored. - * - * Contrast this with concatMap which would queue, - * switchMap which would switch to a new inner observable each emission, - * and mergeMap which would maintain a new subscription for each emitted value. - */ + * The first emitted value (of(true)) will be mapped + * to an interval observable emitting 1 value every + * second, completing after 5. + * Because the emissions from the delayed interval + * fall while this observable is still active they will be ignored. + * + * Contrast this with concatMap which would queue, + * switchMap which would switch to a new inner observable each emission, + * and mergeMap which would maintain a new subscription for each emitted value. + */ // output: 0, 1, 2, 3, 4 .subscribe(val => console.log(val)); ``` ##### Example 2: Another exhaustMap with interval -( [Stackblitz](https://stackblitz.com/edit/typescript-vxussb?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/fizuduzuti/1/edit?js,console) | +( +[Stackblitz](https://stackblitz.com/edit/typescript-vxussb?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/fizuduzuti/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/5ck8yg5k/3/) ) ```js @@ -118,7 +123,7 @@ const exhaustSub = firstInterval ### Additional Resources -* [exhaustMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-exhaustMap) +- [exhaustMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-exhaustMap) :newspaper: - Official docs --- diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 69582efe..91a3c9d2 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,14 +4,15 @@ ## Recursively call provided function. -
+
### Examples ##### Example 1: Add one for each invocation -( [StackBlitz](https://stackblitz.com/edit/typescript-ntgecj?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/fuxocepazi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ntgecj?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/fuxocepazi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/nu4apbLt/) ) ```js @@ -50,11 +51,11 @@ const subscribe = example.subscribe(val => console.log(`RESULT: ${val}`)); ### Related Recipes -* [Game Loop](../../recipes/gameloop.md) +- [Game Loop](../../recipes/gameloop.md) ### Additional Resources -* [expand](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-expand) +- [expand](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-expand) :newspaper: - Official docs --- diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index cef88b41..887457f8 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,14 +4,15 @@ ## Group into observables based on provided value. -
+
### Examples ##### Example 1: Group by property -( [StackBlitz](https://stackblitz.com/edit/typescript-dozkcg?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/buworowuye/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-dozkcg?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/buworowuye/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/utncxxvf/) ) ```js @@ -44,7 +45,9 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Group by into key - values -( [StackBlitz](https://stackblitz.com/edit/rxjs-groupby-key-vals?file=index.ts&devtoolsheight=100) ) +( +[StackBlitz](https://stackblitz.com/edit/rxjs-groupby-key-vals?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -58,10 +61,12 @@ const people = [ { name: 'Sarah', age: 35 } ]; -from(people).pipe( - groupBy(person => person.age, p => p.name), - mergeMap(group => zip(of(group.key), group.pipe(toArray()))) -).subscribe(console.log); +from(people) + .pipe( + groupBy(person => person.age, p => p.name), + mergeMap(group => zip(of(group.key), group.pipe(toArray()))) + ) + .subscribe(console.log); /* output: @@ -71,14 +76,13 @@ from(people).pipe( */ ``` - ### Additional Resources -* [groupBy](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-groupBy) +- [groupBy](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-groupBy) :newspaper: - Official docs -* [Group higher order observables with RxJS groupBy](https://egghead.io/lessons/rxjs-group-higher-order-observables-with-rxjs-groupby?course=use-higher-order-observables-in-rxjs-effectively) +- [Group higher order observables with RxJS groupBy](https://egghead.io/lessons/rxjs-group-higher-order-observables-with-rxjs-groupby?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz -* [Use groupBy in real RxJS applications](https://egghead.io/lessons/rxjs-use-groupby-in-real-rxjs-applications?course=use-higher-order-observables-in-rxjs-effectively) +- [Use groupBy in real RxJS applications](https://egghead.io/lessons/rxjs-use-groupby-in-real-rxjs-applications?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz --- diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 0d897445..98dd3868 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -4,14 +4,15 @@ ## Apply projection with each value from source. -
+
### Examples ##### Example 1: Add 10 to each number -( [StackBlitz](https://stackblitz.com/edit/typescript-a7bnxb?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/padasukano/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-a7bnxb?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/padasukano/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/yd38awLa/) ) ```js @@ -29,8 +30,9 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Map to single property -( [StackBlitz](https://stackblitz.com/edit/typescript-qgpnju?file=index.ts&devtoolsheight=100) | -[jsBin](http://jsbin.com/detozumale/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-qgpnju?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/detozumale/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/tdLd5tgc/) ) ```js @@ -65,13 +67,14 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [map](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-map) +- [map](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-map) :newspaper: - Official docs -* [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) +- [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) :video_camera: - Ben Lesh -* [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) +- [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz -- [Build your own map operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=map#app) + +* [Build your own map operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=map#app) :video_camera: - Kwinten Pisman --- diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index aa74f6a9..579f1028 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -4,7 +4,7 @@ ## Map emissions to constant value. -
+
### Examples @@ -50,16 +50,16 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -* [HTTP Polling](../../recipes/http-polling.md) -* [Smart Counter](../../recipes/smartcounter.md) +- [HTTP Polling](../../recipes/http-polling.md) +- [Smart Counter](../../recipes/smartcounter.md) ### Additional Resources -* [mapTo](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mapTo) +- [mapTo](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mapTo) :newspaper: - Official docs -* [Changing behavior with mapTo](https://egghead.io/lessons/rxjs-changing-behavior-with-mapto?course=step-by-step-async-javascript-with-rxjs) +- [Changing behavior with mapTo](https://egghead.io/lessons/rxjs-changing-behavior-with-mapto?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist -* [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) +- [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 028d574b..8b7bbde4 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 4](#example-4-mergemap-with-concurrent-value). -
+
### Examples diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index 31c4752f..0f090eaa 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -4,7 +4,7 @@ ## Accumulate value over time via merged observables. -
+
### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index 9e379190..fd94c9c7 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -
+
### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 02f306dc..d4d0a5bd 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -4,7 +4,7 @@ ## Select properties to emit. -
+
### Examples @@ -49,6 +49,7 @@ const example = source.pipe(pluck('job', 'title')); //output: "Developer" , undefined const subscribe = example.subscribe(val => console.log(val)); ``` + ### Related Recipes - [Breakout Game](../../recipes/breakout-game.md) diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 9926cec8..d3610643 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ :bulb: If you need the current accumulated value on each emission, try [scan](scan.md)! -
+
### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 778ba9a4..24a9fc32 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -11,7 +11,7 @@ scan! --- -
+
### Examples @@ -98,7 +98,7 @@ import { scan, delay, repeat, mergeMap } from 'rxjs/operators'; const fakeRequest = of('response').pipe(delay(2000)); -// output: +// output: // ['response'], // ['response','response'], // ['response','response','response'], @@ -107,8 +107,10 @@ const fakeRequest = of('response').pipe(delay(2000)); interval(1000) .pipe( mergeMap(_ => fakeRequest), - scan((allResponses, currentResponse) => - [...allResponses, currentResponse], []), + scan < + string > + ((allResponses, currentResponse) => [...allResponses, currentResponse], + []) ) .subscribe(console.log); ``` diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 3950e2b4..e1ad42d1 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -
+
### Examples diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index 6ae5df68..cc59a2ec 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index d9c355ca..92ba74e1 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -
+
### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index b5fe0fa0..e07ae39b 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -
+
### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 6532476a..9bc4a03a 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -
+
### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 768a98ed..c999d6c7 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -
+
### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 3450cba5..150e563a 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -
+
### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index afcdf026..48d5614b 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -
+
### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 349c934f..773a59d1 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -
+
### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index 346c98a9..91cf8940 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,7 @@ ## Turn notification objects into notification values. -
+
### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index e6ad783b..ea548598 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index 0c92cadb..730141cd 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 1f045566..5d5381e1 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -1,4 +1,3 @@ - # repeat #### signature: `repeat(count: number): Observable` @@ -11,14 +10,15 @@ --- -
+
### Examples ##### Example 1: Repeat 3 times ( -[StackBlitz](https://stackblitz.com/edit/rxjs-repeat-learnrxjs?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-repeat-learnrxjs?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -27,12 +27,10 @@ import { of } from 'rxjs'; const delayedThing = of('delayed value').pipe(delay(2000)); -delayedThing.pipe( - repeat(3) -) -// delayed value...delayed value...delayed value -.subscribe(console.log) - +delayedThing + .pipe(repeat(3)) + // delayed value...delayed value...delayed value + .subscribe(console.log); ``` ### Related Recipes diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index d2b86cf9..ad7b697d 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -1,39 +1,39 @@ - # timeInterval #### signature: `timeInterval(scheduler: *): Observable> | WebSocketSubject | Observable` ## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions - -
+
### Examples ##### Example 1: Time between mouse clicks ( -[StackBlitz](https://stackblitz.com/edit/rxjs-time-interval?file=index.ts&devtoolsheight=50) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-time-interval?file=index.ts&devtoolsheight=50) +) ```js // RxJS v6+ import { fromEvent } from 'rxjs'; import { timeInterval, tap } from 'rxjs/operators'; -fromEvent(document, 'mousedown').pipe( - timeInterval(), - tap(console.log) -).subscribe(i => - document.body.innerText = `milliseconds since last click: ${i.interval}` -); - +fromEvent(document, 'mousedown') + .pipe( + timeInterval(), + tap(console.log) + ) + .subscribe( + i => + (document.body.innerText = `milliseconds since last click: ${i.interval}`) + ); ``` ### Related Recipes - [Click Ninja Game](../../recipes/click-ninja-game.md) - ### Additional Resources - [timeInterval](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-timeInterval) diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 27a43338..ba2b98d4 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -
+
### Examples @@ -35,10 +35,10 @@ of(4000, 3000, 2000) ) ) /* - * "Request timed out after: 4000" - * "Request timed out after: 3000" - * "Request Complete!" - */ + * "Request timed out after: 4000" + * "Request timed out after: 3000" + * "Request Complete!" + */ .subscribe(val => console.log(val)); ``` diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index 0d67a180..6e8e3105 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -4,7 +4,7 @@ ## Subscribe to second Observable if no emission occurs in given time span. -
+
### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 5dbb7982..126b2eac 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -6,11 +6,12 @@ --- -:warning: `toPromise` is not a pipable operator, as it does not return an observable. +:warning: `toPromise` is not a pipable operator, as it does not return an +observable. --- -
+
### Examples diff --git a/package.json b/package.json index 2b1de74a..e875b561 100644 --- a/package.json +++ b/package.json @@ -15,11 +15,17 @@ "type": "git", "url": "git+https://github.com/btroncone/learn-rxjs.git" }, - "keywords": ["rxjs"], + "keywords": [ + "rxjs" + ], "author": "Brian Troncone ", "contributors": [ { "name": "Huy Le" + }, + { + "name": "Adam Lubek", + "url": "https://github.com/adamlubek" } ], "license": "MIT", diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index 05b122dc..b494a26f 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -4,23 +4,25 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Alphabet Invasion Game. -
+
### Example Code -( -[StackBlitz](https://stackblitz.com/edit/rxjs-alphabet-invasion?file=index.ts) +( [StackBlitz](https://stackblitz.com/edit/rxjs-alphabet-invasion?file=index.ts) ) #### index.ts + ```js // RxJS v6+ import { interval, fromEvent, combineLatest, BehaviorSubject } from 'rxjs'; import { scan, startWith, map, takeWhile, switchMap } from 'rxjs/operators'; import { State, Letter, Letters } from './interfaces'; -const randomLetter = () => String.fromCharCode( - Math.random() * ('z'.charCodeAt(0) - 'a'.charCodeAt(0)) + 'a'.charCodeAt(0)); +const randomLetter = () => + String.fromCharCode( + Math.random() * ('z'.charCodeAt(0) - 'a'.charCodeAt(0)) + 'a'.charCodeAt(0) + ); const levelChangeThreshold = 20; const speedAdjust = 50; const endThreshold = 15; @@ -29,59 +31,70 @@ const gameWidth = 30; const intervalSubject = new BehaviorSubject(600); const letters$ = intervalSubject.pipe( - switchMap(i => interval(i) - .pipe( - scan((letters) => ({ - intrvl: i, - ltrs: [({ - letter: randomLetter(), - yPos: Math.floor(Math.random() * gameWidth) - }), ...letters.ltrs] - }), { ltrs: [], intrvl: 0 }) - ))); - -const keys$ = fromEvent(document, 'keydown') - .pipe( - startWith({ key: '' }), - map((e: KeyboardEvent) => e.key) - ); + switchMap(i => + interval(i).pipe( + scan < number, + Letters > + (letters => ({ + intrvl: i, + ltrs: [ + { + letter: randomLetter(), + yPos: Math.floor(Math.random() * gameWidth) + }, + ...letters.ltrs + ] + }), + { ltrs: [], intrvl: 0 }) + ) + ) +); + +const keys$ = fromEvent(document, 'keydown').pipe( + startWith({ key: '' }), + map((e: KeyboardEvent) => e.key) +); const renderGame = (state: State) => ( - document.body.innerHTML = `Score: ${state.score}, Level: ${state.level}
`, - state.letters.forEach(l => document.body.innerHTML += - ' '.repeat(l.yPos) + l.letter + '
'), - document.body.innerHTML += - '
'.repeat(endThreshold - state.letters.length - 1) + '-'.repeat(gameWidth) + (document.body.innerHTML = `Score: ${state.score}, Level: ${ + state.level + }
`), + state.letters.forEach( + l => + (document.body.innerHTML += ' '.repeat(l.yPos) + l.letter + '
') + ), + (document.body.innerHTML += + '
'.repeat(endThreshold - state.letters.length - 1) + + '-'.repeat(gameWidth)) ); -const renderGameOver = () => document.body.innerHTML += '
GAME OVER!'; -const noop = () => { }; +const renderGameOver = () => (document.body.innerHTML += '
GAME OVER!'); +const noop = () => {}; const game$ = combineLatest(keys$, letters$).pipe( - scan<[string, Letters], State>((state, [key, letters]) => ( - letters.ltrs[letters.ltrs.length - 1] - && letters.ltrs[letters.ltrs.length - 1].letter === key - ? (state.score = state.score + 1, letters.ltrs.pop()) - : noop, - state.score > 0 && state.score % levelChangeThreshold === 0 - ? ( - letters.ltrs = [], - state.level = state.level + 1, - state.score = state.score + 1, - intervalSubject.next(letters.intrvl - speedAdjust)) - : noop, - ({ score: state.score, letters: letters.ltrs, level: state.level })), + scan < [string, Letters], + State > + ((state, [key, letters]) => ( + letters.ltrs[letters.ltrs.length - 1] && + letters.ltrs[letters.ltrs.length - 1].letter === key + ? ((state.score = state.score + 1), letters.ltrs.pop()) + : noop, + state.score > 0 && state.score % levelChangeThreshold === 0 + ? ((letters.ltrs = []), + (state.level = state.level + 1), + (state.score = state.score + 1), + intervalSubject.next(letters.intrvl - speedAdjust)) + : noop, + { score: state.score, letters: letters.ltrs, level: state.level } + ), { score: 0, letters: [], level: 1 }), - takeWhile(state => state.letters.length < endThreshold), -) - -game$.subscribe( - renderGame, - noop, - renderGameOver + takeWhile(state => state.letters.length < endThreshold) ); + +game$.subscribe(renderGame, noop, renderGameOver); ``` #### interfaces.ts + ```js export interface Letter { letter: String; diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md index 87a042e8..087b9b3d 100644 --- a/recipes/breakout-game.md +++ b/recipes/breakout-game.md @@ -4,15 +4,14 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Breakout game. -
+
### Example Code -( -[StackBlitz](https://stackblitz.com/edit/rxjs-breakout?file=index.ts) -) +( [StackBlitz](https://stackblitz.com/edit/rxjs-breakout?file=index.ts) ) #### index.ts + ```js // RxJS v6+ import { fromEvent, of, interval, combineLatest, generate, noop } from 'rxjs'; @@ -78,6 +77,7 @@ combineLatest(player$, ball$, bricks$) ``` #### interfaces.ts + ```js export interface GameObject { x: number; @@ -94,11 +94,13 @@ export interface Ball extends GameObject { ``` #### constants.ts + ```js export const gameSize = 20; ``` #### html-renderer.ts + ```js import { gameSize } from './constants'; import { Player, Ball, GameObject } from './interfaces'; @@ -115,25 +117,33 @@ const createElem = col => { elem.style.marginLeft = '10px'; elem.style.height = '6px'; elem.style.width = '6px'; - elem.style['background-color'] = + elem.style['background-color'] = col === empty ? 'white' - : (col === plyer - ? 'cornflowerblue' - : col === bll - ? 'gray' - : 'silver'); + : col === plyer + ? 'cornflowerblue' + : col === bll + ? 'gray' + : 'silver'; elem.style['border-radius'] = col === bll ? '100%' : '0%'; return elem; -} +}; -export const render = ([player, ball, bricks]: [Player, Ball, GameObject[]]) => { - const game = Array(gameSize).fill(0).map(e => Array(gameSize).fill(0)); +export const render = ([player, ball, bricks]: [ + Player, + Ball, + GameObject[] +]) => { + const game = Array(gameSize) + .fill(0) + .map(e => Array(gameSize).fill(0)); game[player.x][player.y] = plyer; game[ball.x][ball.y] = bll; - bricks.forEach(b => game[b.x][b.y] = brick); + bricks.forEach(b => (game[b.x][b.y] = brick)); - document.body.innerHTML = `Score: ${player.score} Lives: ${player.lives}
`; + document.body.innerHTML = `Score: ${player.score} Lives: ${ + player.lives + }
`; game.forEach(r => { const rowContainer = document.createElement('div'); r.forEach(c => rowContainer.appendChild(createElem(c))); diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index a5b8eebb..04ad8ada 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of scan operator for state management in simple game -
+
### Example Code @@ -13,73 +13,78 @@ This recipe shows usage of scan operator for state management in simple game ) #### index.ts + ```js // RxJS v6+ import { fromEvent, interval } from 'rxjs'; import { tap, scan, map, switchMap, takeWhile } from 'rxjs/operators'; -import { dot, updatedDot, setTimerText, resetDotSize, moveDot } from './dom-updater'; +import { + dot, + updatedDot, + setTimerText, + resetDotSize, + moveDot +} from './dom-updater'; interface State { score: number; intrvl: number; } -const makeInterval = (val: State) => interval(val.intrvl).pipe( - map(v => 5 - v), - tap(setTimerText) -); +const makeInterval = (val: State) => + interval(val.intrvl).pipe( + map(v => 5 - v), + tap(setTimerText) + ); const gameState: State = { score: 0, intrvl: 500 }; const nextState = (acc: State) => ({ - score: acc.score += 1, - intrvl: acc.score % 3 === 0 ? acc.intrvl -= 50 : acc.intrvl + score: (acc.score += 1), + intrvl: acc.score % 3 === 0 ? (acc.intrvl -= 50) : acc.intrvl }); const isNotGameOver = intervalValue => intervalValue >= 0; -const game$ = fromEvent(dot, 'mouseover') - .pipe( - tap(moveDot), - scan(nextState, gameState), - tap(state => updatedDot(state.score)), - switchMap(makeInterval), - tap(resetDotSize), - takeWhile(isNotGameOver) - ); - -game$.subscribe( - n => { }, - e => { }, - () => setTimerText('ouch!') +const game$ = fromEvent(dot, 'mouseover').pipe( + tap(moveDot), + scan < Event, + State > (nextState, gameState), + tap(state => updatedDot(state.score)), + switchMap(makeInterval), + tap(resetDotSize), + takeWhile(isNotGameOver) ); + +game$.subscribe(n => {}, e => {}, () => setTimerText('ouch!')); ``` #### dom-updater.ts + ```js const random = () => Math.random() * 300; const elem = id => document.getElementById(id); -const setElementText = (elem, text) => - elem.innerText = text.toString(); +const setElementText = (elem, text) => (elem.innerText = text.toString()); const timer = elem('timer'); const setDotSize = size => { dot.style.height = `${size}px`; dot.style.width = `${size}px`; -} +}; export const dot = elem('dot'); export const updatedDot = score => { if (score % 3 === 0) { dot.style.backgroundColor = - '#' + (Math.random() * 0xFFFFFF << 0).toString(16); + '#' + ((Math.random() * 0xffffff) << 0).toString(16); } setElementText(dot, score); -} +}; export const setTimerText = text => setElementText(timer, text); export const moveDot = () => { setDotSize(5); dot.style.transform = `translate(${random()}px, ${random()}px)`; -} +}; export const resetDotSize = () => setDotSize(30); ``` ##### html + ``` + +
+
+
+
+
+
+
+
+
+
+``` + +### Operators Used + +- [BehaviorSubject](../subjects/behaviorsubject.md) +- [combineLatest](../operators/combination/combinelatest.md) +- [finalize](../operators/utility/finalize.md) +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [of](../operators/creation/of.md) +- [pluck](../operators/transformation/pluck.md) +- [scan](../operators/transformation/scan.md) +- [startWith](../operators/combination/startwith.md) +- [switchMap](../operators/transformation/switchmap.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 035460b7..5c09c10c 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -86,6 +86,7 @@ merge(click$, interval$).subscribe(); ### Related Recipes - [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Car Racing Game](../../recipes/car-racing-game.md) ### Additional Resources From 6295017d3a4d63e7f4293ed841407ff4d5d45617 Mon Sep 17 00:00:00 2001 From: Igor Loskutov Date: Sat, 18 May 2019 01:45:54 +0700 Subject: [PATCH 124/256] chore(readme): update marble testing video status (#203) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Checking the links section I found that https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing isn't free anymore. This PR marks this video with 💵 sign similar to "Introduction to Reactive Programming" above. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ba65f400..897621ef 100644 --- a/README.md +++ b/README.md @@ -130,8 +130,8 @@ experience! - [What is RxJS?](https://egghead.io/lessons/rxjs-what-is-rxjs) - Ben Lesh - [Creating Observable from Scratch](https://egghead.io/lessons/rxjs-creating-observable-from-scratch) - Ben Lesh -- [Introduction to RxJS Marble Testing](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing) - - Brian Troncone +- [Introduction to RxJS Marble Testing](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing) + :dollar: - Brian Troncone - [Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming) :dollar: - André Staltz - [Reactive Programming using Observables](https://www.youtube.com/watch?v=HT7JiiqnYYc&feature=youtu.be) - From e463bf6452ad7bb5f90a7d3cd822926d629d4779 Mon Sep 17 00:00:00 2001 From: Richard Henry Date: Sat, 18 May 2019 12:05:49 +0100 Subject: [PATCH 125/256] style(operators): fix formatting for scan example (#204) --- operators/transformation/scan.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 658048af..3ada1218 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -107,10 +107,7 @@ const fakeRequest = of('response').pipe(delay(2000)); interval(1000) .pipe( mergeMap(_ => fakeRequest), - scan < - string > - ((allResponses, currentResponse) => [...allResponses, currentResponse], - []) + scan((all, current) => [...all, current], []) ) .subscribe(console.log); ``` From d324476d40648b7e5b24ea7ddceea0aef13b40b3 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Thu, 23 May 2019 19:21:00 +0100 Subject: [PATCH 126/256] Added memory game recipe (#206) * Create memory-game.md * Update README.md * Update README.md * Update SUMMARY.md * Update from.md * Update fromevent.md * Update generate.md * Update interval.md * Update map.md * Update merge.md * Update pluck.md * Update scan.md * Update sequenceequal.md * Update switchmap.md * Update do.md * Update take.md * Update empty.md --- README.md | 1 + SUMMARY.md | 1 + operators/combination/merge.md | 1 + operators/conditional/sequenceequal.md | 1 + operators/creation/empty.md | 4 + operators/creation/from.md | 3 +- operators/creation/fromevent.md | 1 + operators/creation/generate.md | 1 + operators/creation/interval.md | 1 + operators/filtering/take.md | 4 + operators/transformation/map.md | 1 + operators/transformation/pluck.md | 1 + operators/transformation/scan.md | 1 + operators/transformation/switchmap.md | 1 + operators/utility/do.md | 1 + recipes/README.md | 1 + recipes/memory-game.md | 146 +++++++++++++++++++++++++ 17 files changed, 169 insertions(+), 1 deletion(-) create mode 100644 recipes/memory-game.md diff --git a/README.md b/README.md index 897621ef..5de53054 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [HTTP Polling](/recipes/http-polling.md) - [Lockscreen](/recipes/lockscreen.md) - [Matrix Digital Rain](/recipes/matrix-digital-rain.md) +- [Memory Game](/recipes/memory-game.md) - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) diff --git a/SUMMARY.md b/SUMMARY.md index 07a2ced2..456666c8 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -124,6 +124,7 @@ - [Http Polling](/recipes/http-polling.md) - [Lockscreen](/recipes/lockscreen.md) - [Matrix Digital Rain](/recipes/matrix-digital-rain.md) + - [Memory Game](/recipes/memory-game.md) - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 0324bc2a..943c1fe3 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -76,6 +76,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) +- [Memory Game](../../recipes/memory-game.md) ### Additional Resources diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index cdaa98b4..d98f0d33 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -60,6 +60,7 @@ fromEvent(document, 'keydown') ### Related Recipes - [Lockscreen](../../recipes/lockscreen.md) +- [Memory Game](../../recipes/memory-game.md) ### Additional Resources diff --git a/operators/creation/empty.md b/operators/creation/empty.md index 9cadbf0a..84be748e 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -57,6 +57,10 @@ const timer$ = merge(pause$, resume$) .subscribe(setHTML('remaining')); ``` +### Related Recipes + +- [Memory Game](../../recipes/memory-game.md) + ### Additional Resources - [empty](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-empty) diff --git a/operators/creation/from.md b/operators/creation/from.md index d73f37fb..2f1b90ff 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -94,9 +94,10 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes -- [Progress Bar](../../recipes/progressbar.md) - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) +- [Memory Game](../../recipes/memory-game.md) +- [Progress Bar](../../recipes/progressbar.md) ### Additional Resources diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 5baf66b1..344cddf4 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -40,6 +40,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) +- [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) diff --git a/operators/creation/generate.md b/operators/creation/generate.md index b6507cc1..3eb7394a 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -63,6 +63,7 @@ OUTPUT: ### Related Recipes - [Breakout Game](../../recipes/breakout-game.md) +- [Memory Game](../../recipes/memory-game.md) ### Additional Resources diff --git a/operators/creation/interval.md b/operators/creation/interval.md index e3ce4e90..505adf31 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -33,6 +33,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Matrix Digital Rain](../../recipes/matrix-digital-rain.md) +- [Memory Game](../../recipes/memory-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) diff --git a/operators/filtering/take.md b/operators/filtering/take.md index ae802d46..6d9625a9 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -98,6 +98,10 @@ const oneClickEvent = fromEvent(document, 'click').pipe( const subscribe = oneClickEvent.subscribe(); ``` +### Related Recipes + +- [Memory Game](../../recipes/memory-game.md) + ### Additional Resources - [take](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-take) diff --git a/operators/transformation/map.md b/operators/transformation/map.md index d5bc460b..b9b8f272 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -59,6 +59,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Game Loop](../../recipes/gameloop.md) - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) +- [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index e8aea50b..7f6786b3 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -55,6 +55,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Breakout Game](../../recipes/breakout-game.md) - [Car Racing Game](../../recipes/car-racing-game.md) - [Lockscreen](../../recipes/lockscreen.md) +- [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Tetris Game](../../recipes/tetris-game.md) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 3ada1218..f4520217 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -121,6 +121,7 @@ interval(1000) - [Click Ninja Game](../../recipes/click-ninja-game.md) - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Matrix Digital Rain](../../recipes/matrix-digital-rain.md) +- [Memory Game](../../recipes/memory-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) - [Smart Counter](../../recipes/smartcounter.md) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 47b5ba22..df5cc979 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -133,6 +133,7 @@ timer(0, 5000) - [Catch The Dot Game](../../recipes/catch-the-dot-game.md) - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) +- [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) diff --git a/operators/utility/do.md b/operators/utility/do.md index 4175855c..cccb4218 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -79,6 +79,7 @@ const example = source - [Flappy Bird Game](../../recipes/flappy-bird-game.md) - [Horizontal Scroll Indicator](../../recipes/horizontal-scroll-indicator.md) - [Lockscreen](../../recipes/lockscreen.md) +- [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) diff --git a/recipes/README.md b/recipes/README.md index 2f705bc3..77025cf5 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -15,6 +15,7 @@ Common use-cases and interesting recipes to help learn RxJS. * [HTTP Polling](http-polling.md) * [Lockscreen](lockscreen.md) * [Matrix Digital Rain](matrix-digital-rain.md) +* [Memory Game](memory-game.md) * [Mine Sweeper Game](mine-sweeper-game.md) * [Platform Jumper Game](platform-jumper-game.md) * [Progress Bar](progressbar.md) diff --git a/recipes/memory-game.md b/recipes/memory-game.md new file mode 100644 index 00000000..0116f945 --- /dev/null +++ b/recipes/memory-game.md @@ -0,0 +1,146 @@ +# Memory Game + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates an RxJS game to train your memory. + +
+ +### Example Code + +( [StackBlitz](https://stackblitz.com/edit/rxjs-memory-game?file=index.ts) ) + +#### index.ts + +```js +// RxJS v6+ +import { EMPTY, from, fromEvent, generate, interval, merge, noop } from 'rxjs'; +import { map, pluck, scan, sequenceEqual, switchMap, take, tap } from 'rxjs/operators'; + +const random = (): number => Math.floor(Math.random() * Math.floor(8)); +const setInfo = (text: string) => document.getElementById('info').innerHTML = text; +const displayLevelChange = () => document + .querySelectorAll('.child') + .forEach((c: HTMLElement) => c.style.background = 'gray'); + +const checkIfGameOver$ = (randomSequence: number[]) => (userSequence: number[]) => + from(userSequence) + .pipe( + sequenceEqual(from(randomSequence)), + tap(match => + !match && userSequence.length === randomSequence.length + ? setInfo('GAME OVER!') + : noop + ) + ); + +const takePlayerInput$ = (randomSequence: number[]) => _ => fromEvent(document, 'click') + .pipe( + take(randomSequence.length), + scan((acc: number[], curr: MouseEvent) => [...acc, parseInt(curr.target['id'])], []), + switchMap(checkIfGameOver$(randomSequence)), + switchMap(result => result + ? (displayLevelChange(), memoryGame$(randomSequence.length + 1)) + : EMPTY) + ); + +const showSequenceToMemorize$ = (memorySize: number) => (randomSequence: number[]) => + interval(1000) + .pipe( + tap(i => setInfo(i === memorySize - 1 ? `YOUR TURN` : `${memorySize - i} elements`)), + take(randomSequence.length), + map(index => randomSequence[index]), + tap(value => document.getElementById(`${value}`).click()), + switchMap(takePlayerInput$(randomSequence)) + ); + +const memoryGame$ = memorySize => + generate(1, x => x <= memorySize, x => x + 1) + .pipe( + scan((acc: number[], _: number): number[] => [...acc, random() + 1], []), + switchMap(showSequenceToMemorize$(memorySize)) + ); + +const elementClick$ = (event: string, color: string) => + fromEvent(document.querySelectorAll('.child'), event) + .pipe( + pluck('srcElement'), + tap((e: HTMLElement) => e.style.background = color) + ); + +const clicks$ = merge( + elementClick$('click', 'lightgray'), + elementClick$('transitionend', 'white') +); + +const game$ = merge(clicks$, memoryGame$(2)); + +game$.subscribe(); +``` + +#### index.html + +```html + + +
Train Your Memory!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +### Operators Used + +- [empty](../operators/creation/empty.md) +- [from](../operators/creation/from.md) +- [fromEvent](../operators/creation/fromevent.md) +- [generate](../operators/creation/generate.md) +- [interval](../operators/creation/interval.md) +- [map](../operators/transformation/map.md) +- [merge](../operators/combination/merge.md) +- noop +- [pluck](../operators/transformation/pluck.md) +- [scan](../operators/transformation/scan.md) +- [sequenceEqual](../operators/conditional/sequenceequal.md) +- [switchMap](../operators/transformation/switchmap.md) +- [take](../operators/filtering/take.md) +- [tap](../operators/utility/do.md) From ce7de7bddda0498e5121cdda46783c25532ceac7 Mon Sep 17 00:00:00 2001 From: Elvis Sun Date: Thu, 30 May 2019 11:46:59 -0400 Subject: [PATCH 127/256] feat(operators): add tip for first (#208) --- operators/filtering/first.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 1f0aab4d..afd06aea 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -8,6 +8,8 @@ :bulb: The counterpart to first is [**last**](last.md)! +:bulb: `First` will deliver an EmptyError to the Observer's error callback if the Observable completes before any next notification was sent. If you don't want this behavior, use `take(1)` instead. + ---
From 2f9bf658e52005df0151e455729e24bcf0e0d288 Mon Sep 17 00:00:00 2001 From: SANCHIT BANSAL Date: Mon, 3 Jun 2019 17:59:12 +0530 Subject: [PATCH 128/256] style(operators): fix typo in combineLatest (#209) --- operators/combination/combinelatest.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 475c1301..c0d0708a 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -14,7 +14,7 @@ observables when a source completes! ### Why use `combineLatest`? This operator is best used when you have multiple, long-lived observables that -rely on eachother for some calculation or determination. Basic examples of this +rely on each other for some calculation or determination. Basic examples of this can be seen in [example three](#example-3-combining-events-from-2-buttons), where events from multiple buttons are being combined to produce a count of each and an overall total, or a From 0d3ef03f7e247847dc89c74e2f919c91ac8f69d0 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 7 Jun 2019 08:23:12 -0400 Subject: [PATCH 129/256] chore(readme): add conference section to resources --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 5de53054..3d95eaf7 100644 --- a/README.md +++ b/README.md @@ -115,6 +115,9 @@ New to RxJS and reactive programming? In addition to the content found on this site, these excellent articles and videos will help jump start your learning experience! +#### Conferences +- [RxJS Live](https://www.rxjs.live/) - Upcoming RxJS specific conference, September 5-6, 2019 (Las Vegas) + #### Reading - [RxJS Introduction](http://reactivex.io/rxjs/manual/overview.html#introduction) - From f8c0f421a129d805080bcb6401b7a6b57f654f89 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 7 Jun 2019 08:26:44 -0400 Subject: [PATCH 130/256] style(readme): small wording tweak --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3d95eaf7..5ceb248e 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ Recipes for common use-cases and interesting solutions with RxJS. ## Introductory Resources New to RxJS and reactive programming? In addition to the content found on this -site, these excellent articles and videos will help jump start your learning +site, these excellent resources will help jump start your learning experience! #### Conferences From 488d84a6a066b9637e1ef745ebc0127512f1904e Mon Sep 17 00:00:00 2001 From: adamlubek Date: Wed, 12 Jun 2019 14:32:57 +0100 Subject: [PATCH 131/256] feat(recipes): add stop watch recipe (#211) * Create stop-watch.md * Update README.md * Update README.md * Update SUMMARY.md * Update fromevent.md * Update interval.md * Update map.md * Update mapto.md * Update scan.md * Update startwith.md * Update switchmap.md * Update do.md * Update stop-watch.md * Update stop-watch.md --- README.md | 1 + SUMMARY.md | 1 + operators/combination/startwith.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/interval.md | 1 + operators/transformation/map.md | 1 + operators/transformation/mapto.md | 1 + operators/transformation/scan.md | 1 + operators/transformation/switchmap.md | 1 + operators/utility/do.md | 1 + recipes/README.md | 1 + recipes/stop-watch.md | 129 ++++++++++++++++++++++++++ 12 files changed, 140 insertions(+) create mode 100644 recipes/stop-watch.md diff --git a/README.md b/README.md index 5ceb248e..e9d4aa51 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) +- [Stop Watch](/recipes/stop-watch.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Tank Battle Game](/recipes/tank-battle-game.md) diff --git a/SUMMARY.md b/SUMMARY.md index 456666c8..22d8b088 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -130,6 +130,7 @@ - [Progress Bar](/recipes/progressbar.md) - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) + - [Stop Watch](/recipes/stop-watch.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Tank Battle Game](/recipes/tank-battle-game.md) - [Tetris Game](/recipes/tetris-game.md) diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index d4532eac..78cbe479 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -97,6 +97,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Stop Watch](../../recipes/stop-watch.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) - [Tetris Game](../../recipes/tetris-game.md) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 344cddf4..e5e4eb7f 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -46,6 +46,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Progress Bar](../../recipes/progressbar.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Stop Watch](../../recipes/stop-watch.md) - [Swipe To Refresh](../../recipes/swipe-to-refresh.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) - [Tetris Game](../../recipes/tetris-game.md) diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 505adf31..271edaf6 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -36,6 +36,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Memory Game](../../recipes/memory-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Stop Watch](../../recipes/stop-watch.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) - [Tetris Game](../../recipes/tetris-game.md) diff --git a/operators/transformation/map.md b/operators/transformation/map.md index b9b8f272..17548167 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -63,6 +63,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Stop Watch](../../recipes/stop-watch.md) - [Swipe To Refresh](../../recipes/swipe-to-refresh.md) - [Tetris Game](../../recipes/tetris-game.md) - [Type Ahead](../../recipes/type-ahead.md) diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 579f1028..276d9e8b 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -52,6 +52,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [HTTP Polling](../../recipes/http-polling.md) - [Smart Counter](../../recipes/smartcounter.md) +- [Stop Watch](../../recipes/stop-watch.md) ### Additional Resources diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index f4520217..a88b26ef 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -126,6 +126,7 @@ interval(1000) - [Progress Bar](../../recipes/progressbar.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) +- [Stop Watch](../../recipes/stop-watch.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) - [Tetris Game](../../recipes/tetris-game.md) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index df5cc979..6cf13d0c 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -138,6 +138,7 @@ timer(0, 5000) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) - [Smart Counter](../../recipes/smartcounter.md) +- [Stop Watch](../../recipes/stop-watch.md) - [Typeahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index cccb4218..10c02fe5 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -83,6 +83,7 @@ const example = source - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Space Invaders Game](/recipes/space-invaders-game.md) +- [Stop Watch](../../recipes/stop-watch.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Tank Battle Game](../../recipes/tank-battle-game.md) - [Tetris Game](../../recipes/tetris-game.md) diff --git a/recipes/README.md b/recipes/README.md index 77025cf5..0c7aeaea 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -21,6 +21,7 @@ Common use-cases and interesting recipes to help learn RxJS. * [Progress Bar](progressbar.md) * [Smart Counter](smartcounter.md) * [Space Invaders Game](space-invaders-game.md) +* [Stop Watch](stop-watch.md) * [Swipe To Refresh](swipe-to-refresh.md) * [Tank Battle Game](tank-battle-game.md) * [Tetris Game](tetris-game.md) diff --git a/recipes/stop-watch.md b/recipes/stop-watch.md new file mode 100644 index 00000000..a5b37a1d --- /dev/null +++ b/recipes/stop-watch.md @@ -0,0 +1,129 @@ +# Stop Watch + +_By [adamlubek](https://github.com/adamlubek)_ + +This recipe demonstrates RxJs implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by Michael Hladky. + +
+ +### Example Code + +( [StackBlitz](https://stackblitz.com/edit/rxjs-stop-watch?file=index.ts) ) + +#### index.ts + +```js +// RxJS v6+ +import { fromEvent, interval, merge, noop, NEVER } from 'rxjs'; +import { map, mapTo, scan, startWith, switchMap, tap } from 'rxjs/operators'; + +interface State { + count: boolean; + countup: boolean; + speed: number; + value: number; + increase: number; +} + +const getElem = (id: string): HTMLElement => document.getElementById(id); +const getVal = (id: string): number => parseInt((getElem(id))['value']); +const fromClick = (id: string) => fromEvent(getElem(id), 'click'); +const fromClickAndMapTo = (id: string, obj: {}) => fromClick(id).pipe(mapTo(obj)); +const fromClickAndMap = (id: string, fn: (_) => {}) => fromClick(id).pipe(map(fn)); +const setValue = (val: number) => getElem('counter').innerText = val.toString() + +const events$ = + merge( + fromClickAndMapTo('start', { count: true }), + fromClickAndMapTo('pause', { count: false }), + fromClickAndMapTo('reset', { value: 0 }), + fromClickAndMapTo('countup', { countup: true }), + fromClickAndMapTo('countdown', { countup: false }), + fromClickAndMap('setto', _ => ({ value: getVal('value') })), + fromClickAndMap('setspeed', _ => ({ speed: getVal('speed') })), + fromClickAndMap('setincrease', _ => ({ increase: getVal('increase') })) + ); + +const stopWatch$ = events$.pipe( + startWith({ count: false, speed: 1000, value: 0, countup: true, increase: 1 }), + scan((state: State, curr): State => ({ ...state, ...curr }), {}), + tap((state: State) => setValue(state.value)), + switchMap((state: State) => state.count + ? interval(state.speed) + .pipe( + tap(_ => state.value += state.countup ? state.increase : -state.increase), + tap(_ => setValue(state.value)) + ) + : NEVER) +); + +stopWatch$.subscribe(); +``` + +#### index.html + +```html + + +
0
+
+
+ Setup + + + +
+
+ Count + + +
+
+ Set to + +
+ +
+
+ Speed + +
+ +
+
+ Increase + +
+ +
+
+``` + +### Operators Used + +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [map](../operators/transformation/map.md) +- [mapTo](../operators/transformation/mapto.md) +- [merge](../operators/transformation/map.md) +- NEVER +- noop +- [scan](../operators/transformation/scan.md) +- [startWith](../operators/combination/startwith.md) +- [switchMap](../operators/transformation/switchmap.md) +- [tap](../operators/utility/do.md) From aceee9bcbc610d9b326a35fb6548a0a949ca4871 Mon Sep 17 00:00:00 2001 From: Reed Jones Date: Sat, 15 Jun 2019 08:19:13 -0600 Subject: [PATCH 132/256] Removed extra space from rxjs-primer.md (#212) --- concepts/rxjs-primer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index a730fd93..58ba1abc 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -87,7 +87,7 @@ listener: // addEventListener called const subscription = myObservable.subscribe(event => console.log(event)); -// addEvent listener called again! +// addEventListener called again! const secondSubscription = myObservable.subscribe(event => console.log(event)); // clean up with unsubscribe From 50ec7b4a4ad6668cd762e179559e44f4f48476b6 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Fri, 21 Jun 2019 00:51:57 +0100 Subject: [PATCH 133/256] Update stop-watch.md (#213) --- recipes/stop-watch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/recipes/stop-watch.md b/recipes/stop-watch.md index a5b37a1d..941ad59e 100644 --- a/recipes/stop-watch.md +++ b/recipes/stop-watch.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by Michael Hladky. +This recipe demonstrates RxJs implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by [@Michael_Hladky](https://twitter.com/michael_hladky)
From a15bdf30de4ba79c659b7f894fbec9d321a892a8 Mon Sep 17 00:00:00 2001 From: Enzo Molion Date: Fri, 21 Jun 2019 14:23:12 +0200 Subject: [PATCH 134/256] Correct spelling error (#214) This PR removes unintentional 'and' suffix to 'touched' in '// as we swipe, we mark pads as touched and display selected numbers' comment. --- recipes/lockscreen.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index b883b353..ff389015 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -82,7 +82,7 @@ const actualPassword$ = fromEvent(document, 'mousedown').pipe( // new stream so reset password pad and take swipe until mouse up tap(resetPasswordPad), takeMouseSwipe, - // as we swipe, we mark pads as touchedand and display selected numbers + // as we swipe, we mark pads as touched and display selected numbers map(getXYCoordsOfMousePosition), map(findSelectedPad), getIdOfSelectedPad, From 06805f2c0299f142b61f87fb7019ea4424ea31da Mon Sep 17 00:00:00 2001 From: Andrea D'Amore Date: Tue, 2 Jul 2019 13:01:13 +0200 Subject: [PATCH 135/256] style(typo): fix typo (#216) * fix typo (minor change) * Fix typo introduced with parent commit --- concepts/rxjs-primer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index 58ba1abc..e4ee66a9 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -107,7 +107,7 @@ It's worth noting that when we discuss an Observable source emitting data to observers, this is a push based model. The source doesn't know or care what subscribers do with the data, it simply pushes it down the line. -While working on a stream of events is nice, it's only so useful on it's own. +While working on a stream of events is nice, it's only so useful on its own. **What makes RxJS the "lodash for events" are its...** ## Operators From 5dfe5dc6c2c4aaa95ad20e29788252174effbe77 Mon Sep 17 00:00:00 2001 From: Ayelet Dahan Date: Sun, 7 Jul 2019 14:37:46 +0300 Subject: [PATCH 136/256] Minor correction to example (#217) AsyncSubject emits last value to both subscribers. --- subjects/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/subjects/README.md b/subjects/README.md index e82a82c0..3bc691cc 100644 --- a/subjects/README.md +++ b/subjects/README.md @@ -30,7 +30,7 @@ Subject s2 ---------------------^------j------|---------- AsyncSubject s1 ^----------------------------------j|--------- - s1 ---------------------^-------------j|--------- + s2 ---------------------^-------------j|--------- BehaviorSubject s1 ^a----r------x--------------j------|---------- s2 ---------------------^x-----j------|---------- From c90a622e577eb10be0d3b97906fefb69a7be9a5b Mon Sep 17 00:00:00 2001 From: Iakov Lilo Date: Wed, 10 Jul 2019 18:11:29 +0600 Subject: [PATCH 137/256] style(of): fix formatting in comment (#218) Add missed symbol ' --- operators/creation/of.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/creation/of.md b/operators/creation/of.md index 5732b994..83f02504 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -36,7 +36,7 @@ import { of } from 'rxjs'; const source = of({ name: 'Brian' }, [1, 2, 3], function hello() { return 'Hello'; }); -//output: {name: 'Brian}, [1,2,3], function hello() { return 'Hello' } +//output: {name: 'Brian'}, [1,2,3], function hello() { return 'Hello' } const subscribe = source.subscribe(val => console.log(val)); ``` From 56f2c8bb999ec40889a9dc2f2f678503eb97a7fa Mon Sep 17 00:00:00 2001 From: jc-white Date: Tue, 30 Jul 2019 13:28:22 -0500 Subject: [PATCH 138/256] style(recipes): update space-invaders-game.md (#219) Removed unnecessary (and malformed) type assertion --- recipes/space-invaders-game.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index 95fb5bc4..11c04615 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -42,8 +42,7 @@ const spaceInvaders$ = interval(100).pipe( key: event.code }) ), - scan < Input, - State > (gameUpdate, initialState), + scan(gameUpdate, initialState), tap(e => paint(e.game, e.playerLives, e.score, e.isGameOver)) ); From 152d97b72d10aac6d499fea8ea273eb3dc563ac4 Mon Sep 17 00:00:00 2001 From: luninroman Date: Tue, 30 Jul 2019 21:29:11 +0300 Subject: [PATCH 139/256] style(recipes): fix concatAll path (#220) --- recipes/progressbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/recipes/progressbar.md b/recipes/progressbar.md index 97cb468a..45f0a828 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -106,7 +106,7 @@ help with example!_ ### Operators Used -- [concatAll](../operators/transformation/concatall.md) +- [concatAll](../operators/combination/concatall.md) - [delay](../operators/utility/delay.md) - [fromEvent](../operators/creation/fromevent.md) - [from](../operators/creation/from.md) From a097049775e37b26ef70d98c67ceaa361fd326eb Mon Sep 17 00:00:00 2001 From: Oleh Ziniak Date: Fri, 2 Aug 2019 01:46:20 +0300 Subject: [PATCH 140/256] chore(readme): update readme (#221) Looks like official docs moved to `https://rxjs-dev.firebaseapp.com`. (`http://reactivex.io/rxjs` now redirects you to the new location). --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e9d4aa51..84a27e9f 100644 --- a/README.md +++ b/README.md @@ -121,7 +121,7 @@ experience! #### Reading -- [RxJS Introduction](http://reactivex.io/rxjs/manual/overview.html#introduction) - +- [RxJS Introduction](https://rxjs-dev.firebaseapp.com/guide/overview) - Official Docs - [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - André Staltz From f0b963a4947ebac922c92c5cde1ed1804daeb040 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 8 Aug 2019 07:59:52 -0400 Subject: [PATCH 141/256] feat(recipes): add save indicator recipe --- README.md | 8 +- SUMMARY.md | 1 + operators/combination/concat.md | 4 + operators/combination/merge.md | 1 + operators/creation/defer.md | 4 + operators/creation/empty.md | 1 + operators/creation/fromevent.md | 1 + operators/creation/of.md | 3 +- operators/filtering/debouncetime.md | 1 + operators/filtering/distinctuntilchanged.md | 1 + operators/filtering/filter.md | 1 + operators/multicasting/share.md | 1 + operators/transformation/map.md | 1 + operators/transformation/mapto.md | 1 + operators/transformation/mergemap.md | 1 + operators/utility/delay.md | 1 + operators/utility/do.md | 1 + recipes/README.md | 47 +++++------ recipes/save-indicator.md | 86 +++++++++++++++++++++ 19 files changed, 138 insertions(+), 27 deletions(-) create mode 100644 recipes/save-indicator.md diff --git a/README.md b/README.md index 84a27e9f..2bf33447 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,7 @@ Recipes for common use-cases and interesting solutions with RxJS. - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) +- [Save Indicator](/recipes/save-indicator.md) - [Smart Counter](/recipes/smartcounter.md) - [Stop Watch](/recipes/stop-watch.md) - [Space Invaders Game](/recipes/space-invaders-game.md) @@ -113,11 +114,12 @@ Recipes for common use-cases and interesting solutions with RxJS. ## Introductory Resources New to RxJS and reactive programming? In addition to the content found on this -site, these excellent resources will help jump start your learning -experience! +site, these excellent resources will help jump start your learning experience! #### Conferences -- [RxJS Live](https://www.rxjs.live/) - Upcoming RxJS specific conference, September 5-6, 2019 (Las Vegas) + +- [RxJS Live](https://www.rxjs.live/) - Upcoming RxJS specific conference, + September 5-6, 2019 (Las Vegas) #### Reading diff --git a/SUMMARY.md b/SUMMARY.md index 22d8b088..e61f20b0 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -128,6 +128,7 @@ - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - [Platform Jumper Game](/recipes/platform-jumper-game.md) - [Progress Bar](/recipes/progressbar.md) + - [Save Indicator](/recipes/save-indicator.md) - [Smart Counter](/recipes/smartcounter.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Stop Watch](/recipes/stop-watch.md) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 15c42b63..c7cb9312 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -75,6 +75,10 @@ concat(interval(1000), of('This', 'Never', 'Runs')) .subscribe(console.log); ``` +### Related Recipes + +- [Save Indicator]('../../recipes/save-indicator.md) + ### Additional Resources - [concat](https://rxjs.dev/api/index/function/concat) :newspaper: - Official diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 943c1fe3..e19737b2 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -77,6 +77,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) - [Memory Game](../../recipes/memory-game.md) +- [Save Indicator]('../../recipes/save-indicator.md) ### Additional Resources diff --git a/operators/creation/defer.md b/operators/creation/defer.md index 0f981a53..0ab47012 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -51,6 +51,10 @@ setTimeout(() => { */ ``` +### Related Recipes + +- [Save Indicator]('../../recipes/save-indicator.md) + ### Additional Resources - [defer](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-defer) diff --git a/operators/creation/empty.md b/operators/creation/empty.md index 84be748e..c75a61d8 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -60,6 +60,7 @@ const timer$ = merge(pause$, resume$) ### Related Recipes - [Memory Game](../../recipes/memory-game.md) +- [Save Indicator]('../../recipes/save-indicator.md) ### Additional Resources diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index e5e4eb7f..ad654efe 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -44,6 +44,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) +- [Save Indicator]('../../recipes/save-indicator.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Stop Watch](../../recipes/stop-watch.md) diff --git a/operators/creation/of.md b/operators/creation/of.md index 83f02504..610ad4a0 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -46,6 +46,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Car Racing Game](../../recipes/car-racing-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) +- [Save Indicator]('../../recipes/save-indicator.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Tetris Game](../../recipes/tetris-game.md) - [Type Ahead](../../recipes/type-ahead.md) @@ -57,7 +58,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz - [Build your own of operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=of#app) - :video_camera: - Kwinten Pisman + :video_camera: - Kwinten Pisman --- diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 2024271d..48685707 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -43,6 +43,7 @@ keyup$ ### Related Recipes +- [Save Indicator]('../../recipes/save-indicator.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 9ba22293..4701742d 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -90,6 +90,7 @@ source$ ### Related Recipes - [Lockscreen](../../recipes/lockscreen.md) +- [Save Indicator]('../../recipes/save-indicator.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index f8c4398b..19df53c6 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -88,6 +88,7 @@ const subscribe = example.subscribe(val => - [Game Loop](../../recipes/gameloop.md) - [Lockscreen](../../recipes/lockscreen.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Save Indicator]('../../recipes/save-indicator.md) ### Additional Resources diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 98ba015f..1b7c0623 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -62,6 +62,7 @@ const subscribeFour = sharedExample.subscribe(val => console.log(val)); - [Progress Bar](../../recipes/progressbar.md) - [Game Loop](../../recipes/gameloop.md) +- [Save Indicator]('../../recipes/save-indicator.md) ### Additional Resources diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 17548167..40999447 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -61,6 +61,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Lockscreen](../../recipes/lockscreen.md) - [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) +- [Save Indicator]('../../recipes/save-indicator.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Stop Watch](../../recipes/stop-watch.md) diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 276d9e8b..69b00f9c 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -51,6 +51,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [HTTP Polling](../../recipes/http-polling.md) +- [Save Indicator]('../../recipes/save-indicator.md) - [Smart Counter](../../recipes/smartcounter.md) - [Stop Watch](../../recipes/stop-watch.md) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 8b7bbde4..6fa60bc9 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -160,6 +160,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Breakout Game](../../recipes/breakout-game.md) - [HTTP Polling](../../recipes/http-polling.md) +- [Save Indicator]('../../recipes/save-indicator.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 48d5614b..472f4365 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -45,6 +45,7 @@ const subscribe = message.subscribe(val => console.log(val)); ### Related Recipes - [Progress Bar](../../recipes/progressbar.md) +- [Save Indicator]('../../recipes/save-indicator.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources diff --git a/operators/utility/do.md b/operators/utility/do.md index 10c02fe5..d4a35872 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -82,6 +82,7 @@ const example = source - [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) +- [Save Indicator]('../../recipes/save-indicator.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Stop Watch](../../recipes/stop-watch.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) diff --git a/recipes/README.md b/recipes/README.md index 0c7aeaea..3ac6dfba 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -2,27 +2,28 @@ Common use-cases and interesting recipes to help learn RxJS. - ### Contents -* [Alphabet Invasion Game](alphabet-invasion-game.md) -* [Breakout Game](breakout-game.md) -* [Car Racing Game](car-racing-game.md) -* [Catch The Dot Game](catch-the-dot-game.md) -* [Click Ninja Game](click-ninja-game.md) -* [Flappy Bird Game](flappy-bird-game.md) -* [Game Loop](gameloop.md) -* [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) -* [HTTP Polling](http-polling.md) -* [Lockscreen](lockscreen.md) -* [Matrix Digital Rain](matrix-digital-rain.md) -* [Memory Game](memory-game.md) -* [Mine Sweeper Game](mine-sweeper-game.md) -* [Platform Jumper Game](platform-jumper-game.md) -* [Progress Bar](progressbar.md) -* [Smart Counter](smartcounter.md) -* [Space Invaders Game](space-invaders-game.md) -* [Stop Watch](stop-watch.md) -* [Swipe To Refresh](swipe-to-refresh.md) -* [Tank Battle Game](tank-battle-game.md) -* [Tetris Game](tetris-game.md) -* [Type Ahead](type-ahead.md) + +- [Alphabet Invasion Game](alphabet-invasion-game.md) +- [Breakout Game](breakout-game.md) +- [Car Racing Game](car-racing-game.md) +- [Catch The Dot Game](catch-the-dot-game.md) +- [Click Ninja Game](click-ninja-game.md) +- [Flappy Bird Game](flappy-bird-game.md) +- [Game Loop](gameloop.md) +- [Horizontal Scroll Indicator](horizontal-scroll-indicator.md) +- [HTTP Polling](http-polling.md) +- [Lockscreen](lockscreen.md) +- [Matrix Digital Rain](matrix-digital-rain.md) +- [Memory Game](memory-game.md) +- [Mine Sweeper Game](mine-sweeper-game.md) +- [Platform Jumper Game](platform-jumper-game.md) +- [Progress Bar](progressbar.md) +- [Save Indicator](save-indicator.md) +- [Smart Counter](smartcounter.md) +- [Space Invaders Game](space-invaders-game.md) +- [Stop Watch](stop-watch.md) +- [Swipe To Refresh](swipe-to-refresh.md) +- [Tank Battle Game](tank-battle-game.md) +- [Tetris Game](tetris-game.md) +- [Type Ahead](type-ahead.md) diff --git a/recipes/save-indicator.md b/recipes/save-indicator.md new file mode 100644 index 00000000..3e2b31ee --- /dev/null +++ b/recipes/save-indicator.md @@ -0,0 +1,86 @@ +# Save Indicator + +This recipe demonstrates the creation of a google docs-esque save indicator with +RxJS. + +
+ +### Example Code + +( [StackBlitz](https://stackblitz.com/edit/rxjs-3txbvy?file=index.ts) ) + +```js +import { fromEvent, of, merge, empty, concat, defer } from 'rxjs'; +import { + delay, + map, + mergeMap, + tap, + debounceTime, + distinctUntilChanged, + mapTo, + filter, + share, + switchAll +} from 'rxjs/operators'; +import { format } from 'date-fns'; + +// track in progress saves +let savesInProgress = 0; + +// references +const input = document.getElementById('note-input'); +const saveIndicator = document.querySelector('.save-indicator'); + +// streams +const keyup$ = fromEvent(input, 'keyup'); + +// fake save request +const saveChanges = value => { + return of(value).pipe(delay(1500)); +}; + +/** + * Trigger a save when the user stops typing for 200ms + * After new data has been successfully saved, so a saved + * and last updated indicator. + */ +const inputToSave$ = keyup$.pipe( + debounceTime(200), + map(e => e.target.value), + distinctUntilChanged(), + share() +); + +const savesInProgress$ = inputToSave$.pipe( + mapTo(of('Saving')), + tap(_ => savesInProgress++) +); + +const savesCompleted$ = inputToSave$.pipe( + mergeMap(saveChanges), + tap(_ => savesInProgress--), + // ignore if additional saves are in progress + filter(_ => !savesInProgress), + mapTo( + concat( + // display saved for 2s + of('Saved!'), + empty().pipe(delay(2000)), + // then last updated time, defer for proper time + defer(() => of(`Last updated: ${format(Date.now(), 'MM/DD/YYYY hh:mm')}`)) + ) + ) +); + +merge(savesInProgress$, savesCompleted$) + .pipe( + /* + If new save comes in when our completion observable is running, we want to switch to it for a status update. + */ + switchAll() + ) + .subscribe(status => { + saveIndicator.innerHTML = status; + }); +``` From e457f4c9ff10d41ebbb289ad2c712eae93c4ad80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Rous=C3=A9?= Date: Fri, 9 Aug 2019 14:35:24 -0400 Subject: [PATCH 142/256] fix(lockscreen): update subject to fix broken link (#222) Link to the 'lockscreen' example is broken, you get a 404 error when trying to reach it from the Subject page. --- subjects/subject.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/subjects/subject.md b/subjects/subject.md index 778292ea..565052d4 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -27,7 +27,7 @@ sub.next(3); // OUTPUT => 3,3 (logged from both subscribers) ### Related Recipes -- [Lockscreen](../../recipes/lockscreen.md) +- [Lockscreen](../recipes/lockscreen.md) ### Additional Resources From 687a199844862b5ef5564e0279360e8f683e241c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Rous=C3=A9?= Date: Fri, 9 Aug 2019 14:40:48 -0400 Subject: [PATCH 143/256] fix(behaviorsubject): update behaviorsubject.md page to fix broken link (#223) Links to the "Alphabet Invasion Game" and "Car Racing Game" are broken, --- subjects/behaviorsubject.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 5c09c10c..a85a9b2d 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -85,8 +85,8 @@ merge(click$, interval$).subscribe(); ### Related Recipes -- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) -- [Car Racing Game](../../recipes/car-racing-game.md) +- [Alphabet Invasion Game](../recipes/alphabet-invasion-game.md) +- [Car Racing Game](../recipes/car-racing-game.md) ### Additional Resources From ecbfbc5210814def5cdc5d5b11f6042a7ef48461 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Rous=C3=A9?= Date: Mon, 12 Aug 2019 08:16:42 -0400 Subject: [PATCH 144/256] chore(operators): fix broken link (#225) --- operators/creation/defer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/creation/defer.md b/operators/creation/defer.md index 0ab47012..f04e5b08 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -53,7 +53,7 @@ setTimeout(() => { ### Related Recipes -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) ### Additional Resources From 64bacc32699f11dc0cc451bcdc758bb4226df28a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Rous=C3=A9?= Date: Mon, 12 Aug 2019 08:17:46 -0400 Subject: [PATCH 145/256] chore(operators): fix broken link in empty (#226) The "save indicator" recipe link is broken --- operators/creation/empty.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/creation/empty.md b/operators/creation/empty.md index c75a61d8..11570711 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -60,7 +60,7 @@ const timer$ = merge(pause$, resume$) ### Related Recipes - [Memory Game](../../recipes/memory-game.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) ### Additional Resources From 2016c627a3ae15a07c88656324a1d035548a1ad0 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 13 Aug 2019 15:29:10 -0400 Subject: [PATCH 146/256] chore(operators): update all resource links --- operators/combination/combineall.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/generate.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/of.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 ++ operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/audit.md | 2 +- operators/filtering/audittime.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertime.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/partition.md | 11 +++-------- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 5 +++++ operators/transformation/toarray.md | 2 +- operators/transformation/window.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/finalize.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- 77 files changed, 84 insertions(+), 82 deletions(-) diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 6a65460d..bd572e7c 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -57,7 +57,7 @@ const subscribe = combined.subscribe(val => console.log(val)); ### Additional Resources -- [combineAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-combineAll) +- [combineAll](https://rxjs.dev/api/operators/combineAll) :newspaper: - Official docs --- diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index ab2ec33a..4c769038 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -114,7 +114,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [concatAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatAll) +- [concatAll](https://rxjs.dev/api/operators/concatAll) :newspaper: - Official docs - [Flatten a higher order observable with concatAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-concatall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index e22836c9..f442a47a 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -85,7 +85,7 @@ source$ ### Additional Resources -- [endWith](https://rxjs-dev.firebaseapp.com/api/operators/endWith) +- [endWith](https://rxjs.dev/api/operators/endWith) :newspaper: - Official docs --- diff --git a/operators/combination/merge.md b/operators/combination/merge.md index e19737b2..c04c0e15 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -81,7 +81,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [merge](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-merge) +- [merge](https://rxjs.dev/api/index/function/merge) :newspaper: - Official docs - [Handling multiple streams with merge](https://egghead.io/lessons/rxjs-handling-multiple-streams-with-merge?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 2959129f..eb91f64d 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -89,7 +89,7 @@ const example = source ### Additional Resources -- [mergeAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeAll) +- [mergeAll](https://rxjs.dev/api/operators/mergeAll) :newspaper: - Official docs - [Flatten a higher order observable with mergeAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-mergeall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 43edd4e2..073c69e4 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -31,7 +31,7 @@ interval(1000) ### Additional Resources -- [pairwise](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pairwise) +- [pairwise](https://rxjs.dev/api/operators/pairwise) :newspaper: - Official docs --- diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 78cbe479..49d9eb77 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -103,7 +103,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [startWith](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-startWith) +- [startWith](https://rxjs.dev/api/operators/startWith) :newspaper: - Official docs - [Displaying initial data with startWith](https://egghead.io/lessons/rxjs-displaying-initial-data-with-startwith?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index 0efbaa1a..1708b835 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -87,7 +87,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [withLatestFrom](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom) +- [withLatestFrom](https://rxjs.dev/api/operators/withLatestFrom) :newspaper: - Official docs - [Combination operator: withLatestFrom](https://egghead.io/lessons/rxjs-combination-operator-withlatestfrom?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 619bb75a..e550d14f 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -46,7 +46,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [defaultIfEmpty](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-defaultIfEmpty) +- [defaultIfEmpty](https://rxjs.dev/api/operators/defaultIfEmpty) :newspaper: - Official docs --- diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 042b133d..79baaf04 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -86,7 +86,7 @@ apiCalls$.subscribe(); ### Additional Resources -- [every](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-every) +- [every](https://rxjs.dev/api/operators/every) :newspaper: - Official docs --- diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 32b99af0..c56dde6c 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -84,7 +84,7 @@ interval(1000) ### Additional Resources -- [iif](https://rxjs-dev.firebaseapp.com/api/index/function/iif) :newspaper: - +- [iif](https://rxjs.dev/api/operators/iif) :newspaper: - Official docs --- diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index d98f0d33..684981f0 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -64,7 +64,7 @@ fromEvent(document, 'keydown') ### Additional Resources -- [sequenceEqual](https://rxjs-dev.firebaseapp.com/api/operators/sequenceEqual) +- [sequenceEqual](https://rxjs.dev/api/operators/sequenceEqual) :newspaper: - Official docs --- diff --git a/operators/creation/defer.md b/operators/creation/defer.md index f04e5b08..c5abd01a 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -57,7 +57,7 @@ setTimeout(() => { ### Additional Resources -- [defer](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-defer) +- [defer](https://rxjs.dev/api/index/function/defer) :newspaper: - Official docs --- diff --git a/operators/creation/empty.md b/operators/creation/empty.md index 11570711..0a1e47fc 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -64,7 +64,7 @@ const timer$ = merge(pause$, resume$) ### Additional Resources -- [empty](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-empty) +- [empty](https://rxjs.dev/api/index/function/empty) :newspaper: - Official docs - [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz diff --git a/operators/creation/from.md b/operators/creation/from.md index 2f1b90ff..0a3d43ea 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -101,7 +101,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -- [from](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-from) +- [from](https://rxjs.dev/api/index/function/from) :newspaper: - Official docs - [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index ad654efe..0b61f5b9 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -55,7 +55,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [fromEvent](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent) +- [fromEvent](https://rxjs.dev/api/index/function/fromEvent) :newspaper: - Official docs --- diff --git a/operators/creation/generate.md b/operators/creation/generate.md index 3eb7394a..1f42d027 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -67,7 +67,7 @@ OUTPUT: ### Additional Resources -- [generate](https://rxjs-dev.firebaseapp.com/api/index/function/generate) +- [generate](https://rxjs.dev/api/index/function/generate) :newspaper: - Official docs --- diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 271edaf6..50589eec 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -42,7 +42,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -- [interval](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-interval) +- [interval](https://rxjs.dev/api/index/function/interval) :newspaper: - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz diff --git a/operators/creation/of.md b/operators/creation/of.md index 610ad4a0..6a1d8266 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -53,7 +53,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -- [of](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-of) +- [of](https://rxjs.dev/api/index/function/of) :newspaper: - Official docs - [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz diff --git a/operators/creation/range.md b/operators/creation/range.md index a33d5b93..09162a96 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -27,7 +27,7 @@ const example = source.subscribe(val => console.log(val)); ### Additional Resources -- [range](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-range) +- [range](https://rxjs.dev/api/index/function/range) :newspaper: - Official docs --- diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 6835db97..2b08eb09 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -35,7 +35,7 @@ const subscribe = source.subscribe({ ### Additional Resources -- [throw](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-throw) +- [throw](https://rxjs.dev/api/index/function/throw) :newspaper: - Official docs - [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz diff --git a/operators/creation/timer.md b/operators/creation/timer.md index a5823ee4..57a04843 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -52,7 +52,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -- [timer](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-timer) +- [timer](https://rxjs.dev/api/index/function/timer) :newspaper: - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index f139c496..93a83c2c 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -108,6 +108,8 @@ iWillStopListening$.subscribe(console.log); ### Additional Resources +- [catchError](https://rxjs.dev/api/operators/catchError) + :newspaper: - Official docs - [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index f03b2ca4..5670c52e 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -59,7 +59,7 @@ const subscribe = example.subscribe({ ### Additional Resources -- [retry](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-retry) +- [retry](https://rxjs.dev/api/operators/retry) :newspaper: - Official docs - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 5d5ab236..a5f4c2f7 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -139,7 +139,7 @@ export class AppComponent implements OnInit { ### Additional Resources -- [retryWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-retryWhen) +- [retryWhen](https://rxjs.dev/api/operators/retryWhen) :newspaper: - Official docs - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/filtering/audit.md b/operators/filtering/audit.md index 2a7994da..eab6a3f9 100644 --- a/operators/filtering/audit.md +++ b/operators/filtering/audit.md @@ -8,7 +8,7 @@ ### Additional Resources -* [audit](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-audit) +* [audit](https://rxjs.dev/api/operators/audit) :newspaper: - Official docs --- diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index 6ad60497..e7ae0688 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -34,7 +34,7 @@ const subscribe = example.subscribe(val => console.log('Clicked')); ### Additional Resources -* [auditTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-auditTime) +* [auditTime](https://rxjs.dev/api/operators/auditTime) :newspaper: - Official docs * [Time based operators comparison](../../concepts/time-based-operators-comparison.md) diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 09c97c61..72759b06 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -69,7 +69,7 @@ const subscribe = debouncedInterval.subscribe(val => ### Additional Resources -- [debounce](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounce) +- [debounce](https://rxjs.dev/api/operators/debounce) :newspaper: - Official docs - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 19df53c6..346df8f9 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -92,7 +92,7 @@ const subscribe = example.subscribe(val => ### Additional Resources -- [filter](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter) +- [filter](https://rxjs.dev/api/operators/filter) :newspaper: - Official docs - [Adding conditional logic with filter](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist diff --git a/operators/filtering/find.md b/operators/filtering/find.md index cecbb2db..d8335b2e 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -53,7 +53,7 @@ clicks$ ### Additional Resources -- [find](https://rxjs-dev.firebaseapp.com/api/operators/find) :newspaper: - +- [find](https://rxjs.dev/api/operators/find) :newspaper: - Official docs --- diff --git a/operators/filtering/first.md b/operators/filtering/first.md index afd06aea..e6904c58 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -81,7 +81,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [first](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first) +- [first](https://rxjs.dev/api/operators/first) :newspaper: - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 91cce0ec..b700ca1f 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -69,7 +69,7 @@ const subscribe = error.subscribe( ### Additional Resources -- [ignoreElements](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-ignoreElements) +- [ignoreElements](https://rxjs.dev/api/operators/ignoreElements) :newspaper: - Official docs --- diff --git a/operators/filtering/last.md b/operators/filtering/last.md index f1a438f4..8920d160 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -75,7 +75,7 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ### Additional Resources -- [last](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-last) +- [last](https://rxjs.dev/api/operators/last) :newspaper: - Official docs - [Filtering operator: takeLast, last](https://egghead.io/lessons/rxjs-filtering-operators-takelast-last?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 563032b7..1f82cb01 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -79,7 +79,7 @@ const listener = merge( ### Additional Resources -- [sample](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-sample) +- [sample](https://rxjs.dev/api/operators/sample) :newspaper: - Official docs --- diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 4b842b33..1ce84615 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -30,7 +30,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [single](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-single) +- [single](https://rxjs.dev/api/operators/single) :newspaper: - Official docs --- diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index 1e7a8f36..ab03d214 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -67,7 +67,7 @@ const filterObs = numArrayObs ### Additional Resources -- [skip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skip) +- [skip](https://rxjs.dev/api/operators/skip) :newspaper: - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 34b7c89f..122b4361 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -30,7 +30,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [skipUntil](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipUntil) +- [skipUntil](https://rxjs.dev/api/operators/skipUntil) :newspaper: - Official docs --- diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 859b033c..c299d00d 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -30,7 +30,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [skipWhile](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipWhile) +- [skipWhile](https://rxjs.dev/api/operators/skipWhile) :newspaper: - Official docs --- diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 6d9625a9..67fb75d5 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -104,7 +104,7 @@ const subscribe = oneClickEvent.subscribe(); ### Additional Resources -- [take](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-take) +- [take](https://rxjs.dev/api/operators/take) :newspaper: - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 35558d1f..0d44e2d4 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -116,7 +116,7 @@ mousedown$ ### Additional Resources -- [takeUntil](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeUntil) +- [takeUntil](https://rxjs.dev/api/operators/takeUntil) :newspaper: - Official docs * [Avoiding takeUntil leaks](https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef) - diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index e398a691..fae7335c 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -58,7 +58,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [throttle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttle) +- [throttle](https://rxjs.dev/api/operators/throttle) :newspaper: - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index b6b13d5d..b800c4bd 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -62,7 +62,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [throttleTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttleTime) +- [throttleTime](https://rxjs.dev/api/operators/throttleTime) :newspaper: - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index b79c7dd2..6fec2b0d 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -82,7 +82,7 @@ setTimeout(() => { ### Additional Resources -- [multicast](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-multicast) +- [multicast](https://rxjs.dev/api/operators/multicast) :newspaper: - Official docs --- diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index c24ae3b0..a4ac42cb 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -54,7 +54,7 @@ setTimeout(() => { ### Additional Resources -- [publish](http://reactivex-rxjs5.surge.sh/function/index.html#static-function-publish) +- [publish](https://rxjs.dev/api/operators/publish) :newspaper: - Official docs > :file_folder: Source Code: diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 1b7c0623..1955a662 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -66,7 +66,7 @@ const subscribeFour = sharedExample.subscribe(val => console.log(val)); ### Additional Resources -- [share](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-share) +- [share](https://rxjs.dev/api/operators/share) :newspaper: - Official docs - [Sharing streams with share](https://egghead.io/lessons/rxjs-sharing-streams-with-share?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 12c5cf13..d70f46bc 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -168,7 +168,7 @@ const lateSubscriber = lastUrl.subscribe(console.log); ### Additional Resources -- [shareReplay](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-shareReplay) +- [shareReplay](https://rxjs.dev/api/operators/shareReplay) :newspaper: - Official docs --- diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 067d5460..b4373601 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -99,7 +99,7 @@ fromEvent(document, 'keydown') ### Additional Resources -- [bufferCount](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferCount) +- [bufferCount](https://rxjs.dev/api/operators/bufferCount) :newspaper: - Official docs --- diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index e996e5f3..edba2977 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -53,7 +53,7 @@ const subscribe = example.subscribe(val => ### Additional Resources -* [bufferTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferTime) +* [bufferTime](https://rxjs.dev/api/operators/bufferTime) :newspaper: - Official docs * [Time based operators comparison](../../concepts/time-based-operators-comparison.md) diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 225db1d9..6cb5f5b4 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -61,7 +61,7 @@ fromEvent(document, 'mousemove') ### Additional Resources -- [bufferToggle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferToggle) +- [bufferToggle](https://rxjs.dev/api/operators/bufferToggle) :newspaper: - Official docs --- diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 1cce9e05..b7999394 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -37,7 +37,7 @@ const subscribe = bufferWhenExample.subscribe(val => ### Additional Resources -- [bufferWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferWhen) +- [bufferWhen](https://rxjs.dev/api/operators/bufferWhen) :newspaper: - Official docs --- diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index ebfd489a..5bf9e597 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -99,7 +99,7 @@ const subscribe = example.subscribe(val => ### Additional Resources -- [concatMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMap) +- [concatMap](https://rxjs.dev/api/operators/concatMap) :newspaper: - Official docs - [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index ea36d060..63637c9c 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -72,7 +72,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [concatMapTo](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMapTo) +- [concatMapTo](https://rxjs.dev/api/operators/concatMapTo) :newspaper: - Official docs --- diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index db988e58..fb241a1c 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -123,7 +123,7 @@ const exhaustSub = firstInterval ### Additional Resources -- [exhaustMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-exhaustMap) +- [exhaustMap](https://rxjs.dev/api/operators/exhaustMap) :newspaper: - Official docs --- diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 91a3c9d2..995559e9 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -55,7 +55,7 @@ const subscribe = example.subscribe(val => console.log(`RESULT: ${val}`)); ### Additional Resources -- [expand](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-expand) +- [expand](https://rxjs.dev/api/operators/expand) :newspaper: - Official docs --- diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index 887457f8..da7e45cd 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -78,7 +78,7 @@ from(people) ### Additional Resources -- [groupBy](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-groupBy) +- [groupBy](https://rxjs.dev/api/operators/groupBy) :newspaper: - Official docs - [Group higher order observables with RxJS groupBy](https://egghead.io/lessons/rxjs-group-higher-order-observables-with-rxjs-groupby?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 40999447..ce4c57d6 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -71,7 +71,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [map](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-map) +- [map](https://rxjs.dev/api/operators/map) :newspaper: - Official docs - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) :video_camera: - Ben Lesh diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 69b00f9c..560d8d12 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -57,7 +57,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [mapTo](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mapTo) +- [mapTo](https://rxjs.dev/api/operators/mapTo) :newspaper: - Official docs - [Changing behavior with mapTo](https://egghead.io/lessons/rxjs-changing-behavior-with-mapto?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 6fa60bc9..9a2b292c 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -165,7 +165,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [mergeMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeMap) +- [mergeMap](https://rxjs.dev/api/operators/mergeMap) :newspaper: - Official docs - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) :video_camera: :dollar: - Ben Lesh diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index fd94c9c7..e29652a2 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -76,12 +76,6 @@ const subscribe = merge( ).subscribe(val => console.log(val)); ``` -### Additional Resources - -- [partition](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-partition) - :newspaper: - Official docs - ---- ##### Example 3: (v6.5+) Partition as a static function @@ -120,10 +114,11 @@ const subscribe = merge( ).subscribe(val => console.log(val)); ``` + ### Additional Resources -- [partition](https://rxjs.dev/api/index/function/partition) :newspaper: - - Official docs +- [partition](https://rxjs.dev/api/operators/partition) + :newspaper: - Official docs --- diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 7f6786b3..6f619216 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -62,7 +62,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [pluck](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pluck) +- [pluck](https://rxjs.dev/api/operators/pluck) :newspaper: - Official docs --- diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index d3610643..3ab3e0ca 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -34,7 +34,7 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); ### Additional Resources -- [reduce](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-reduce) +- [reduce](https://rxjs.dev/api/operators/reduce) :newspaper: - Official docs - [Scan() vs reduce() | RxJS TUTORIAL](https://www.youtube.com/watch?v=myEeo2rZc3g) :video_camera: - Academind diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index a88b26ef..bda145dd 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -132,7 +132,7 @@ interval(1000) ### Additional Resources -- [scan](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan) +- [scan](https://rxjs.dev/api/operators/scan) :newspaper: - Official docs - [Aggregating streams with reduce and scan using RxJS](https://egghead.io/lessons/rxjs-aggregating-streams-with-reduce-and-scan-using-rxjs) :video_camera: - Ben Lesh diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 6cf13d0c..0fb64f7e 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -143,7 +143,7 @@ timer(0, 5000) ### Additional Resources -- [switchMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap) +- [switchMap](https://rxjs.dev/api/operators/switchMap) :newspaper: - Official docs - [Avoiding switchMap-Related Bugs](https://blog.angularindepth.com/switchmap-bugs-b6de69155524) - Nicholas Jamieson diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index cc59a2ec..21838b5f 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -51,6 +51,11 @@ click$ .subscribe((val: any) => (countdownElem.innerHTML = val)); ``` +### Additional Resources + +- [switchMapTo](https://rxjs.dev/api/operators/switchMapTo) + :newspaper: - Official docs + --- > :file_folder: Source Code: diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 92ba74e1..c644f747 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -36,7 +36,7 @@ interval(100) ### Additional Resources -- [toArray](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-toArray) +- [toArray](https://rxjs.dev/api/operators/toArray) :newspaper: - Official docs --- diff --git a/operators/transformation/window.md b/operators/transformation/window.md index 8360a570..30b4d719 100644 --- a/operators/transformation/window.md +++ b/operators/transformation/window.md @@ -41,7 +41,7 @@ const subscribeTwo = example ### Additional Resources -- [window](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-window) +- [window](https://rxjs.dev/api/operators/window) :newspaper: - Official docs - [Split an RxJS observable with window](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-with-window?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index e07ae39b..97315cb8 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -51,7 +51,7 @@ const subscribeTwo = example ### Additional Resources -- [windowCount](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowCount) +- [windowCount](https://rxjs.dev/api/operators/windowCount) :newspaper: - Official docs --- diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 9bc4a03a..23db6864 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -49,7 +49,7 @@ const subscribeTwo = example ### Additional Resources -- [windowTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowTime) +- [windowTime](https://rxjs.dev/api/operators/windowTime) :newspaper: - Official docs --- diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index c999d6c7..4a695311 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -55,7 +55,7 @@ const subscribeTwo = example ### Additional Resources -- [windowToggle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowToggle) +- [windowToggle](https://rxjs.dev/api/operators/windowToggle) :newspaper: - Official docs - [Split an RxJS observable conditionally with windowToggle](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-conditionally-with-windowtoggle?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 150e563a..736b7a8a 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -53,7 +53,7 @@ const subscribeTwo = example ### Additional Resources -- [windowWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowWhen) +- [windowWhen](https://rxjs.dev/api/operators/windowWhen) :newspaper: - Official docs --- diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 472f4365..65cf14f2 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -50,7 +50,7 @@ const subscribe = message.subscribe(val => console.log(val)); ### Additional Resources -- [delay](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-delay) +- [delay](https://rxjs.dev/api/operators/delay) :newspaper: - Official docs - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 773a59d1..c795d62b 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -33,7 +33,7 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); ### Additional Resources -- [delayWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-delayWhen) +- [delayWhen](https://rxjs.dev/api/operators/delayWhen) :newspaper: - Official docs - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index 91cf8940..eb5fd287 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -38,7 +38,7 @@ const subscription = source.subscribe({ ### Additional Resources -- [dematerialize](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-dematerialize) +- [dematerialize](https://rxjs.dev/api/operators/dematerialize) :newspaper: - Official docs --- diff --git a/operators/utility/finalize.md b/operators/utility/finalize.md index 6b063dde..c6badcc8 100644 --- a/operators/utility/finalize.md +++ b/operators/utility/finalize.md @@ -35,7 +35,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [finalize](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-finalize) +* [finalize](https://rxjs.dev/api/operators/finalize) :newspaper: - Official docs --- diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 5d5381e1..ccaa07cb 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -42,7 +42,7 @@ delayedThing ### Additional Resources -- [repeat](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-repeat) +- [repeat](https://rxjs.dev/api/operators/repeat) :newspaper: - Official docs --- diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index ad7b697d..03e2fa2a 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -36,7 +36,7 @@ fromEvent(document, 'mousedown') ### Additional Resources -- [timeInterval](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-timeInterval) +- [timeInterval](https://rxjs.dev/api/operators/timeInterval) :newspaper: - Official docs --- diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index ba2b98d4..9e3757ff 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -44,7 +44,7 @@ of(4000, 3000, 2000) ### Additional Resources -- [timeout](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/timeout.md) +- [timeout](https://rxjs.dev/api/operators/timeout) :newspaper: - Official Docs --- From f8a91e7534f503df96a52a1a5e1d55941b268040 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 14 Aug 2019 10:11:21 -0400 Subject: [PATCH 147/256] style(site): update typography --- styles/website.css | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/styles/website.css b/styles/website.css index fc934ac0..9163b141 100644 --- a/styles/website.css +++ b/styles/website.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap'); + .ua-ad { text-align: center; padding: 10px 0; @@ -7,4 +9,29 @@ code[class*='language-'], pre[class*='language-'] { text-shadow: none !important; border-radius: 4px; + margin-bottom: 44px; +} + +.book { + font-family: 'Roboto', sans-serif !important; +} + +.book .markdown-section pre > code { + font-family: 'Roboto Mono', Consolas, Monaco, andale mono, ubuntu mono, + monospace !important; + font-size: 0.9em !important; +} + +.markdown-section code { + font-family: 'Roboto Mono', Consolas, Monaco, andale mono, ubuntu mono, + monospace !important; +} + +.markdown-section h5 { + font-size: 0.9em !important; + text-transform: uppercase !important; +} + +.font-settings { + display: none; } From 0a98b86da0f729ac5970fdb74d60c40de7441f76 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 14 Aug 2019 13:29:19 -0400 Subject: [PATCH 148/256] feat(delay): add delay example --- operators/utility/delay.md | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 65cf14f2..6cd5fdf3 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -8,12 +8,34 @@ ### Examples -##### Example 1: Delay for increasing durations +##### Example 1: Delay to recognize long press + +( [StackBlitz](https://stackblitz.com/edit/rxjs-bru5fi?devtoolsheight=60) ) + +```js +import { fromEvent, of } from 'rxjs'; +import { mergeMap, delay, takeUntil } from 'rxjs/operators'; + +const mousedown$ = fromEvent(document, 'mousedown'); +const mouseup$ = fromEvent(document, 'mouseup'); + +mousedown$ + .pipe( + mergeMap(event => + of(event).pipe( + delay(700), + takeUntil(mouseup$) + ) + ) + ) + .subscribe(event => console.log('Long Press!', event)); +``` + +##### Example 2: Delay for increasing durations ( [StackBlitz](https://stackblitz.com/edit/typescript-twjn8r?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/zebatixije/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/1kxtzcu6/) ) +) ```js // RxJS v6+ @@ -50,8 +72,7 @@ const subscribe = message.subscribe(val => console.log(val)); ### Additional Resources -- [delay](https://rxjs.dev/api/operators/delay) - :newspaper: - Official docs +- [delay](https://rxjs.dev/api/operators/delay) :newspaper: - Official docs - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz From 7341a2bf5bcdc8577407ac6bc89085b53c34a661 Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 15 Aug 2019 06:57:35 -0400 Subject: [PATCH 149/256] style(find): update wording --- operators/filtering/find.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/operators/filtering/find.md b/operators/filtering/find.md index d8335b2e..9ee6a452 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -2,7 +2,7 @@ #### signature: `find(predicate: function)` -## Emit the first item that passes predicate, complete. +## Emit the first item that passes predicate then complete. --- @@ -53,8 +53,7 @@ clicks$ ### Additional Resources -- [find](https://rxjs.dev/api/operators/find) :newspaper: - - Official docs +- [find](https://rxjs.dev/api/operators/find) :newspaper: - Official docs --- From dcd5eb6f439efc026831d8a7819cce6d606b5d46 Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 15 Aug 2019 07:00:26 -0400 Subject: [PATCH 150/256] style(find): update tip --- operators/filtering/find.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/find.md b/operators/filtering/find.md index 9ee6a452..7e5bc57f 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -7,7 +7,7 @@ --- :bulb: If you always want the first item emitted, regardless of condition, try -[`first`](first.md)! +[`first()`](first.md)! --- From 73283f60ed3deb7d20f350c9142dace861a9197e Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 15 Aug 2019 07:04:49 -0400 Subject: [PATCH 151/256] style(find): update code sampel --- operators/filtering/find.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/operators/filtering/find.md b/operators/filtering/find.md index 7e5bc57f..8e17eb7d 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -21,16 +21,8 @@ ```js // RxJS v6+ -import { fromEvent, interval } from 'rxjs'; -import { - find, - repeatWhen, - mapTo, - startWith, - tap, - take, - filter -} from 'rxjs/operators'; +import { fromEvent } from 'rxjs'; +import { find, repeatWhen, mapTo, startWith, filter } from 'rxjs/operators'; // elem ref const status = document.getElementById('status'); From d67145ae420be69c13c415c345d7dfae8bc1744e Mon Sep 17 00:00:00 2001 From: btroncone Date: Thu, 15 Aug 2019 07:05:42 -0400 Subject: [PATCH 152/256] style(find): update wording --- operators/filtering/find.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/find.md b/operators/filtering/find.md index 8e17eb7d..1c4ca3ad 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -15,7 +15,7 @@ ### Examples -##### Example 1: Find click inside box, repeat when click occurs outside of box +##### Example 1: Find click inside box, repeat when a click occurs outside of box ( [StackBlitz](https://stackblitz.com/edit/rxjs-hd63we?file=index.ts)) From 3200606756a96e47fa709dce2ad61c342b296472 Mon Sep 17 00:00:00 2001 From: adamlubek Date: Mon, 19 Aug 2019 21:18:17 +0100 Subject: [PATCH 153/256] feat(repeatWhen): add repeatWhen docs (#228) * Create repeatwhen.md * Update README.md * Update README.md * Update complete.md * style(repeatWhen): few wording updates --- operators/README.md | 1 + operators/complete.md | 1 + operators/utility/README.md | 1 + operators/utility/repeatwhen.md | 53 +++++++++++++++++++++++++++++++++ 4 files changed, 56 insertions(+) create mode 100644 operators/utility/repeatwhen.md diff --git a/operators/README.md b/operators/README.md index fa226da0..06c54d2a 100644 --- a/operators/README.md +++ b/operators/README.md @@ -106,6 +106,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [finalize / finally](utility/finalize.md) - [let](utility/let.md) - [repeat](utility/repeat.md) + - [repeatWhen](utility/repeatwhen.md) - [timeInterval](utility/timeinterval.md) - [timeout](utility/timeout.md) - [timeoutWith](utility/timeoutwith.md) diff --git a/operators/complete.md b/operators/complete.md index 9a855381..c881f942 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -65,6 +65,7 @@ _[Prefer a split by operator type?](README.md)_ - [race](combination/race.md) - [range](creation/range.md) - [repeat](utility/repeat.md) +- [repeatWhen](utility/repeatwhen.md) - [retry](error_handling/retry.md) - [retryWhen](error_handling/retrywhen.md) - [sample](filtering/sample.md) diff --git a/operators/utility/README.md b/operators/utility/README.md index a507bdf7..f527cd9f 100644 --- a/operators/utility/README.md +++ b/operators/utility/README.md @@ -12,6 +12,7 @@ provide helpful utilities in your observable toolkit. - [finalize / finally](finalize.md) - [let](let.md) - [repeat](repeat.md) +- [repeatWhen](repeatwhen.md) - [timeInterval](timeinterval.md) - [timeout](timeout.md) - [timeoutWith](timeoutwith.md) diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md new file mode 100644 index 00000000..018a3e78 --- /dev/null +++ b/operators/utility/repeatwhen.md @@ -0,0 +1,53 @@ +# repeatWhen + +#### signature: `repeatWhen(notifier: (notifications: Observable) => Observable): Observable` + +## Repeat an observable on completion based on custom criteria. + +--- + +:bulb: If you just want to repeat a specified number of times, try [retry](retry.md)! + +--- + + +
+ +### Examples + +##### Example 1: Repeat on interval + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-repeatwhen?file=index.ts&devtoolsheight=100) +) + +```js +// RxJS v6+ +import { of, interval } from 'rxjs'; +import { repeatWhen, take } from 'rxjs/operators'; + +const repeatInterval$ = interval(1000).pipe(take(5)); +const source$ = of('hey!').pipe(repeatWhen(_ => repeatInterval$)); + +source$.subscribe(console.log); + +/* +OUTPUT: +hey! +hey! +hey! +hey! +hey! +hey! +*/ +``` + +### Additional Resources + +- [repeatWhen](https://rxjs.dev/api/operators/repeatWhen) + :newspaper: - Official docs + +--- + +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/6.5.2/src/internal/operators/repeatWhen.ts](https://github.com/ReactiveX/rxjs/blob/6.5.2/src/internal/operators/repeatWhen.ts) From fd06ee8bf37248beafed38a453edfeaa9728bc0a Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 19 Aug 2019 16:24:24 -0400 Subject: [PATCH 154/256] style(sequenceEqual): small wording update --- operators/conditional/sequenceequal.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 684981f0..811faf39 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -1,8 +1,8 @@ # sequenceEqual -#### signature: `sequenceEqual(compareTo: Observable, comparor?: (a, b) => boolean): OperatorFunction` +#### signature: `sequenceEqual(compareTo: Observable, comparor?: (a, b) => boolean): Observable` -## Compares all values of two observables in sequence using an optional comparor function and returns an observable of a single boolean value representing whether or not the two sequences are equal. +## Compares emitted sequence to expected sequence for match
From 111e061e5614ec11b50fa802e9ac283efdb7da71 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 21 Aug 2019 10:43:42 -0400 Subject: [PATCH 155/256] chore(typo): fix typo in import comment --- concepts/rxjs-primer.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index e4ee66a9..0903a485 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -119,7 +119,6 @@ want to transform emitted values from an observable source, you can use [`map`](../operators/transformation/map.md): ```js -// import the from operator import { of } from 'rxjs'; import { map } from 'rxjs/operators'; /* @@ -142,7 +141,6 @@ Or if you want to filter for specific values, you can use [`filter`](../operators/filtering/filter.md): ```js -// import the from operator import { of } from 'rxjs'; import { filter } from 'rxjs/operators'; From b1043cb238f7386b163418e9669112628b0f7096 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Rous=C3=A9?= Date: Wed, 21 Aug 2019 21:07:10 -0400 Subject: [PATCH 156/256] Fix a wrong reference to operator (#230) Replace Merge by Concat in the paragraphe about Concat based operator --- concepts/rxjs-primer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index 0903a485..1c857ef8 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -428,7 +428,7 @@ concat( }); ``` -Merge based operators include [`concat`](../operators/combination/concat.md), +Concat based operators include [`concat`](../operators/combination/concat.md), [`concatAll`](../operators/combination/concatall.md), [`concatMap`](../operators/transformation/concatmap.md), and [`concatMapTo`](../operators/transformation/concatmapto.md). From f55c3a15231c47a3523ebb6bac9c2d41ccd3d1aa Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 26 Aug 2019 16:03:27 -0400 Subject: [PATCH 157/256] feat(concat): add additional concat example --- operators/combination/combineall.md | 24 +++++++++--------- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 35 +++++++++++++++++--------- 3 files changed, 36 insertions(+), 25 deletions(-) diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index bd572e7c..ad728f21 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -15,18 +15,17 @@ ##### Example 1: Mapping to inner interval observable ( -[StackBlitz](https://stackblitz.com/edit/typescript-fbxfyh?file=index.ts&devtoolsheight=100) +[StackBlitz](https://stackblitz.com/edit/typescript-bzwkrl?file=index.ts&devtoolsheight=100) ) ```js -// RxJS v6+ import { take, map, combineAll } from 'rxjs/operators'; import { interval } from 'rxjs'; -//emit every 1s, take 2 -const source = interval(1000).pipe(take(2)); -//map each emitted value from source to interval observable that takes 5 values -const example = source.pipe( +// emit every 1s, take 2 +const source$ = interval(1000).pipe(take(2)); +// map each emitted value from source to interval observable that takes 5 values +const example$ = source$.pipe( map(val => interval(1000).pipe( map(i => `Result (${val}): ${i}`), @@ -35,12 +34,13 @@ const example = source.pipe( ) ); /* - 2 values from source will map to 2 (inner) interval observables that emit every 1s + 2 values from source will map to 2 (inner) interval observables that emit every 1s. combineAll uses combineLatest strategy, emitting the last value from each whenever either observable emits a value */ -const combined = example.pipe(combineAll()); -/* +example$ + .pipe(combineAll()) + /* output: ["Result (0): 0", "Result (1): 0"] ["Result (0): 1", "Result (1): 0"] @@ -52,13 +52,13 @@ const combined = example.pipe(combineAll()); ["Result (0): 4", "Result (1): 3"] ["Result (0): 4", "Result (1): 4"] */ -const subscribe = combined.subscribe(val => console.log(val)); + .subscribe(console.log); ``` ### Additional Resources -- [combineAll](https://rxjs.dev/api/operators/combineAll) - :newspaper: - Official docs +- [combineAll](https://rxjs.dev/api/operators/combineAll) :newspaper: - Official + docs --- diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index c0d0708a..2075661c 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -2,7 +2,7 @@ #### signature: `combineLatest(observables: ...Observable, project: function): Observable` -## When any observable emits a value, emit the latest value from each. +## When any observable emits a value, emit the last emitted value from each. --- diff --git a/operators/combination/concat.md b/operators/combination/concat.md index c7cb9312..737229b4 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -39,24 +39,35 @@ concat( .subscribe(console.log); ``` -##### Example 2: concat with delayed observable +##### Example 2: Display message using concat with delayed observables -( -[StackBlitz](https://stackblitz.com/edit/typescript-vsphry?file=index.ts&devtoolsheight=100) -) +![Example 2](https://drive.google.com/uc?export=view&id=1fKsYUKXkSWEDLdii-5rmOAgqy6sUGNjl) + +( [StackBlitz](https://stackblitz.com/edit/typescript-jtzuaa?file=index.ts) ) ```js // RxJS v6+ -import { of, concat } from 'rxjs'; -import { delay } from 'rxjs/operators'; +import { concat, empty } from 'rxjs'; +import { delay, startWith } from 'rxjs/operators'; + +// elems +const userMessage = document.getElementById('message'); +// helper +const delayedMessage = (message, delayedTime = 1000) => { + return empty().pipe( + startWith(message), + delay(delayedTime) + ); +}; concat( - of(1, 2, 3).pipe(delay(3000)), - // after 3s, the first observable will complete and subsquent observable subscribed with values emitted - of(4, 5, 6) -) - // log: 1,2,3,4,5,6 - .subscribe(console.log); + delayedMessage('Get Ready!'), + delayedMessage(3), + delayedMessage(2), + delayedMessage(1), + delayedMessage('Go!'), + delayedMessage('', 2000) +).subscribe((message: any) => (userMessage.innerHTML = message)); ``` ##### Example 3: (Warning!) concat with source that does not complete From 2c5d2e26a9621559ec1b1da33d254b70334b6b61 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 26 Aug 2019 16:09:16 -0400 Subject: [PATCH 158/256] style(concat): update positioning of link --- operators/combination/concat.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 737229b4..50b26de5 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -41,10 +41,10 @@ concat( ##### Example 2: Display message using concat with delayed observables -![Example 2](https://drive.google.com/uc?export=view&id=1fKsYUKXkSWEDLdii-5rmOAgqy6sUGNjl) - ( [StackBlitz](https://stackblitz.com/edit/typescript-jtzuaa?file=index.ts) ) +![Example 2](https://drive.google.com/uc?export=view&id=1fKsYUKXkSWEDLdii-5rmOAgqy6sUGNjl) + ```js // RxJS v6+ import { concat, empty } from 'rxjs'; From c1716ac2f99313c40eafc7451411ee281ba41f0a Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 26 Aug 2019 16:50:44 -0400 Subject: [PATCH 159/256] feat(smartcounter): update smart counter example --- recipes/smartcounter.md | 53 ++++++++++++++++++++++++++++------------- 1 file changed, 37 insertions(+), 16 deletions(-) diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 34a31b49..7f663aae 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -12,50 +12,71 @@ similar with just a few lines of RxJS. #### Vanilla JS -( [JSBin](http://jsbin.com/jojucaqiki/1/edit?js,output) | -[JSFiddle](https://jsfiddle.net/btroncone/au4sqvxu/) ) +( [StackBlitz](https://stackblitz.com/edit/rxjs-m2zsud) ) + +![Smart Counter](https://drive.google.com/uc?export=view&id=1VGCmeGwJpiUL6FfA3EHgtxSFvqlkIVsb) ```js +import { timer, fromEvent, merge } from 'rxjs'; +import { + switchMap, + startWith, + scan, + takeWhile, + takeUntil, + filter, + mapTo, + map, + tap, + pluck +} from 'rxjs/operators'; + +let currentNumber = 0; + +// elems +const input: any = document.getElementById('range'); + // utility functions const takeUntilFunc = (endRange, currentNumber) => { return endRange > currentNumber ? val => val <= endRange : val => val >= endRange; }; - const positiveOrNegative = (endRange, currentNumber) => { return endRange > currentNumber ? 1 : -1; }; - const updateHTML = id => val => (document.getElementById(id).innerHTML = val); -// display -const input = document.getElementById('range'); -const updateButton = document.getElementById('update'); -const subscription = (function(currentNumber) { - return fromEvent(updateButton, 'click').pipe( - map(_ => parseInt(input.value)), +// streams +const enter$ = fromEvent(input, 'keyup').pipe( + pluck('code'), + filter(code => code === 'Enter') +); + +enter$ + .pipe( + map(() => parseInt(input.value)), switchMap(endRange => { return timer(0, 20).pipe( mapTo(positiveOrNegative(endRange, currentNumber)), startWith(currentNumber), scan((acc, curr) => acc + curr), - takeWhile(takeUntilFunc(endRange, currentNumber)); - ) + takeWhile(takeUntilFunc(endRange, currentNumber)) + ); }), tap(v => (currentNumber = v)), startWith(currentNumber) ) .subscribe(updateHTML('display')); -})(0); ``` ###### HTML ```html - - -

0

+
+ +

+
``` We can easily take our vanilla smart counter and wrap it in any popular From 7d220ef1c0b665f0cc168c08077e94224a20755c Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 26 Aug 2019 16:58:29 -0400 Subject: [PATCH 160/256] style(smart-counter): update gif --- recipes/smartcounter.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 7f663aae..aa8aab97 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -14,7 +14,7 @@ similar with just a few lines of RxJS. ( [StackBlitz](https://stackblitz.com/edit/rxjs-m2zsud) ) -![Smart Counter](https://drive.google.com/uc?export=view&id=1VGCmeGwJpiUL6FfA3EHgtxSFvqlkIVsb) +![Smart Counter](https://drive.google.com/uc?export=view&id=1cG8huWWfsqSe8jLed_NmLrENnF0QyhfZ) ```js import { timer, fromEvent, merge } from 'rxjs'; From 72882c871959dcbd621ae437cb31ae74d056c6a5 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 29 Aug 2019 08:36:10 -0400 Subject: [PATCH 161/256] feat(mergeMap): update mergeMap examples --- operators/transformation/mergemap.md | 167 +++++++++++++++++---------- 1 file changed, 108 insertions(+), 59 deletions(-) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 9a2b292c..39ab5da4 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -43,108 +43,157 @@ can also limit the number of active inner subscriptions at a time with the ### Examples -##### Example 1: mergeMap with observable +##### Example 1: mergeMap simulating save of click locations ( -[StackBlitz](https://stackblitz.com/edit/typescript-f8ghcx?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/mojurubana/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/41awjgda/) ) +[StackBlitz](https://stackblitz.com/edit/rxjs-xfwdnl?file=index.ts&devtoolsheight=60) +) ```js // RxJS v6+ -import { of } from 'rxjs'; +import { fromEvent, of } from 'rxjs'; +import { mergeMap, delay } from 'rxjs/operators'; + +// faking network request for save +const saveLocation = location => { + return of(location).pipe(delay(500)); +}; +// streams +const click$ = fromEvent(document, 'click'); + +click$ + .pipe( + mergeMap((e: MouseEvent) => { + return saveLocation({ + x: e.clientX, + y: e.clientY, + timestamp: Date.now() + }); + }) + ) + // Saved! {x: 98, y: 170, ...} + .subscribe(r => console.log('Saved!', r)); +``` + +##### Example 2: mergeMap with ajax observable + +( +[StackBlitz](https://stackblitz.com/edit/rxjs-wixf2a?file=index.ts&devtoolsheight=60) +) + +```js +// RxJS v6+ +import { fromEvent } from 'rxjs'; +import { ajax } from 'rxjs/ajax'; import { mergeMap } from 'rxjs/operators'; -//emit 'Hello' -const source = of('Hello'); -//map to inner observable and flatten -const example = source.pipe(mergeMap(val => of(`${val} World!`))); -//output: 'Hello World!' -const subscribe = example.subscribe(val => console.log(val)); +// free api url +const API_URL = 'https://jsonplaceholder.typicode.com/todos/1'; + +// streams +const click$ = fromEvent(document, 'click'); + +click$ + .pipe( + /* + * Using mergeMap for example, but generally for GET requests + * you will prefer switchMap. + * Also, if you do not need the parameter like + * below you could use mergeMapTo instead. + * ex. mergeMapTo(ajax.getJSON(API_URL)) + */ + mergeMap(() => ajax.getJSON(API_URL)) + ) + // { userId: 1, id: 1, ...} + .subscribe(console.log); ``` -##### Example 2: mergeMap with promise +##### Example 3: mergeMap with promise (could also use [from](../creation/from.md) to convert to observable) ( [StackBlitz](https://stackblitz.com/edit/typescript-pnnsrq?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/vuhecorana/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/o9kxpvsv/) ) +) ```js // RxJS v6+ import { of } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; -//emit 'Hello' -const source = of('Hello'); -//mergeMap also emits result of promise +// helper to create promise const myPromise = val => new Promise(resolve => resolve(`${val} World From Promise!`)); -//map to promise and emit result -const example = source.pipe(mergeMap(val => myPromise(val))); -//output: 'Hello World From Promise' -const subscribe = example.subscribe(val => console.log(val)); + +// emit 'Hello' +const source$ = of('Hello'); + +// map to promise and emit result +source$ + .pipe(mergeMap(val => myPromise(val))) + // output: 'Hello World From Promise' + .subscribe(val => console.log(val)); ``` -##### Example 3: mergeMap with `resultSelector` +##### Example 4: mergeMap with `resultSelector` ( [StackBlitz](https://stackblitz.com/edit/typescript-9p6ws7?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/wajokocage/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/zu9a6vr4/) ) +) ```js // RxJS v6+ import { of } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; -/* - you can also supply a second argument which receives the source value and emitted - value of inner observable or promise -*/ -//emit 'Hello' -const source = of('Hello'); -//mergeMap also emits result of promise +// helper to create promise const myPromise = val => new Promise(resolve => resolve(`${val} World From Promise!`)); -const example = source.pipe( - mergeMap( - val => myPromise(val), - (valueFromSource, valueFromPromise) => { - return `Source: ${valueFromSource}, Promise: ${valueFromPromise}`; - } + +// emit 'Hello' +const source$ = of('Hello'); + +source$ + .pipe( + mergeMap( + val => myPromise(val), + /* + you can also supply a second argument which receives the source value and emitted + value of inner observable or promise + */ + (valueFromSource, valueFromPromise) => { + return `Source: ${valueFromSource}, Promise: ${valueFromPromise}`; + } + ) ) -); -//output: "Source: Hello, Promise: Hello World From Promise!" -const subscribe = example.subscribe(val => console.log(val)); + // output: "Source: Hello, Promise: Hello World From Promise!" + .subscribe(val => console.log(val)); ``` -##### Example 4: mergeMap with concurrent value +##### Example 5: mergeMap with concurrent value ( [StackBlitz](https://stackblitz.com/edit/typescript-r3gcr4?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/qaqucuwise/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/2rmLxpyz/) ) +) ```js // RxJS v6+ import { interval } from 'rxjs'; import { mergeMap, take } from 'rxjs/operators'; -//emit value every 1s -const source = interval(1000); - -const example = source.pipe( - mergeMap( - //project - val => interval(5000).pipe(take(2)), - //resultSelector - (oVal, iVal, oIndex, iIndex) => [oIndex, oVal, iIndex, iVal], - //concurrent - 2 +// emit value every 1s +const source$ = interval(1000); + +source$ + .pipe( + mergeMap( + // project + val => interval(5000).pipe(take(2)), + // resultSelector + (oVal, iVal, oIndex, iIndex) => [oIndex, oVal, iIndex, iVal], + // concurrent + 2 + ) ) -); -/* + /* Output: [0, 0, 0, 0] <--1st inner observable [1, 1, 0, 0] <--2nd inner observable @@ -153,7 +202,7 @@ const example = source.pipe( [2, 2, 0, 0] <--3rd inner observable [3, 3, 0, 0] <--4th inner observable */ -const subscribe = example.subscribe(val => console.log(val)); + .subscribe(val => console.log(val)); ``` ### Related Recipes @@ -165,8 +214,8 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [mergeMap](https://rxjs.dev/api/operators/mergeMap) - :newspaper: - Official docs +- [mergeMap](https://rxjs.dev/api/operators/mergeMap) :newspaper: - Official + docs - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) :video_camera: :dollar: - Ben Lesh - [Async requests and responses in RxJS](https://egghead.io/lessons/rxjs-04-reactive-programming-async-requests-and-responses-in-rxjs) From 137db1d75b52bdfa329687486c41f72e5eb6511e Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 29 Aug 2019 08:41:21 -0400 Subject: [PATCH 162/256] fix(mergeMap): update broken link --- operators/transformation/mergemap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 39ab5da4..c0ce2269 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -37,7 +37,7 @@ manage the completion of the inner subscription, think [`take`](../filtering/take.md) or [`takeUntil`](../filtering/takeuntil.md). You can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in -[example 4](#example-4-mergemap-with-concurrent-value). +[example 5](#example-5-mergemap-with-concurrent-value).
From 9627ee9562213af88af1ecb78dac7ac9dfaaf824 Mon Sep 17 00:00:00 2001 From: David Pertiller Date: Fri, 6 Sep 2019 16:01:03 +0200 Subject: [PATCH 163/256] chore(operators): fix import in retryWhen recipe (#229) _throw has been replaced by throwError --- operators/error_handling/retrywhen.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index a5f4c2f7..e5f56d28 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -60,7 +60,7 @@ const subscribe = example.subscribe(val => console.log(val)); ) ```js -import { Observable, _throw, timer } from 'rxjs'; +import { Observable, throwError, timer } from 'rxjs'; import { mergeMap, finalize } from 'rxjs/operators'; export const genericRetryStrategy = ({ @@ -81,7 +81,7 @@ export const genericRetryStrategy = ({ retryAttempt > maxRetryAttempts || excludedStatusCodes.find(e => e === error.status) ) { - return _throw(error); + return throwError(error); } console.log( `Attempt ${retryAttempt}: retrying in ${retryAttempt * From 965f77e956a900f73ef55077141c106b21eb26bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Rous=C3=A9?= Date: Fri, 6 Sep 2019 10:02:08 -0400 Subject: [PATCH 164/256] style(intro): coherent variable for constant numeric value (#231) `take` explanation used '`x`' for explaining taking `n` values then just afterward `takeLast` used 'n'. I choose a middle ground with `n` because n is often associated with Int, and the use of ``(backtick) allow for a more readable sentence in my opinion. Other options would have been: - `x` for both sentences - x for both sentences - n for both sentences - completely another way to convey the meaning, so long as it is consistant. --- concepts/rxjs-primer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index 1c857ef8..d8106da6 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -457,10 +457,10 @@ There are also operators that share a similar goal but offer flexibility in their triggers. For instance, for unsubscribing from an observable after a specific condition is met, we could use: -1. [`take`](../operators/filtering/take.md) when we know we only ever want `x` +1. [`take`](../operators/filtering/take.md) when we know we only ever want `n` values. 2. [`takeLast`](../operators/filtering/takelast.md) when you just want the last - n values. + `n` values. 3. [`takeWhile`](../operators/filtering/takewhile.md) when we have a predicate expression to supply. 4. [`takeUntil`](../operators/filtering/takeuntil.md) when we only want the From 4e47338de91426cfb34913292c6dbbc6b88e4983 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 6 Sep 2019 10:06:42 -0400 Subject: [PATCH 165/256] chore(recipes): add flappy bird recipe gif --- recipes/flappy-bird-game.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md index fc6d2d57..f1637f0b 100644 --- a/recipes/flappy-bird-game.md +++ b/recipes/flappy-bird-game.md @@ -10,6 +10,8 @@ This recipe demonstrates RxJs implementation of Flappy Bird like game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-flappy-bird?file=index.ts) ) +![Flappy Bird](https://drive.google.com/uc?export=view&id=1NcV8nce0NfvqghyBr0gxLoPm_Y4zjzXI) + #### index.ts ```js From c9856600bfc586ced5e5bcdf98f52ba9a170b52a Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 16 Sep 2019 10:26:55 -0400 Subject: [PATCH 166/256] chore(recipes): add gif to all recipes --- recipes/alphabet-invasion-game.md | 8 +- recipes/breakout-game.md | 6 +- recipes/car-racing-game.md | 184 ++++++++++++++++++------------ recipes/catch-the-dot-game.md | 2 + recipes/click-ninja-game.md | 2 + recipes/gameloop.md | 2 + recipes/http-polling.md | 2 + recipes/lockscreen.md | 4 +- recipes/matrix-digital-rain.md | 4 +- recipes/memory-game.md | 116 +++++++++++-------- recipes/mine-sweeper-game.md | 4 +- recipes/platform-jumper-game.md | 8 +- recipes/progressbar.md | 2 + recipes/save-indicator.md | 2 + recipes/space-invaders-game.md | 30 ++--- recipes/stop-watch.md | 6 +- recipes/swipe-to-refresh.md | 4 +- recipes/tank-battle-game.md | 4 +- recipes/tetris-game.md | 4 +- recipes/type-ahead.md | 2 + 20 files changed, 241 insertions(+), 155 deletions(-) diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index b494a26f..0f69ec81 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Alphabet Invasion Game. +This recipe demonstrates RxJS implementation of Alphabet Invasion Game.
@@ -11,6 +11,8 @@ This recipe demonstrates RxJs implementation of Alphabet Invasion Game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-alphabet-invasion?file=index.ts) ) +![Alphabet Invasion](https://drive.google.com/uc?export=view&id=1huQHQFCmfdKPbh7ayjzJOOd1leVAY7Pi) + #### index.ts ```js @@ -56,9 +58,7 @@ const keys$ = fromEvent(document, 'keydown').pipe( ); const renderGame = (state: State) => ( - (document.body.innerHTML = `Score: ${state.score}, Level: ${ - state.level - }
`), + (document.body.innerHTML = `Score: ${state.score}, Level: ${state.level}
`), state.letters.forEach( l => (document.body.innerHTML += ' '.repeat(l.yPos) + l.letter + '
') diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md index 88a853d6..7c924910 100644 --- a/recipes/breakout-game.md +++ b/recipes/breakout-game.md @@ -10,6 +10,8 @@ This recipe demonstrates an RxJS implementation of Breakout game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-breakout?file=index.ts) ) +![Breakout Game](https://drive.google.com/uc?export=view&id=1unsdGI5UBZu9ECjFtA4t_hLl4l7CRBSE) + #### index.ts ```js @@ -141,9 +143,7 @@ export const render = ([player, ball, bricks]: [ game[ball.x][ball.y] = bll; bricks.forEach(b => (game[b.x][b.y] = brick)); - document.body.innerHTML = `Score: ${player.score} Lives: ${ - player.lives - }
`; + document.body.innerHTML = `Score: ${player.score} Lives: ${player.lives}
`; game.forEach(r => { const rowContainer = document.createElement('div'); r.forEach(c => rowContainer.appendChild(createElem(c))); diff --git a/recipes/car-racing-game.md b/recipes/car-racing-game.md index 747f0bc8..f837ac71 100644 --- a/recipes/car-racing-game.md +++ b/recipes/car-racing-game.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Car Racing game. +This recipe demonstrates RxJS implementation of Car Racing game.
@@ -10,49 +10,76 @@ This recipe demonstrates RxJs implementation of Car Racing game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-car-racing?file=index.html) ) +![Car Racing](https://drive.google.com/uc?export=view&id=1geB1veKhXmqEeTqy5h23Lyo6dgsRRPjH) + #### index.ts ```js // RxJS v6+ -import { interval, fromEvent, combineLatest, of, BehaviorSubject, noop } from 'rxjs'; -import { scan, tap, pluck, startWith, takeWhile, finalize, switchMap } from 'rxjs/operators'; +import { + interval, + fromEvent, + combineLatest, + of, + BehaviorSubject, + noop +} from 'rxjs'; +import { + scan, + tap, + pluck, + startWith, + takeWhile, + finalize, + switchMap +} from 'rxjs/operators'; import { Car, Road, Player, Game } from './interfaces'; import { gameHeight, gameWidth, levelDuration } from './constants'; import { updateState } from './state'; import { render, renderGameOver } from './html-renderer'; const car = (x: number, y: number): Car => ({ x, y, scored: false }); -const randomCar = (): Car => car(0, Math.floor(Math.random() * Math.floor(gameWidth))); +const randomCar = (): Car => + car(0, Math.floor(Math.random() * Math.floor(gameWidth))); const gameSpeed$ = new BehaviorSubject(200); const road$ = gameSpeed$.pipe( switchMap(i => - interval(i) - .pipe( - scan((road: Road, _: number): Road => ( - road.cars = road.cars.filter(c => c.x < gameHeight - 1), - road.cars[0].x === (gameHeight / 2) ? road.cars.push(randomCar()) : noop, + interval(i).pipe( + scan( + (road: Road, _: number): Road => ( + (road.cars = road.cars.filter(c => c.x < gameHeight - 1)), + road.cars[0].x === gameHeight / 2 + ? road.cars.push(randomCar()) + : noop, road.cars.forEach(c => c.x++), road - ), { cars: [randomCar()] }) + ), + { cars: [randomCar()] } ) - )); + ) + ) +); -const keys$ = fromEvent(document, 'keyup') - .pipe( - startWith({ code: '' }), - pluck('code') - ); +const keys$ = fromEvent(document, 'keyup').pipe( + startWith({ code: '' }), + pluck('code') +); -const player$ = keys$ - .pipe( - scan((player: Player, key: string): Player => (player.y += - key === 'ArrowLeft' && player.y > 0 - ? -1 - : key === 'ArrowRight' && player.y < gameWidth - 1 +const player$ = keys$.pipe( + scan( + (player: Player, key: string): Player => ( + (player.y += + key === 'ArrowLeft' && player.y > 0 + ? -1 + : key === 'ArrowRight' && player.y < gameWidth - 1 ? 1 - : 0, player), { y: 0 }) - ); + : 0), + player + ), + { y: 0 } + ) +); const state$ = of({ score: 1, @@ -64,13 +91,12 @@ const state$ = of({ const isNotGameOver = ([state]: Game) => state.lives > 0; -const game$ = combineLatest(state$, road$, player$) - .pipe( - scan(updateState(gameSpeed$)), - tap(render), - takeWhile(isNotGameOver), - finalize(renderGameOver) - ); +const game$ = combineLatest(state$, road$, player$).pipe( + scan(updateState(gameSpeed$)), + tap(render), + takeWhile(isNotGameOver), + finalize(renderGameOver) +); game$.subscribe(); ``` @@ -83,30 +109,31 @@ import { Game } from './interfaces'; import { gameHeight, gameWidth, levelDuration } from './constants'; const handleScoreIncrease = ([state, road, player]: Game) => - !road.cars[0].scored - && road.cars[0].y !== player.y - && road.cars[0].x === gameHeight - 1 - ? (road.cars[0].scored = true, state.score += 1) + !road.cars[0].scored && + road.cars[0].y !== player.y && + road.cars[0].x === gameHeight - 1 + ? ((road.cars[0].scored = true), (state.score += 1)) : noop; const handleCollision = ([state, road, player]: Game) => - road.cars[0].x === gameHeight - 1 - && road.cars[0].y === player.y - ? state.lives -= 1 + road.cars[0].x === gameHeight - 1 && road.cars[0].y === player.y + ? (state.lives -= 1) : noop; -const updateSpeed = ([state]: Game, gameSpeed: BehaviorSubject) => - (state.duration -= 10, - state.duration < 0 - ? ( - state.duration = levelDuration * state.level, - state.level++, - state.interval -= state.interval > 60 ? 20 : 0, - gameSpeed.next(state.interval) - ) - : () => { }); +const updateSpeed = ([state]: Game, gameSpeed: BehaviorSubject) => ( + (state.duration -= 10), + state.duration < 0 + ? ((state.duration = levelDuration * state.level), + state.level++, + (state.interval -= state.interval > 60 ? 20 : 0), + gameSpeed.next(state.interval)) + : () => {} +); -export const updateState = (gameSpeed: BehaviorSubject) => (_, game: Game) => ( +export const updateState = (gameSpeed: BehaviorSubject) => ( + _, + game: Game +) => ( handleScoreIncrease(game), handleCollision(game), updateSpeed(game, gameSpeed), @@ -120,33 +147,38 @@ export const updateState = (gameSpeed: BehaviorSubject) => (_, game: Gam import { Game } from './interfaces'; import { gameHeight, gameWidth, car, player } from './constants'; -const createElem = (column: number) => (elem => - ( - elem.style.display = 'inline-block', - elem.style.marginLeft = '3px', - elem.style.height = '12px', - elem.style.width = '6px', - elem.style.borderRadius = '40%', - elem.style['background-color'] = column === car - ? 'green' - : column === player - ? 'blue' - : 'white', +const createElem = (column: number) => + (elem => ( + (elem.style.display = 'inline-block'), + (elem.style.marginLeft = '3px'), + (elem.style.height = '12px'), + (elem.style.width = '6px'), + (elem.style.borderRadius = '40%'), + (elem.style['background-color'] = + column === car ? 'green' : column === player ? 'blue' : 'white'), elem - ))(document.createElement('div')) - -export const render = ([state, road, playerPosition]: Game) => (renderFrame => ( - road.cars.forEach(c => renderFrame[c.x][c.y] = car), - document.getElementById('game').innerHTML = `Score: ${state.score} Lives: ${state.lives} Level: ${state.level}`, - renderFrame[gameHeight - 1][playerPosition.y] = player, - renderFrame.forEach(r => { - const rowContainer = document.createElement('div'); - r.forEach(c => rowContainer.appendChild(createElem(c))); - document.getElementById('game').appendChild(rowContainer); - }) -))(Array(gameHeight).fill(0).map(e => Array(gameWidth).fill(0))); - -export const renderGameOver = () => document.getElementById('game').innerHTML += '
GAME OVER!!!'; + ))(document.createElement('div')); + +export const render = ([state, road, playerPosition]: Game) => + (renderFrame => ( + road.cars.forEach(c => (renderFrame[c.x][c.y] = car)), + (document.getElementById( + 'game' + ).innerHTML = `Score: ${state.score} Lives: ${state.lives} Level: ${state.level}`), + (renderFrame[gameHeight - 1][playerPosition.y] = player), + renderFrame.forEach(r => { + const rowContainer = document.createElement('div'); + r.forEach(c => rowContainer.appendChild(createElem(c))); + document.getElementById('game').appendChild(rowContainer); + }) + ))( + Array(gameHeight) + .fill(0) + .map(e => Array(gameWidth).fill(0)) + ); + +export const renderGameOver = () => + (document.getElementById('game').innerHTML += '
GAME OVER!!!'); ``` #### interfaces.ts @@ -156,7 +188,7 @@ export interface Car { x: number; y: number; scored: boolean; -}; +} export interface Road { cars: Car[]; diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index 04ad8ada..ce338b00 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -12,6 +12,8 @@ This recipe shows usage of scan operator for state management in simple game [StackBlitz](https://stackblitz.com/edit/rxjs-catch-the-dot-game?file=index.ts) ) +![Catch the dot](https://drive.google.com/uc?export=view&id=1VKje20yXoplC2MPgzxP-OykpvhDuv6el) + #### index.ts ```js diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md index 8ec8b8ed..c4084da1 100644 --- a/recipes/click-ninja-game.md +++ b/recipes/click-ninja-game.md @@ -10,6 +10,8 @@ This recipe shows usage of time interval operator in a simple game ( [StackBlitz](https://stackblitz.com/edit/rxjs-click-ninja?file=index.ts) ) +![Click Ninja Game](https://drive.google.com/uc?export=view&id=1VT8umN-jtaqBfcKtlCwZ3w805qe3bXWN) + #### index.ts ```js diff --git a/recipes/gameloop.md b/recipes/gameloop.md index 1444bb5d..038eaf78 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -17,6 +17,8 @@ update our objects, and render to to the screen on each frame emission. [StackBlitz](https://stackblitz.com/edit/rxjs-5-based-game-loop-jlhyfx?file=index.ts&devtoolsheight=50) ) +![Game Loop](https://drive.google.com/uc?export=view&id=1d4j8fx_b_NTT89VhYAqaqaff46oZaPms) + ```js import { BehaviorSubject, Observable, of, fromEvent } from 'rxjs'; import { buffer, bufferCount, expand, filter, map, share, tap, withLatestFrom } from 'rxjs/operators'; diff --git a/recipes/http-polling.md b/recipes/http-polling.md index d1d70d8c..cade3653 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -17,6 +17,8 @@ easy to reason about as a stream of data. [StackBlitz](https://stackblitz.com/edit/rxjs-http-poll-recipe-jc5cj7?file=index.ts&devtoolsheight=50) ) +![HTTP Polling](https://drive.google.com/uc?export=view&id=1HwHApLDoxO9Zc5DAG3XtgJBl83CpXmjU) + ```js // Import stylesheets import './style.css'; diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index ff389015..2d119e99 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of lockscreen functionality (known +This recipe demonstrates RxJS implementation of lockscreen functionality (known for example from smartphones).
@@ -13,6 +13,8 @@ for example from smartphones). [StackBlitz](https://stackblitz.com/edit/rxjs-lockscreen?file=index.ts&devtoolsheight=30) ) +![Lockscreen](https://drive.google.com/uc?export=view&id=1EknMWCVag08IuecwP4UppUR7fKn3qd-2) + #### index.ts ```js diff --git a/recipes/matrix-digital-rain.md b/recipes/matrix-digital-rain.md index cab9655f..61a8d7f8 100644 --- a/recipes/matrix-digital-rain.md +++ b/recipes/matrix-digital-rain.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Matrix Digital Rain. +This recipe demonstrates RxJS implementation of Matrix Digital Rain.
@@ -10,6 +10,8 @@ This recipe demonstrates RxJs implementation of Matrix Digital Rain. ( [StackBlitz](https://stackblitz.com/edit/rxjs-matrix?file=index.ts) ) +![Matrix Digital Rain](https://drive.google.com/uc?export=view&id=1ZEyGvICTosGA58SVWq8kBK8mBWyEpk9T) + #### index.ts ```js diff --git a/recipes/memory-game.md b/recipes/memory-game.md index 0116f945..d8c84c95 100644 --- a/recipes/memory-game.md +++ b/recipes/memory-game.md @@ -10,63 +10,85 @@ This recipe demonstrates an RxJS game to train your memory. ( [StackBlitz](https://stackblitz.com/edit/rxjs-memory-game?file=index.ts) ) +![Memory Game](https://drive.google.com/uc?export=view&id=1IsizNEcko-aKcyb54ZuMis-gHs9UR9Ei) + #### index.ts ```js // RxJS v6+ import { EMPTY, from, fromEvent, generate, interval, merge, noop } from 'rxjs'; -import { map, pluck, scan, sequenceEqual, switchMap, take, tap } from 'rxjs/operators'; +import { + map, + pluck, + scan, + sequenceEqual, + switchMap, + take, + tap +} from 'rxjs/operators'; const random = (): number => Math.floor(Math.random() * Math.floor(8)); -const setInfo = (text: string) => document.getElementById('info').innerHTML = text; -const displayLevelChange = () => document - .querySelectorAll('.child') - .forEach((c: HTMLElement) => c.style.background = 'gray'); - -const checkIfGameOver$ = (randomSequence: number[]) => (userSequence: number[]) => - from(userSequence) - .pipe( - sequenceEqual(from(randomSequence)), - tap(match => - !match && userSequence.length === randomSequence.length - ? setInfo('GAME OVER!') - : noop - ) - ); - -const takePlayerInput$ = (randomSequence: number[]) => _ => fromEvent(document, 'click') - .pipe( +const setInfo = (text: string) => + (document.getElementById('info').innerHTML = text); +const displayLevelChange = () => + document + .querySelectorAll('.child') + .forEach((c: HTMLElement) => (c.style.background = 'gray')); + +const checkIfGameOver$ = (randomSequence: number[]) => ( + userSequence: number[] +) => + from(userSequence).pipe( + sequenceEqual(from(randomSequence)), + tap(match => + !match && userSequence.length === randomSequence.length + ? setInfo('GAME OVER!') + : noop + ) + ); + +const takePlayerInput$ = (randomSequence: number[]) => _ => + fromEvent(document, 'click').pipe( take(randomSequence.length), - scan((acc: number[], curr: MouseEvent) => [...acc, parseInt(curr.target['id'])], []), + scan( + (acc: number[], curr: MouseEvent) => [ + ...acc, + parseInt(curr.target['id']) + ], + [] + ), switchMap(checkIfGameOver$(randomSequence)), - switchMap(result => result - ? (displayLevelChange(), memoryGame$(randomSequence.length + 1)) - : EMPTY) + switchMap(result => + result + ? (displayLevelChange(), memoryGame$(randomSequence.length + 1)) + : EMPTY + ) ); -const showSequenceToMemorize$ = (memorySize: number) => (randomSequence: number[]) => - interval(1000) - .pipe( - tap(i => setInfo(i === memorySize - 1 ? `YOUR TURN` : `${memorySize - i} elements`)), - take(randomSequence.length), - map(index => randomSequence[index]), - tap(value => document.getElementById(`${value}`).click()), - switchMap(takePlayerInput$(randomSequence)) - ); +const showSequenceToMemorize$ = (memorySize: number) => ( + randomSequence: number[] +) => + interval(1000).pipe( + tap(i => + setInfo(i === memorySize - 1 ? `YOUR TURN` : `${memorySize - i} elements`) + ), + take(randomSequence.length), + map(index => randomSequence[index]), + tap(value => document.getElementById(`${value}`).click()), + switchMap(takePlayerInput$(randomSequence)) + ); const memoryGame$ = memorySize => - generate(1, x => x <= memorySize, x => x + 1) - .pipe( - scan((acc: number[], _: number): number[] => [...acc, random() + 1], []), - switchMap(showSequenceToMemorize$(memorySize)) - ); + generate(1, x => x <= memorySize, x => x + 1).pipe( + scan((acc: number[], _: number): number[] => [...acc, random() + 1], []), + switchMap(showSequenceToMemorize$(memorySize)) + ); const elementClick$ = (event: string, color: string) => - fromEvent(document.querySelectorAll('.child'), event) - .pipe( - pluck('srcElement'), - tap((e: HTMLElement) => e.style.background = color) - ); + fromEvent(document.querySelectorAll('.child'), event).pipe( + pluck('srcElement'), + tap((e: HTMLElement) => (e.style.background = color)) + ); const clicks$ = merge( elementClick$('click', 'lightgray'), @@ -85,7 +107,7 @@ game$.subscribe(); .parent { border-spacing: 5px; width: 50%; - padding: .5em; + padding: 0.5em; } .parent.perspective { @@ -93,18 +115,18 @@ game$.subscribe(); } .child { - margin: .5em; + margin: 0.5em; max-width: 2em; min-width: 2em; height: 2.8em; - padding: .5em; + padding: 0.5em; display: table-cell; - border: 1px solid rgba(0, 0, 0, .5); + border: 1px solid rgba(0, 0, 0, 0.5); } .parent.perspective .child { transform: rotateX(40deg); - transition: all .3s ease-in; + transition: all 0.3s ease-in; } diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md index f752aa0a..242afaa7 100644 --- a/recipes/mine-sweeper-game.md +++ b/recipes/mine-sweeper-game.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Mine Sweeper Game. +This recipe demonstrates RxJS implementation of Mine Sweeper Game.
@@ -10,6 +10,8 @@ This recipe demonstrates RxJs implementation of Mine Sweeper Game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-minesweeper?file=index.ts) ) +![Mine Sweeper](https://drive.google.com/uc?export=view&id=18_2_QWnk5ImRT_dGaglKMvtWKa4xwC6B) + #### index.ts ```js diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md index b95fc808..12a6c852 100644 --- a/recipes/platform-jumper-game.md +++ b/recipes/platform-jumper-game.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Platform Jumper game. +This recipe demonstrates RxJS implementation of Platform Jumper game.
@@ -10,6 +10,8 @@ This recipe demonstrates RxJs implementation of Platform Jumper game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-platform-jumper?file=index.ts) ) +![Platform Jumper](https://drive.google.com/uc?export=view&id=1poxaFwTtypxoTzOU13KcvE5fIcnzXog-) + #### index.ts ```js @@ -201,9 +203,7 @@ import { gameSize } from './constants'; import { Player, Platform } from './interfaces'; export const render = ([player, platforms]: [Player, Platform[]]) => { - document.body.innerHTML = `Lives: ${player.lives} Score: ${ - player.score - }
`; + document.body.innerHTML = `Lives: ${player.lives} Score: ${player.score}
`; const game = Array(gameSize) .fill(0) diff --git a/recipes/progressbar.md b/recipes/progressbar.md index 45f0a828..7c0f8a13 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -14,6 +14,8 @@ completes. [StackBlitz](https://stackblitz.com/edit/rxjs-5-progress-bar-wxdxwe?file=index.ts&devtoolsheight=50) ) +![Progress Bar](https://drive.google.com/uc?export=view&id=18wsoRuVkjiQmhTDk8CgZo3BHTUTEyMqT) + ```js import './style.css'; diff --git a/recipes/save-indicator.md b/recipes/save-indicator.md index 3e2b31ee..535a9ede 100644 --- a/recipes/save-indicator.md +++ b/recipes/save-indicator.md @@ -9,6 +9,8 @@ RxJS. ( [StackBlitz](https://stackblitz.com/edit/rxjs-3txbvy?file=index.ts) ) +![Save Indicator](https://drive.google.com/uc?export=view&id=1sYFqLoKlT0EPHxSDMSX7pT14RDjybU0Q) + ```js import { fromEvent, of, merge, empty, concat, defer } from 'rxjs'; import { diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index 11c04615..3c3f9227 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Space Invaders Game. +This recipe demonstrates RxJS implementation of Space Invaders Game.
@@ -10,6 +10,9 @@ This recipe demonstrates RxJs implementation of Space Invaders Game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-space-invaders?file=index.ts) ) +![Space +Invaders](https://drive.google.com/uc?export=view&id=1s3JUvMEKVDMroou92mCtGHr9-qu89KWL) + #### index.ts ```js @@ -36,12 +39,10 @@ const spaceInvaders$ = interval(100).pipe( repeat() ) ), - map( - ([intrvl, event]: [number, KeyboardEvent]): Input => ({ - dlta: intrvl, - key: event.code - }) - ), + map(([intrvl, event]: [number, KeyboardEvent]): Input => ({ + dlta: intrvl, + key: event.code + })), scan(gameUpdate, initialState), tap(e => paint(e.game, e.playerLives, e.score, e.isGameOver)) ); @@ -125,13 +126,14 @@ const updateState = (state: State): State => ({ ) : i ), - invadersShoots: ((state.invadersShoots = - state.delta % state.shootFrequency === 0 - ? [...state.invadersShoots, addInvaderShoot(state)] - : state.invadersShoots), - state.invadersShoots - .filter(e => e.x < gameSize - 1) - .map(e => gameObject(e.x + 1, e.y))), + invadersShoots: + ((state.invadersShoots = + state.delta % state.shootFrequency === 0 + ? [...state.invadersShoots, addInvaderShoot(state)] + : state.invadersShoots), + state.invadersShoots + .filter(e => e.x < gameSize - 1) + .map(e => gameObject(e.x + 1, e.y))), shoots: filterOutCollisions(state.shoots, state.invaders) .filter(e => e.x > 0) .map(e => gameObject(e.x - 1, e.y)), diff --git a/recipes/stop-watch.md b/recipes/stop-watch.md index 941ad59e..1e278e51 100644 --- a/recipes/stop-watch.md +++ b/recipes/stop-watch.md @@ -2,7 +2,9 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by [@Michael_Hladky](https://twitter.com/michael_hladky) +This recipe demonstrates RxJS implementation of Stop Watch, inspired by +[RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) +talk by [@Michael_Hladky](https://twitter.com/michael_hladky)
@@ -10,6 +12,8 @@ This recipe demonstrates RxJs implementation of Stop Watch, inspired by [RxJS Ad ( [StackBlitz](https://stackblitz.com/edit/rxjs-stop-watch?file=index.ts) ) +![Stop Watch](https://drive.google.com/uc?export=view&id=14kiNGgR8laJq4a2gEvInNyTPXLVbWH5l) + #### index.ts ```js diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md index 496fa670..cb853adf 100644 --- a/recipes/swipe-to-refresh.md +++ b/recipes/swipe-to-refresh.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of swipe to refresh functionality. +This recipe demonstrates RxJS implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks.
@@ -13,6 +13,8 @@ Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. [StackBlitz](https://stackblitz.com/edit/rxjs-refresh?file=index.ts&devtoolsheight=40) ) +![Swipe to Refresh](https://drive.google.com/uc?export=view&id=1BLA2TcAhjwtodkcnsJ8e91ckrvurqkEv) + #### index.ts ```js diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md index e004a71c..be966d84 100644 --- a/recipes/tank-battle-game.md +++ b/recipes/tank-battle-game.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Tank Battle like game. +This recipe demonstrates RxJS implementation of Tank Battle like game.
@@ -10,6 +10,8 @@ This recipe demonstrates RxJs implementation of Tank Battle like game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-tank-battle?file=index.ts) ) +![Tank Battle](https://drive.google.com/uc?export=view&id=1-QeeMZCtd9rp60m9C9yphMW5vs0jQxYW) + #### index.ts ```js diff --git a/recipes/tetris-game.md b/recipes/tetris-game.md index b2e98a32..652ae4ae 100644 --- a/recipes/tetris-game.md +++ b/recipes/tetris-game.md @@ -2,7 +2,7 @@ _By [adamlubek](https://github.com/adamlubek)_ -This recipe demonstrates RxJs implementation of Tetris game. +This recipe demonstrates RxJS implementation of Tetris game.
@@ -10,6 +10,8 @@ This recipe demonstrates RxJs implementation of Tetris game. ( [StackBlitz](https://stackblitz.com/edit/rxjs-tetris?file=index.ts) ) +![Tetris Game](https://drive.google.com/uc?export=view&id=1BjyB43WSHEU9rDbNN6uFeoYxIoEzJTZp) + #### index.ts ```js diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index 18798852..1a2a4086 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -12,6 +12,8 @@ This recipe demonstrates the creation of type ahead client side code. [StackBlitz](https://stackblitz.com/edit/rxjs-type-ahead?file=index.ts&devtoolsheight=50) ) +![Typeahead](https://drive.google.com/uc?export=view&id=1TdDA78dkiy5lC8A3Rz28oDq9SuaxsS45) + ```js // RxJS v6+ import { fromEvent, of } from 'rxjs'; From 3c70eb6ab9b0a226c31853e6ff26c24e10ad78f0 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 16 Sep 2019 10:29:24 -0400 Subject: [PATCH 167/256] fix(markdown): add html tag to markdown block --- recipes/lockscreen.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index 2d119e99..9417983c 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -159,7 +159,7 @@ export const resetPasswordPad = () => { ##### html -``` +```html + + + + + + + RxJs + + +
Use arrows to uncover image!!!
+``` + +### Operators Used + +- [finalize](../operators/utility/finalize.md) +- [fromEvent](../operators/creation/fromevent.md) +- [interval](../operators/creation/interval.md) +- [pluck](../operators/transformation/pluck.md) +- [scan](../operators/transformation/scan.md) +- [startWith](../operators/combination/startwith.md) +- [takeWhile](../operators/filtering/takewhile.md) +- [tap](../operators/utility/do.md) +- [withLatestFrom](../operators/combination/withlatestfrom.md) From 37bc5f8e8a178b06ddc4cdffd2ac8eb827ca92f6 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 20 Dec 2019 08:25:39 -0500 Subject: [PATCH 186/256] chore(banner): update banner refs --- README.md | 4 ++-- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/generate.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinct.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- operators/filtering/distinctuntilkeychanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/mergescan.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/repeatwhen.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/timeoutwith.md | 2 +- operators/utility/topromise.md | 2 +- recipes/alphabet-invasion-game.md | 2 +- recipes/battleship-game.md | 2 +- recipes/breakout-game.md | 2 +- recipes/car-racing-game.md | 2 +- recipes/catch-the-dot-game.md | 2 +- recipes/click-ninja-game.md | 2 +- recipes/flappy-bird-game.md | 2 +- recipes/gameloop.md | 2 +- recipes/horizontal-scroll-indicator.md | 2 +- recipes/http-polling.md | 2 +- recipes/lockscreen.md | 2 +- recipes/matrix-digital-rain.md | 2 +- recipes/memory-game.md | 2 +- recipes/mine-sweeper-game.md | 2 +- recipes/platform-jumper-game.md | 2 +- recipes/progressbar.md | 2 +- recipes/save-indicator.md | 2 +- recipes/smartcounter.md | 2 +- recipes/space-invaders-game.md | 2 +- recipes/stop-watch.md | 2 +- recipes/swipe-to-refresh.md | 2 +- recipes/tank-battle-game.md | 2 +- recipes/tetris-game.md | 2 +- recipes/type-ahead.md | 2 +- recipes/uncover-image-game.md | 2 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 121 files changed, 122 insertions(+), 122 deletions(-) diff --git a/README.md b/README.md index ff075500..aeaf47d0 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -
+
### Brand New to RxJS? @@ -133,7 +133,7 @@ site, these excellent resources will help jump start your learning experience! #### Videos -- [RxJS Basics](https://ultimatecourses.com/courses/rxjs) :dollar: - Brian +- [RxJS Basics](https://ultimatecourses.com/courses/rxjs?ref=4) :dollar: - Brian Troncone - [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop) - Jafar Husain diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index ce3bab16..b9a5e0b6 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -
+
### Examples diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 97154d41..5dd6b091 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -31,7 +31,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -
+
### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 6fdce917..d26040c2 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -14,7 +14,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index cd6a539b..57da1cb7 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,7 +15,7 @@ a single operator instead! --- -
+
### Examples diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 9925129d..cf0d9088 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -14,7 +14,7 @@ value, check out [`finalize`](../utility/finalize.md)! --- -
+
### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 33578d8f..0544be31 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -35,7 +35,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may be better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -
+
### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 109f7582..667e033f 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -
+
### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 9bc79d69..6e312b8e 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,7 +11,7 @@ single operator instead! --- -
+
### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 71a3f668..f9ed714b 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,7 +4,7 @@ ## Emit the previous and current values as an array. -
+
### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index 42d92586..34a5c7de 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,7 +4,7 @@ ## The observable to emit first is used. -
+
### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index abc5ffb4..b058ec64 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,7 +12,7 @@ can also start with an initial value! --- -
+
### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index 956b427b..c9de43dc 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,7 +11,7 @@ emits, try [combinelatest](combinelatest.md)! --- -
+
### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 58311685..0ba6334e 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,7 +12,7 @@ source! --- -
+
### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 2b4c2272..9768cdd2 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -
+
### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 0cd7a444..fcb7a14c 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -
+
### Examples diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index f2eb6d07..ec77fd18 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Subscribe to first or second observable based on a condition -
+
### Examples diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index dfc0a999..9a3321ea 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares emitted sequence to expected sequence for match -
+
### Examples diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index cfd257ed..e2a37381 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -4,7 +4,7 @@ ## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. -
+
### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index e56cb3c6..8fb27951 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+
### Examples diff --git a/operators/creation/defer.md b/operators/creation/defer.md index 9c5972dd..13f145fc 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -12,7 +12,7 @@ is used as part of the [`iif`](../conditional/iif.md) operator! --- -
+
### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index 9ecb6c8b..a740dc12 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -
+
### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index 08f6d621..0cd832e2 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -16,7 +16,7 @@ characters! --- -
+
### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index e2b6919f..bdda1bef 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -
+
### Examples diff --git a/operators/creation/generate.md b/operators/creation/generate.md index 9d3520a1..8aed36db 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -4,7 +4,7 @@ ## Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages. -
+
### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 9eb0e49b..ce363909 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -
+
### Examples diff --git a/operators/creation/range.md b/operators/creation/range.md index 69ff3a59..ef097f21 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -
+
### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index d182ddf4..48cae984 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -
+
### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index 22427625..4dd12178 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -
+
### Examples diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 3eca30e1..2154d7c5 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index efc45a45..4d351ec7 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -15,7 +15,7 @@ --- -
+
### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index ef7b660e..0e52d7a8 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -
+
### Examples diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 464b5abc..327c394e 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 02a997d3..a537d665 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -11,7 +11,7 @@ of user input must be controlled! --- -
+
### Examples diff --git a/operators/filtering/distinct.md b/operators/filtering/distinct.md index 102df22d..0591b1df 100644 --- a/operators/filtering/distinct.md +++ b/operators/filtering/distinct.md @@ -4,7 +4,7 @@ ## Emits items emitted that are distinct based on any previously emitted item. -
+
### Examples diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 9c5c68ea..5615c12e 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -14,7 +14,7 @@ must match! --- -
+
### Examples diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index eded6c0f..77b153db 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -4,7 +4,7 @@ ## Only emit when the specified key value has changed -
+
### Examples diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 326d2763..d149db65 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -11,7 +11,7 @@ out [takeWhile](takewhile.md)! --- -
+
### Examples diff --git a/operators/filtering/find.md b/operators/filtering/find.md index af53b5d0..2da876fb 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 8fb343e4..b434eaf5 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -12,7 +12,7 @@ --- -
+
### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 9aa6505e..e2aa62bf 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -
+
### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index b2a4a00a..753cdf27 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index bfebba25..5d00118c 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -
+
### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 7c80d2a8..68013b24 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -
+
### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index c5003e99..3d92aed7 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -
+
### Examples diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 0ce3b429..9771fac4 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided observable emits. -
+
### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index ce456f89..dec94e3f 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -
+
### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 0480f84a..c338054e 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -26,7 +26,7 @@ emissions. --- -
+
### Examples diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index be510411..3196468c 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -11,7 +11,7 @@ completion of multiple observables, try [forkJoin](../combination/forkjoin.md)! --- -
+
### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index dad7eadd..ec870e3c 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 917b737e..21eae25c 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -11,7 +11,7 @@ emit the first item that didn't pass the predicate. --- -
+
### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 3c8ea05e..96187df0 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -
+
### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index f7bd92fd..c52f9fde 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit first value then ignore for specified duration -
+
### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 0674f4e6..01b7b542 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -
+
### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 641452b0..796ba670 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -
+
### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 9ef4c5ea..35f89523 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index f7eca955..ec60d253 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -
+
### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 5a88670b..b1738c73 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,7 +4,7 @@ ## Collect output values until provided observable emits, emit as array. -
+
### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 085cbad7..601e7c49 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,7 +4,7 @@ ## Collect emitted values until provided number is fulfilled, emit as array. -
+
### Examples diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 927b58ed..accb45aa 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -
+
### Examples diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index df659934..5442693f 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -
+
### Examples diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index fbc959ea..b88f16e9 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,7 +4,7 @@ ## Map values to inner observable, subscribe and emit in order. -
+
### Examples diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index ec7be51c..46a39572 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -
+
### Examples diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index be683406..e1ef6539 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,7 +4,7 @@ ## Map to inner observable, ignore other values until that observable completes. -
+
### Examples diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index e680db20..110960c6 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -
+
### Examples diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index 711f137c..c55b9b2c 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -
+
### Examples diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 129b6c1a..27398d88 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -4,7 +4,7 @@ ## Apply projection with each value from source. -
+
### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 4211debf..4759737c 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -4,7 +4,7 @@ ## Map emissions to constant value. -
+
### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 8ae60980..2ee110ed 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 5](#example-5-mergemap-with-concurrent-value). -
+
### Examples diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index af4a4de5..a1aeb70a 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -4,7 +4,7 @@ ## Accumulate value over time via merged observables. -
+
### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index c3567cc7..c650123a 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -
+
### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 554acbbb..617cd1f9 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -4,7 +4,7 @@ ## Select properties to emit. -
+
### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index dedbd320..3d909e8a 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ :bulb: If you need the current accumulated value on each emission, try [scan](scan.md)! -
+
### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 92fdcf9d..7fe9fc84 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -11,7 +11,7 @@ scan! --- -
+
### Examples diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 4249d4bd..e2d3b5a1 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -
+
### Examples diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index f9cd9d0a..197e64b6 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 5cfab314..89313ce2 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -
+
### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index 3e6adde5..9e248663 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -
+
### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 5de0b686..62fcd595 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -
+
### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 17e9095c..b916c6db 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -
+
### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 5043dd93..532f8263 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -
+
### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 4e92f802..96ac552b 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -
+
### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index eee834d7..861c7fd6 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -
+
### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index caa1405a..272107be 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,7 @@ ## Turn notification objects into notification values. -
+
### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index 47fd3b51..18718bcd 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index 08ca74ee..110fd047 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 7e114a0f..821c75a9 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -10,7 +10,7 @@ --- -
+
### Examples diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index 7c203255..ebb4db74 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -11,7 +11,7 @@ --- -
+
### Examples diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 205793c8..33ffc5a8 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -4,7 +4,7 @@ ## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions -
+
### Examples diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index a129ac31..80fb1f8c 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -
+
### Examples diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index 138d9120..9cdbb7c4 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -4,7 +4,7 @@ ## Subscribe to second Observable if no emission occurs in given time span. -
+
### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 38598dc5..a3e6fece 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -11,7 +11,7 @@ observable. --- -
+
### Examples diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index db2f4e10..4949e0b4 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Alphabet Invasion Game. -
+
### Example Code diff --git a/recipes/battleship-game.md b/recipes/battleship-game.md index b572b0e4..994a4ee4 100644 --- a/recipes/battleship-game.md +++ b/recipes/battleship-game.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Battleship Game where you play against the computer. -
+
### Example Code diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md index 40ae63db..52457e12 100644 --- a/recipes/breakout-game.md +++ b/recipes/breakout-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Breakout game. -
+
### Example Code diff --git a/recipes/car-racing-game.md b/recipes/car-racing-game.md index a39b11d9..5663f8c5 100644 --- a/recipes/car-racing-game.md +++ b/recipes/car-racing-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Car Racing game. -
+
### Example Code diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index d31f08b7..276f1cc0 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of scan operator for state management in simple game -
+
### Example Code diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md index 30830020..c462a209 100644 --- a/recipes/click-ninja-game.md +++ b/recipes/click-ninja-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of time interval operator in a simple game -
+
### Example Code diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md index dd423c3e..57eadf57 100644 --- a/recipes/flappy-bird-game.md +++ b/recipes/flappy-bird-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Flappy Bird like game. -
+
### Example Code diff --git a/recipes/gameloop.md b/recipes/gameloop.md index c6ba8cde..78a7bf86 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -
+
### Example Code diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md index 69adade4..102db697 100644 --- a/recipes/horizontal-scroll-indicator.md +++ b/recipes/horizontal-scroll-indicator.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of a horizontal scroll indicator. -
+
### Example Code diff --git a/recipes/http-polling.md b/recipes/http-polling.md index b81c07c4..2046669f 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,6 +1,6 @@ # HTTP Polling -
+
### Examples diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index 50d59af8..7ebf5249 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of lockscreen functionality (known for example from smartphones). -
+
### Example Code diff --git a/recipes/matrix-digital-rain.md b/recipes/matrix-digital-rain.md index ab4b042e..70255168 100644 --- a/recipes/matrix-digital-rain.md +++ b/recipes/matrix-digital-rain.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Matrix Digital Rain. -
+
### Example Code diff --git a/recipes/memory-game.md b/recipes/memory-game.md index f441fc83..00d827f3 100644 --- a/recipes/memory-game.md +++ b/recipes/memory-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS game to train your memory. -
+
### Example Code diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md index 95d4c166..ed9808eb 100644 --- a/recipes/mine-sweeper-game.md +++ b/recipes/mine-sweeper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Mine Sweeper Game. -
+
### Example Code diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md index 9cc94c7e..2d04ac96 100644 --- a/recipes/platform-jumper-game.md +++ b/recipes/platform-jumper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Platform Jumper game. -
+
### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index f16bcde2..39cb8d49 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -
+
### Example Code diff --git a/recipes/save-indicator.md b/recipes/save-indicator.md index 073f7f6b..516822e9 100644 --- a/recipes/save-indicator.md +++ b/recipes/save-indicator.md @@ -3,7 +3,7 @@ This recipe demonstrates the creation of a google docs-esque save indicator with RxJS. -
+
### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 1d9ae6b1..6b5b8cdf 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -
+
#### Vanilla JS diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index 6221357e..c1fb5b9f 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Space Invaders Game. -
+
### Example Code diff --git a/recipes/stop-watch.md b/recipes/stop-watch.md index e656adaa..2f951759 100644 --- a/recipes/stop-watch.md +++ b/recipes/stop-watch.md @@ -6,7 +6,7 @@ This recipe demonstrates RxJS implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by [@Michael_Hladky](https://twitter.com/michael_hladky) -
+
### Example Code diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md index 7a95f79e..f255c79c 100644 --- a/recipes/swipe-to-refresh.md +++ b/recipes/swipe-to-refresh.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. -
+
### Example Code diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md index 7b62761e..a33475be 100644 --- a/recipes/tank-battle-game.md +++ b/recipes/tank-battle-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tank Battle like game. -
+
### Example Code diff --git a/recipes/tetris-game.md b/recipes/tetris-game.md index 5c9e5b03..a28fb7ec 100644 --- a/recipes/tetris-game.md +++ b/recipes/tetris-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tetris game. -
+
### Example Code diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index 42b855f2..90564f5d 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of type ahead client side code. -
+
### Example Code diff --git a/recipes/uncover-image-game.md b/recipes/uncover-image-game.md index d1af6152..a3da9860 100644 --- a/recipes/uncover-image-game.md +++ b/recipes/uncover-image-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Uncover Image Game. -
+
### Example Code diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index 083fc972..dfb1a112 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -2,7 +2,7 @@ ## Emits its last value on completion -
+
### Examples diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 24e47e0c..16f7a97f 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -8,7 +8,7 @@ --- -
+
### Examples diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 1de669cd..732a4f87 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -2,7 +2,7 @@ ## "Replays" or emits old values to new subscribers -
+
### Examples diff --git a/subjects/subject.md b/subjects/subject.md index e9d747af..d3d61ff7 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -2,7 +2,7 @@ ## A special type of Observable which shares a single execution path among observers -
+
### Examples From 8c9661a5ef018c109eae0814410977d79cebac1b Mon Sep 17 00:00:00 2001 From: Kevin Kulp Date: Mon, 13 Jan 2020 19:17:23 -0500 Subject: [PATCH 187/256] fix(combineLatest): correct comment (#250) --- operators/combination/combinelatest.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 5dd6b091..6855d791 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -57,9 +57,9 @@ combineLatest(timerOne$, timerTwo$, timerThree$).subscribe( ([timerValOne, timerValTwo, timerValThree]) => { /* Example: - timerOne first tick: 'Timer One Latest: 1, Timer Two Latest:0, Timer Three Latest: 0 - timerTwo first tick: 'Timer One Latest: 1, Timer Two Latest:1, Timer Three Latest: 0 - timerThree first tick: 'Timer One Latest: 1, Timer Two Latest:1, Timer Three Latest: 1 + timerThree first tick: 'Timer One Latest: 0, Timer Two Latest: 0, Timer Three Latest: 0 + timerOne second tick: 'Timer One Latest: 1, Timer Two Latest: 0, Timer Three Latest: 0 + timerTwo second tick: 'Timer One Latest: 1, Timer Two Latest: 1, Timer Three Latest: 0 */ console.log( `Timer One Latest: ${timerValOne}, From 319bc219e52914cf02501221f7db9c5800732239 Mon Sep 17 00:00:00 2001 From: Ahmed ElShahat Date: Fri, 17 Jan 2020 22:32:25 +0200 Subject: [PATCH 188/256] style(subjects): update logging to make example more clear (#251) I have proposed this change to make it more clear for new RxJS learners. If accepted, please update Stackblitz with the same. The console log will show the process more clear than before. --- subjects/subject.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/subjects/subject.md b/subjects/subject.md index d3d61ff7..d44dd631 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -19,10 +19,14 @@ import { Subject } from 'rxjs'; const sub = new Subject(); sub.next(1); -sub.subscribe(console.log); -sub.next(2); // OUTPUT => 2 -sub.subscribe(console.log); -sub.next(3); // OUTPUT => 3,3 (logged from both subscribers) +sub.subscribe(x => { + console.log('Subscriber A', x) +}); +sub.next(2); // OUTPUT => Subscriber A 2 +sub.subscribe(x => { + console.log('Subscriber B', x) +}); +sub.next(3); // OUTPUT => Subscriber A 3, Subscriber B 3 (logged from both subscribers) ``` ### Related Recipes From eaa6d8030911638e3ad85be64eebc50db57f441a Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 17 Jan 2020 15:38:01 -0500 Subject: [PATCH 189/256] style(subjects): fix stackblitz url --- subjects/subject.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/subjects/subject.md b/subjects/subject.md index d44dd631..da368c5f 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -9,7 +9,7 @@ ##### Example 1: simple Subject ( -[Stackblitz](https://stackblitz.com/edit/rxjs-subject-simple-example?file=index.ts&devtoolsheight=100) +[Stackblitz](https://stackblitz.com/edit/rxjs-subject-simple-example-j33czp?file=index.ts&devtoolsheight=100) ) ```js From 15edaa3104f4b95c44971546be073a2a874e381d Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 16:52:03 -0500 Subject: [PATCH 190/256] chore(banner): update banners --- README.md | 2 +- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/generate.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinct.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- operators/filtering/distinctuntilkeychanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/mergescan.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/repeatwhen.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/timeoutwith.md | 2 +- operators/utility/topromise.md | 2 +- recipes/alphabet-invasion-game.md | 2 +- recipes/battleship-game.md | 2 +- recipes/breakout-game.md | 2 +- recipes/car-racing-game.md | 2 +- recipes/catch-the-dot-game.md | 2 +- recipes/click-ninja-game.md | 2 +- recipes/flappy-bird-game.md | 2 +- recipes/gameloop.md | 2 +- recipes/horizontal-scroll-indicator.md | 2 +- recipes/http-polling.md | 2 +- recipes/lockscreen.md | 2 +- recipes/matrix-digital-rain.md | 2 +- recipes/memory-game.md | 2 +- recipes/mine-sweeper-game.md | 2 +- recipes/platform-jumper-game.md | 2 +- recipes/progressbar.md | 2 +- recipes/save-indicator.md | 2 +- recipes/smartcounter.md | 2 +- recipes/space-invaders-game.md | 2 +- recipes/stop-watch.md | 2 +- recipes/swipe-to-refresh.md | 2 +- recipes/tank-battle-game.md | 2 +- recipes/tetris-game.md | 2 +- recipes/type-ahead.md | 2 +- recipes/uncover-image-game.md | 2 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 121 files changed, 121 insertions(+), 121 deletions(-) diff --git a/README.md b/README.md index aeaf47d0..253f7911 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Brand New to RxJS? diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index b9a5e0b6..4785cf46 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 6855d791..28060573 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -31,7 +31,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index d26040c2..f897766e 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -14,7 +14,7 @@ instead! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 57da1cb7..9638741c 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,7 +15,7 @@ a single operator instead! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index cf0d9088..a4800fc1 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -14,7 +14,7 @@ value, check out [`finalize`](../utility/finalize.md)! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 0544be31..9a638c14 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -35,7 +35,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may be better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 667e033f..84d26f59 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 6e312b8e..8476a838 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,7 +11,7 @@ single operator instead! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index f9ed714b..867cef35 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,7 +4,7 @@ ## Emit the previous and current values as an array. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index 34a5c7de..bb6c8a87 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,7 +4,7 @@ ## The observable to emit first is used. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index b058ec64..6d410670 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,7 +12,7 @@ can also start with an initial value! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index c9de43dc..19e4c0d9 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,7 +11,7 @@ emits, try [combinelatest](combinelatest.md)! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 0ba6334e..96b749b1 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,7 +12,7 @@ source! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 9768cdd2..951347d5 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index fcb7a14c..ecdb6f7e 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index ec77fd18..70f33e5d 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Subscribe to first or second observable based on a condition -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 9a3321ea..18000d54 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares emitted sequence to expected sequence for match -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index e2a37381..a187ff6c 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -4,7 +4,7 @@ ## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index 8fb27951..df1b3dc8 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/defer.md b/operators/creation/defer.md index 13f145fc..75c28cc5 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -12,7 +12,7 @@ is used as part of the [`iif`](../conditional/iif.md) operator! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index a740dc12..d162099c 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index 0cd832e2..d90582bf 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -16,7 +16,7 @@ characters! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index bdda1bef..c949ae19 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/generate.md b/operators/creation/generate.md index 8aed36db..139fc7e2 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -4,7 +4,7 @@ ## Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index ce363909..ffaf77e6 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/range.md b/operators/creation/range.md index ef097f21..d34c3dad 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 48cae984..37088799 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index 4dd12178..f88b5d94 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 2154d7c5..f6aaa15f 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 4d351ec7..d2aa2499 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -15,7 +15,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 0e52d7a8..705c2a9e 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 327c394e..b4b10063 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -11,7 +11,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index a537d665..bf6a62fe 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -11,7 +11,7 @@ of user input must be controlled! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/distinct.md b/operators/filtering/distinct.md index 0591b1df..dacc5679 100644 --- a/operators/filtering/distinct.md +++ b/operators/filtering/distinct.md @@ -4,7 +4,7 @@ ## Emits items emitted that are distinct based on any previously emitted item. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 5615c12e..cf666e31 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -14,7 +14,7 @@ must match! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index 77b153db..0395a666 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -4,7 +4,7 @@ ## Only emit when the specified key value has changed -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index d149db65..b322249f 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -11,7 +11,7 @@ out [takeWhile](takewhile.md)! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/find.md b/operators/filtering/find.md index 2da876fb..c740ab1f 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -11,7 +11,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index b434eaf5..0cd83971 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -12,7 +12,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index e2aa62bf..2fba8ad0 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index 753cdf27..c9cb0fdc 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 5d00118c..d257803a 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 68013b24..26f0e1eb 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index 3d92aed7..d6e0aad1 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 9771fac4..7e0a972b 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided observable emits. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index dec94e3f..5bdb8b91 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index c338054e..7c89f179 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -26,7 +26,7 @@ emissions. --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index 3196468c..bc63baec 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -11,7 +11,7 @@ completion of multiple observables, try [forkJoin](../combination/forkjoin.md)! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index ec870e3c..18b76bfe 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,7 +10,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 21eae25c..4a7c20e6 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -11,7 +11,7 @@ emit the first item that didn't pass the predicate. --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 96187df0..4aa90814 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index c52f9fde..798e0c8b 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit first value then ignore for specified duration -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 01b7b542..084d53a9 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 796ba670..919f22b7 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 35f89523..1a205750 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index ec60d253..13e08f9f 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index b1738c73..94bf7508 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,7 +4,7 @@ ## Collect output values until provided observable emits, emit as array. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 601e7c49..d9112a9c 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,7 +4,7 @@ ## Collect emitted values until provided number is fulfilled, emit as array. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index accb45aa..90be8193 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 5442693f..15230a19 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index b88f16e9..4590f359 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,7 +4,7 @@ ## Map values to inner observable, subscribe and emit in order. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 46a39572..7e348412 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index e1ef6539..4a139f8c 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,7 +4,7 @@ ## Map to inner observable, ignore other values until that observable completes. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 110960c6..0625f452 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index c55b9b2c..acfc5199 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 27398d88..f7df0910 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -4,7 +4,7 @@ ## Apply projection with each value from source. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 4759737c..1656e4b5 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -4,7 +4,7 @@ ## Map emissions to constant value. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 2ee110ed..80082f19 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 5](#example-5-mergemap-with-concurrent-value). -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index a1aeb70a..a424aa59 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -4,7 +4,7 @@ ## Accumulate value over time via merged observables. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index c650123a..68013cdf 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 617cd1f9..35486d96 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -4,7 +4,7 @@ ## Select properties to emit. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 3d909e8a..1f770948 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ :bulb: If you need the current accumulated value on each emission, try [scan](scan.md)! -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 7fe9fc84..85a13f63 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -11,7 +11,7 @@ scan! --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index e2d3b5a1..3954a02a 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index 197e64b6..664e7aa6 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -11,7 +11,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 89313ce2..ea3bbe52 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index 9e248663..ef37abeb 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 62fcd595..5da04caa 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index b916c6db..e6a1b715 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 532f8263..c942f61f 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 96ac552b..dd0c1882 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 861c7fd6..d508a025 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index 272107be..04ca0337 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,7 @@ ## Turn notification objects into notification values. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index 18718bcd..42a2e097 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -10,7 +10,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index 110fd047..15850cbd 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 821c75a9..ce3a5caf 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -10,7 +10,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index ebb4db74..aac28a29 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -11,7 +11,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 33ffc5a8..1af58d19 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -4,7 +4,7 @@ ## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 80fb1f8c..071e6079 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index 9cdbb7c4..6aedb892 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -4,7 +4,7 @@ ## Subscribe to second Observable if no emission occurs in given time span. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index a3e6fece..7ec9dafb 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -11,7 +11,7 @@ observable. --- -
+
[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4)
### Examples diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index 4949e0b4..02cf3a84 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Alphabet Invasion Game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/battleship-game.md b/recipes/battleship-game.md index 994a4ee4..b97d7106 100644 --- a/recipes/battleship-game.md +++ b/recipes/battleship-game.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Battleship Game where you play against the computer. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md index 52457e12..430f8fcf 100644 --- a/recipes/breakout-game.md +++ b/recipes/breakout-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Breakout game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/car-racing-game.md b/recipes/car-racing-game.md index 5663f8c5..b2fb3fef 100644 --- a/recipes/car-racing-game.md +++ b/recipes/car-racing-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Car Racing game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index 276f1cc0..d1346f8a 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of scan operator for state management in simple game -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md index c462a209..40866c9e 100644 --- a/recipes/click-ninja-game.md +++ b/recipes/click-ninja-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of time interval operator in a simple game -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md index 57eadf57..6ba44be8 100644 --- a/recipes/flappy-bird-game.md +++ b/recipes/flappy-bird-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Flappy Bird like game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/gameloop.md b/recipes/gameloop.md index 78a7bf86..fb2ce4c7 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md index 102db697..4262ff94 100644 --- a/recipes/horizontal-scroll-indicator.md +++ b/recipes/horizontal-scroll-indicator.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of a horizontal scroll indicator. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/http-polling.md b/recipes/http-polling.md index 2046669f..9fa3156c 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,6 +1,6 @@ # HTTP Polling -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index 7ebf5249..fb110caa 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of lockscreen functionality (known for example from smartphones). -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/matrix-digital-rain.md b/recipes/matrix-digital-rain.md index 70255168..6a954149 100644 --- a/recipes/matrix-digital-rain.md +++ b/recipes/matrix-digital-rain.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Matrix Digital Rain. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/memory-game.md b/recipes/memory-game.md index 00d827f3..a0644ae4 100644 --- a/recipes/memory-game.md +++ b/recipes/memory-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS game to train your memory. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md index ed9808eb..4b40aebd 100644 --- a/recipes/mine-sweeper-game.md +++ b/recipes/mine-sweeper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Mine Sweeper Game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md index 2d04ac96..e2a8c821 100644 --- a/recipes/platform-jumper-game.md +++ b/recipes/platform-jumper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Platform Jumper game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index 39cb8d49..954dc9c7 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/save-indicator.md b/recipes/save-indicator.md index 516822e9..66697511 100644 --- a/recipes/save-indicator.md +++ b/recipes/save-indicator.md @@ -3,7 +3,7 @@ This recipe demonstrates the creation of a google docs-esque save indicator with RxJS. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 6b5b8cdf..278c9c55 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) #### Vanilla JS diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index c1fb5b9f..6145f421 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Space Invaders Game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/stop-watch.md b/recipes/stop-watch.md index 2f951759..806eb856 100644 --- a/recipes/stop-watch.md +++ b/recipes/stop-watch.md @@ -6,7 +6,7 @@ This recipe demonstrates RxJS implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by [@Michael_Hladky](https://twitter.com/michael_hladky) -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md index f255c79c..181cd56c 100644 --- a/recipes/swipe-to-refresh.md +++ b/recipes/swipe-to-refresh.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md index a33475be..f9295761 100644 --- a/recipes/tank-battle-game.md +++ b/recipes/tank-battle-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tank Battle like game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/tetris-game.md b/recipes/tetris-game.md index a28fb7ec..f38dbc51 100644 --- a/recipes/tetris-game.md +++ b/recipes/tetris-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tetris game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index 90564f5d..d3f7f384 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of type ahead client side code. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/uncover-image-game.md b/recipes/uncover-image-game.md index a3da9860..bc5d77a3 100644 --- a/recipes/uncover-image-game.md +++ b/recipes/uncover-image-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Uncover Image Game. -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index dfb1a112..2b8d980a 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -2,7 +2,7 @@ ## Emits its last value on completion -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 16f7a97f..48dbcb12 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -8,7 +8,7 @@ --- -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 732a4f87..c74b95d5 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -2,7 +2,7 @@ ## "Replays" or emits old values to new subscribers -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/subject.md b/subjects/subject.md index da368c5f..dd8e5de2 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -2,7 +2,7 @@ ## A special type of Observable which shares a single execution path among observers -
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 7bfdd6b8af920e763eae4bfeb0ca0316edbb9374 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 22:05:16 +0000 Subject: [PATCH 191/256] GitBook: [master] 2 pages modified --- README.md | 203 ++++++++++++++++++------------------- SUMMARY.md | 291 +++++++++++++++++++++++++++-------------------------- 2 files changed, 246 insertions(+), 248 deletions(-) diff --git a/README.md b/README.md index 253f7911..3749ea98 100644 --- a/README.md +++ b/README.md @@ -1,178 +1,173 @@ -# Learn RxJS +# Introduction Clear examples, explanations, and resources for RxJS. -_By [@btroncone](https://twitter.com/BTroncone)_ +_By_ [_@btroncone_](https://twitter.com/BTroncone) ## Introduction -[RxJS](https://github.com/ReactiveX/rxjs) is one of the hottest libraries in web -development today. Offering a powerful, functional approach for dealing with -events and with integration points into a growing number of frameworks, -libraries, and utilities, the case for learning Rx has never been more -appealing. Couple this with the ability to utilize your knowledge across -[nearly any language](http://reactivex.io/languages.html), having a solid grasp -on reactive programming and what it can offer seems like a no-brainer. +[RxJS](https://github.com/ReactiveX/rxjs) is one of the hottest libraries in web development today. Offering a powerful, functional approach for dealing with events and with integration points into a growing number of frameworks, libraries, and utilities, the case for learning Rx has never been more appealing. Couple this with the ability to utilize your knowledge across [nearly any language](http://reactivex.io/languages.html), having a solid grasp on reactive programming and what it can offer seems like a no-brainer. **But...** -Learning RxJS and reactive programming is -[hard](https://twitter.com/hoss/status/742643506536153088). There's the -multitude of concepts, large API surface, and fundamental shift in mindset from -an -[imperative to declarative style](https://tylermcginnis.com/imperative-vs-declarative-programming/). -This site focuses on making these concepts approachable, the examples clear and -easy to explore, and features references throughout to the best RxJS related -material on the web. The goal is to supplement the -[official docs](http://reactivex.io/rxjs/) and pre-existing learning material -while offering a new, fresh perspective to clear any hurdles and tackle the pain -points. Learning Rx may be difficult but it is certainly worth the effort! +Learning RxJS and reactive programming is [hard](https://twitter.com/hoss/status/742643506536153088). There's the multitude of concepts, large API surface, and fundamental shift in mindset from an [imperative to declarative style](https://tylermcginnis.com/imperative-vs-declarative-programming/). This site focuses on making these concepts approachable, the examples clear and easy to explore, and features references throughout to the best RxJS related material on the web. The goal is to supplement the [official docs](http://reactivex.io/rxjs/) and pre-existing learning material while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX)](https://ultimatecourses.com/courses/rxjs?ref=4) ### Brand New to RxJS? -Start getting familiar with all the key concepts needed to be productive with -our [RxJS Primer](./concepts/rxjs-primer.md)! +Start getting familiar with all the key concepts needed to be productive with our [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md)! ## Content #### Operators -Operators are the horse-power behind observables, providing an elegant, -declarative solution to complex asynchronous tasks. This section contains all -[RxJS operators](/operators/README.md), included with clear, executable -examples. Links to additional resources and recipes for each operator are also -provided, when applicable. +Operators are the horse-power behind observables, providing an elegant, declarative solution to complex asynchronous tasks. This section contains all [RxJS operators](learn-rxjs/operators/), included with clear, executable examples. Links to additional resources and recipes for each operator are also provided, when applicable. -##### Operator Categories +**Operator Categories** -- [Combination](/operators/combination/README.md) -- [Conditional](/operators/conditional/README.md) -- [Creation](/operators/creation/README.md) -- [Error Handling](/operators/error_handling/README.md) -- [Multicasting](/operators/multicasting/README.md) -- [Filtering](/operators/filtering/README.md) -- [Transformation](/operators/transformation/README.md) -- [Utility](/operators/utility/README.md) +* [Combination](learn-rxjs/operators/combination/) +* [Conditional](learn-rxjs/operators/conditional/) +* [Creation](learn-rxjs/operators/creation/) +* [Error Handling](learn-rxjs/operators/error_handling/) +* [Multicasting](learn-rxjs/operators/multicasting/) +* [Filtering](learn-rxjs/operators/filtering/) +* [Transformation](learn-rxjs/operators/transformation/) +* [Utility](learn-rxjs/operators/utility/) **OR...** -[Complete listing in alphabetical order](/operators/complete.md) +[Complete listing in alphabetical order](learn-rxjs/operators/complete.md) #### Understanding Subjects -A Subject is a special type of Observable which shares a single execution path -among observers. +A Subject is a special type of Observable which shares a single execution path among observers. -- [Overview](/subjects/README.md) -- [AsyncSubject](/subjects/asyncsubject.md) -- [BehaviorSubject](/subjects/behaviorsubject.md) -- [ReplaySubject](/subjects/replaysubject.md) -- [Subject](/subjects/subject.md) +* [Overview](learn-rxjs/subjects/) +* [AsyncSubject](learn-rxjs/subjects/asyncsubject.md) +* [BehaviorSubject](learn-rxjs/subjects/behaviorsubject.md) +* [ReplaySubject](learn-rxjs/subjects/replaysubject.md) +* [Subject](learn-rxjs/subjects/subject.md) #### Concepts -Without a solid base knowledge of how Observables work behind the scenes, it's -easy for much of RxJS to feel like 'magic'. This section helps solidify the -major concepts needed to feel comfortable with reactive programming and -Observables. +Without a solid base knowledge of how Observables work behind the scenes, it's easy for much of RxJS to feel like 'magic'. This section helps solidify the major concepts needed to feel comfortable with reactive programming and Observables. -- [RxJS Primer](/concepts/rxjs-primer.md) -- [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) -- [Time based operators comparison](/concepts/time-based-operators-comparison.md) -- [Understanding Operator Imports](/concepts/operator-imports.md) +* [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md) +* [RxJS v5 -> v6 Upgrade](learn-rxjs/concepts/rxjs5-6.md) +* [Time based operators comparison](learn-rxjs/concepts/time-based-operators-comparison.md) +* [Understanding Operator Imports](learn-rxjs/concepts/operator-imports.md) #### Recipes Recipes for common use-cases and interesting solutions with RxJS. -- [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) -- [Battleship Game](/recipes/battleship-game.md) -- [Breakout Game](/recipes/breakout-game.md) -- [Car Racing Game](/recipes/car-racing-game.md) -- [Catch The Dot Game](/recipes/catch-the-dot-game.md) -- [Click Ninja Game](/recipes/click-ninja-game.md) -- [Flappy Bird Game](/recipes/flappy-bird-game.md) -- [Game Loop](/recipes/gameloop.md) -- [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) -- [HTTP Polling](/recipes/http-polling.md) -- [Lockscreen](/recipes/lockscreen.md) -- [Matrix Digital Rain](/recipes/matrix-digital-rain.md) -- [Memory Game](/recipes/memory-game.md) -- [Mine Sweeper Game](/recipes/mine-sweeper-game.md) -- [Platform Jumper Game](/recipes/platform-jumper-game.md) -- [Progress Bar](/recipes/progressbar.md) -- [Save Indicator](/recipes/save-indicator.md) -- [Smart Counter](/recipes/smartcounter.md) -- [Stop Watch](/recipes/stop-watch.md) -- [Space Invaders Game](/recipes/space-invaders-game.md) -- [Swipe To Refresh](/recipes/swipe-to-refresh.md) -- [Tank Battle Game](/recipes/tank-battle-game.md) -- [Tetris Game](/recipes/tetris-game.md) -- [Type Ahead](/recipes/type-ahead.md) -- [Uncover Image Game](/recipes/uncover-image-game.md) +* [Alphabet Invasion Game](learn-rxjs/recipes/alphabet-invasion-game.md) +* [Battleship Game](learn-rxjs/recipes/battleship-game.md) +* [Breakout Game](learn-rxjs/recipes/breakout-game.md) +* [Car Racing Game](learn-rxjs/recipes/car-racing-game.md) +* [Catch The Dot Game](learn-rxjs/recipes/catch-the-dot-game.md) +* [Click Ninja Game](learn-rxjs/recipes/click-ninja-game.md) +* [Flappy Bird Game](learn-rxjs/recipes/flappy-bird-game.md) +* [Game Loop](learn-rxjs/recipes/gameloop.md) +* [Horizontal Scroll Indicator](learn-rxjs/recipes/horizontal-scroll-indicator.md) +* [HTTP Polling](learn-rxjs/recipes/http-polling.md) +* [Lockscreen](learn-rxjs/recipes/lockscreen.md) +* [Matrix Digital Rain](learn-rxjs/recipes/matrix-digital-rain.md) +* [Memory Game](learn-rxjs/recipes/memory-game.md) +* [Mine Sweeper Game](learn-rxjs/recipes/mine-sweeper-game.md) +* [Platform Jumper Game](learn-rxjs/recipes/platform-jumper-game.md) +* [Progress Bar](learn-rxjs/recipes/progressbar.md) +* [Save Indicator](learn-rxjs/recipes/save-indicator.md) +* [Smart Counter](learn-rxjs/recipes/smartcounter.md) +* [Stop Watch](learn-rxjs/recipes/stop-watch.md) +* [Space Invaders Game](learn-rxjs/recipes/space-invaders-game.md) +* [Swipe To Refresh](learn-rxjs/recipes/swipe-to-refresh.md) +* [Tank Battle Game](learn-rxjs/recipes/tank-battle-game.md) +* [Tetris Game](learn-rxjs/recipes/tetris-game.md) +* [Type Ahead](learn-rxjs/recipes/type-ahead.md) +* [Uncover Image Game](learn-rxjs/recipes/uncover-image-game.md) ## Introductory Resources -New to RxJS and reactive programming? In addition to the content found on this -site, these excellent resources will help jump start your learning experience! +New to RxJS and reactive programming? In addition to the content found on this site, these excellent resources will help jump start your learning experience! #### Conferences -- [RxJS Live](https://www.rxjs.live/) - RxJS specific conference, Las Vegas +* [RxJS Live](https://www.rxjs.live/) - RxJS specific conference, Las Vegas #### Reading -- [RxJS Introduction](https://rxjs-dev.firebaseapp.com/guide/overview) - +* [RxJS Introduction](https://rxjs-dev.firebaseapp.com/guide/overview) - + Official Docs -- [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - + +* [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - + André Staltz -- [RxJS: Observables, Observers and Operators Introduction](https://ultimatecourses.com/blog/rxjs-observables-observers-operators) - + +* [RxJS: Observables, Observers and Operators Introduction](https://ultimatecourses.com/blog/rxjs-observables-observers-operators) - + Todd Motto #### Videos -- [RxJS Basics](https://ultimatecourses.com/courses/rxjs?ref=4) :dollar: - Brian +* [RxJS Basics](https://ultimatecourses.com/courses/rxjs?ref=4) :dollar: - Brian + Troncone -- [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop) - + +* [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop) - + Jafar Husain -- [What is RxJS?](https://egghead.io/lessons/rxjs-what-is-rxjs) - Ben Lesh -- [Creating Observable from Scratch](https://egghead.io/lessons/rxjs-creating-observable-from-scratch) - + +* [What is RxJS?](https://egghead.io/lessons/rxjs-what-is-rxjs) - Ben Lesh +* [Creating Observable from Scratch](https://egghead.io/lessons/rxjs-creating-observable-from-scratch) - + Ben Lesh -- [Introduction to RxJS Marble Testing](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing) + +* [Introduction to RxJS Marble Testing](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing) + :dollar: - Brian Troncone -- [Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming) - :dollar: - André Staltz -- [Reactive Programming using Observables](https://www.youtube.com/watch?v=HT7JiiqnYYc&feature=youtu.be) - + +* [Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming) + + 💵 - André Staltz + +* [Reactive Programming using Observables](https://www.youtube.com/watch?v=HT7JiiqnYYc&feature=youtu.be) - + Jeremy Lund #### Exercises -- [Functional Programming in JavaScript](http://reactivex.io/learnrx/) - Jafar +* [Functional Programming in JavaScript](http://reactivex.io/learnrx/) - Jafar + Husain #### Tools -- [Rx Marbles - Interactive diagrams of Rx Observables](http://rxmarbles.com/) - +* [Rx Marbles - Interactive diagrams of Rx Observables](http://rxmarbles.com/) - + André Staltz -- [Rx Visualizer - Animated playground for Rx Observables](https://rxviz.com) - + +* [Rx Visualizer - Animated playground for Rx Observables](https://rxviz.com) - + Misha Moroshko -- [Reactive.how - Animated cards to learn Reactive Programming](http://reactive.how) - + +* [Reactive.how - Animated cards to learn Reactive Programming](http://reactive.how) - + Cédric Soulas -- [Rx Visualization - Visualizes programming with RxJS](https://fingerpich.github.io/rx-visualization/) - + +* [Rx Visualization - Visualizes programming with RxJS](https://fingerpich.github.io/rx-visualization/) - + Mojtaba Zarei -_Interested in RxJS 4? Check out [Denis Stoyanov's](https://github.com/xgrommx) -excellent [eBook](https://xgrommx.github.io/rx-book/)!_ +_Interested in RxJS 4? Check out_ [_Denis Stoyanov's_](https://github.com/xgrommx) _excellent_ [_eBook_](https://xgrommx.github.io/rx-book/)_!_ ## Translations -- [简体中文](https://rxjs-cn.github.io/learn-rxjs-operators) +* [简体中文](https://rxjs-cn.github.io/learn-rxjs-operators) ### A Note On References -All references included in this GitBook are resources, both free and paid, that -helped me tremendously while learning RxJS. If you come across an article or -video that you think should be included, please use the _edit this page_ link in -the top menu and submit a pull request. Your feedback is appreciated! +All references included in this GitBook are resources, both free and paid, that helped me tremendously while learning RxJS. If you come across an article or video that you think should be included, please use the _edit this page_ link in the top menu and submit a pull request. Your feedback is appreciated! + diff --git a/SUMMARY.md b/SUMMARY.md index 18d88768..634c354c 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -1,146 +1,149 @@ -# Summary +# Table of contents -### Learn RxJS +* [Introduction](README.md) + +## Learn RxJS + +* [Operators](operators/README.md) + * [Combination](operators/combination/README.md) + * [combineAll](operators/combination/combineall.md) + * [combineLatest](operators/combination/combinelatest.md) + * [concat](operators/combination/concat.md) + * [concatAll](operators/combination/concatall.md) + * [endWith](operators/combination/endwith.md) + * [forkJoin](operators/combination/forkjoin.md) + * [merge](operators/combination/merge.md) + * [mergeAll](operators/combination/mergeall.md) + * [pairwise](operators/combination/pairwise.md) + * [race](operators/combination/race.md) + * [startWith](operators/combination/startwith.md) + * [withLatestFrom](operators/combination/withlatestfrom.md) + * [zip](operators/combination/zip.md) + * [Conditional](operators/conditional/README.md) + * [defaultIfEmpty](operators/conditional/defaultifempty.md) + * [every](operators/conditional/every.md) + * [iif](operators/conditional/iif.md) + * [sequenceEqual](operators/conditional/sequenceequal.md) + * [Creation](operators/creation/README.md) + * [ajax](operators/creation/ajax.md) + * [create](operators/creation/create.md) + * [defer](operators/creation/defer.md) + * [empty](operators/creation/empty.md) + * [from](operators/creation/from.md) + * [fromEvent](operators/creation/fromevent.md) + * [generate](operators/creation/generate.md) + * [interval](operators/creation/interval.md) + * [of](operators/creation/of.md) + * [range](operators/creation/range.md) + * [throw](operators/creation/throw.md) + * [timer](operators/creation/timer.md) + * [Error Handling](operators/error_handling/README.md) + * [catch / catchError](operators/error_handling/catch.md) + * [retry](operators/error_handling/retry.md) + * [retryWhen](operators/error_handling/retrywhen.md) + * [Multicasting](operators/multicasting/README.md) + * [publish](operators/multicasting/publish.md) + * [multicast](operators/multicasting/multicast.md) + * [share](operators/multicasting/share.md) + * [shareReplay](operators/multicasting/sharereplay.md) + * [Filtering](operators/filtering/README.md) + * [audit](operators/filtering/audit.md) + * [auditTime](operators/filtering/audittime.md) + * [debounce](operators/filtering/debounce.md) + * [debounceTime](operators/filtering/debouncetime.md) + * [distinct](operators/filtering/distinct.md) + * [distinctUntilChanged](operators/filtering/distinctuntilchanged.md) + * [distinctUntilKeyChanged](operators/filtering/distinctuntilkeychanged.md) + * [filter](operators/filtering/filter.md) + * [find](operators/filtering/find.md) + * [first](operators/filtering/first.md) + * [ignoreElements](operators/filtering/ignoreelements.md) + * [last](operators/filtering/last.md) + * [sample](operators/filtering/sample.md) + * [single](operators/filtering/single.md) + * [skip](operators/filtering/skip.md) + * [skipUntil](operators/filtering/skipuntil.md) + * [skipWhile](operators/filtering/skipwhile.md) + * [take](operators/filtering/take.md) + * [takeLast](operators/filtering/takelast.md) + * [takeUntil](operators/filtering/takeuntil.md) + * [takeWhile](operators/filtering/takewhile.md) + * [throttle](operators/filtering/throttle.md) + * [throttleTime](operators/filtering/throttletime.md) + * [Transformation](operators/transformation/README.md) + * [buffer](operators/transformation/buffer.md) + * [bufferCount](operators/transformation/buffercount.md) + * [bufferTime](operators/transformation/buffertime.md) + * [bufferToggle](operators/transformation/buffertoggle.md) + * [bufferWhen](operators/transformation/bufferwhen.md) + * [concatMap](operators/transformation/concatmap.md) + * [concatMapTo](operators/transformation/concatmapto.md) + * [exhaustMap](operators/transformation/exhaustmap.md) + * [expand](operators/transformation/expand.md) + * [groupBy](operators/transformation/groupby.md) + * [map](operators/transformation/map.md) + * [mapTo](operators/transformation/mapto.md) + * [mergeMap / flatMap](operators/transformation/mergemap.md) + * [mergeScan](operators/transformation/mergescan.md) + * [partition](operators/transformation/partition.md) + * [pluck](operators/transformation/pluck.md) + * [reduce](operators/transformation/reduce.md) + * [scan](operators/transformation/scan.md) + * [switchMap](operators/transformation/switchmap.md) + * [switchMapTo](operators/transformation/switchmapto.md) + * [toArray](operators/transformation/toarray.md) + * [window](operators/transformation/window.md) + * [windowCount](operators/transformation/windowcount.md) + * [windowTime](operators/transformation/windowtime.md) + * [windowToggle](operators/transformation/windowtoggle.md) + * [windowWhen](operators/transformation/windowwhen.md) + * [Utility](operators/utility/README.md) + * [tap / do](operators/utility/do.md) + * [delay](operators/utility/delay.md) + * [delayWhen](operators/utility/delaywhen.md) + * [dematerialize](operators/utility/dematerialize.md) + * [finalize / finally](operators/utility/finalize.md) + * [let](operators/utility/let.md) + * [repeat](operators/utility/repeat.md) + * [timeInterval](operators/utility/timeinterval.md) + * [timeout](operators/utility/timeout.md) + * [timeoutWith](operators/utility/timeoutwith.md) + * [toPromise](operators/utility/topromise.md) + * [Full Listing](operators/complete.md) +* [Subjects](subjects/README.md) + * [AsyncSubject](subjects/asyncsubject.md) + * [BehaviorSubject](subjects/behaviorsubject.md) + * [ReplaySubject](subjects/replaysubject.md) + * [Subject](subjects/subject.md) +* [Recipes](recipes/README.md) + * [Alphabet Invasion Game](recipes/alphabet-invasion-game.md) + * [Battleship Game](recipes/battleship-game.md) + * [Breakout Game](recipes/breakout-game.md) + * [Car Racing Game](recipes/car-racing-game.md) + * [Catch The Dot Game](recipes/catch-the-dot-game.md) + * [Click Ninja Game](recipes/click-ninja-game.md) + * [Flappy Bird Game](recipes/flappy-bird-game.md) + * [Game Loop](recipes/gameloop.md) + * [Horizontal Scroll Indicator](recipes/horizontal-scroll-indicator.md) + * [Http Polling](recipes/http-polling.md) + * [Lockscreen](recipes/lockscreen.md) + * [Matrix Digital Rain](recipes/matrix-digital-rain.md) + * [Memory Game](recipes/memory-game.md) + * [Mine Sweeper Game](recipes/mine-sweeper-game.md) + * [Platform Jumper Game](recipes/platform-jumper-game.md) + * [Progress Bar](recipes/progressbar.md) + * [Save Indicator](recipes/save-indicator.md) + * [Smart Counter](recipes/smartcounter.md) + * [Space Invaders Game](recipes/space-invaders-game.md) + * [Stop Watch](recipes/stop-watch.md) + * [Swipe To Refresh](recipes/swipe-to-refresh.md) + * [Tank Battle Game](recipes/tank-battle-game.md) + * [Tetris Game](recipes/tetris-game.md) + * [Type Ahead](recipes/type-ahead.md) + * [Uncover Image Game](recipes/uncover-image-game.md) +* [Concepts](concepts/README.md) + * [RxJS Primer](concepts/rxjs-primer.md) + * [RxJS v5 -> v6 Upgrade](concepts/rxjs5-6.md) + * [Time based operators comparison](concepts/time-based-operators-comparison.md) + * [Understanding Operator Imports](concepts/operator-imports.md) -- [Operators](/operators/README.md) - - [Combination](/operators/combination/README.md) - - [combineAll](/operators/combination/combineall.md) - - [combineLatest](/operators/combination/combinelatest.md) - - [concat](/operators/combination/concat.md) - - [concatAll](/operators/combination/concatall.md) - - [endWith](/operators/combination/endwith.md) - - [forkJoin](/operators/combination/forkjoin.md) - - [merge](/operators/combination/merge.md) - - [mergeAll](/operators/combination/mergeall.md) - - [pairwise](/operators/combination/pairwise.md) - - [race](/operators/combination/race.md) - - [startWith](/operators/combination/startwith.md) - - [withLatestFrom](/operators/combination/withlatestfrom.md) - - [zip](/operators/combination/zip.md) - - [Conditional](/operators/conditional/README.md) - - [defaultIfEmpty](/operators/conditional/defaultifempty.md) - - [every](/operators/conditional/every.md) - - [iif](/operators/conditional/iif.md) - - [sequenceEqual](/operators/conditional/sequenceequal.md) - - [Creation](/operators/creation/README.md) - - [ajax](/operators/creation/ajax.md) - - [create](/operators/creation/create.md) - - [defer](/operators/creation/defer.md) - - [empty](/operators/creation/empty.md) - - [from](/operators/creation/from.md) - - [fromEvent](/operators/creation/fromevent.md) - - [generate](/operators/creation/generate.md) - - [interval](/operators/creation/interval.md) - - [of](/operators/creation/of.md) - - [range](/operators/creation/range.md) - - [throw](/operators/creation/throw.md) - - [timer](/operators/creation/timer.md) - - [Error Handling](/operators/error_handling/README.md) - - [catch / catchError](/operators/error_handling/catch.md) - - [retry](/operators/error_handling/retry.md) - - [retryWhen](/operators/error_handling/retrywhen.md) - - [Multicasting](/operators/multicasting/README.md) - - [publish](/operators/multicasting/publish.md) - - [multicast](/operators/multicasting/multicast.md) - - [share](/operators/multicasting/share.md) - - [shareReplay](/operators/multicasting/sharereplay.md) - - [Filtering](/operators/filtering/README.md) - - [audit](/operators/filtering/audit.md) - - [auditTime](/operators/filtering/audittime.md) - - [debounce](/operators/filtering/debounce.md) - - [debounceTime](/operators/filtering/debouncetime.md) - - [distinct](/operators/filtering/distinct.md) - - [distinctUntilChanged](/operators/filtering/distinctuntilchanged.md) - - [distinctUntilKeyChanged](/operators/filtering/distinctuntilkeychanged.md) - - [filter](/operators/filtering/filter.md) - - [find](/operators/filtering/find.md) - - [first](/operators/filtering/first.md) - - [ignoreElements](/operators/filtering/ignoreelements.md) - - [last](/operators/filtering/last.md) - - [sample](/operators/filtering/sample.md) - - [single](/operators/filtering/single.md) - - [skip](/operators/filtering/skip.md) - - [skipUntil](/operators/filtering/skipuntil.md) - - [skipWhile](/operators/filtering/skipwhile.md) - - [take](/operators/filtering/take.md) - - [takeLast](/operators/filtering/takelast.md) - - [takeUntil](/operators/filtering/takeuntil.md) - - [takeWhile](/operators/filtering/takewhile.md) - - [throttle](/operators/filtering/throttle.md) - - [throttleTime](/operators/filtering/throttletime.md) - - [Transformation](/operators/transformation/README.md) - - [buffer](/operators/transformation/buffer.md) - - [bufferCount](/operators/transformation/buffercount.md) - - [bufferTime](/operators/transformation/buffertime.md) - - [bufferToggle](/operators/transformation/buffertoggle.md) - - [bufferWhen](/operators/transformation/bufferwhen.md) - - [concatMap](/operators/transformation/concatmap.md) - - [concatMapTo](/operators/transformation/concatmapto.md) - - [exhaustMap](/operators/transformation/exhaustmap.md) - - [expand](/operators/transformation/expand.md) - - [groupBy](/operators/transformation/groupby.md) - - [map](/operators/transformation/map.md) - - [mapTo](/operators/transformation/mapto.md) - - [mergeMap / flatMap](/operators/transformation/mergemap.md) - - [mergeScan](/operators/transformation/mergescan.md) - - [partition](/operators/transformation/partition.md) - - [pluck](/operators/transformation/pluck.md) - - [reduce](/operators/transformation/reduce.md) - - [scan](/operators/transformation/scan.md) - - [switchMap](/operators/transformation/switchmap.md) - - [switchMapTo](/operators/transformation/switchmapto.md) - - [toArray](/operators/transformation/toarray.md) - - [window](/operators/transformation/window.md) - - [windowCount](/operators/transformation/windowcount.md) - - [windowTime](/operators/transformation/windowtime.md) - - [windowToggle](/operators/transformation/windowtoggle.md) - - [windowWhen](/operators/transformation/windowwhen.md) - - [Utility](/operators/utility/README.md) - - [tap / do](/operators/utility/do.md) - - [delay](/operators/utility/delay.md) - - [delayWhen](/operators/utility/delaywhen.md) - - [dematerialize](/operators/utility/dematerialize.md) - - [finalize / finally](operators/utility/finalize.md) - - [let](/operators/utility/let.md) - - [repeat](/operators/utility/repeat.md) - - [timeInterval](/operators/utility/timeinterval.md) - - [timeout](/operators/utility/timeout.md) - - [timeoutWith](/operators/utility/timeoutwith.md) - - [toPromise](/operators/utility/topromise.md) - - [Full Listing](/operators/complete.md) -- [Subjects](/subjects/README.md) - - [AsyncSubject](/subjects/asyncsubject.md) - - [BehaviorSubject](/subjects/behaviorsubject.md) - - [ReplaySubject](/subjects/replaysubject.md) - - [Subject](/subjects/subject.md) -- [Recipes](/recipes/README.md) - - [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) - - [Battleship Game](/recipes/battleship-game.md) - - [Breakout Game](/recipes/breakout-game.md) - - [Car Racing Game](/recipes/car-racing-game.md) - - [Catch The Dot Game](/recipes/catch-the-dot-game.md) - - [Click Ninja Game](/recipes/click-ninja-game.md) - - [Flappy Bird Game](/recipes/flappy-bird-game.md) - - [Game Loop](/recipes/gameloop.md) - - [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) - - [Http Polling](/recipes/http-polling.md) - - [Lockscreen](/recipes/lockscreen.md) - - [Matrix Digital Rain](/recipes/matrix-digital-rain.md) - - [Memory Game](/recipes/memory-game.md) - - [Mine Sweeper Game](/recipes/mine-sweeper-game.md) - - [Platform Jumper Game](/recipes/platform-jumper-game.md) - - [Progress Bar](/recipes/progressbar.md) - - [Save Indicator](/recipes/save-indicator.md) - - [Smart Counter](/recipes/smartcounter.md) - - [Space Invaders Game](/recipes/space-invaders-game.md) - - [Stop Watch](/recipes/stop-watch.md) - - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - - [Tank Battle Game](/recipes/tank-battle-game.md) - - [Tetris Game](/recipes/tetris-game.md) - - [Type Ahead](/recipes/type-ahead.md) - - [Uncover Image Game](/recipes/uncover-image-game.md) -- [Concepts](/concepts/README.md) - - [RxJS Primer](/concepts/rxjs-primer.md) - - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) - - [Time based operators comparison](/concepts/time-based-operators-comparison.md) - - [Understanding Operator Imports](/concepts/operator-imports.md) From b254b386ded61d65b685223c836d13e613c3f35e Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 17:30:31 -0500 Subject: [PATCH 192/256] style(book): update emojis --- README.md | 184 +++++++++++--------- operators/README.md | 50 +++--- operators/combination/README.md | 12 +- operators/combination/combinelatest.md | 8 +- operators/combination/concat.md | 6 +- operators/combination/concatall.md | 14 +- operators/combination/endwith.md | 4 +- operators/combination/forkjoin.md | 9 +- operators/combination/merge.md | 12 +- operators/combination/mergeall.md | 4 +- operators/combination/startwith.md | 8 +- operators/combination/withlatestfrom.md | 4 +- operators/combination/zip.md | 4 +- operators/complete.md | 50 +++--- operators/creation/README.md | 10 +- operators/creation/create.md | 4 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 8 +- operators/creation/interval.md | 4 +- operators/creation/of.md | 4 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 4 +- operators/error_handling/README.md | 8 +- operators/error_handling/catch.md | 10 +- operators/error_handling/retry.md | 8 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/README.md | 12 +- operators/filtering/audittime.md | 2 +- operators/filtering/debounce.md | 4 +- operators/filtering/debouncetime.md | 6 +- operators/filtering/distinctuntilchanged.md | 6 +- operators/filtering/filter.md | 8 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 6 +- operators/filtering/last.md | 4 +- operators/filtering/skip.md | 2 +- operators/filtering/take.md | 8 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 6 +- operators/filtering/takewhile.md | 4 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/README.md | 18 +- operators/multicasting/share.md | 4 +- operators/transformation/README.md | 14 +- operators/transformation/buffer.md | 2 +- operators/transformation/concatmap.md | 6 +- operators/transformation/groupby.md | 4 +- operators/transformation/map.md | 6 +- operators/transformation/mapto.md | 4 +- operators/transformation/mergemap.md | 16 +- operators/transformation/reduce.md | 8 +- operators/transformation/scan.md | 10 +- operators/transformation/switchmap.md | 14 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/window.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/utility/README.md | 6 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/do.md | 8 +- operators/utility/let.md | 6 +- operators/utility/repeat.md | 2 +- operators/utility/repeatwhen.md | 2 +- operators/utility/topromise.md | 3 +- subjects/behaviorsubject.md | 2 +- 67 files changed, 336 insertions(+), 322 deletions(-) diff --git a/README.md b/README.md index 3749ea98..1a2c53ee 100644 --- a/README.md +++ b/README.md @@ -6,34 +6,55 @@ _By_ [_@btroncone_](https://twitter.com/BTroncone) ## Introduction -[RxJS](https://github.com/ReactiveX/rxjs) is one of the hottest libraries in web development today. Offering a powerful, functional approach for dealing with events and with integration points into a growing number of frameworks, libraries, and utilities, the case for learning Rx has never been more appealing. Couple this with the ability to utilize your knowledge across [nearly any language](http://reactivex.io/languages.html), having a solid grasp on reactive programming and what it can offer seems like a no-brainer. +[RxJS](https://github.com/ReactiveX/rxjs) is one of the hottest libraries in web +development today. Offering a powerful, functional approach for dealing with +events and with integration points into a growing number of frameworks, +libraries, and utilities, the case for learning Rx has never been more +appealing. Couple this with the ability to utilize your knowledge across +[nearly any language](http://reactivex.io/languages.html), having a solid grasp +on reactive programming and what it can offer seems like a no-brainer. **But...** -Learning RxJS and reactive programming is [hard](https://twitter.com/hoss/status/742643506536153088). There's the multitude of concepts, large API surface, and fundamental shift in mindset from an [imperative to declarative style](https://tylermcginnis.com/imperative-vs-declarative-programming/). This site focuses on making these concepts approachable, the examples clear and easy to explore, and features references throughout to the best RxJS related material on the web. The goal is to supplement the [official docs](http://reactivex.io/rxjs/) and pre-existing learning material while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! +Learning RxJS and reactive programming is +[hard](https://twitter.com/hoss/status/742643506536153088). There's the +multitude of concepts, large API surface, and fundamental shift in mindset from +an +[imperative to declarative style](https://tylermcginnis.com/imperative-vs-declarative-programming/). +This site focuses on making these concepts approachable, the examples clear and +easy to explore, and features references throughout to the best RxJS related +material on the web. The goal is to supplement the +[official docs](http://reactivex.io/rxjs/) and pre-existing learning material +while offering a new, fresh perspective to clear any hurdles and tackle the pain +points. Learning Rx may be difficult but it is certainly worth the effort! [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX)](https://ultimatecourses.com/courses/rxjs?ref=4) ### Brand New to RxJS? -Start getting familiar with all the key concepts needed to be productive with our [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md)! +Start getting familiar with all the key concepts needed to be productive with +our [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md)! ## Content #### Operators -Operators are the horse-power behind observables, providing an elegant, declarative solution to complex asynchronous tasks. This section contains all [RxJS operators](learn-rxjs/operators/), included with clear, executable examples. Links to additional resources and recipes for each operator are also provided, when applicable. +Operators are the horse-power behind observables, providing an elegant, +declarative solution to complex asynchronous tasks. This section contains all +[RxJS operators](learn-rxjs/operators/), included with clear, executable +examples. Links to additional resources and recipes for each operator are also +provided, when applicable. **Operator Categories** -* [Combination](learn-rxjs/operators/combination/) -* [Conditional](learn-rxjs/operators/conditional/) -* [Creation](learn-rxjs/operators/creation/) -* [Error Handling](learn-rxjs/operators/error_handling/) -* [Multicasting](learn-rxjs/operators/multicasting/) -* [Filtering](learn-rxjs/operators/filtering/) -* [Transformation](learn-rxjs/operators/transformation/) -* [Utility](learn-rxjs/operators/utility/) +- [Combination](learn-rxjs/operators/combination/) +- [Conditional](learn-rxjs/operators/conditional/) +- [Creation](learn-rxjs/operators/creation/) +- [Error Handling](learn-rxjs/operators/error_handling/) +- [Multicasting](learn-rxjs/operators/multicasting/) +- [Filtering](learn-rxjs/operators/filtering/) +- [Transformation](learn-rxjs/operators/transformation/) +- [Utility](learn-rxjs/operators/utility/) **OR...** @@ -41,133 +62,128 @@ Operators are the horse-power behind observables, providing an elegant, declarat #### Understanding Subjects -A Subject is a special type of Observable which shares a single execution path among observers. +A Subject is a special type of Observable which shares a single execution path +among observers. -* [Overview](learn-rxjs/subjects/) -* [AsyncSubject](learn-rxjs/subjects/asyncsubject.md) -* [BehaviorSubject](learn-rxjs/subjects/behaviorsubject.md) -* [ReplaySubject](learn-rxjs/subjects/replaysubject.md) -* [Subject](learn-rxjs/subjects/subject.md) +- [Overview](learn-rxjs/subjects/) +- [AsyncSubject](learn-rxjs/subjects/asyncsubject.md) +- [BehaviorSubject](learn-rxjs/subjects/behaviorsubject.md) +- [ReplaySubject](learn-rxjs/subjects/replaysubject.md) +- [Subject](learn-rxjs/subjects/subject.md) #### Concepts -Without a solid base knowledge of how Observables work behind the scenes, it's easy for much of RxJS to feel like 'magic'. This section helps solidify the major concepts needed to feel comfortable with reactive programming and Observables. +Without a solid base knowledge of how Observables work behind the scenes, it's +easy for much of RxJS to feel like 'magic'. This section helps solidify the +major concepts needed to feel comfortable with reactive programming and +Observables. -* [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md) -* [RxJS v5 -> v6 Upgrade](learn-rxjs/concepts/rxjs5-6.md) -* [Time based operators comparison](learn-rxjs/concepts/time-based-operators-comparison.md) -* [Understanding Operator Imports](learn-rxjs/concepts/operator-imports.md) +- [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md) +- [RxJS v5 -> v6 Upgrade](learn-rxjs/concepts/rxjs5-6.md) +- [Time based operators comparison](learn-rxjs/concepts/time-based-operators-comparison.md) +- [Understanding Operator Imports](learn-rxjs/concepts/operator-imports.md) #### Recipes Recipes for common use-cases and interesting solutions with RxJS. -* [Alphabet Invasion Game](learn-rxjs/recipes/alphabet-invasion-game.md) -* [Battleship Game](learn-rxjs/recipes/battleship-game.md) -* [Breakout Game](learn-rxjs/recipes/breakout-game.md) -* [Car Racing Game](learn-rxjs/recipes/car-racing-game.md) -* [Catch The Dot Game](learn-rxjs/recipes/catch-the-dot-game.md) -* [Click Ninja Game](learn-rxjs/recipes/click-ninja-game.md) -* [Flappy Bird Game](learn-rxjs/recipes/flappy-bird-game.md) -* [Game Loop](learn-rxjs/recipes/gameloop.md) -* [Horizontal Scroll Indicator](learn-rxjs/recipes/horizontal-scroll-indicator.md) -* [HTTP Polling](learn-rxjs/recipes/http-polling.md) -* [Lockscreen](learn-rxjs/recipes/lockscreen.md) -* [Matrix Digital Rain](learn-rxjs/recipes/matrix-digital-rain.md) -* [Memory Game](learn-rxjs/recipes/memory-game.md) -* [Mine Sweeper Game](learn-rxjs/recipes/mine-sweeper-game.md) -* [Platform Jumper Game](learn-rxjs/recipes/platform-jumper-game.md) -* [Progress Bar](learn-rxjs/recipes/progressbar.md) -* [Save Indicator](learn-rxjs/recipes/save-indicator.md) -* [Smart Counter](learn-rxjs/recipes/smartcounter.md) -* [Stop Watch](learn-rxjs/recipes/stop-watch.md) -* [Space Invaders Game](learn-rxjs/recipes/space-invaders-game.md) -* [Swipe To Refresh](learn-rxjs/recipes/swipe-to-refresh.md) -* [Tank Battle Game](learn-rxjs/recipes/tank-battle-game.md) -* [Tetris Game](learn-rxjs/recipes/tetris-game.md) -* [Type Ahead](learn-rxjs/recipes/type-ahead.md) -* [Uncover Image Game](learn-rxjs/recipes/uncover-image-game.md) +- [Alphabet Invasion Game](learn-rxjs/recipes/alphabet-invasion-game.md) +- [Battleship Game](learn-rxjs/recipes/battleship-game.md) +- [Breakout Game](learn-rxjs/recipes/breakout-game.md) +- [Car Racing Game](learn-rxjs/recipes/car-racing-game.md) +- [Catch The Dot Game](learn-rxjs/recipes/catch-the-dot-game.md) +- [Click Ninja Game](learn-rxjs/recipes/click-ninja-game.md) +- [Flappy Bird Game](learn-rxjs/recipes/flappy-bird-game.md) +- [Game Loop](learn-rxjs/recipes/gameloop.md) +- [Horizontal Scroll Indicator](learn-rxjs/recipes/horizontal-scroll-indicator.md) +- [HTTP Polling](learn-rxjs/recipes/http-polling.md) +- [Lockscreen](learn-rxjs/recipes/lockscreen.md) +- [Matrix Digital Rain](learn-rxjs/recipes/matrix-digital-rain.md) +- [Memory Game](learn-rxjs/recipes/memory-game.md) +- [Mine Sweeper Game](learn-rxjs/recipes/mine-sweeper-game.md) +- [Platform Jumper Game](learn-rxjs/recipes/platform-jumper-game.md) +- [Progress Bar](learn-rxjs/recipes/progressbar.md) +- [Save Indicator](learn-rxjs/recipes/save-indicator.md) +- [Smart Counter](learn-rxjs/recipes/smartcounter.md) +- [Stop Watch](learn-rxjs/recipes/stop-watch.md) +- [Space Invaders Game](learn-rxjs/recipes/space-invaders-game.md) +- [Swipe To Refresh](learn-rxjs/recipes/swipe-to-refresh.md) +- [Tank Battle Game](learn-rxjs/recipes/tank-battle-game.md) +- [Tetris Game](learn-rxjs/recipes/tetris-game.md) +- [Type Ahead](learn-rxjs/recipes/type-ahead.md) +- [Uncover Image Game](learn-rxjs/recipes/uncover-image-game.md) ## Introductory Resources -New to RxJS and reactive programming? In addition to the content found on this site, these excellent resources will help jump start your learning experience! +New to RxJS and reactive programming? In addition to the content found on this +site, these excellent resources will help jump start your learning experience! #### Conferences -* [RxJS Live](https://www.rxjs.live/) - RxJS specific conference, Las Vegas +- [RxJS Live](https://www.rxjs.live/) - RxJS specific conference #### Reading -* [RxJS Introduction](https://rxjs-dev.firebaseapp.com/guide/overview) - - +- [RxJS Introduction](https://rxjs-dev.firebaseapp.com/guide/overview) - Official Docs -* [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - - +- [The Introduction to Reactive Programming You've Been Missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) - André Staltz -* [RxJS: Observables, Observers and Operators Introduction](https://ultimatecourses.com/blog/rxjs-observables-observers-operators) - - +- [RxJS: Observables, Observers and Operators Introduction](https://ultimatecourses.com/blog/rxjs-observables-observers-operators) - Todd Motto #### Videos -* [RxJS Basics](https://ultimatecourses.com/courses/rxjs?ref=4) :dollar: - Brian - +- [Ultimate RxJS](https://ultimatecourses.com/courses/rxjs?ref=4) 💵 - Brian Troncone -* [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop) - - +- [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop) - Jafar Husain -* [What is RxJS?](https://egghead.io/lessons/rxjs-what-is-rxjs) - Ben Lesh -* [Creating Observable from Scratch](https://egghead.io/lessons/rxjs-creating-observable-from-scratch) - - +- [What is RxJS?](https://egghead.io/lessons/rxjs-what-is-rxjs) - Ben Lesh +- [Creating Observable from Scratch](https://egghead.io/lessons/rxjs-creating-observable-from-scratch) - Ben Lesh -* [Introduction to RxJS Marble Testing](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing) - - :dollar: - Brian Troncone - -* [Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming) +- [Introduction to RxJS Marble Testing](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing) + 💵 - Brian Troncone +- [Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming) 💵 - André Staltz -* [Reactive Programming using Observables](https://www.youtube.com/watch?v=HT7JiiqnYYc&feature=youtu.be) - - +- [Reactive Programming using Observables](https://www.youtube.com/watch?v=HT7JiiqnYYc&feature=youtu.be) - Jeremy Lund #### Exercises -* [Functional Programming in JavaScript](http://reactivex.io/learnrx/) - Jafar - +- [Functional Programming in JavaScript](http://reactivex.io/learnrx/) - Jafar Husain #### Tools -* [Rx Marbles - Interactive diagrams of Rx Observables](http://rxmarbles.com/) - - +- [Rx Marbles - Interactive diagrams of Rx Observables](http://rxmarbles.com/) - André Staltz -* [Rx Visualizer - Animated playground for Rx Observables](https://rxviz.com) - - +- [Rx Visualizer - Animated playground for Rx Observables](https://rxviz.com) - Misha Moroshko -* [Reactive.how - Animated cards to learn Reactive Programming](http://reactive.how) - - +- [Reactive.how - Animated cards to learn Reactive Programming](http://reactive.how) - Cédric Soulas -* [Rx Visualization - Visualizes programming with RxJS](https://fingerpich.github.io/rx-visualization/) - - +- [Rx Visualization - Visualizes programming with RxJS](https://fingerpich.github.io/rx-visualization/) - Mojtaba Zarei -_Interested in RxJS 4? Check out_ [_Denis Stoyanov's_](https://github.com/xgrommx) _excellent_ [_eBook_](https://xgrommx.github.io/rx-book/)_!_ +_Interested in RxJS 4? Check out_ +[_Denis Stoyanov's_](https://github.com/xgrommx) _excellent_ +[_eBook_](https://xgrommx.github.io/rx-book/)_!_ ## Translations -* [简体中文](https://rxjs-cn.github.io/learn-rxjs-operators) +- [简体中文](https://rxjs-cn.github.io/learn-rxjs-operators) ### A Note On References -All references included in this GitBook are resources, both free and paid, that helped me tremendously while learning RxJS. If you come across an article or video that you think should be included, please use the _edit this page_ link in the top menu and submit a pull request. Your feedback is appreciated! - +All references included in this GitBook are resources, both free and paid, that +helped me tremendously while learning RxJS. If you come across an article or +video that you think should be included, please use the _edit this page_ link in +the top menu and submit a pull request. Your feedback is appreciated! diff --git a/operators/README.md b/operators/README.md index 490a1aed..f292b564 100644 --- a/operators/README.md +++ b/operators/README.md @@ -9,17 +9,17 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [Combination](combination/README.md) - [combineAll](combination/combineall.md) - - [combineLatest](combination/combinelatest.md) :star: - - [concat](combination/concat.md) :star: + - [combineLatest](combination/combinelatest.md) ⭐ + - [concat](combination/concat.md) ⭐ - [concatAll](combination/concatall.md) - [endWith](combination/endwith.md) - [forkJoin](combination/forkjoin.md) - - [merge](combination/merge.md) :star: + - [merge](combination/merge.md) ⭐ - [mergeAll](combination/mergeall.md) - [pairwise](combination/pairwise.md) - [race](combination/race.md) - - [startWith](combination/startwith.md) :star: - - [withLatestFrom](combination/withlatestfrom.md) :star: + - [startWith](combination/startwith.md) ⭐ + - [withLatestFrom](combination/withlatestfrom.md) ⭐ - [zip](combination/zip.md) - [Conditional](conditional/README.md) - [defaultIfEmpty](conditional/defaultifempty.md) @@ -27,31 +27,31 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [iif](conditional/iif.md) - [sequenceequal](conditional/sequenceequal.md) - [Creation](creation/README.md) - - [ajax](creation/ajax.md) :star: + - [ajax](creation/ajax.md) ⭐ - [create](creation/create.md) - [defer](creation/defer.md) - [empty](creation/empty.md) - - [from](creation/from.md) :star: + - [from](creation/from.md) ⭐ - [fromEvent](creation/fromevent.md) - [generate](creation/generate.md) - [interval](creation/interval.md) - - [of](creation/of.md) :star: + - [of](creation/of.md) ⭐ - [range](creation/range.md) - [throw](creation/throw.md) - [timer](creation/timer.md) - [Error Handling](error_handling/README.md) - - [catch / catchError](error_handling/catch.md) :star: + - [catch / catchError](error_handling/catch.md) ⭐ - [retry](error_handling/retry.md) - [retryWhen](error_handling/retrywhen.md) - [Filtering](filtering/README.md) - [audit](filtering/audit.md) - [auditTime](filtering/audittime.md) - [debounce](filtering/debounce.md) - - [debounceTime](filtering/debouncetime.md) :star: + - [debounceTime](filtering/debouncetime.md) ⭐ - [distinct](filtering/distinct.md) - - [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: + - [distinctUntilChanged](filtering/distinctuntilchanged.md) ⭐ - [distinctUntilKeyChanged](distinctuntilkeychanged.md) - - [filter](filtering/filter.md) :star: + - [filter](filtering/filter.md) ⭐ - [find](filtering/find.md) - [first](filtering/first.md) - [ignoreElements](filtering/ignoreelements.md) @@ -61,37 +61,37 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [skip](filtering/skip.md) - [skipUntil](filtering/skipuntil.md) - [skipWhile](filtering/skipwhile.md) - - [take](filtering/take.md) :star: + - [take](filtering/take.md) ⭐ - [takeLast](filtering/takelast.md) - - [takeUntil](filtering/takeuntil.md) :star: + - [takeUntil](filtering/takeuntil.md) ⭐ - [takeWhile](filtering/takewhile.md) - [throttle](filtering/throttle.md) - [throttleTime](filtering/throttletime.md) - [Multicasting](multicasting/README.md) - [multicast](multicasting/multicast.md) - [publish](multicasting/publish.md) - - [share](multicasting/share.md) :star: - - [shareReplay](multicasting/sharereplay.md) :star: + - [share](multicasting/share.md) ⭐ + - [shareReplay](multicasting/sharereplay.md) ⭐ - [Transformation](transformation/README.md) - [buffer](transformation/buffer.md) - [bufferCount](transformation/buffercount.md) - - [bufferTime](transformation/buffertime.md) :star: + - [bufferTime](transformation/buffertime.md) ⭐ - [bufferToggle](transformation/buffertoggle.md) - [bufferWhen](transformation/bufferwhen.md) - - [concatMap](transformation/concatmap.md) :star: + - [concatMap](transformation/concatmap.md) ⭐ - [concatMapTo](transformation/concatmapto.md) - [expand](transformation/expand.md) - [exhaustMap](transformation/exhaustmap.md) - [groupBy](transformation/groupby.md) - - [map](transformation/map.md) :star: + - [map](transformation/map.md) ⭐ - [mapTo](transformation/mapto.md) - - [mergeMap / flatMap](transformation/mergemap.md) :star: + - [mergeMap / flatMap](transformation/mergemap.md) ⭐ - [mergeScan](transformation/mergescan.md) - [partition](transformation/partition.md) - [pluck](transformation/pluck.md) - [reduce](transformation/reduce.md) - - [scan](transformation/scan.md) :star: - - [switchMap](transformation/switchmap.md) :star: + - [scan](transformation/scan.md) ⭐ + - [switchMap](transformation/switchmap.md) ⭐ - [switchMapTo](transformation/switchmapto.md) - [toArray](transformation/toarray.md) - [window](transformation/window.md) @@ -100,7 +100,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [windowToggle](transformation/windowtoggle.md) - [windowWhen](transformation/windowwhen.md) - [Utility](utility/README.md) - - [tap / do](utility/do.md) :star: + - [tap / do](utility/do.md) ⭐ - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) - [dematerialize](utility/dematerialize.md) @@ -113,11 +113,11 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [timeoutWith](utility/timeoutwith.md) - [toPromise](utility/topromise.md) -:star: - _commonly used_ +⭐ - _commonly used_ ### Additional Resources - [What Are Operators?](http://reactivex.io/rxjs/manual/overview.html#operators) :newspaper: - Official Docs - [What Operators Are](https://egghead.io/lessons/rxjs-what-rxjs-operators-are) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz diff --git a/operators/combination/README.md b/operators/combination/README.md index 49c6e8a7..f06659e5 100644 --- a/operators/combination/README.md +++ b/operators/combination/README.md @@ -7,17 +7,17 @@ variation among these operators. ## Contents - [combineAll](combineall.md) -- [combineLatest](combinelatest.md) :star: -- [concat](concat.md) :star: +- [combineLatest](combinelatest.md) ⭐ +- [concat](concat.md) ⭐ - [concatAll](concatall.md) - [endWith](endwith.md) - [forkJoin](forkjoin.md) -- [merge](merge.md) :star: +- [merge](merge.md) ⭐ - [mergeAll](mergeall.md) - [pairwise](pairwise.md) - [race](race.md) -- [startWith](startwith.md) :star: -- [withLatestFrom](withlatestfrom.md) :star: +- [startWith](startwith.md) ⭐ +- [withLatestFrom](withlatestfrom.md) ⭐ - [zip](zip.md) -:star: - _commonly used_ +⭐ - _commonly used_ diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 28060573..9241c5c0 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -6,7 +6,7 @@ --- -:bulb: [combineAll](combineall.md) can be used to apply combineLatest to emitted +💡 [combineAll](combineall.md) can be used to apply combineLatest to emitted observables when a source completes! --- @@ -158,11 +158,11 @@ combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe( - [combineLatest](https://rxjs.dev/api/index/function/combineLatest) :newspaper: - Official docs - [Combining streams with combineLatest](https://egghead.io/lessons/rxjs-combining-streams-with-combinelatest?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Combination operator: combineLatest](https://egghead.io/lessons/rxjs-combination-operator-combinelatest?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own combineLatest operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=combineLatest#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/combination/concat.md b/operators/combination/concat.md index f897766e..ee5c4586 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -6,10 +6,10 @@ --- -:bulb: You can think of concat like a line at a ATM, the next transaction +💡 You can think of concat like a line at a ATM, the next transaction (subscription) cannot start until the previous completes! -:bulb: If throughput, not order, is a primary concern, try [merge](merge.md) +💡 If throughput, not order, is a primary concern, try [merge](merge.md) instead! --- @@ -96,7 +96,7 @@ concat(interval(1000), of('This', 'Never', 'Runs')) - [concat](https://rxjs.dev/api/index/function/concat) :newspaper: - Official docs - [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 9638741c..b2f24739 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -6,16 +6,16 @@ --- -:warning: Be wary of +⚠ Be wary of [backpressure](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/backpressure.md) when the source emits at a faster pace than inner observables complete! -:bulb: In many cases you can use [concatMap](../transformation/concatmap.md) as -a single operator instead! +💡 In many cases you can use [concatMap](../transformation/concatmap.md) as a +single operator instead! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -114,10 +114,10 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [concatAll](https://rxjs.dev/api/operators/concatAll) - :newspaper: - Official docs +- [concatAll](https://rxjs.dev/api/operators/concatAll) :newspaper: - Official + docs - [Flatten a higher order observable with concatAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-concatall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index a4800fc1..93215abe 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -6,10 +6,10 @@ --- -:bulb: If you want to start with a value instead, check out +💡 If you want to start with a value instead, check out [`startWith`](startWith.md)! -:bulb: If you want to perform an action on completion, but do not want to emit a +💡 If you want to perform an action on completion, but do not want to emit a value, check out [`finalize`](../utility/finalize.md)! --- diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 9a638c14..54046f1f 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -6,11 +6,10 @@ --- -:bulb: If you want corresponding emissions from multiple observables as they -occur, try [zip](zip.md)! +💡 If you want corresponding emissions from multiple observables as they occur, +try [zip](zip.md)! -:warning: If an inner observable does not complete `forkJoin` will never emit a -value! +⚠ If an inner observable does not complete `forkJoin` will never emit a value! --- @@ -35,7 +34,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may be better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 84d26f59..6f39aa1a 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -6,9 +6,9 @@ --- -:bulb: This operator can be used as either a static or instance method! +💡 This operator can be used as either a static or instance method! -:bulb: If order not throughput is a primary concern, try [concat](concat.md) +💡 If order not throughput is a primary concern, try [concat](concat.md) instead! --- @@ -85,13 +85,13 @@ const subscribe = example.subscribe(val => console.log(val)); - [merge](https://rxjs.dev/api/index/function/merge) :newspaper: - Official docs - [Handling multiple streams with merge](https://egghead.io/lessons/rxjs-handling-multiple-streams-with-merge?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Sharing network requests with merge](https://egghead.io/lessons/rxjs-reactive-programming-sharing-network-requests-with-rxjs-merge?course=introduction-to-reactive-programming) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Combination operator: merge](https://egghead.io/lessons/rxjs-combination-operator-merge?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own merge operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=merge#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 8476a838..2eff0489 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -6,7 +6,7 @@ --- -:bulb: In many cases you can use [mergeMap](../transformation/mergemap.md) as a +💡 In many cases you can use [mergeMap](../transformation/mergemap.md) as a single operator instead! --- @@ -92,7 +92,7 @@ const example = source - [mergeAll](https://rxjs.dev/api/operators/mergeAll) :newspaper: - Official docs - [Flatten a higher order observable with mergeAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-mergeall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index 6d410670..bfd50b92 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -6,7 +6,7 @@ --- -:bulb: A +💡 A [BehaviorSubject](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md) can also start with an initial value! @@ -107,11 +107,11 @@ const subscribe = example.subscribe(val => console.log(val)); - [startWith](https://rxjs.dev/api/operators/startWith) :newspaper: - Official docs - [Displaying initial data with startWith](https://egghead.io/lessons/rxjs-displaying-initial-data-with-startwith?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Clear data while loading with startWith](https://egghead.io/lessons/rxjs-reactive-programming-clear-data-while-loading-with-rxjs-startwith?course=introduction-to-reactive-programming) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index 19e4c0d9..b34fe7f8 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -6,7 +6,7 @@ --- -:bulb: If you want the last emission any time a variable number of observables +💡 If you want the last emission any time a variable number of observables emits, try [combinelatest](combinelatest.md)! --- @@ -91,7 +91,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [withLatestFrom](https://rxjs.dev/api/operators/withLatestFrom) :newspaper: - Official docs - [Combination operator: withLatestFrom](https://egghead.io/lessons/rxjs-combination-operator-withlatestfrom?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 96b749b1..6380b72f 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -6,7 +6,7 @@ --- -:bulb: Combined with [interval](../creation/interval.md) or +💡 Combined with [interval](../creation/interval.md) or [timer](../creation/timer.md), zip can be used to time output from another source! @@ -111,7 +111,7 @@ mouseClickDuration.subscribe(console.log); - [zip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip) :newspaper: - Official docs - [Combination operator: zip](https://egghead.io/lessons/rxjs-combination-operator-zip?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/complete.md b/operators/complete.md index 4f507622..cb1cef04 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -7,43 +7,43 @@ _[Prefer a split by operator type?](README.md)_ ### Contents (In Alphabetical Order) -- [ajax](creation/ajax.md) :star: +- [ajax](creation/ajax.md) ⭐ - [audit](filtering/audit.md) - [auditTime](filtering/audittime.md) - [buffer](transformation/buffer.md) - [bufferCount](transformation/buffercount.md) -- [bufferTime](transformation/buffertime.md) :star: +- [bufferTime](transformation/buffertime.md) ⭐ - [bufferToggle](transformation/buffertoggle.md) - [bufferWhen](transformation/bufferwhen.md) -- [catch / catchError](error_handling/catch.md) :star: +- [catch / catchError](error_handling/catch.md) ⭐ - [combineAll](combination/combineall.md) -- [combineLatest](combination/combinelatest.md) :star: -- [concat](combination/concat.md) :star: +- [combineLatest](combination/combinelatest.md) ⭐ +- [concat](combination/concat.md) ⭐ - [concatAll](combination/concatall.md) -- [concatMap](transformation/concatmap.md) :star: +- [concatMap](transformation/concatmap.md) ⭐ - [concatMapTo](transformation/concatmapto.md) - [create](creation/create.md) - [debounce](filtering/debounce.md) -- [debounceTime](filtering/debouncetime.md) :star: +- [debounceTime](filtering/debouncetime.md) ⭐ - [defaultIfEmpty](conditional/defaultifempty.md) - [defer](creation/defer.md) - [delay](utility/delay.md) - [delayWhen](utility/delaywhen.md) - [distinct](filtering/distinct.md) -- [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: +- [distinctUntilChanged](filtering/distinctuntilchanged.md) ⭐ - [distinctUntilKeyChanged](filtering/distinctuntilkeychanged.md) - [endWith](combination/endwith.md) -- [tap / do](utility/do.md) :star: +- [tap / do](utility/do.md) ⭐ - [empty](creation/empty.md) - [every](conditional/every.md) - [exhaustMap](transformation/exhaustmap.md) - [expand](transformation/expand.md) -- [filter](filtering/filter.md) :star: +- [filter](filtering/filter.md) ⭐ - [finalize / finally](utility/finalize.md) - [find](filtering/find.md) - [first](filtering/first.md) - [forkJoin](combination/forkjoin.md) -- [from](creation/from.md) :star: +- [from](creation/from.md) ⭐ - [fromEvent](creation/fromevent.md) - [generate](creation/generate.md) - [groupBy](transformation/groupby.md) @@ -52,14 +52,14 @@ _[Prefer a split by operator type?](README.md)_ - [interval](creation/interval.md) - [last](filtering/last.md) - [let](utility/let.md) -- [map](transformation/map.md) :star: +- [map](transformation/map.md) ⭐ - [mapTo](transformation/mapto.md) -- [merge](combination/merge.md) :star: +- [merge](combination/merge.md) ⭐ - [mergeAll](combination/mergeall.md) -- [mergeMap / flatMap](transformation/mergemap.md) :star: +- [mergeMap / flatMap](transformation/mergemap.md) ⭐ - [mergeScan](transformation/mergescan.md) - [multicast](multicasting/multicast.md) -- [of](creation/of.md) :star: +- [of](creation/of.md) ⭐ - [partition](transformation/partition.md) - [pluck](transformation/pluck.md) - [publish](multicasting/publish.md) @@ -70,20 +70,20 @@ _[Prefer a split by operator type?](README.md)_ - [retry](error_handling/retry.md) - [retryWhen](error_handling/retrywhen.md) - [sample](filtering/sample.md) -- [scan](transformation/scan.md) :star: +- [scan](transformation/scan.md) ⭐ - [sequenceequal](conditional/sequenceequal.md) -- [share](multicasting/share.md) :star: -- [shareReplay](multicasting/sharereplay.md) :star: +- [share](multicasting/share.md) ⭐ +- [shareReplay](multicasting/sharereplay.md) ⭐ - [single](filtering/single.md) - [skip](filtering/skip.md) - [skipUntil](filtering/skipuntil.md) - [skipWhile](filtering/skipwhile.md) -- [startWith](combination/startwith.md) :star: -- [switchMap](transformation/switchmap.md) :star: +- [startWith](combination/startwith.md) ⭐ +- [switchMap](transformation/switchmap.md) ⭐ - [switchMapTo](transformation/switchmapto.md) -- [take](filtering/take.md) :star: +- [take](filtering/take.md) ⭐ - [takeLast](filtering/takelast.md) -- [takeUntil](filtering/takeuntil.md) :star: +- [takeUntil](filtering/takeuntil.md) ⭐ - [takeWhile](filtering/takewhile.md) - [throttle](filtering/throttle.md) - [throttleTime](filtering/throttletime.md) @@ -99,14 +99,14 @@ _[Prefer a split by operator type?](README.md)_ - [windowTime](transformation/windowtime.md) - [windowToggle](transformation/windowtoggle.md) - [windowWhen](transformation/windowwhen.md) -- [withLatestFrom](combination/withlatestfrom.md) :star: +- [withLatestFrom](combination/withlatestfrom.md) ⭐ - [zip](combination/zip.md) -:star: - _commonly used_ +⭐ - _commonly used_ ### Additional Resources - [What Are Operators?](http://reactivex.io/rxjs/manual/overview.html#operators) :newspaper: - Official Docs - [What Operators Are](https://egghead.io/lessons/rxjs-what-rxjs-operators-are) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz diff --git a/operators/creation/README.md b/operators/creation/README.md index 108f700f..f7f9d42a 100644 --- a/operators/creation/README.md +++ b/operators/creation/README.md @@ -6,22 +6,22 @@ generic to specific use-cases you are free, and encouraged, to turn ## Contents -- [ajax](ajax.md) :star: +- [ajax](ajax.md) ⭐ - [create](create.md) - [defer](defer.md) - [empty](empty.md) -- [from](from.md) :star: +- [from](from.md) ⭐ - [fromEvent](fromevent.md) - [generate](generate.md) - [interval](interval.md) -- [of](of.md) :star: +- [of](of.md) ⭐ - [range](range.md) - [throw](throw.md) - [timer](timer.md) -:star: - _commonly used_ +⭐ - _commonly used_ ### Additional Resources - [Creating Observables From Scratch](https://egghead.io/courses/rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz diff --git a/operators/creation/create.md b/operators/creation/create.md index df1b3dc8..4f54561e 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -70,9 +70,9 @@ setTimeout(() => { - [create](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-create) :newspaper: - Official docs - [Creation operators: Create()](https://egghead.io/lessons/rxjs-creation-operator-create?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Using Observable.create for fine-grained control](https://egghead.io/lessons/rxjs-using-observable-create-for-fine-grained-control) - :video_camera: :dollar: - Shane Osbourne + 🎥 💵 - Shane Osbourne --- diff --git a/operators/creation/defer.md b/operators/creation/defer.md index 75c28cc5..7c9fe7ed 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -6,7 +6,7 @@ --- -:bulb: +💡 [`defer`](https://github.com/ReactiveX/rxjs/blob/ecc73d2a1564d0d3edffba90eec76510e509236c/src/internal/observable/iif.ts#L94-L100) is used as part of the [`iif`](../conditional/iif.md) operator! diff --git a/operators/creation/empty.md b/operators/creation/empty.md index d162099c..b38fce9f 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -67,7 +67,7 @@ const timer$ = merge(pause$, resume$) - [empty](https://rxjs.dev/api/index/function/empty) :newspaper: - Official docs - [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/creation/from.md b/operators/creation/from.md index d90582bf..fe336af2 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -6,12 +6,12 @@ --- -:bulb: This operator can be used to convert a promise to an observable! +💡 This operator can be used to convert a promise to an observable! -:bulb: For arrays and iterables, all contained values will be emitted as a +💡 For arrays and iterables, all contained values will be emitted as a sequence! -:bulb: This operator can also be used to emit a string as a sequence of +💡 This operator can also be used to emit a string as a sequence of characters! --- @@ -104,7 +104,7 @@ const subscribe = source.subscribe(val => console.log(val)); - [from](https://rxjs.dev/api/index/function/from) :newspaper: - Official docs - [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/creation/interval.md b/operators/creation/interval.md index ffaf77e6..aa92f941 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -47,9 +47,9 @@ const subscribe = source.subscribe(val => console.log(val)); - [interval](https://rxjs.dev/api/index/function/interval) :newspaper: - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own interval operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=interval#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/creation/of.md b/operators/creation/of.md index f04218dd..9a8bc7ad 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -57,9 +57,9 @@ const subscribe = source.subscribe(val => console.log(val)); - [of](https://rxjs.dev/api/index/function/of) :newspaper: - Official docs - [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own of operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=of#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 37088799..7d62be62 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -38,7 +38,7 @@ const subscribe = source.subscribe({ - [throw](https://rxjs.dev/api/index/function/throw) :newspaper: - Official docs - [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/creation/timer.md b/operators/creation/timer.md index f88b5d94..ad702d03 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -55,9 +55,9 @@ const subscribe = source.subscribe(val => console.log(val)); - [timer](https://rxjs.dev/api/index/function/timer) :newspaper: - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own timer operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=timer#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/error_handling/README.md b/operators/error_handling/README.md index 54b3ff3e..9a9188dc 100644 --- a/operators/error_handling/README.md +++ b/operators/error_handling/README.md @@ -5,8 +5,8 @@ effective ways to gracefully handle errors and retry logic, should they occur. ## Contents -* [catch / catchError](catch.md) :star: -* [retry](retry.md) -* [retryWhen](retrywhen.md) +- [catch / catchError](catch.md) ⭐ +- [retry](retry.md) +- [retryWhen](retrywhen.md) -:star: - _commonly used_ +⭐ - _commonly used_ diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index f6aaa15f..8cbe2519 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -6,11 +6,11 @@ --- -:warning: Remember to return an observable from the catchError function! +⚠ Remember to return an observable from the catchError function! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -108,10 +108,10 @@ iWillStopListening$.subscribe(console.log); ### Additional Resources -- [catchError](https://rxjs.dev/api/operators/catchError) - :newspaper: - Official docs +- [catchError](https://rxjs.dev/api/operators/catchError) :newspaper: - Official + docs - [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index d2aa2499..c618cea4 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -6,12 +6,12 @@ --- -:bulb: Useful for retrying HTTP requests! +💡 Useful for retrying HTTP requests! -:bulb: If you only want to retry in certain cases, check out +💡 If you only want to retry in certain cases, check out [`retryWhen`](./retrywhen.md)! -:bulb: For non error cases check out [`repeat`](../utility/repeat.md)! +💡 For non error cases check out [`repeat`](../utility/repeat.md)! --- @@ -62,7 +62,7 @@ const subscribe = example.subscribe({ - [retry](https://rxjs.dev/api/operators/retry) :newspaper: - Official docs - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 705c2a9e..bf241031 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -142,7 +142,7 @@ export class AppComponent implements OnInit { - [retryWhen](https://rxjs.dev/api/operators/retryWhen) :newspaper: - Official docs - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/filtering/README.md b/operators/filtering/README.md index 5a8bce94..f811c385 100644 --- a/operators/filtering/README.md +++ b/operators/filtering/README.md @@ -12,11 +12,11 @@ with - [audit](audit.md) - [auditTime](audittime.md) - [debounce](debounce.md) -- [debounceTime](debouncetime.md) :star: +- [debounceTime](debouncetime.md) ⭐ - [distinct](distinct.md) -- [distinctUntilChanged](distinctuntilchanged.md) :star: +- [distinctUntilChanged](distinctuntilchanged.md) ⭐ - [distinctUntilKeyChanged](distinctuntilkeychanged.md) -- [filter](filter.md) :star: +- [filter](filter.md) ⭐ - [find](find.md) - [first](first.md) - [ignoreElements](ignoreelements.md) @@ -26,11 +26,11 @@ with - [skip](skip.md) - [skipUntil](skipuntil.md) - [skipWhile](skipwhile.md) -- [take](take.md) :star: +- [take](take.md) ⭐ - [takeLast](takelast.md) -- [takeUntil](takeuntil.md) :star: +- [takeUntil](takeuntil.md) ⭐ - [takeWhile](takewhile.md) - [throttle](throttle.md) - [throttleTime](throttletime.md) -:star: - _commonly used_ +⭐ - _commonly used_ diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index e7ae0688..2423932b 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -10,7 +10,7 @@ When you are interested in ignoring a source observable for a given amout of tim --- -:bulb: If you want the timer to reset whenever a new event occurs on the source observable, you can use [debounceTime](debouncetime.md) +💡 If you want the timer to reset whenever a new event occurs on the source observable, you can use [debounceTime](debouncetime.md) --- diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index b4b10063..2fffeece 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -6,7 +6,7 @@ --- -:bulb: Though not as widely used as [debounceTime](debouncetime.md), +💡 Though not as widely used as [debounceTime](debouncetime.md), **debounce** is important when the debounce rate is variable! --- @@ -72,7 +72,7 @@ const subscribe = debouncedInterval.subscribe(val => - [debounce](https://rxjs.dev/api/operators/debounce) :newspaper: - Official docs - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index bf6a62fe..fa6d15ee 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -6,7 +6,7 @@ --- -:bulb: This operator is popular in scenarios such as type-ahead where the rate +💡 This operator is popular in scenarios such as type-ahead where the rate of user input must be controlled! --- @@ -51,10 +51,10 @@ keyup$ - [debounceTime](https://rxjs.dev/api/operators/debounceTime) :newspaper: - Official docs - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) - [Build your own debounceTime operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=debounceTime#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index cf666e31..a2d347c5 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -6,10 +6,10 @@ --- -:bulb: distinctUntilChanged uses `===` comparison by default, object references +💡 distinctUntilChanged uses `===` comparison by default, object references must match! -:bulb: If you want to compare based on an object property, you can use +💡 If you want to compare based on an object property, you can use [`distinctUntilKeyChanged`](distinctuntilkeychanged.md) instead! --- @@ -98,7 +98,7 @@ source$ - [distinctUntilChanged](https://rxjs.dev/api/operators/distinctUntilChanged) :newspaper: - Official docs - [Filtering operator: distinct and distinctUntilChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-and-distinctuntilchanged?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index b322249f..f0bbc9d1 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -6,7 +6,7 @@ --- -:bulb: If you would like to complete an observable when a condition fails, check +💡 If you would like to complete an observable when a condition fails, check out [takeWhile](takewhile.md)! --- @@ -96,11 +96,11 @@ const subscribe = example.subscribe(val => - [filter](https://rxjs.dev/api/operators/filter) :newspaper: - Official docs - [Adding conditional logic with filter](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own filter operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=filter#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/filtering/find.md b/operators/filtering/find.md index c740ab1f..b0e34e06 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -6,7 +6,7 @@ --- -:bulb: If you always want the first item emitted, regardless of condition, try +💡 If you always want the first item emitted, regardless of condition, try [`first()`](first.md)! --- diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 0cd83971..fec69c2b 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -6,9 +6,9 @@ --- -:bulb: The counterpart to first is [**last**](last.md)! +💡 The counterpart to first is [**last**](last.md)! -:bulb: `First` will deliver an EmptyError to the Observer's error callback if the Observable completes before any next notification was sent. If you don't want this behavior, use `take(1)` instead. +💡 `First` will deliver an EmptyError to the Observer's error callback if the Observable completes before any next notification was sent. If you don't want this behavior, use `take(1)` instead. --- @@ -84,7 +84,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [first](https://rxjs.dev/api/operators/first) :newspaper: - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/filtering/last.md b/operators/filtering/last.md index c9cb0fdc..94d82691 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -6,7 +6,7 @@ --- -:bulb: The counterpart to last is [**first**](first.md)! +💡 The counterpart to last is [**first**](first.md)! --- @@ -78,7 +78,7 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); - [last](https://rxjs.dev/api/operators/last) :newspaper: - Official docs - [Filtering operator: takeLast, last](https://egghead.io/lessons/rxjs-filtering-operators-takelast-last?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index d6e0aad1..7b474de0 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -70,7 +70,7 @@ const filterObs = numArrayObs - [skip](https://rxjs.dev/api/operators/skip) :newspaper: - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 7c89f179..104e6999 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -16,11 +16,11 @@ application. --- -:bulb: If you want to take a variable number of values based on some logic, or +💡 If you want to take a variable number of values based on some logic, or another observable, you can use [takeUntil](takeuntil.md) or [takeWhile](takewhile.md)! -:bulb: `take` is the opposite of [`skip`](./skip.md) where `take` will take the +💡 `take` is the opposite of [`skip`](./skip.md) where `take` will take the first _n_ number of emissions while `skip` will skip the first _n_ number of emissions. @@ -108,9 +108,9 @@ const subscribe = oneClickEvent.subscribe(); - [take](https://rxjs.dev/api/operators/take) :newspaper: - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own take operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=take#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index bc63baec..6d46b955 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -6,7 +6,7 @@ --- -:bulb: If you want only the last emission from multiple observables, on +💡 If you want only the last emission from multiple observables, on completion of multiple observables, try [forkJoin](../combination/forkjoin.md)! --- diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 18b76bfe..7482fdd7 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -6,7 +6,7 @@ --- -:bulb: If you only need a specific number of values, try [take](take.md)! +💡 If you only need a specific number of values, try [take](take.md)! --- @@ -122,10 +122,10 @@ mousedown$ * [Avoiding takeUntil leaks](https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef) - Angular in Depth * [Stopping a stream with takeUntil](https://egghead.io/lessons/rxjs-stopping-a-stream-with-takeuntil?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Build your own takeUntil operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=takeUntil#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 4a7c20e6..ff5aa73e 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -6,7 +6,7 @@ --- -:bulb: When the optional `inclusive` parameter is set to `true` it will also +💡 When the optional `inclusive` parameter is set to `true` it will also emit the first item that didn't pass the predicate. --- @@ -105,7 +105,7 @@ source$ - [takeWhile](https://rxjs-dev.firebaseapp.com/api/operators/takeWhile) :newspaper: - Official docs - [Completing a stream with takeWhile](https://egghead.io/lessons/rxjs-completing-a-stream-with-takewhile?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist --- diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 4aa90814..33d9d09f 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -61,7 +61,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [throttle](https://rxjs.dev/api/operators/throttle) :newspaper: - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 798e0c8b..d07cd27d 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -61,7 +61,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [throttleTime](https://rxjs.dev/api/operators/throttleTime) :newspaper: - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/multicasting/README.md b/operators/multicasting/README.md index 3f079d61..64a1f5c4 100644 --- a/operators/multicasting/README.md +++ b/operators/multicasting/README.md @@ -6,18 +6,18 @@ subscribers. ## Contents -* [publish](publish.md) -* [multicast](multicast.md) -* [share](share.md) :star: -* [shareReplay](sharereplay.md) :star: +- [publish](publish.md) +- [multicast](multicast.md) +- [share](share.md) ⭐ +- [shareReplay](sharereplay.md) ⭐ -:star: - _commonly used_ +⭐ - _commonly used_ ### Additional Resources -* [Hot vs Cold Observables](https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339#.8x9uam5rg) +- [Hot vs Cold Observables](https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339#.8x9uam5rg) :newspaper: - Ben Lesh -* [Unicast v Multicast](https://github.com/zenparsing/es-observable/issues/66) +- [Unicast v Multicast](https://github.com/zenparsing/es-observable/issues/66) :newspaper: - GitHub Discussion -* [Demystifying Hot and Cold Observables](https://egghead.io/lessons/rxjs-demystifying-cold-and-hot-observables-in-rxjs) - :video_camera: - André Staltz +- [Demystifying Hot and Cold Observables](https://egghead.io/lessons/rxjs-demystifying-cold-and-hot-observables-in-rxjs) + 🎥 - André Staltz diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 1a205750..beb5c9f1 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -6,7 +6,7 @@ --- -:bulb: share is like [multicast](multicast.md) with a Subject and refCount! +💡 share is like [multicast](multicast.md) with a Subject and refCount! --- @@ -69,7 +69,7 @@ const subscribeFour = sharedExample.subscribe(val => console.log(val)); - [share](https://rxjs.dev/api/operators/share) :newspaper: - Official docs - [Sharing streams with share](https://egghead.io/lessons/rxjs-sharing-streams-with-share?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist --- diff --git a/operators/transformation/README.md b/operators/transformation/README.md index 18502201..63f1fe77 100644 --- a/operators/transformation/README.md +++ b/operators/transformation/README.md @@ -8,23 +8,23 @@ will encounter. - [buffer](buffer.md) - [bufferCount](buffercount.md) -- [bufferTime](buffertime.md) :star: +- [bufferTime](buffertime.md) ⭐ - [bufferToggle](buffertoggle.md) - [bufferWhen](bufferwhen.md) -- [concatMap](concatmap.md) :star: +- [concatMap](concatmap.md) ⭐ - [concatMapTo](concatmapto.md) - [exhaustMap](exhaustmap.md) - [expand](expand.md) - [groupBy](groupby.md) -- [map](map.md) :star: +- [map](map.md) ⭐ - [mapTo](mapto.md) -- [mergeMap / flatMap](mergemap.md) :star: +- [mergeMap / flatMap](mergemap.md) ⭐ - [mergeScan](mergescan.md) - [partition](partition.md) - [pluck](pluck.md) - [reduce](reduce.md) -- [scan](scan.md) :star: -- [switchMap](switchmap.md) :star: +- [scan](scan.md) ⭐ +- [switchMap](switchmap.md) ⭐ - [switchMapTo](switchmapto.md) - [toArray](toarray.md) - [window](window.md) @@ -33,4 +33,4 @@ will encounter. - [windowToggle](windowtoggle.md) - [windowWhen](windowwhen.md) -:star: - _commonly used_ +⭐ - _commonly used_ diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 94bf7508..481ea191 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -69,7 +69,7 @@ const subscribe = myBufferedInterval.subscribe(val => - [buffer](https://rxjs-dev.firebaseapp.com/api/operators/buffer) :newspaper: - Official docs - [Transformation operator: buffer](https://egghead.io/lessons/rxjs-transformation-operator-buffer?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 4590f359..48acb1f7 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -14,7 +14,7 @@ [StackBlitz](https://stackblitz.com/edit/typescript-pkyxa1?file=index.ts&devtoolsheight=100) ) -:bulb: Note the difference between `concatMap` and [`mergeMap`](./mergemap.md). +💡 Note the difference between `concatMap` and [`mergeMap`](./mergemap.md). Because `concatMap` does not subscribe to the next observable until the previous completes, the value from the source delayed by 2000ms will be emitted first. Contrast this with [`mergeMap`](./mergemap.md) which subscribes immediately to @@ -102,9 +102,9 @@ const subscribe = example.subscribe(val => - [concatMap](https://rxjs.dev/api/operators/concatMap) :newspaper: - Official docs - [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own concatMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=concatMap#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index acfc5199..c259be87 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -81,9 +81,9 @@ from(people) - [groupBy](https://rxjs.dev/api/operators/groupBy) :newspaper: - Official docs - [Group higher order observables with RxJS groupBy](https://egghead.io/lessons/rxjs-group-higher-order-observables-with-rxjs-groupby?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Use groupBy in real RxJS applications](https://egghead.io/lessons/rxjs-use-groupby-in-real-rxjs-applications?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/transformation/map.md b/operators/transformation/map.md index f7df0910..9fd660af 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -75,12 +75,12 @@ const subscribe = example.subscribe(val => console.log(val)); - [map](https://rxjs.dev/api/operators/map) :newspaper: - Official docs - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) - :video_camera: - Ben Lesh + 🎥 - Ben Lesh - [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz * [Build your own map operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=map#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 1656e4b5..382c99c7 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -60,9 +60,9 @@ const subscribe = example.subscribe(val => console.log(val)); - [mapTo](https://rxjs.dev/api/operators/mapTo) :newspaper: - Official docs - [Changing behavior with mapTo](https://egghead.io/lessons/rxjs-changing-behavior-with-mapto?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 80082f19..8cef77cc 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -6,12 +6,12 @@ --- -:bulb: flatMap is an alias for mergeMap! +💡 flatMap is an alias for mergeMap! -:bulb: If only one inner subscription should be active at a time, try +💡 If only one inner subscription should be active at a time, try [`switchMap`](switchmap.md)! -:bulb: If the order of emission and subscription of inner observables is +💡 If the order of emission and subscription of inner observables is important, try [`concatMap`](concatmap.md)! --- @@ -217,15 +217,15 @@ source$ - [mergeMap](https://rxjs.dev/api/operators/mergeMap) :newspaper: - Official docs - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) - :video_camera: :dollar: - Ben Lesh + 🎥 💵 - Ben Lesh - [Async requests and responses in RxJS](https://egghead.io/lessons/rxjs-04-reactive-programming-async-requests-and-responses-in-rxjs) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Use RxJS mergeMap to map and merge higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-mergemap-to-map-and-merge-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Use RxJS mergeMap for fine grain custom behavior](https://egghead.io/lessons/rxjs-use-rxjs-mergemap-for-fine-grain-custom-behavior?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own mergeMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=mergeMap#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 1f770948..d78f56fb 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -4,10 +4,10 @@ ## Reduces the values from source observable to a single value that's emitted when the source completes. -:bulb: Just like +💡 Just like [`Array.prototype.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=a) -:bulb: If you need the current accumulated value on each emission, try +💡 If you need the current accumulated value on each emission, try [scan](scan.md)! [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) @@ -37,9 +37,9 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); - [reduce](https://rxjs.dev/api/operators/reduce) :newspaper: - Official docs - [Scan() vs reduce() | RxJS TUTORIAL](https://www.youtube.com/watch?v=myEeo2rZc3g) - :video_camera: - Academind + 🎥 - Academind - [Build your own reduce operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=reduce#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 85a13f63..cdd8560f 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -6,7 +6,7 @@ --- -:bulb: You can create [Redux](http://redux.js.org)-like state management with +💡 You can create [Redux](http://redux.js.org)-like state management with scan! --- @@ -137,13 +137,13 @@ interval(1000) - [scan](https://rxjs.dev/api/operators/scan) :newspaper: - Official docs - [Aggregating streams with reduce and scan using RxJS](https://egghead.io/lessons/rxjs-aggregating-streams-with-reduce-and-scan-using-rxjs) - :video_camera: - Ben Lesh + 🎥 - Ben Lesh - [Updating data with scan](https://egghead.io/lessons/rxjs-updating-data-with-scan?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Transformation operator: scan](https://egghead.io/lessons/rxjs-transformation-operator-scan?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own scan operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=scan#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 3954a02a..c56c9d96 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -6,13 +6,13 @@ --- -:bulb: If you would like more than one inner subscription to be maintained, try +💡 If you would like more than one inner subscription to be maintained, try [`mergeMap`](mergemap.md)! -:bulb: This operator is generally considered a safer default to +💡 This operator is generally considered a safer default to [`mergeMap`](mergemap.md)! -:bulb: This operator can cancel in-flight network requests! +💡 This operator can cancel in-flight network requests! --- @@ -149,13 +149,13 @@ timer(0, 5000) - [Avoiding switchMap-Related Bugs](https://blog.angularindepth.com/switchmap-bugs-b6de69155524) - Nicholas Jamieson - [Starting a stream with switchMap](https://egghead.io/lessons/rxjs-starting-a-stream-with-switchmap?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Use RxJS switchMap to map and flatten higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-switchmap-to-map-and-flatten-higher-order-observables?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Use switchMap as a safe default to flatten observables in RxJS](https://egghead.io/lessons/rxjs-use-switchmap-as-a-safe-default-to-flatten-observables-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own switchMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=switchMap#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index 664e7aa6..e0154986 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -6,7 +6,7 @@ --- -:bulb: If you need to consider the emitted value from the source, try +💡 If you need to consider the emitted value from the source, try [`switchMap`](switchmap.md)! --- diff --git a/operators/transformation/window.md b/operators/transformation/window.md index 30b4d719..5af47bea 100644 --- a/operators/transformation/window.md +++ b/operators/transformation/window.md @@ -44,7 +44,7 @@ const subscribeTwo = example - [window](https://rxjs.dev/api/operators/window) :newspaper: - Official docs - [Split an RxJS observable with window](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-with-window?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index e6a1b715..7626ead5 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -58,7 +58,7 @@ const subscribeTwo = example - [windowToggle](https://rxjs.dev/api/operators/windowToggle) :newspaper: - Official docs - [Split an RxJS observable conditionally with windowToggle](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-conditionally-with-windowtoggle?course=use-higher-order-observables-in-rxjs-effectively) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/utility/README.md b/operators/utility/README.md index f527cd9f..eb7f5444 100644 --- a/operators/utility/README.md +++ b/operators/utility/README.md @@ -5,8 +5,8 @@ provide helpful utilities in your observable toolkit. ## Contents -- [tap / do](do.md) :star: -- [delay](delay.md) :star: +- [tap / do](do.md) ⭐ +- [delay](delay.md) ⭐ - [delayWhen](delaywhen.md) - [dematerialize](dematerialize.md) - [finalize / finally](finalize.md) @@ -18,4 +18,4 @@ provide helpful utilities in your observable toolkit. - [timeoutWith](timeoutwith.md) - [toPromise](topromise.md) -:star: - _commonly used_ +⭐ - _commonly used_ diff --git a/operators/utility/delay.md b/operators/utility/delay.md index dd0c1882..4c0b00cd 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -75,7 +75,7 @@ const subscribe = message.subscribe(val => console.log(val)); - [delay](https://rxjs.dev/api/operators/delay) :newspaper: - Official docs - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index d508a025..3a03d422 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -36,7 +36,7 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); - [delayWhen](https://rxjs.dev/api/operators/delayWhen) :newspaper: - Official docs - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz --- diff --git a/operators/utility/do.md b/operators/utility/do.md index 42a2e097..50ab435e 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -6,7 +6,7 @@ --- -:bulb: If you are using as a pipeable operator, `do` is known as `tap`! +💡 If you are using as a pipeable operator, `do` is known as `tap`! --- @@ -96,11 +96,11 @@ const example = source - [tap](https://rxjs.dev/api/operators/tap) :newspaper: - Official docs - [Logging a stream with do](https://egghead.io/lessons/rxjs-logging-a-stream-with-do?course=step-by-step-async-javascript-with-rxjs) - :video_camera: :dollar: - John Linquist + 🎥 💵 - John Linquist - [Utility operator: do](https://egghead.io/lessons/rxjs-utility-operator-do?course=rxjs-beyond-the-basics-operators-in-depth) - :video_camera: :dollar: - André Staltz + 🎥 💵 - André Staltz - [Build your own tap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=tap#app) - :video_camera: - Kwinten Pisman + 🎥 - Kwinten Pisman --- diff --git a/operators/utility/let.md b/operators/utility/let.md index 15850cbd..797d7c27 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -6,12 +6,12 @@ --- -:warning: `let` is no longer available, or necessary, with pipeable operators! -(RxJS 5.5+) +⚠ `let` is no longer available, or necessary, with pipeable operators! (RxJS +5.5+) --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index ce3a5caf..c8be5a74 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -6,7 +6,7 @@ --- -:bulb: Like [`retry`](../error_handling/retry.md) but for non error cases! +💡 Like [`retry`](../error_handling/retry.md) but for non error cases! --- diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index aac28a29..13ae879f 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -6,7 +6,7 @@ --- -:bulb: If you just want to repeat a specified number of times, try [retry](retry.md)! +💡 If you just want to repeat a specified number of times, try [retry](retry.md)! --- diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 7ec9dafb..6e2a1a4d 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -6,8 +6,7 @@ --- -:warning: `toPromise` is not a pipable operator, as it does not return an -observable. +⚠ `toPromise` is not a pipable operator, as it does not return an observable. --- diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 48dbcb12..2015d064 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -4,7 +4,7 @@ --- -:bulb: If you want the last emitted value(s) on subscription, but do not need to supply a seed value, check out [ReplaySubject](replaysubject.md) instead! +💡 If you want the last emitted value(s) on subscription, but do not need to supply a seed value, check out [ReplaySubject](replaysubject.md) instead! --- From a13efae866159c07cf1c9db29ed6e69be7f60d83 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 17:36:36 -0500 Subject: [PATCH 193/256] fix(readme): update links --- README.md | 90 +++++++++++++++++++++++++++---------------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 1a2c53ee..a1cb9c79 100644 --- a/README.md +++ b/README.md @@ -41,35 +41,35 @@ our [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md)! Operators are the horse-power behind observables, providing an elegant, declarative solution to complex asynchronous tasks. This section contains all -[RxJS operators](learn-rxjs/operators/), included with clear, executable +[RxJS operators](/operators/README.md), included with clear, executable examples. Links to additional resources and recipes for each operator are also provided, when applicable. -**Operator Categories** +##### Operator Categories -- [Combination](learn-rxjs/operators/combination/) -- [Conditional](learn-rxjs/operators/conditional/) -- [Creation](learn-rxjs/operators/creation/) -- [Error Handling](learn-rxjs/operators/error_handling/) -- [Multicasting](learn-rxjs/operators/multicasting/) -- [Filtering](learn-rxjs/operators/filtering/) -- [Transformation](learn-rxjs/operators/transformation/) -- [Utility](learn-rxjs/operators/utility/) +- [Combination](/operators/combination/README.md) +- [Conditional](/operators/conditional/README.md) +- [Creation](/operators/creation/README.md) +- [Error Handling](/operators/error_handling/README.md) +- [Multicasting](/operators/multicasting/README.md) +- [Filtering](/operators/filtering/README.md) +- [Transformation](/operators/transformation/README.md) +- [Utility](/operators/utility/README.md) **OR...** -[Complete listing in alphabetical order](learn-rxjs/operators/complete.md) +[Complete listing in alphabetical order](/operators/complete.md) #### Understanding Subjects A Subject is a special type of Observable which shares a single execution path among observers. -- [Overview](learn-rxjs/subjects/) -- [AsyncSubject](learn-rxjs/subjects/asyncsubject.md) -- [BehaviorSubject](learn-rxjs/subjects/behaviorsubject.md) -- [ReplaySubject](learn-rxjs/subjects/replaysubject.md) -- [Subject](learn-rxjs/subjects/subject.md) +- [Overview](/subjects/README.md) +- [AsyncSubject](/subjects/asyncsubject.md) +- [BehaviorSubject](/subjects/behaviorsubject.md) +- [ReplaySubject](/subjects/replaysubject.md) +- [Subject](/subjects/subject.md) #### Concepts @@ -78,40 +78,40 @@ easy for much of RxJS to feel like 'magic'. This section helps solidify the major concepts needed to feel comfortable with reactive programming and Observables. -- [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md) -- [RxJS v5 -> v6 Upgrade](learn-rxjs/concepts/rxjs5-6.md) -- [Time based operators comparison](learn-rxjs/concepts/time-based-operators-comparison.md) -- [Understanding Operator Imports](learn-rxjs/concepts/operator-imports.md) +- [RxJS Primer](/concepts/rxjs-primer.md) +- [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) +- [Time based operators comparison](/concepts/time-based-operators-comparison.md) +- [Understanding Operator Imports](/concepts/operator-imports.md) #### Recipes Recipes for common use-cases and interesting solutions with RxJS. -- [Alphabet Invasion Game](learn-rxjs/recipes/alphabet-invasion-game.md) -- [Battleship Game](learn-rxjs/recipes/battleship-game.md) -- [Breakout Game](learn-rxjs/recipes/breakout-game.md) -- [Car Racing Game](learn-rxjs/recipes/car-racing-game.md) -- [Catch The Dot Game](learn-rxjs/recipes/catch-the-dot-game.md) -- [Click Ninja Game](learn-rxjs/recipes/click-ninja-game.md) -- [Flappy Bird Game](learn-rxjs/recipes/flappy-bird-game.md) -- [Game Loop](learn-rxjs/recipes/gameloop.md) -- [Horizontal Scroll Indicator](learn-rxjs/recipes/horizontal-scroll-indicator.md) -- [HTTP Polling](learn-rxjs/recipes/http-polling.md) -- [Lockscreen](learn-rxjs/recipes/lockscreen.md) -- [Matrix Digital Rain](learn-rxjs/recipes/matrix-digital-rain.md) -- [Memory Game](learn-rxjs/recipes/memory-game.md) -- [Mine Sweeper Game](learn-rxjs/recipes/mine-sweeper-game.md) -- [Platform Jumper Game](learn-rxjs/recipes/platform-jumper-game.md) -- [Progress Bar](learn-rxjs/recipes/progressbar.md) -- [Save Indicator](learn-rxjs/recipes/save-indicator.md) -- [Smart Counter](learn-rxjs/recipes/smartcounter.md) -- [Stop Watch](learn-rxjs/recipes/stop-watch.md) -- [Space Invaders Game](learn-rxjs/recipes/space-invaders-game.md) -- [Swipe To Refresh](learn-rxjs/recipes/swipe-to-refresh.md) -- [Tank Battle Game](learn-rxjs/recipes/tank-battle-game.md) -- [Tetris Game](learn-rxjs/recipes/tetris-game.md) -- [Type Ahead](learn-rxjs/recipes/type-ahead.md) -- [Uncover Image Game](learn-rxjs/recipes/uncover-image-game.md) +- [Alphabet Invasion Game](/recipes/alphabet-invasion-game.md) +- [Battleship Game](/recipes/battleship-game.md) +- [Breakout Game](/recipes/breakout-game.md) +- [Car Racing Game](/recipes/car-racing-game.md) +- [Catch The Dot Game](/recipes/catch-the-dot-game.md) +- [Click Ninja Game](/recipes/click-ninja-game.md) +- [Flappy Bird Game](/recipes/flappy-bird-game.md) +- [Game Loop](/recipes/gameloop.md) +- [Horizontal Scroll Indicator](/recipes/horizontal-scroll-indicator.md) +- [HTTP Polling](/recipes/http-polling.md) +- [Lockscreen](/recipes/lockscreen.md) +- [Matrix Digital Rain](/recipes/matrix-digital-rain.md) +- [Memory Game](/recipes/memory-game.md) +- [Mine Sweeper Game](/recipes/mine-sweeper-game.md) +- [Platform Jumper Game](/recipes/platform-jumper-game.md) +- [Progress Bar](/recipes/progressbar.md) +- [Save Indicator](/recipes/save-indicator.md) +- [Smart Counter](/recipes/smartcounter.md) +- [Stop Watch](/recipes/stop-watch.md) +- [Space Invaders Game](/recipes/space-invaders-game.md) +- [Swipe To Refresh](/recipes/swipe-to-refresh.md) +- [Tank Battle Game](/recipes/tank-battle-game.md) +- [Tetris Game](/recipes/tetris-game.md) +- [Type Ahead](/recipes/type-ahead.md) +- [Uncover Image Game](/recipes/uncover-image-game.md) ## Introductory Resources From f0e065c9c7643f11f748d97abf92a80a93a413d2 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 18:04:09 -0500 Subject: [PATCH 194/256] style(banner): update image with banner --- operators/combination/endwith.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 93215abe..9f9883b6 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -14,7 +14,9 @@ value, check out [`finalize`](../utility/finalize.md)! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) + + Ultimate RxJS + ### Examples @@ -85,8 +87,7 @@ source$ ### Additional Resources -- [endWith](https://rxjs.dev/api/operators/endWith) - :newspaper: - Official docs +- [endWith](https://rxjs.dev/api/operators/endWith) :newspaper: - Official docs --- From 3c1d0312d4f0f4404865b0c8603ae317400f3126 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 23:13:17 +0000 Subject: [PATCH 195/256] GitBook: [master] 3 pages modified --- SUMMARY.md | 2 +- .../operators}/utility/dematerialize.md | 18 +++++++----------- 2 files changed, 8 insertions(+), 12 deletions(-) rename {operators => learn-rxjs/operators}/utility/dematerialize.md (50%) diff --git a/SUMMARY.md b/SUMMARY.md index 634c354c..b94e95c1 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -101,7 +101,7 @@ * [tap / do](operators/utility/do.md) * [delay](operators/utility/delay.md) * [delayWhen](operators/utility/delaywhen.md) - * [dematerialize](operators/utility/dematerialize.md) + * [dematerialize](learn-rxjs/operators/utility/dematerialize.md) * [finalize / finally](operators/utility/finalize.md) * [let](operators/utility/let.md) * [repeat](operators/utility/repeat.md) diff --git a/operators/utility/dematerialize.md b/learn-rxjs/operators/utility/dematerialize.md similarity index 50% rename from operators/utility/dematerialize.md rename to learn-rxjs/operators/utility/dematerialize.md index 04ca0337..7664f21c 100644 --- a/operators/utility/dematerialize.md +++ b/learn-rxjs/operators/utility/dematerialize.md @@ -4,18 +4,15 @@ ## Turn notification objects into notification values. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX) ### Examples -##### Example 1: Converting notifications to values +**Example 1: Converting notifications to values** -( -[StackBlitz](https://stackblitz.com/edit/typescript-bxdwbg?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/vafedocibi/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/jw08mouy/) ) +\( [StackBlitz](https://stackblitz.com/edit/typescript-bxdwbg?file=index.ts&devtoolsheight=100) \| [jsBin](http://jsbin.com/vafedocibi/1/edit?js,console) \| [jsFiddle](https://jsfiddle.net/btroncone/jw08mouy/) \) -```js +```javascript // RxJS v6+ import { from, Notification } from 'rxjs'; import { dematerialize } from 'rxjs/operators'; @@ -38,10 +35,9 @@ const subscription = source.subscribe({ ### Additional Resources -- [dematerialize](https://rxjs.dev/api/operators/dematerialize) +* [dematerialize](https://rxjs.dev/api/operators/dematerialize) + :newspaper: - Official docs ---- +> :file\_folder: Source Code: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/demterialize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/dematerialize.ts) -> :file_folder: Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/demterialize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/dematerialize.ts) From a395b6202c4b985e760736a3dc96103b5495d427 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 18:27:15 -0500 Subject: [PATCH 196/256] chore(operators): update docs image --- SUMMARY.md | 287 +++++++++--------- learn-rxjs/operators/utility/dematerialize.md | 15 +- operators/README.md | 2 +- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/complete.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/generate.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/of.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/audit.md | 2 +- operators/filtering/audittime.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinct.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- .../filtering/distinctuntilkeychanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/README.md | 4 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertime.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/mergescan.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/window.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/do.md | 2 +- operators/utility/finalize.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/repeatwhen.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/timeoutwith.md | 2 +- operators/utility/topromise.md | 2 +- subjects/README.md | 6 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 106 files changed, 259 insertions(+), 257 deletions(-) diff --git a/SUMMARY.md b/SUMMARY.md index b94e95c1..5e151e2f 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -1,149 +1,148 @@ # Table of contents -* [Introduction](README.md) +- [Introduction](README.md) ## Learn RxJS -* [Operators](operators/README.md) - * [Combination](operators/combination/README.md) - * [combineAll](operators/combination/combineall.md) - * [combineLatest](operators/combination/combinelatest.md) - * [concat](operators/combination/concat.md) - * [concatAll](operators/combination/concatall.md) - * [endWith](operators/combination/endwith.md) - * [forkJoin](operators/combination/forkjoin.md) - * [merge](operators/combination/merge.md) - * [mergeAll](operators/combination/mergeall.md) - * [pairwise](operators/combination/pairwise.md) - * [race](operators/combination/race.md) - * [startWith](operators/combination/startwith.md) - * [withLatestFrom](operators/combination/withlatestfrom.md) - * [zip](operators/combination/zip.md) - * [Conditional](operators/conditional/README.md) - * [defaultIfEmpty](operators/conditional/defaultifempty.md) - * [every](operators/conditional/every.md) - * [iif](operators/conditional/iif.md) - * [sequenceEqual](operators/conditional/sequenceequal.md) - * [Creation](operators/creation/README.md) - * [ajax](operators/creation/ajax.md) - * [create](operators/creation/create.md) - * [defer](operators/creation/defer.md) - * [empty](operators/creation/empty.md) - * [from](operators/creation/from.md) - * [fromEvent](operators/creation/fromevent.md) - * [generate](operators/creation/generate.md) - * [interval](operators/creation/interval.md) - * [of](operators/creation/of.md) - * [range](operators/creation/range.md) - * [throw](operators/creation/throw.md) - * [timer](operators/creation/timer.md) - * [Error Handling](operators/error_handling/README.md) - * [catch / catchError](operators/error_handling/catch.md) - * [retry](operators/error_handling/retry.md) - * [retryWhen](operators/error_handling/retrywhen.md) - * [Multicasting](operators/multicasting/README.md) - * [publish](operators/multicasting/publish.md) - * [multicast](operators/multicasting/multicast.md) - * [share](operators/multicasting/share.md) - * [shareReplay](operators/multicasting/sharereplay.md) - * [Filtering](operators/filtering/README.md) - * [audit](operators/filtering/audit.md) - * [auditTime](operators/filtering/audittime.md) - * [debounce](operators/filtering/debounce.md) - * [debounceTime](operators/filtering/debouncetime.md) - * [distinct](operators/filtering/distinct.md) - * [distinctUntilChanged](operators/filtering/distinctuntilchanged.md) - * [distinctUntilKeyChanged](operators/filtering/distinctuntilkeychanged.md) - * [filter](operators/filtering/filter.md) - * [find](operators/filtering/find.md) - * [first](operators/filtering/first.md) - * [ignoreElements](operators/filtering/ignoreelements.md) - * [last](operators/filtering/last.md) - * [sample](operators/filtering/sample.md) - * [single](operators/filtering/single.md) - * [skip](operators/filtering/skip.md) - * [skipUntil](operators/filtering/skipuntil.md) - * [skipWhile](operators/filtering/skipwhile.md) - * [take](operators/filtering/take.md) - * [takeLast](operators/filtering/takelast.md) - * [takeUntil](operators/filtering/takeuntil.md) - * [takeWhile](operators/filtering/takewhile.md) - * [throttle](operators/filtering/throttle.md) - * [throttleTime](operators/filtering/throttletime.md) - * [Transformation](operators/transformation/README.md) - * [buffer](operators/transformation/buffer.md) - * [bufferCount](operators/transformation/buffercount.md) - * [bufferTime](operators/transformation/buffertime.md) - * [bufferToggle](operators/transformation/buffertoggle.md) - * [bufferWhen](operators/transformation/bufferwhen.md) - * [concatMap](operators/transformation/concatmap.md) - * [concatMapTo](operators/transformation/concatmapto.md) - * [exhaustMap](operators/transformation/exhaustmap.md) - * [expand](operators/transformation/expand.md) - * [groupBy](operators/transformation/groupby.md) - * [map](operators/transformation/map.md) - * [mapTo](operators/transformation/mapto.md) - * [mergeMap / flatMap](operators/transformation/mergemap.md) - * [mergeScan](operators/transformation/mergescan.md) - * [partition](operators/transformation/partition.md) - * [pluck](operators/transformation/pluck.md) - * [reduce](operators/transformation/reduce.md) - * [scan](operators/transformation/scan.md) - * [switchMap](operators/transformation/switchmap.md) - * [switchMapTo](operators/transformation/switchmapto.md) - * [toArray](operators/transformation/toarray.md) - * [window](operators/transformation/window.md) - * [windowCount](operators/transformation/windowcount.md) - * [windowTime](operators/transformation/windowtime.md) - * [windowToggle](operators/transformation/windowtoggle.md) - * [windowWhen](operators/transformation/windowwhen.md) - * [Utility](operators/utility/README.md) - * [tap / do](operators/utility/do.md) - * [delay](operators/utility/delay.md) - * [delayWhen](operators/utility/delaywhen.md) - * [dematerialize](learn-rxjs/operators/utility/dematerialize.md) - * [finalize / finally](operators/utility/finalize.md) - * [let](operators/utility/let.md) - * [repeat](operators/utility/repeat.md) - * [timeInterval](operators/utility/timeinterval.md) - * [timeout](operators/utility/timeout.md) - * [timeoutWith](operators/utility/timeoutwith.md) - * [toPromise](operators/utility/topromise.md) - * [Full Listing](operators/complete.md) -* [Subjects](subjects/README.md) - * [AsyncSubject](subjects/asyncsubject.md) - * [BehaviorSubject](subjects/behaviorsubject.md) - * [ReplaySubject](subjects/replaysubject.md) - * [Subject](subjects/subject.md) -* [Recipes](recipes/README.md) - * [Alphabet Invasion Game](recipes/alphabet-invasion-game.md) - * [Battleship Game](recipes/battleship-game.md) - * [Breakout Game](recipes/breakout-game.md) - * [Car Racing Game](recipes/car-racing-game.md) - * [Catch The Dot Game](recipes/catch-the-dot-game.md) - * [Click Ninja Game](recipes/click-ninja-game.md) - * [Flappy Bird Game](recipes/flappy-bird-game.md) - * [Game Loop](recipes/gameloop.md) - * [Horizontal Scroll Indicator](recipes/horizontal-scroll-indicator.md) - * [Http Polling](recipes/http-polling.md) - * [Lockscreen](recipes/lockscreen.md) - * [Matrix Digital Rain](recipes/matrix-digital-rain.md) - * [Memory Game](recipes/memory-game.md) - * [Mine Sweeper Game](recipes/mine-sweeper-game.md) - * [Platform Jumper Game](recipes/platform-jumper-game.md) - * [Progress Bar](recipes/progressbar.md) - * [Save Indicator](recipes/save-indicator.md) - * [Smart Counter](recipes/smartcounter.md) - * [Space Invaders Game](recipes/space-invaders-game.md) - * [Stop Watch](recipes/stop-watch.md) - * [Swipe To Refresh](recipes/swipe-to-refresh.md) - * [Tank Battle Game](recipes/tank-battle-game.md) - * [Tetris Game](recipes/tetris-game.md) - * [Type Ahead](recipes/type-ahead.md) - * [Uncover Image Game](recipes/uncover-image-game.md) -* [Concepts](concepts/README.md) - * [RxJS Primer](concepts/rxjs-primer.md) - * [RxJS v5 -> v6 Upgrade](concepts/rxjs5-6.md) - * [Time based operators comparison](concepts/time-based-operators-comparison.md) - * [Understanding Operator Imports](concepts/operator-imports.md) - +- [Operators](operators/README.md) + - [Combination](operators/combination/README.md) + - [combineAll](operators/combination/combineall.md) + - [combineLatest](operators/combination/combinelatest.md) + - [concat](operators/combination/concat.md) + - [concatAll](operators/combination/concatall.md) + - [endWith](operators/combination/endwith.md) + - [forkJoin](operators/combination/forkjoin.md) + - [merge](operators/combination/merge.md) + - [mergeAll](operators/combination/mergeall.md) + - [pairwise](operators/combination/pairwise.md) + - [race](operators/combination/race.md) + - [startWith](operators/combination/startwith.md) + - [withLatestFrom](operators/combination/withlatestfrom.md) + - [zip](operators/combination/zip.md) + - [Conditional](operators/conditional/README.md) + - [defaultIfEmpty](operators/conditional/defaultifempty.md) + - [every](operators/conditional/every.md) + - [iif](operators/conditional/iif.md) + - [sequenceEqual](operators/conditional/sequenceequal.md) + - [Creation](operators/creation/README.md) + - [ajax](operators/creation/ajax.md) + - [create](operators/creation/create.md) + - [defer](operators/creation/defer.md) + - [empty](operators/creation/empty.md) + - [from](operators/creation/from.md) + - [fromEvent](operators/creation/fromevent.md) + - [generate](operators/creation/generate.md) + - [interval](operators/creation/interval.md) + - [of](operators/creation/of.md) + - [range](operators/creation/range.md) + - [throw](operators/creation/throw.md) + - [timer](operators/creation/timer.md) + - [Error Handling](operators/error_handling/README.md) + - [catch / catchError](operators/error_handling/catch.md) + - [retry](operators/error_handling/retry.md) + - [retryWhen](operators/error_handling/retrywhen.md) + - [Multicasting](operators/multicasting/README.md) + - [publish](operators/multicasting/publish.md) + - [multicast](operators/multicasting/multicast.md) + - [share](operators/multicasting/share.md) + - [shareReplay](operators/multicasting/sharereplay.md) + - [Filtering](operators/filtering/README.md) + - [audit](operators/filtering/audit.md) + - [auditTime](operators/filtering/audittime.md) + - [debounce](operators/filtering/debounce.md) + - [debounceTime](operators/filtering/debouncetime.md) + - [distinct](operators/filtering/distinct.md) + - [distinctUntilChanged](operators/filtering/distinctuntilchanged.md) + - [distinctUntilKeyChanged](operators/filtering/distinctuntilkeychanged.md) + - [filter](operators/filtering/filter.md) + - [find](operators/filtering/find.md) + - [first](operators/filtering/first.md) + - [ignoreElements](operators/filtering/ignoreelements.md) + - [last](operators/filtering/last.md) + - [sample](operators/filtering/sample.md) + - [single](operators/filtering/single.md) + - [skip](operators/filtering/skip.md) + - [skipUntil](operators/filtering/skipuntil.md) + - [skipWhile](operators/filtering/skipwhile.md) + - [take](operators/filtering/take.md) + - [takeLast](operators/filtering/takelast.md) + - [takeUntil](operators/filtering/takeuntil.md) + - [takeWhile](operators/filtering/takewhile.md) + - [throttle](operators/filtering/throttle.md) + - [throttleTime](operators/filtering/throttletime.md) + - [Transformation](operators/transformation/README.md) + - [buffer](operators/transformation/buffer.md) + - [bufferCount](operators/transformation/buffercount.md) + - [bufferTime](operators/transformation/buffertime.md) + - [bufferToggle](operators/transformation/buffertoggle.md) + - [bufferWhen](operators/transformation/bufferwhen.md) + - [concatMap](operators/transformation/concatmap.md) + - [concatMapTo](operators/transformation/concatmapto.md) + - [exhaustMap](operators/transformation/exhaustmap.md) + - [expand](operators/transformation/expand.md) + - [groupBy](operators/transformation/groupby.md) + - [map](operators/transformation/map.md) + - [mapTo](operators/transformation/mapto.md) + - [mergeMap / flatMap](operators/transformation/mergemap.md) + - [mergeScan](operators/transformation/mergescan.md) + - [partition](operators/transformation/partition.md) + - [pluck](operators/transformation/pluck.md) + - [reduce](operators/transformation/reduce.md) + - [scan](operators/transformation/scan.md) + - [switchMap](operators/transformation/switchmap.md) + - [switchMapTo](operators/transformation/switchmapto.md) + - [toArray](operators/transformation/toarray.md) + - [window](operators/transformation/window.md) + - [windowCount](operators/transformation/windowcount.md) + - [windowTime](operators/transformation/windowtime.md) + - [windowToggle](operators/transformation/windowtoggle.md) + - [windowWhen](operators/transformation/windowwhen.md) + - [Utility](operators/utility/README.md) + - [tap / do](operators/utility/do.md) + - [delay](operators/utility/delay.md) + - [delayWhen](operators/utility/delaywhen.md) + - [dematerialize](operators/utility/dematerialize.md) + - [finalize / finally](operators/utility/finalize.md) + - [let](operators/utility/let.md) + - [repeat](operators/utility/repeat.md) + - [timeInterval](operators/utility/timeinterval.md) + - [timeout](operators/utility/timeout.md) + - [timeoutWith](operators/utility/timeoutwith.md) + - [toPromise](operators/utility/topromise.md) + - [Full Listing](operators/complete.md) +- [Subjects](subjects/README.md) + - [AsyncSubject](subjects/asyncsubject.md) + - [BehaviorSubject](subjects/behaviorsubject.md) + - [ReplaySubject](subjects/replaysubject.md) + - [Subject](subjects/subject.md) +- [Recipes](recipes/README.md) + - [Alphabet Invasion Game](recipes/alphabet-invasion-game.md) + - [Battleship Game](recipes/battleship-game.md) + - [Breakout Game](recipes/breakout-game.md) + - [Car Racing Game](recipes/car-racing-game.md) + - [Catch The Dot Game](recipes/catch-the-dot-game.md) + - [Click Ninja Game](recipes/click-ninja-game.md) + - [Flappy Bird Game](recipes/flappy-bird-game.md) + - [Game Loop](recipes/gameloop.md) + - [Horizontal Scroll Indicator](recipes/horizontal-scroll-indicator.md) + - [Http Polling](recipes/http-polling.md) + - [Lockscreen](recipes/lockscreen.md) + - [Matrix Digital Rain](recipes/matrix-digital-rain.md) + - [Memory Game](recipes/memory-game.md) + - [Mine Sweeper Game](recipes/mine-sweeper-game.md) + - [Platform Jumper Game](recipes/platform-jumper-game.md) + - [Progress Bar](recipes/progressbar.md) + - [Save Indicator](recipes/save-indicator.md) + - [Smart Counter](recipes/smartcounter.md) + - [Space Invaders Game](recipes/space-invaders-game.md) + - [Stop Watch](recipes/stop-watch.md) + - [Swipe To Refresh](recipes/swipe-to-refresh.md) + - [Tank Battle Game](recipes/tank-battle-game.md) + - [Tetris Game](recipes/tetris-game.md) + - [Type Ahead](recipes/type-ahead.md) + - [Uncover Image Game](recipes/uncover-image-game.md) +- [Concepts](concepts/README.md) + - [RxJS Primer](concepts/rxjs-primer.md) + - [RxJS v5 -> v6 Upgrade](concepts/rxjs5-6.md) + - [Time based operators comparison](concepts/time-based-operators-comparison.md) + - [Understanding Operator Imports](concepts/operator-imports.md) diff --git a/learn-rxjs/operators/utility/dematerialize.md b/learn-rxjs/operators/utility/dematerialize.md index 7664f21c..336ca0da 100644 --- a/learn-rxjs/operators/utility/dematerialize.md +++ b/learn-rxjs/operators/utility/dematerialize.md @@ -4,13 +4,16 @@ ## Turn notification objects into notification values. -![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX) +[Ultimate RxJS](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples **Example 1: Converting notifications to values** -\( [StackBlitz](https://stackblitz.com/edit/typescript-bxdwbg?file=index.ts&devtoolsheight=100) \| [jsBin](http://jsbin.com/vafedocibi/1/edit?js,console) \| [jsFiddle](https://jsfiddle.net/btroncone/jw08mouy/) \) +( +[StackBlitz](https://stackblitz.com/edit/typescript-bxdwbg?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/vafedocibi/1/edit?js,console) | +[jsFiddle](https://jsfiddle.net/btroncone/jw08mouy/) ) ```javascript // RxJS v6+ @@ -35,9 +38,9 @@ const subscription = source.subscribe({ ### Additional Resources -* [dematerialize](https://rxjs.dev/api/operators/dematerialize) +- [dematerialize](https://rxjs.dev/api/operators/dematerialize) - :newspaper: - Official docs - -> :file\_folder: Source Code: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/demterialize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/dematerialize.ts) + 📰 - Official docs +> :file_folder: Source Code: +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/demterialize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/dematerialize.ts) diff --git a/operators/README.md b/operators/README.md index f292b564..6375382f 100644 --- a/operators/README.md +++ b/operators/README.md @@ -118,6 +118,6 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ ### Additional Resources - [What Are Operators?](http://reactivex.io/rxjs/manual/overview.html#operators) - :newspaper: - Official Docs + 📰 - Official Docs - [What Operators Are](https://egghead.io/lessons/rxjs-what-rxjs-operators-are) 🎥 💵 - André Staltz diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 4785cf46..6feca986 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -57,7 +57,7 @@ example$ ### Additional Resources -- [combineAll](https://rxjs.dev/api/operators/combineAll) :newspaper: - Official +- [combineAll](https://rxjs.dev/api/operators/combineAll) 📰 - Official docs --- diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 9241c5c0..cf4a411c 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -156,7 +156,7 @@ combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe( ### Additional Resources - [combineLatest](https://rxjs.dev/api/index/function/combineLatest) - :newspaper: - Official docs + 📰 - Official docs - [Combining streams with combineLatest](https://egghead.io/lessons/rxjs-combining-streams-with-combinelatest?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Combination operator: combineLatest](https://egghead.io/lessons/rxjs-combination-operator-combinelatest?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index ee5c4586..a60dc492 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -93,7 +93,7 @@ concat(interval(1000), of('This', 'Never', 'Runs')) ### Additional Resources -- [concat](https://rxjs.dev/api/index/function/concat) :newspaper: - Official +- [concat](https://rxjs.dev/api/index/function/concat) 📰 - Official docs - [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index b2f24739..71365757 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -114,7 +114,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [concatAll](https://rxjs.dev/api/operators/concatAll) :newspaper: - Official +- [concatAll](https://rxjs.dev/api/operators/concatAll) 📰 - Official docs - [Flatten a higher order observable with concatAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-concatall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 9f9883b6..2ce62ab7 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -87,7 +87,7 @@ source$ ### Additional Resources -- [endWith](https://rxjs.dev/api/operators/endWith) :newspaper: - Official docs +- [endWith](https://rxjs.dev/api/operators/endWith) 📰 - Official docs --- diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 54046f1f..9fb0a6fb 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -243,7 +243,7 @@ export class App { ### Additional Resources -- [forkJoin](https://rxjs.dev/api/index/function/forkJoin) :newspaper: - +- [forkJoin](https://rxjs.dev/api/index/function/forkJoin) 📰 - Official docs --- diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 6f39aa1a..a23e511f 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -83,7 +83,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [merge](https://rxjs.dev/api/index/function/merge) - :newspaper: - Official docs + 📰 - Official docs - [Handling multiple streams with merge](https://egghead.io/lessons/rxjs-handling-multiple-streams-with-merge?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Sharing network requests with merge](https://egghead.io/lessons/rxjs-reactive-programming-sharing-network-requests-with-rxjs-merge?course=introduction-to-reactive-programming) diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 2eff0489..c32aae70 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -90,7 +90,7 @@ const example = source ### Additional Resources - [mergeAll](https://rxjs.dev/api/operators/mergeAll) - :newspaper: - Official docs + 📰 - Official docs - [Flatten a higher order observable with mergeAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-mergeall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 867cef35..1a0db681 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -32,7 +32,7 @@ interval(1000) ### Additional Resources - [pairwise](https://rxjs.dev/api/operators/pairwise) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/combination/race.md b/operators/combination/race.md index bb6c8a87..28b69e45 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -63,7 +63,7 @@ race(first, second, third).subscribe(val => console.log(val)); ### Additional Resources - [race](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-race) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index bfd50b92..f4047bc9 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -105,7 +105,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [startWith](https://rxjs.dev/api/operators/startWith) - :newspaper: - Official docs + 📰 - Official docs - [Displaying initial data with startWith](https://egghead.io/lessons/rxjs-displaying-initial-data-with-startwith?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Clear data while loading with startWith](https://egghead.io/lessons/rxjs-reactive-programming-clear-data-while-loading-with-rxjs-startwith?course=introduction-to-reactive-programming) diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index b34fe7f8..ab576cbf 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -89,7 +89,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [withLatestFrom](https://rxjs.dev/api/operators/withLatestFrom) - :newspaper: - Official docs + 📰 - Official docs - [Combination operator: withLatestFrom](https://egghead.io/lessons/rxjs-combination-operator-withlatestfrom?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 6380b72f..caac7d48 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -109,7 +109,7 @@ mouseClickDuration.subscribe(console.log); ### Additional Resources - [zip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip) - :newspaper: - Official docs + 📰 - Official docs - [Combination operator: zip](https://egghead.io/lessons/rxjs-combination-operator-zip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/complete.md b/operators/complete.md index cb1cef04..abc74bb6 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -107,6 +107,6 @@ _[Prefer a split by operator type?](README.md)_ ### Additional Resources - [What Are Operators?](http://reactivex.io/rxjs/manual/overview.html#operators) - :newspaper: - Official Docs + 📰 - Official Docs - [What Operators Are](https://egghead.io/lessons/rxjs-what-rxjs-operators-are) 🎥 💵 - André Staltz diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 951347d5..44a2bdbb 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -47,7 +47,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [defaultIfEmpty](https://rxjs.dev/api/operators/defaultIfEmpty) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/conditional/every.md b/operators/conditional/every.md index ecdb6f7e..a9a66714 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -87,7 +87,7 @@ apiCalls$.subscribe(); ### Additional Resources - [every](https://rxjs.dev/api/operators/every) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 70f33e5d..ee967a5d 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -84,7 +84,7 @@ interval(1000) ### Additional Resources -- [iif](https://rxjs.dev/api/operators/iif) :newspaper: - +- [iif](https://rxjs.dev/api/operators/iif) 📰 - Official docs --- diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 18000d54..d77580d4 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -65,7 +65,7 @@ fromEvent(document, 'keydown') ### Additional Resources - [sequenceEqual](https://rxjs.dev/api/operators/sequenceEqual) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index a187ff6c..c1d824a8 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -159,7 +159,7 @@ const subscribe = users.subscribe( ### Additional Resources -- [ajax](https://rxjs.dev/api/ajax/ajax) :newspaper: - Official docs +- [ajax](https://rxjs.dev/api/ajax/ajax) 📰 - Official docs --- diff --git a/operators/creation/create.md b/operators/creation/create.md index 4f54561e..1e33a0ea 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -68,7 +68,7 @@ setTimeout(() => { ### Additional Resources - [create](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-create) - :newspaper: - Official docs + 📰 - Official docs - [Creation operators: Create()](https://egghead.io/lessons/rxjs-creation-operator-create?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz - [Using Observable.create for fine-grained control](https://egghead.io/lessons/rxjs-using-observable-create-for-fine-grained-control) diff --git a/operators/creation/defer.md b/operators/creation/defer.md index 7c9fe7ed..c92bc0e7 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -58,7 +58,7 @@ setTimeout(() => { ### Additional Resources - [defer](https://rxjs.dev/api/index/function/defer) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/creation/empty.md b/operators/creation/empty.md index b38fce9f..89b5a814 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -65,7 +65,7 @@ const timer$ = merge(pause$, resume$) ### Additional Resources - [empty](https://rxjs.dev/api/index/function/empty) - :newspaper: - Official docs + 📰 - Official docs - [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz diff --git a/operators/creation/from.md b/operators/creation/from.md index fe336af2..9aa5223f 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -102,7 +102,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources - [from](https://rxjs.dev/api/index/function/from) - :newspaper: - Official docs + 📰 - Official docs - [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index c949ae19..9e284628 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -58,7 +58,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [fromEvent](https://rxjs.dev/api/index/function/fromEvent) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/creation/generate.md b/operators/creation/generate.md index 139fc7e2..be0f26c1 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -68,7 +68,7 @@ OUTPUT: ### Additional Resources - [generate](https://rxjs.dev/api/index/function/generate) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/creation/interval.md b/operators/creation/interval.md index aa92f941..d6e9b6ee 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -45,7 +45,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources - [interval](https://rxjs.dev/api/index/function/interval) - :newspaper: - Official docs + 📰 - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz - [Build your own interval operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=interval#app) diff --git a/operators/creation/of.md b/operators/creation/of.md index 9a8bc7ad..54964355 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -55,7 +55,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources - [of](https://rxjs.dev/api/index/function/of) - :newspaper: - Official docs + 📰 - Official docs - [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz - [Build your own of operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=of#app) diff --git a/operators/creation/range.md b/operators/creation/range.md index d34c3dad..5319786d 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -28,7 +28,7 @@ const example = source.subscribe(val => console.log(val)); ### Additional Resources - [range](https://rxjs.dev/api/index/function/range) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 7d62be62..899b4940 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -36,7 +36,7 @@ const subscribe = source.subscribe({ ### Additional Resources - [throw](https://rxjs.dev/api/index/function/throw) - :newspaper: - Official docs + 📰 - Official docs - [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz diff --git a/operators/creation/timer.md b/operators/creation/timer.md index ad702d03..923fec6a 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -53,7 +53,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources - [timer](https://rxjs.dev/api/index/function/timer) - :newspaper: - Official docs + 📰 - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz - [Build your own timer operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=timer#app) diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 8cbe2519..ed4c18c8 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -108,7 +108,7 @@ iWillStopListening$.subscribe(console.log); ### Additional Resources -- [catchError](https://rxjs.dev/api/operators/catchError) :newspaper: - Official +- [catchError](https://rxjs.dev/api/operators/catchError) 📰 - Official docs - [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index c618cea4..2a248dec 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -60,7 +60,7 @@ const subscribe = example.subscribe({ ### Additional Resources - [retry](https://rxjs.dev/api/operators/retry) - :newspaper: - Official docs + 📰 - Official docs - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index bf241031..1956109d 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -140,7 +140,7 @@ export class AppComponent implements OnInit { ### Additional Resources - [retryWhen](https://rxjs.dev/api/operators/retryWhen) - :newspaper: - Official docs + 📰 - Official docs - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/audit.md b/operators/filtering/audit.md index eab6a3f9..a87db7eb 100644 --- a/operators/filtering/audit.md +++ b/operators/filtering/audit.md @@ -9,7 +9,7 @@ ### Additional Resources * [audit](https://rxjs.dev/api/operators/audit) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index 2423932b..c2b42427 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -35,7 +35,7 @@ const subscribe = example.subscribe(val => console.log('Clicked')); ### Additional Resources * [auditTime](https://rxjs.dev/api/operators/auditTime) - :newspaper: - Official docs + 📰 - Official docs * [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 2fffeece..78a7f16d 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -70,7 +70,7 @@ const subscribe = debouncedInterval.subscribe(val => ### Additional Resources - [debounce](https://rxjs.dev/api/operators/debounce) - :newspaper: - Official docs + 📰 - Official docs - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index fa6d15ee..ba33e75a 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -48,7 +48,7 @@ keyup$ ### Additional Resources -- [debounceTime](https://rxjs.dev/api/operators/debounceTime) :newspaper: - +- [debounceTime](https://rxjs.dev/api/operators/debounceTime) 📰 - Official docs - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/distinct.md b/operators/filtering/distinct.md index dacc5679..512f9dcb 100644 --- a/operators/filtering/distinct.md +++ b/operators/filtering/distinct.md @@ -54,7 +54,7 @@ OUTPUT: ### Additional Resources -- [distinct](https://rxjs.dev/api/operators/distinct) :newspaper: - Official +- [distinct](https://rxjs.dev/api/operators/distinct) 📰 - Official docs --- diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index a2d347c5..01c30a1d 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -96,7 +96,7 @@ source$ ### Additional Resources - [distinctUntilChanged](https://rxjs.dev/api/operators/distinctUntilChanged) - :newspaper: - Official docs + 📰 - Official docs - [Filtering operator: distinct and distinctUntilChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-and-distinctuntilchanged?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index 0395a666..1740b679 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -57,7 +57,7 @@ keys$.subscribe(console.log); ### Additional Resources - [distinctUntilKeyChanged](https://rxjs.dev/api/operators/distinctUntilKeyChanged) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index f0bbc9d1..cb2151ed 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -94,7 +94,7 @@ const subscribe = example.subscribe(val => ### Additional Resources - [filter](https://rxjs.dev/api/operators/filter) - :newspaper: - Official docs + 📰 - Official docs - [Adding conditional logic with filter](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/filtering/find.md b/operators/filtering/find.md index b0e34e06..759e36ce 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -45,7 +45,7 @@ clicks$ ### Additional Resources -- [find](https://rxjs.dev/api/operators/find) :newspaper: - Official docs +- [find](https://rxjs.dev/api/operators/find) 📰 - Official docs --- diff --git a/operators/filtering/first.md b/operators/filtering/first.md index fec69c2b..8e98b3eb 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -82,7 +82,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [first](https://rxjs.dev/api/operators/first) - :newspaper: - Official docs + 📰 - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 2fba8ad0..c31cddbf 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -70,7 +70,7 @@ const subscribe = error.subscribe( ### Additional Resources - [ignoreElements](https://rxjs.dev/api/operators/ignoreElements) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/filtering/last.md b/operators/filtering/last.md index 94d82691..f8029716 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -76,7 +76,7 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ### Additional Resources - [last](https://rxjs.dev/api/operators/last) - :newspaper: - Official docs + 📰 - Official docs - [Filtering operator: takeLast, last](https://egghead.io/lessons/rxjs-filtering-operators-takelast-last?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index d257803a..2a6c81ff 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -80,7 +80,7 @@ const listener = merge( ### Additional Resources - [sample](https://rxjs.dev/api/operators/sample) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 26f0e1eb..b4bf1419 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -31,7 +31,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [single](https://rxjs.dev/api/operators/single) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index 7b474de0..21323280 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -68,7 +68,7 @@ const filterObs = numArrayObs ### Additional Resources - [skip](https://rxjs.dev/api/operators/skip) - :newspaper: - Official docs + 📰 - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 7e0a972b..91f1534d 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -31,7 +31,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [skipUntil](https://rxjs.dev/api/operators/skipUntil) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 5bdb8b91..bc7ec689 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -31,7 +31,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [skipWhile](https://rxjs.dev/api/operators/skipWhile) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 104e6999..26117c07 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -106,7 +106,7 @@ const subscribe = oneClickEvent.subscribe(); ### Additional Resources - [take](https://rxjs.dev/api/operators/take) - :newspaper: - Official docs + 📰 - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Build your own take operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=take#app) diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index 6d46b955..e958ca0b 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -36,7 +36,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [takeLast](https://rxjs-dev.firebaseapp.com/api/operators/takeLast) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 7482fdd7..e2437191 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -117,7 +117,7 @@ mousedown$ ### Additional Resources - [takeUntil](https://rxjs.dev/api/operators/takeUntil) - :newspaper: - Official docs + 📰 - Official docs * [Avoiding takeUntil leaks](https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef) - Angular in Depth diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index ff5aa73e..83b3c344 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -103,7 +103,7 @@ source$ ### Additional Resources - [takeWhile](https://rxjs-dev.firebaseapp.com/api/operators/takeWhile) - :newspaper: - Official docs + 📰 - Official docs - [Completing a stream with takeWhile](https://egghead.io/lessons/rxjs-completing-a-stream-with-takewhile?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 33d9d09f..8ce4b48a 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -59,7 +59,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [throttle](https://rxjs.dev/api/operators/throttle) - :newspaper: - Official docs + 📰 - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index d07cd27d..1445d21c 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -59,7 +59,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [throttleTime](https://rxjs.dev/api/operators/throttleTime) - :newspaper: - Official docs + 📰 - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) diff --git a/operators/multicasting/README.md b/operators/multicasting/README.md index 64a1f5c4..9bdb2ae8 100644 --- a/operators/multicasting/README.md +++ b/operators/multicasting/README.md @@ -16,8 +16,8 @@ subscribers. ### Additional Resources - [Hot vs Cold Observables](https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339#.8x9uam5rg) - :newspaper: - Ben Lesh + 📰 - Ben Lesh - [Unicast v Multicast](https://github.com/zenparsing/es-observable/issues/66) - :newspaper: - GitHub Discussion + 📰 - GitHub Discussion - [Demystifying Hot and Cold Observables](https://egghead.io/lessons/rxjs-demystifying-cold-and-hot-observables-in-rxjs) 🎥 - André Staltz diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 084d53a9..28a1bd12 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -83,7 +83,7 @@ setTimeout(() => { ### Additional Resources - [multicast](https://rxjs.dev/api/operators/multicast) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 919f22b7..2dcd3b69 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -55,7 +55,7 @@ setTimeout(() => { ### Additional Resources - [publish](https://rxjs.dev/api/operators/publish) - :newspaper: - Official docs + 📰 - Official docs > :file_folder: Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/publish.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/publish.ts) diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index beb5c9f1..fc89fe4f 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -67,7 +67,7 @@ const subscribeFour = sharedExample.subscribe(val => console.log(val)); ### Additional Resources - [share](https://rxjs.dev/api/operators/share) - :newspaper: - Official docs + 📰 - Official docs - [Sharing streams with share](https://egghead.io/lessons/rxjs-sharing-streams-with-share?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 13e08f9f..ee273779 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -169,7 +169,7 @@ const lateSubscriber = lastUrl.subscribe(console.log); ### Additional Resources - [shareReplay](https://rxjs.dev/api/operators/shareReplay) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 481ea191..73161c44 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -66,7 +66,7 @@ const subscribe = myBufferedInterval.subscribe(val => ### Additional Resources -- [buffer](https://rxjs-dev.firebaseapp.com/api/operators/buffer) :newspaper: - +- [buffer](https://rxjs-dev.firebaseapp.com/api/operators/buffer) 📰 - Official docs - [Transformation operator: buffer](https://egghead.io/lessons/rxjs-transformation-operator-buffer?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index d9112a9c..f08c9360 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -100,7 +100,7 @@ fromEvent(document, 'keydown') ### Additional Resources - [bufferCount](https://rxjs.dev/api/operators/bufferCount) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index edba2977..9f798731 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -54,7 +54,7 @@ const subscribe = example.subscribe(val => ### Additional Resources * [bufferTime](https://rxjs.dev/api/operators/bufferTime) - :newspaper: - Official docs + 📰 - Official docs * [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 90be8193..913d5c1c 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -62,7 +62,7 @@ fromEvent(document, 'mousemove') ### Additional Resources - [bufferToggle](https://rxjs.dev/api/operators/bufferToggle) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 15230a19..61e4ffeb 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -38,7 +38,7 @@ const subscribe = bufferWhenExample.subscribe(val => ### Additional Resources - [bufferWhen](https://rxjs.dev/api/operators/bufferWhen) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 48acb1f7..4ca35da7 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -100,7 +100,7 @@ const subscribe = example.subscribe(val => ### Additional Resources - [concatMap](https://rxjs.dev/api/operators/concatMap) - :newspaper: - Official docs + 📰 - Official docs - [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz - [Build your own concatMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=concatMap#app) diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 7e348412..39b9bd19 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -73,7 +73,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [concatMapTo](https://rxjs.dev/api/operators/concatMapTo) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 4a139f8c..49e6126a 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -124,7 +124,7 @@ const exhaustSub = firstInterval ### Additional Resources - [exhaustMap](https://rxjs.dev/api/operators/exhaustMap) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 0625f452..de1c4d2a 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -56,7 +56,7 @@ const subscribe = example.subscribe(val => console.log(`RESULT: ${val}`)); ### Additional Resources - [expand](https://rxjs.dev/api/operators/expand) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index c259be87..495fa918 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -79,7 +79,7 @@ from(people) ### Additional Resources - [groupBy](https://rxjs.dev/api/operators/groupBy) - :newspaper: - Official docs + 📰 - Official docs - [Group higher order observables with RxJS groupBy](https://egghead.io/lessons/rxjs-group-higher-order-observables-with-rxjs-groupby?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz - [Use groupBy in real RxJS applications](https://egghead.io/lessons/rxjs-use-groupby-in-real-rxjs-applications?course=use-higher-order-observables-in-rxjs-effectively) diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 9fd660af..49c1e18f 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -73,7 +73,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [map](https://rxjs.dev/api/operators/map) - :newspaper: - Official docs + 📰 - Official docs - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 - Ben Lesh - [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 382c99c7..24d6c17d 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -58,7 +58,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [mapTo](https://rxjs.dev/api/operators/mapTo) - :newspaper: - Official docs + 📰 - Official docs - [Changing behavior with mapTo](https://egghead.io/lessons/rxjs-changing-behavior-with-mapto?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 8cef77cc..f974a6d3 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -214,7 +214,7 @@ source$ ### Additional Resources -- [mergeMap](https://rxjs.dev/api/operators/mergeMap) :newspaper: - Official +- [mergeMap](https://rxjs.dev/api/operators/mergeMap) 📰 - Official docs - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 💵 - Ben Lesh diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index a424aa59..48090e2e 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -44,7 +44,7 @@ mouseDown$ ### Additional Resources - [pluck](https://rxjs-dev.firebaseapp.com/api/operators/mergeScan) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index 68013cdf..43e33703 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -118,7 +118,7 @@ const subscribe = merge( ### Additional Resources - [partition](https://rxjs.dev/api/operators/partition) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 35486d96..21b392c9 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -64,7 +64,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [pluck](https://rxjs.dev/api/operators/pluck) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index d78f56fb..59022efc 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -35,7 +35,7 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); ### Additional Resources - [reduce](https://rxjs.dev/api/operators/reduce) - :newspaper: - Official docs + 📰 - Official docs - [Scan() vs reduce() | RxJS TUTORIAL](https://www.youtube.com/watch?v=myEeo2rZc3g) 🎥 - Academind - [Build your own reduce operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=reduce#app) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index cdd8560f..cb2b2268 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -135,7 +135,7 @@ interval(1000) ### Additional Resources - [scan](https://rxjs.dev/api/operators/scan) - :newspaper: - Official docs + 📰 - Official docs - [Aggregating streams with reduce and scan using RxJS](https://egghead.io/lessons/rxjs-aggregating-streams-with-reduce-and-scan-using-rxjs) 🎥 - Ben Lesh - [Updating data with scan](https://egghead.io/lessons/rxjs-updating-data-with-scan?course=step-by-step-async-javascript-with-rxjs) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index c56c9d96..6ccac2b5 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -145,7 +145,7 @@ timer(0, 5000) ### Additional Resources - [switchMap](https://rxjs.dev/api/operators/switchMap) - :newspaper: - Official docs + 📰 - Official docs - [Avoiding switchMap-Related Bugs](https://blog.angularindepth.com/switchmap-bugs-b6de69155524) - Nicholas Jamieson - [Starting a stream with switchMap](https://egghead.io/lessons/rxjs-starting-a-stream-with-switchmap?course=step-by-step-async-javascript-with-rxjs) diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index e0154986..06276ed2 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -54,7 +54,7 @@ click$ ### Additional Resources - [switchMapTo](https://rxjs.dev/api/operators/switchMapTo) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index ea3bbe52..bdf32924 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -37,7 +37,7 @@ interval(100) ### Additional Resources - [toArray](https://rxjs.dev/api/operators/toArray) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/window.md b/operators/transformation/window.md index 5af47bea..675f827a 100644 --- a/operators/transformation/window.md +++ b/operators/transformation/window.md @@ -42,7 +42,7 @@ const subscribeTwo = example ### Additional Resources - [window](https://rxjs.dev/api/operators/window) - :newspaper: - Official docs + 📰 - Official docs - [Split an RxJS observable with window](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-with-window?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index ef37abeb..ec39d52f 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -52,7 +52,7 @@ const subscribeTwo = example ### Additional Resources - [windowCount](https://rxjs.dev/api/operators/windowCount) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 5da04caa..631ea146 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -50,7 +50,7 @@ const subscribeTwo = example ### Additional Resources - [windowTime](https://rxjs.dev/api/operators/windowTime) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 7626ead5..fcdc7dfa 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -56,7 +56,7 @@ const subscribeTwo = example ### Additional Resources - [windowToggle](https://rxjs.dev/api/operators/windowToggle) - :newspaper: - Official docs + 📰 - Official docs - [Split an RxJS observable conditionally with windowToggle](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-conditionally-with-windowtoggle?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index c942f61f..10ca5db5 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -54,7 +54,7 @@ const subscribeTwo = example ### Additional Resources - [windowWhen](https://rxjs.dev/api/operators/windowWhen) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 4c0b00cd..ac8363f2 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -73,7 +73,7 @@ const subscribe = message.subscribe(val => console.log(val)); ### Additional Resources -- [delay](https://rxjs.dev/api/operators/delay) :newspaper: - Official docs +- [delay](https://rxjs.dev/api/operators/delay) 📰 - Official docs - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 3a03d422..cdc1be5a 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -34,7 +34,7 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); ### Additional Resources - [delayWhen](https://rxjs.dev/api/operators/delayWhen) - :newspaper: - Official docs + 📰 - Official docs - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/utility/do.md b/operators/utility/do.md index 50ab435e..cc94f836 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -94,7 +94,7 @@ const example = source ### Additional Resources -- [tap](https://rxjs.dev/api/operators/tap) :newspaper: - Official docs +- [tap](https://rxjs.dev/api/operators/tap) 📰 - Official docs - [Logging a stream with do](https://egghead.io/lessons/rxjs-logging-a-stream-with-do?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Utility operator: do](https://egghead.io/lessons/rxjs-utility-operator-do?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/utility/finalize.md b/operators/utility/finalize.md index 3e560c8d..16889979 100644 --- a/operators/utility/finalize.md +++ b/operators/utility/finalize.md @@ -37,7 +37,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources * [finalize](https://rxjs.dev/api/operators/finalize) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/utility/let.md b/operators/utility/let.md index 797d7c27..0135d155 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -117,7 +117,7 @@ const subscribe = obsArrayPlusYourOperators(addTenThenTwenty) ### Additional Resources - [let](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index c8be5a74..e75b9a7a 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -43,7 +43,7 @@ delayedThing ### Additional Resources - [repeat](https://rxjs.dev/api/operators/repeat) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index 13ae879f..ae1d69ed 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -45,7 +45,7 @@ hey! ### Additional Resources - [repeatWhen](https://rxjs.dev/api/operators/repeatWhen) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 1af58d19..11dc9269 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -37,7 +37,7 @@ fromEvent(document, 'mousedown') ### Additional Resources - [timeInterval](https://rxjs.dev/api/operators/timeInterval) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 071e6079..87e33839 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -45,7 +45,7 @@ of(4000, 3000, 2000) ### Additional Resources - [timeout](https://rxjs.dev/api/operators/timeout) - :newspaper: - Official Docs + 📰 - Official Docs --- diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index 6aedb892..192653f3 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -42,7 +42,7 @@ of(timeoutThreshold + 1, timeoutThreshold - 1, timeoutThreshold + 3) ### Additional Resources - [timeoutWith](https://rxjs-dev.firebaseapp.com/api/operators/timeoutWith) - :newspaper: - Official Docs + 📰 - Official Docs --- diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 6e2a1a4d..08ed8ce0 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -58,7 +58,7 @@ example().then(val => { ### Additional Resources - [toPromise](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/topromise.md) - :newspaper: - Official Docs + 📰 - Official Docs --- diff --git a/subjects/README.md b/subjects/README.md index aca51bb8..4a545734 100644 --- a/subjects/README.md +++ b/subjects/README.md @@ -117,8 +117,8 @@ NEXT(s) ### Additional Resources * [Official Overview](http://reactivex.io/rxjs/manual/overview.html#subject) - :newspaper: + 📰 * [Official Documentation](http://reactivex.io/documentation/subject.html) - :newspaper: + 📰 * [On The Subject Of Subjects (in RxJS)](https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93) - :newspaper: - Ben Lesh + 📰 - Ben Lesh diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index 2b8d980a..a122bd3c 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -31,7 +31,7 @@ sub.complete(); //456, 456 logged by both subscribers ### Additional Resources - [AsyncSubject](https://rxjs-dev.firebaseapp.com/api/index/class/AsyncSubject) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 2015d064..dc1d9c2f 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -99,7 +99,7 @@ merge(click$, interval$).subscribe(); ### Additional Resources - [BehaviorSubject](https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index c74b95d5..8f4534b2 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -30,7 +30,7 @@ sub.next(5); // OUTPUT => 5,5 (log from both subscribers) ### Additional Resources - [ReplaySubject](https://rxjs-dev.firebaseapp.com/api/index/class/ReplaySubject) - :newspaper: - Official docs + 📰 - Official docs --- diff --git a/subjects/subject.md b/subjects/subject.md index dd8e5de2..036cdcd0 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -37,7 +37,7 @@ sub.next(3); // OUTPUT => Subscriber A 3, Subscriber B 3 (logged from both subsc ### Additional Resources - [Subject](https://rxjs-dev.firebaseapp.com/api/index/class/Subject) - :newspaper: - Official docs + 📰 - Official docs --- From 42d8fe37f637b27c8f4c08200c7be403632fd4a8 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 18:30:30 -0500 Subject: [PATCH 197/256] chore(operators): update dematerialize path --- {learn-rxjs/operators => operators}/utility/dematerialize.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {learn-rxjs/operators => operators}/utility/dematerialize.md (100%) diff --git a/learn-rxjs/operators/utility/dematerialize.md b/operators/utility/dematerialize.md similarity index 100% rename from learn-rxjs/operators/utility/dematerialize.md rename to operators/utility/dematerialize.md From f9be41425ca07a5c48ef81a35b894dcab280ee20 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 18:34:22 -0500 Subject: [PATCH 198/256] chore(dematerialize): update image --- operators/utility/delaywhen.md | 5 ++--- operators/utility/dematerialize.md | 7 +++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index cdc1be5a..735c0126 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -33,8 +33,7 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); ### Additional Resources -- [delayWhen](https://rxjs.dev/api/operators/delayWhen) - 📰 - Official docs +- [delayWhen](https://rxjs.dev/api/operators/delayWhen) 📰 - Official docs - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index 336ca0da..a52754c6 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,7 @@ ## Turn notification objects into notification values. -[Ultimate RxJS](https://ultimatecourses.com/courses/rxjs?ref=4) +[Ultimate RxJS](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -38,9 +38,8 @@ const subscription = source.subscribe({ ### Additional Resources -- [dematerialize](https://rxjs.dev/api/operators/dematerialize) - - 📰 - Official docs +- [dematerialize](https://rxjs.dev/api/operators/dematerialize) 📰 - Official + docs > :file_folder: Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/demterialize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/dematerialize.ts) From 8a29d890d84d71aeacb65f61b00793996aa9112f Mon Sep 17 00:00:00 2001 From: Jerome De Leon <32805276+JeromeDeLeon@users.noreply.github.com> Date: Sun, 19 Jan 2020 11:29:34 +0800 Subject: [PATCH 199/256] fix(read me): fix broken link for RxJS Primer (#252) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a1cb9c79..1a52b988 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ points. Learning Rx may be difficult but it is certainly worth the effort! ### Brand New to RxJS? Start getting familiar with all the key concepts needed to be productive with -our [RxJS Primer](learn-rxjs/concepts/rxjs-primer.md)! +our [RxJS Primer](/concepts/rxjs-primer.md)! ## Content From 42b22513160ffb15074e4c595020ca98852ce8d5 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 22:49:35 -0500 Subject: [PATCH 200/256] chore(operators): update source code icon --- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/generate.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/of.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/audit.md | 2 +- operators/filtering/audittime.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinct.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- operators/filtering/distinctuntilkeychanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertime.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/mergescan.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/window.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/finalize.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/repeatwhen.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/timeoutwith.md | 2 +- operators/utility/topromise.md | 2 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 101 files changed, 101 insertions(+), 101 deletions(-) diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 6feca986..97af5924 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -62,5 +62,5 @@ example$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineAll.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineAll.ts) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index cf4a411c..7c7a4abc 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -166,5 +166,5 @@ combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe( --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineLatest.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineLatest.ts) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index a60dc492..4f785433 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -100,5 +100,5 @@ concat(interval(1000), of('This', 'Never', 'Runs')) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concat.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concat.ts) diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 71365757..f6d5775c 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -121,5 +121,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatAll.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatAll.ts) diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 2ce62ab7..05235acc 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -91,5 +91,5 @@ source$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/endWith.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/endWith.ts) diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 9fb0a6fb..80e19c13 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -248,5 +248,5 @@ export class App { --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/observable/ForkJoinObservable.ts](https://github.com/ReactiveX/rxjs/blob/master/src/observable/ForkJoinObservable.ts) diff --git a/operators/combination/merge.md b/operators/combination/merge.md index a23e511f..07dfa7b2 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -95,5 +95,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/merge.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/merge.ts) diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index c32aae70..fafda524 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -96,5 +96,5 @@ const example = source --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeAll.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeAll.ts) diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 1a0db681..2c1a2aff 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -36,5 +36,5 @@ interval(1000) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/pairwise.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/pairwise.ts) diff --git a/operators/combination/race.md b/operators/combination/race.md index 28b69e45..8eda4e8e 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -67,5 +67,5 @@ race(first, second, third).subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/race.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/race.ts) diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index f4047bc9..c73d6652 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -115,5 +115,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/startWith.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/startWith.ts) diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index ab576cbf..60c24273 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -95,5 +95,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/withLatestFrom.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/withLatestFrom.ts) diff --git a/operators/combination/zip.md b/operators/combination/zip.md index caac7d48..2134c187 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -115,5 +115,5 @@ mouseClickDuration.subscribe(console.log); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/zip.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/zip.ts) diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 44a2bdbb..7eb54186 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -51,5 +51,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/defaultIfEmpty.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/defaultIfEmpty.ts) diff --git a/operators/conditional/every.md b/operators/conditional/every.md index a9a66714..6ebf23f1 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -91,5 +91,5 @@ apiCalls$.subscribe(); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/every.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/every.ts) diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index ee967a5d..87547461 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -89,5 +89,5 @@ interval(1000) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/iif.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/iif.ts) diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index d77580d4..a0045517 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -69,5 +69,5 @@ fromEvent(document, 'keydown') --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sequenceEqual.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sequenceEqual.ts) diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index c1d824a8..5245c640 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -163,5 +163,5 @@ const subscribe = users.subscribe( --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/6.4.0/src/internal/observable/dom/ajax.ts#L20-L19](https://github.com/ReactiveX/rxjs/blob/6.4.0/src/internal/observable/dom/ajax.ts#L20-L19) diff --git a/operators/creation/create.md b/operators/creation/create.md index 1e33a0ea..809c69f6 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -76,5 +76,5 @@ setTimeout(() => { --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/GenerateObservable.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/GenerateObservable.ts) diff --git a/operators/creation/defer.md b/operators/creation/defer.md index c92bc0e7..be0c78aa 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -62,5 +62,5 @@ setTimeout(() => { --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/defer.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/defer.ts) diff --git a/operators/creation/empty.md b/operators/creation/empty.md index 89b5a814..1db77a24 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -71,5 +71,5 @@ const timer$ = merge(pause$, resume$) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/EmptyObservable.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/EmptyObservable.ts) diff --git a/operators/creation/from.md b/operators/creation/from.md index 9aa5223f..465956e8 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -108,5 +108,5 @@ const subscribe = source.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/from.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/from.ts) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 9e284628..8746c0c0 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -62,5 +62,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/fromEvent.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/fromEvent.ts) diff --git a/operators/creation/generate.md b/operators/creation/generate.md index be0f26c1..c5b8c6e7 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -72,5 +72,5 @@ OUTPUT: --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/generate.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/generate.ts) diff --git a/operators/creation/interval.md b/operators/creation/interval.md index d6e9b6ee..af69d479 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -53,5 +53,5 @@ const subscribe = source.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/interval.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/interval.ts) diff --git a/operators/creation/of.md b/operators/creation/of.md index 54964355..b7cf612f 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -63,5 +63,5 @@ const subscribe = source.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/of.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/of.ts) diff --git a/operators/creation/range.md b/operators/creation/range.md index 5319786d..7ede7a78 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -32,5 +32,5 @@ const example = source.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/range.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/range.ts) diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 899b4940..14196e04 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -42,5 +42,5 @@ const subscribe = source.subscribe({ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts) diff --git a/operators/creation/timer.md b/operators/creation/timer.md index 923fec6a..98e8ef21 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -61,5 +61,5 @@ const subscribe = source.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/timer.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/timer.ts) diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index ed4c18c8..b44d756e 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -115,5 +115,5 @@ iWillStopListening$.subscribe(console.log); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/catchError.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/catchError.ts) diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 2a248dec..f8e8e0c3 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -66,5 +66,5 @@ const subscribe = example.subscribe({ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retry.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retry.ts) diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 1956109d..0355efde 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -146,5 +146,5 @@ export class AppComponent implements OnInit { --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retryWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retryWhen.ts) diff --git a/operators/filtering/audit.md b/operators/filtering/audit.md index a87db7eb..c5121090 100644 --- a/operators/filtering/audit.md +++ b/operators/filtering/audit.md @@ -13,5 +13,5 @@ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/audit.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/audit.ts) diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index c2b42427..8e15ce65 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -40,5 +40,5 @@ const subscribe = example.subscribe(val => console.log('Clicked')); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/auditTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/auditTime.ts) diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 78a7f16d..baef501f 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -76,5 +76,5 @@ const subscribe = debouncedInterval.subscribe(val => --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounce.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounce.ts) diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index ba33e75a..9be0d106 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -58,5 +58,5 @@ keyup$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounceTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounceTime.ts) diff --git a/operators/filtering/distinct.md b/operators/filtering/distinct.md index 512f9dcb..1fa1f31c 100644 --- a/operators/filtering/distinct.md +++ b/operators/filtering/distinct.md @@ -59,5 +59,5 @@ OUTPUT: --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinct.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinct.ts) diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 01c30a1d..f6814653 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -102,5 +102,5 @@ source$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilChanged.ts) diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index 1740b679..4bdf3604 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -61,5 +61,5 @@ keys$.subscribe(console.log); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilKeyChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilKeyChanged.ts) diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index cb2151ed..7485f66e 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -104,5 +104,5 @@ const subscribe = example.subscribe(val => --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/filter.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/filter.ts) diff --git a/operators/filtering/find.md b/operators/filtering/find.md index 759e36ce..c6c56dce 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -49,5 +49,5 @@ clicks$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/find.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/find.ts) diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 8e98b3eb..45d57634 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -88,5 +88,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/first.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/first.ts) diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index c31cddbf..7631b060 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -74,5 +74,5 @@ const subscribe = error.subscribe( --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/ignoreElements.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/ignoreElements.ts) diff --git a/operators/filtering/last.md b/operators/filtering/last.md index f8029716..fd660818 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -82,5 +82,5 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/last.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/last.ts) diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 2a6c81ff..5303046f 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -84,5 +84,5 @@ const listener = merge( --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sample.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sample.ts) diff --git a/operators/filtering/single.md b/operators/filtering/single.md index b4bf1419..f3ffe23c 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -35,5 +35,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/single.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/single.ts) diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index 21323280..de9ee0ee 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -74,5 +74,5 @@ const filterObs = numArrayObs --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skip.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skip.ts) diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 91f1534d..7f4f68c3 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -35,5 +35,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipUntil.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipUntil.ts) diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index bc7ec689..f220fac1 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -35,5 +35,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipWhile.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipWhile.ts) diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 26117c07..459e87d1 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -114,5 +114,5 @@ const subscribe = oneClickEvent.subscribe(); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/take.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/take.ts) diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index e958ca0b..eb00347e 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -40,5 +40,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeLast.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeLast.ts) diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index e2437191..427a4934 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -129,5 +129,5 @@ mousedown$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeUntil.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeUntil.ts) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 83b3c344..3d7d614b 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -109,5 +109,5 @@ source$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeWhile.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeWhile.ts) diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 8ce4b48a..5f944be2 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -65,5 +65,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/throttle.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/throttle.ts) diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 1445d21c..3c3345fc 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -66,5 +66,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/throttleTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/throttleTime.ts) diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 28a1bd12..14faacb2 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -87,5 +87,5 @@ setTimeout(() => { --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/multicast.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/multicast.ts) diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 2dcd3b69..8f1fe400 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -57,5 +57,5 @@ setTimeout(() => { - [publish](https://rxjs.dev/api/operators/publish) 📰 - Official docs -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/publish.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/publish.ts) diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index fc89fe4f..eda93c49 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -73,5 +73,5 @@ const subscribeFour = sharedExample.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/share.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/share.ts) diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index ee273779..022074d0 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -173,5 +173,5 @@ const lateSubscriber = lastUrl.subscribe(console.log); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/shareReplay.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/shareReplay.ts) diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 73161c44..da74018b 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -73,5 +73,5 @@ const subscribe = myBufferedInterval.subscribe(val => --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/buffer.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/buffer.ts) diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index f08c9360..82982789 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -104,5 +104,5 @@ fromEvent(document, 'keydown') --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferCount.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferCount.ts) diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index 9f798731..606adee5 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -59,5 +59,5 @@ const subscribe = example.subscribe(val => --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferTime.ts) diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 913d5c1c..ef33b50f 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -66,5 +66,5 @@ fromEvent(document, 'mousemove') --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferToggle.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferToggle.ts) diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 61e4ffeb..3e8a1cb6 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -42,5 +42,5 @@ const subscribe = bufferWhenExample.subscribe(val => --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferWhen.ts) diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 4ca35da7..259b029d 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -108,5 +108,5 @@ const subscribe = example.subscribe(val => --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMap.ts) diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 39b9bd19..1ca83ecb 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -77,5 +77,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMapTo.ts) diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 49e6126a..9efaceea 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -128,5 +128,5 @@ const exhaustSub = firstInterval --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/exhaustMap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/exhaustMap.ts) diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index de1c4d2a..3ff7cb6a 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -60,5 +60,5 @@ const subscribe = example.subscribe(val => console.log(`RESULT: ${val}`)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/expand.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/expand.ts) diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index 495fa918..b93fb190 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -87,5 +87,5 @@ from(people) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/groupBy.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/groupBy.ts) diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 49c1e18f..70a3a100 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -84,5 +84,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/map.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/map.ts) diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 24d6c17d..cc0d1703 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -66,5 +66,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mapTo.ts) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index f974a6d3..c5f604ba 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -229,5 +229,5 @@ source$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeMap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeMap.ts) diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index 48090e2e..25b4aa93 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -48,5 +48,5 @@ mouseDown$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeScan.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeScan.ts) diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index 43e33703..d4519997 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -122,5 +122,5 @@ const subscribe = merge( --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/partition.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/partition.ts) diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 21b392c9..a0c4abaa 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -68,5 +68,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/pluck.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/pluck.ts) diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 59022efc..f22ffd3b 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -43,5 +43,5 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/reduce.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/reduce.ts) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index cb2b2268..2bb99834 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -147,5 +147,5 @@ interval(1000) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/scan.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/scan.ts) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 6ccac2b5..051adde9 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -159,5 +159,5 @@ timer(0, 5000) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMap.ts) diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index 06276ed2..bc0fbf0f 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -58,5 +58,5 @@ click$ --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMapTo.ts) diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index bdf32924..2fcb9919 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -41,5 +41,5 @@ interval(100) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toArray.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toArray.ts) diff --git a/operators/transformation/window.md b/operators/transformation/window.md index 675f827a..914499bf 100644 --- a/operators/transformation/window.md +++ b/operators/transformation/window.md @@ -48,5 +48,5 @@ const subscribeTwo = example --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/window.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/window.ts) diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index ec39d52f..22009a32 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -56,5 +56,5 @@ const subscribeTwo = example --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowCount.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowCount.ts) diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 631ea146..9a18db79 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -54,5 +54,5 @@ const subscribeTwo = example --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowTime.ts) diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index fcdc7dfa..6fe05614 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -62,5 +62,5 @@ const subscribeTwo = example --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowToggle.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowToggle.ts) diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 10ca5db5..42efdfde 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -58,5 +58,5 @@ const subscribeTwo = example --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowWhen.ts) diff --git a/operators/utility/delay.md b/operators/utility/delay.md index ac8363f2..622ee4ba 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -79,5 +79,5 @@ const subscribe = message.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/delay.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/delay.ts) diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 735c0126..a9ec46f7 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -39,5 +39,5 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/delayWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/delayWhen.ts) diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index a52754c6..d3fbd3d3 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -41,5 +41,5 @@ const subscription = source.subscribe({ - [dematerialize](https://rxjs.dev/api/operators/dematerialize) 📰 - Official docs -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/demterialize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/dematerialize.ts) diff --git a/operators/utility/do.md b/operators/utility/do.md index cc94f836..07e24b15 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -104,5 +104,5 @@ const example = source --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/do.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/do.ts) diff --git a/operators/utility/finalize.md b/operators/utility/finalize.md index 16889979..910ae9b5 100644 --- a/operators/utility/finalize.md +++ b/operators/utility/finalize.md @@ -41,5 +41,5 @@ const subscribe = example.subscribe(val => console.log(val)); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/finalize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/finalize.ts) diff --git a/operators/utility/let.md b/operators/utility/let.md index 0135d155..269e0cff 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -121,5 +121,5 @@ const subscribe = obsArrayPlusYourOperators(addTenThenTwenty) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/let.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/let.ts) diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index e75b9a7a..2be3c9e6 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -47,5 +47,5 @@ delayedThing --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/repeat.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/repeat.ts) diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index ae1d69ed..aa41c4c4 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -49,5 +49,5 @@ hey! --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/6.5.2/src/internal/operators/repeatWhen.ts](https://github.com/ReactiveX/rxjs/blob/6.5.2/src/internal/operators/repeatWhen.ts) diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 11dc9269..6e7b5334 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -41,5 +41,5 @@ fromEvent(document, 'mousedown') --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeInterval.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeInterval.ts) diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 87e33839..39415fac 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -49,5 +49,5 @@ of(4000, 3000, 2000) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeout.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeout.ts) diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index 192653f3..b3609b2a 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -46,5 +46,5 @@ of(timeoutThreshold + 1, timeoutThreshold - 1, timeoutThreshold + 3) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeoutWith.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeoutWith.ts) diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 08ed8ce0..51fa02a5 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -62,5 +62,5 @@ example().then(val => { --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toPromise.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toPromise.ts) diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index a122bd3c..7c513423 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -35,5 +35,5 @@ sub.complete(); //456, 456 logged by both subscribers --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/AsyncSubject.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/AsyncSubject.ts) diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index dc1d9c2f..ea110035 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -103,5 +103,5 @@ merge(click$, interval$).subscribe(); --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/BehaviorSubject.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/BehaviorSubject.ts) diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 8f4534b2..a8a4a41c 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -34,5 +34,5 @@ sub.next(5); // OUTPUT => 5,5 (log from both subscribers) --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/ReplaySubject.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/ReplaySubject.ts) diff --git a/subjects/subject.md b/subjects/subject.md index 036cdcd0..e0e15d7c 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -41,5 +41,5 @@ sub.next(3); // OUTPUT => Subscriber A 3, Subscriber B 3 (logged from both subsc --- -> :file_folder: Source Code: +> 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subject.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subject.ts) From 3e17ee5898f638879b6724ccea827de5ef22b5ed Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Sat, 18 Jan 2020 22:59:09 -0500 Subject: [PATCH 201/256] chore(operators): test new banner --- operators/utility/dematerialize.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index d3fbd3d3..efe7ae4e 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -4,7 +4,11 @@ ## Turn notification objects into notification values. -[Ultimate RxJS](https://ultimatecourses.com/courses/rxjs?ref=4) +[![UltimateRxJS][uc-image]][uc-url] + +[uc-image]: + https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX +[uc-url]: https://ultimatecourses.com/courses/rxjs?ref=4 ### Examples From f3c4d23f019390c6f3d14395d3448880e7a97b75 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 21 Jan 2020 09:52:17 -0500 Subject: [PATCH 202/256] feat(concepts): add transformation article (#253) * feat(concepts): add transformation article * style(concepts): add tip to transformation article --- README.md | 4 +- SUMMARY.md | 4 +- concepts/README.md | 4 +- concepts/get-started-transforming.md | 408 +++++++++++++++++++++++++++ concepts/operator-imports.md | 126 --------- operators/transformation/README.md | 7 + 6 files changed, 421 insertions(+), 132 deletions(-) create mode 100644 concepts/get-started-transforming.md delete mode 100644 concepts/operator-imports.md diff --git a/README.md b/README.md index 1a52b988..2e1726ef 100644 --- a/README.md +++ b/README.md @@ -79,9 +79,9 @@ major concepts needed to feel comfortable with reactive programming and Observables. - [RxJS Primer](/concepts/rxjs-primer.md) -- [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) +- [Get started transforming streams with map, pluck, and mapTo](/concepts/get-started-transforming.md) - [Time based operators comparison](/concepts/time-based-operators-comparison.md) -- [Understanding Operator Imports](/concepts/operator-imports.md) +- [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) #### Recipes diff --git a/SUMMARY.md b/SUMMARY.md index 5e151e2f..a03aaa9d 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -143,6 +143,6 @@ - [Uncover Image Game](recipes/uncover-image-game.md) - [Concepts](concepts/README.md) - [RxJS Primer](concepts/rxjs-primer.md) - - [RxJS v5 -> v6 Upgrade](concepts/rxjs5-6.md) + - [Get started transforming streams with map, pluck, and mapTo](concepts/get-started-transforming.md) - [Time based operators comparison](concepts/time-based-operators-comparison.md) - - [Understanding Operator Imports](concepts/operator-imports.md) + - [RxJS v5 -> v6 Upgrade](concepts/rxjs5-6.md) diff --git a/concepts/README.md b/concepts/README.md index 5dfd3ac7..c20fa471 100644 --- a/concepts/README.md +++ b/concepts/README.md @@ -5,6 +5,6 @@ Short explanations of common RxJS scenarios and use-cases. ### Contents - [RxJS Primer](rxjs-primer.md) -- [RxJS v5 -> v6 Upgrade](rxjs5-6.md) +- [Get started transforming streams with map, pluck, and mapTo](get-started-transforming.md) - [Time Based Operator Comparison](time-based-operator-comparison.md) -- [Understanding Operator Imports](operator-imports.md) +- [RxJS v5 -> v6 Upgrade](rxjs5-6.md) diff --git a/concepts/get-started-transforming.md b/concepts/get-started-transforming.md new file mode 100644 index 00000000..7ec6bf3d --- /dev/null +++ b/concepts/get-started-transforming.md @@ -0,0 +1,408 @@ +# Get started transforming streams with map, pluck, and mapTo + +When working with observables one of the most common use cases you will +encounter is the need to transform a stream of some value type into a stream of +another value type. For instance, you may have an observable of click events +that you wish to transform into an observable of objects containing just the +`clientX` and `clientY` coordinates. Or maybe you need to extract a value from a +stream of input events to perform a calculation or initiate a request. Or +perhaps you just want to extract a single property from an object, like a key +code, to perform another action down the (pipe)line. The scenarios for +transforming streams are endless. + +In this article, we are going to learn about the most common operator used to +transform streams, the `map` operator. We will start by taking a look at +`Array.map` to build a general understanding of the `map` operation. Next, we +will explore how we can apply this approach to observables by using the RxJS +`map` operator. Finally, we will check out a few helper operators that can be +used in place of `map` should the right scenario present itself, exploring +common use cases along the way. Let's get started! + +## Introducing `map` + +If you have spent time working with JavaScript arrays you may already be +familiar with `Array.map`. When dealing with arrays, the `map` method lets you +transform an array by applying a provided function (often referred to as a +'projection' function) to each item within the array. For instance, let's say we +have an array of numbers `1-5`: + +```js +const numbers = [1, 2, 3, 4, 5]; +``` + +If we wanted to transform this into an array of each number multiplied by ten, +we could use the `map` method. To do this, we call `map` on our numbers array, +passing it a function which will be invoked with each value of the source array, +returning the number multiplied by ten: + +```js +const numbers = [1, 2, 3, 4, 5]; +const numbersTimesTen = numbers.map(number => number * 10); + +// [10,20,30,40,50] +console.log(numbersTimesTen); +``` + +The `map` method does not mutate the existing array, but instead returns a new +array. For example, if we were to log the `numbers` array after calling `map`, +we can see that it's unchanged: + +```js +const numbers = [1, 2, 3, 4, 5]; +const numbersTimesTen = numbers.map(number => number * 10); + +// [10,20,30,40,50] +console.log(numbersTimesTen); + +// [1,2,3,4,5] +console.log(numbers); +``` + +To understand this better, let's walk through what a naive implementation of +`Array.map` could look like. + +1. We create a new array. +2. For every item contained in the source array we apply the provided function. +3. We then push the result of this function to a temporary `resultArray`. +4. After doing this for every item, we return the new array. + +```js +Array.prototype.map = function(projectFn) { + let resultArray = []; + // loop through each item + this.forEach(item => { + // apply the provided project function + let result = projectFn(item); + // push the result to our new array + resultArray.push(result); + }); + // return the array containing transformed values + return resultArray; +}; +``` + +While the +[real implementation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) +of `Array.map` includes features like index tracking and proper error +management, this gives us a general sense of how things work behind the scenes. + +{% hint style="info" %} + +RxJS also offers Observable variants of other popular array methods, like +[`filter`](../operators/filtering/filter.md), +[`reduce`](../operators/transformation/reduce.md), and +[`find`](../operators/filtering/find.md)! + +{% endhint %} + +So what are some other common scenarios where we could put the `map` method to +use? Using `Array.map`, we may also want to transform objects. For instance, +suppose we have an array of objects with a first and last name property and we +want to tack on a full name property to each object. We could accomplish this by +supplying a function that accepts each object and _maps_ it to a new object that +includes all current properties plus the new `fullName` property. In this +example we are using the +[object spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) +and +[template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), +but you could also explicitly rewrite the properties: + +```js +const people = [ + { firstName: 'Brian', lastName: 'Troncone' }, + { firstName: 'Todd', lastName: 'Motto' } +]; +const peopleWithFullName = people.map(person => ({ + ...person, + fullName: `${person.firstName} ${person.lastName}` +})); + +// [{ firstName: 'Brian', lastName: 'Troncone', fullName: 'Brian Troncone' }, {firstName: 'Todd', lastName: 'Motto', fullName: 'Todd Motto' }] +console.log(peopleWithFullName); +``` + +Another common use case for `map` is extracting a single property from an +object. For example, given the sample above suppose we decided we only _really_ +need the last name property for display. Instead of our function returning a new +object, we can instead return just the property we need from that object: + +```js +const people = [ + { firstName: 'Brian', lastName: 'Troncone' }, + { firstName: 'Todd', lastName: 'Motto' } +]; +const lastNames = people.map(person => person.lastName); + +// [ 'Troncone', 'Motto' ] +console.log(peopleWithFullName); +``` + +At this point, we are transforming an array of people objects into an array of +string last names. + +As you can see, the `map` method is extremely flexible with a wide variety of +use cases, but how does this translate to `map` with RxJS, and when would you +put this to use with observables? + +## Introducing the RxJS `map` operator + +![map](https://drive.google.com/uc?export=view&id=1fbxzA5p0FFFUTo0dOAanoq6s1LBip3Ga) + +The `map` operator in RxJS transforms values emitted from the source observable +based on a provided projection function. This is similar to `Array.map`, except +we are operating on each value emitted from an observable as it occurs rather +than each value contained within an array. + +For instance, let's start with our initial example, but instead of transforming +an array of numbers let's transform an observable of numbers. To do this, we +will use the [`from`](../operators/creation/from.mdl) creation operator to first +convert our numbers array into an observable: + +```js +import { from } from 'rxjs'; + +const numbers = [1, 2, 3, 4, 5]; +const number$ = from(numbers); +``` + +When provided an array, the `from` creation operator will loop through +(synchronously) emitting each item in sequence. When we subscribe we can see +each value printed to the console: + +```js +import { from } from 'rxjs'; + +const numbers = [1, 2, 3, 4, 5]; +const number$ = from(numbers); + +/* + * 1 + * 2 + * 3 + * 4 + * 5 + */ +number$.subscribe(console.log); +``` + +**Tip:** _If you want to see how `from` handles each value type behind the +scenes, you can check out the +[`subscribeTo`](https://github.com/ReactiveX/rxjs/blob/e17df333fec66ea3d79e3f70565064f757c3a4fe/src/internal/util/subscribeTo.ts#L14-L29), +and associated helper functions. In this case, +[subscribeToArray](https://github.com/ReactiveX/rxjs/blob/e17df333fec66ea3d79e3f70565064f757c3a4fe/src/internal/util/subscribeToArray.ts#L7-L12) +is used. This same helper function is also used to deal with non-observable +return values of flattening operators, such as +[mergeMap](../operators/transformation/mergemap.md)_ + +If we then wanted to transform this observable into the emitted values +multiplied by ten, we could use the `map` operator. Just like `Array.map`, the +`map` operator accepts a project function which describes how each value from +the source will be transformed. In this case, we will provide a function that +accepts the emitted value from the source observable and returns that value +multipled: + +```js +import { from } from 'rxjs'; + +const numbers = [1, 2, 3, 4, 5]; +const number$ = from(numbers); +const numbersMultipliedByTen$ = number$.pipe(map(number => number * 10)); + +/* + * 10 + * 20 + * 30 + * 40 + * 50 + */ +numbersMultipliedByTen$.subscribe(console.log); +``` + +Instead of the function being applied to each item of an array, before a new +array is returned, with observables the project function is applied and the +result emitted in real-time as values blast through your streams. We can confirm +this in the RxJS source code by seeing the function we provide is invoked, with +the result being passed on to the subscriber (destination): + +[(Source Code)](https://github.com/ReactiveX/rxjs/blob/e17df333fec66ea3d79e3f70565064f757c3a4fe/src/internal/operators/map.ts#L81-L91) + +```ts +protected _next(value: T) { + let result: any; + try { + // project is the function we pass to the map operator + result = this.project.call(this.thisArg, value, this.count++); + } catch (err) { + // forward any errors that occur + this.destination.error(err); + return; + } + // emit the result of calling our project function to the subscriber + this.destination.next(result); + } +``` + +Similar to our array example with objects, we may also want to transform an +observable of objects with the `map` operator. For instance, suppose we have an +observable of `click` events that we wish to transform into an observable of +objects containing just the `clientX` and `clientY` coordinates of these events. +To do this we could apply the `map` operator, providing a function that returns +an object with just these properties: + +```js +import { fromEvent } from 'rxjs'; +import { map } from 'rxjs/operators'; + +const click$ = fromEvent(document, 'click'); + +click$ + .pipe( + map(event => ({ + x: event.clientX, + y: event.clientY + })) + // { x: 12, y: 45 }, { x: 23, y: 132 } + ) + .subscribe(console.log); +``` + +There may also be times we want to grab a single property from an object using +`map`. For example, we may have a use case for an observable of just the `code` +property from `keyup` events, so we can take action when the user types a +particular character or key. To do this we can apply the `map` operator +returning just the property we are interested in: + +```js +import { fromEvent } from 'rxjs'; +import { map } from 'rxjs/operators'; + +const keyup$ = fromEvent(document, 'keyup'); + +click$ + .pipe(map(event => event.code)) + // 'Space', 'Enter' + .subscribe(console.log); +``` + +While `map` works perfectly fine in these situations, RxJS also surfaces helper +operators for cases where you just want to _map_ to a single property or when +you _always_ want to map to the same value on any event. First, let's take a +look at the single property scenario. + +## Extract a single property with `pluck` + +![pluck](https://drive.google.com/uc?export=view&id=1-TdTqWb-qoif4FJojY3sC0oS81EkB65z) + +RxJS features many operators that are simply shortcuts for other operators. For +example, any time we just want to grab a single property from an emitted value, +instead of using `map` we could use `pluck`. The `pluck` operator accepts a list +of values which describe the property you wish to grab from the emitted item. +For instance, using our event code example from above we could use `pluck` +instead of `map` to extract the `code` property from the `event` object: + +```js +import { fromEvent } from 'rxjs'; +import { pluck } from 'rxjs/operators'; + +const keyup$ = fromEvent(document, 'keyup'); + +click$ + .pipe(pluck('code')) + // 'Space', 'Enter' + .subscribe(console.log); +``` + +We can also pass `pluck` multiple values to grab a nested property within an +object. For example, if we wanted to grab the `nodeName` from the `target` +element on click, we could pass both of these properties to `pluck` in order: + +```js +import { fromEvent } from 'rxjs'; +import { pluck } from 'rxjs/operators'; + +const keyup$ = fromEvent(document, 'click'); + +click$ + .pipe(pluck('target', 'nodeName')) + // 'DIV', 'MAIN' + .subscribe(console.log); +``` + +Like many other helper operators in RxJS, behind the scenes `pluck` is simply +reusing the `map` operator, passing it a function to grab the appropriate +property: + +[(Source Code)](https://github.com/ReactiveX/rxjs/blob/e17df333fec66ea3d79e3f70565064f757c3a4fe/src/internal/operators/pluck.ts#L48-L54) + +```ts +export function pluck(...properties: string[]): OperatorFunction { + const length = properties.length; + if (length === 0) { + throw new Error('list of properties cannot be empty.'); + } + return (source: Observable) => + map(plucker(properties, length))(source as any); +} +``` + +Functionally, `map` and `pluck` will operate the same in these scenarios, I +would suggest using whichever you feel most comfortable reading at a glance. + +Lastly, there may also be times where you **always** want to map to a single +value, no matter the input. For these situations, you can use the `mapTo` +operator. + +## Mapping to a constant value with `mapTo` + +![mapTo](https://drive.google.com/uc?export=view&id=1329klWDEvjgjh3JVJkzHoZDc7CpcLZvO) + +For situations where you find yourself always wanting to map to a specific +value, one way you could handle it is by simply using `map` and ignoring the +input: + +```js +import { fromEvent } from 'rxjs'; +import { map } from 'rxjs/operators'; + +const click$ = fromEvent(document, 'click'); + +keyup$ + .pipe(map(() => 'You clicked!')) + // 'You clicked!', 'You clicked!' + .subscribe(console.log); +``` + +While this works, the wrapping function isn't necessary since we are ignoring +the received value. For these scenarios you can replace `map` with `mapTo`, and +simply provide the value you wish to return on all emissions: + +```js +import { fromEvent } from 'rxjs'; +import { mapTo } from 'rxjs/operators'; + +const click$ = fromEvent(document, 'click'); + +click$ + .pipe(mapTo('You clicked!')) + // 'You clicked!', 'You clicked!' + .subscribe(console.log); +``` + +Like `pluck`, `mapTo` provides no real benefit functionally over returning a +constant value with `map`, but syntactically it may prove slightly easier to +consume and read at a glance. + +## Conclusion + +In conclusion, `map` is a versatile operator which lets you transform a stream +using a provided projection function. Whether it's mapping to a keycode, value +updates from an input box, or reshaping an object, `map` will be one of the most +used operators in your day-to-day RxJS toolbox. For scenarios where you just +need to map to a single property, or always want to map to a constant value, you +can also check out the [`pluck`](../operators/transformation/pluck.md) and +[`mapTo`](../operators/transformation/mapto.md) helper operators. + +For a full list of transformation operators with examples, including operators +which manage mapping to more complex values such as other observables, check out +the [transformation operator section](../operators/transformation/README.md). We +will explore these topics in detail in future posts! diff --git a/concepts/operator-imports.md b/concepts/operator-imports.md deleted file mode 100644 index efad80f5..00000000 --- a/concepts/operator-imports.md +++ /dev/null @@ -1,126 +0,0 @@ -# Understanding Operator Imports - -A problem you may have run into in the past when consuming or creating a public library that depends on RxJS is handling operator inclusion. The most predominant way to include operators in your project is to import them like below: - -```js -import 'rxjs/add/operator/take'; -``` - -This adds the imported operator to the `Observable` prototype for use throughout your project: - -[(Source)](https://github.com/ReactiveX/rxjs/blob/master/src/add/operator/take.ts) - -```js -import { Observable } from '../../Observable'; -import { take } from '../../operator/take'; - -Observable.prototype.take = take; - -declare module '../../Observable' { - interface Observable { - take: typeof take; - } -} -``` - -This method is generally *OK* for private projects and modules, the issue arises when you are using these imports in say, an [npm](https://www.npmjs.com/) package or library to be consumed throughout your organization. - -
- -### A Quick Example - -To see where a problem can spring up, let's imagine **Person A** is creating a public Angular component library. In this library you need a few operators so you add the typical imports: - -*some-public-library.ts* -```js -import 'rxjs/add/operator/take'; -import 'rxjs/add/operator/concatMap'; -import 'rxjs/add/operator/switchMap'; -``` - -**Person B** comes along and includes your library. They now have access to these operators even though they did not personally import them. *Probably not a huge deal but it can be confusing.* You use the library and operators, life goes on... - -A month later **Person A** decides to update their library. They no longer need `switchMap` or `concatMap` so they remove the imports: - -*some-public-library.ts* -```js -import 'rxjs/add/operator/take'; -``` - -**Person B** upgrades the dependency, builds their project, which now fails. They never included `switchMap` or `concatMap` themselves, it was **just working** based on the inclusion of a 3rd party dependency. If you were not aware this could be an issue it may take a bit to track down. - -### The Solution - -Instead of importing operators like: - -```js -import 'rxjs/add/operator/take'; -``` - -We can instead import them like: - -```js -import { take } from 'rxjs/operator/take'; -``` - -This keeps them off the `Observable` prototype and let's us call them directly: - -```js -import { take } from 'rxjs/operator/take'; -import { of } from 'rxjs/observable/of'; - -take.call( - of(1,2,3), - 2 -); -``` - -This quickly gets **ugly** however, imagine we have a longer chain: - -```js -import { take } from 'rxjs/operator/take'; -import { map } from 'rxjs/operator/map'; -import { of } from 'rxjs/observable/of'; - -map.call( - take.call( - of(1,2,3), - 2 - ), - val => val + 2 -); -``` - -Pretty soon we have a block of code that is near impossible to understand. How can we get the best of both worlds? - -### Pipeable Operators - -RxJS now comes with a [`pipe`](https://github.com/ReactiveX/rxjs/blob/755df9bf908108974e38aaff79887279f2cde008/src/Observable.ts#L305-L329) helper on `Observable` that alleviates the pain of not having operators on the prototype. We can take the ugly block of code from above: - -```js -import { take, map } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; - -map.call( - take.call( - of(1,2,3), - 2 - ), - val => val + 2 -); -``` - -And transform it into: - -```js -import { take, map } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; - -of(1,2,3) - .pipe( - take(2), - map(val => val + 2) - ); -``` - -Much easier to read, right? This also has the benefit of greatly reducing the RxJS bundle size in your application. For more on this, check out [Ashwin Sureshkumar's](https://twitter.com/Sureshkumar_Ash) excellent article [Reduce Angular app bundle size using lettable operators](https://hackernoon.com/rxjs-reduce-bundle-size-using-lettable-operators-418307295e85). diff --git a/operators/transformation/README.md b/operators/transformation/README.md index 63f1fe77..fe8c2f67 100644 --- a/operators/transformation/README.md +++ b/operators/transformation/README.md @@ -4,6 +4,13 @@ Transforming values as they pass through the operator chain is a common task. These operators provide transformation techniques for nearly any use-case you will encounter. +--- + +💡 New to transformation operators? Check out the article +[Get started transforming streams with map, pluck, and mapTo](../../concepts/get-started-transforming.md)! + +--- + ## Contents - [buffer](buffer.md) From bd6a206243a9c4a558fe6e722c348fc2f769f39c Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 21 Jan 2020 09:57:56 -0500 Subject: [PATCH 203/256] fix(mergeMap): fix broken recipe link --- operators/transformation/mergemap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index c5f604ba..d0a91ca3 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -209,7 +209,7 @@ source$ - [Breakout Game](../../recipes/breakout-game.md) - [HTTP Polling](../../recipes/http-polling.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources From c05290e81d6b54f88e6b2d450864a730aacac586 Mon Sep 17 00:00:00 2001 From: Matthew Harris Date: Wed, 29 Jan 2020 19:56:18 +0000 Subject: [PATCH 204/256] docs(do): "save indicator" broken link on gitbook (#254) the `'` at the start of the link was breaking the rendering on GitBook (https://www.learnrxjs.io/learn-rxjs/operators/utility/do) --- operators/utility/do.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/utility/do.md b/operators/utility/do.md index 07e24b15..538ae955 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -83,7 +83,7 @@ const example = source - [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Space Invaders Game](/recipes/space-invaders-game.md) - [Stop Watch](../../recipes/stop-watch.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) From 8695f34eb60dd9b4b3db63f177bc2ff5438f9a76 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 5 Feb 2020 08:32:44 -0500 Subject: [PATCH 205/256] fix(recipes): update broken links --- operators/combination/merge.md | 7 +++--- operators/creation/of.md | 5 ++-- operators/filtering/debouncetime.md | 11 ++++---- operators/filtering/distinctuntilchanged.md | 8 +++--- operators/filtering/filter.md | 16 ++++++------ operators/multicasting/share.md | 7 +++--- operators/transformation/map.md | 18 ++++++++----- operators/transformation/mapto.md | 14 ++++++++--- operators/transformation/pluck.md | 19 ++++++++++---- operators/utility/delay.md | 28 +++++---------------- 10 files changed, 68 insertions(+), 65 deletions(-) diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 07dfa7b2..2b506994 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -78,12 +78,11 @@ const subscribe = example.subscribe(val => console.log(val)); - [HTTP Polling](../../recipes/http-polling.md) - [Lockscreen](../../recipes/lockscreen.md) - [Memory Game](../../recipes/memory-game.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) ### Additional Resources -- [merge](https://rxjs.dev/api/index/function/merge) - 📰 - Official docs +- [merge](https://rxjs.dev/api/index/function/merge) 📰 - Official docs - [Handling multiple streams with merge](https://egghead.io/lessons/rxjs-handling-multiple-streams-with-merge?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Sharing network requests with merge](https://egghead.io/lessons/rxjs-reactive-programming-sharing-network-requests-with-rxjs-merge?course=introduction-to-reactive-programming) diff --git a/operators/creation/of.md b/operators/creation/of.md index b7cf612f..e0ad7235 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -47,15 +47,14 @@ const subscribe = source.subscribe(val => console.log(val)); - [Car Racing Game](../../recipes/car-racing-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) - [Tetris Game](../../recipes/tetris-game.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources -- [of](https://rxjs.dev/api/index/function/of) - 📰 - Official docs +- [of](https://rxjs.dev/api/index/function/of) 📰 - Official docs - [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz - [Build your own of operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=of#app) diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 9be0d106..5de8b87b 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -6,12 +6,12 @@ --- -💡 This operator is popular in scenarios such as type-ahead where the rate -of user input must be controlled! +💡 This operator is popular in scenarios such as type-ahead where the rate of +user input must be controlled! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -43,13 +43,12 @@ keyup$ ### Related Recipes -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources -- [debounceTime](https://rxjs.dev/api/operators/debounceTime) 📰 - - Official docs +- [debounceTime](https://rxjs.dev/api/operators/debounceTime) 📰 - Official docs - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index f6814653..095ab2e5 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -6,15 +6,15 @@ --- -💡 distinctUntilChanged uses `===` comparison by default, object references -must match! +💡 distinctUntilChanged uses `===` comparison by default, object references must +match! 💡 If you want to compare based on an object property, you can use [`distinctUntilKeyChanged`](distinctuntilkeychanged.md) instead! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -90,7 +90,7 @@ source$ ### Related Recipes - [Lockscreen](../../recipes/lockscreen.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Type Ahead](../../recipes/type-ahead.md) ### Additional Resources diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 7485f66e..0aa52057 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -6,12 +6,12 @@ --- -💡 If you would like to complete an observable when a condition fails, check -out [takeWhile](takewhile.md)! +💡 If you would like to complete an observable when a condition fails, check out +[takeWhile](takewhile.md)! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -48,7 +48,10 @@ import { from } from 'rxjs'; import { filter } from 'rxjs/operators'; //emit ({name: 'Joe', age: 31}, {name: 'Bob', age:25}) -const source = from([{ name: 'Joe', age: 31 }, { name: 'Bob', age: 25 }]); +const source = from([ + { name: 'Joe', age: 31 }, + { name: 'Bob', age: 25 } +]); //filter out people with age under 30 const example = source.pipe(filter(person => person.age >= 30)); //output: "Over 30: Joe" @@ -89,12 +92,11 @@ const subscribe = example.subscribe(val => - [Game Loop](../../recipes/gameloop.md) - [Lockscreen](../../recipes/lockscreen.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) ### Additional Resources -- [filter](https://rxjs.dev/api/operators/filter) - 📰 - Official docs +- [filter](https://rxjs.dev/api/operators/filter) 📰 - Official docs - [Adding conditional logic with filter](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index eda93c49..82b3eb3f 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -62,12 +62,11 @@ const subscribeFour = sharedExample.subscribe(val => console.log(val)); - [Progress Bar](../../recipes/progressbar.md) - [Game Loop](../../recipes/gameloop.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) ### Additional Resources -- [share](https://rxjs.dev/api/operators/share) - 📰 - Official docs +- [share](https://rxjs.dev/api/operators/share) 📰 - Official docs - [Sharing streams with share](https://egghead.io/lessons/rxjs-sharing-streams-with-share?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 70a3a100..b1b49374 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -4,7 +4,14 @@ ## Apply projection with each value from source. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +{% hint style="info" %} + +New to transformation operators? Check out the article +[Get started transforming streams with map, pluck, and mapTo](../../concepts/get-started-transforming.md)! + +{% endhint %} + +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -62,7 +69,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Lockscreen](../../recipes/lockscreen.md) - [Memory Game](../../recipes/memory-game.md) - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Stop Watch](../../recipes/stop-watch.md) @@ -72,10 +79,9 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [map](https://rxjs.dev/api/operators/map) - 📰 - Official docs -- [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) - 🎥 - Ben Lesh +- [map](https://rxjs.dev/api/operators/map) 📰 - Official docs +- [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 - Ben + Lesh - [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index cc0d1703..53096389 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -4,7 +4,14 @@ ## Map emissions to constant value. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +{% hint style="info" %} + +New to transformation operators? Check out the article +[Get started transforming streams with map, pluck, and mapTo](../../concepts/get-started-transforming.md)! + +{% endhint %} + +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -51,14 +58,13 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes - [HTTP Polling](../../recipes/http-polling.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Smart Counter](../../recipes/smartcounter.md) - [Stop Watch](../../recipes/stop-watch.md) ### Additional Resources -- [mapTo](https://rxjs.dev/api/operators/mapTo) - 📰 - Official docs +- [mapTo](https://rxjs.dev/api/operators/mapTo) 📰 - Official docs - [Changing behavior with mapTo](https://egghead.io/lessons/rxjs-changing-behavior-with-mapto?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index a0c4abaa..7b0e234f 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -2,9 +2,16 @@ #### signature: `pluck(properties: ...args): Observable` -## Select properties to emit. +## Select property to emit. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +{% hint style="info" %} + +New to transformation operators? Check out the article +[Get started transforming streams with map, pluck, and mapTo](../../concepts/get-started-transforming.md)! + +{% endhint %} + +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -20,7 +27,10 @@ import { from } from 'rxjs'; import { pluck } from 'rxjs/operators'; -const source = from([{ name: 'Joe', age: 30 }, { name: 'Sarah', age: 35 }]); +const source = from([ + { name: 'Joe', age: 30 }, + { name: 'Sarah', age: 35 } +]); //grab names const example = source.pipe(pluck('name')); //output: "Joe", "Sarah" @@ -63,8 +73,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [pluck](https://rxjs.dev/api/operators/pluck) - 📰 - Official docs +- [pluck](https://rxjs.dev/api/operators/pluck) 📰 - Official docs --- diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 622ee4ba..c1ef339d 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -20,14 +20,7 @@ const mousedown$ = fromEvent(document, 'mousedown'); const mouseup$ = fromEvent(document, 'mouseup'); mousedown$ - .pipe( - mergeMap(event => - of(event).pipe( - delay(700), - takeUntil(mouseup$) - ) - ) - ) + .pipe(mergeMap(event => of(event).pipe(delay(700), takeUntil(mouseup$)))) .subscribe(event => console.log('Long Press!', event)); ``` @@ -47,18 +40,9 @@ const example = of(null); //delay output of each by an extra second const message = merge( example.pipe(mapTo('Hello')), - example.pipe( - mapTo('World!'), - delay(1000) - ), - example.pipe( - mapTo('Goodbye'), - delay(2000) - ), - example.pipe( - mapTo('World!'), - delay(3000) - ) + example.pipe(mapTo('World!'), delay(1000)), + example.pipe(mapTo('Goodbye'), delay(2000)), + example.pipe(mapTo('World!'), delay(3000)) ); //output: 'Hello'...'World!'...'Goodbye'...'World!' const subscribe = message.subscribe(val => console.log(val)); @@ -68,7 +52,7 @@ const subscribe = message.subscribe(val => console.log(val)); - [Battleship Game](../../recipes/battleship-game.md) - [Progress Bar](../../recipes/progressbar.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Swipe To Refresh](/recipes/swipe-to-refresh.md) ### Additional Resources From d8a052578b78887209f12629ee2d19a68bd825bd Mon Sep 17 00:00:00 2001 From: Matthew Harris Date: Wed, 5 Feb 2020 13:36:04 +0000 Subject: [PATCH 206/256] docs(do): source code link changed to tap from do (#255) The do link was 404 --- operators/utility/do.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/utility/do.md b/operators/utility/do.md index 538ae955..0b427fac 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -105,4 +105,4 @@ const example = source --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/do.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/do.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/tap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/tap.ts) From 4f85f59ff580b7723ddb4ecf125c98c2a9b05de6 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 5 Feb 2020 08:39:15 -0500 Subject: [PATCH 207/256] docs(operators): update transformation hint --- operators/transformation/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/operators/transformation/README.md b/operators/transformation/README.md index fe8c2f67..33e6121b 100644 --- a/operators/transformation/README.md +++ b/operators/transformation/README.md @@ -4,12 +4,12 @@ Transforming values as they pass through the operator chain is a common task. These operators provide transformation techniques for nearly any use-case you will encounter. ---- +{% hint style="info" %} -💡 New to transformation operators? Check out the article +New to transformation operators? Check out the article [Get started transforming streams with map, pluck, and mapTo](../../concepts/get-started-transforming.md)! ---- +{% endhint %} ## Contents From 85908f6a5225afadad570474139cce60a62ea73b Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 16 Mar 2020 09:49:51 -0400 Subject: [PATCH 208/256] chore(banner): update banner --- README.md | 2 +- operators/combination/combineall.md | 5 +- operators/combination/combinelatest.md | 6 +- operators/combination/concat.md | 10 +- operators/combination/concatall.md | 5 +- operators/combination/endwith.md | 2 +- operators/combination/forkjoin.md | 5 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 12 +- operators/combination/pairwise.md | 10 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 5 +- operators/combination/withlatestfrom.md | 6 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 6 +- operators/conditional/every.md | 5 +- operators/conditional/iif.md | 5 +- operators/conditional/sequenceequal.md | 6 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 5 +- operators/creation/empty.md | 5 +- operators/creation/from.md | 11 +- operators/creation/fromevent.md | 5 +- operators/creation/generate.md | 20 +- operators/creation/interval.md | 5 +- operators/creation/range.md | 5 +- operators/creation/throw.md | 5 +- operators/creation/timer.md | 5 +- operators/error_handling/catch.md | 5 +- operators/error_handling/retry.md | 5 +- operators/error_handling/retrywhen.md | 5 +- operators/filtering/debounce.md | 9 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinct.md | 5 +- operators/filtering/distinctuntilchanged.md | 2 +- .../filtering/distinctuntilkeychanged.md | 11 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 9 +- operators/filtering/ignoreelements.md | 11 +- operators/filtering/last.md | 5 +- operators/filtering/sample.md | 5 +- operators/filtering/single.md | 5 +- operators/filtering/skip.md | 5 +- operators/filtering/skipuntil.md | 5 +- operators/filtering/skipwhile.md | 5 +- operators/filtering/take.md | 5 +- operators/filtering/takelast.md | 10 +- operators/filtering/takeuntil.md | 5 +- operators/filtering/takewhile.md | 12 +- operators/filtering/throttle.md | 5 +- operators/filtering/throttletime.md | 19 +- operators/multicasting/multicast.md | 5 +- operators/multicasting/publish.md | 5 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 5 +- operators/transformation/buffer.md | 6 +- operators/transformation/buffercount.md | 5 +- operators/transformation/buffertoggle.md | 5 +- operators/transformation/bufferwhen.md | 5 +- operators/transformation/concatmap.md | 10 +- operators/transformation/concatmapto.md | 5 +- operators/transformation/exhaustmap.md | 10 +- operators/transformation/expand.md | 5 +- operators/transformation/groupby.md | 10 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 13 +- operators/transformation/mergescan.md | 6 +- operators/transformation/partition.md | 7 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 5 +- operators/transformation/scan.md | 10 +- operators/transformation/switchmap.md | 5 +- operators/transformation/switchmapto.md | 5 +- operators/transformation/toarray.md | 10 +- operators/transformation/windowcount.md | 5 +- operators/transformation/windowtime.md | 5 +- operators/transformation/windowtoggle.md | 5 +- operators/transformation/windowwhen.md | 5 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 5 +- operators/utility/repeatwhen.md | 11 +- operators/utility/timeinterval.md | 10 +- operators/utility/timeout.md | 5 +- operators/utility/timeoutwith.md | 6 +- operators/utility/topromise.md | 2 +- recipes/alphabet-invasion-game.md | 2 +- recipes/battleship-game.md | 17 +- recipes/breakout-game.md | 2 +- recipes/car-racing-game.md | 2 +- recipes/catch-the-dot-game.md | 8 +- recipes/click-ninja-game.md | 2 +- recipes/flappy-bird-game.md | 2 +- recipes/gameloop.md | 2 +- recipes/horizontal-scroll-indicator.md | 7 +- recipes/http-polling.md | 2 +- recipes/lockscreen.md | 18 +- recipes/matrix-digital-rain.md | 2 +- recipes/memory-game.md | 8 +- recipes/mine-sweeper-game.md | 8 +- recipes/platform-jumper-game.md | 2 +- recipes/progressbar.md | 7 +- recipes/save-indicator.md | 2 +- recipes/smartcounter.md | 2 +- recipes/space-invaders-game.md | 2 +- recipes/stop-watch.md | 62 ++-- recipes/swipe-to-refresh.md | 2 +- recipes/tank-battle-game.md | 2 +- recipes/tetris-game.md | 281 +++++++++++------- recipes/type-ahead.md | 2 +- recipes/uncover-image-game.md | 192 ++++++------ subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 6 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 10 +- 121 files changed, 608 insertions(+), 584 deletions(-) diff --git a/README.md b/README.md index 2e1726ef..cf1a1c70 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX)](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz)](https://ultimatecourses.com/courses/rxjs?ref=4) ### Brand New to RxJS? diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 97af5924..23a10f6c 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -57,8 +57,7 @@ example$ ### Additional Resources -- [combineAll](https://rxjs.dev/api/operators/combineAll) 📰 - Official - docs +- [combineAll](https://rxjs.dev/api/operators/combineAll) 📰 - Official docs --- diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 7c7a4abc..3d764f68 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -31,7 +31,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -155,8 +155,8 @@ combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe( ### Additional Resources -- [combineLatest](https://rxjs.dev/api/index/function/combineLatest) - 📰 - Official docs +- [combineLatest](https://rxjs.dev/api/index/function/combineLatest) 📰 - + Official docs - [Combining streams with combineLatest](https://egghead.io/lessons/rxjs-combining-streams-with-combinelatest?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Combination operator: combineLatest](https://egghead.io/lessons/rxjs-combination-operator-combinelatest?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 4f785433..0788df88 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -14,7 +14,7 @@ instead! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -54,10 +54,7 @@ import { delay, startWith } from 'rxjs/operators'; const userMessage = document.getElementById('message'); // helper const delayedMessage = (message, delayedTime = 1000) => { - return empty().pipe( - startWith(message), - delay(delayedTime) - ); + return empty().pipe(startWith(message), delay(delayedTime)); }; concat( @@ -93,8 +90,7 @@ concat(interval(1000), of('This', 'Never', 'Runs')) ### Additional Resources -- [concat](https://rxjs.dev/api/index/function/concat) 📰 - Official - docs +- [concat](https://rxjs.dev/api/index/function/concat) 📰 - Official docs - [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index f6d5775c..1a50f0a4 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,7 +15,7 @@ single operator instead! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -114,8 +114,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [concatAll](https://rxjs.dev/api/operators/concatAll) 📰 - Official - docs +- [concatAll](https://rxjs.dev/api/operators/concatAll) 📰 - Official docs - [Flatten a higher order observable with concatAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-concatall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 05235acc..ecbb88e1 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -15,7 +15,7 @@ value, check out [`finalize`](../utility/finalize.md)! --- - Ultimate RxJS + Ultimate RxJS ### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 80e19c13..dca405d4 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -34,7 +34,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may be better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -243,8 +243,7 @@ export class App { ### Additional Resources -- [forkJoin](https://rxjs.dev/api/index/function/forkJoin) 📰 - - Official docs +- [forkJoin](https://rxjs.dev/api/index/function/forkJoin) 📰 - Official docs --- diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 2b506994..1adbad7e 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,7 +13,7 @@ instead! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index fafda524..fbbd90f2 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,7 +11,7 @@ single operator instead! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -73,12 +73,7 @@ const source = interval(500).pipe(take(5)); */ const example = source .pipe( - map(val => - source.pipe( - delay(1000), - take(3) - ) - ), + map(val => source.pipe(delay(1000), take(3))), mergeAll(2) ) .subscribe(val => console.log(val)); @@ -89,8 +84,7 @@ const example = source ### Additional Resources -- [mergeAll](https://rxjs.dev/api/operators/mergeAll) - 📰 - Official docs +- [mergeAll](https://rxjs.dev/api/operators/mergeAll) 📰 - Official docs - [Flatten a higher order observable with mergeAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-mergeall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 2c1a2aff..71dd448c 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,7 +4,7 @@ ## Emit the previous and current values as an array. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -22,17 +22,13 @@ import { interval } from 'rxjs'; //Returns: [0,1], [1,2], [2,3], [3,4], [4,5] interval(1000) - .pipe( - pairwise(), - take(5) - ) + .pipe(pairwise(), take(5)) .subscribe(console.log); ``` ### Additional Resources -- [pairwise](https://rxjs.dev/api/operators/pairwise) - 📰 - Official docs +- [pairwise](https://rxjs.dev/api/operators/pairwise) 📰 - Official docs --- diff --git a/operators/combination/race.md b/operators/combination/race.md index 8eda4e8e..7cd8a645 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,7 +4,7 @@ ## The observable to emit first is used. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index c73d6652..bab3d5e4 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,7 +12,7 @@ can also start with an initial value! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -104,8 +104,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [startWith](https://rxjs.dev/api/operators/startWith) - 📰 - Official docs +- [startWith](https://rxjs.dev/api/operators/startWith) 📰 - Official docs - [Displaying initial data with startWith](https://egghead.io/lessons/rxjs-displaying-initial-data-with-startwith?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Clear data while loading with startWith](https://egghead.io/lessons/rxjs-reactive-programming-clear-data-while-loading-with-rxjs-startwith?course=introduction-to-reactive-programming) diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index 60c24273..d1ac8ec3 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,7 +11,7 @@ emits, try [combinelatest](combinelatest.md)! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -88,8 +88,8 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [withLatestFrom](https://rxjs.dev/api/operators/withLatestFrom) - 📰 - Official docs +- [withLatestFrom](https://rxjs.dev/api/operators/withLatestFrom) 📰 - Official + docs - [Combination operator: withLatestFrom](https://egghead.io/lessons/rxjs-combination-operator-withlatestfrom?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 2134c187..c35fb741 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,7 +12,7 @@ source! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 7eb54186..5c3afac2 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -46,8 +46,8 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [defaultIfEmpty](https://rxjs.dev/api/operators/defaultIfEmpty) - 📰 - Official docs +- [defaultIfEmpty](https://rxjs.dev/api/operators/defaultIfEmpty) 📰 - Official + docs --- diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 6ebf23f1..4673662a 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -86,8 +86,7 @@ apiCalls$.subscribe(); ### Additional Resources -- [every](https://rxjs.dev/api/operators/every) - 📰 - Official docs +- [every](https://rxjs.dev/api/operators/every) 📰 - Official docs --- diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 87547461..006fe7da 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Subscribe to first or second observable based on a condition -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -84,8 +84,7 @@ interval(1000) ### Additional Resources -- [iif](https://rxjs.dev/api/operators/iif) 📰 - - Official docs +- [iif](https://rxjs.dev/api/operators/iif) 📰 - Official docs --- diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index a0045517..9be36337 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares emitted sequence to expected sequence for match -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -64,8 +64,8 @@ fromEvent(document, 'keydown') ### Additional Resources -- [sequenceEqual](https://rxjs.dev/api/operators/sequenceEqual) - 📰 - Official docs +- [sequenceEqual](https://rxjs.dev/api/operators/sequenceEqual) 📰 - Official + docs --- diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index 5245c640..06e6c6fe 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -4,7 +4,7 @@ ## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index 809c69f6..0237a491 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/defer.md b/operators/creation/defer.md index be0c78aa..a9df47ea 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -12,7 +12,7 @@ is used as part of the [`iif`](../conditional/iif.md) operator! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -57,8 +57,7 @@ setTimeout(() => { ### Additional Resources -- [defer](https://rxjs.dev/api/index/function/defer) - 📰 - Official docs +- [defer](https://rxjs.dev/api/index/function/defer) 📰 - Official docs --- diff --git a/operators/creation/empty.md b/operators/creation/empty.md index 1db77a24..ed122dfc 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -64,8 +64,7 @@ const timer$ = merge(pause$, resume$) ### Additional Resources -- [empty](https://rxjs.dev/api/index/function/empty) - 📰 - Official docs +- [empty](https://rxjs.dev/api/index/function/empty) 📰 - Official docs - [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz diff --git a/operators/creation/from.md b/operators/creation/from.md index 465956e8..5c8d258e 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -8,15 +8,13 @@ 💡 This operator can be used to convert a promise to an observable! -💡 For arrays and iterables, all contained values will be emitted as a -sequence! +💡 For arrays and iterables, all contained values will be emitted as a sequence! -💡 This operator can also be used to emit a string as a sequence of -characters! +💡 This operator can also be used to emit a string as a sequence of characters! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -101,8 +99,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -- [from](https://rxjs.dev/api/index/function/from) - 📰 - Official docs +- [from](https://rxjs.dev/api/index/function/from) 📰 - Official docs - [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 8746c0c0..bd4cbf12 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -57,8 +57,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [fromEvent](https://rxjs.dev/api/index/function/fromEvent) - 📰 - Official docs +- [fromEvent](https://rxjs.dev/api/index/function/fromEvent) 📰 - Official docs --- diff --git a/operators/creation/generate.md b/operators/creation/generate.md index c5b8c6e7..d51675b1 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -4,7 +4,7 @@ ## Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -18,7 +18,11 @@ // RxJS v6+ import { generate } from 'rxjs'; -generate(2, x => x <= 8, x => x + 3).subscribe(console.log); +generate( + 2, + x => x <= 8, + x => x + 3 +).subscribe(console.log); /* OUTPUT: @@ -38,9 +42,12 @@ OUTPUT: // RxJS v6+ import { generate } from 'rxjs'; -generate(2, x => x <= 38, x => x + 3, x => '.'.repeat(x)).subscribe( - console.log -); +generate( + 2, + x => x <= 38, + x => x + 3, + x => '.'.repeat(x) +).subscribe(console.log); /* OUTPUT: @@ -67,8 +74,7 @@ OUTPUT: ### Additional Resources -- [generate](https://rxjs.dev/api/index/function/generate) - 📰 - Official docs +- [generate](https://rxjs.dev/api/index/function/generate) 📰 - Official docs --- diff --git a/operators/creation/interval.md b/operators/creation/interval.md index af69d479..c6f0e08c 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -44,8 +44,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -- [interval](https://rxjs.dev/api/index/function/interval) - 📰 - Official docs +- [interval](https://rxjs.dev/api/index/function/interval) 📰 - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz - [Build your own interval operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=interval#app) diff --git a/operators/creation/range.md b/operators/creation/range.md index 7ede7a78..fbdc3cc9 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -27,8 +27,7 @@ const example = source.subscribe(val => console.log(val)); ### Additional Resources -- [range](https://rxjs.dev/api/index/function/range) - 📰 - Official docs +- [range](https://rxjs.dev/api/index/function/range) 📰 - Official docs --- diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 14196e04..5e3c1379 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -35,8 +35,7 @@ const subscribe = source.subscribe({ ### Additional Resources -- [throw](https://rxjs.dev/api/index/function/throw) - 📰 - Official docs +- [throw](https://rxjs.dev/api/index/function/throw) 📰 - Official docs - [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz diff --git a/operators/creation/timer.md b/operators/creation/timer.md index 98e8ef21..9187a3ba 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -52,8 +52,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -- [timer](https://rxjs.dev/api/index/function/timer) - 📰 - Official docs +- [timer](https://rxjs.dev/api/index/function/timer) 📰 - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz - [Build your own timer operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=timer#app) diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index b44d756e..590a389b 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -108,8 +108,7 @@ iWillStopListening$.subscribe(console.log); ### Additional Resources -- [catchError](https://rxjs.dev/api/operators/catchError) 📰 - Official - docs +- [catchError](https://rxjs.dev/api/operators/catchError) 📰 - Official docs - [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index f8e8e0c3..411a6e7c 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -15,7 +15,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -59,8 +59,7 @@ const subscribe = example.subscribe({ ### Additional Resources -- [retry](https://rxjs.dev/api/operators/retry) - 📰 - Official docs +- [retry](https://rxjs.dev/api/operators/retry) 📰 - Official docs - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 0355efde..04bd42a4 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -139,8 +139,7 @@ export class AppComponent implements OnInit { ### Additional Resources -- [retryWhen](https://rxjs.dev/api/operators/retryWhen) - 📰 - Official docs +- [retryWhen](https://rxjs.dev/api/operators/retryWhen) 📰 - Official docs - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index baef501f..1dce902a 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -6,12 +6,12 @@ --- -💡 Though not as widely used as [debounceTime](debouncetime.md), -**debounce** is important when the debounce rate is variable! +💡 Though not as widely used as [debounceTime](debouncetime.md), **debounce** is +important when the debounce rate is variable! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -69,8 +69,7 @@ const subscribe = debouncedInterval.subscribe(val => ### Additional Resources -- [debounce](https://rxjs.dev/api/operators/debounce) - 📰 - Official docs +- [debounce](https://rxjs.dev/api/operators/debounce) 📰 - Official docs - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 5de8b87b..b2f8ed91 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -11,7 +11,7 @@ user input must be controlled! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/distinct.md b/operators/filtering/distinct.md index 1fa1f31c..54c52d6c 100644 --- a/operators/filtering/distinct.md +++ b/operators/filtering/distinct.md @@ -4,7 +4,7 @@ ## Emits items emitted that are distinct based on any previously emitted item. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -54,8 +54,7 @@ OUTPUT: ### Additional Resources -- [distinct](https://rxjs.dev/api/operators/distinct) 📰 - Official - docs +- [distinct](https://rxjs.dev/api/operators/distinct) 📰 - Official docs --- diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 095ab2e5..26f310a8 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -14,7 +14,7 @@ match! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index 4bdf3604..e4751bae 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -4,7 +4,7 @@ ## Only emit when the specified key value has changed -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -45,11 +45,10 @@ source$ import { fromEvent } from 'rxjs'; import { distinctUntilKeyChanged, pluck } from 'rxjs/operators'; -const keys$ = fromEvent(document, 'keyup') - .pipe( - distinctUntilKeyChanged('code'), - pluck('key') - ); +const keys$ = fromEvent(document, 'keyup').pipe( + distinctUntilKeyChanged < KeyboardEvent > 'code', + pluck('key') +); keys$.subscribe(console.log); ``` diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 0aa52057..45dfbbe9 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/find.md b/operators/filtering/find.md index c6c56dce..efb6e5e3 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 45d57634..2c5f596e 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -8,11 +8,13 @@ 💡 The counterpart to first is [**last**](last.md)! -💡 `First` will deliver an EmptyError to the Observer's error callback if the Observable completes before any next notification was sent. If you don't want this behavior, use `take(1)` instead. +💡 `First` will deliver an EmptyError to the Observer's error callback if the +Observable completes before any next notification was sent. If you don't want +this behavior, use `take(1)` instead. --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -81,8 +83,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [first](https://rxjs.dev/api/operators/first) - 📰 - Official docs +- [first](https://rxjs.dev/api/operators/first) 📰 - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 7631b060..e3e5c6d7 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -23,10 +23,7 @@ import { take, ignoreElements } from 'rxjs/operators'; //emit value every 100ms const source = interval(100); //ignore everything but complete -const example = source.pipe( - take(5), - ignoreElements() -); +const example = source.pipe(take(5), ignoreElements()); //output: "COMPLETE!" const subscribe = example.subscribe( val => console.log(`NEXT: ${val}`), @@ -69,8 +66,8 @@ const subscribe = error.subscribe( ### Additional Resources -- [ignoreElements](https://rxjs.dev/api/operators/ignoreElements) - 📰 - Official docs +- [ignoreElements](https://rxjs.dev/api/operators/ignoreElements) 📰 - Official + docs --- diff --git a/operators/filtering/last.md b/operators/filtering/last.md index fd660818..add2fbed 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -75,8 +75,7 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ### Additional Resources -- [last](https://rxjs.dev/api/operators/last) - 📰 - Official docs +- [last](https://rxjs.dev/api/operators/last) 📰 - Official docs - [Filtering operator: takeLast, last](https://egghead.io/lessons/rxjs-filtering-operators-takelast-last?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 5303046f..39994150 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -79,8 +79,7 @@ const listener = merge( ### Additional Resources -- [sample](https://rxjs.dev/api/operators/sample) - 📰 - Official docs +- [sample](https://rxjs.dev/api/operators/sample) 📰 - Official docs --- diff --git a/operators/filtering/single.md b/operators/filtering/single.md index f3ffe23c..ed36a22c 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -30,8 +30,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [single](https://rxjs.dev/api/operators/single) - 📰 - Official docs +- [single](https://rxjs.dev/api/operators/single) 📰 - Official docs --- diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index de9ee0ee..ec9a8ba1 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -67,8 +67,7 @@ const filterObs = numArrayObs ### Additional Resources -- [skip](https://rxjs.dev/api/operators/skip) - 📰 - Official docs +- [skip](https://rxjs.dev/api/operators/skip) 📰 - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 7f4f68c3..57f0c136 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided observable emits. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -30,8 +30,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [skipUntil](https://rxjs.dev/api/operators/skipUntil) - 📰 - Official docs +- [skipUntil](https://rxjs.dev/api/operators/skipUntil) 📰 - Official docs --- diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index f220fac1..d718417b 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -30,8 +30,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [skipWhile](https://rxjs.dev/api/operators/skipWhile) - 📰 - Official docs +- [skipWhile](https://rxjs.dev/api/operators/skipWhile) 📰 - Official docs --- diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 459e87d1..72564bf8 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -26,7 +26,7 @@ emissions. --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -105,8 +105,7 @@ const subscribe = oneClickEvent.subscribe(); ### Additional Resources -- [take](https://rxjs.dev/api/operators/take) - 📰 - Official docs +- [take](https://rxjs.dev/api/operators/take) 📰 - Official docs - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Build your own take operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=take#app) diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index eb00347e..5d110d8d 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -6,12 +6,12 @@ --- -💡 If you want only the last emission from multiple observables, on -completion of multiple observables, try [forkJoin](../combination/forkjoin.md)! +💡 If you want only the last emission from multiple observables, on completion +of multiple observables, try [forkJoin](../combination/forkjoin.md)! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -35,8 +35,8 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [takeLast](https://rxjs-dev.firebaseapp.com/api/operators/takeLast) - 📰 - Official docs +- [takeLast](https://rxjs-dev.firebaseapp.com/api/operators/takeLast) 📰 - + Official docs --- diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 427a4934..81d8a564 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -116,8 +116,7 @@ mousedown$ ### Additional Resources -- [takeUntil](https://rxjs.dev/api/operators/takeUntil) - 📰 - Official docs +- [takeUntil](https://rxjs.dev/api/operators/takeUntil) 📰 - Official docs * [Avoiding takeUntil leaks](https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef) - Angular in Depth diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 3d7d614b..adc79616 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -6,12 +6,12 @@ --- -💡 When the optional `inclusive` parameter is set to `true` it will also -emit the first item that didn't pass the predicate. +💡 When the optional `inclusive` parameter is set to `true` it will also emit +the first item that didn't pass the predicate. --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -33,7 +33,7 @@ const source$ = of(1, 2, 3, 4, 5); //allow values until value from source is greater than 4, then complete source$ .pipe(takeWhile(val => val <= 4)) - // log: 1,2,3,4 + // log: 1,2,3,4 .subscribe(val => console.log(val)); ``` @@ -102,8 +102,8 @@ source$ ### Additional Resources -- [takeWhile](https://rxjs-dev.firebaseapp.com/api/operators/takeWhile) - 📰 - Official docs +- [takeWhile](https://rxjs-dev.firebaseapp.com/api/operators/takeWhile) 📰 - + Official docs - [Completing a stream with takeWhile](https://egghead.io/lessons/rxjs-completing-a-stream-with-takewhile?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 5f944be2..4e6a7c05 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -58,8 +58,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [throttle](https://rxjs.dev/api/operators/throttle) - 📰 - Official docs +- [throttle](https://rxjs.dev/api/operators/throttle) 📰 - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 3c3345fc..55745365 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,14 +4,15 @@ ## Emit first value then ignore for specified duration -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples ##### Example 1: Emit first value, ignore for 5s window ( -[StackBlitz](https://stackblitz.com/edit/typescript-en2zqe?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/typescript-en2zqe?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -31,7 +32,8 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Emit on trailing edge using config ( -[StackBlitz](https://stackblitz.com/edit/typescript-5rwl6i?file=index.ts&devtoolsheight=100) ) +[StackBlitz](https://stackblitz.com/edit/typescript-5rwl6i?file=index.ts&devtoolsheight=100) +) ```js // RxJS v6+ @@ -42,11 +44,9 @@ const source = interval(1000); /* emit the first value, then ignore for 5 seconds. repeat... */ -const example = source.pipe(throttleTime( - 5000, - asyncScheduler, - { trailing: true } -)); +const example = source.pipe( + throttleTime(5000, asyncScheduler, { trailing: true }) +); // output: 5...11...17 const subscribe = example.subscribe(val => console.log(val)); ``` @@ -58,8 +58,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [throttleTime](https://rxjs.dev/api/operators/throttleTime) - 📰 - Official docs +- [throttleTime](https://rxjs.dev/api/operators/throttleTime) 📰 - Official docs - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 14faacb2..9189a30e 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -82,8 +82,7 @@ setTimeout(() => { ### Additional Resources -- [multicast](https://rxjs.dev/api/operators/multicast) - 📰 - Official docs +- [multicast](https://rxjs.dev/api/operators/multicast) 📰 - Official docs --- diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 8f1fe400..c97f6aae 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -54,8 +54,7 @@ setTimeout(() => { ### Additional Resources -- [publish](https://rxjs.dev/api/operators/publish) - 📰 - Official docs +- [publish](https://rxjs.dev/api/operators/publish) 📰 - Official docs > 📁 Source Code: > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/publish.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/publish.ts) diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 82b3eb3f..2060ac2d 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 022074d0..8292134c 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -168,8 +168,7 @@ const lateSubscriber = lastUrl.subscribe(console.log); ### Additional Resources -- [shareReplay](https://rxjs.dev/api/operators/shareReplay) - 📰 - Official docs +- [shareReplay](https://rxjs.dev/api/operators/shareReplay) 📰 - Official docs --- diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index da74018b..6bc04547 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,7 +4,7 @@ ## Collect output values until provided observable emits, emit as array. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -66,8 +66,8 @@ const subscribe = myBufferedInterval.subscribe(val => ### Additional Resources -- [buffer](https://rxjs-dev.firebaseapp.com/api/operators/buffer) 📰 - - Official docs +- [buffer](https://rxjs-dev.firebaseapp.com/api/operators/buffer) 📰 - Official + docs - [Transformation operator: buffer](https://egghead.io/lessons/rxjs-transformation-operator-buffer?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 82982789..c525e68f 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,7 +4,7 @@ ## Collect emitted values until provided number is fulfilled, emit as array. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -99,8 +99,7 @@ fromEvent(document, 'keydown') ### Additional Resources -- [bufferCount](https://rxjs.dev/api/operators/bufferCount) - 📰 - Official docs +- [bufferCount](https://rxjs.dev/api/operators/bufferCount) 📰 - Official docs --- diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index ef33b50f..2b21ea6d 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -61,8 +61,7 @@ fromEvent(document, 'mousemove') ### Additional Resources -- [bufferToggle](https://rxjs.dev/api/operators/bufferToggle) - 📰 - Official docs +- [bufferToggle](https://rxjs.dev/api/operators/bufferToggle) 📰 - Official docs --- diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 3e8a1cb6..111dea12 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -37,8 +37,7 @@ const subscribe = bufferWhenExample.subscribe(val => ### Additional Resources -- [bufferWhen](https://rxjs.dev/api/operators/bufferWhen) - 📰 - Official docs +- [bufferWhen](https://rxjs.dev/api/operators/bufferWhen) 📰 - Official docs --- diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 259b029d..d26f1278 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,7 +4,7 @@ ## Map values to inner observable, subscribe and emit in order. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -89,7 +89,10 @@ const source = of('Hello', 'Goodbye'); const examplePromise = val => new Promise(resolve => resolve(`${val} World!`)); //result of first param passed to second param selector function before being returned const example = source.pipe( - concatMap(val => examplePromise(val), result => `${result} w/ selector!`) + concatMap( + val => examplePromise(val), + result => `${result} w/ selector!` + ) ); //output: 'Example w/ Selector: 'Hello w/ Selector', Example w/ Selector: 'Goodbye w/ Selector' const subscribe = example.subscribe(val => @@ -99,8 +102,7 @@ const subscribe = example.subscribe(val => ### Additional Resources -- [concatMap](https://rxjs.dev/api/operators/concatMap) - 📰 - Official docs +- [concatMap](https://rxjs.dev/api/operators/concatMap) 📰 - Official docs - [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz - [Build your own concatMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=concatMap#app) diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 1ca83ecb..534a7929 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -72,8 +72,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -- [concatMapTo](https://rxjs.dev/api/operators/concatMapTo) - 📰 - Official docs +- [concatMapTo](https://rxjs.dev/api/operators/concatMapTo) 📰 - Official docs --- diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 9efaceea..79d3df49 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,7 +4,7 @@ ## Map to inner observable, ignore other values until that observable completes. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -21,10 +21,7 @@ import { interval, merge, of } from 'rxjs'; import { delay, take, exhaustMap } from 'rxjs/operators'; const sourceInterval = interval(1000); -const delayedInterval = sourceInterval.pipe( - delay(10), - take(4) -); +const delayedInterval = sourceInterval.pipe(delay(10), take(4)); const exhaustSub = merge( // delay 10ms, then start interval emitting 4 values @@ -123,8 +120,7 @@ const exhaustSub = firstInterval ### Additional Resources -- [exhaustMap](https://rxjs.dev/api/operators/exhaustMap) - 📰 - Official docs +- [exhaustMap](https://rxjs.dev/api/operators/exhaustMap) 📰 - Official docs --- diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 3ff7cb6a..4da5fed3 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -55,8 +55,7 @@ const subscribe = example.subscribe(val => console.log(`RESULT: ${val}`)); ### Additional Resources -- [expand](https://rxjs.dev/api/operators/expand) - 📰 - Official docs +- [expand](https://rxjs.dev/api/operators/expand) 📰 - Official docs --- diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index b93fb190..8fb5b8fc 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -63,7 +63,10 @@ const people = [ from(people) .pipe( - groupBy(person => person.age, p => p.name), + groupBy( + person => person.age, + p => p.name + ), mergeMap(group => zip(of(group.key), group.pipe(toArray()))) ) .subscribe(console.log); @@ -78,8 +81,7 @@ from(people) ### Additional Resources -- [groupBy](https://rxjs.dev/api/operators/groupBy) - 📰 - Official docs +- [groupBy](https://rxjs.dev/api/operators/groupBy) 📰 - Official docs - [Group higher order observables with RxJS groupBy](https://egghead.io/lessons/rxjs-group-higher-order-observables-with-rxjs-groupby?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz - [Use groupBy in real RxJS applications](https://egghead.io/lessons/rxjs-use-groupby-in-real-rxjs-applications?course=use-higher-order-observables-in-rxjs-effectively) diff --git a/operators/transformation/map.md b/operators/transformation/map.md index b1b49374..4c489b57 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 53096389..4efa6410 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index d0a91ca3..d205808b 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -11,8 +11,8 @@ 💡 If only one inner subscription should be active at a time, try [`switchMap`](switchmap.md)! -💡 If the order of emission and subscription of inner observables is -important, try [`concatMap`](concatmap.md)! +💡 If the order of emission and subscription of inner observables is important, +try [`concatMap`](concatmap.md)! --- @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 5](#example-5-mergemap-with-concurrent-value). -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -214,10 +214,9 @@ source$ ### Additional Resources -- [mergeMap](https://rxjs.dev/api/operators/mergeMap) 📰 - Official - docs -- [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) - 🎥 💵 - Ben Lesh +- [mergeMap](https://rxjs.dev/api/operators/mergeMap) 📰 - Official docs +- [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 💵 - + Ben Lesh - [Async requests and responses in RxJS](https://egghead.io/lessons/rxjs-04-reactive-programming-async-requests-and-responses-in-rxjs) 🎥 💵 - André Staltz - [Use RxJS mergeMap to map and merge higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-mergemap-to-map-and-merge-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index 25b4aa93..5d58e303 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -4,7 +4,7 @@ ## Accumulate value over time via merged observables. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -43,8 +43,8 @@ mouseDown$ ### Additional Resources -- [pluck](https://rxjs-dev.firebaseapp.com/api/operators/mergeScan) - 📰 - Official docs +- [pluck](https://rxjs-dev.firebaseapp.com/api/operators/mergeScan) 📰 - + Official docs --- diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index d4519997..080a8a34 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -76,7 +76,6 @@ const subscribe = merge( ).subscribe(val => console.log(val)); ``` - ##### Example 3: (v6.5+) Partition as a static function ( @@ -114,11 +113,9 @@ const subscribe = merge( ).subscribe(val => console.log(val)); ``` - ### Additional Resources -- [partition](https://rxjs.dev/api/operators/partition) - 📰 - Official docs +- [partition](https://rxjs.dev/api/operators/partition) 📰 - Official docs --- diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 7b0e234f..7e0cc8ff 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index f22ffd3b..4745b263 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ 💡 If you need the current accumulated value on each emission, try [scan](scan.md)! -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -34,8 +34,7 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); ### Additional Resources -- [reduce](https://rxjs.dev/api/operators/reduce) - 📰 - Official docs +- [reduce](https://rxjs.dev/api/operators/reduce) 📰 - Official docs - [Scan() vs reduce() | RxJS TUTORIAL](https://www.youtube.com/watch?v=myEeo2rZc3g) 🎥 - Academind - [Build your own reduce operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=reduce#app) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 2bb99834..f9dc48e5 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -6,12 +6,11 @@ --- -💡 You can create [Redux](http://redux.js.org)-like state management with -scan! +💡 You can create [Redux](http://redux.js.org)-like state management with scan! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -107,7 +106,7 @@ const fakeRequest = of('response').pipe(delay(2000)); interval(1000) .pipe( mergeMap(_ => fakeRequest), - scan((all, current) => [...all, current], []) + scan < string > ((all, current) => [...all, current], []) ) .subscribe(console.log); ``` @@ -134,8 +133,7 @@ interval(1000) ### Additional Resources -- [scan](https://rxjs.dev/api/operators/scan) - 📰 - Official docs +- [scan](https://rxjs.dev/api/operators/scan) 📰 - Official docs - [Aggregating streams with reduce and scan using RxJS](https://egghead.io/lessons/rxjs-aggregating-streams-with-reduce-and-scan-using-rxjs) 🎥 - Ben Lesh - [Updating data with scan](https://egghead.io/lessons/rxjs-updating-data-with-scan?course=step-by-step-async-javascript-with-rxjs) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 051adde9..2ccf0f6e 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -144,8 +144,7 @@ timer(0, 5000) ### Additional Resources -- [switchMap](https://rxjs.dev/api/operators/switchMap) - 📰 - Official docs +- [switchMap](https://rxjs.dev/api/operators/switchMap) 📰 - Official docs - [Avoiding switchMap-Related Bugs](https://blog.angularindepth.com/switchmap-bugs-b6de69155524) - Nicholas Jamieson - [Starting a stream with switchMap](https://egghead.io/lessons/rxjs-starting-a-stream-with-switchmap?course=step-by-step-async-javascript-with-rxjs) diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index bc0fbf0f..34ed9d8a 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -53,8 +53,7 @@ click$ ### Additional Resources -- [switchMapTo](https://rxjs.dev/api/operators/switchMapTo) - 📰 - Official docs +- [switchMapTo](https://rxjs.dev/api/operators/switchMapTo) 📰 - Official docs --- diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 2fcb9919..9222a1f7 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -20,10 +20,7 @@ import { interval } from 'rxjs'; import { toArray, take } from 'rxjs/operators'; interval(100) - .pipe( - take(10), - toArray() - ) + .pipe(take(10), toArray()) .subscribe(console.log); // output: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] @@ -36,8 +33,7 @@ interval(100) ### Additional Resources -- [toArray](https://rxjs.dev/api/operators/toArray) - 📰 - Official docs +- [toArray](https://rxjs.dev/api/operators/toArray) 📰 - Official docs --- diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index 22009a32..da951eac 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -51,8 +51,7 @@ const subscribeTwo = example ### Additional Resources -- [windowCount](https://rxjs.dev/api/operators/windowCount) - 📰 - Official docs +- [windowCount](https://rxjs.dev/api/operators/windowCount) 📰 - Official docs --- diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 9a18db79..6f99c00c 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -49,8 +49,7 @@ const subscribeTwo = example ### Additional Resources -- [windowTime](https://rxjs.dev/api/operators/windowTime) - 📰 - Official docs +- [windowTime](https://rxjs.dev/api/operators/windowTime) 📰 - Official docs --- diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 6fe05614..3be32dfb 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -55,8 +55,7 @@ const subscribeTwo = example ### Additional Resources -- [windowToggle](https://rxjs.dev/api/operators/windowToggle) - 📰 - Official docs +- [windowToggle](https://rxjs.dev/api/operators/windowToggle) 📰 - Official docs - [Split an RxJS observable conditionally with windowToggle](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-conditionally-with-windowtoggle?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 42efdfde..7d751d62 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -53,8 +53,7 @@ const subscribeTwo = example ### Additional Resources -- [windowWhen](https://rxjs.dev/api/operators/windowWhen) - 📰 - Official docs +- [windowWhen](https://rxjs.dev/api/operators/windowWhen) 📰 - Official docs --- diff --git a/operators/utility/delay.md b/operators/utility/delay.md index c1ef339d..289ccdcc 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,7 +4,7 @@ ## Delay emitted values by given time. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index a9ec46f7..8616b025 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index efe7ae4e..c8c7c6ca 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -7,7 +7,7 @@ [![UltimateRxJS][uc-image]][uc-url] [uc-image]: - https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX + https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz [uc-url]: https://ultimatecourses.com/courses/rxjs?ref=4 ### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index 0b427fac..7ce9db72 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index 269e0cff..642faa4c 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 2be3c9e6..05bb02db 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -42,8 +42,7 @@ delayedThing ### Additional Resources -- [repeat](https://rxjs.dev/api/operators/repeat) - 📰 - Official docs +- [repeat](https://rxjs.dev/api/operators/repeat) 📰 - Official docs --- diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index aa41c4c4..06ed7bc0 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -6,12 +6,12 @@ --- -💡 If you just want to repeat a specified number of times, try [retry](retry.md)! +💡 If you just want to repeat a specified number of times, try +[retry](retry.md)! --- - -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -23,7 +23,7 @@ ```js // RxJS v6+ -import { of, interval } from 'rxjs'; +import { of, interval } from 'rxjs'; import { repeatWhen, take } from 'rxjs/operators'; const repeatInterval$ = interval(1000).pipe(take(5)); @@ -44,8 +44,7 @@ hey! ### Additional Resources -- [repeatWhen](https://rxjs.dev/api/operators/repeatWhen) - 📰 - Official docs +- [repeatWhen](https://rxjs.dev/api/operators/repeatWhen) 📰 - Official docs --- diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 6e7b5334..9b10cf04 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -4,7 +4,7 @@ ## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -20,10 +20,7 @@ import { fromEvent } from 'rxjs'; import { timeInterval, tap } from 'rxjs/operators'; fromEvent(document, 'mousedown') - .pipe( - timeInterval(), - tap(console.log) - ) + .pipe(timeInterval(), tap(console.log)) .subscribe( i => (document.body.innerText = `milliseconds since last click: ${i.interval}`) @@ -36,8 +33,7 @@ fromEvent(document, 'mousedown') ### Additional Resources -- [timeInterval](https://rxjs.dev/api/operators/timeInterval) - 📰 - Official docs +- [timeInterval](https://rxjs.dev/api/operators/timeInterval) 📰 - Official docs --- diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 39415fac..9398717d 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -44,8 +44,7 @@ of(4000, 3000, 2000) ### Additional Resources -- [timeout](https://rxjs.dev/api/operators/timeout) - 📰 - Official Docs +- [timeout](https://rxjs.dev/api/operators/timeout) 📰 - Official Docs --- diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index b3609b2a..afa7eec6 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -4,7 +4,7 @@ ## Subscribe to second Observable if no emission occurs in given time span. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -41,8 +41,8 @@ of(timeoutThreshold + 1, timeoutThreshold - 1, timeoutThreshold + 3) ### Additional Resources -- [timeoutWith](https://rxjs-dev.firebaseapp.com/api/operators/timeoutWith) - 📰 - Official Docs +- [timeoutWith](https://rxjs-dev.firebaseapp.com/api/operators/timeoutWith) 📰 - + Official Docs --- diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 51fa02a5..43644edf 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -10,7 +10,7 @@ --- -
[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4)
+
[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4)
### Examples diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index 02cf3a84..9c7568e7 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Alphabet Invasion Game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/battleship-game.md b/recipes/battleship-game.md index b97d7106..30609a30 100644 --- a/recipes/battleship-game.md +++ b/recipes/battleship-game.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Battleship Game where you play against the computer. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -116,7 +116,10 @@ const getValidMoves = ( row[colIndex - 1] === ship || row[colIndex + 1] === ship; if (isHorizontal) { const [left, right] = getTwoValidMoves(row, ship); - return [{ x: rowIndex, y: left }, { x: rowIndex, y: right }]; + return [ + { x: rowIndex, y: left }, + { x: rowIndex, y: right } + ]; } const isVertical = @@ -127,7 +130,10 @@ const getValidMoves = ( board.map(r => r.filter((c, j) => j === colIndex)[0]), ship ); - return [{ x: up, y: colIndex }, { x: down, y: colIndex }]; + return [ + { x: up, y: colIndex }, + { x: down, y: colIndex } + ]; } return [ @@ -200,10 +206,7 @@ const addShips$ = (player: string, boards: Boards) => ); const playerSetup$ = (boards: Boards) => - fromEvent(document, 'click').pipe( - validClicks$, - addShips$(PLAYER, boards) - ); + fromEvent(document, 'click').pipe(validClicks$, addShips$(PLAYER, boards)); const computerSetup$ = (boards: Boards) => interval().pipe( diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md index 430f8fcf..e022af68 100644 --- a/recipes/breakout-game.md +++ b/recipes/breakout-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Breakout game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/car-racing-game.md b/recipes/car-racing-game.md index b2fb3fef..8e79689d 100644 --- a/recipes/car-racing-game.md +++ b/recipes/car-racing-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Car Racing game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index d1346f8a..d3fac7ca 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of scan operator for state management in simple game -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -54,7 +54,11 @@ const game$ = fromEvent(dot, 'mouseover').pipe( takeWhile(isNotGameOver) ); -game$.subscribe(n => {}, e => {}, () => setTimerText('ouch!')); +game$.subscribe( + n => {}, + e => {}, + () => setTimerText('ouch!') +); ``` #### dom-updater.ts diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md index 40866c9e..f2d29f75 100644 --- a/recipes/click-ninja-game.md +++ b/recipes/click-ninja-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of time interval operator in a simple game -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md index 6ba44be8..c2dc53d7 100644 --- a/recipes/flappy-bird-game.md +++ b/recipes/flappy-bird-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Flappy Bird like game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/gameloop.md b/recipes/gameloop.md index fb2ce4c7..4ac40f69 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md index 4262ff94..57d5201c 100644 --- a/recipes/horizontal-scroll-indicator.md +++ b/recipes/horizontal-scroll-indicator.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of a horizontal scroll indicator. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -29,10 +29,7 @@ const getScrollWidth = () => { const setScroll = _ => (scrollIndication.style.width = getScrollWidth() + '%'); fromEvent(document, 'scroll') - .pipe( - throttleTime(20), - tap(setScroll) - ) + .pipe(throttleTime(20), tap(setScroll)) .subscribe(); ``` diff --git a/recipes/http-polling.md b/recipes/http-polling.md index 9fa3156c..761b6d2f 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,6 +1,6 @@ # HTTP Polling -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index fb110caa..4f2481ea 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of lockscreen functionality (known for example from smartphones). -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -183,15 +183,21 @@ export const resetPasswordPad = () => { } @keyframes pulse { - from { transform: scale(1); } - 50% { transform: scale(0.99); } - to { transform: scale(1); } + from { + transform: scale(1); + } + 50% { + transform: scale(0.99); + } + to { + transform: scale(1); + } } Expected Password: - -
+ +
Password:
diff --git a/recipes/matrix-digital-rain.md b/recipes/matrix-digital-rain.md index 6a954149..3b049bb4 100644 --- a/recipes/matrix-digital-rain.md +++ b/recipes/matrix-digital-rain.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Matrix Digital Rain. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/memory-game.md b/recipes/memory-game.md index a0644ae4..c167463e 100644 --- a/recipes/memory-game.md +++ b/recipes/memory-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS game to train your memory. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -79,7 +79,11 @@ const showSequenceToMemorize$ = (memorySize: number) => ( ); const memoryGame$ = memorySize => - generate(1, x => x <= memorySize, x => x + 1).pipe( + generate( + 1, + x => x <= memorySize, + x => x + 1 + ).pipe( scan((acc: number[], _: number): number[] => [...acc, random() + 1], []), switchMap(showSequenceToMemorize$(memorySize)) ); diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md index 4b40aebd..c5e36350 100644 --- a/recipes/mine-sweeper-game.md +++ b/recipes/mine-sweeper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Mine Sweeper Game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -34,11 +34,7 @@ const mines$ = of( Array(size) .fill(0) .map(e => Array(size).fill(0)) -).pipe( - map(addMines), - map(addMarks), - tap(renderMinefield) -); +).pipe(map(addMines), map(addMarks), tap(renderMinefield)); const click$ = mines => fromEvent(document, 'click').pipe( diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md index e2a8c821..569de016 100644 --- a/recipes/platform-jumper-game.md +++ b/recipes/platform-jumper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Platform Jumper game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index 954dc9c7..6373d8c3 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -72,10 +72,7 @@ const array$ = from(observables); const requests$ = array$.pipe(concatAll()); const clicks$ = fromEvent(loadButton, 'click'); -const progress$ = clicks$.pipe( - switchMapTo(requests$), - share() -); +const progress$ = clicks$.pipe(switchMapTo(requests$), share()); const count$ = array$.pipe(count()); diff --git a/recipes/save-indicator.md b/recipes/save-indicator.md index 66697511..2bf5db81 100644 --- a/recipes/save-indicator.md +++ b/recipes/save-indicator.md @@ -3,7 +3,7 @@ This recipe demonstrates the creation of a google docs-esque save indicator with RxJS. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 278c9c55..c018ecab 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) #### Vanilla JS diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index 6145f421..95a9f594 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Space Invaders Game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/stop-watch.md b/recipes/stop-watch.md index 806eb856..93a97e55 100644 --- a/recipes/stop-watch.md +++ b/recipes/stop-watch.md @@ -6,7 +6,7 @@ This recipe demonstrates RxJS implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by [@Michael_Hladky](https://twitter.com/michael_hladky) -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -30,35 +30,47 @@ interface State { } const getElem = (id: string): HTMLElement => document.getElementById(id); -const getVal = (id: string): number => parseInt((getElem(id))['value']); +const getVal = (id: string): number => parseInt(getElem(id)['value']); const fromClick = (id: string) => fromEvent(getElem(id), 'click'); -const fromClickAndMapTo = (id: string, obj: {}) => fromClick(id).pipe(mapTo(obj)); -const fromClickAndMap = (id: string, fn: (_) => {}) => fromClick(id).pipe(map(fn)); -const setValue = (val: number) => getElem('counter').innerText = val.toString() - -const events$ = - merge( - fromClickAndMapTo('start', { count: true }), - fromClickAndMapTo('pause', { count: false }), - fromClickAndMapTo('reset', { value: 0 }), - fromClickAndMapTo('countup', { countup: true }), - fromClickAndMapTo('countdown', { countup: false }), - fromClickAndMap('setto', _ => ({ value: getVal('value') })), - fromClickAndMap('setspeed', _ => ({ speed: getVal('speed') })), - fromClickAndMap('setincrease', _ => ({ increase: getVal('increase') })) - ); +const fromClickAndMapTo = (id: string, obj: {}) => + fromClick(id).pipe(mapTo(obj)); +const fromClickAndMap = (id: string, fn: _ => {}) => + fromClick(id).pipe(map(fn)); +const setValue = (val: number) => + (getElem('counter').innerText = val.toString()); + +const events$ = merge( + fromClickAndMapTo('start', { count: true }), + fromClickAndMapTo('pause', { count: false }), + fromClickAndMapTo('reset', { value: 0 }), + fromClickAndMapTo('countup', { countup: true }), + fromClickAndMapTo('countdown', { countup: false }), + fromClickAndMap('setto', _ => ({ value: getVal('value') })), + fromClickAndMap('setspeed', _ => ({ speed: getVal('speed') })), + fromClickAndMap('setincrease', _ => ({ increase: getVal('increase') })) +); const stopWatch$ = events$.pipe( - startWith({ count: false, speed: 1000, value: 0, countup: true, increase: 1 }), + startWith({ + count: false, + speed: 1000, + value: 0, + countup: true, + increase: 1 + }), scan((state: State, curr): State => ({ ...state, ...curr }), {}), tap((state: State) => setValue(state.value)), - switchMap((state: State) => state.count - ? interval(state.speed) - .pipe( - tap(_ => state.value += state.countup ? state.increase : -state.increase), - tap(_ => setValue(state.value)) - ) - : NEVER) + switchMap((state: State) => + state.count + ? interval(state.speed).pipe( + tap( + _ => + (state.value += state.countup ? state.increase : -state.increase) + ), + tap(_ => setValue(state.value)) + ) + : NEVER + ) ); stopWatch$.subscribe(); diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md index 181cd56c..b8cd6bbd 100644 --- a/recipes/swipe-to-refresh.md +++ b/recipes/swipe-to-refresh.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md index f9295761..ee4ebc56 100644 --- a/recipes/tank-battle-game.md +++ b/recipes/tank-battle-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tank Battle like game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/tetris-game.md b/recipes/tetris-game.md index f38dbc51..335d6e34 100644 --- a/recipes/tetris-game.md +++ b/recipes/tetris-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tetris game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code @@ -17,7 +17,15 @@ This recipe demonstrates RxJS implementation of Tetris game. ```js // RxJS v6+ import { fromEvent, of, interval, combineLatest } from 'rxjs'; -import { finalize, map, pluck, scan, startWith, takeWhile, tap } from 'rxjs/operators'; +import { + finalize, + map, + pluck, + scan, + startWith, + takeWhile, + tap +} from 'rxjs/operators'; import { score, randomBrick, clearGame, initialState } from './game'; import { render, renderGameOver } from './html-renderer'; import { handleKeyPress, resetKey } from './keyboard'; @@ -29,38 +37,43 @@ import { State, Brick, Key } from './interfaces'; const player$ = combineLatest( of(randomBrick()), of({ code: '' }), - fromEvent(document, 'keyup').pipe(startWith({ code: undefined }), pluck('code')) + fromEvent(document, 'keyup').pipe( + startWith({ code: undefined }), + pluck('code') + ) ).pipe( - map(([brick, key, keyCode]: [Brick, Key, string]) => (key.code = keyCode, [brick, key])) + map( + ([brick, key, keyCode]: [Brick, Key, string]) => ( + (key.code = keyCode), [brick, key] + ) + ) ); -const state$ = interval(1000) - .pipe( - scan((state, _) => (state.x++ , state), initialState) - ); +const state$ = interval(1000).pipe( + scan < number, + State > ((state, _) => (state.x++, state), initialState) +); + +const game$ = combineLatest(state$, player$).pipe( + scan < [State, [Brick, Key]], + [State, [Brick, Key]] > + (([state, [brick, key]]) => ( + (state = handleKeyPress(state, brick, key)), + (([newState, rotatedBrick]: [State, Brick]) => ( + (state = newState), (brick = rotatedBrick) + ))(rotate(state, brick, key)), + (([newState, collidedBrick]: [State, Brick]) => ( + (state = newState), (brick = collidedBrick) + ))(collide(state, brick)), + (state = score(state)), + resetKey(key), + [state, [brick, key]] + )), + tap(([state, [brick, key]]) => render(state, brick)), + takeWhile(([state, [brick, key]]) => !state.game[1].some(c => c === BRICK)), + finalize(renderGameOver) +); -const game$ = combineLatest(state$, player$) - .pipe( - scan<[State, [Brick, Key]], [State, [Brick, Key]]>( - ([state, [brick, key]]) => ( - state = handleKeyPress(state, brick, key), - (([newState, rotatedBrick]: [State, Brick]) => ( - state = newState, - brick = rotatedBrick - ))(rotate(state, brick, key)), - (([newState, collidedBrick]: [State, Brick]) => ( - state = newState, - brick = collidedBrick - ))(collide(state, brick)), - state = score(state), - resetKey(key), - [state, [brick, key]] - )), - tap(([state, [brick, key]]) => render(state, brick)), - takeWhile(([state, [brick, key]]) => !state.game[1].some(c => c === BRICK)), - finalize(renderGameOver) - ); - game$.subscribe(); ``` @@ -71,29 +84,54 @@ import { GAME_SIZE, EMPTY, BRICK } from './constants'; import { State } from './interfaces'; const bricks = [ - [[0, 0, 0], [1, 1, 1], [0, 0, 0]], - [[1, 1, 1], [0, 1, 0], [0, 1, 0]], - [[0, 1, 1], [0, 1, 0], [0, 1, 0]], - [[1, 1, 0], [0, 1, 0], [0, 1, 0]], - [[1, 1, 0], [1, 1, 0], [0, 0, 0]] -] - -export const clearGame = () => Array(GAME_SIZE).fill(EMPTY).map(e => Array(GAME_SIZE).fill(EMPTY)); -export const updatePosition = (position: number, column: number) => position === 0 ? column : position; -export const validGame = (game: number[][]) => game.map(r => r.filter((_, i) => i < GAME_SIZE)); -export const validBrick = (brick: number[][]) => brick.filter(e => e.some(b => b === BRICK)); -export const randomBrick = () => bricks[Math.floor(Math.random() * bricks.length)]; - -export const score = (state: State): State => (scoreIndex => ( - scoreIndex > -1 - ? ( - state.score += 1, - state.game.splice(scoreIndex, 1), - state.game = [Array(GAME_SIZE).fill(EMPTY), ...state.game], - state - ) - : state -))(state.game.findIndex(e => e.every(e => e === BRICK))); + [ + [0, 0, 0], + [1, 1, 1], + [0, 0, 0] + ], + [ + [1, 1, 1], + [0, 1, 0], + [0, 1, 0] + ], + [ + [0, 1, 1], + [0, 1, 0], + [0, 1, 0] + ], + [ + [1, 1, 0], + [0, 1, 0], + [0, 1, 0] + ], + [ + [1, 1, 0], + [1, 1, 0], + [0, 0, 0] + ] +]; + +export const clearGame = () => + Array(GAME_SIZE) + .fill(EMPTY) + .map(e => Array(GAME_SIZE).fill(EMPTY)); +export const updatePosition = (position: number, column: number) => + position === 0 ? column : position; +export const validGame = (game: number[][]) => + game.map(r => r.filter((_, i) => i < GAME_SIZE)); +export const validBrick = (brick: number[][]) => + brick.filter(e => e.some(b => b === BRICK)); +export const randomBrick = () => + bricks[Math.floor(Math.random() * bricks.length)]; + +export const score = (state: State): State => + (scoreIndex => + scoreIndex > -1 + ? ((state.score += 1), + state.game.splice(scoreIndex, 1), + (state.game = [Array(GAME_SIZE).fill(EMPTY), ...state.game]), + state) + : state)(state.game.findIndex(e => e.every(e => e === BRICK))); export const initialState = { game: clearGame(), @@ -110,39 +148,51 @@ import { GAME_SIZE, BRICK, EMPTY } from './constants'; import { validBrick, validGame, updatePosition, randomBrick } from './game'; import { State, Brick } from './interfaces'; -const isGoingToLevelWithExistingBricks = (state: State, brick: Brick): boolean => { +const isGoingToLevelWithExistingBricks = ( + state: State, + brick: Brick +): boolean => { const gameHeight = state.game.findIndex(r => r.some(c => c === BRICK)); const brickBottomX = state.x + brick.length - 1; return gameHeight > -1 && brickBottomX + 1 > gameHeight; -} +}; const areAnyBricksColliding = (state: State, brick: Brick): boolean => - validBrick(brick).some((r, i) => r.some((c, j) => - c === EMPTY - ? false - : ((x, y) => state.game[x][y] === c)(i + state.x, j + state.y) - )); + validBrick(brick).some((r, i) => + r.some((c, j) => + c === EMPTY + ? false + : ((x, y) => state.game[x][y] === c)(i + state.x, j + state.y) + ) + ); -const collideBrick = (state: State, brick: Brick, isGoingToCollide: boolean): State => { +const collideBrick = ( + state: State, + brick: Brick, + isGoingToCollide: boolean +): State => { const xOffset = isGoingToCollide ? 1 : 0; validBrick(brick).forEach((r, i) => { - r.forEach((c, j) => - state.game[i + state.x - xOffset][j + state.y] = - updatePosition(state.game[i + state.x - xOffset][j + state.y], c) + r.forEach( + (c, j) => + (state.game[i + state.x - xOffset][j + state.y] = updatePosition( + state.game[i + state.x - xOffset][j + state.y], + c + )) ); }); state.game = validGame(state.game); state.x = 0; - state.y = (GAME_SIZE / 2) - 1; + state.y = GAME_SIZE / 2 - 1; return state; -} +}; export const collide = (state: State, brick: Brick): [State, Brick] => { const isGoingToCollide = isGoingToLevelWithExistingBricks(state, brick) && areAnyBricksColliding(state, brick); - const isOnBottom = state.x + validBrick(brick).length > GAME_SIZE- 1; + const isOnBottom = state.x + validBrick(brick).length > GAME_SIZE - 1; if (isGoingToCollide || isOnBottom) { state = collideBrick(state, brick, isGoingToCollide); @@ -150,7 +200,7 @@ export const collide = (state: State, brick: Brick): [State, Brick] => { } return [state, brick]; -} +}; ``` #### rotation.ts @@ -159,21 +209,39 @@ export const collide = (state: State, brick: Brick): [State, Brick] => { import { GAME_SIZE, BRICK_SIZE, EMPTY } from './constants'; import { State, Brick, Key } from './interfaces'; -const rightOffsetAfterRotation = (state: State, brick: Brick, rotatedBrick: Brick) => - (state.y + rotatedBrick.length === GAME_SIZE + 1) && brick.every(e => e[2] === EMPTY) ? 1 : 0; - -const leftOffsetAfterRotation = (game: State) => game.y < 0 ? 1 : 0; -const emptyBrick = (): Brick => Array(BRICK_SIZE).fill(EMPTY).map(e => Array(BRICK_SIZE).fill(EMPTY)); - -const rotateBrick = (state: State, brick: Brick, rotatedBrick: Brick): [State, Brick] => ( - brick.forEach((r, i) => r.forEach((c, j) => rotatedBrick[j][brick[0].length - 1 - i] = c)), - state.y -= rightOffsetAfterRotation(state, brick, rotatedBrick), - state.y += leftOffsetAfterRotation(state), +const rightOffsetAfterRotation = ( + state: State, + brick: Brick, + rotatedBrick: Brick +) => + state.y + rotatedBrick.length === GAME_SIZE + 1 && + brick.every(e => e[2] === EMPTY) + ? 1 + : 0; + +const leftOffsetAfterRotation = (game: State) => (game.y < 0 ? 1 : 0); +const emptyBrick = (): Brick => + Array(BRICK_SIZE) + .fill(EMPTY) + .map(e => Array(BRICK_SIZE).fill(EMPTY)); + +const rotateBrick = ( + state: State, + brick: Brick, + rotatedBrick: Brick +): [State, Brick] => ( + brick.forEach((r, i) => + r.forEach((c, j) => (rotatedBrick[j][brick[0].length - 1 - i] = c)) + ), + (state.y -= rightOffsetAfterRotation(state, brick, rotatedBrick)), + (state.y += leftOffsetAfterRotation(state)), [state, rotatedBrick] -) +); export const rotate = (state: State, brick: Brick, key: Key): [State, Brick] => - key.code === 'ArrowUp' ? rotateBrick(state, brick, emptyBrick()) : [state, brick] + key.code === 'ArrowUp' + ? rotateBrick(state, brick, emptyBrick()) + : [state, brick]; ``` #### keyboard.ts @@ -182,21 +250,21 @@ export const rotate = (state: State, brick: Brick, key: Key): [State, Brick] => import { GAME_SIZE } from './constants'; import { State, Brick, Key } from './interfaces'; -const xOffset = (brick: Brick, columnIndex: number) => brick.every(e => e[columnIndex] === 0) ? 1 : 0; +const xOffset = (brick: Brick, columnIndex: number) => + brick.every(e => e[columnIndex] === 0) ? 1 : 0; export const handleKeyPress = (state: State, brick: Brick, key: Key): State => ( - state.x += key.code === 'ArrowDown' - ? 1 - : 0, - state.y += key.code === 'ArrowLeft' && state.y > 0 - xOffset(brick, 0) - ? -1 - : key.code === 'ArrowRight' && state.y < GAME_SIZE - 3 + xOffset(brick, 2) + (state.x += key.code === 'ArrowDown' ? 1 : 0), + (state.y += + key.code === 'ArrowLeft' && state.y > 0 - xOffset(brick, 0) + ? -1 + : key.code === 'ArrowRight' && state.y < GAME_SIZE - 3 + xOffset(brick, 2) ? 1 - : 0, + : 0), state ); -export const resetKey = key => key.code = undefined; +export const resetKey = key => (key.code = undefined); ``` #### html-renderer.ts @@ -206,25 +274,29 @@ import { BRICK } from './constants'; import { State, Brick } from './interfaces'; import { updatePosition, validGame, validBrick, clearGame } from './game'; -const createElem = (column: number): HTMLElement => (elem => - ( - elem.style.display = 'inline-block', - elem.style.marginLeft = '3px', - elem.style.height = '6px', - elem.style.width = '6px', - elem.style['background-color'] = column === BRICK - ? 'green' - : 'aliceblue', +const createElem = (column: number): HTMLElement => + (elem => ( + (elem.style.display = 'inline-block'), + (elem.style.marginLeft = '3px'), + (elem.style.height = '6px'), + (elem.style.width = '6px'), + (elem.style['background-color'] = column === BRICK ? 'green' : 'aliceblue'), elem - ))(document.createElement('div')) + ))(document.createElement('div')); export const render = (state: State, brick: Brick): void => { const gameFrame = clearGame(); - state.game.forEach((r, i) => r.forEach((c, j) => gameFrame[i][j] = c)); + state.game.forEach((r, i) => r.forEach((c, j) => (gameFrame[i][j] = c))); validBrick(brick).forEach((r, i) => - r.forEach((c, j) => gameFrame[i + state.x][j + state.y] = - updatePosition(gameFrame[i + state.x][j + state.y], c))); + r.forEach( + (c, j) => + (gameFrame[i + state.x][j + state.y] = updatePosition( + gameFrame[i + state.x][j + state.y], + c + )) + ) + ); document.body.innerHTML = `score: ${state.score}
`; validGame(gameFrame).forEach(r => { @@ -232,9 +304,10 @@ export const render = (state: State, brick: Brick): void => { r.forEach(c => rowContainer.appendChild(createElem(c))); document.body.appendChild(rowContainer); }); -} +}; -export const renderGameOver = () => document.body.innerHTML += '
GAME OVER!'; +export const renderGameOver = () => + (document.body.innerHTML += '
GAME OVER!'); ``` #### interfaces.ts diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index d3f7f384..bf15dbef 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of type ahead client side code. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/uncover-image-game.md b/recipes/uncover-image-game.md index bc5d77a3..ee1707bf 100644 --- a/recipes/uncover-image-game.md +++ b/recipes/uncover-image-game.md @@ -4,19 +4,18 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Uncover Image Game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code -( [StackBlitz](https://stackblitz.com/edit/rxjs-uncover-image?file=index.ts) -) +( [StackBlitz](https://stackblitz.com/edit/rxjs-uncover-image?file=index.ts) ) #### index.ts ```js // RxJS v6+ import { interval } from 'rxjs'; -import { finalize, scan, takeWhile, tap, withLatestFrom } from 'rxjs/operators'; +import { finalize, scan, takeWhile, tap, withLatestFrom } from 'rxjs/operators'; import { keyboardEvents$ } from './keyboard'; import { initialGame, updateGame, isGameOn } from './game'; import { paintGame, paintGameOver } from './html-renderer'; @@ -42,24 +41,22 @@ import { newPlayerFrom, movePlayer } from './player'; import { newEnemiesFrom } from './enemy'; const intersect = (state: State): State => ( - state.moves.some((m: Move) => + state.moves.some((m: Move) => state.enemies.some(e => m.x === e.x && m.y === e.y) - ) - ? ( - state.player.lives -= 1, - state.player.x = 0, - state.player.y = 0, - state.moves = [] - ) + ) + ? ((state.player.lives -= 1), + (state.player.x = 0), + (state.player.y = 0), + (state.moves = [])) : noop, state ); const initialGame: State = { - player: {x: 0, y: 0, lives: 3}, + player: { x: 0, y: 0, lives: 3 }, enemies: [ - {x: 10, y: 10, moveDuration: 0, dirX: 1, dirY: 1}, - {x: 50, y: 50, moveDuration: 0, dirX: -1, dirY: 1} + { x: 10, y: 10, moveDuration: 0, dirX: 1, dirY: 1 }, + { x: 50, y: 50, moveDuration: 0, dirX: -1, dirY: 1 } ], key: '', moves: [], @@ -67,17 +64,17 @@ const initialGame: State = { }; const updateGame = (state: State, [_, key]: [number, string]): State => ( - state.enemies = newEnemiesFrom(state), - state.player = newPlayerFrom(state, key), - state = intersect(state), - state = movePlayer(state, key), - state.key = key, + (state.enemies = newEnemiesFrom(state)), + (state.player = newPlayerFrom(state, key)), + (state = intersect(state)), + (state = movePlayer(state, key)), + (state.key = key), state ); -const isGameOn = (state: State): boolean => state.player.lives > 0 +const isGameOn = (state: State): boolean => state.player.lives > 0; -export { initialGame, updateGame, isGameOn } +export { initialGame, updateGame, isGameOn }; ``` #### player.ts @@ -94,41 +91,41 @@ const left = 'ArrowLeft'; const right = 'ArrowRight'; const newPlayerFrom = (state: State, key: string): Player => ( - state.player.x += keyToDirection(key, down, up), - state.player.y += keyToDirection(key, right, left), - state.player.x < 0 ? state.player.x = 0 : noop, - state.player.x > size ? state.player.x = size : noop, - state.player.y < 0 ? state.player.y = 0 : noop, - state.player.y > size ? state.player.y = size : noop, + (state.player.x += keyToDirection(key, down, up)), + (state.player.y += keyToDirection(key, right, left)), + state.player.x < 0 ? (state.player.x = 0) : noop, + state.player.x > size ? (state.player.x = size) : noop, + state.player.y < 0 ? (state.player.y = 0) : noop, + state.player.y > size ? (state.player.y = size) : noop, state.player ); -const getEnclosedArea = (state: State): Move[] => +const getEnclosedArea = (state: State): Move[] => state.moves.length <= 1 ? [] : [ ...state.moves - .slice(state.moves.findIndex(e => - e.x === state.player.x && e.y === state.player.y)) + .slice( + state.moves.findIndex( + e => e.x === state.player.x && e.y === state.player.y + ) + ) .filter(e => e.dirChange), state.moves.pop() ]; const movePlayer = (state: State, key: string): State => ( - state.moves.some(e => e.x === state.player.x && e.y === state.player.y) - ? ( - state.corners = getEnclosedArea(state), - state.moves = [] - ) + state.moves.some(e => e.x === state.player.x && e.y === state.player.y) + ? ((state.corners = getEnclosedArea(state)), (state.moves = [])) : state.moves.push({ x: state.player.x, y: state.player.y, - dirChange: state.key !== key + dirChange: state.key !== key }), state ); -export { newPlayerFrom, movePlayer } +export { newPlayerFrom, movePlayer }; ``` #### enemy.ts @@ -139,46 +136,46 @@ import { Enemy, State } from './interfaces'; import { size } from './constants'; const newEnemiesFrom = (state: State): Enemy[] => ( - state.enemies.forEach(e => ( - e.x <= 0 || e.x > size ? e.dirX *= -1 : noop, - e.y <= 0 || e.y > size ? e.dirY *= -1 : noop, - e.x += e.dirX, - e.y += e.dirY, - e.moveDuration += 1, - e.moveDuration > 100 - ? ( - e.dirX = Math.random() > 0.5 ? 1 : -1, - e.dirY = Math.random() > 0.5 ? 1 : -1, - e.moveDuration = 0 - ) - : noop - )), + state.enemies.forEach( + e => ( + e.x <= 0 || e.x > size ? (e.dirX *= -1) : noop, + e.y <= 0 || e.y > size ? (e.dirY *= -1) : noop, + (e.x += e.dirX), + (e.y += e.dirY), + (e.moveDuration += 1), + e.moveDuration > 100 + ? ((e.dirX = Math.random() > 0.5 ? 1 : -1), + (e.dirY = Math.random() > 0.5 ? 1 : -1), + (e.moveDuration = 0)) + : noop + ) + ), state.enemies ); -export { newEnemiesFrom } +export { newEnemiesFrom }; ``` #### keyboard.ts ```js -import { fromEvent } from "rxjs"; -import { pluck, startWith } from "rxjs/operators"; +import { fromEvent } from 'rxjs'; +import { pluck, startWith } from 'rxjs/operators'; const positionChangeUnit = 2; -export const keyboardEvents$ = fromEvent(document, "keydown") - .pipe( - pluck("code"), - startWith('') - ); +export const keyboardEvents$ = fromEvent(document, 'keydown').pipe( + pluck < KeyboardEvent, + string > 'code', + startWith('') +); -export const keyToDirection = (key: string, key1: string, key2: string): number => - key === key1 - ? positionChangeUnit - : key === key2 - ? -positionChangeUnit - : 0; +export const keyToDirection = ( + key: string, + key1: string, + key2: string +): number => + key === key1 ? positionChangeUnit : key === key2 ? -positionChangeUnit : 0; ``` #### interfaces.ts @@ -195,7 +192,7 @@ interface Player extends GameObject { interface Enemy extends GameObject { moveDuration: number; - dirX: number; + dirX: number; dirY: number; } @@ -207,11 +204,11 @@ interface State { player: Player; enemies: Enemy[]; key: string; - moves: Move[], - corners: Move[] + moves: Move[]; + corners: Move[]; } -export { GameObject, Player, Enemy, State } +export { GameObject, Player, Enemy, State }; ``` #### constants.ts @@ -219,7 +216,7 @@ export { GameObject, Player, Enemy, State } ```js const size = 200; -export { size } +export { size }; ``` #### html-renderer.ts @@ -227,24 +224,27 @@ export { size } ```js import { State, GameObject } from './interfaces'; -const clearPlayerPath = _ => +const clearPlayerPath = _ => document .querySelectorAll('circle') .forEach(e => document.querySelector('#svg_container').removeChild(e)); const addCircleColored = (color: string) => (e: GameObject) => { - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); + const circle = document.createElementNS( + 'http://www.w3.org/2000/svg', + 'circle' + ); circle.setAttribute('cx', e.y); circle.setAttribute('cy', e.x); circle.setAttribute('r', '2'); circle.setAttribute('stroke', color); circle.setAttribute('strokeWidth', '1'); document.querySelector('#svg_container').appendChild(circle); -} +}; -const addPlayerPath = (state: State) => +const addPlayerPath = (state: State) => state.moves.forEach(addCircleColored('gray')); -const addEnemy = (state: State) => +const addEnemy = (state: State) => state.enemies.forEach(addCircleColored('red')); const addHoles = (state: State) => { @@ -252,31 +252,34 @@ const addHoles = (state: State) => { return; } - const createPathFromCorners = (a, c) => a += - `${a.endsWith('Z') ? 'M' : 'L'} ${c.y} ${c.x} ${c.dirChange ? '' : 'Z'}`; - const newPath = `M${state.corners[0].y} ${state.corners[0].x}` - + state.corners.reduce(createPathFromCorners, ''); + const createPathFromCorners = (a, c) => + (a += `${a.endsWith('Z') ? 'M' : 'L'} ${c.y} ${c.x} ${ + c.dirChange ? '' : 'Z' + }`); + const newPath = + `M${state.corners[0].y} ${state.corners[0].x}` + + state.corners.reduce(createPathFromCorners, ''); const maskPath = document.querySelector('#mask_path'); const currentPath = maskPath.getAttribute('d'); const path = newPath + ' ' + currentPath; maskPath.setAttribute('d', path); -} +}; -const paintInfo = (text: string) => - document.querySelector('#info').innerHTML = text; -const paintLives = (state: State) => - paintInfo(`lives: ${state.player.lives}`); +const paintInfo = (text: string) => + (document.querySelector('#info').innerHTML = text); +const paintLives = (state: State) => paintInfo(`lives: ${state.player.lives}`); -const updateSvgPath = (state: State) => - [clearPlayerPath, addPlayerPath, addEnemy, addHoles, paintLives] - .forEach(fn => fn(state)); +const updateSvgPath = (state: State) => + [clearPlayerPath, addPlayerPath, addEnemy, addHoles, paintLives].forEach(fn => + fn(state) + ); const paintGame = updateSvgPath; const paintGameOver = () => paintInfo('Game Over !!!'); -export { paintGame, paintGameOver } +export { paintGame, paintGameOver }; ``` #### index.html @@ -285,16 +288,19 @@ export { paintGame, paintGameOver }
- - + + RxJs - +
Use arrows to uncover image!!!
``` diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index 7c513423..858eec38 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -2,7 +2,7 @@ ## Emits its last value on completion -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index ea110035..519674df 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -4,12 +4,12 @@ --- -💡 If you want the last emitted value(s) on subscription, but do not need to supply a seed value, check out [ReplaySubject](replaysubject.md) instead! +💡 If you want the last emitted value(s) on subscription, but do not need to +supply a seed value, check out [ReplaySubject](replaysubject.md) instead! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) - +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index a8a4a41c..999d49cf 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -2,7 +2,7 @@ ## "Replays" or emits old values to new subscribers -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/subject.md b/subjects/subject.md index e0e15d7c..77e53778 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -2,7 +2,7 @@ ## A special type of Observable which shares a single execution path among observers -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1htrban3k3Z8CxiKwEV6bdmxW5Wu8xdWX "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples @@ -20,11 +20,11 @@ const sub = new Subject(); sub.next(1); sub.subscribe(x => { - console.log('Subscriber A', x) + console.log('Subscriber A', x); }); sub.next(2); // OUTPUT => Subscriber A 2 sub.subscribe(x => { - console.log('Subscriber B', x) + console.log('Subscriber B', x); }); sub.next(3); // OUTPUT => Subscriber A 3, Subscriber B 3 (logged from both subscribers) ``` @@ -36,8 +36,8 @@ sub.next(3); // OUTPUT => Subscriber A 3, Subscriber B 3 (logged from both subsc ### Additional Resources -- [Subject](https://rxjs-dev.firebaseapp.com/api/index/class/Subject) - 📰 - Official docs +- [Subject](https://rxjs-dev.firebaseapp.com/api/index/class/Subject) 📰 - + Official docs --- From af89682f75fca7b4db12e8ecefded38ebb8fc973 Mon Sep 17 00:00:00 2001 From: Yurii Betrozov Date: Mon, 13 Apr 2020 02:03:24 +0300 Subject: [PATCH 209/256] fix(typo): fix typos in get-started-transforming.md (#258) --- concepts/get-started-transforming.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/concepts/get-started-transforming.md b/concepts/get-started-transforming.md index 7ec6bf3d..a1153ca8 100644 --- a/concepts/get-started-transforming.md +++ b/concepts/get-started-transforming.md @@ -278,7 +278,7 @@ import { map } from 'rxjs/operators'; const keyup$ = fromEvent(document, 'keyup'); -click$ +keyup$ .pipe(map(event => event.code)) // 'Space', 'Enter' .subscribe(console.log); @@ -306,7 +306,7 @@ import { pluck } from 'rxjs/operators'; const keyup$ = fromEvent(document, 'keyup'); -click$ +keyup$ .pipe(pluck('code')) // 'Space', 'Enter' .subscribe(console.log); @@ -320,7 +320,7 @@ element on click, we could pass both of these properties to `pluck` in order: import { fromEvent } from 'rxjs'; import { pluck } from 'rxjs/operators'; -const keyup$ = fromEvent(document, 'click'); +const click$ = fromEvent(document, 'click'); click$ .pipe(pluck('target', 'nodeName')) @@ -366,7 +366,7 @@ import { map } from 'rxjs/operators'; const click$ = fromEvent(document, 'click'); -keyup$ +click$ .pipe(map(() => 'You clicked!')) // 'You clicked!', 'You clicked!' .subscribe(console.log); From 2503a41060f06a1a4972c22beff1d25b29275d36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micka=C3=ABl?= Date: Mon, 20 Apr 2020 16:03:43 +0200 Subject: [PATCH 210/256] fix(operators): fix time-based-operators-comparison.md (#257) --- concepts/time-based-operators-comparison.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/concepts/time-based-operators-comparison.md b/concepts/time-based-operators-comparison.md index 31ad654d..e3b2236f 100644 --- a/concepts/time-based-operators-comparison.md +++ b/concepts/time-based-operators-comparison.md @@ -50,27 +50,27 @@ merge( // output /* -0 +i: 0 throttleTime:0 -1 -2 +i: 1 +i: 2 bufferTime:0,1 sampleTime:1 -3 +i: 3 auditTime:3 -4 +i: 4 throttleTime:4 -5 +i: 5 bufferTime:2,3,4 sampleTime:4 -6 -7 +i: 6 +i: 7 auditTime:7 -8 +i: 8 bufferTime:5,6,7 sampleTime:7 throttleTime:8 -9 +i: 9 bufferTime:8,9 debounceTime:9 From 3b0e3da73597f328e025e7033c2158804226b0c6 Mon Sep 17 00:00:00 2001 From: Brandon Faulkner Date: Tue, 16 Jun 2020 16:08:19 -0500 Subject: [PATCH 211/256] Fix typo in word `amount` (#262) --- operators/filtering/audittime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index 8e15ce65..67f31745 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -6,7 +6,7 @@ ### Why use `auditTime` -When you are interested in ignoring a source observable for a given amout of time, you can use `auditTime`. A possible use case is to only emit certain events (i.e. mouse clicks) at a maximum rate per second. After the specified duration has passed, the timer is disabled and the most recent source value is emitted on the output Observable, and this process repeats for the next source value. +When you are interested in ignoring a source observable for a given amount of time, you can use `auditTime`. A possible use case is to only emit certain events (i.e. mouse clicks) at a maximum rate per second. After the specified duration has passed, the timer is disabled and the most recent source value is emitted on the output Observable, and this process repeats for the next source value. --- From 865682d03d1b25df72da812f5748d11bc1c118a5 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 20 Jul 2020 09:48:39 -0400 Subject: [PATCH 212/256] fix(typo): fix typo in variable name --- concepts/get-started-transforming.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/get-started-transforming.md b/concepts/get-started-transforming.md index a1153ca8..74e91a98 100644 --- a/concepts/get-started-transforming.md +++ b/concepts/get-started-transforming.md @@ -134,7 +134,7 @@ const people = [ const lastNames = people.map(person => person.lastName); // [ 'Troncone', 'Motto' ] -console.log(peopleWithFullName); +console.log(lastNames); ``` At this point, we are transforming an array of people objects into an array of From d24267c1126326a59677fdf8404890db581106b9 Mon Sep 17 00:00:00 2001 From: Patrick Stegmann Date: Mon, 17 Aug 2020 13:59:03 +0200 Subject: [PATCH 213/256] Fixed link to error handling (#263) Hi, the link for catchError on the rxjs site doesn't work. I tried to fix it by looking how you link to other stuff. If that wasn't correct, please disregard --- concepts/rxjs-primer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index 5b693068..b0d0325d 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -261,7 +261,7 @@ The error handling operators provide effective ways to gracefully handle errors and perform retries, should they occur. For example, we can use -[`catchError`](../operators/error_handling/catcherror.md) to safeguard against +[`catchError`](../operators/error_handling/catch.md) to safeguard against failed network requests: ```js @@ -279,7 +279,7 @@ source ``` The most commonly used error handling operators is -[`catchError`](../operators/error_handling/catcherror.md). +[`catchError`](../operators/error_handling/catch.md). ### [Filtering operators](../operators/filtering/README.md) From a9f8a73301ebc4106ae79b503c876f55a6f56cb4 Mon Sep 17 00:00:00 2001 From: Artem Loiko <33007769+artuom130@users.noreply.github.com> Date: Fri, 30 Oct 2020 15:19:32 +0200 Subject: [PATCH 214/256] fix(concatAll): update concatAll code example (#261) --- operators/combination/concatall.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 1a50f0a4..56e839fc 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -87,7 +87,7 @@ const subscribe = example.subscribe(val => ```js // RxJS v6+ import { take, concatAll } from 'rxjs/operators'; -import { interval, of } from 'rxjs/observable/interval'; +import { interval, of } from 'rxjs'; const obs1 = interval(1000).pipe(take(5)); const obs2 = interval(500).pipe(take(2)); From 6e76d750c39b5a0c3f9607956f422ba985ddb56f Mon Sep 17 00:00:00 2001 From: Gustavo Porto Date: Fri, 30 Oct 2020 13:20:12 +0000 Subject: [PATCH 215/256] fix(forkJoin): update forkJoin source code link (#260) --- operators/combination/forkjoin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index dca405d4..2e1ec4b8 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -248,4 +248,4 @@ export class App { --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/observable/ForkJoinObservable.ts](https://github.com/ReactiveX/rxjs/blob/master/src/observable/ForkJoinObservable.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/forkJoin.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/forkJoin.ts) From d8cdff9f19373c55fd130f98708430c9c1efd23a Mon Sep 17 00:00:00 2001 From: wanger <1206180097@qq.com> Date: Fri, 30 Oct 2020 21:35:28 +0800 Subject: [PATCH 216/256] fix(publish): update publish.md (#247) publish error on version 6.5.3 --- operators/multicasting/publish.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index c97f6aae..21750c73 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -22,12 +22,11 @@ import { publish, tap } from 'rxjs/operators'; //emit value every 1 second const source = interval(1000); -const example = source.pipe( +//do nothing until connect() is called +const example = publish()(source.pipe( //side effects will be executed once tap(_ => console.log('Do Something!')), - //do nothing until connect() is called - publish() -); +)); /* source will not emit values until connect() is called @@ -50,6 +49,7 @@ const subscribeTwo = example.subscribe(val => setTimeout(() => { example.connect(); }, 5000); + ``` ### Additional Resources From ebb44ba6379a869879704f86acbdaa23526ded5b Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 30 Oct 2020 09:43:18 -0400 Subject: [PATCH 217/256] chore(forkJoin): remove deprecated API (#266) --- operators/combination/forkjoin.md | 114 ++++++++++++++++-------------- 1 file changed, 62 insertions(+), 52 deletions(-) diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 2e1ec4b8..5e33bb7e 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -38,7 +38,7 @@ correct choice. In these cases you may be better off with an operator like ### Examples -##### Example 1: (v6.5+) Using a dictionary of sources +##### Example 1: Using a dictionary of sources to make AJAX request ( [StackBlitz](https://stackblitz.com/edit/typescript-u5pzuf?file=index.ts&devtoolsheight=100) @@ -68,14 +68,12 @@ forkJoin( ##### Example 2: Observables completing after different durations ( -[StackBlitz](https://stackblitz.com/edit/typescript-mzbcrw?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/remiduhimu/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/5fj77920/81/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-c3f62b?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ +import { interval, forkJoin, of } from 'rxjs'; import { delay, take } from 'rxjs/operators'; -import { forkJoin, of, interval } from 'rxjs'; const myPromise = val => new Promise(resolve => @@ -86,28 +84,35 @@ const myPromise = val => when all observables complete, give the last emitted value from each as an array */ -const example = forkJoin( +const example = forkJoin({ //emit 'Hello' immediately - of('Hello'), + sourceOne: of('Hello'), //emit 'World' after 1 second - of('World').pipe(delay(1000)), + sourceTwo: of('World').pipe(delay(1000)), //emit 0 after 1 second - interval(1000).pipe(take(1)), + sourceThree: interval(1000).pipe(take(1)), //emit 0...1 in 1 second interval - interval(1000).pipe(take(2)), + sourceFour: interval(1000).pipe(take(2)), //promise that resolves to 'Promise Resolved' after 5 seconds - myPromise('RESULT') -); -//output: ["Hello", "World", 0, 1, "Promise Resolved: RESULT"] + sourceFive: myPromise('RESULT') +}); +/* + * Output: + * { + * sourceOne: "Hello", + * sourceTwo: "World", + * sourceThree: 0, + * sourceFour: 1, + * sourceFive: "Promise Resolved: RESULT" + * } + */ const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 3: Making a variable number of requests +##### Example 3: Making a variable number of requests (uses deprecated API) ( -[StackBlitz](https://stackblitz.com/edit/typescript-3mbbjw?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/febejakapi/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/0b8Lnh7s/1/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-3mbbjw?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ @@ -138,9 +143,7 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 4: Handling errors on outside ( -[StackBlitz](https://stackblitz.com/edit/typescript-xgskpm?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/gugawucixi/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/6vz7tjx2/1/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-petcwk?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ @@ -148,27 +151,26 @@ import { delay, catchError } from 'rxjs/operators'; import { forkJoin, of, throwError } from 'rxjs'; /* - when all observables complete, give the last - emitted value from each as an array + If any inner observables error, the error result + will be emitted by catchError. */ -const example = forkJoin( - //emit 'Hello' immediately - of('Hello'), - //emit 'World' after 1 second - of('World').pipe(delay(1000)), +const example = forkJoin({ + // emit 'Hello' immediately + sourceOne: of('Hello'), + // emit 'World' after 1 second + sourceTwo: of('World').pipe(delay(1000)), // throw error - _throw('This will error') -).pipe(catchError(error => of(error))); -//output: 'This will Error' + sourceThree: throwError('This will error') +}).pipe(catchError(error => of(error))); + +// output: 'This will Error' const subscribe = example.subscribe(val => console.log(val)); ``` ##### Example 5: Getting successful results when one inner observable errors ( -[StackBlitz](https://stackblitz.com/edit/typescript-hydgiu?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/memajepefe/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/emdu4doy/1/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-7qcyvz?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ @@ -176,18 +178,26 @@ import { delay, catchError } from 'rxjs/operators'; import { forkJoin, of, throwError } from 'rxjs'; /* - when all observables complete, give the last - emitted value from each as an array + Emit values from successfully completed + inner observables. */ -const example = forkJoin( - //emit 'Hello' immediately - of('Hello'), - //emit 'World' after 1 second - of('World').pipe(delay(1000)), +const example = forkJoin({ + // emit 'Hello' immediately + sourceOne: of('Hello'), + // emit 'World' after 1 second + sourceTwo: of('World').pipe(delay(1000)), // throw error - _throw('This will error').pipe(catchError(error => of(error))) -); -//output: ["Hello", "World", "This will error"] + sourceThree: throwError('This will error').pipe(catchError(error => of(error))) +}); + +/* + * Output: + * { + * sourceOne: "Hello", + * sourceTwo: "World", + * sourceThree: "This will error" + * } + */ const subscribe = example.subscribe(val => console.log(val)); ``` @@ -227,15 +237,15 @@ export class App { ngOnInit() { // simulate 3 requests with different delays - forkJoin( - this._myService.makeRequest('Request One', 2000), - this._myService.makeRequest('Request Two', 1000), - this._myService.makeRequest('Request Three', 3000) - ) - .subscribe(([res1, res2, res3]) => { - this.propOne = res1; - this.propTwo = res2; - this.propThree = res3; + forkJoin({ + requestOne: this._myService.makeRequest('Request One', 2000), + requestTwo: this._myService.makeRequest('Request Two', 1000), + requestThree: this._myService.makeRequest('Request Three', 3000) + }) + .subscribe(({requestOne, requestTwo, requestThree}) => { + this.propOne = requestOne; + this.propTwo = requestTwo; + this.propThree = requestThree; }); } } From 75fb1eee96d6b04a0ac27a6d74a4eccd918673be Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Wed, 18 Nov 2020 11:38:42 -0500 Subject: [PATCH 218/256] fix(operators): fix distinctUntilKeyChanged link --- operators/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/README.md b/operators/README.md index 6375382f..5f49793a 100644 --- a/operators/README.md +++ b/operators/README.md @@ -50,7 +50,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [debounceTime](filtering/debouncetime.md) ⭐ - [distinct](filtering/distinct.md) - [distinctUntilChanged](filtering/distinctuntilchanged.md) ⭐ - - [distinctUntilKeyChanged](distinctuntilkeychanged.md) + - [distinctUntilKeyChanged](filtering/distinctuntilkeychanged.md) - [filter](filtering/filter.md) ⭐ - [find](filtering/find.md) - [first](filtering/first.md) From 2809100d795570d52567480af3db64604ca5e77e Mon Sep 17 00:00:00 2001 From: Max Koretskyi Date: Fri, 9 Apr 2021 19:55:22 +0300 Subject: [PATCH 219/256] Added references to indepth.dev with interactive diagrams (#272) --- operators/combination/combinelatest.md | 1 + operators/combination/concat.md | 1 + operators/combination/concatall.md | 1 + operators/combination/forkjoin.md | 1 + operators/combination/merge.md | 1 + operators/combination/mergeall.md | 1 + operators/combination/race.md | 4 ++-- operators/combination/withlatestfrom.md | 1 + operators/combination/zip.md | 1 + operators/creation/from.md | 3 ++- operators/creation/of.md | 1 + operators/error_handling/catch.md | 1 + operators/error_handling/retry.md | 1 + operators/error_handling/retrywhen.md | 1 + operators/filtering/audittime.md | 1 + operators/filtering/debounce.md | 1 + operators/filtering/debouncetime.md | 1 + operators/filtering/distinctuntilchanged.md | 1 + operators/filtering/filter.md | 1 + operators/filtering/take.md | 1 + operators/filtering/takeuntil.md | 1 + operators/filtering/takewhile.md | 1 + operators/filtering/throttletime.md | 1 + operators/transformation/buffer.md | 1 + operators/transformation/buffertime.md | 1 + operators/transformation/bufferwhen.md | 1 + operators/transformation/concatmap.md | 1 + operators/transformation/exhaustmap.md | 1 + operators/transformation/map.md | 1 + operators/transformation/mergemap.md | 1 + operators/transformation/switchmap.md | 1 + operators/utility/delay.md | 1 + operators/utility/delaywhen.md | 1 + operators/utility/do.md | 1 + subjects/asyncsubject.md | 1 + subjects/behaviorsubject.md | 1 + subjects/replaysubject.md | 1 + subjects/subject.md | 1 + 38 files changed, 40 insertions(+), 3 deletions(-) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 3d764f68..6e14861d 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -157,6 +157,7 @@ combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe( - [combineLatest](https://rxjs.dev/api/index/function/combineLatest) 📰 - Official docs +- [combineLatest](https://indepth.dev/reference/rxjs/operators/combine-latest) - In Depth Dev Reference - [Combining streams with combineLatest](https://egghead.io/lessons/rxjs-combining-streams-with-combinelatest?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Combination operator: combineLatest](https://egghead.io/lessons/rxjs-combination-operator-combinelatest?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 0788df88..9f382627 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -91,6 +91,7 @@ concat(interval(1000), of('This', 'Never', 'Runs')) ### Additional Resources - [concat](https://rxjs.dev/api/index/function/concat) 📰 - Official docs +- [concat](https://indepth.dev/reference/rxjs/operators/concat) - In Depth Dev Reference - [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 56e839fc..11dea8bb 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -115,6 +115,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [concatAll](https://rxjs.dev/api/operators/concatAll) 📰 - Official docs +- [concatAll](https://indepth.dev/reference/rxjs/operators/concat-all) - In Depth Dev Reference - [Flatten a higher order observable with concatAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-concatall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 5e33bb7e..01b10bce 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -254,6 +254,7 @@ export class App { ### Additional Resources - [forkJoin](https://rxjs.dev/api/index/function/forkJoin) 📰 - Official docs +- [forkJoin](https://indepth.dev/reference/rxjs/operators/fork-join) - In Depth Dev Reference --- diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 1adbad7e..efe23cb6 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -83,6 +83,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [merge](https://rxjs.dev/api/index/function/merge) 📰 - Official docs +- [merge](https://indepth.dev/reference/rxjs/operators/merge) - In Depth Dev Reference - [Handling multiple streams with merge](https://egghead.io/lessons/rxjs-handling-multiple-streams-with-merge?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Sharing network requests with merge](https://egghead.io/lessons/rxjs-reactive-programming-sharing-network-requests-with-rxjs-merge?course=introduction-to-reactive-programming) diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index fbbd90f2..289f627a 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -85,6 +85,7 @@ const example = source ### Additional Resources - [mergeAll](https://rxjs.dev/api/operators/mergeAll) 📰 - Official docs +- [mergeAll](https://indepth.dev/reference/rxjs/operators/merge-all) - In Depth Dev Reference - [Flatten a higher order observable with mergeAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-mergeall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/combination/race.md b/operators/combination/race.md index 7cd8a645..87203e40 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -62,8 +62,8 @@ race(first, second, third).subscribe(val => console.log(val)); ### Additional Resources -- [race](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-race) - 📰 - Official docs +- [race](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-race) 📰 - Official docs +- [race](https://indepth.dev/reference/rxjs/operators/race) - In Depth Dev Reference --- diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index d1ac8ec3..c8a2a83a 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -90,6 +90,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [withLatestFrom](https://rxjs.dev/api/operators/withLatestFrom) 📰 - Official docs +- [withLatestFrom](https://indepth.dev/reference/rxjs/operators/with-latest-from) - In Depth Dev Reference - [Combination operator: withLatestFrom](https://egghead.io/lessons/rxjs-combination-operator-withlatestfrom?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/combination/zip.md b/operators/combination/zip.md index c35fb741..3ed0d278 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -110,6 +110,7 @@ mouseClickDuration.subscribe(console.log); - [zip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip) 📰 - Official docs +- [zip](https://indepth.dev/reference/rxjs/operators/zip) - In Depth Dev Reference - [Combination operator: zip](https://egghead.io/lessons/rxjs-combination-operator-zip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/creation/from.md b/operators/creation/from.md index 5c8d258e..e0502c81 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -1,4 +1,4 @@ -# from +``# from #### signature: `from(ish: ObservableInput, mapFn: function, thisArg: any, scheduler: Scheduler): Observable` @@ -100,6 +100,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources - [from](https://rxjs.dev/api/index/function/from) 📰 - Official docs +- [from](https://indepth.dev/reference/rxjs/operators/from) - In Depth Dev Reference - [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz diff --git a/operators/creation/of.md b/operators/creation/of.md index e0ad7235..4bb12ba2 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -55,6 +55,7 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources - [of](https://rxjs.dev/api/index/function/of) 📰 - Official docs +- [of](https://indepth.dev/reference/rxjs/operators/of) - In Depth Dev Reference - [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz - [Build your own of operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=of#app) diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 590a389b..ecd603a6 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -109,6 +109,7 @@ iWillStopListening$.subscribe(console.log); ### Additional Resources - [catchError](https://rxjs.dev/api/operators/catchError) 📰 - Official docs +- [catchError](https://indepth.dev/reference/rxjs/operators/catch-error) - In Depth Dev Reference - [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 411a6e7c..3676a8ad 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -60,6 +60,7 @@ const subscribe = example.subscribe({ ### Additional Resources - [retry](https://rxjs.dev/api/operators/retry) 📰 - Official docs +- [retry](https://indepth.dev/reference/rxjs/operators/retry) - In Depth Dev Reference - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 04bd42a4..4cde404e 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -140,6 +140,7 @@ export class AppComponent implements OnInit { ### Additional Resources - [retryWhen](https://rxjs.dev/api/operators/retryWhen) 📰 - Official docs +- [retryWhen](https://indepth.dev/reference/rxjs/operators/retry-when) - In Depth Dev Reference - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index 67f31745..9c82e451 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -36,6 +36,7 @@ const subscribe = example.subscribe(val => console.log('Clicked')); * [auditTime](https://rxjs.dev/api/operators/auditTime) 📰 - Official docs +* [auditTime](https://indepth.dev/reference/rxjs/operators/audit-time) - In Depth Dev Reference * [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 1dce902a..526f744e 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -70,6 +70,7 @@ const subscribe = debouncedInterval.subscribe(val => ### Additional Resources - [debounce](https://rxjs.dev/api/operators/debounce) 📰 - Official docs +- [debounce](https://indepth.dev/reference/rxjs/operators/debounce) - In Depth Dev Reference - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index b2f8ed91..9fed4673 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -49,6 +49,7 @@ keyup$ ### Additional Resources - [debounceTime](https://rxjs.dev/api/operators/debounceTime) 📰 - Official docs +- [debounceTime](https://indepth.dev/reference/rxjs/operators/debounce-time) - In Depth Dev Reference - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 26f310a8..eac8fd78 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -97,6 +97,7 @@ source$ - [distinctUntilChanged](https://rxjs.dev/api/operators/distinctUntilChanged) 📰 - Official docs +- [distinctUntilChanged](https://indepth.dev/reference/rxjs/operators/distinct-until-changed) - In Depth Dev Reference - [Filtering operator: distinct and distinctUntilChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-and-distinctuntilchanged?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 45dfbbe9..70b401be 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -97,6 +97,7 @@ const subscribe = example.subscribe(val => ### Additional Resources - [filter](https://rxjs.dev/api/operators/filter) 📰 - Official docs +- [filter](https://indepth.dev/reference/rxjs/operators/filter) - In Depth Dev Reference - [Adding conditional logic with filter](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 72564bf8..118757be 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -106,6 +106,7 @@ const subscribe = oneClickEvent.subscribe(); ### Additional Resources - [take](https://rxjs.dev/api/operators/take) 📰 - Official docs +- [take](https://indepth.dev/reference/rxjs/operators/take) - In Depth Dev Reference - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Build your own take operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=take#app) diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 81d8a564..9ee0cd0c 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -117,6 +117,7 @@ mousedown$ ### Additional Resources - [takeUntil](https://rxjs.dev/api/operators/takeUntil) 📰 - Official docs +- [takeUntil](https://indepth.dev/reference/rxjs/operators/take-until) - In Depth Dev Reference * [Avoiding takeUntil leaks](https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef) - Angular in Depth diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index adc79616..f0779d21 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -104,6 +104,7 @@ source$ - [takeWhile](https://rxjs-dev.firebaseapp.com/api/operators/takeWhile) 📰 - Official docs +- [takeWhile](https://indepth.dev/reference/rxjs/operators/take-while) - In Depth Dev Reference - [Completing a stream with takeWhile](https://egghead.io/lessons/rxjs-completing-a-stream-with-takewhile?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 55745365..8353dc3f 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -59,6 +59,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [throttleTime](https://rxjs.dev/api/operators/throttleTime) 📰 - Official docs +- [throttleTime](https://indepth.dev/reference/rxjs/operators/throttle-time) - In Depth Dev Reference - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 6bc04547..229e6ffe 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -68,6 +68,7 @@ const subscribe = myBufferedInterval.subscribe(val => - [buffer](https://rxjs-dev.firebaseapp.com/api/operators/buffer) 📰 - Official docs +- [buffer](https://indepth.dev/reference/rxjs/operators/buffer) - In Depth Dev Reference - [Transformation operator: buffer](https://egghead.io/lessons/rxjs-transformation-operator-buffer?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index 606adee5..f2f208dd 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -55,6 +55,7 @@ const subscribe = example.subscribe(val => * [bufferTime](https://rxjs.dev/api/operators/bufferTime) 📰 - Official docs +* [bufferTime](https://indepth.dev/reference/rxjs/operators/buffer-time) - In Depth Dev Reference * [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 111dea12..3356ec4c 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -38,6 +38,7 @@ const subscribe = bufferWhenExample.subscribe(val => ### Additional Resources - [bufferWhen](https://rxjs.dev/api/operators/bufferWhen) 📰 - Official docs +- [bufferWhen](https://indepth.dev/reference/rxjs/operators/buffer-when) - In Depth Dev Reference --- diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index d26f1278..3d6f0ff3 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -103,6 +103,7 @@ const subscribe = example.subscribe(val => ### Additional Resources - [concatMap](https://rxjs.dev/api/operators/concatMap) 📰 - Official docs +- [concatMap](https://indepth.dev/reference/rxjs/operators/concat-map) - In Depth Dev Reference - [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz - [Build your own concatMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=concatMap#app) diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 79d3df49..8660c4d2 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -121,6 +121,7 @@ const exhaustSub = firstInterval ### Additional Resources - [exhaustMap](https://rxjs.dev/api/operators/exhaustMap) 📰 - Official docs +- [exhaustMap](https://indepth.dev/reference/rxjs/operators/exhaust-map) - In Depth Dev Reference --- diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 4c489b57..ad220718 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -80,6 +80,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [map](https://rxjs.dev/api/operators/map) 📰 - Official docs +- [map](https://indepth.dev/reference/rxjs/operators/map) - In Depth Dev Reference - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 - Ben Lesh - [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index d205808b..f1fbad75 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -215,6 +215,7 @@ source$ ### Additional Resources - [mergeMap](https://rxjs.dev/api/operators/mergeMap) 📰 - Official docs +- [mergeMap](https://indepth.dev/reference/rxjs/operators/merge-map) - In Depth Dev Reference - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 💵 - Ben Lesh - [Async requests and responses in RxJS](https://egghead.io/lessons/rxjs-04-reactive-programming-async-requests-and-responses-in-rxjs) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 2ccf0f6e..9682f129 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -145,6 +145,7 @@ timer(0, 5000) ### Additional Resources - [switchMap](https://rxjs.dev/api/operators/switchMap) 📰 - Official docs +- [switchMap](https://indepth.dev/reference/rxjs/operators/switch-map) - In Depth Dev Reference - [Avoiding switchMap-Related Bugs](https://blog.angularindepth.com/switchmap-bugs-b6de69155524) - Nicholas Jamieson - [Starting a stream with switchMap](https://egghead.io/lessons/rxjs-starting-a-stream-with-switchmap?course=step-by-step-async-javascript-with-rxjs) diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 289ccdcc..e77da73a 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -58,6 +58,7 @@ const subscribe = message.subscribe(val => console.log(val)); ### Additional Resources - [delay](https://rxjs.dev/api/operators/delay) 📰 - Official docs +- [delay](https://indepth.dev/reference/rxjs/operators/delay) - In Depth Dev Reference - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 8616b025..1bc8abb4 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -34,6 +34,7 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); ### Additional Resources - [delayWhen](https://rxjs.dev/api/operators/delayWhen) 📰 - Official docs +- [delayWhen](https://indepth.dev/reference/rxjs/operators/delay-when) - In Depth Dev Reference - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/utility/do.md b/operators/utility/do.md index 7ce9db72..c730221c 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -95,6 +95,7 @@ const example = source ### Additional Resources - [tap](https://rxjs.dev/api/operators/tap) 📰 - Official docs +- [tap](https://indepth.dev/reference/rxjs/operators/tap) - In Depth Dev Reference - [Logging a stream with do](https://egghead.io/lessons/rxjs-logging-a-stream-with-do?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Utility operator: do](https://egghead.io/lessons/rxjs-utility-operator-do?course=rxjs-beyond-the-basics-operators-in-depth) diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index 858eec38..12f1cdca 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -32,6 +32,7 @@ sub.complete(); //456, 456 logged by both subscribers - [AsyncSubject](https://rxjs-dev.firebaseapp.com/api/index/class/AsyncSubject) 📰 - Official docs +- [AsyncSubject](https://indepth.dev/reference/rxjs/subjects/async-subject) - In Depth Dev Reference --- diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 519674df..9d9c4803 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -100,6 +100,7 @@ merge(click$, interval$).subscribe(); - [BehaviorSubject](https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject) 📰 - Official docs +- [BehaviorSubject](https://indepth.dev/reference/rxjs/subjects/behavior-subject) - In Depth Dev Reference --- diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 999d49cf..15f0b536 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -31,6 +31,7 @@ sub.next(5); // OUTPUT => 5,5 (log from both subscribers) - [ReplaySubject](https://rxjs-dev.firebaseapp.com/api/index/class/ReplaySubject) 📰 - Official docs +- [ReplaySubject](https://indepth.dev/reference/rxjs/subjects/replay-subject) - In Depth Dev Reference --- diff --git a/subjects/subject.md b/subjects/subject.md index 77e53778..8994b3d1 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -38,6 +38,7 @@ sub.next(3); // OUTPUT => Subscriber A 3, Subscriber B 3 (logged from both subsc - [Subject](https://rxjs-dev.firebaseapp.com/api/index/class/Subject) 📰 - Official docs +- [Subject](https://indepth.dev/reference/rxjs/subjects) - In Depth Dev Reference --- From 69e91ee3c3c19c1781ea3a3c7ab25a068c4facf4 Mon Sep 17 00:00:00 2001 From: Kyle Rogers Date: Fri, 9 Apr 2021 12:56:34 -0400 Subject: [PATCH 220/256] fix(operators): fix broken link to startWith (#271) --- operators/combination/endwith.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index ecbb88e1..283f618a 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -7,7 +7,7 @@ --- 💡 If you want to start with a value instead, check out -[`startWith`](startWith.md)! +[`startWith`](startwith.md)! 💡 If you want to perform an action on completion, but do not want to emit a value, check out [`finalize`](../utility/finalize.md)! From 280b38e11bbb1e046ff123d170ed5ff350ae41c7 Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 9 Apr 2021 19:57:15 +0300 Subject: [PATCH 221/256] Add more readable formatting (#270) --- recipes/alphabet-invasion-game.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index 9c7568e7..3f3a3696 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -15,7 +15,7 @@ This recipe demonstrates RxJS implementation of Alphabet Invasion Game. #### index.ts -```js +```ts // RxJS v6+ import { interval, fromEvent, combineLatest, BehaviorSubject } from 'rxjs'; import { scan, startWith, map, takeWhile, switchMap } from 'rxjs/operators'; @@ -35,8 +35,7 @@ const intervalSubject = new BehaviorSubject(600); const letters$ = intervalSubject.pipe( switchMap(i => interval(i).pipe( - scan < number, - Letters > + scan (letters => ({ intrvl: i, ltrs: [ @@ -71,8 +70,7 @@ const renderGameOver = () => (document.body.innerHTML += '
GAME OVER!'); const noop = () => {}; const game$ = combineLatest(keys$, letters$).pipe( - scan < [string, Letters], - State > + scan<[string, Letters], State> ((state, [key, letters]) => ( letters.ltrs[letters.ltrs.length - 1] && letters.ltrs[letters.ltrs.length - 1].letter === key From 90860e0a6312ba2e7e0c4daef30ca56383f624a8 Mon Sep 17 00:00:00 2001 From: Mikhail Menshikov Date: Sat, 24 Apr 2021 20:18:35 +0300 Subject: [PATCH 222/256] Fix broken link (#268) --- operators/creation/fromevent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index bd4cbf12..80830b8e 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -45,7 +45,7 @@ const subscribe = example.subscribe(val => console.log(val)); - [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) - [Platform Jumper Game](../../recipes/platform-jumper-game.md) - [Progress Bar](../../recipes/progressbar.md) -- [Save Indicator]('../../recipes/save-indicator.md) +- [Save Indicator](../../recipes/save-indicator.md) - [Smart Counter](../../recipes/smartcounter.md) - [Space Invaders Game](../../recipes/space-invaders-game.md) - [Stop Watch](../../recipes/stop-watch.md) From 634e8dd595776857bb1c6f1b3535747d8d504ebd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20Ib=C3=A1=C3=B1ez?= Date: Wed, 6 Apr 2022 23:25:01 +0200 Subject: [PATCH 223/256] fix(operators): fix broken image (#280) --- operators/utility/topromise.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 43644edf..a989871d 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -10,7 +10,7 @@ --- -
[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz "Ultimate RxJS")](https://ultimatecourses.com/courses/rxjs?ref=4)
+[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 894d0c0cc62ce2998726aba88f18d8e23a935665 Mon Sep 17 00:00:00 2001 From: Georgian Stan Date: Tue, 21 Mar 2023 16:26:43 +0200 Subject: [PATCH 224/256] fix(iif.md): update the link to the official docs (#281) --- operators/conditional/iif.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 006fe7da..2a7235dd 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -84,7 +84,7 @@ interval(1000) ### Additional Resources -- [iif](https://rxjs.dev/api/operators/iif) 📰 - Official docs +- [iif](https://rxjs.dev/api/index/function/iif) 📰 - Official docs --- From 9649841970b54d107fee7e2a960b41a0a41c8018 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 24 Mar 2023 09:15:57 -0400 Subject: [PATCH 225/256] feat(scan): add summary to scan (#282) --- operators/transformation/scan.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index f9dc48e5..ef19012b 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -10,6 +10,14 @@ --- +### Why use `scan`? + +The key distinction of the scan operator when compared to other reduction operators is its continuous accumulation feature. With each emitted value, the accumulator function is applied, and the accumulated result is emitted instantaneously. You can remember this by the phrase "accumulate and emit on-the-go." + +The scan operator is highly useful in scenarios that require real-time monitoring and processing, such as tallying scores in a game, where you want to display the updated score each time points are added. However, be cautious when using scan for cases where the *only* the final accumulated result is crucial. In those situations, the [`reduce`](reduce.md) operator may be more appropriate, as it emits only the final value after the source completes. + +In summary, the scan operator provides a powerful and flexible means of handling continuous accumulation and emission of values, which can be especially useful in real-time monitoring and processing tasks. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From e7157a838cf7f970054f34d6ca9afe1a898724b8 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 24 Mar 2023 09:21:39 -0400 Subject: [PATCH 226/256] feat(buffer): add buffer explanation (#283) --- operators/transformation/buffer.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 229e6ffe..d5aedebf 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -4,6 +4,13 @@ ## Collect output values until provided observable emits, emit as array. +### Why use `buffer`? +The buffer operator in RxJS stands out for its ability to accumulate emitted values into an array until a specified notifier emits. Think of it as a "collect and release" mechanism. This aligns well with use cases where you want to group events based on a certain condition, such as time or user actions. + +Buffer shines in scenarios like batching multiple events together before processing, which can optimize performance and reduce workload. For example, when monitoring clicks on a web page, buffer can gather a series of clicks before sending them for analytics, rather than doing so individually. + +However, keep in mind that buffer may not be the best fit when you require immediate processing of each emitted value. One way to think about this is "buffer is about batching". Remember, buffer is all about accumulating and releasing values based on specific triggers, making it a powerful tool for managing grouped events. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From a5d00b469aab960fb803e673e59bf71ad47e5959 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 24 Mar 2023 09:29:13 -0400 Subject: [PATCH 227/256] feat(bufferCount): update bufferCount explanation (#284) --- operators/transformation/buffercount.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index c525e68f..7b742c48 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -4,6 +4,15 @@ ## Collect emitted values until provided number is fulfilled, emit as array. +### Why use `bufferCount`? +The key distinction between bufferCount and other buffering operators lies in its count-based buffering approach. Upon reaching the specified count of emissions, bufferCount groups and emits the values as an array. Think of it as collecting items in groups of the specified count. + +This operator proves advantageous in scenarios where processing data in chunks is more efficient, such as bulk updates or batch processing. By contrast, the buffer operator relies on a closing notifier to define the buffering window, which may not suit all use cases. + +Keep in mind, though, that bufferCount may not be the best choice when the buffering strategy requires time-based or event-driven windows. In such instances, consider using [buffer](buffer.md) or [buffertime](bufferTime.md) instead. Remember, bufferCount organizes values based on emission count, as illustrated clearly in the first example. + +Exercise caution in situations where buffering strategy plays a critical role in the desired output, as choosing the wrong operator might lead to unexpected behavior. Familiarize yourself with the various buffering operators to make informed decisions based on your specific requirements. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 485f96974dee961f0389d2a03fc2cee8f09525bf Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 24 Mar 2023 09:35:29 -0400 Subject: [PATCH 228/256] feat(bufferTime): add explanation (#285) --- operators/transformation/buffertime.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index f2f208dd..520294fa 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -4,6 +4,13 @@ ## Collect emitted values until provided time has passed, emit as array. +### Why use `bufferTime`? +The key distinction between `bufferTime` and other buffering operators lies in its time-based buffering approach. `bufferTime` accumulates values from the source observable in an array over a specified time duration before emitting the buffered array. + +This operator is particularly well-suited for scenarios where you need to batch or throttle emissions from high-frequency observables, such as monitoring user interactions, tracking mouse movements, or dealing with rapidly updating data streams. `bufferTime` provides an efficient way to handle and process these emissions in a more manageable, time-based manner. + +Remember, `bufferTime` allows you to manage data emissions effectively by collecting and emitting them in time-based batches, as illustrated in the first example. Be mindful of its implications, though, and choose the right operator according to your specific use case. + ### Examples ##### Example 1: Buffer for 2 seconds From bd239c3d7e2d51fc6a1067968fbd0269bdd063f0 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:11:22 -0400 Subject: [PATCH 229/256] feat(concat): add why use section (#287) --- operators/combination/concat.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 9f382627..00dbf763 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -14,6 +14,13 @@ instead! --- +### Why use `concat`? +The concat operator is best used when you need to combine multiple observables, but you want their emissions to be in a specific order, one after the other. It's like putting together a puzzle where the pieces must come together sequentially to create the full picture. An example of this can be seen in a real-world scenario, like downloading and displaying several images in the correct order, where you don't want the next image to load until the current one is fully loaded. + +Keep in mind that concat will only start emitting values from the next observable once the previous one has completed. This means that if one of your observables never completes, the subsequent observables will never emit any values. This behavior can be a _gotcha_, as there will be no output and no error, but one (or more) of your inner observables might not be functioning as intended, or a subscription is not being set up correctly. + +In contrast, if you need to combine observables that emit values concurrently, or you require the latest values from multiple observables whenever any of them emit a new value, [combineLatest](combinelatest.md) or [withLatestFrom](withlatestfrom.md) might be more suitable options. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 8c764202e97f82fc7581ae9398257c0cfd214c81 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:26:44 -0400 Subject: [PATCH 230/256] feat(concatAll): add why use explanation (#288) --- operators/combination/concatall.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 11dea8bb..979d0010 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -15,6 +15,13 @@ single operator instead! --- +### Why use `concatAll`? +This operator is best used when you have multiple observables that need to be processed sequentially, ensuring that each observable completes before moving on to the next. Real-world examples of this can be seen in scenarios such as uploading multiple files to a server one-by-one, or displaying a sequence of animations in order. + +Bear in mind that `concatAll` will only start processing the next observable when the current one completes. This is an important consideration if you have observables that emit values indefinitely or take a long time to complete, as it may cause a delay in processing subsequent observables. + +Additionally, if you're working with observables that can emit values concurrently and don't need to wait for one to complete before processing another, [mergeAll](mergeall.md) might be a more suitable choice. Similarly, if you only need to combine the values of multiple observables at the point when they all complete, [forkJoin](forkjoin.md) could be a better option. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From de044888053d809db6e416e243f173fbda501514 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:30:58 -0400 Subject: [PATCH 231/256] feat(operators): add endWith explanation (#289) --- operators/combination/endwith.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 283f618a..bb802c4c 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -14,9 +14,14 @@ value, check out [`finalize`](../utility/finalize.md)! --- - - Ultimate RxJS - +### Why use `endWith`? +The `endWith` operator is especially handy when you want to ensure that a specific value is emitted after the source observable completes. Think of it as the closing credits of a movie, signaling that the story has reached its conclusion. Real-world examples of endWith can be found in scenarios where you want to append a specific message or status update after a series of events, such as a file download that ends with a "Download Complete" notification or a countdown timer that finishes with a "Time's Up!" alert. + +Keep in mind that endWith only emits the specified value when the source observable completes. This means that if your source observable does not complete, the value provided to `endWith` will not be emitted. To avoid surprises, make sure to check that your source observable is designed to complete at some point. + +In cases where you want to prepend a value at the beginning of an observable sequence instead of appending it at the end, consider using the [startWith](startwith.md) operator. + +[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From f7bc28cb9667ccd67c186a2b2fe5c2498ab8438a Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:33:05 -0400 Subject: [PATCH 232/256] Update merge.md (#290) --- operators/combination/merge.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/operators/combination/merge.md b/operators/combination/merge.md index efe23cb6..20340152 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -13,6 +13,15 @@ instead! --- +### Why use merge? +The merge operator is your go-to solution when you have multiple observables that produce values independently and you want to combine their output into a single stream. Think of it as a highway merger, where multiple roads join together to form a single, unified road - the traffic (data) from each road (observable) flows seamlessly together. + +A real-world example can be seen in a chat application, where you have separate observables for receiving messages from multiple users. By using `merge`, you can bring all those message streams into a single unified stream for displaying the messages in the chat window. + +Keep in mind that `merge` will emit values as soon as any of the observables emit a value. This is different from combineLatest or withLatestFrom, which wait for each observable to emit at least one value before emitting a combined value. + +Lastly, if you're dealing with observables that emit values at specific intervals and you need to combine them based on time, consider using the [zip](zip.md) operator instead. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 93d907696e1dcb85dd6579d4b55b87cfda519b63 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:38:03 -0400 Subject: [PATCH 233/256] Update mergeall.md (#291) --- operators/combination/mergeall.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 289f627a..eb042c10 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -11,6 +11,20 @@ single operator instead! --- +### Why use mergeAll? +This operator is best used when you have multiple, short-lived observables that produce values independently and you want to flatten them into a single output stream. Real-world examples of this can be seen in scenarios like processing multiple requests simultaneously, where each request is an observable and the responses need to be combined into a single stream. + +Consider a web page that displays live news updates from different sources. Each source produces updates as separate observables, and you want to merge them all together to show a single feed of news updates. In this case, mergeAll can come to the rescue. + +It's essential to note that `mergeAll` will start emitting values as soon as any of the inner observables emit a value. This is different from combineLatest, which waits for each observable to emit at least one value before producing an output. + +When deciding between mergeAll and other operators, keep in mind the following: + +- If you need to merge multiple observables that rely on each other for calculations or decisions, [`combineLatest`](combinelatest.md) may be more suitable. +- If you're working with observables that only emit one value or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better choice. +- If you need to merge observables that produce values independently and are short-lived, `mergeAll` is the operator to reach for. + + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 752e57aac51feeb07de6d3e2ecdb4a5d0f27faf2 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:41:28 -0400 Subject: [PATCH 234/256] Update pairwise.md (#292) --- operators/combination/pairwise.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 71dd448c..f9f82afb 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -4,6 +4,13 @@ ## Emit the previous and current values as an array. +### Why use pairwise? +The pairwise operator is best suited when you need to compare or perform calculations between the current and previous values emitted by an observable. Real-world examples can be seen in scenarios like tracking mouse movement, where the previous and current positions are used to determine the direction or speed of the cursor, or in financial applications, where consecutive stock price updates are compared to calculate the change or percentage change. + +Keep in mind that `pairwise` will not emit an initial value until the observable emits at least two values. This behavior can lead to confusion, as there will be no output and no error, but the observable might not be functioning as intended or is waiting for more values. + +Lastly, if you're working with observables that emit multiple values but you only want to compare the last two emitted values, consider using the [bufferCount](../transformation/buffercount.md) operator with a buffer size of 2 and a start buffer count of 1 as an alternative approach. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 0e347e7d5dc548d89a4a5336a6e3d9502f7384f3 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:44:30 -0400 Subject: [PATCH 235/256] Update race.md (#293) --- operators/combination/race.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/operators/combination/race.md b/operators/combination/race.md index 87203e40..a07e81c2 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -4,6 +4,15 @@ ## The observable to emit first is used. +### Why use race? +The `race` operator is the go-to choice when you want to work with multiple observables that compete against each other, and you're only interested in the first one to emit a value. It's like a competitive race, where the first runner to cross the finish line claims the victory, and the others don't matter anymore (if you're not first you're last?). + +A relatable example of using `race` can be observed in an image loading scenario. Imagine you have two sources to load an image from, and you want to display the image as soon as possible. You can use the race operator to subscribe to both sources, and once the first source successfully loads the image, it will emit the value, and the subscription to the other source will be automatically unsubscribed. + +It's crucial to remember that `race` only pays attention to the first emitted value from the competing observables. Once an observable wins the race, the other observables are disregarded, and their potential future emissions will have no impact on the output. + +If your use case involves working with multiple observables that should all emit values and complete, or you need to process the emitted values in a specific order, consider using operators like [combineLatest](combinelatest.md) or [forkJoin](forkjoin.md) instead. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 097937ea54ff83efcecfbbab4cb5cdd01b6a9c3e Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:46:26 -0400 Subject: [PATCH 236/256] Update startwith.md (#294) --- operators/combination/startwith.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index bab3d5e4..be552307 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -12,6 +12,13 @@ can also start with an initial value! --- +### Why use startWith? +The `startWith` operator is a great tool when you need to provide an initial value to an observable sequence, ensuring that the consumer always receives a value upon subscription. It's a handy way to set a default state or value for your observables, making it easier for subscribers to handle the data and minimizing the chances of encountering unexpected scenarios. + +A real-world example can be seen in a search functionality, where the search results should display a list of popular items as a default state before the user starts typing their query. By using startWith, you can seamlessly provide this default data to your subscribers. + +Keep in mind that startWith emits the initial value immediately upon subscription. This behavior is helpful when you want to make sure your subscribers receive a value right away, even before the source observable starts emitting values. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 8489910262f431820376a7df02e9b8ec6091083e Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:49:51 -0400 Subject: [PATCH 237/256] Update withlatestfrom.md (#295) --- operators/combination/withlatestfrom.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index c8a2a83a..f12e02f6 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -11,6 +11,15 @@ emits, try [combinelatest](combinelatest.md)! --- +### Why use withLatestFrom? +The `withLatestFrom` operator is your best friend when you have one main observable whose emissions depend on the latest values from one or more other observables. Think of it as a one-way data flow, where the primary observable takes the lead and other observables chime in with their most recent values. + +A classic example to remember `withLatestFrom` is a chat application that needs to send a message with a user's current location. The message sending event (main observable) combines with the latest location data (another observable) to form the final message object. + +Keep in mind that `withLatestFrom` only emits a value when the main observable emits, and after each additional observable has emitted at least once. This can catch you off guard, as you might not see any output or errors while one of the observables isn't behaving as expected, or a subscription is delayed. + +If you need to combine values from multiple observables that emit more than once and are interdependent, consider using [`combineLatest`](combinelatest.md) instead. And for scenarios where observables emit only once or you just need their last values, [`forkJoin`](forkjoin.md) might be a more suitable choice. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 6294384ddd7b851cdf978a8645aa3157ef65ff71 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 13 Apr 2023 14:52:11 -0400 Subject: [PATCH 238/256] feat(operators): add zip summary (#296) --- operators/combination/zip.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 3ed0d278..c4658be4 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -12,6 +12,13 @@ source! --- +### Why use zip? +This operator is ideal when you want to combine values from multiple observables in a pairwise fashion, like zipping together the teeth of a zipper. Imagine having two observables, where one emits values like "hot", "warm", "cold", and the other emits values like "coffee", "tea", "lemonade". Using the zip operator, you'd pair them together as "hot coffee", "warm tea", and "cold lemonade". + +An everyday example is when you want to match information from two sources, like pairing names with their corresponding scores in a game. Picture an observable emitting player names and another emitting their scores. With zip, you can easily create pairs of `[player, score]`, ensuring each player is associated with the correct score. + +Be mindful that zip will only emit a value when all input observables have emitted a corresponding value. This means if one observable has emitted more values than another, the unmatched values will be held back until the other observable emits its next value. In some cases, this could lead to unpaired values, making it important to ensure your observables are synchronized. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 2e510070e5920e4fec4d36acf1b6fd096ea45f26 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 07:07:56 -0400 Subject: [PATCH 239/256] Update book.json (#297) --- book.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/book.json b/book.json index ab3a8e0c..b6357175 100644 --- a/book.json +++ b/book.json @@ -21,7 +21,7 @@ "url": "https://github.com/btroncone/learn-rxjs/" }, "ga": { - "token": "UA-54001708-2" + "token": "G-VR4XDP7ZBH" }, "github-buttons": { "buttons": [ From 2c8b298b3c5b8ca210340d7904b34388737e933e Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 07:20:48 -0400 Subject: [PATCH 240/256] Update filter.md (#298) --- operators/filtering/filter.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 70b401be..f49dd928 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -11,6 +11,14 @@ --- +### Why use `filter`? + +This operator is your go-to when you need to sift out unwanted values from an observable stream. Think of it as a fisherman's net, catching only the types of fish you desire while allowing others to slip through. + +**The critical point to remember** is that `filter` will only emit values that meet the specified condition. If no values in the observable satisfy the condition, nothing gets emitted. It's a strict bouncer at a club's entrance, only letting in those who fit the criteria. + +Also, for scenarios where you not only want to filter values but also transform them, [`map`](../transformation/map.md) is an ideal companion to `filter`. Use them in tandem to both shape and refine your data streams. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From a2e50a539daec9a383f8cf84d4efdce7d4fa2fce Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 07:26:35 -0400 Subject: [PATCH 241/256] Update takeuntil.md (#299) --- operators/filtering/takeuntil.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 9ee0cd0c..4d92299e 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -10,6 +10,29 @@ --- +### Why use `takeUntil`? + +Consider a day at your workplace: You're anticipating an important email, but you've decided that once the clock hits 5 pm, you're clocking out, regardless of whether you've received that email or not. In this RxJS analogy, the anticipation of the email is one observable, while the 5 pm clock-out time is another. The `takeUntil` operator ensures you're alert for the email's potential arrival, but the moment 5 pm arrives, you stop checking (unsubscribe). + +In real-world applications, think of a scenario where you're monitoring server responses on a dashboard. However, you want this monitoring to cease once a specific "Stop Monitoring" button is clicked. That's where `takeUntil` shines. + +In the context of Angular, `takeUntil` is particularly handy for auto-unsubscribing from observables when a component is destroyed. This is achieved by leveraging the `ngOnDestroy` lifecycle hook. You'd typically create a `Subject`, often named `destroy$`, and use it with `takeUntil`: + +```typescript +private destroy$ = new Subject(); + +observable$ + .pipe(takeUntil(this.destroy$)) + .subscribe(data => console.log(data)); + +ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); +} +``` + +With this setup, as soon as the `ngOnDestroy` method is called (when the component is about to be destroyed), the observables using `takeUntil` with the `destroy$` subject will automatically unsubscribe, ensuring that no unwanted memory leaks or unexpected behavior occurs. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 743fa2c5e05d2c29cb898e7b5abdb7c6b7a3bae8 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 07:30:08 -0400 Subject: [PATCH 242/256] Update debouncetime.md (#300) --- operators/filtering/debouncetime.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 9fed4673..082de437 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -11,6 +11,22 @@ user input must be controlled! --- +### Why use `debounceTime`? + +Think of `debounceTime` like taking a pause in a conversation to let the other person finish their thought. This operator is incredibly handy when you're dealing with rapid sequences of events and only care about acting upon the last event after a specified duration. + +A classic real-world application is in form inputs, particularly in search bars. Imagine you're typing into a search box. Instead of firing off an API call with every keystroke (which can be overwhelming and inefficient), you'd want to wait a bit after the user stops typing to ensure you're fetching data based on their complete thought. That "waiting a bit" is where `debounceTime` shines. For instance, by setting `debounceTime(300)`, the system will wait for 300 milliseconds after the last keystroke before it proceeds. + +In Angular, when dealing with reactive forms, `debounceTime` is a lifesaver. By adding this operator to a form control's value changes observable, you can efficiently handle values only after users finish their input. Check out the below example: +```typescript +this.myFormControl.valueChanges.pipe( + debounceTime(300) +).subscribe(value => { + // handle the value after 300ms of inactivity +}); +``` + + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From e43e70cfe6497d65d9b17a80e7a82a1f6f86a2ee Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 07:36:23 -0400 Subject: [PATCH 243/256] Update do.md (#301) --- operators/utility/do.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/operators/utility/do.md b/operators/utility/do.md index c730221c..a922078f 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -6,10 +6,20 @@ --- -💡 If you are using as a pipeable operator, `do` is known as `tap`! +💡 If you are using and old version of RxJS, `tap` used to be known as `do`! --- +### Why use `tap`? + +Think of `tap` as a surveillance camera in a shopping mall. It doesn't interfere with the shoppers (values) moving around but merely observes and records their actions. This operator is best for side effects: actions you want to take in response to values in an observable, without affecting the values themselves. + +One of the superpowers of `tap` is its utility in debugging. **When things aren't going as planned with your observable**, instead of tearing apart your chain or inserting numerous logs, simply sprinkle in some `tap` operators. It's like adding checkpoints in a video game, helping you swiftly pinpoint issues without disrupting the main flow. + +However, a word of caution: **remember that `tap` is solely for side effects**. If you find yourself tempted to modify data within a `tap`, it's generally best to resist. That's not its purpose, and you're better off with [`map`](../transformation/map.md) or other transformational operators in these cases. + +Lastly, it's best to ensure that the side effects you introduce via `tap` are not critical to the main logic of your observable chain, keeping them non-intrusive and harmless. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From a575d568281e0fade11625005046dfa958f68d76 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 07:39:19 -0400 Subject: [PATCH 244/256] Update delay.md (#302) --- operators/utility/delay.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/operators/utility/delay.md b/operators/utility/delay.md index e77da73a..1702c518 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -4,6 +4,12 @@ ## Delay emitted values by given time. +### Why use `delay`? + +This operator is your go-to when simulating real-world scenarios such as network latency or introducing a pause before a value is emitted. The `delay` operator allows you to hold back values for a specified duration before they're released to subscribers. + +Keep in mind that **`delay` won’t prevent the original observable from emitting values**. It merely postpones the delivery to its subscribers. This is a _gotcha_ as it could look like your data is lagging or not in sync with the source, especially when multiple observables are at play. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From d68261fe3f51b5bc501b730db4693e1607570618 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 07:44:15 -0400 Subject: [PATCH 245/256] Update exhaustmap.md (#303) --- operators/transformation/exhaustmap.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 8660c4d2..433564db 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -4,6 +4,16 @@ ## Map to inner observable, ignore other values until that observable completes. +### Why use `exhaustMap`? + +Imagine you're at a coffee shop where each customer is allowed to place only one order at a time and must wait until that order is fully prepared before making another. If they try to order again while their coffee is still brewing, the barista simply ignores them. That's the essence of `exhaustMap`. + +This operator is perfect for handling events that might be triggered multiple times in rapid succession but where only the initial trigger should be acted upon until it completes. A prime example would be ignoring clicks where a user might impatiently tap a 'Submit' button multiple times. Instead of sending multiple network requests, you'd ideally only want the first click to initiate the action and ignore subsequent clicks until the request is done. + +Take note that **`exhaustMap` will ignore source values while the previous inner observable is still active**. This means that if the inner observable hasn't completed, any new values emitted from the source will be discarded without any mapping. + +If you want to handle every single event, even if previous ones haven't completed, other operators like [`switchMap`](switchmap.md) or [`mergeMap`](mergemap.md) might be more appropriate. But when ensuring one task is exhausted before moving to the next, `exhaustMap` is your go-to choice. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 8f4bfdc72ef86bd8b9460d695210307d5617719f Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 07:47:58 -0400 Subject: [PATCH 246/256] Update concatmap.md (#304) --- operators/transformation/concatmap.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 3d6f0ff3..5b1860eb 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -4,6 +4,16 @@ ## Map values to inner observable, subscribe and emit in order. +### Why use `concatMap`? + +This operator is your go-to when you have an observable that emits values and, for each of those values, you want to execute another observable sequence, ensuring they are processed in order and not concurrently. Think of it like waiting in line at a bakery: even if multiple customers arrive at once, they're served one by one. So, for instance, if you have a stream of user click events and for each click you want to initiate an HTTP request, but you need those requests to happen sequentially (one completing before the next begins), `concatMap` is what you need. + +A practical scenario might be ordering saves sequentialy, without overwhelming the server with simultaneous requests. + +Keep in mind that **if the inner observable takes a significant time to complete, it can lead to a backlog of outer values waiting to be processed**. In such cases, it may seem as if your application is lagging or stuck, when in reality, `concatMap` is diligently processing each value in order. For scenarios where you'd prefer to handle the most recent value and discard previous ones, consider using [`switchMap`](switchmap.md) instead. + +Lastly, if you're not concerned about the order of processing and just want everything to execute as it arrives, [`mergeMap`](mergemap.md) might be the better choice. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From ea7d199cc3fbb844d4dc74cc3447ee69abfd972c Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 15:48:40 -0400 Subject: [PATCH 247/256] feat(operators): add why use section to distinctUntilChanged (#305) --- operators/filtering/distinctuntilchanged.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index eac8fd78..f473145c 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -14,6 +14,18 @@ match! --- +### Why use `distinctUntilChanged`? + +This operator stands guard, ensuring that you're not bombarded with repetitive information. Imagine if your best friend kept repeating the same story to you every time you met. It'd get old, right? The `distinctUntilChanged` operator does just that; it prevents subsequent identical emissions from an observable. + +Think about a search bar on a website. As users type their queries, you don't want to send a server request for the same input value multiple times in a row, it would be redundant and inefficient. Here’s where `distinctUntilChanged` combined with [`debounceTime`](debouncetime.md) could shine. Imagine a user typing in a search term and then slightly hesitating before adding another letter. You might want to wait just a little bit (that’s (`debounceTime`)[debouncetime.md] doing its magic) and then, before firing off a request, ensure the term is actually different than the previous one - this is where you can utilize `distinctUntilChanged`. + +For example, if a user is searching for "apple" and they type "app" -> wait a bit -> "appl" -> backtrack to "app" -> type again "appl", without `distinctUntilChanged`, you might end up sending redundant requests. But with it, once "appl" is recognized as previously processed, it won't send the redundant search request again. + +It's important to remember that **`distinctUntilChanged` compares the current value with the last emitted value**. It doesn’t keep a long history. So, if an observable emitted the values 1, 2, 2, 3, 3, 2 - you’d get 1, 2, 3, 2 in return. By default, it also uses simple equality to compare values. If you're working with objects or arrays, you might need to provide a custom comparison function to determine whether values are distinct. + +In essence, when you're looking to filter out consecutive duplicate emissions from your observables, think of `distinctUntilChanged` as your go-to option. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 073160161a127bbd3337ba66839778edfefc50ca Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 16:05:32 -0400 Subject: [PATCH 248/256] feat(subjects): add description to behaviorsubject (#306) --- subjects/behaviorsubject.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 9d9c4803..54b2c32f 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -9,6 +9,17 @@ supply a seed value, check out [ReplaySubject](replaysubject.md) instead! --- +### Why use `BehaviorSubject`? + +This specialized subject is ideal when you want to maintain and provide a "current value" to subscribers. Think of it as a scoreboard in a basketball game. Even if you join watching in the middle of the game, you'll still see the current score. Similarly, when a new observer subscribes to a `BehaviorSubject`, it immediately receives the current value (or the last value that was emitted). + +It's important to remember that a **`BehaviorSubject` requires an initial value upon instantiation**. This is where it differs from a regular [`Subject`](subject.md) which doesn't have an initial value. Picture a newly installed scoreboard – with `BehaviorSubject`, you set a starting score, say 0-0. With a regular [`Subject`](subject.md), the board remains blank until a point is scored. Subscribers (early or late) of a normal [`Subject`](subject.md) will not receive + emissions until the `Subject` emits a value. + +Contrasting with [`ReplaySubject`](replaysubject.md), while both provide historical values, [`ReplaySubject`](replaysubject.md) can relay multiple previous values, not just the last one. If the basketball scoreboard could show the last five scores in the match sequence, that'd be akin to [`ReplaySubject`](replaysubject.md). [`ReplaySubject`](replaysubject.md) also does not receive an initial seed value. + +In conclusion, if you need to ensure subscribers always get the latest value upon subscription, or you have an initial seed value, `BehaviorSubject` is your pick. If you need more historical emissions, consider [`ReplaySubject`](replaysubject.md). And if you don't need any history at all, a simple [`Subject`](subject.md) might be what you're looking for. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 8f3b88e226a7f0ed81bef98d1961b836845ed7de Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 16:11:16 -0400 Subject: [PATCH 249/256] feat(subject): add extra description to subject (#307) --- subjects/subject.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/subjects/subject.md b/subjects/subject.md index 8994b3d1..da7617be 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -2,6 +2,22 @@ ## A special type of Observable which shares a single execution path among observers +### Why use `Subject`? + +`Subject` in RxJS acts as a bridge between the observer and the observable world. Imagine it as a microphone on a stage: you can shout into it (emit values) and those sitting in the audience (observers) can hear it loud and clear. The uniqueness of a `Subject` is its capability to multicast, i.e., it can emit values to multiple listeners. + +A real-world example of this is like a radio show: one broadcast can be listened to by multiple listeners at once. + +However, there's an array of "microphones" in the RxJS universe, and here's where the other "specialized" Subject types come in: + +- **[`BehaviorSubject`](behaviorsubject.md)**: Imagine going to a movie late and asking your friend, "Hey, what just happened?" and they fill you in. `BehaviorSubject` is similar: when you subscribe, it will give you the latest value that was emitted before you tuned in, and then you continue getting updates. So, if you need that "previous context," this is your pick. `BehaviorSubject` also require a seed value. + +- **[`ReplaySubject`](replaysubject.md)**: Think of this as a DVR for your TV. It records, say, the last 5 shows, and you can replay those whenever you switch on your TV. `ReplaySubject` can keep a buffer of emitted values, and when you subscribe, it will "replay" those values for you, ensuring you don't miss out on what was broadcasted earlier. + +In contrast, a simple `Subject` doesn't offer these playback features. If you join late, you've missed it, akin to a live concert. You only hear what's played after you've arrived. + +In summary, choose `Subject` for standard multicasting needs. Opt for `BehaviorSubject` when the latest value or seed value is critical, and `ReplaySubject` when you want to ensure a history of values is available for late subscribers. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 455c8cd2fd99dc7324a53c5bc2f60da2877fbd30 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 17 Oct 2023 16:14:57 -0400 Subject: [PATCH 250/256] feat(subjects): add replay subject description (#308) --- subjects/replaysubject.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 15f0b536..6973fcca 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -2,6 +2,24 @@ ## "Replays" or emits old values to new subscribers +### Why use `ReplaySubject`? + +This subject variation shines when you want subscribers to have access to previous values emitted, even if they subscribe after those values have been sent. Think of it as a Tivo or DVR for observables. Missed the start of the show? No worries! With a `ReplaySubject`, you can still catch up on what you missed. + +For a real-world example, consider a chat application. When a user joins a chatroom, they might want to see the last few messages, not just new ones. A `ReplaySubject` can hold onto a specified number of the most recent messages and display them to the user when they join. + +Now, how does it compare with `BehaviorSubject` or a plain `Subject`? + +- **[`BehaviorSubject`](behaviorsubject.md)** always requires an initial value and only stores the most recent value. Subscribers will get that latest value upon subscription. It's like walking into a movie and only catching the most recent scene. + +- **[`Subject`](subject.md)**, on the other hand, doesn't give new subscribers any previously emitted values. It’s the traditional live broadcast. If you're late, you miss out. + +- **`ReplaySubject`** can remember more than just the last scene. Depending on how it's configured, it might replay the entire movie or just the last few scenes. + +However, be cautious. `ReplaySubject` can potentially use more memory since it's storing multiple values. Ensure that you specify a limited buffer size if you're concerned about memory consumption. + +In conclusion, if you want the ability to replay a series of previous emissions to new subscribers, `ReplaySubject` is your go-to. If you only care about the most recent emission (with an initial value), opt for `BehaviorSubject`. And if you want a basic, no-frills broadcasting mechanism where late subscribers miss prior emissions, stick with a plain `Subject`. + [![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From c5963dc2caacf3f4296963235e592412cc667cce Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Mon, 5 Feb 2024 21:15:10 -0500 Subject: [PATCH 251/256] fix(banner): update broken banner url (#312) --- README.md | 2 +- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/generate.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinct.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- operators/filtering/distinctuntilkeychanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/mergescan.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/repeatwhen.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/timeoutwith.md | 2 +- operators/utility/topromise.md | 2 +- recipes/alphabet-invasion-game.md | 2 +- recipes/battleship-game.md | 2 +- recipes/breakout-game.md | 2 +- recipes/car-racing-game.md | 2 +- recipes/catch-the-dot-game.md | 2 +- recipes/click-ninja-game.md | 2 +- recipes/flappy-bird-game.md | 2 +- recipes/gameloop.md | 2 +- recipes/horizontal-scroll-indicator.md | 2 +- recipes/http-polling.md | 2 +- recipes/lockscreen.md | 2 +- recipes/matrix-digital-rain.md | 2 +- recipes/memory-game.md | 2 +- recipes/mine-sweeper-game.md | 2 +- recipes/platform-jumper-game.md | 2 +- recipes/progressbar.md | 2 +- recipes/save-indicator.md | 2 +- recipes/smartcounter.md | 2 +- recipes/space-invaders-game.md | 2 +- recipes/stop-watch.md | 2 +- recipes/swipe-to-refresh.md | 2 +- recipes/tank-battle-game.md | 2 +- recipes/tetris-game.md | 2 +- recipes/type-ahead.md | 2 +- recipes/uncover-image-game.md | 2 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 121 files changed, 121 insertions(+), 121 deletions(-) diff --git a/README.md b/README.md index cf1a1c70..b9bcd85c 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz)](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg)](https://ultimatecourses.com/courses/rxjs?ref=4) ### Brand New to RxJS? diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 23a10f6c..50eeefaf 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 6e14861d..06d0dae6 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -31,7 +31,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 00dbf763..7732b148 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -21,7 +21,7 @@ Keep in mind that concat will only start emitting values from the next observabl In contrast, if you need to combine observables that emit values concurrently, or you require the latest values from multiple observables whenever any of them emit a new value, [combineLatest](combinelatest.md) or [withLatestFrom](withlatestfrom.md) might be more suitable options. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 979d0010..c50bca0c 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -22,7 +22,7 @@ Bear in mind that `concatAll` will only start processing the next observable whe Additionally, if you're working with observables that can emit values concurrently and don't need to wait for one to complete before processing another, [mergeAll](mergeall.md) might be a more suitable choice. Similarly, if you only need to combine the values of multiple observables at the point when they all complete, [forkJoin](forkjoin.md) could be a better option. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index bb802c4c..65e9600f 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -21,7 +21,7 @@ Keep in mind that endWith only emits the specified value when the source observa In cases where you want to prepend a value at the beginning of an observable sequence instead of appending it at the end, consider using the [startWith](startwith.md) operator. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index 01b10bce..e2e5db9c 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -34,7 +34,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may be better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 20340152..3be37026 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -22,7 +22,7 @@ Keep in mind that `merge` will emit values as soon as any of the observables emi Lastly, if you're dealing with observables that emit values at specific intervals and you need to combine them based on time, consider using the [zip](zip.md) operator instead. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index eb042c10..65261b79 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -25,7 +25,7 @@ When deciding between mergeAll and other operators, keep in mind the following: - If you need to merge observables that produce values independently and are short-lived, `mergeAll` is the operator to reach for. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index f9f82afb..58f4c05e 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -11,7 +11,7 @@ Keep in mind that `pairwise` will not emit an initial value until the observable Lastly, if you're working with observables that emit multiple values but you only want to compare the last two emitted values, consider using the [bufferCount](../transformation/buffercount.md) operator with a buffer size of 2 and a start buffer count of 1 as an alternative approach. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index a07e81c2..5de29b6e 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -13,7 +13,7 @@ It's crucial to remember that `race` only pays attention to the first emitted va If your use case involves working with multiple observables that should all emit values and complete, or you need to process the emitted values in a specific order, consider using operators like [combineLatest](combinelatest.md) or [forkJoin](forkjoin.md) instead. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index be552307..e88ea1dc 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -19,7 +19,7 @@ A real-world example can be seen in a search functionality, where the search res Keep in mind that startWith emits the initial value immediately upon subscription. This behavior is helpful when you want to make sure your subscribers receive a value right away, even before the source observable starts emitting values. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index f12e02f6..c98adbb7 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -20,7 +20,7 @@ Keep in mind that `withLatestFrom` only emits a value when the main observable e If you need to combine values from multiple observables that emit more than once and are interdependent, consider using [`combineLatest`](combinelatest.md) instead. And for scenarios where observables emit only once or you just need their last values, [`forkJoin`](forkjoin.md) might be a more suitable choice. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index c4658be4..a34e2ce7 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -19,7 +19,7 @@ An everyday example is when you want to match information from two sources, like Be mindful that zip will only emit a value when all input observables have emitted a corresponding value. This means if one observable has emitted more values than another, the unmatched values will be held back until the other observable emits its next value. In some cases, this could lead to unpaired values, making it important to ensure your observables are synchronized. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 5c3afac2..4340fb7d 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 4673662a..3166a507 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 2a7235dd..9f167c1a 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Subscribe to first or second observable based on a condition -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 9be36337..823c5696 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares emitted sequence to expected sequence for match -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index 06e6c6fe..9062e981 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -4,7 +4,7 @@ ## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index 0237a491..c95cd0d9 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/defer.md b/operators/creation/defer.md index a9df47ea..c10ea644 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -12,7 +12,7 @@ is used as part of the [`iif`](../conditional/iif.md) operator! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index ed122dfc..cb133bcf 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index e0502c81..71bd8473 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -14,7 +14,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 80830b8e..2cc7860e 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/generate.md b/operators/creation/generate.md index d51675b1..ef57ec93 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -4,7 +4,7 @@ ## Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index c6f0e08c..39e141c6 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/range.md b/operators/creation/range.md index fbdc3cc9..6e1d0122 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 5e3c1379..633422fa 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index 9187a3ba..b7cee1fe 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index ecd603a6..3f27d1e0 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 3676a8ad..c02693a9 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -15,7 +15,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 4cde404e..039e38d5 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 526f744e..dec351f8 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -11,7 +11,7 @@ important when the debounce rate is variable! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 082de437..a3d9564e 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -27,7 +27,7 @@ this.myFormControl.valueChanges.pipe( ``` -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/distinct.md b/operators/filtering/distinct.md index 54c52d6c..2ee39f25 100644 --- a/operators/filtering/distinct.md +++ b/operators/filtering/distinct.md @@ -4,7 +4,7 @@ ## Emits items emitted that are distinct based on any previously emitted item. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index f473145c..5698ebaf 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -26,7 +26,7 @@ It's important to remember that **`distinctUntilChanged` compares the current va In essence, when you're looking to filter out consecutive duplicate emissions from your observables, think of `distinctUntilChanged` as your go-to option. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index e4751bae..72cab3fe 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -4,7 +4,7 @@ ## Only emit when the specified key value has changed -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index f49dd928..90afd548 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -19,7 +19,7 @@ This operator is your go-to when you need to sift out unwanted values from an ob Also, for scenarios where you not only want to filter values but also transform them, [`map`](../transformation/map.md) is an ideal companion to `filter`. Use them in tandem to both shape and refine your data streams. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/find.md b/operators/filtering/find.md index efb6e5e3..67920a7c 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 2c5f596e..31cf84ad 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -14,7 +14,7 @@ this behavior, use `take(1)` instead. --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index e3e5c6d7..634c415e 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index add2fbed..937fc133 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 39994150..4d38ae65 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index ed36a22c..c3d6ca6b 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index ec9a8ba1..bf59d7aa 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 57f0c136..f846c7ec 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided observable emits. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index d718417b..2d5631a8 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 118757be..8421a1ef 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -26,7 +26,7 @@ emissions. --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index 5d110d8d..64467aa6 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -11,7 +11,7 @@ of multiple observables, try [forkJoin](../combination/forkjoin.md)! --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 4d92299e..2e9043c2 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -33,7 +33,7 @@ ngOnDestroy() { With this setup, as soon as the `ngOnDestroy` method is called (when the component is about to be destroyed), the observables using `takeUntil` with the `destroy$` subject will automatically unsubscribe, ensuring that no unwanted memory leaks or unexpected behavior occurs. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index f0779d21..6d4b9f66 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -11,7 +11,7 @@ the first item that didn't pass the predicate. --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index 4e6a7c05..aabc06ab 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 8353dc3f..8ec5f4ce 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit first value then ignore for specified duration -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 9189a30e..9b40cffc 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 21750c73..679b44fc 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 2060ac2d..adf7f9fd 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 8292134c..b2e2c097 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index d5aedebf..9bddfc61 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -11,7 +11,7 @@ Buffer shines in scenarios like batching multiple events together before process However, keep in mind that buffer may not be the best fit when you require immediate processing of each emitted value. One way to think about this is "buffer is about batching". Remember, buffer is all about accumulating and releasing values based on specific triggers, making it a powerful tool for managing grouped events. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 7b742c48..a84587ec 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -13,7 +13,7 @@ Keep in mind, though, that bufferCount may not be the best choice when the buffe Exercise caution in situations where buffering strategy plays a critical role in the desired output, as choosing the wrong operator might lead to unexpected behavior. Familiarize yourself with the various buffering operators to make informed decisions based on your specific requirements. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 2b21ea6d..460a1917 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 3356ec4c..a4994d87 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 5b1860eb..6efc6fa1 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -14,7 +14,7 @@ Keep in mind that **if the inner observable takes a significant time to complete Lastly, if you're not concerned about the order of processing and just want everything to execute as it arrives, [`mergeMap`](mergemap.md) might be the better choice. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 534a7929..41226dc4 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 433564db..b81efd43 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -14,7 +14,7 @@ Take note that **`exhaustMap` will ignore source values while the previous inner If you want to handle every single event, even if previous ones haven't completed, other operators like [`switchMap`](switchmap.md) or [`mergeMap`](mergemap.md) might be more appropriate. But when ensuring one task is exhausted before moving to the next, `exhaustMap` is your go-to choice. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 4da5fed3..f5a5a4a9 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index 8fb5b8fc..1768814a 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/map.md b/operators/transformation/map.md index ad220718..a68cb01e 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 4efa6410..850e0843 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index f1fbad75..dbffc6f3 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 5](#example-5-mergemap-with-concurrent-value). -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index 5d58e303..8076767c 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -4,7 +4,7 @@ ## Accumulate value over time via merged observables. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index 080a8a34..b741ede8 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 7e0cc8ff..174605b6 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 4745b263..5e27da8d 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ 💡 If you need the current accumulated value on each emission, try [scan](scan.md)! -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index ef19012b..e28a6a80 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -18,7 +18,7 @@ The scan operator is highly useful in scenarios that require real-time monitorin In summary, the scan operator provides a powerful and flexible means of handling continuous accumulation and emission of values, which can be especially useful in real-time monitoring and processing tasks. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 9682f129..1445a7a7 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index 34ed9d8a..58c69986 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 9222a1f7..9ee5f8b1 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index da951eac..671d86aa 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 6f99c00c..7a2e18fa 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 3be32dfb..d6b1d091 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 7d751d62..1ca51c7c 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 1702c518..d32aec12 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -10,7 +10,7 @@ This operator is your go-to when simulating real-world scenarios such as network Keep in mind that **`delay` won’t prevent the original observable from emitting values**. It merely postpones the delivery to its subscribers. This is a _gotcha_ as it could look like your data is lagging or not in sync with the source, especially when multiple observables are at play. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 1bc8abb4..a55f1d95 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index c8c7c6ca..5bf143d4 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -7,7 +7,7 @@ [![UltimateRxJS][uc-image]][uc-url] [uc-image]: - https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz + https://ultimatecourses.com/static/banners/banner-rxjs.svg [uc-url]: https://ultimatecourses.com/courses/rxjs?ref=4 ### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index a922078f..21552efd 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -20,7 +20,7 @@ However, a word of caution: **remember that `tap` is solely for side effects**. Lastly, it's best to ensure that the side effects you introduce via `tap` are not critical to the main logic of your observable chain, keeping them non-intrusive and harmless. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index 642faa4c..8a898a8b 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 05bb02db..f9f16833 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index 06ed7bc0..307b9015 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 9b10cf04..4c7e2e3f 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -4,7 +4,7 @@ ## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 9398717d..e45a56b0 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index afa7eec6..28995a65 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -4,7 +4,7 @@ ## Subscribe to second Observable if no emission occurs in given time span. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index a989871d..04d75300 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index 3f3a3696..fcfe4a16 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Alphabet Invasion Game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/battleship-game.md b/recipes/battleship-game.md index 30609a30..66cef0ac 100644 --- a/recipes/battleship-game.md +++ b/recipes/battleship-game.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Battleship Game where you play against the computer. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md index e022af68..76cf5aaa 100644 --- a/recipes/breakout-game.md +++ b/recipes/breakout-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Breakout game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/car-racing-game.md b/recipes/car-racing-game.md index 8e79689d..e7095bbb 100644 --- a/recipes/car-racing-game.md +++ b/recipes/car-racing-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Car Racing game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index d3fac7ca..9dbb35e6 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of scan operator for state management in simple game -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md index f2d29f75..4626d12e 100644 --- a/recipes/click-ninja-game.md +++ b/recipes/click-ninja-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of time interval operator in a simple game -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md index c2dc53d7..22778ca8 100644 --- a/recipes/flappy-bird-game.md +++ b/recipes/flappy-bird-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Flappy Bird like game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/gameloop.md b/recipes/gameloop.md index 4ac40f69..3af9b9ca 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md index 57d5201c..7dfdc895 100644 --- a/recipes/horizontal-scroll-indicator.md +++ b/recipes/horizontal-scroll-indicator.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of a horizontal scroll indicator. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/http-polling.md b/recipes/http-polling.md index 761b6d2f..654751d4 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,6 +1,6 @@ # HTTP Polling -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index 4f2481ea..8ed85ac2 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of lockscreen functionality (known for example from smartphones). -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/matrix-digital-rain.md b/recipes/matrix-digital-rain.md index 3b049bb4..a5d9ca5a 100644 --- a/recipes/matrix-digital-rain.md +++ b/recipes/matrix-digital-rain.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Matrix Digital Rain. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/memory-game.md b/recipes/memory-game.md index c167463e..3db8732e 100644 --- a/recipes/memory-game.md +++ b/recipes/memory-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS game to train your memory. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md index c5e36350..4135271f 100644 --- a/recipes/mine-sweeper-game.md +++ b/recipes/mine-sweeper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Mine Sweeper Game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md index 569de016..2411c39c 100644 --- a/recipes/platform-jumper-game.md +++ b/recipes/platform-jumper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Platform Jumper game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index 6373d8c3..dfd315f7 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/save-indicator.md b/recipes/save-indicator.md index 2bf5db81..84cad84e 100644 --- a/recipes/save-indicator.md +++ b/recipes/save-indicator.md @@ -3,7 +3,7 @@ This recipe demonstrates the creation of a google docs-esque save indicator with RxJS. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index c018ecab..3ba4547d 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) #### Vanilla JS diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index 95a9f594..5a217cb5 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Space Invaders Game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/stop-watch.md b/recipes/stop-watch.md index 93a97e55..fed86345 100644 --- a/recipes/stop-watch.md +++ b/recipes/stop-watch.md @@ -6,7 +6,7 @@ This recipe demonstrates RxJS implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by [@Michael_Hladky](https://twitter.com/michael_hladky) -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md index b8cd6bbd..a951a1c3 100644 --- a/recipes/swipe-to-refresh.md +++ b/recipes/swipe-to-refresh.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md index ee4ebc56..61cac015 100644 --- a/recipes/tank-battle-game.md +++ b/recipes/tank-battle-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tank Battle like game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/tetris-game.md b/recipes/tetris-game.md index 335d6e34..5479db43 100644 --- a/recipes/tetris-game.md +++ b/recipes/tetris-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tetris game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index bf15dbef..d4fe8114 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of type ahead client side code. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/recipes/uncover-image-game.md b/recipes/uncover-image-game.md index ee1707bf..9aa501ce 100644 --- a/recipes/uncover-image-game.md +++ b/recipes/uncover-image-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Uncover Image Game. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Example Code diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index 12f1cdca..f718a274 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -2,7 +2,7 @@ ## Emits its last value on completion -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index 54b2c32f..da39224d 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -20,7 +20,7 @@ Contrasting with [`ReplaySubject`](replaysubject.md), while both provide histori In conclusion, if you need to ensure subscribers always get the latest value upon subscription, or you have an initial seed value, `BehaviorSubject` is your pick. If you need more historical emissions, consider [`ReplaySubject`](replaysubject.md). And if you don't need any history at all, a simple [`Subject`](subject.md) might be what you're looking for. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 6973fcca..5b337e70 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -20,7 +20,7 @@ However, be cautious. `ReplaySubject` can potentially use more memory since it's In conclusion, if you want the ability to replay a series of previous emissions to new subscribers, `ReplaySubject` is your go-to. If you only care about the most recent emission (with an initial value), opt for `BehaviorSubject`. And if you want a basic, no-frills broadcasting mechanism where late subscribers miss prior emissions, stick with a plain `Subject`. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples diff --git a/subjects/subject.md b/subjects/subject.md index da7617be..98740269 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -18,7 +18,7 @@ In contrast, a simple `Subject` doesn't offer these playback features. If you jo In summary, choose `Subject` for standard multicasting needs. Opt for `BehaviorSubject` when the latest value or seed value is critical, and `ReplaySubject` when you want to ensure a history of values is available for late subscribers. -[![Ultimate RxJS](https://drive.google.com/uc?export=view&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) +[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) ### Examples From 2abdfffdd6a650c883c884dab5eefd6d206ed1db Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 7 Oct 2025 14:07:56 -0400 Subject: [PATCH 252/256] chore: remove ua (#320) --- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/forkjoin.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/iif.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/creation/ajax.md | 2 +- operators/creation/create.md | 2 +- operators/creation/defer.md | 2 +- operators/creation/empty.md | 2 +- operators/creation/from.md | 2 +- operators/creation/fromevent.md | 2 +- operators/creation/generate.md | 2 +- operators/creation/interval.md | 2 +- operators/creation/range.md | 2 +- operators/creation/throw.md | 2 +- operators/creation/timer.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinct.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- operators/filtering/distinctuntilkeychanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 2 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 2 +- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/mergescan.md | 2 +- operators/transformation/partition.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/do.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/repeatwhen.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/timeoutwith.md | 2 +- operators/utility/topromise.md | 2 +- recipes/alphabet-invasion-game.md | 2 +- recipes/battleship-game.md | 2 +- recipes/breakout-game.md | 2 +- recipes/car-racing-game.md | 2 +- recipes/catch-the-dot-game.md | 2 +- recipes/click-ninja-game.md | 2 +- recipes/flappy-bird-game.md | 2 +- recipes/gameloop.md | 2 +- recipes/horizontal-scroll-indicator.md | 2 +- recipes/http-polling.md | 2 +- recipes/lockscreen.md | 2 +- recipes/matrix-digital-rain.md | 2 +- recipes/memory-game.md | 2 +- recipes/mine-sweeper-game.md | 2 +- recipes/platform-jumper-game.md | 2 +- recipes/progressbar.md | 2 +- recipes/save-indicator.md | 2 +- recipes/smartcounter.md | 2 +- recipes/space-invaders-game.md | 2 +- recipes/stop-watch.md | 2 +- recipes/swipe-to-refresh.md | 2 +- recipes/tank-battle-game.md | 2 +- recipes/tetris-game.md | 2 +- recipes/type-ahead.md | 2 +- recipes/uncover-image-game.md | 2 +- subjects/asyncsubject.md | 2 +- subjects/behaviorsubject.md | 2 +- subjects/replaysubject.md | 2 +- subjects/subject.md | 2 +- 119 files changed, 119 insertions(+), 119 deletions(-) diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 50eeefaf..b8be3ec7 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -4,7 +4,7 @@ ## When source observable completes use [combineLatest](combinelatest.md) with collected observables. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 06d0dae6..3cf7520e 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -31,7 +31,7 @@ Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, [`forkJoin`](forkjoin.md) is likely a better option. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 7732b148..9215a797 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -21,7 +21,7 @@ Keep in mind that concat will only start emitting values from the next observabl In contrast, if you need to combine observables that emit values concurrently, or you require the latest values from multiple observables whenever any of them emit a new value, [combineLatest](combinelatest.md) or [withLatestFrom](withlatestfrom.md) might be more suitable options. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index c50bca0c..8be4b423 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -22,7 +22,7 @@ Bear in mind that `concatAll` will only start processing the next observable whe Additionally, if you're working with observables that can emit values concurrently and don't need to wait for one to complete before processing another, [mergeAll](mergeall.md) might be a more suitable choice. Similarly, if you only need to combine the values of multiple observables at the point when they all complete, [forkJoin](forkjoin.md) could be a better option. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 65e9600f..0ab7e7c6 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -21,7 +21,7 @@ Keep in mind that endWith only emits the specified value when the source observa In cases where you want to prepend a value at the beginning of an observable sequence instead of appending it at the end, consider using the [startWith](startwith.md) operator. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index e2e5db9c..db22c9a0 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -34,7 +34,7 @@ item, and you are concerned with the previous emissions `forkJoin` is not the correct choice. In these cases you may be better off with an operator like [combineLatest](combinelatest.md) or [zip](zip.md). -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 3be37026..02944033 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -22,7 +22,7 @@ Keep in mind that `merge` will emit values as soon as any of the observables emi Lastly, if you're dealing with observables that emit values at specific intervals and you need to combine them based on time, consider using the [zip](zip.md) operator instead. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 65261b79..4bb55431 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -25,7 +25,7 @@ When deciding between mergeAll and other operators, keep in mind the following: - If you need to merge observables that produce values independently and are short-lived, `mergeAll` is the operator to reach for. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 58f4c05e..79cca6a1 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -11,7 +11,7 @@ Keep in mind that `pairwise` will not emit an initial value until the observable Lastly, if you're working with observables that emit multiple values but you only want to compare the last two emitted values, consider using the [bufferCount](../transformation/buffercount.md) operator with a buffer size of 2 and a start buffer count of 1 as an alternative approach. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/race.md b/operators/combination/race.md index 5de29b6e..b970f7c1 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -13,7 +13,7 @@ It's crucial to remember that `race` only pays attention to the first emitted va If your use case involves working with multiple observables that should all emit values and complete, or you need to process the emitted values in a specific order, consider using operators like [combineLatest](combinelatest.md) or [forkJoin](forkjoin.md) instead. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index e88ea1dc..b76139af 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -19,7 +19,7 @@ A real-world example can be seen in a search functionality, where the search res Keep in mind that startWith emits the initial value immediately upon subscription. This behavior is helpful when you want to make sure your subscribers receive a value right away, even before the source observable starts emitting values. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index c98adbb7..e55b4ea5 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -20,7 +20,7 @@ Keep in mind that `withLatestFrom` only emits a value when the main observable e If you need to combine values from multiple observables that emit more than once and are interdependent, consider using [`combineLatest`](combinelatest.md) instead. And for scenarios where observables emit only once or you just need their last values, [`forkJoin`](forkjoin.md) might be a more suitable choice. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/combination/zip.md b/operators/combination/zip.md index a34e2ce7..b4f3b939 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -19,7 +19,7 @@ An everyday example is when you want to match information from two sources, like Be mindful that zip will only emit a value when all input observables have emitted a corresponding value. This means if one observable has emitted more values than another, the unmatched values will be held back until the other observable emits its next value. In some cases, this could lead to unpaired values, making it important to ensure your observables are synchronized. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 4340fb7d..05e92a56 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -4,7 +4,7 @@ ## Emit given value if nothing is emitted before completion. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 3166a507..57676ce2 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -4,7 +4,7 @@ ## If all values pass predicate before completion emit true, else false. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/conditional/iif.md b/operators/conditional/iif.md index 9f167c1a..7e19384a 100644 --- a/operators/conditional/iif.md +++ b/operators/conditional/iif.md @@ -4,7 +4,7 @@ ## Subscribe to first or second observable based on a condition -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 823c5696..4d04ae2c 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -4,7 +4,7 @@ ## Compares emitted sequence to expected sequence for match -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/ajax.md b/operators/creation/ajax.md index 9062e981..107feec9 100644 --- a/operators/creation/ajax.md +++ b/operators/creation/ajax.md @@ -4,7 +4,7 @@ ## Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/create.md b/operators/creation/create.md index c95cd0d9..2aa3ea29 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -4,7 +4,7 @@ ## Create an observable with given subscription function. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/defer.md b/operators/creation/defer.md index c10ea644..23927b6a 100644 --- a/operators/creation/defer.md +++ b/operators/creation/defer.md @@ -12,7 +12,7 @@ is used as part of the [`iif`](../conditional/iif.md) operator! --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/empty.md b/operators/creation/empty.md index cb133bcf..3ae977fc 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -4,7 +4,7 @@ ## Observable that immediately completes. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/from.md b/operators/creation/from.md index 71bd8473..eff6c9c7 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -14,7 +14,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 2cc7860e..b7f68ed0 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -4,7 +4,7 @@ ## Turn event into observable sequence. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/generate.md b/operators/creation/generate.md index ef57ec93..7b692b35 100644 --- a/operators/creation/generate.md +++ b/operators/creation/generate.md @@ -4,7 +4,7 @@ ## Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 39e141c6..487b8c2a 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -4,7 +4,7 @@ ## Emit numbers in sequence based on provided timeframe. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/range.md b/operators/creation/range.md index 6e1d0122..3f268207 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -4,7 +4,7 @@ ## Emit numbers in provided range in sequence. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 633422fa..d871854a 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -4,7 +4,7 @@ ## Emit error on subscription. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/creation/timer.md b/operators/creation/timer.md index b7cee1fe..21f8872b 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -4,7 +4,7 @@ ## After given duration, emit numbers in sequence every specified duration. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 3f27d1e0..d9ad69f8 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index c02693a9..a36f32d1 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -15,7 +15,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 039e38d5..7bb07f88 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -4,7 +4,7 @@ ## Retry an observable sequence on error based on custom criteria. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index dec351f8..ef6a54ec 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -11,7 +11,7 @@ important when the debounce rate is variable! --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index a3d9564e..bc2e0149 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -27,7 +27,7 @@ this.myFormControl.valueChanges.pipe( ``` -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/distinct.md b/operators/filtering/distinct.md index 2ee39f25..bee2f612 100644 --- a/operators/filtering/distinct.md +++ b/operators/filtering/distinct.md @@ -4,7 +4,7 @@ ## Emits items emitted that are distinct based on any previously emitted item. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index 5698ebaf..bb0cb003 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -26,7 +26,7 @@ It's important to remember that **`distinctUntilChanged` compares the current va In essence, when you're looking to filter out consecutive duplicate emissions from your observables, think of `distinctUntilChanged` as your go-to option. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index 72cab3fe..04c29dc8 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -4,7 +4,7 @@ ## Only emit when the specified key value has changed -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 90afd548..50529b48 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -19,7 +19,7 @@ This operator is your go-to when you need to sift out unwanted values from an ob Also, for scenarios where you not only want to filter values but also transform them, [`map`](../transformation/map.md) is an ideal companion to `filter`. Use them in tandem to both shape and refine your data streams. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/find.md b/operators/filtering/find.md index 67920a7c..48c73708 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 31cf84ad..5058820c 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -14,7 +14,7 @@ this behavior, use `take(1)` instead. --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 634c415e..3a8e2093 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -4,7 +4,7 @@ ## Ignore everything but complete and error. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/last.md b/operators/filtering/last.md index 937fc133..1b122cdc 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 4d38ae65..5a89510d 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -4,7 +4,7 @@ ## Sample from source when provided observable emits. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/single.md b/operators/filtering/single.md index c3d6ca6b..10849584 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -4,7 +4,7 @@ ## Emit single item that passes expression. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index bf59d7aa..0901b2ec 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -16,7 +16,7 @@ emissions. You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. `.filter((val, index) => index > 1)` -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index f846c7ec..43f5d4b9 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided observable emits. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 2d5631a8..58b5804d 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -4,7 +4,7 @@ ## Skip emitted values from source until provided expression is false. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 8421a1ef..5bc102b9 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -26,7 +26,7 @@ emissions. --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index 64467aa6..b14e2f93 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -11,7 +11,7 @@ of multiple observables, try [forkJoin](../combination/forkjoin.md)! --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 2e9043c2..9d75dbdc 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -33,7 +33,7 @@ ngOnDestroy() { With this setup, as soon as the `ngOnDestroy` method is called (when the component is about to be destroyed), the observables using `takeUntil` with the `destroy$` subject will automatically unsubscribe, ensuring that no unwanted memory leaks or unexpected behavior occurs. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 6d4b9f66..67e5a7f6 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -11,7 +11,7 @@ the first item that didn't pass the predicate. --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index aabc06ab..a9e6e5c5 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -4,7 +4,7 @@ ## Emit value on the leading edge of an interval, but suppress new values until `durationSelector` has completed. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 8ec5f4ce..05ef7142 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -4,7 +4,7 @@ ## Emit first value then ignore for specified duration -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 9b40cffc..5402a62b 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -4,7 +4,7 @@ ## Share source utilizing the provided Subject. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index 679b44fc..d854bb20 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -4,7 +4,7 @@ ## Share source and make hot by calling connect. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index adf7f9fd..009cd4b9 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index b2e2c097..a53d0720 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -133,7 +133,7 @@ source, sending values through an internal `ReplaySubject`: } ``` -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 9bddfc61..cb1d7885 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -11,7 +11,7 @@ Buffer shines in scenarios like batching multiple events together before process However, keep in mind that buffer may not be the best fit when you require immediate processing of each emitted value. One way to think about this is "buffer is about batching". Remember, buffer is all about accumulating and releasing values based on specific triggers, making it a powerful tool for managing grouped events. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index a84587ec..03e18cf6 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -13,7 +13,7 @@ Keep in mind, though, that bufferCount may not be the best choice when the buffe Exercise caution in situations where buffering strategy plays a critical role in the desired output, as choosing the wrong operator might lead to unexpected behavior. Familiarize yourself with the various buffering operators to make informed decisions based on your specific requirements. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 460a1917..81c08a5b 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -4,7 +4,7 @@ ## Toggle on to catch emitted values from source, toggle off to emit buffered values as array. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index a4994d87..9c3105f4 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -4,7 +4,7 @@ ## Collect all values until closing selector emits, emit buffered values. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 6efc6fa1..9e8d41ab 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -14,7 +14,7 @@ Keep in mind that **if the inner observable takes a significant time to complete Lastly, if you're not concerned about the order of processing and just want everything to execute as it arrives, [`mergeMap`](mergemap.md) might be the better choice. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 41226dc4..aee2568c 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -4,7 +4,7 @@ ## Subscribe to provided observable when previous completes, emit values. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index b81efd43..2369eb82 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -14,7 +14,7 @@ Take note that **`exhaustMap` will ignore source values while the previous inner If you want to handle every single event, even if previous ones haven't completed, other operators like [`switchMap`](switchmap.md) or [`mergeMap`](mergemap.md) might be more appropriate. But when ensuring one task is exhausted before moving to the next, `exhaustMap` is your go-to choice. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index f5a5a4a9..7bec82cd 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -4,7 +4,7 @@ ## Recursively call provided function. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index 1768814a..b5990b47 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -4,7 +4,7 @@ ## Group into observables based on provided value. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/map.md b/operators/transformation/map.md index a68cb01e..4e7ff752 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 850e0843..4ef673d3 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index dbffc6f3..4077a922 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -39,7 +39,7 @@ can also limit the number of active inner subscriptions at a time with the `concurrent` parameter, seen in [example 5](#example-5-mergemap-with-concurrent-value). -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index 8076767c..ee8b099e 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -4,7 +4,7 @@ ## Accumulate value over time via merged observables. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index b741ede8..d90c42f6 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -4,7 +4,7 @@ ## Split one observable into two based on provided predicate. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 174605b6..3ccdc54b 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -11,7 +11,7 @@ New to transformation operators? Check out the article {% endhint %} -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 5e27da8d..490219f6 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -10,7 +10,7 @@ 💡 If you need the current accumulated value on each emission, try [scan](scan.md)! -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index e28a6a80..992a5e52 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -18,7 +18,7 @@ The scan operator is highly useful in scenarios that require real-time monitorin In summary, the scan operator provides a powerful and flexible means of handling continuous accumulation and emission of values, which can be especially useful in real-time monitoring and processing tasks. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 1445a7a7..ac739d1a 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -38,7 +38,7 @@ every request needs to complete, think writes to a database. `switchMap` could cancel a request if the source emits quickly enough. In these scenarios [mergeMap](mergemap.md) is the correct option. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index 58c69986..ea1da852 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 9ee5f8b1..691723d7 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -4,7 +4,7 @@ ## Collects all source emissions and emits them as an array when the source completes. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index 671d86aa..b0661ba2 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -4,7 +4,7 @@ ## Observable of values from source, emitted each time provided count is fulfilled. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 7a2e18fa..5a1bd845 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -4,7 +4,7 @@ ## Observable of values collected from source for each provided time span. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index d6b1d091..75860632 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -4,7 +4,7 @@ ## Collect and emit observable of values from source between opening and closing emission. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 1ca51c7c..eba7ee51 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -4,7 +4,7 @@ ## Close window at provided time frame emitting observable of collected values from source. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/delay.md b/operators/utility/delay.md index d32aec12..1e8a938b 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -10,7 +10,7 @@ This operator is your go-to when simulating real-world scenarios such as network Keep in mind that **`delay` won’t prevent the original observable from emitting values**. It merely postpones the delivery to its subscribers. This is a _gotcha_ as it could look like your data is lagging or not in sync with the source, especially when multiple observables are at play. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index a55f1d95..dc8d2be8 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -4,7 +4,7 @@ ## Delay emitted values determined by provided function. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/do.md b/operators/utility/do.md index 21552efd..7fa081b1 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -20,7 +20,7 @@ However, a word of caution: **remember that `tap` is solely for side effects**. Lastly, it's best to ensure that the side effects you introduce via `tap` are not critical to the main logic of your observable chain, keeping them non-intrusive and harmless. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/let.md b/operators/utility/let.md index 8a898a8b..5cd83364 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index f9f16833..99304be5 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index 307b9015..969bd8fb 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -11,7 +11,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index 4c7e2e3f..f5686e41 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -4,7 +4,7 @@ ## Convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index e45a56b0..28a81853 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -4,7 +4,7 @@ ## Error if no value is emitted before specified duration -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index 28995a65..d7118ca5 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -4,7 +4,7 @@ ## Subscribe to second Observable if no emission occurs in given time span. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 04d75300..c1251f2a 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -10,7 +10,7 @@ --- -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/recipes/alphabet-invasion-game.md b/recipes/alphabet-invasion-game.md index fcfe4a16..99a82b44 100644 --- a/recipes/alphabet-invasion-game.md +++ b/recipes/alphabet-invasion-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Alphabet Invasion Game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/battleship-game.md b/recipes/battleship-game.md index 66cef0ac..d2ef0911 100644 --- a/recipes/battleship-game.md +++ b/recipes/battleship-game.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Battleship Game where you play against the computer. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/breakout-game.md b/recipes/breakout-game.md index 76cf5aaa..c89072e8 100644 --- a/recipes/breakout-game.md +++ b/recipes/breakout-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS implementation of Breakout game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/car-racing-game.md b/recipes/car-racing-game.md index e7095bbb..b1917afc 100644 --- a/recipes/car-racing-game.md +++ b/recipes/car-racing-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Car Racing game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/catch-the-dot-game.md b/recipes/catch-the-dot-game.md index 9dbb35e6..198efabc 100644 --- a/recipes/catch-the-dot-game.md +++ b/recipes/catch-the-dot-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of scan operator for state management in simple game -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/click-ninja-game.md b/recipes/click-ninja-game.md index 4626d12e..4fa5320e 100644 --- a/recipes/click-ninja-game.md +++ b/recipes/click-ninja-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe shows usage of time interval operator in a simple game -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/flappy-bird-game.md b/recipes/flappy-bird-game.md index 22778ca8..133cd394 100644 --- a/recipes/flappy-bird-game.md +++ b/recipes/flappy-bird-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJs implementation of Flappy Bird like game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/gameloop.md b/recipes/gameloop.md index 3af9b9ca..a6fee80d 100644 --- a/recipes/gameloop.md +++ b/recipes/gameloop.md @@ -9,7 +9,7 @@ a stream of frames and their deltaTimes since the previous frames. Combined with this is a stream of user inputs, and the current gameState, which we can use to update our objects, and render to to the screen on each frame emission. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/horizontal-scroll-indicator.md b/recipes/horizontal-scroll-indicator.md index 7dfdc895..d9d57146 100644 --- a/recipes/horizontal-scroll-indicator.md +++ b/recipes/horizontal-scroll-indicator.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of a horizontal scroll indicator. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/http-polling.md b/recipes/http-polling.md index 654751d4..12480206 100644 --- a/recipes/http-polling.md +++ b/recipes/http-polling.md @@ -1,6 +1,6 @@ # HTTP Polling -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/recipes/lockscreen.md b/recipes/lockscreen.md index 8ed85ac2..394e1439 100644 --- a/recipes/lockscreen.md +++ b/recipes/lockscreen.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of lockscreen functionality (known for example from smartphones). -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/matrix-digital-rain.md b/recipes/matrix-digital-rain.md index a5d9ca5a..8c5b1489 100644 --- a/recipes/matrix-digital-rain.md +++ b/recipes/matrix-digital-rain.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Matrix Digital Rain. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/memory-game.md b/recipes/memory-game.md index 3db8732e..aac19fb7 100644 --- a/recipes/memory-game.md +++ b/recipes/memory-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates an RxJS game to train your memory. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/mine-sweeper-game.md b/recipes/mine-sweeper-game.md index 4135271f..181ba827 100644 --- a/recipes/mine-sweeper-game.md +++ b/recipes/mine-sweeper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Mine Sweeper Game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/platform-jumper-game.md b/recipes/platform-jumper-game.md index 2411c39c..32e5041a 100644 --- a/recipes/platform-jumper-game.md +++ b/recipes/platform-jumper-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Platform Jumper game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/progressbar.md b/recipes/progressbar.md index dfd315f7..9ab82697 100644 --- a/recipes/progressbar.md +++ b/recipes/progressbar.md @@ -6,7 +6,7 @@ This recipe demonstrates the creation of an animated progress bar, simulating the management of multiple requests, and updating overall progress as each completes. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/save-indicator.md b/recipes/save-indicator.md index 84cad84e..92c5f48f 100644 --- a/recipes/save-indicator.md +++ b/recipes/save-indicator.md @@ -3,7 +3,7 @@ This recipe demonstrates the creation of a google docs-esque save indicator with RxJS. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/smartcounter.md b/recipes/smartcounter.md index 3ba4547d..2899d459 100644 --- a/recipes/smartcounter.md +++ b/recipes/smartcounter.md @@ -8,7 +8,7 @@ a popular library that accomplishes this is [Hubspot](https://github.com/HubSpot). Let's see how we can accomplish something similar with just a few lines of RxJS. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + #### Vanilla JS diff --git a/recipes/space-invaders-game.md b/recipes/space-invaders-game.md index 5a217cb5..f74b0226 100644 --- a/recipes/space-invaders-game.md +++ b/recipes/space-invaders-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Space Invaders Game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/stop-watch.md b/recipes/stop-watch.md index fed86345..42cb7ae1 100644 --- a/recipes/stop-watch.md +++ b/recipes/stop-watch.md @@ -6,7 +6,7 @@ This recipe demonstrates RxJS implementation of Stop Watch, inspired by [RxJS Advanced Patterns – Operate Heavily Dynamic UI’s](https://www.youtube.com/watch?v=XKfhGntZROQ) talk by [@Michael_Hladky](https://twitter.com/michael_hladky) -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/swipe-to-refresh.md b/recipes/swipe-to-refresh.md index a951a1c3..0933f982 100644 --- a/recipes/swipe-to-refresh.md +++ b/recipes/swipe-to-refresh.md @@ -5,7 +5,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of swipe to refresh functionality. Inspired by [@BenLesh](https://twitter.com/BenLesh) RxJs talks. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/tank-battle-game.md b/recipes/tank-battle-game.md index 61cac015..2b018ac0 100644 --- a/recipes/tank-battle-game.md +++ b/recipes/tank-battle-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tank Battle like game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/tetris-game.md b/recipes/tetris-game.md index 5479db43..ceabe9c3 100644 --- a/recipes/tetris-game.md +++ b/recipes/tetris-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Tetris game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/type-ahead.md b/recipes/type-ahead.md index d4fe8114..c9e0d627 100644 --- a/recipes/type-ahead.md +++ b/recipes/type-ahead.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates the creation of type ahead client side code. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/recipes/uncover-image-game.md b/recipes/uncover-image-game.md index 9aa501ce..dc82957e 100644 --- a/recipes/uncover-image-game.md +++ b/recipes/uncover-image-game.md @@ -4,7 +4,7 @@ _By [adamlubek](https://github.com/adamlubek)_ This recipe demonstrates RxJS implementation of Uncover Image Game. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Example Code diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index f718a274..ca45c894 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -2,7 +2,7 @@ ## Emits its last value on completion -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index da39224d..db4e4fcc 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -20,7 +20,7 @@ Contrasting with [`ReplaySubject`](replaysubject.md), while both provide histori In conclusion, if you need to ensure subscribers always get the latest value upon subscription, or you have an initial seed value, `BehaviorSubject` is your pick. If you need more historical emissions, consider [`ReplaySubject`](replaysubject.md). And if you don't need any history at all, a simple [`Subject`](subject.md) might be what you're looking for. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 5b337e70..8cdaecc9 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -20,7 +20,7 @@ However, be cautious. `ReplaySubject` can potentially use more memory since it's In conclusion, if you want the ability to replay a series of previous emissions to new subscribers, `ReplaySubject` is your go-to. If you only care about the most recent emission (with an initial value), opt for `BehaviorSubject`. And if you want a basic, no-frills broadcasting mechanism where late subscribers miss prior emissions, stick with a plain `Subject`. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples diff --git a/subjects/subject.md b/subjects/subject.md index 98740269..1037de67 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -18,7 +18,7 @@ In contrast, a simple `Subject` doesn't offer these playback features. If you jo In summary, choose `Subject` for standard multicasting needs. Opt for `BehaviorSubject` when the latest value or seed value is critical, and `ReplaySubject` when you want to ensure a history of values is available for late subscribers. -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg 'Ultimate RxJS')](https://ultimatecourses.com/courses/rxjs?ref=4) + ### Examples From b4476f954ab5f17b054bbd1daf3846d1a59abd60 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Tue, 7 Oct 2025 14:12:11 -0400 Subject: [PATCH 253/256] chore: update readme (#322) --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index b9bcd85c..ddcc46a9 100644 --- a/README.md +++ b/README.md @@ -28,8 +28,6 @@ material on the web. The goal is to supplement the while offering a new, fresh perspective to clear any hurdles and tackle the pain points. Learning Rx may be difficult but it is certainly worth the effort! -[![Ultimate RxJS](https://ultimatecourses.com/static/banners/banner-rxjs.svg)](https://ultimatecourses.com/courses/rxjs?ref=4) - ### Brand New to RxJS? Start getting familiar with all the key concepts needed to be productive with From bbfb25ca6bd27f64316d36f28158c0689aeb9696 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Thu, 16 Oct 2025 15:55:23 -0400 Subject: [PATCH 254/256] feat: update source urls, update map (#323) --- README.md | 4 + concepts/get-started-transforming.md | 4 +- operators/combination/combineall.md | 2 +- operators/combination/combinelatest.md | 2 +- operators/combination/concat.md | 2 +- operators/combination/concatall.md | 2 +- operators/combination/endwith.md | 2 +- operators/combination/merge.md | 2 +- operators/combination/mergeall.md | 2 +- operators/combination/pairwise.md | 2 +- operators/combination/race.md | 2 +- operators/combination/startwith.md | 2 +- operators/combination/withlatestfrom.md | 2 +- operators/combination/zip.md | 2 +- operators/conditional/defaultifempty.md | 2 +- operators/conditional/every.md | 2 +- operators/conditional/sequenceequal.md | 2 +- operators/error_handling/catch.md | 2 +- operators/error_handling/retry.md | 2 +- operators/error_handling/retrywhen.md | 2 +- operators/filtering/audit.md | 2 +- operators/filtering/audittime.md | 2 +- operators/filtering/debounce.md | 2 +- operators/filtering/debouncetime.md | 2 +- operators/filtering/distinct.md | 2 +- operators/filtering/distinctuntilchanged.md | 2 +- .../filtering/distinctuntilkeychanged.md | 2 +- operators/filtering/filter.md | 2 +- operators/filtering/find.md | 2 +- operators/filtering/first.md | 2 +- operators/filtering/ignoreelements.md | 2 +- operators/filtering/last.md | 2 +- operators/filtering/sample.md | 2 +- operators/filtering/single.md | 2 +- operators/filtering/skip.md | 2 +- operators/filtering/skipuntil.md | 2 +- operators/filtering/skipwhile.md | 2 +- operators/filtering/take.md | 2 +- operators/filtering/takelast.md | 2 +- operators/filtering/takeuntil.md | 2 +- operators/filtering/takewhile.md | 2 +- operators/filtering/throttle.md | 2 +- operators/filtering/throttletime.md | 2 +- operators/multicasting/multicast.md | 2 +- operators/multicasting/publish.md | 2 +- operators/multicasting/share.md | 2 +- operators/multicasting/sharereplay.md | 4 +- operators/transformation/buffer.md | 2 +- operators/transformation/buffercount.md | 2 +- operators/transformation/buffertime.md | 2 +- operators/transformation/buffertoggle.md | 2 +- operators/transformation/bufferwhen.md | 2 +- operators/transformation/concatmap.md | 2 +- operators/transformation/concatmapto.md | 2 +- operators/transformation/exhaustmap.md | 2 +- operators/transformation/expand.md | 2 +- operators/transformation/groupby.md | 2 +- operators/transformation/map.md | 191 ++++++++++++++---- operators/transformation/mapto.md | 2 +- operators/transformation/mergemap.md | 2 +- operators/transformation/mergescan.md | 2 +- operators/transformation/pluck.md | 2 +- operators/transformation/reduce.md | 2 +- operators/transformation/scan.md | 2 +- operators/transformation/switchmap.md | 2 +- operators/transformation/switchmapto.md | 2 +- operators/transformation/toarray.md | 2 +- operators/transformation/window.md | 2 +- operators/transformation/windowcount.md | 2 +- operators/transformation/windowtime.md | 2 +- operators/transformation/windowtoggle.md | 2 +- operators/transformation/windowwhen.md | 2 +- operators/utility/delay.md | 2 +- operators/utility/delaywhen.md | 2 +- operators/utility/dematerialize.md | 2 +- operators/utility/do.md | 2 +- operators/utility/finalize.md | 2 +- operators/utility/let.md | 2 +- operators/utility/repeat.md | 2 +- operators/utility/repeatwhen.md | 2 +- operators/utility/timeinterval.md | 2 +- operators/utility/timeout.md | 2 +- operators/utility/timeoutwith.md | 2 +- operators/utility/topromise.md | 2 +- 84 files changed, 237 insertions(+), 126 deletions(-) diff --git a/README.md b/README.md index ddcc46a9..956fb156 100644 --- a/README.md +++ b/README.md @@ -185,3 +185,7 @@ All references included in this GitBook are resources, both free and paid, that helped me tremendously while learning RxJS. If you come across an article or video that you think should be included, please use the _edit this page_ link in the top menu and submit a pull request. Your feedback is appreciated! + +--- + +Thank you to [Gitbook](https://www.gitbook.com/) for sponsoring this documentation! \ No newline at end of file diff --git a/concepts/get-started-transforming.md b/concepts/get-started-transforming.md index 74e91a98..21a21e33 100644 --- a/concepts/get-started-transforming.md +++ b/concepts/get-started-transforming.md @@ -224,7 +224,7 @@ result emitted in real-time as values blast through your streams. We can confirm this in the RxJS source code by seeing the function we provide is invoked, with the result being passed on to the subscriber (destination): -[(Source Code)](https://github.com/ReactiveX/rxjs/blob/e17df333fec66ea3d79e3f70565064f757c3a4fe/src/internal/operators/map.ts#L81-L91) +[(Source Code)](https://github.com/ReactiveX/rxjs/blob/e17df333fec66ea3d79e3f70565064f757c3a4fe/packages/rxjs/src/internal/operators/map.ts#L81-L91) ```ts protected _next(value: T) { @@ -332,7 +332,7 @@ Like many other helper operators in RxJS, behind the scenes `pluck` is simply reusing the `map` operator, passing it a function to grab the appropriate property: -[(Source Code)](https://github.com/ReactiveX/rxjs/blob/e17df333fec66ea3d79e3f70565064f757c3a4fe/src/internal/operators/pluck.ts#L48-L54) +[(Source Code)](https://github.com/ReactiveX/rxjs/blob/e17df333fec66ea3d79e3f70565064f757c3a4fe/packages/rxjs/src/internal/operators/pluck.ts#L48-L54) ```ts export function pluck(...properties: string[]): OperatorFunction { diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index b8be3ec7..64e00916 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -62,4 +62,4 @@ example$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineAll.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineAll.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/combineAll.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/combineAll.ts) diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 3cf7520e..b49e6f31 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -168,4 +168,4 @@ combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe( --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineLatest.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineLatest.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/combineLatest.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/combineLatest.ts) diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 9215a797..c1fe4c5a 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -105,4 +105,4 @@ concat(interval(1000), of('This', 'Never', 'Runs')) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concat.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concat.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/concat.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/concat.ts) diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 8be4b423..56835b3b 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -129,4 +129,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatAll.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatAll.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/concatAll.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/concatAll.ts) diff --git a/operators/combination/endwith.md b/operators/combination/endwith.md index 0ab7e7c6..a7262edb 100644 --- a/operators/combination/endwith.md +++ b/operators/combination/endwith.md @@ -97,4 +97,4 @@ source$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/endWith.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/endWith.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/endWith.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/endWith.ts) diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 02944033..9d048cf8 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -105,4 +105,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/merge.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/merge.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/merge.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/merge.ts) diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 4bb55431..974c7a02 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -106,4 +106,4 @@ const example = source --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeAll.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeAll.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/mergeAll.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/mergeAll.ts) diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 79cca6a1..63d55436 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -40,4 +40,4 @@ interval(1000) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/pairwise.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/pairwise.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/pairwise.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/pairwise.ts) diff --git a/operators/combination/race.md b/operators/combination/race.md index b970f7c1..c8608167 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -77,4 +77,4 @@ race(first, second, third).subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/race.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/race.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/race.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/race.ts) diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index b76139af..3235db51 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -122,4 +122,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/startWith.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/startWith.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/startWith.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/startWith.ts) diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index e55b4ea5..bc80ac6b 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -106,4 +106,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/withLatestFrom.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/withLatestFrom.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/withLatestFrom.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/withLatestFrom.ts) diff --git a/operators/combination/zip.md b/operators/combination/zip.md index b4f3b939..6acce48c 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -124,4 +124,4 @@ mouseClickDuration.subscribe(console.log); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/zip.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/zip.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/zip.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/zip.ts) diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 05e92a56..c40308e3 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -52,4 +52,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/defaultIfEmpty.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/defaultIfEmpty.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/defaultIfEmpty.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/defaultIfEmpty.ts) diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 57676ce2..77767fa4 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -91,4 +91,4 @@ apiCalls$.subscribe(); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/every.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/every.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/every.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/every.ts) diff --git a/operators/conditional/sequenceequal.md b/operators/conditional/sequenceequal.md index 4d04ae2c..17086456 100644 --- a/operators/conditional/sequenceequal.md +++ b/operators/conditional/sequenceequal.md @@ -70,4 +70,4 @@ fromEvent(document, 'keydown') --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sequenceEqual.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sequenceEqual.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/sequenceEqual.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/sequenceEqual.ts) diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index d9ad69f8..12c6f822 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -116,4 +116,4 @@ iWillStopListening$.subscribe(console.log); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/catchError.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/catchError.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/catchError.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/catchError.ts) diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index a36f32d1..8c8eb597 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -67,4 +67,4 @@ const subscribe = example.subscribe({ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retry.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retry.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/retry.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/retry.ts) diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 7bb07f88..e794e621 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -147,4 +147,4 @@ export class AppComponent implements OnInit { --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retryWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retryWhen.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/retryWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/retryWhen.ts) diff --git a/operators/filtering/audit.md b/operators/filtering/audit.md index c5121090..57b8b5e3 100644 --- a/operators/filtering/audit.md +++ b/operators/filtering/audit.md @@ -14,4 +14,4 @@ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/audit.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/audit.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/audit.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/audit.ts) diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index 9c82e451..f9d75594 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -42,4 +42,4 @@ const subscribe = example.subscribe(val => console.log('Clicked')); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/auditTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/auditTime.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/auditTime.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/auditTime.ts) diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index ef6a54ec..41af5978 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -77,4 +77,4 @@ const subscribe = debouncedInterval.subscribe(val => --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounce.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounce.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/debounce.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/debounce.ts) diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index bc2e0149..464e6fb7 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -75,4 +75,4 @@ keyup$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounceTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounceTime.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/debounceTime.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/debounceTime.ts) diff --git a/operators/filtering/distinct.md b/operators/filtering/distinct.md index bee2f612..fb294f5c 100644 --- a/operators/filtering/distinct.md +++ b/operators/filtering/distinct.md @@ -59,4 +59,4 @@ OUTPUT: --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinct.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinct.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinct.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinct.ts) diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index bb0cb003..d8657bb8 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -116,4 +116,4 @@ source$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilChanged.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinctUntilChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinctUntilChanged.ts) diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index 04c29dc8..c07fbea6 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -61,4 +61,4 @@ keys$.subscribe(console.log); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilKeyChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilKeyChanged.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinctUntilKeyChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinctUntilKeyChanged.ts) diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 50529b48..674217a6 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -116,4 +116,4 @@ const subscribe = example.subscribe(val => --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/filter.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/filter.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/filter.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/filter.ts) diff --git a/operators/filtering/find.md b/operators/filtering/find.md index 48c73708..8cb18f32 100644 --- a/operators/filtering/find.md +++ b/operators/filtering/find.md @@ -50,4 +50,4 @@ clicks$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/find.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/find.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/find.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/find.ts) diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 5058820c..0da4effb 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -90,4 +90,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/first.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/first.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/first.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/first.ts) diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 3a8e2093..b6b4d102 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -72,4 +72,4 @@ const subscribe = error.subscribe( --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/ignoreElements.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/ignoreElements.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/ignoreElements.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/ignoreElements.ts) diff --git a/operators/filtering/last.md b/operators/filtering/last.md index 1b122cdc..c57e043f 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -82,4 +82,4 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/last.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/last.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/last.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/last.ts) diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 5a89510d..9a97f037 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -84,4 +84,4 @@ const listener = merge( --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sample.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sample.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/sample.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/sample.ts) diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 10849584..29ccfa28 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -35,4 +35,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/single.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/single.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/single.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/single.ts) diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index 0901b2ec..dc00dbec 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -74,4 +74,4 @@ const filterObs = numArrayObs --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skip.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skip.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/skip.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/skip.ts) diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index 43f5d4b9..7e5589ef 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -35,4 +35,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipUntil.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipUntil.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/skipUntil.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/skipUntil.ts) diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 58b5804d..53c6eb31 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -35,4 +35,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipWhile.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipWhile.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/skipWhile.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/skipWhile.ts) diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 5bc102b9..111fe2dd 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -115,4 +115,4 @@ const subscribe = oneClickEvent.subscribe(); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/take.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/take.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/take.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/take.ts) diff --git a/operators/filtering/takelast.md b/operators/filtering/takelast.md index b14e2f93..5f302cb6 100644 --- a/operators/filtering/takelast.md +++ b/operators/filtering/takelast.md @@ -41,4 +41,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeLast.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeLast.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/takeLast.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/takeLast.ts) diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index 9d75dbdc..add55313 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -153,4 +153,4 @@ mousedown$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeUntil.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeUntil.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/takeUntil.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/takeUntil.ts) diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 67e5a7f6..8af7bd2c 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -111,4 +111,4 @@ source$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeWhile.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeWhile.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/takeWhile.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/takeWhile.ts) diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index a9e6e5c5..63d0d4da 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -65,4 +65,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/throttle.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/throttle.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/throttle.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/throttle.ts) diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 05ef7142..9cb10f96 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -67,4 +67,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/throttleTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/throttleTime.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/throttleTime.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/throttleTime.ts) diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 5402a62b..79191613 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -87,4 +87,4 @@ setTimeout(() => { --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/multicast.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/multicast.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/multicast.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/multicast.ts) diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index d854bb20..a1917445 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -57,4 +57,4 @@ setTimeout(() => { - [publish](https://rxjs.dev/api/operators/publish) 📰 - Official docs > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/publish.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/publish.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/publish.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/publish.ts) diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 009cd4b9..7eac07b3 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -73,4 +73,4 @@ const subscribeFour = sharedExample.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/share.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/share.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/share.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/share.ts) diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index a53d0720..c6ee8332 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -96,7 +96,7 @@ being used. When a subscription is made, `shareReplay` will subscribe to the source, sending values through an internal `ReplaySubject`: ( -[source](https://github.com/ReactiveX/rxjs/blob/b25db9f369b07f26cf2fc11714ec1990b78a4536/src/internal/operators/shareReplay.ts#L26-L37) +[source](https://github.com/ReactiveX/rxjs/blob/b25db9f369b07f26cf2fc11714ec1990b78a4536/packages/rxjs/src/internal/operators/shareReplay.ts#L26-L37) ) ```js @@ -173,4 +173,4 @@ const lateSubscriber = lastUrl.subscribe(console.log); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/shareReplay.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/shareReplay.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/shareReplay.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/shareReplay.ts) diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index cb1d7885..12b3ac2b 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -82,4 +82,4 @@ const subscribe = myBufferedInterval.subscribe(val => --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/buffer.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/buffer.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/buffer.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/buffer.ts) diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 03e18cf6..a28ad2cd 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -113,4 +113,4 @@ fromEvent(document, 'keydown') --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferCount.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferCount.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/bufferCount.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/bufferCount.ts) diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index 520294fa..ff93fe8f 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -68,4 +68,4 @@ const subscribe = example.subscribe(val => --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferTime.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/bufferTime.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/bufferTime.ts) diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 81c08a5b..be5fc680 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -66,4 +66,4 @@ fromEvent(document, 'mousemove') --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferToggle.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferToggle.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/bufferToggle.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/bufferToggle.ts) diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 9c3105f4..693e5c8e 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -43,4 +43,4 @@ const subscribe = bufferWhenExample.subscribe(val => --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/bufferWhen.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/bufferWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/bufferWhen.ts) diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index 9e8d41ab..fa102dc6 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -122,4 +122,4 @@ const subscribe = example.subscribe(val => --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMap.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/concatMap.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/concatMap.ts) diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index aee2568c..fa328189 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -77,4 +77,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMapTo.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/concatMapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/concatMapTo.ts) diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 2369eb82..378860b0 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -136,4 +136,4 @@ const exhaustSub = firstInterval --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/exhaustMap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/exhaustMap.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/exhaustMap.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/exhaustMap.ts) diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 7bec82cd..d7ffaad7 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -60,4 +60,4 @@ const subscribe = example.subscribe(val => console.log(`RESULT: ${val}`)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/expand.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/expand.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/expand.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/expand.ts) diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index b5990b47..5c41fade 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -90,4 +90,4 @@ from(people) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/groupBy.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/groupBy.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/groupBy.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/groupBy.ts) diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 4e7ff752..9909fde5 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -1,8 +1,8 @@ # map -#### signature: `map(project: Function, thisArg: any): Observable` +## signature: `map(project: (value: T, index: number) => R): Observable` -## Apply projection with each value from source. +### Apply projection with each value from source. {% hint style="info" %} @@ -11,18 +11,43 @@ New to transformation operators? Check out the article {% endhint %} +--- + +💡 Similar to the well-known Array.prototype.map, this is the operator you'll use most often to transform values in your streams! + +💡 Need to extract a single property from an object? Before RxJS v7, you might have used `pluck`, but now `map` with destructuring or property access is the recommended approach. + +💡 If your transformation function returns an Observable (like an HTTP call), you don't want `map` – you want one of the flattening operators: `mergeMap`, `switchMap`, `concatMap`, or `exhaustMap`. + +💡 The `map` operator applies to each value individually. If you need to transform or combine multiple values together, look at operators like `scan`, `reduce`, or `combineLatest`. + +--- + +### Why use map? + +`map` is your go-to operator for transforming data as it flows through your observable streams. Think of it as a factory assembly line where each item gets modified before moving along. Just as a stamping machine presses a logo onto every product passing through, `map` applies your transformation function to every value that comes down the stream. + +This operator truly shines when you need to reshape data to fit your application's needs. Imagine you're building a search feature for a shopping site. Your API returns complex product objects with dozens of fields – inventory counts, warehouse locations, internal IDs, and more – but your UI only needs the product name, price, and image URL. Rather than lugging around all that extra data through your application, you use `map` right after the HTTP call to [extract just what you need](#example-3-mapping-api-response-to-ui-model). This keeps your data flow clean and your components focused. + +One of the most common patterns you'll encounter is using `map` to [extract properties from objects](#example-2-map-to-single-property) or responses. Whether it's grabbing the `data` property from an API response wrapper, pulling user IDs from a collection of user objects, or transforming form values into the shape your backend expects, `map` handles these everyday transformation needs. It's also perfect for [simple calculations](#example-5-calculations-and-formatting) – adding tax to prices, converting timestamps to formatted dates, or transforming coordinates for a mapping library. + +What makes `map` particularly powerful is its predictability and simplicity. Unlike operators that manage multiple emissions or timing concerns, `map` has a straightforward one-to-one relationship: one input value produces one output value, synchronously. This makes it easy to reason about and debug. If a value goes in, a transformed value comes out immediately, no subscriptions required, no async complexity. +`map` is equally useful for transforming events into data you actually care about. When working with DOM events, you rarely need the entire event object – just specific properties like [mouse coordinates](#example-4-transform-dom-events) or keyboard input values. `map` lets you cleanly extract exactly what matters. -### Examples +A critical point to remember: `map` is for *synchronous* transformations. If your transformation function needs to call an API, query a database, or perform any asynchronous operation that returns an Observable, `map` is the wrong choice. When you map to an Observable, you create a "higher-order Observable" (an Observable of Observables), which isn't what you want. For those scenarios, reach for `mergeMap`, `switchMap`, `concatMap`, or `exhaustMap` – the flattening operators that handle inner Observables. -##### Example 1: Add 10 to each number +In essence, whenever you find yourself thinking "I need to transform each value in this stream," `map` should be your first instinct. It's the Swiss Army knife of RxJS – simple, reliable, and perfect for the vast majority of transformation tasks you'll encounter in reactive programming. -( -[StackBlitz](https://stackblitz.com/edit/typescript-a7bnxb?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/padasukano/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/yd38awLa/) ) +--- + +## Examples + +### Example 1: Add 10 to each number -```js +( [StackBlitz](https://stackblitz.com/edit/typescript-a7bnxb?file=index.ts&devtoolsheight=100) ) + +```javascript // RxJS v6+ import { from } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -35,14 +60,11 @@ const example = source.pipe(map(val => val + 10)); const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 2: Map to single property +### Example 2: Map to single property -( -[StackBlitz](https://stackblitz.com/edit/typescript-qgpnju?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/detozumale/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/tdLd5tgc/) ) +( [StackBlitz](https://stackblitz.com/edit/typescript-qgpnju?file=index.ts&devtoolsheight=100) ) -```js +```javascript // RxJS v6+ import { from } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -53,43 +75,128 @@ const source = from([ { name: 'Frank', age: 20 }, { name: 'Ryan', age: 50 } ]); -//grab each persons name, could also use pluck for this scenario +//extract each person's name using destructuring const example = source.pipe(map(({ name }) => name)); //output: "Joe","Frank","Ryan" const subscribe = example.subscribe(val => console.log(val)); ``` +### Example 3: Mapping API Response to UI Model + +( [StackBlitz](https://stackblitz.com/edit/typescript-kus9nthn?file=index.ts) ) + +```javascript +// RxJS v6+ +import { of } from 'rxjs'; +import { map } from 'rxjs/operators'; + +// Simulate an API response with extra metadata +const apiResponse = of({ + status: 'success', + timestamp: 1634567890, + data: { + id: 123, + firstName: 'Jane', + lastName: 'Doe', + email: 'jane@example.com', + internalFields: { /* ... */ } + } +}); + +// Extract and reshape just what the UI needs +const uiModel = apiResponse.pipe( + map(response => ({ + fullName: `${response.data.firstName} ${response.data.lastName}`, + email: response.data.email, + id: response.data.id + })) +); + +// output: { fullName: 'Jane Doe', email: 'jane@example.com', id: 123 } +const subscribe = uiModel.subscribe(val => console.log(val)); +``` + +### Example 4: Transform DOM Events + +( [StackBlitz](https://stackblitz.com/edit/typescript-a8rwwcaj?file=index.ts) ) + +```javascript +// RxJS v6+ +import { fromEvent } from 'rxjs'; +import { map } from 'rxjs/operators'; + +// Track mouse position from click events +const clicks = fromEvent(document, 'click'); + +const positions = clicks.pipe( + map((event: MouseEvent) => ({ + x: event.clientX, + y: event.clientY, + timestamp: Date.now() + })) +); + +// output: { x: 234, y: 567, timestamp: 1634567891234 } +positions.subscribe(pos => console.log('Click position:', pos)); +``` + +### Example 5: Calculations and Formatting + +( [StackBlitz](https://stackblitz.com/edit/typescript-rfbasqua?file=index.ts) ) + +```javascript +// RxJS v6+ +import { from } from 'rxjs'; +import { map } from 'rxjs/operators'; + +// Shopping cart items +const cartItems = from([ + { name: 'Laptop', price: 999.99, quantity: 1 }, + { name: 'Mouse', price: 29.99, quantity: 2 }, + { name: 'Keyboard', price: 79.99, quantity: 1 } +]); + +// Calculate total and format for display +const itemsWithTotal = cartItems.pipe( + map(item => ({ + ...item, + total: item.price * item.quantity, + displayPrice: `$${(item.price * item.quantity).toFixed(2)}` + })) +); + +/* output: + { name: 'Laptop', price: 999.99, quantity: 1, total: 999.99, displayPrice: '$999.99' } + { name: 'Mouse', price: 29.99, quantity: 2, total: 59.98, displayPrice: '$59.98' } + { name: 'Keyboard', price: 79.99, quantity: 1, total: 79.99, displayPrice: '$79.99' } +*/ +const subscribe = itemsWithTotal.subscribe(item => console.log(item)); +``` + +--- + ### Related Recipes -- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) -- [Battleship Game](../../recipes/battleship-game.md) -- [Catch The Dot Game](../../recipes/catch-the-dot-game.md) -- [Game Loop](../../recipes/gameloop.md) -- [HTTP Polling](../../recipes/http-polling.md) -- [Lockscreen](../../recipes/lockscreen.md) -- [Memory Game](../../recipes/memory-game.md) -- [Mine Sweeper Game](../../recipes/mine-sweeper-game.md) -- [Save Indicator](../../recipes/save-indicator.md) -- [Smart Counter](../../recipes/smartcounter.md) -- [Space Invaders Game](../../recipes/space-invaders-game.md) -- [Stop Watch](../../recipes/stop-watch.md) -- [Swipe To Refresh](../../recipes/swipe-to-refresh.md) -- [Tetris Game](../../recipes/tetris-game.md) -- [Type Ahead](../../recipes/type-ahead.md) +* [Alphabet Invasion Game](https://www.learnrxjs.io/learn-rxjs/recipes/alphabet-invasion-game) +* [Battleship Game](https://www.learnrxjs.io/learn-rxjs/recipes/battleship-game) +* [Catch The Dot Game](https://www.learnrxjs.io/learn-rxjs/recipes/catch-the-dot-game) +* [Save Indicator](https://www.learnrxjs.io/learn-rxjs/recipes/save-indicator) +* [Smart Counter](https://www.learnrxjs.io/learn-rxjs/recipes/smartcounter) +* [Space Invaders Game](https://www.learnrxjs.io/learn-rxjs/recipes/space-invaders-game) +* [Stop Watch](https://www.learnrxjs.io/learn-rxjs/recipes/stop-watch) +* [Swipe To Refresh](https://www.learnrxjs.io/learn-rxjs/recipes/swipe-to-refresh) +* [Type Ahead](https://www.learnrxjs.io/learn-rxjs/recipes/type-ahead) -### Additional Resources +--- -- [map](https://rxjs.dev/api/operators/map) 📰 - Official docs -- [map](https://indepth.dev/reference/rxjs/operators/map) - In Depth Dev Reference -- [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 - Ben - Lesh -- [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) - 🎥 💵 - André Staltz +### Additional Resources -* [Build your own map operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=map#app) - 🎥 - Kwinten Pisman +* [map](https://rxjs.dev/api/operators/map) 📰 - Official docs +* [map](https://indepth.dev/reference/rxjs/operators/map) - In Depth Dev Reference +* [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 - Ben Lesh +* [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz +* [Build your own map operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=map#app) 🎥 - Kwinten Pisman --- -> 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/map.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/map.ts) +📁 **Source Code:** [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/map.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/map.ts) \ No newline at end of file diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 4ef673d3..f619c4d4 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -73,4 +73,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mapTo.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/mapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/mapTo.ts) diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 4077a922..0431819e 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -230,4 +230,4 @@ source$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeMap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeMap.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/mergeMap.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/mergeMap.ts) diff --git a/operators/transformation/mergescan.md b/operators/transformation/mergescan.md index ee8b099e..6251d369 100644 --- a/operators/transformation/mergescan.md +++ b/operators/transformation/mergescan.md @@ -49,4 +49,4 @@ mouseDown$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeScan.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeScan.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/mergeScan.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/mergeScan.ts) diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 3ccdc54b..4421316a 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -78,4 +78,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/pluck.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/pluck.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/pluck.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/pluck.ts) diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 490219f6..e833ddf5 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -43,4 +43,4 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/reduce.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/reduce.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/reduce.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/reduce.ts) diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 992a5e52..67dd4963 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -154,4 +154,4 @@ interval(1000) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/scan.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/scan.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/scan.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/scan.ts) diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index ac739d1a..d2ffb396 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -160,4 +160,4 @@ timer(0, 5000) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMap.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/switchMap.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/switchMap.ts) diff --git a/operators/transformation/switchmapto.md b/operators/transformation/switchmapto.md index ea1da852..bbd07f38 100644 --- a/operators/transformation/switchmapto.md +++ b/operators/transformation/switchmapto.md @@ -58,4 +58,4 @@ click$ --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/switchMapTo.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/switchMapTo.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/switchMapTo.ts) diff --git a/operators/transformation/toarray.md b/operators/transformation/toarray.md index 691723d7..13bfe72e 100644 --- a/operators/transformation/toarray.md +++ b/operators/transformation/toarray.md @@ -38,4 +38,4 @@ interval(100) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toArray.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toArray.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/toArray.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/toArray.ts) diff --git a/operators/transformation/window.md b/operators/transformation/window.md index 914499bf..2bd23d23 100644 --- a/operators/transformation/window.md +++ b/operators/transformation/window.md @@ -49,4 +49,4 @@ const subscribeTwo = example --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/window.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/window.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/window.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/window.ts) diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index b0661ba2..62035cb8 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -56,4 +56,4 @@ const subscribeTwo = example --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowCount.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowCount.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/windowCount.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/windowCount.ts) diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 5a1bd845..1d1e3efa 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -54,4 +54,4 @@ const subscribeTwo = example --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowTime.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/windowTime.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/windowTime.ts) diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 75860632..ebeeda03 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -62,4 +62,4 @@ const subscribeTwo = example --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowToggle.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowToggle.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/windowToggle.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/windowToggle.ts) diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index eba7ee51..9d5d7dd1 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -58,4 +58,4 @@ const subscribeTwo = example --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/windowWhen.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/windowWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/windowWhen.ts) diff --git a/operators/utility/delay.md b/operators/utility/delay.md index 1e8a938b..cee84f9d 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -71,4 +71,4 @@ const subscribe = message.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/delay.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/delay.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/delay.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/delay.ts) diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index dc8d2be8..cda977c3 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -41,4 +41,4 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/delayWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/delayWhen.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/delayWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/delayWhen.ts) diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index 5bf143d4..7bc89d28 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -46,4 +46,4 @@ const subscription = source.subscribe({ docs > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/demterialize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/dematerialize.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/demterialize.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/dematerialize.ts) diff --git a/operators/utility/do.md b/operators/utility/do.md index 7fa081b1..6da67320 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -116,4 +116,4 @@ const example = source --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/tap.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/tap.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/tap.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/tap.ts) diff --git a/operators/utility/finalize.md b/operators/utility/finalize.md index 910ae9b5..62ec24b1 100644 --- a/operators/utility/finalize.md +++ b/operators/utility/finalize.md @@ -42,4 +42,4 @@ const subscribe = example.subscribe(val => console.log(val)); --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/finalize.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/finalize.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/finalize.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/finalize.ts) diff --git a/operators/utility/let.md b/operators/utility/let.md index 5cd83364..bd00485a 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -122,4 +122,4 @@ const subscribe = obsArrayPlusYourOperators(addTenThenTwenty) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/let.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/let.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/let.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/let.ts) diff --git a/operators/utility/repeat.md b/operators/utility/repeat.md index 99304be5..08437451 100644 --- a/operators/utility/repeat.md +++ b/operators/utility/repeat.md @@ -47,4 +47,4 @@ delayedThing --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/repeat.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/repeat.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/repeat.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/repeat.ts) diff --git a/operators/utility/repeatwhen.md b/operators/utility/repeatwhen.md index 969bd8fb..e2b77921 100644 --- a/operators/utility/repeatwhen.md +++ b/operators/utility/repeatwhen.md @@ -49,4 +49,4 @@ hey! --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/6.5.2/src/internal/operators/repeatWhen.ts](https://github.com/ReactiveX/rxjs/blob/6.5.2/src/internal/operators/repeatWhen.ts) +> [https://github.com/ReactiveX/rxjs/blob/6.5.2/packages/rxjs/src/internal/operators/repeatWhen.ts](https://github.com/ReactiveX/rxjs/blob/6.5.2/packages/rxjs/src/internal/operators/repeatWhen.ts) diff --git a/operators/utility/timeinterval.md b/operators/utility/timeinterval.md index f5686e41..9799e568 100644 --- a/operators/utility/timeinterval.md +++ b/operators/utility/timeinterval.md @@ -38,4 +38,4 @@ fromEvent(document, 'mousedown') --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeInterval.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeInterval.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/timeInterval.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/timeInterval.ts) diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 28a81853..ee594fde 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -49,4 +49,4 @@ of(4000, 3000, 2000) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeout.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeout.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/timeout.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/timeout.ts) diff --git a/operators/utility/timeoutwith.md b/operators/utility/timeoutwith.md index d7118ca5..e215f05e 100644 --- a/operators/utility/timeoutwith.md +++ b/operators/utility/timeoutwith.md @@ -47,4 +47,4 @@ of(timeoutThreshold + 1, timeoutThreshold - 1, timeoutThreshold + 3) --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeoutWith.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/timeoutWith.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/timeoutWith.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/timeoutWith.ts) diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index c1251f2a..ac049ec4 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -63,4 +63,4 @@ example().then(val => { --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toPromise.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/toPromise.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/toPromise.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/toPromise.ts) From 9ee4787b117a6a35f51662b10a8f9ecc2d6a7f21 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 17 Oct 2025 10:32:31 -0400 Subject: [PATCH 255/256] feat: update catchError docs (#324) --- operators/error_handling/README.md | 2 +- operators/error_handling/catch.md | 137 +++++++++++++++++++++-------- 2 files changed, 101 insertions(+), 38 deletions(-) diff --git a/operators/error_handling/README.md b/operators/error_handling/README.md index 9a9188dc..bb21e84f 100644 --- a/operators/error_handling/README.md +++ b/operators/error_handling/README.md @@ -5,7 +5,7 @@ effective ways to gracefully handle errors and retry logic, should they occur. ## Contents -- [catch / catchError](catch.md) ⭐ +- [catchError](catch.md) ⭐ - [retry](retry.md) - [retryWhen](retrywhen.md) diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index 12c6f822..ae867a31 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -1,77 +1,87 @@ -# catch / catchError +# catchError -#### signature: `catchError(project : function): Observable` +## signature: `catchError(project: (err: any, caught: Observable) => ObservableInput): Observable` -## Gracefully handle errors in an observable sequence. +### Gracefully handle errors in an observable sequence. --- +💡 Need to retry a failed operation? Check out [**retry**](./retry.md) or [**retryWhen**](./retrywhen.md)! + +💡 For resource cleanup regardless of error, use [**finalize**](../utility/finalize.md)! + ⚠ Remember to return an observable from the catchError function! --- +## Why use catchError? + +Think of `catchError` as your observable's safety net. When your stream encounters an error, whether from a failed HTTP request, unexpected data, or any other issue, `catchError` gives you a chance to recover gracefully instead of letting your entire observable sequence crash and burn. It's the difference between your app showing a friendly "Something went wrong" message versus a blank screen. + +What makes `catchError` particularly valuable is its flexibility in how you respond to errors. You can provide [fallback data from a cache](#example-1-catching-error-from-observable), you can [transform errors into user-friendly messages](#example-2-catching-rejected-promise), or you can even decide to retry the operation (though [`retry`](./retry.md) is usually better for that). The key insight is understanding *where* you place `catchError` in your operator chain. Put it at the outer level and your entire stream ends when an error occurs, but place it inside operators like `switchMap` and [only that inner operation fails while your stream continues](#example-3-catching-errors-comparison-when-using-switchmapmergemapconcatmapexhaustmap). +In essence, `catchError` keeps your reactive applications resilient by ensuring that errors are handled on your terms, not left to crash your user experience. -### Examples +--- -( -[example tests](https://github.com/btroncone/learn-rxjs/blob/master/operators/specs/error_handling/catch-spec.ts) -) +## Examples -##### Example 1: Catching error from observable +### Example 1: Catching error from observable -( -[StackBlitz](https://stackblitz.com/edit/typescript-auc2u2?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/porevoxelu/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/wk4oLLqc/) ) +( [StackBlitz](https://stackblitz.com/edit/typescript-auc2u2?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ import { throwError, of } from 'rxjs'; import { catchError } from 'rxjs/operators'; -//emit error + +// emit error const source = throwError('This is an error!'); -//gracefully handle error, returning observable with error message -const example = source.pipe(catchError(val => of(`I caught: ${val}`))); -//output: 'I caught: This is an error' + +// gracefully handle error, returning observable with error message +const example = source.pipe( + catchError(val => of(`I caught: ${val}`)) +); + +// output: 'I caught: This is an error' const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 2: Catching rejected promise +### Example 2: Catching rejected promise -( -[StackBlitz](https://stackblitz.com/edit/typescript-nte3xs?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/rusaxubanu/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/sLq92gLv/) ) +( [StackBlitz](https://stackblitz.com/edit/typescript-nte3xs?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ import { timer, from, of } from 'rxjs'; import { mergeMap, catchError } from 'rxjs/operators'; -//create promise that immediately rejects +// create promise that immediately rejects const myBadPromise = () => new Promise((resolve, reject) => reject('Rejected!')); -//emit single value after 1 second + +// emit single value after 1 second const source = timer(1000); -//catch rejected promise, returning observable containing error message + +// catch rejected promise, returning observable containing error message const example = source.pipe( mergeMap(_ => - from(myBadPromise()).pipe(catchError(error => of(`Bad Promise: ${error}`))) + from(myBadPromise()).pipe( + catchError(error => of(`Bad Promise: ${error}`)) + ) ) ); -//output: 'Bad Promise: Rejected' + +// output: 'Bad Promise: Rejected' const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 3: Catching errors comparison when using switchMap/mergeMap/concatMap/exhaustMap +### Example 3: Catching errors comparison when using switchMap/mergeMap/concatMap/exhaustMap -( -[StackBlitz](https://stackblitz.com/edit/rxjs-catcherror-withmapoperators?file=index.ts&devtoolsheight=80) -) +( [StackBlitz](https://stackblitz.com/edit/rxjs-catcherror-withmapoperators?file=index.ts&devtoolsheight=80) ) ```js -// switchMap in example below can be replaced with mergeMap/concatMap/exhaustMap, the same behaviour applies +// RxJS v6+ import { throwError, fromEvent, of } from 'rxjs'; import { catchError, @@ -82,18 +92,35 @@ import { exhaustMap } from 'rxjs/operators'; +// simulate an API call that throws an error const fakeRequest$ = of().pipe( tap(_ => console.log('fakeRequest')), throwError ); +/* + * Placement of catchError MATTERS! + * + * When catchError is placed INSIDE the switchMap, only the inner + * observable errors out and the outer stream continues. + * You can keep clicking and making new requests. + */ const iWillContinueListening$ = fromEvent( document.getElementById('continued'), 'click' ).pipe( - switchMap(_ => fakeRequest$.pipe(catchError(_ => of('keep on clicking!!!')))) + switchMap(_ => + fakeRequest$.pipe( + catchError(_ => of('keep on clicking!!!')) + ) + ) ); +/* + * When catchError is placed at the OUTER level, after switchMap, + * the entire stream errors out and terminates. + * After the first click, the stream is dead and won't respond to more clicks. + */ const iWillStopListening$ = fromEvent( document.getElementById('stopped'), 'click' @@ -106,14 +133,50 @@ iWillContinueListening$.subscribe(console.log); iWillStopListening$.subscribe(console.log); ``` -### Additional Resources +### Example 4: Providing fallback data on HTTP error + +( [StackBlitz](https://stackblitz.com/edit/typescript-n9llq6e3?file=index.ts) ) + +```js +// RxJS v6+ +import { ajax } from 'rxjs/ajax'; +import { of } from 'rxjs'; +import { catchError, map } from 'rxjs/operators'; + +// attempt to fetch user data from API +const userData$ = ajax.getJSON('https://api.example.com/user/123').pipe( + map(response => response.data), + // if the request fails, provide cached or default data + catchError(error => { + console.error('Failed to fetch user, using cached data', error); + return of({ + id: 123, + name: 'Cached User', + status: 'offline' + }); + }) +); + +// user always gets data, even if the API is down +userData$.subscribe(user => console.log('User:', user)); +``` + +--- + +## Related Recipes + +- [Smart Counter](../../recipes/smartcounter.md) +- [HTTP Polling](../../recipes/http-polling.md) + +--- + +## Additional Resources - [catchError](https://rxjs.dev/api/operators/catchError) 📰 - Official docs - [catchError](https://indepth.dev/reference/rxjs/operators/catch-error) - In Depth Dev Reference -- [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) - 🎥 💵 - André Staltz +- [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz +- [Error Handling in RxJS](https://blog.angular-university.io/rxjs-error-handling/) 📰 - Angular University --- -> 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/catchError.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/catchError.ts) +📁 **Source Code:** [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/catchError.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/catchError.ts) \ No newline at end of file From 7e8bf76bf541a8951bd60bf652c6bea3d5fee6c7 Mon Sep 17 00:00:00 2001 From: Brian Troncone Date: Fri, 17 Oct 2025 14:14:15 -0400 Subject: [PATCH 256/256] feat: fix broken links, bring operators up-to-date (#325) * feat: fix broken links, bring operators up-to-date * fix: operator wording --- README.md | 4 +- SUMMARY.md | 4 +- concepts/README.md | 2 +- concepts/rxjs-primer.md | 2 +- concepts/rxjs5-6.md | 2 +- operators/README.md | 4 +- operators/combination/README.md | 2 +- operators/combination/combineall.md | 91 +++++--- operators/combination/combinelatest.md | 9 +- operators/combination/concat.md | 1 - operators/combination/concatall.md | 1 - operators/combination/forkjoin.md | 2 - operators/combination/merge.md | 3 - operators/combination/mergeall.md | 1 - operators/combination/pairwise.md | 4 +- operators/combination/race.md | 2 +- operators/combination/withlatestfrom.md | 1 - operators/combination/zip.md | 1 - operators/complete.md | 4 +- operators/creation/README.md | 2 +- operators/creation/create.md | 210 ++++++++++++++---- operators/creation/from.md | 1 - operators/creation/interval.md | 2 - operators/creation/of.md | 5 +- operators/creation/throw.md | 162 +++++++++++--- operators/creation/timer.md | 2 - operators/error_handling/catch.md | 1 - operators/error_handling/retry.md | 1 - operators/error_handling/retrywhen.md | 1 - operators/filtering/audittime.md | 1 - operators/filtering/debounce.md | 1 - operators/filtering/debouncetime.md | 3 - operators/filtering/distinctuntilchanged.md | 1 - .../filtering/distinctuntilkeychanged.md | 77 ++++++- operators/filtering/filter.md | 3 - operators/filtering/ignoreelements.md | 11 +- operators/filtering/skip.md | 4 +- operators/filtering/take.md | 3 - operators/filtering/takeuntil.md | 4 - operators/filtering/takewhile.md | 1 - operators/filtering/throttletime.md | 1 - operators/transformation/buffer.md | 1 - operators/transformation/buffertime.md | 7 +- operators/transformation/bufferwhen.md | 1 - operators/transformation/concatmap.md | 3 - operators/transformation/exhaustmap.md | 2 +- operators/transformation/map.md | 2 - operators/transformation/mergemap.md | 4 +- operators/transformation/reduce.md | 3 +- operators/transformation/scan.md | 3 +- operators/transformation/switchmap.md | 4 +- operators/utility/delay.md | 1 - operators/utility/delaywhen.md | 1 - operators/utility/do.md | 4 +- operators/utility/timeout.md | 4 +- subjects/asyncsubject.md | 1 - subjects/behaviorsubject.md | 1 - subjects/replaysubject.md | 1 - subjects/subject.md | 1 - 59 files changed, 463 insertions(+), 218 deletions(-) diff --git a/README.md b/README.md index 956fb156..ebe5370d 100644 --- a/README.md +++ b/README.md @@ -118,7 +118,7 @@ site, these excellent resources will help jump start your learning experience! #### Conferences -- [RxJS Live](https://www.rxjs.live/) - RxJS specific conference +- [RxJS Live](https://www.youtube.com/@rxjslive2237) - RxJS specific conference #### Reading @@ -136,7 +136,7 @@ site, these excellent resources will help jump start your learning experience! - [Ultimate RxJS](https://ultimatecourses.com/courses/rxjs?ref=4) 💵 - Brian Troncone -- [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop) - +- [Asynchronous Programming: The End of The Loop](https://egghead.io/courses/asynchronous-programming-the-end-of-the-loop) - Jafar Husain - [What is RxJS?](https://egghead.io/lessons/rxjs-what-is-rxjs) - Ben Lesh diff --git a/SUMMARY.md b/SUMMARY.md index a03aaa9d..1356c47a 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -6,7 +6,7 @@ - [Operators](operators/README.md) - [Combination](operators/combination/README.md) - - [combineAll](operators/combination/combineall.md) + - [combineLatestAll](operators/combination/combineall.md) - [combineLatest](operators/combination/combinelatest.md) - [concat](operators/combination/concat.md) - [concatAll](operators/combination/concatall.md) @@ -35,7 +35,7 @@ - [interval](operators/creation/interval.md) - [of](operators/creation/of.md) - [range](operators/creation/range.md) - - [throw](operators/creation/throw.md) + - [throwError](operators/creation/throw.md) - [timer](operators/creation/timer.md) - [Error Handling](operators/error_handling/README.md) - [catch / catchError](operators/error_handling/catch.md) diff --git a/concepts/README.md b/concepts/README.md index c20fa471..550aba95 100644 --- a/concepts/README.md +++ b/concepts/README.md @@ -6,5 +6,5 @@ Short explanations of common RxJS scenarios and use-cases. - [RxJS Primer](rxjs-primer.md) - [Get started transforming streams with map, pluck, and mapTo](get-started-transforming.md) -- [Time Based Operator Comparison](time-based-operator-comparison.md) +- [Time Based Operator Comparison](time-based-operators-comparison.md) - [RxJS v5 -> v6 Upgrade](rxjs5-6.md) diff --git a/concepts/rxjs-primer.md b/concepts/rxjs-primer.md index b0d0325d..f5a3240c 100644 --- a/concepts/rxjs-primer.md +++ b/concepts/rxjs-primer.md @@ -478,7 +478,7 @@ behavior. For instance, suppose we wanted to make a request which saved user activity when they answered a quiz question. Our initial implementation may use the -[`mergeMap`](../opearators/transformation/mergemap.md) operator, which fires off +[`mergeMap`](../operators/transformation/mergemap.md) operator, which fires off a save request on each event: ```js diff --git a/concepts/rxjs5-6.md b/concepts/rxjs5-6.md index 8e6b821a..6ea40840 100644 --- a/concepts/rxjs5-6.md +++ b/concepts/rxjs5-6.md @@ -8,7 +8,7 @@ handy: TsLint rules for migration to RxJS 6. Auto-update project for new import paths and transition to pipeable operators. -### [RxJS v5.x to v6 Update Guide](https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md) +### [RxJS v5.x to v6 Update Guide](https://github.com/ReactiveX/rxjs/blob/6.6.7/docs_app/content/guide/v6/migration.md) Comprehensive guide for updating your project from RxJS v5 to 6 diff --git a/operators/README.md b/operators/README.md index 5f49793a..1d8cda8d 100644 --- a/operators/README.md +++ b/operators/README.md @@ -8,7 +8,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ ### Contents (By Operator Type) - [Combination](combination/README.md) - - [combineAll](combination/combineall.md) + - [combineLatestAll](combination/combineall.md) - [combineLatest](combination/combinelatest.md) ⭐ - [concat](combination/concat.md) ⭐ - [concatAll](combination/concatall.md) @@ -37,7 +37,7 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ - [interval](creation/interval.md) - [of](creation/of.md) ⭐ - [range](creation/range.md) - - [throw](creation/throw.md) + - [throwError](creation/throw.md) - [timer](creation/timer.md) - [Error Handling](error_handling/README.md) - [catch / catchError](error_handling/catch.md) ⭐ diff --git a/operators/combination/README.md b/operators/combination/README.md index f06659e5..61b89212 100644 --- a/operators/combination/README.md +++ b/operators/combination/README.md @@ -6,7 +6,7 @@ variation among these operators. ## Contents -- [combineAll](combineall.md) +- [combineLatestAll](combineall.md) - [combineLatest](combinelatest.md) ⭐ - [concat](concat.md) ⭐ - [concatAll](concatall.md) diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 64e00916..da9bfc51 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -1,30 +1,47 @@ -# combineAll +# combineLatestAll -#### signature: `combineAll(project: function): Observable` +## Signature -## When source observable completes use [combineLatest](combinelatest.md) with collected observables. +```typescript +combineLatestAll(): OperatorFunction, T[]> +``` + +Flattens a higher-order observable by applying [combineLatest](./combinelatest.md) when the outer observable completes. + +--- + +💡 `combineLatestAll` is best used when you're working with a **higher-order observable** (an observable that emits other observables) and need to track the most recent values from each inner observable +💡 Unlike [`mergeAll`](./mergeall) which emits values as soon as any inner observable emits, `combineLatestAll` waits for **all inner observables to emit at least once** before producing output +💡 If you need only the final values when all observables complete (not ongoing updates), consider [`forkJoin`](../combination/forkjoin) instead + +--- + +## Why use combineLatestAll? + +Think of `combineLatestAll` as organizing a panel discussion where speakers join at different times. You can't start the broadcast until everyone has joined, but after that, whenever anyone speaks again, you broadcast the most recent statement from each panelist. That's exactly how `combineLatestAll` manages your observable streams. + +This operator shines when you're dealing with **dynamic collections of observables**, or situations where you don't know upfront how many observables you'll have, but they're being emitted by a source stream. A practical example is when you [map a stream of events to interval observables](#example-1-mapping-to-inner-interval-observable) and want to monitor the latest value from each one simultaneously. It's particularly useful for scenarios like tracking multiple user sessions, monitoring real-time dashboard widgets that get added dynamically, or combining results from a variable number of API calls. +Keep in mind that `combineLatestAll` won't produce any values until two conditions are met: the outer observable must **complete** (signaling that no more inner observables will be emitted), and every inner observable must have **emitted at least once**. This "wait for everyone" behavior can be a gotcha if one of your inner observables never emits or never completes—your stream will remain silent. +In essence, `combineLatestAll` transforms a stream of streams into a single stream that keeps you updated with the latest snapshot from each member of your dynamic collection. -### Examples +--- -( -[example tests](https://github.com/btroncone/learn-rxjs/blob/master/operators/specs/combination/combineall-spec.ts) -) +## Examples -##### Example 1: Mapping to inner interval observable +### Example 1: Mapping to inner interval observable -( -[StackBlitz](https://stackblitz.com/edit/typescript-bzwkrl?file=index.ts&devtoolsheight=100) -) +([StackBlitz](https://stackblitz.com/edit/typescript-bzwkrl?file=index.ts)) -```js -import { take, map, combineAll } from 'rxjs/operators'; +```typescript import { interval } from 'rxjs'; +import { take, map, combineLatestAll } from 'rxjs/operators'; -// emit every 1s, take 2 +// Emit every 1s, take 2 const source$ = interval(1000).pipe(take(2)); -// map each emitted value from source to interval observable that takes 5 values + +// Map each emitted value from source to interval observable that takes 5 values const example$ = source$.pipe( map(val => interval(1000).pipe( @@ -33,33 +50,43 @@ const example$ = source$.pipe( ) ) ); + /* 2 values from source will map to 2 (inner) interval observables that emit every 1s. - combineAll uses combineLatest strategy, emitting the last value from each + combineLatestAll uses combineLatest strategy, emitting the last value from each whenever either observable emits a value */ example$ - .pipe(combineAll()) + .pipe(combineLatestAll()) /* - output: - ["Result (0): 0", "Result (1): 0"] - ["Result (0): 1", "Result (1): 0"] - ["Result (0): 1", "Result (1): 1"] - ["Result (0): 2", "Result (1): 1"] - ["Result (0): 2", "Result (1): 2"] - ["Result (0): 3", "Result (1): 2"] - ["Result (0): 3", "Result (1): 3"] - ["Result (0): 4", "Result (1): 3"] - ["Result (0): 4", "Result (1): 4"] -*/ + output: + ["Result (0): 0", "Result (1): 0"] + ["Result (0): 1", "Result (1): 0"] + ["Result (0): 1", "Result (1): 1"] + ["Result (0): 2", "Result (1): 1"] + ["Result (0): 2", "Result (1): 2"] + ["Result (0): 3", "Result (1): 2"] + ["Result (0): 3", "Result (1): 3"] + ["Result (0): 4", "Result (1): 3"] + ["Result (0): 4", "Result (1): 4"] + */ .subscribe(console.log); ``` -### Additional Resources +--- + +## Related Recipes + +- [Smart Counter](../../recipes/smartcounter.md) +- [HTTP Polling](../../recipes/http-polling.md) + +--- + +## Additional Resources -- [combineAll](https://rxjs.dev/api/operators/combineAll) 📰 - Official docs +- [combineLatestAll](https://rxjs.dev/api/index/function/combineLatestAll) 📰 - Official docs +- [combineLatest](./combinelatest) - Learn about the underlying combination strategy --- -> 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/combineAll.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/combineAll.ts) +📁 **Source Code**: [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/combineLatestAll.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/combineLatestAll.ts) \ No newline at end of file diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index b49e6f31..14a909e7 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -6,7 +6,7 @@ --- -💡 [combineAll](combineall.md) can be used to apply combineLatest to emitted +💡 [combineLatestAll](combineall.md) can be used to apply combineLatest to emitted observables when a source completes! --- @@ -157,13 +157,6 @@ combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe( - [combineLatest](https://rxjs.dev/api/index/function/combineLatest) 📰 - Official docs -- [combineLatest](https://indepth.dev/reference/rxjs/operators/combine-latest) - In Depth Dev Reference -- [Combining streams with combineLatest](https://egghead.io/lessons/rxjs-combining-streams-with-combinelatest?course=step-by-step-async-javascript-with-rxjs) - 🎥 💵 - John Linquist -- [Combination operator: combineLatest](https://egghead.io/lessons/rxjs-combination-operator-combinelatest?course=rxjs-beyond-the-basics-operators-in-depth) - 🎥 💵 - André Staltz -- [Build your own combineLatest operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=combineLatest#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/combination/concat.md b/operators/combination/concat.md index c1fe4c5a..e681dba7 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -98,7 +98,6 @@ concat(interval(1000), of('This', 'Never', 'Runs')) ### Additional Resources - [concat](https://rxjs.dev/api/index/function/concat) 📰 - Official docs -- [concat](https://indepth.dev/reference/rxjs/operators/concat) - In Depth Dev Reference - [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 56835b3b..a057c92d 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -122,7 +122,6 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [concatAll](https://rxjs.dev/api/operators/concatAll) 📰 - Official docs -- [concatAll](https://indepth.dev/reference/rxjs/operators/concat-all) - In Depth Dev Reference - [Flatten a higher order observable with concatAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-concatall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index db22c9a0..ddf22717 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -203,7 +203,6 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 6: forkJoin in Angular -( [plunker](https://plnkr.co/edit/ElTrOg8NfR3WbbAfjBXQ?p=preview) ) ```js @Injectable() @@ -254,7 +253,6 @@ export class App { ### Additional Resources - [forkJoin](https://rxjs.dev/api/index/function/forkJoin) 📰 - Official docs -- [forkJoin](https://indepth.dev/reference/rxjs/operators/fork-join) - In Depth Dev Reference --- diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 9d048cf8..4834ee79 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -92,15 +92,12 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [merge](https://rxjs.dev/api/index/function/merge) 📰 - Official docs -- [merge](https://indepth.dev/reference/rxjs/operators/merge) - In Depth Dev Reference - [Handling multiple streams with merge](https://egghead.io/lessons/rxjs-handling-multiple-streams-with-merge?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Sharing network requests with merge](https://egghead.io/lessons/rxjs-reactive-programming-sharing-network-requests-with-rxjs-merge?course=introduction-to-reactive-programming) 🎥 💵 - André Staltz - [Combination operator: merge](https://egghead.io/lessons/rxjs-combination-operator-merge?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz -- [Build your own merge operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=merge#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 974c7a02..17b8343a 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -99,7 +99,6 @@ const example = source ### Additional Resources - [mergeAll](https://rxjs.dev/api/operators/mergeAll) 📰 - Official docs -- [mergeAll](https://indepth.dev/reference/rxjs/operators/merge-all) - In Depth Dev Reference - [Flatten a higher order observable with mergeAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-mergeall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 63d55436..b926f6bb 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -18,9 +18,7 @@ Lastly, if you're working with observables that emit multiple values but you onl ##### Example 1: ( -[StackBlitz](https://stackblitz.com/edit/typescript-tkuydr?file=index.ts&devtoolsheight=50) -| [jsBin](http://jsbin.com/keteyahido/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/8va47bq3/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-tkuydr?file=index.ts&devtoolsheight=50)) ```js // RxJS v6+ diff --git a/operators/combination/race.md b/operators/combination/race.md index c8608167..6cfef349 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -72,7 +72,7 @@ race(first, second, third).subscribe(val => console.log(val)); ### Additional Resources - [race](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-race) 📰 - Official docs -- [race](https://indepth.dev/reference/rxjs/operators/race) - In Depth Dev Reference + --- diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index bc80ac6b..9d8bd4dc 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -99,7 +99,6 @@ const subscribe = example.subscribe(val => console.log(val)); - [withLatestFrom](https://rxjs.dev/api/operators/withLatestFrom) 📰 - Official docs -- [withLatestFrom](https://indepth.dev/reference/rxjs/operators/with-latest-from) - In Depth Dev Reference - [Combination operator: withLatestFrom](https://egghead.io/lessons/rxjs-combination-operator-withlatestfrom?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/combination/zip.md b/operators/combination/zip.md index 6acce48c..54ff4636 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -117,7 +117,6 @@ mouseClickDuration.subscribe(console.log); - [zip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip) 📰 - Official docs -- [zip](https://indepth.dev/reference/rxjs/operators/zip) - In Depth Dev Reference - [Combination operator: zip](https://egghead.io/lessons/rxjs-combination-operator-zip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/complete.md b/operators/complete.md index abc74bb6..f5000950 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -16,7 +16,7 @@ _[Prefer a split by operator type?](README.md)_ - [bufferToggle](transformation/buffertoggle.md) - [bufferWhen](transformation/bufferwhen.md) - [catch / catchError](error_handling/catch.md) ⭐ -- [combineAll](combination/combineall.md) +- [combineLatestAll](combination/combineall.md) - [combineLatest](combination/combinelatest.md) ⭐ - [concat](combination/concat.md) ⭐ - [concatAll](combination/concatall.md) @@ -87,7 +87,7 @@ _[Prefer a split by operator type?](README.md)_ - [takeWhile](filtering/takewhile.md) - [throttle](filtering/throttle.md) - [throttleTime](filtering/throttletime.md) -- [throw](creation/throw.md) +- [throwError](creation/throw.md) - [timeInterval](utility/timeinterval.md) - [timeout](utility/timeout.md) - [timeoutWith](utility/timeoutwith.md) diff --git a/operators/creation/README.md b/operators/creation/README.md index f7f9d42a..9ca3b6a2 100644 --- a/operators/creation/README.md +++ b/operators/creation/README.md @@ -16,7 +16,7 @@ generic to specific use-cases you are free, and encouraged, to turn - [interval](interval.md) - [of](of.md) ⭐ - [range](range.md) -- [throw](throw.md) +- [throwError](throw.md) - [timer](timer.md) ⭐ - _commonly used_ diff --git a/operators/creation/create.md b/operators/creation/create.md index 2aa3ea29..74158151 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -1,80 +1,214 @@ # create -#### signature: `create(subscribe: function)` +## Deprecated: Use `new Observable()` instead -## Create an observable with given subscription function. +> ⚠️ **Important**: `Observable.create()` was deprecated in RxJS v6.4.0. Use the `new Observable()` constructor instead. +**signature**: `new Observable(subscribe: (observer: Observer) => TeardownLogic)` +```typescript +new Observable(subscribe: (observer: Observer) => TeardownLogic) +``` + +Create a custom observable by defining subscription behavior. + +--- + +## 💡 Tips + +- **Consider creation operators first**: Before creating a custom observable, check if operators like [defer](./defer.md), [from](./from.md), [fromEvent](./fromevent.md), or [interval](./interval.md) already solve your use case +- **Use for bridging non-reactive APIs**: Custom observables shine when wrapping callbacks, event emitters, WebSockets, or other non-observable data sources +- **Always return teardown logic**: Return a cleanup function to prevent memory leaks when subscriptions end + +--- + +## Why use a custom observable? + +Custom observables are your bridge between the non-reactive world and RxJS. Think of them as adapters—when you have a data source that doesn't speak "Observable" (like a WebSocket connection, a third-party library with callbacks, or a browser API like Geolocation), creating a custom observable lets you wrap it up and make it play nicely with the rest of your reactive code. + +Here's the thing: **you'll rarely need to create custom observables**. RxJS already provides creation operators for most common scenarios. Timers, events, promises, arrays, and more. But when you encounter an API that doesn't fit any existing operator, custom observables give you fine-grained control. You decide exactly when to emit values (observer.next()), how to handle errors (observer.error()), and what cleanup should happen when someone unsubscribes. + +One way to think about this is like writing a translator. The non-reactive API speaks one language, your Observable streams speak another, and your custom observable sits in the middle making sure they understand each other. When implementing [the cleanup function](#example-2-observable-with-proper-cleanup), remember that this is your chance to be a good citizen. Close connections, cancel timers, remove listeners. It's like turning off the lights when you leave a room. -### Examples +In essence, custom observables are powerful but should be used sparingly. If an existing creation operator can do the job, use that. But when you need that extra control—when you're integrating with legacy code, third-party libraries, or unusual data sources, this is your tool. -##### Example 1: Observable that emits multiple values +--- + +## Examples + +### Example 1: Simple custom observable that emits multiple values -( -[StackBlitz](https://stackblitz.com/edit/typescript-baxh98?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/qorugiwaba/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/td5107he/) ) +([StackBlitz](https://stackblitz.com/edit/typescript-meebpsdr?file=index.ts)) -```js +```typescript // RxJS v6+ import { Observable } from 'rxjs'; + /* - Create an observable that emits 'Hello' and 'World' on - subscription. + Create an observable that emits 'Hello' and 'World' on subscription. + Note: Using the modern constructor syntax, not the deprecated Observable.create() */ -const hello = Observable.create(function(observer) { +const hello$ = new Observable(observer => { observer.next('Hello'); observer.next('World'); observer.complete(); }); -//output: 'Hello'...'World' -const subscribe = hello.subscribe(val => console.log(val)); +// Output: 'Hello'...'World' +const subscription = hello$.subscribe(val => console.log(val)); ``` -##### Example 2: Observable that emits even numbers on timer +### Example 2: Observable with proper cleanup -( -[StackBlitz](https://stackblitz.com/edit/typescript-xvezxn?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/lodilohate/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/vtozg6uf/) ) +([StackBlitz](https://stackblitz.com/edit/typescript-wbwrxn67?file=index.ts)) -```js +```typescript // RxJS v6+ import { Observable } from 'rxjs'; /* - Increment value every 1s, emit even numbers. + Create an observable that emits even numbers every second. + Demonstrates the importance of returning a teardown function. */ -const evenNumbers = Observable.create(function(observer) { +const evenNumbers$ = new Observable(observer => { let value = 0; - const interval = setInterval(() => { + + const intervalId = setInterval(() => { if (value % 2 === 0) { observer.next(value); } value++; }, 1000); - - return () => clearInterval(interval); + + // Return cleanup function - called when unsubscribe() is invoked + return () => { + console.log('Cleaning up interval'); + clearInterval(intervalId); + }; }); -//output: 0...2...4...6...8 -const subscribe = evenNumbers.subscribe(val => console.log(val)); -//unsubscribe after 10 seconds + +// Output: 0...2...4...6...8 +const subscription = evenNumbers$.subscribe(val => console.log(val)); + +// Unsubscribe after 10 seconds - triggers cleanup setTimeout(() => { - subscribe.unsubscribe(); + subscription.unsubscribe(); }, 10000); ``` -### Additional Resources +### Example 3: Wrapping a callback-based API + +([StackBlitz](https://stackblitz.com/edit/typescript-ury4kzws?file=index.ts)) + +```typescript +// RxJS v6+ +import { Observable } from 'rxjs'; + +/* + Wrap the browser's Geolocation API into an observable. + This demonstrates how custom observables bridge non-reactive APIs. +*/ +function getCurrentPosition(): Observable { + return new Observable(observer => { + // Check if geolocation is available + if (!navigator.geolocation) { + observer.error(new Error('Geolocation not supported')); + return; + } + + // Get position and emit it + const watchId = navigator.geolocation.watchPosition( + position => observer.next(position), + error => observer.error(error), + { enableHighAccuracy: true } + ); + + // Return cleanup to stop watching position when unsubscribed + return () => { + navigator.geolocation.clearWatch(watchId); + }; + }); +} + +// Usage +const position$ = getCurrentPosition(); +const subscription = position$.subscribe({ + next: position => { + console.log('Latitude:', position.coords.latitude); + console.log('Longitude:', position.coords.longitude); + }, + error: err => console.error('Error getting position:', err) +}); + +// Stop watching after 30 seconds +setTimeout(() => subscription.unsubscribe(), 30000); +``` + +### Example 4: Creating an observable from a WebSocket + + +```typescript +// RxJS v6+ +import { Observable } from 'rxjs'; + +/* + Wrap a WebSocket connection in an observable. + Demonstrates managing complex async resources with proper cleanup. +*/ +function createWebSocketObservable(url: string): Observable { + return new Observable(observer => { + const socket = new WebSocket(url); + + socket.onopen = () => { + console.log('WebSocket connected'); + }; + + socket.onmessage = (event) => { + observer.next(event); + }; + + socket.onerror = (error) => { + observer.error(error); + }; + + socket.onclose = () => { + observer.complete(); + }; + + // Cleanup: close the socket when unsubscribed + return () => { + if (socket.readyState === WebSocket.OPEN) { + socket.close(); + } + }; + }); +} + +// Usage +const messages$ = createWebSocketObservable('wss://example.com/socket'); +const subscription = messages$.subscribe({ + next: event => console.log('Message received:', event.data), + error: err => console.error('WebSocket error:', err), + complete: () => console.log('WebSocket closed') +}); + +// Close connection after 60 seconds +setTimeout(() => subscription.unsubscribe(), 60000); +``` + +--- + +## Related Recipes + +- [Smart Counter](../../recipes/smartcounter.md) + +--- + +## Additional Resources -- [create](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-create) - 📰 - Official docs -- [Creation operators: Create()](https://egghead.io/lessons/rxjs-creation-operator-create?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - 🎥 💵 - André Staltz -- [Using Observable.create for fine-grained control](https://egghead.io/lessons/rxjs-using-observable-create-for-fine-grained-control) - 🎥 💵 - Shane Osbourne +- [Observable](https://rxjs.dev/api/index/class/Observable) 📰 - Official docs +- [Observable Constructor](https://rxjs.dev/api/index/class/Observable#constructor) 📰 - Official constructor docs --- -> 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/GenerateObservable.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/GenerateObservable.ts) +**📁 Source Code:** [https://github.com/ReactiveX/rxjs/blob/master/packages/observable/src/observable.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/observable/src/observable.ts) \ No newline at end of file diff --git a/operators/creation/from.md b/operators/creation/from.md index eff6c9c7..514f4022 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -100,7 +100,6 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources - [from](https://rxjs.dev/api/index/function/from) 📰 - Official docs -- [from](https://indepth.dev/reference/rxjs/operators/from) - In Depth Dev Reference - [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 487b8c2a..23b15080 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -47,8 +47,6 @@ const subscribe = source.subscribe(val => console.log(val)); - [interval](https://rxjs.dev/api/index/function/interval) 📰 - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz -- [Build your own interval operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=interval#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/creation/of.md b/operators/creation/of.md index 4bb12ba2..472ececa 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -54,12 +54,9 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -- [of](https://rxjs.dev/api/index/function/of) 📰 - Official docs -- [of](https://indepth.dev/reference/rxjs/operators/of) - In Depth Dev Reference +- [of](https://rxjs.dev/api/index/function/of) 📰 - Official docs - [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz -- [Build your own of operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=of#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/creation/throw.md b/operators/creation/throw.md index d871854a..0d5bfbb7 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -1,45 +1,157 @@ -# throw +# throwError -#### signature: `throw(error: any, scheduler: Scheduler): Observable` +```typescript +throwError(errorOrErrorFactory: (() => any) | any): Observable +``` + +**Creates an Observable that immediately emits an error notification upon subscription.** + +--- + +💡 **When should you use throwError vs. just throwing an error?** -## Emit error on subscription. +In most cases within operator callbacks (like `map`, `tap`, `mergeMap`), you can simply use JavaScript's native `throw` statement since RxJS wraps these in try-catch blocks. Use `throwError()` specifically when you need to **return an Observable that errors** - particularly in operators like `switchMap`, `mergeMap`, or `concatMap` where an Observable is expected as the return value. +💡 **Factory function recommended** +As of RxJS 7+, pass a factory function `() => error` rather than the error directly. This creates the error at the moment of subscription, providing better stack traces: `throwError(() => new Error('message'))`. -### Examples +--- + +## Why use throwError? + +Think of `throwError` as your "error signal generator" - it creates an Observable that does nothing but immediately send out an error signal. It's like having a specialized alarm button: when you press it, it doesn't emit any values or complete normally, it just triggers the error path. -##### Example 1: Throw error on subscription +You'll reach for `throwError` when you're working in Observable pipelines where you need to return an Observable, but something has gone wrong and you want to propagate that error downstream. For instance, in a [conditional API call](#example-2-conditional-error-in-switchmap) where you validate input before making a request, or when [implementing retry logic](#example-3-using-throwerror-with-retry-strategy) where you want to signal specific failures. + +Here's a key insight: while JavaScript's native `throw` statement works great inside operators like `map` or `tap`, `throwError()` shines when you're in operators that expect you to return an Observable - like `switchMap`, `mergeMap`, or inside a custom creation function. In those cases, just throwing would break the chain; you need to return an error Observable instead. It's the difference between throwing an error in your code versus constructing an Observable that represents an error state. + +--- + +## Examples + +### Example 1: Basic error emission -( [StackBlitz](https://stackblitz.com/edit/typescript-5d3stz?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/punubequju/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/mks82xqz/) ) -```js -// RxJS v6+ +```typescript import { throwError } from 'rxjs'; -//emits an error with specified value on subscription -const source = throwError('This is an error!'); -//output: 'Error: This is an error!' -const subscribe = source.subscribe({ - next: val => console.log(val), - complete: () => console.log('Complete!'), - error: val => console.log(`Error: ${val}`) +// Create an observable that immediately emits an error +const error$ = throwError(() => new Error('Something went wrong!')); + +// Subscribe to see the error +error$.subscribe({ + next: val => console.log('Next:', val), // Won't be called + error: err => console.error('Error caught:', err.message), + complete: () => console.log('Complete!') // Won't be called }); + +// Output: "Error caught: Something went wrong!" ``` -### Related Examples +### Example 2: Conditional error in switchMap + +[StackBlitz](https://stackblitz.com/edit/typescript-oulg71yj?file=index.ts) + +```typescript +import { of, throwError } from 'rxjs'; +import { mergeMap, catchError } from 'rxjs/operators'; + +interface User { + id: number; + name: string; +} + +// Simulate fetching user data +function fetchUser(id: number) { + return of({ id, name: `User ${id}` }); +} -- [Throwing after 3 retries](../error_handling/retrywhen.md) +// Validate user ID before fetching - handle errors per item +of(0, 5, -1, 10) + .pipe( + mergeMap((id) => { + // Create the source observable based on validation + const source$ = + id <= 0 + ? throwError(() => new Error(`Invalid user ID: ${id}`)) + : fetchUser(id); + + // Handle errors for each item individually + return source$.pipe( + catchError((err) => { + console.error('Caught:', err()); + // Provide fallback user for this item only + return of({ id: 0, name: 'Guest User' } as User); + }) + ); + }) + ) + .subscribe((user) => console.log('User:', user.name)); + +/* Output: + Caught: Invalid user ID: 0 + User: Guest User + User: User 5 + Caught: Invalid user ID: -1 + User: Guest User + User: User 10 +*/ +``` + +### Example 3: Using throwError with retry strategy + +[StackBlitz](https://stackblitz.com/edit/typescript-gtwzvj3b?file=index.ts) + +```typescript +import { of, throwError, timer } from 'rxjs'; +import { mergeMap, retry, tap } from 'rxjs/operators'; + +let attemptCount = 0; + +// Simulate an unreliable API call +function unreliableApiCall() { + attemptCount++; + console.log(`API call attempt #${attemptCount}`); + + // Fail first 2 attempts, succeed on 3rd + return attemptCount < 3 + ? throwError(() => new Error('Network timeout')) + : of({ data: 'Success!' }); +} + +// Try the API call with retry logic +of(null).pipe( + mergeMap(() => unreliableApiCall()), + retry(2) // Retry up to 2 times on error +).subscribe({ + next: result => console.log('Result:', result.data), + error: err => console.error('Final error:', err.message) +}); + +/* Output: + API call attempt #1 + API call attempt #2 + API call attempt #3 + Result: Success! +*/ +``` + +--- + +## Related Recipes + +- [Smart Counter](https://www.learnrxjs.io/learn-rxjs/recipes/smartcounter) +- [HTTP Polling](https://www.learnrxjs.io/learn-rxjs/recipes/http-polling) + +--- -### Additional Resources +## Additional Resources -- [throw](https://rxjs.dev/api/index/function/throw) 📰 - Official docs -- [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - 🎥 💵 - André Staltz +- [throwError](https://rxjs.dev/api/index/function/throwError) 📰 - Official docs +- [Error Handling in RxJS](https://blog.angular-university.io/rxjs-error-handling/) 📰 - Comprehensive guide --- -> 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts) +📁 **Source Code:** [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts) \ No newline at end of file diff --git a/operators/creation/timer.md b/operators/creation/timer.md index 21f8872b..75582f15 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -55,8 +55,6 @@ const subscribe = source.subscribe(val => console.log(val)); - [timer](https://rxjs.dev/api/index/function/timer) 📰 - Official docs - [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) 🎥 💵 - André Staltz -- [Build your own timer operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=timer#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index ae867a31..0be51209 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -173,7 +173,6 @@ userData$.subscribe(user => console.log('User:', user)); ## Additional Resources - [catchError](https://rxjs.dev/api/operators/catchError) 📰 - Official docs -- [catchError](https://indepth.dev/reference/rxjs/operators/catch-error) - In Depth Dev Reference - [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Error Handling in RxJS](https://blog.angular-university.io/rxjs-error-handling/) 📰 - Angular University diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 8c8eb597..3c0ffb51 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -60,7 +60,6 @@ const subscribe = example.subscribe({ ### Additional Resources - [retry](https://rxjs.dev/api/operators/retry) 📰 - Official docs -- [retry](https://indepth.dev/reference/rxjs/operators/retry) - In Depth Dev Reference - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index e794e621..cd96ab23 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -140,7 +140,6 @@ export class AppComponent implements OnInit { ### Additional Resources - [retryWhen](https://rxjs.dev/api/operators/retryWhen) 📰 - Official docs -- [retryWhen](https://indepth.dev/reference/rxjs/operators/retry-when) - In Depth Dev Reference - [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index f9d75594..83f7aa6e 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -36,7 +36,6 @@ const subscribe = example.subscribe(val => console.log('Clicked')); * [auditTime](https://rxjs.dev/api/operators/auditTime) 📰 - Official docs -* [auditTime](https://indepth.dev/reference/rxjs/operators/audit-time) - In Depth Dev Reference * [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index 41af5978..0c9cd4f2 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -70,7 +70,6 @@ const subscribe = debouncedInterval.subscribe(val => ### Additional Resources - [debounce](https://rxjs.dev/api/operators/debounce) 📰 - Official docs -- [debounce](https://indepth.dev/reference/rxjs/operators/debounce) - In Depth Dev Reference - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 464e6fb7..a2989705 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -65,12 +65,9 @@ keyup$ ### Additional Resources - [debounceTime](https://rxjs.dev/api/operators/debounceTime) 📰 - Official docs -- [debounceTime](https://indepth.dev/reference/rxjs/operators/debounce-time) - In Depth Dev Reference - [Transformation operator: debounce and debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) -- [Build your own debounceTime operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=debounceTime#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index d8657bb8..a4c5ec2f 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -109,7 +109,6 @@ source$ - [distinctUntilChanged](https://rxjs.dev/api/operators/distinctUntilChanged) 📰 - Official docs -- [distinctUntilChanged](https://indepth.dev/reference/rxjs/operators/distinct-until-changed) - In Depth Dev Reference - [Filtering operator: distinct and distinctUntilChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-and-distinctuntilchanged?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/filtering/distinctuntilkeychanged.md b/operators/filtering/distinctuntilkeychanged.md index c07fbea6..ebf95c9a 100644 --- a/operators/filtering/distinctuntilkeychanged.md +++ b/operators/filtering/distinctuntilkeychanged.md @@ -1,17 +1,26 @@ # distinctUntilKeyChanged -#### signature: `distinctUntilKeyChanged(key, compare: fn): Observable` +#### signature: `distinctUntilKeyChanged(key, compare?: fn): Observable` -## Only emit when the specified key value has changed +## Only emit when the specified key value changes +💡 If you're comparing entire values, use [distinctUntilChanged](./distinctuntilchanged.md) instead! +💡 For truly unique values across the entire stream (not just consecutive), check out [distinct](./distinct.md)! +### Why use distinctUntilKeyChanged? + +When you're working with streams of objects—think user profiles, product items, or API responses, you often care about changes to a specific property rather than the entire object. Maybe you're tracking users by their ID, filtering products by SKU, or monitoring status updates. That's where `distinctUntilKeyChanged` shines. + +Think of it like having a smart doorman at a club who recognizes people by their membership cards. Even if someone changes their outfit or hairstyle (other object properties), the doorman only cares about the card number. If you try to enter twice in a row with the same card, they'll stop you the second time: "You're already inside!" But if someone else with a different card shows up, they're let through. That's exactly what `distinctUntilKeyChanged` does—it checks a specific "card" (key) on each object and only lets through consecutive duplicates. + +This is incredibly useful for scenarios like live data feeds where objects might be re-emitted frequently but you only want to react when a specific property actually changes. For instance, you might receive user objects from a WebSocket connection, but you only want to update your UI when the user's status field changes from 'online' to 'offline', not every time the object is re-broadcast. By using `distinctUntilKeyChanged('status')`, you filter out the noise and [react only to meaningful changes](#example-1-compare-based-on-key). ### Examples ##### Example 1: Compare based on key ( -[StackBlitz](https://stackblitz.com/edit/typescript-hzta27?file=index.ts&devtoolsheight=100) +[StackBlitz](https://stackblitz.com/edit/typescript-bpl1gwyk?file=index.ts) ) ```js @@ -19,7 +28,7 @@ import { from } from 'rxjs'; import { distinctUntilKeyChanged } from 'rxjs/operators'; -// only output distinct values, based on the last emitted value +// only output distinct values based on the 'name' key const source$ = from([ { name: 'Brian' }, { name: 'Joe' }, @@ -28,9 +37,9 @@ const source$ = from([ ]); source$ - // custom compare based on name property + // only emit when name property changes .pipe(distinctUntilKeyChanged('name')) - // output: { name: 'Brian }, { name: 'Joe' }, { name: 'Sue' } + // output: { name: 'Brian' }, { name: 'Joe' }, { name: 'Sue' } .subscribe(console.log); ``` @@ -43,22 +52,66 @@ source$ ```js // RxJS v6+ import { fromEvent } from 'rxjs'; -import { distinctUntilKeyChanged, pluck } from 'rxjs/operators'; +import { distinctUntilKeyChanged, map } from 'rxjs/operators'; +// listen to keyboard events const keys$ = fromEvent(document, 'keyup').pipe( - distinctUntilKeyChanged < KeyboardEvent > 'code', - pluck('key') + // only emit when the 'code' property changes (ignore repeated key holds) + distinctUntilKeyChanged('code'), + // extract the actual key value for display + map(e => e?.key) ); keys$.subscribe(console.log); ``` +##### Example 3: Custom comparison function + +( +[StackBlitz](https://stackblitz.com/edit/typescript-exygmrr6?file=index.ts) +) + +```js +// RxJS v6+ +import { of } from 'rxjs'; +import { distinctUntilKeyChanged } from 'rxjs/operators'; + +interface Person { + age: number; + name: string; +} + +// stream of person objects +const people$ = of( + { age: 4, name: 'Foo1' }, + { age: 7, name: 'Bar' }, + { age: 5, name: 'Foo2' }, + { age: 6, name: 'Foo3' } +); + +people$ + .pipe( + // only emit when first 3 letters of name change + distinctUntilKeyChanged( + 'name', + (x: string, y: string) => x.substring(0, 3) === y.substring(0, 3) + ) + ) + // output: { age: 4, name: 'Foo1' }, { age: 7, name: 'Bar' }, { age: 5, name: 'Foo2' } + .subscribe(console.log); +``` + +### Related Recipes + +- [Alphabet Invasion Game](../../recipes/alphabet-invasion-game.md) +- [Battleship Game](../../recipes/battleship-game.md) + ### Additional Resources -- [distinctUntilKeyChanged](https://rxjs.dev/api/operators/distinctUntilKeyChanged) - 📰 - Official docs +- [distinctUntilKeyChanged](https://rxjs.dev/api/operators/distinctUntilKeyChanged) 📰 - Official docs +- [Filtering operator: distinct, distinctUntilChanged, distinctUntilKeyChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-distinctuntilchanged-distinctuntilkeychanged) 🎥 - Egghead.io --- > 📁 Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinctUntilKeyChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinctUntilKeyChanged.ts) +> [https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinctUntilKeyChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/distinctUntilKeyChanged.ts) \ No newline at end of file diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 674217a6..7b0a35a5 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -105,13 +105,10 @@ const subscribe = example.subscribe(val => ### Additional Resources - [filter](https://rxjs.dev/api/operators/filter) 📰 - Official docs -- [filter](https://indepth.dev/reference/rxjs/operators/filter) - In Depth Dev Reference - [Adding conditional logic with filter](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Filtering operator: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz -- [Build your own filter operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=filter#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index b6b4d102..5d3efd3e 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -11,9 +11,7 @@ ##### Example 1: Ignore all elements from source ( -[StackBlitz](https://stackblitz.com/edit/typescript-jpjcpg?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/yiyefelubi/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/59scjqss/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-w6rndwxh?file=index.ts)) ```js // RxJS v6+ @@ -35,9 +33,7 @@ const subscribe = example.subscribe( ##### Example 2: Only displaying error ( -[StackBlitz](https://stackblitz.com/edit/typescript-3yxv9z?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/gogonawuze/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/srcwdgw6/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-3yxv9z?file=index.ts&devtoolsheight=100)) ```js // RxJS v6+ @@ -66,8 +62,7 @@ const subscribe = error.subscribe( ### Additional Resources -- [ignoreElements](https://rxjs.dev/api/operators/ignoreElements) 📰 - Official - docs +- [ignoreElements](https://rxjs.dev/api/operators/ignoreElements) 📰 - Official docs --- diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index dc00dbec..b7b28326 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -23,9 +23,7 @@ You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. ##### Example 1: Skipping values before emission ( -[StackBlitz](https://stackblitz.com/edit/typescript-o5ydjf?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/hacepudabi/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/ar1eqbya/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-o5ydjf?file=index.ts&devtoolsheight=100)) ```js // RxJS v6+ diff --git a/operators/filtering/take.md b/operators/filtering/take.md index 111fe2dd..77195920 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -106,11 +106,8 @@ const subscribe = oneClickEvent.subscribe(); ### Additional Resources - [take](https://rxjs.dev/api/operators/take) 📰 - Official docs -- [take](https://indepth.dev/reference/rxjs/operators/take) - In Depth Dev Reference - [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz -- [Build your own take operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=take#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index add55313..d8189859 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -140,15 +140,11 @@ mousedown$ ### Additional Resources - [takeUntil](https://rxjs.dev/api/operators/takeUntil) 📰 - Official docs -- [takeUntil](https://indepth.dev/reference/rxjs/operators/take-until) - In Depth Dev Reference - * [Avoiding takeUntil leaks](https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef) - Angular in Depth * [Stopping a stream with takeUntil](https://egghead.io/lessons/rxjs-stopping-a-stream-with-takeuntil?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist -- [Build your own takeUntil operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=takeUntil#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index 8af7bd2c..96f5a5f2 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -104,7 +104,6 @@ source$ - [takeWhile](https://rxjs-dev.firebaseapp.com/api/operators/takeWhile) 📰 - Official docs -- [takeWhile](https://indepth.dev/reference/rxjs/operators/take-while) - In Depth Dev Reference - [Completing a stream with takeWhile](https://egghead.io/lessons/rxjs-completing-a-stream-with-takewhile?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 9cb10f96..08e6cff6 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -59,7 +59,6 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources - [throttleTime](https://rxjs.dev/api/operators/throttleTime) 📰 - Official docs -- [throttleTime](https://indepth.dev/reference/rxjs/operators/throttle-time) - In Depth Dev Reference - [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz - [Time based operators comparison](../../concepts/time-based-operators-comparison.md) diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index 12b3ac2b..d997c3c2 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -75,7 +75,6 @@ const subscribe = myBufferedInterval.subscribe(val => - [buffer](https://rxjs-dev.firebaseapp.com/api/operators/buffer) 📰 - Official docs -- [buffer](https://indepth.dev/reference/rxjs/operators/buffer) - In Depth Dev Reference - [Transformation operator: buffer](https://egghead.io/lessons/rxjs-transformation-operator-buffer?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index ff93fe8f..8c9b8584 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -15,8 +15,7 @@ Remember, `bufferTime` allows you to manage data emissions effectively by collec ##### Example 1: Buffer for 2 seconds -( [StackBlitz](https://stackblitz.com/edit/typescript-haqxd1?file=index.ts&devtoolsheight=50) | [jsBin](http://jsbin.com/bafakiyife/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/vx7vwg01/) ) +( [StackBlitz](https://stackblitz.com/edit/typescript-haqxd1?file=index.ts&devtoolsheight=50)) ```js // RxJS v6+ @@ -36,8 +35,7 @@ const subscribe = example.subscribe(val => ##### Example 2: Multiple active buffers -( [StackBlitz](https://stackblitz.com/edit/typescript-9blquz?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/tadiwiniri/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/7k4ygj1x/) ) +( [StackBlitz](https://stackblitz.com/edit/typescript-9blquz?file=index.ts&devtoolsheight=100)) ```js // RxJS v6+ @@ -62,7 +60,6 @@ const subscribe = example.subscribe(val => * [bufferTime](https://rxjs.dev/api/operators/bufferTime) 📰 - Official docs -* [bufferTime](https://indepth.dev/reference/rxjs/operators/buffer-time) - In Depth Dev Reference * [Time based operators comparison](../../concepts/time-based-operators-comparison.md) --- diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index 693e5c8e..591fb085 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -38,7 +38,6 @@ const subscribe = bufferWhenExample.subscribe(val => ### Additional Resources - [bufferWhen](https://rxjs.dev/api/operators/bufferWhen) 📰 - Official docs -- [bufferWhen](https://indepth.dev/reference/rxjs/operators/buffer-when) - In Depth Dev Reference --- diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index fa102dc6..50f16f15 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -113,11 +113,8 @@ const subscribe = example.subscribe(val => ### Additional Resources - [concatMap](https://rxjs.dev/api/operators/concatMap) 📰 - Official docs -- [concatMap](https://indepth.dev/reference/rxjs/operators/concat-map) - In Depth Dev Reference - [Use RxJS concatMap to map and concat higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-concatmap-to-map-and-concat-high-order-observables?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz -- [Build your own concatMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=concatMap#app) - 🎥 - Kwinten Pisman --- diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 378860b0..641a60d7 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -131,7 +131,7 @@ const exhaustSub = firstInterval ### Additional Resources - [exhaustMap](https://rxjs.dev/api/operators/exhaustMap) 📰 - Official docs -- [exhaustMap](https://indepth.dev/reference/rxjs/operators/exhaust-map) - In Depth Dev Reference + --- diff --git a/operators/transformation/map.md b/operators/transformation/map.md index 9909fde5..c5d03277 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -192,10 +192,8 @@ const subscribe = itemsWithTotal.subscribe(item => console.log(item)); ### Additional Resources * [map](https://rxjs.dev/api/operators/map) 📰 - Official docs -* [map](https://indepth.dev/reference/rxjs/operators/map) - In Depth Dev Reference * [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 - Ben Lesh * [Transformation operator: map and mapTo](https://egghead.io/lessons/rxjs-transformation-operator-map-and-mapto?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz -* [Build your own map operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=map#app) 🎥 - Kwinten Pisman --- diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index 0431819e..76effc1e 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -215,7 +215,6 @@ source$ ### Additional Resources - [mergeMap](https://rxjs.dev/api/operators/mergeMap) 📰 - Official docs -- [mergeMap](https://indepth.dev/reference/rxjs/operators/merge-map) - In Depth Dev Reference - [map vs flatMap](https://egghead.io/lessons/rxjs-rxjs-map-vs-flatmap) 🎥 💵 - Ben Lesh - [Async requests and responses in RxJS](https://egghead.io/lessons/rxjs-04-reactive-programming-async-requests-and-responses-in-rxjs) @@ -224,8 +223,7 @@ source$ 🎥 💵 - André Staltz - [Use RxJS mergeMap for fine grain custom behavior](https://egghead.io/lessons/rxjs-use-rxjs-mergemap-for-fine-grain-custom-behavior?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz -- [Build your own mergeMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=mergeMap#app) - 🎥 - Kwinten Pisman + --- diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index e833ddf5..c6333ec3 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -37,8 +37,7 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); - [reduce](https://rxjs.dev/api/operators/reduce) 📰 - Official docs - [Scan() vs reduce() | RxJS TUTORIAL](https://www.youtube.com/watch?v=myEeo2rZc3g) 🎥 - Academind -- [Build your own reduce operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=reduce#app) - 🎥 - Kwinten Pisman + --- diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 67dd4963..8b192d1d 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -148,8 +148,7 @@ interval(1000) 🎥 💵 - John Linquist - [Transformation operator: scan](https://egghead.io/lessons/rxjs-transformation-operator-scan?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz -- [Build your own scan operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=scan#app) - 🎥 - Kwinten Pisman + --- diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index d2ffb396..71adb4aa 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -145,7 +145,6 @@ timer(0, 5000) ### Additional Resources - [switchMap](https://rxjs.dev/api/operators/switchMap) 📰 - Official docs -- [switchMap](https://indepth.dev/reference/rxjs/operators/switch-map) - In Depth Dev Reference - [Avoiding switchMap-Related Bugs](https://blog.angularindepth.com/switchmap-bugs-b6de69155524) - Nicholas Jamieson - [Starting a stream with switchMap](https://egghead.io/lessons/rxjs-starting-a-stream-with-switchmap?course=step-by-step-async-javascript-with-rxjs) @@ -154,8 +153,7 @@ timer(0, 5000) 🎥 💵 - André Staltz - [Use switchMap as a safe default to flatten observables in RxJS](https://egghead.io/lessons/rxjs-use-switchmap-as-a-safe-default-to-flatten-observables-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) 🎥 💵 - André Staltz -- [Build your own switchMap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=switchMap#app) - 🎥 - Kwinten Pisman + --- diff --git a/operators/utility/delay.md b/operators/utility/delay.md index cee84f9d..5fd0d96f 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -64,7 +64,6 @@ const subscribe = message.subscribe(val => console.log(val)); ### Additional Resources - [delay](https://rxjs.dev/api/operators/delay) 📰 - Official docs -- [delay](https://indepth.dev/reference/rxjs/operators/delay) - In Depth Dev Reference - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index cda977c3..2e1b9ec9 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -34,7 +34,6 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); ### Additional Resources - [delayWhen](https://rxjs.dev/api/operators/delayWhen) 📰 - Official docs -- [delayWhen](https://indepth.dev/reference/rxjs/operators/delay-when) - In Depth Dev Reference - [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz diff --git a/operators/utility/do.md b/operators/utility/do.md index 6da67320..e3b3276c 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -105,13 +105,11 @@ const example = source ### Additional Resources - [tap](https://rxjs.dev/api/operators/tap) 📰 - Official docs -- [tap](https://indepth.dev/reference/rxjs/operators/tap) - In Depth Dev Reference - [Logging a stream with do](https://egghead.io/lessons/rxjs-logging-a-stream-with-do?course=step-by-step-async-javascript-with-rxjs) 🎥 💵 - John Linquist - [Utility operator: do](https://egghead.io/lessons/rxjs-utility-operator-do?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz -- [Build your own tap operator](https://blog.strongbrew.io/build-the-operators-from-rxjs-from-scratch/?lectureId=tap#app) - 🎥 - Kwinten Pisman + --- diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index ee594fde..7ddec764 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -11,9 +11,7 @@ ##### Example 1: Timeout after 2.5 seconds ( -[StackBlitz](https://stackblitz.com/edit/typescript-eegqyz?file=index.ts&devtoolsheight=100) -| [jsBin](http://jsbin.com/gonakiniho/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/nr4e1ofy/1/) ) +[StackBlitz](https://stackblitz.com/edit/typescript-eegqyz?file=index.ts&devtoolsheight=100) ) ```js // RxJS v6+ diff --git a/subjects/asyncsubject.md b/subjects/asyncsubject.md index ca45c894..c9937e24 100644 --- a/subjects/asyncsubject.md +++ b/subjects/asyncsubject.md @@ -32,7 +32,6 @@ sub.complete(); //456, 456 logged by both subscribers - [AsyncSubject](https://rxjs-dev.firebaseapp.com/api/index/class/AsyncSubject) 📰 - Official docs -- [AsyncSubject](https://indepth.dev/reference/rxjs/subjects/async-subject) - In Depth Dev Reference --- diff --git a/subjects/behaviorsubject.md b/subjects/behaviorsubject.md index db4e4fcc..5d3f0e7a 100644 --- a/subjects/behaviorsubject.md +++ b/subjects/behaviorsubject.md @@ -111,7 +111,6 @@ merge(click$, interval$).subscribe(); - [BehaviorSubject](https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject) 📰 - Official docs -- [BehaviorSubject](https://indepth.dev/reference/rxjs/subjects/behavior-subject) - In Depth Dev Reference --- diff --git a/subjects/replaysubject.md b/subjects/replaysubject.md index 8cdaecc9..12baccb8 100644 --- a/subjects/replaysubject.md +++ b/subjects/replaysubject.md @@ -49,7 +49,6 @@ sub.next(5); // OUTPUT => 5,5 (log from both subscribers) - [ReplaySubject](https://rxjs-dev.firebaseapp.com/api/index/class/ReplaySubject) 📰 - Official docs -- [ReplaySubject](https://indepth.dev/reference/rxjs/subjects/replay-subject) - In Depth Dev Reference --- diff --git a/subjects/subject.md b/subjects/subject.md index 1037de67..49f6aceb 100644 --- a/subjects/subject.md +++ b/subjects/subject.md @@ -54,7 +54,6 @@ sub.next(3); // OUTPUT => Subscriber A 3, Subscriber B 3 (logged from both subsc - [Subject](https://rxjs-dev.firebaseapp.com/api/index/class/Subject) 📰 - Official docs -- [Subject](https://indepth.dev/reference/rxjs/subjects) - In Depth Dev Reference ---