From 1e1573765cf687f7073f92192b312f91d573bc32 Mon Sep 17 00:00:00 2001 From: Tushar Mathur Date: Wed, 18 May 2016 16:39:51 +0530 Subject: [PATCH 1/3] Batch UI updates --- src/components/Todos/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Todos/index.js b/src/components/Todos/index.js index 95182f5..153b1bb 100644 --- a/src/components/Todos/index.js +++ b/src/components/Todos/index.js @@ -87,7 +87,7 @@ function Todos({DOM, History, storage}) { // Write the virtual dom stream to the DOM and write the // storage stream to localStorage. return { - DOM: view(amendedState$), + DOM: view(amendedState$).flatMapLatest(dom => Observable.fromCallback(requestAnimationFrame).map(dom)), History: actions.url$, storage: storage$, }; From d9043fa1212d250a8c65428cac79fb79c8f0bd06 Mon Sep 17 00:00:00 2001 From: Tushar Mathur Date: Wed, 18 May 2016 17:03:43 +0530 Subject: [PATCH 2/3] Update index.js --- src/components/Todos/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Todos/index.js b/src/components/Todos/index.js index 153b1bb..0f1de06 100644 --- a/src/components/Todos/index.js +++ b/src/components/Todos/index.js @@ -87,7 +87,7 @@ function Todos({DOM, History, storage}) { // Write the virtual dom stream to the DOM and write the // storage stream to localStorage. return { - DOM: view(amendedState$).flatMapLatest(dom => Observable.fromCallback(requestAnimationFrame).map(dom)), + DOM: view(amendedState$).flatMapLatest(dom => Observable.fromCallback(requestAnimationFrame)().map(dom)), History: actions.url$, storage: storage$, }; From 0949106274fec48fdb96f17369e5aa242512f653 Mon Sep 17 00:00:00 2001 From: Tushar Mathur Date: Thu, 19 May 2016 09:46:41 +0530 Subject: [PATCH 3/3] fixup! Update index.js --- package.json | 1 + src/components/Todos/index.js | 3 ++- src/utils.js | 15 ++++++++++++++- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index cbf4cc7..1b3950f 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@cycle/history": "^1.1.0", "@cycle/isolate": "1.2.x", "@cycle/storage": "^2.0.3", + "raf": "^3.2.0", "rx": "4.0.7", "todomvc-app-css": "2.0.3", "todomvc-common": "1.0.1" diff --git a/src/components/Todos/index.js b/src/components/Todos/index.js index 0f1de06..80667b0 100644 --- a/src/components/Todos/index.js +++ b/src/components/Todos/index.js @@ -6,6 +6,7 @@ import view from './view'; import deserialize from './storage-source'; import serialize from './storage-sink'; import TodoItem from '../TodoItem'; +import {batchUpdate} from '../../utils' // AMEND STATE WITH CHILDREN // This function creates the projection function @@ -87,7 +88,7 @@ function Todos({DOM, History, storage}) { // Write the virtual dom stream to the DOM and write the // storage stream to localStorage. return { - DOM: view(amendedState$).flatMapLatest(dom => Observable.fromCallback(requestAnimationFrame)().map(dom)), + DOM: batchUpdate(view(amendedState$)), History: actions.url$, storage: storage$, }; diff --git a/src/utils.js b/src/utils.js index c2d9a49..23704ca 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,6 @@ +import {Observable} from 'rx' +import raf from 'raf' + class PropertyHook { constructor(fn) { this.fn = fn; @@ -15,4 +18,14 @@ function propHook(fn) { const ENTER_KEY = 13; const ESC_KEY = 27; -export {propHook, ENTER_KEY, ESC_KEY}; +function batchUpdate (dom$) { + return dom$ + .flatMapLatest(dom => Observable + .fromEventPattern( + callback => raf(() => callback(dom)), + (_, handler) => raf.cancel(handler) + ).first() + ) +} + +export {propHook, batchUpdate, ENTER_KEY, ESC_KEY};