From 16d15d0e88fbabebbb52070863169039b86af131 Mon Sep 17 00:00:00 2001
From: Yoshua Wuyts <yoshuawuyts+github@gmail.com>
Date: Sun, 2 Apr 2017 01:19:59 +0200
Subject: [PATCH] optimize example further (#462)

---
 example/index.js     | 22 ++++++++++++++++++----
 example/package.json |  2 ++
 index.js             |  4 ++--
 package.json         |  2 +-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/example/index.js b/example/index.js
index 18cc8ee..8aa81a1 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,3 +1,5 @@
+var Microbounce = require('microbounce')
+var Microframe = require('microframe')
 var mutate = require('xtend/mutable')
 var expose = require('choo-expose')
 var css = require('sheetify')
@@ -47,17 +49,21 @@ function mainView (state, emit) {
 }
 
 function todoStore (state, emitter) {
+  // Default values
   if (!state.todos) {
     state.todos = {}
 
     state.todos.active = []
     state.todos.done = []
     state.todos.all = []
-    state.todos.input = ''
 
     state.todos.idCounter = 0
   }
 
+  // Always reset when application boots
+  state.todos.input = ''
+
+  // Register emitters after DOM is loaded to speed up DOM loading
   emitter.on('DOMContentLoaded', function () {
     emitter.emit('log:debug', 'Loading todos model')
 
@@ -253,6 +259,8 @@ function Footer (state, emit) {
   }
 }
 
+var debounce = Microbounce(256)
+var nextFrame = Microframe()
 function Header (state, emit) {
   return html`
     <header class="header">
@@ -269,10 +277,16 @@ function Header (state, emit) {
     var value = e.target.value
     if (!value) return
     if (e.keyCode === 13) {
-      emit('todos:input', '')
-      emit('todos:create', value)
+      nextFrame(function () {
+        emit('todos:input', '')
+        emit('todos:create', value)
+      })
     } else {
-      emit('todos:input', value)
+      debounce(function () {
+        nextFrame(function () {
+          emit('todos:input', value)
+        })
+      })
     }
   }
 }
diff --git a/example/package.json b/example/package.json
index e65c11e..1a3719b 100644
--- a/example/package.json
+++ b/example/package.json
@@ -13,6 +13,8 @@
     "choo-expose": "^1.0.0",
     "choo-log": "^6.0.0",
     "choo-persist": "^3.0.0",
+    "microbounce": "^1.0.0",
+    "microframe": "^1.0.0",
     "sheetify": "^6.0.1",
     "todomvc-app-css": "^2.0.6",
     "todomvc-common": "^1.0.3",
diff --git a/index.js b/index.js
index d1f522f..e0da53d 100644
--- a/index.js
+++ b/index.js
@@ -9,9 +9,9 @@ var assert = require('assert')
 var onHistoryChange = require('./lib/history')
 var onHref = require('./lib/href')
 
-module.exports = Framework
+module.exports = Choo
 
-function Framework (opts) {
+function Choo (opts) {
   opts = opts || {}
 
   var routerOpts = {
diff --git a/package.json b/package.json
index 65605cb..f6965e0 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "deps": "dependency-check --entry ./html.js . && dependency-check . --extra --no-dev --entry ./html.js",
     "inspect": "browserify --full-paths index -g unassertify -g uglifyify | discify --open",
     "prepublish": "npm run build",
-    "start": "bankai start example --open --optimize",
+    "start": "bankai start example --optimize",
     "test": "standard && npm run deps && node test.js"
   },
   "repository": "yoshuawuyts/choo",