optimize example further (#462)

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)
+        })
+      })
     }
   }
 }

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

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 = {

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