From 3a245c8940bc89f019756fa56dc78126983749b8 Mon Sep 17 00:00:00 2001 From: Diedrik De Mits Date: Wed, 24 Jan 2018 23:53:40 +0100 Subject: [PATCH 1/3] docs(operators): Add documentation for bufferCount Add documentation for bufferCount to close #110 --- package.json | 2 +- .../transformation/bufferCount.ts | 85 ++++++++++++++++++- 2 files changed, 84 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 5225b37a..b6a2a671 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "zone.js": "0.8.14" }, "devDependencies": { - "@angular/cli": "1.6.0", + "@angular/cli": "1.6.5", "@angular/compiler-cli": "5.1.1", "@angular/language-service": "5.1.1", "@angular/service-worker": "5.1.1", diff --git a/src/operator-docs/transformation/bufferCount.ts b/src/operator-docs/transformation/bufferCount.ts index 43461734..69bef1c8 100644 --- a/src/operator-docs/transformation/bufferCount.ts +++ b/src/operator-docs/transformation/bufferCount.ts @@ -1,6 +1,87 @@ import { OperatorDoc } from '../operator.model'; export const bufferCount: OperatorDoc = { - 'name': 'bufferCount', - 'operatorType': 'transformation' + name: 'bufferCount', + operatorType: 'transformation', + signature: ` bufferCount(bufferSize: number, startBufferEvery: number): Observable`, + parameters: [ + { + name: 'bufferSize', + type: 'number', + attribute: '', + description: `The maximum size of the buffer emitted.` + }, + { + name: 'startBufferEvery', + type: 'number', + attribute: 'optional', + description: `Interval at which to start a new buffer. For example if startBufferEvery is 2, + then a new buffer will be started on every other value from the source. + A new buffer is started at the beginning of the source by default.` + } + ], + marbleUrl: 'http://reactivex.io/rxjs/img/bufferCount.png', + shortDescription: { + description: ` + Buffers the source Observable values until the size hits the maximum bufferSize given. + + Collects values from the past as an array, + and emits that array only when its size reaches bufferSize. + ` + }, + walkthrough: { + description: ` + Buffers a number of values from the source Observable + by bufferSize then emits the buffer and clears it, + and starts a new buffer each startBufferEvery values. + If startBufferEvery is not provided or is null, + then new buffers are started immediately at the start of the source and when each buffer closes and is emitted. + ` + }, + examples: [ + { + name: 'Every two clicks, emit those two click events as an array', + code: ` + import { fromEvent } from 'rxjs/observable/fromEvent'; + import { map, bufferCount } from 'rxjs/operators'; + + const clicks$ = fromEvent(document, 'click'); + const buffered$ = clicks$.pipe( + map(e => {return {X: e.clientX, Y: e.clientY};}), + bufferCount(2) + ); + buffered$.subscribe(x => console.log(x)); + `, + externalLink: { + platform: 'JSBin', + url: 'http://jsbin.com/ceripaf/1/embed?js,console,output' + } + }, + { + name: 'On every click, emit the last two click events as an array', + code: ` + import { fromEvent } from 'rxjs/observable/fromEvent'; + import { map, bufferCount } from 'rxjs/operators'; + + const clicks$ = fromEvent(document, 'click'); + const buffered$ = clicks$.pipe( + map(e => {return {X: e.clientX, Y: e.clientY};}), + bufferCount(2, 1) + ); + buffered$.subscribe(x => console.log(x)); +`, + externalLink: { + platform: 'JSBin', + url: 'http://jsbin.com/cenuwip/1/embed?js,console,output' + } + } + ], + relatedOperators: [ + 'buffer', + 'bufferTime', + 'bufferToggle', + 'bufferWhen', + 'pairwise', + 'windowCount' + ] }; From 3e0f3604583869b27360c8e765c34708ec7eab1a Mon Sep 17 00:00:00 2001 From: Diedrik De Mits Date: Fri, 26 Jan 2018 11:42:26 +0100 Subject: [PATCH 2/3] refactor(operators): Add comment about example console output Added example console output as a comment on the examples for jsbin as well as for inline examples. The package.json has a reverted angular-cli dependency so it is only defined in one PR from now on! --- package.json | 2 +- .../transformation/bufferCount.ts | 95 ++++++++++++++++--- 2 files changed, 84 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index b6a2a671..5225b37a 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "zone.js": "0.8.14" }, "devDependencies": { - "@angular/cli": "1.6.5", + "@angular/cli": "1.6.0", "@angular/compiler-cli": "5.1.1", "@angular/language-service": "5.1.1", "@angular/service-worker": "5.1.1", diff --git a/src/operator-docs/transformation/bufferCount.ts b/src/operator-docs/transformation/bufferCount.ts index 69bef1c8..aa6a419a 100644 --- a/src/operator-docs/transformation/bufferCount.ts +++ b/src/operator-docs/transformation/bufferCount.ts @@ -43,36 +43,107 @@ export const bufferCount: OperatorDoc = { name: 'Every two clicks, emit those two click events as an array', code: ` import { fromEvent } from 'rxjs/observable/fromEvent'; - import { map, bufferCount } from 'rxjs/operators'; + import { bufferCount } from 'rxjs/operators'; - const clicks$ = fromEvent(document, 'click'); - const buffered$ = clicks$.pipe( - map(e => {return {X: e.clientX, Y: e.clientY};}), + const clicks = fromEvent(document, 'click', e => ({x: e.clientX, y: e.clientY})); + const buffered = clicks.pipe( bufferCount(2) ); - buffered$.subscribe(x => console.log(x)); + + /* + Example console output: + + [[object Object] { + x: 235, + y: 140 + }, [object Object] { + x: 63, + y: 45 + }] + + [[object Object] { + x: 199, + y: 74 + }, [object Object] { + x: 133, + y: 181 + }] + + [[object Object] { + x: 343, + y: 174 + }, [object Object] { + x: 274, + y: 82 + }] + */ + buffered.subscribe(x => console.log(x)); `, externalLink: { platform: 'JSBin', - url: 'http://jsbin.com/ceripaf/1/embed?js,console,output' + url: 'http://jsbin.com/ceripaf/4/embed?js,console,output' } }, { name: 'On every click, emit the last two click events as an array', code: ` import { fromEvent } from 'rxjs/observable/fromEvent'; - import { map, bufferCount } from 'rxjs/operators'; + import { bufferCount } from 'rxjs/operators'; - const clicks$ = fromEvent(document, 'click'); - const buffered$ = clicks$.pipe( - map(e => {return {X: e.clientX, Y: e.clientY};}), + const clicks = fromEvent(document, 'click', e => ({x: e.clientX, y: e.clientY})); + const buffered = clicks.pipe( bufferCount(2, 1) ); - buffered$.subscribe(x => console.log(x)); + + /* + Example console output: + + [[object Object] { + x: 241, + y: 118 + }, [object Object] { + x: 176, + y: 183 + }] + + [[object Object] { + x: 176, + y: 183 + }, [object Object] { + x: 276, + y: 239 + }] + + [[object Object] { + x: 276, + y: 239 + }, [object Object] { + x: 341, + y: 90 + }] + + [[object Object] { + x: 341, + y: 90 + }, [object Object] { + x: 140, + y: 99 + }] + + [[object Object] { + x: 140, + y: 99 + }, [object Object] { + x: 253, + y: 335 + }] + */ + + buffered.subscribe(x => console.log(x)); `, externalLink: { platform: 'JSBin', - url: 'http://jsbin.com/cenuwip/1/embed?js,console,output' + url: 'http://jsbin.com/cenuwip/4/embed?js,console,output' } } ], From ebfd33c6aad3f6371cefc45f7317279a775fd18c Mon Sep 17 00:00:00 2001 From: Diedrik De Mits Date: Fri, 26 Jan 2018 16:54:33 +0100 Subject: [PATCH 3/3] style(operators): Move comment to below subscript The comment containing the expected output needs to be put below the subscription. I have also updated the method signature to remove the generic type. --- src/operator-docs/transformation/bufferCount.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/operator-docs/transformation/bufferCount.ts b/src/operator-docs/transformation/bufferCount.ts index aa6a419a..5c96af7f 100644 --- a/src/operator-docs/transformation/bufferCount.ts +++ b/src/operator-docs/transformation/bufferCount.ts @@ -3,7 +3,7 @@ import { OperatorDoc } from '../operator.model'; export const bufferCount: OperatorDoc = { name: 'bufferCount', operatorType: 'transformation', - signature: ` bufferCount(bufferSize: number, startBufferEvery: number): Observable`, + signature: ` bufferCount(bufferSize: number, startBufferEvery: number): Observable`, parameters: [ { name: 'bufferSize', @@ -49,7 +49,7 @@ export const bufferCount: OperatorDoc = { const buffered = clicks.pipe( bufferCount(2) ); - + buffered.subscribe(x => console.log(x)); /* Example console output: @@ -77,11 +77,10 @@ export const bufferCount: OperatorDoc = { y: 82 }] */ - buffered.subscribe(x => console.log(x)); `, externalLink: { platform: 'JSBin', - url: 'http://jsbin.com/ceripaf/4/embed?js,console,output' + url: 'http://jsbin.com/ceripaf/8/embed?js,console,output' } }, { @@ -94,7 +93,7 @@ export const bufferCount: OperatorDoc = { const buffered = clicks.pipe( bufferCount(2, 1) ); - + buffered.subscribe(x => console.log(x)); /* Example console output: @@ -138,12 +137,10 @@ export const bufferCount: OperatorDoc = { y: 335 }] */ - - buffered.subscribe(x => console.log(x)); `, externalLink: { platform: 'JSBin', - url: 'http://jsbin.com/cenuwip/4/embed?js,console,output' + url: 'http://jsbin.com/cenuwip/6/embed?js,console,output' } } ],