add timing API support (#448)

* add timing API support

* fixup! bump package.json

README.md

@@ -241,10 +241,15 @@ the first time, consider reading through the [handbook][handbook] first
 
 ### `app = choo([opts])`
 Initialize a new `choo` instance. `opts` can also contain the following values:
-- __opts.history:__ default: `true`. LIsten for url changes through the
+- __opts.history:__ default: `true`. Listen for url changes through the
   history API.
 - __opts.href:__ default: `true`. Handle all relative `<a
   href="<location>"></a>` clicks and call `emit('render')`
+- __opts.timing:__ default: `true`. Enables calls to the
+  [window.performance][window-performance] timing API. Timing calls will not
+  run in browsers that don't support it out of the box. The timing marks are
+  `choo:renderStart`, `choo:renderEnd`. The resulting diff is stored as
+  `choo:render`.
 
 ### `app.use(callback(state, emitter))`
 Call a function and pass it a `state` and `emitter`. `emitter` is an instance
@@ -404,3 +409,4 @@ Become a backer, and buy us a coffee (or perhaps lunch?) every month or so.
 [yo-yo]: https://github.com/maxogden/yo-yo
 [yo-yoify]: https://github.com/shama/yo-yoify
 [unassertify]: https://github.com/unassert-js/unassertify
+[window-performance]: https://developer.mozilla.org/en-US/docs/Web/API/Performance

example/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "bel": "^4.5.1",
     "choo-expose": "^1.0.0",
-    "choo-log": "^5.0.0",
+    "choo-log": "^6.0.0",
     "choo-persist": "^3.0.0",
     "sheetify": "^6.0.1",
     "todomvc-app-css": "^2.0.6",

index.js

@@ -19,6 +19,8 @@ function Framework (opts) {
     curry: true
   }
 
+  var timingEnabled = opts.timing === undefined ? true : opts.timing
+  var hasPerformance = window.performance && window.performance.mark
   var router = nanorouter(routerOpts)
   var bus = nanobus()
   var rerender = null
@@ -49,8 +51,15 @@ function Framework (opts) {
   function start () {
     tree = router(createLocation(), state, emit)
     rerender = nanoraf(function () {
+      if (hasPerformance && timingEnabled) {
+        window.performance.mark('choo:renderStart')
+      }
       var newTree = router(createLocation(), state, emit)
       tree = nanomorph(tree, newTree)
+      if (hasPerformance && timingEnabled) {
+        window.performance.mark('choo:renderEnd')
+        window.performance.measure('choo:render', 'choo:renderStart', 'choo:renderEnd')
+      }
     })
 
     bus.on('render', rerender)

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "deps": "dependency-check --entry ./html.js . && dependency-check . --extra --no-dev --entry ./html.js",
-    "start": "bankai start example --open",
+    "start": "bankai start example --open --optimize",
     "test": "standard && npm run deps && node test.js",
     "build:dev": "echo 'to be implemented'",
     "build:min": "echo 'to be implemented'",
@@ -23,7 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "bel": "^4.5.1",
-    "nanobus": "^2.1.0",
+    "nanobus": "^3.0.0",
     "nanomorph": "^4.0.0",
     "nanomount": "^1.0.0",
     "nanoraf": "^3.0.0",