Pluralize "times" correctly

.gitignore

@@ -1,10 +1,11 @@
 node_modules/
 coverage/
-coverage.json
+dist/
 tmp/
-npm-debug.log*
-.DS_Store
 .sauce-credentials.json
-*.swp
 sauce_connect.log
+npm-debug.log*
+coverage.json
+.DS_Store
+*.swp
 .zuulrc

CHANGELOG.md

@@ -1,3 +1,14 @@
+## `3.1.0`
+And another patch down. This time around it's mostly maintenance and a bit of
+perf:
+- The addition of the [nanoraf](https://github.com/yoshuawuyts/nanoraf)
+  dependency prevents bursts of DOM updates thrashing application performance,
+  quite possibly making choo amongst the fastest frameworks out there.
+- We now ship standalone `UMD` bundles on each release, available through
+  [https://npmcdn.com/choo](https://npmcdn.com/choo). The goal of this is to
+  support sites like codepen and the like; __this should not be used for
+  production__.
+
 ## `3.0.0`
 Woooh, happy third birthday `choo` - _thanks dad_. You're all grown up now;
 look at how far you've come in the last month. You've grown... tinier? But yet

README.md

@@ -43,11 +43,6 @@
     <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square"
       alt="Standard" />
   </a>
-  <!-- IRC -->
-  <a href="https://webchat.freenode.net/?channels=choo">
-    <img src="https://img.shields.io/badge/irc-freenode-blue.svg?style=flat-square"
-      alt="IRC - Freenode" />
-  </a>
 </div>
 
 <div align="center">
@@ -55,12 +50,16 @@
     <a href="https://github.com/yoshuawuyts/choo-handbook">
       Handbook
     </a>
-    <span>|</span>
+    <span> | </span>
       Packages
-    <span>|</span>
+    <span> | </span>
     <a href="https://github.com/yoshuawuyts/choo/blob/master/.github/CONTRIBUTING.md">
       Contributing
     </a>
+    <span> | </span>
+    <a href="https://webchat.freenode.net/?channels=choo">
+      Chat
+    </a>
   </h3>
 </div>
 
@@ -80,6 +79,7 @@
   <li><a href="#example">Example</a></li>
   <li><a href="#philosophy">Philosophy</a></li>
   <li><a href="#concepts">Concepts</a></li>
+  <li><a href="#badges">Badges</a></li>
   <li><a href="#api">API</a></li>
   <li><a href="#faq">FAQ</a></li>
   <li><a href="#installation">Installation</a></li>
@@ -148,7 +148,7 @@ To run it, save it as `client.js` and run with [budo][budo] and
 [es2020][es2020]. These tools are convenient but any [browserify][browserify]
 based tool should do:
 ```sh
-$ budo 'client.js' -p 8080 --open -- -t es2020
+$ budo client.js -p 8080 --open -- -t es2020
 ```
 
 And to save the output to files so it can be deployed, open a new terminal and
@@ -246,7 +246,7 @@ app.model({
   namespace: 'todos',
   state: { items: [] },
   reducers: {
-    add: (data, state) => ({ todos: state.items.concat(data.payload) })
+    add: (data, state) => ({ items: state.items.concat(data.payload) })
   }
 })
 ```
@@ -361,6 +361,15 @@ const view = (state, prev, send) => {
 ```
 In this example, when the `Add` button is clicked, the view will dispatch an `add` action that the model’s `add` reducer will receive. [As seen above](#models), the reducer will add an item to the state’s `todos` array. The state change will cause this view to be run again with the new state, and the resulting DOM tree will be used to [efficiently patch the DOM](#does-choo-use-a-virtual-dom).
 
+## Badges
+Using `choo` in a project? Show off which version you've used using a badge:
+
+
+[![built with choo v3](https://img.shields.io/badge/built%20with%20choo-v3-ffc3e4.svg?style=flat-square)](https://github.com/yoshuawuyts/choo)
+```md
+[![built with choo v3](https://img.shields.io/badge/built%20with%20choo-v3-ffc3e4.svg?style=flat-square)](https://github.com/yoshuawuyts/choo)
+```
+
 ## API
 This section provides documentation on how each function in `choo` works. It's
 intended to be a technical reference. If you're interested in learning choo for

examples/async-counter/client.js

@@ -1,5 +1,6 @@
 const choo = require('../../')
 const html = require('../../html')
+const plur = require('plur')
 
 const app = choo()
 app.model({
@@ -21,10 +22,12 @@ app.model({
 })
 
 const mainView = (state, prev, send) => {
+  const count = state.counter;
+
   return html`
     <main class="app">
       <h1>Async counter</h1>
-      <p>Clicked ${state.counter} times!</p>
+      <p>Clicked ${count} ${plur('time', count)}!</p>
       <button onclick=${() => send('increment')}>Increment</button>
       <button onclick=${() => send('decrement')}>Decrement</button>
       <button onclick=${() => send('incrementAsync')}>Increment async</button>

examples/async-counter/package.json

@@ -10,6 +10,7 @@
   "author": "Juan Soto <juan@juansoto.me>",
   "license": "ISC",
   "dependencies": {
-    "budo": "^8.3.0"
+    "budo": "^8.3.0",
+    "plur": "^2.1.2"
   }
 }

examples/vanilla/index.html

@@ -0,0 +1,42 @@
+<html>
+    <head>
+        <title>Vanilla example</title>
+    </head>
+    <body>
+        <script src="../../dist/choo.min.js"></script>
+        <script>
+            const app = choo()
+
+            app.model({
+              namespace: 'counter',
+              state: {
+                  count: 0
+              },
+              reducers: {
+                increment: (data, state) => ({count: state.count + 1}),
+                decrement: (data, state) => ({count: state.count - 1})
+              }
+            })
+
+            const mainView = (state, prev, send) => {
+              return html`
+                <main class="app">
+                  <h1>Counter example</h1>
+                  <div>
+                      Count: ${state.counter.count}
+                      <button onclick=${(e) => send('counter:increment')}>+</button>
+                      <button onclick=${(e) => send('counter:decrement')}>-</button>
+                  </div>
+                </main>
+              `
+            }
+
+            app.router((route) => [
+              route('/', mainView)
+            ])
+
+            const tree = app.start()
+            document.body.appendChild(tree)
+        </script>
+    </body>
+</html>

index.js

@@ -6,6 +6,7 @@ const href = require('sheet-router/href')
 const hash = require('sheet-router/hash')
 const hashMatch = require('hash-match')
 const barracks = require('barracks')
+const nanoraf = require('nanoraf')
 const assert = require('assert')
 const xtend = require('xtend')
 const yo = require('yo-yo')
@@ -22,6 +23,7 @@ function choo (opts) {
   var _defaultRoute = null
   var _rootNode = null
   var _routes = null
+  var _frame = null
 
   start.toString = toString
   start.router = router
@@ -85,8 +87,13 @@ function choo (opts) {
       opts.onStateChange(data, state, prev, name, createSend)
     }
 
+    if (!_frame) {
+      _frame = nanoraf(function (state, prev) {
         const newTree = _router(state.location.pathname, state, prev)
         _rootNode = yo.update(_rootNode, newTree)
+      })
+    }
+    _frame(state, prev)
   }
 
   // register all routes on the router

package.json

@@ -1,17 +1,20 @@
 {
   "name": "choo",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "description": "A 5kb framework for creating sturdy frontend applications",
   "main": "index.js",
   "scripts": {
-    "deps": "dependency-check . && dependency-check . --extra --no-dev -i xhr",
+    "deps": "./scripts/test deps",
-    "test:electron": "browserify tests/**/*.js -t es2020 -p proxyquire-universal | tape-run",
+    "test:electron": "./scripts/test electron",
-    "test:cov": "browserify tests/**/*.js -t es2020 -p proxyquire-universal -p tape-istanbul/plugin | tape-run | tape-istanbul && istanbul report",
+    "test:cov": "./scripts/test cov",
-    "test:server": "standard && npm run deps && NODE_ENV=test node tests/server/*",
+    "test:server": "./scripts/test server",
-    "test:browser": "standard && npm run deps && NODE_ENV=test zuul tests/browser/*",
+    "test:browser": "./scripts/test browser",
-    "test:browser:local": "standard && npm run deps && NODE_ENV=test zuul --local 8080 -- tests/browser/*",
+    "test:browser-local": "./scripts/test browser-local",
     "preversion": "if [ ! -z $SKIP_TEST ]; then npm run test:browser; fi",
-    "test": "npm run test:electron"
+    "test": "npm run test:electron",
+    "build:dev": "./scripts/build dev",
+    "build:min": "./scripts/build min",
+    "prepublish": "npm run build:dev && npm run build:min"
   },
   "repository": "yoshuawuyts/choo",
   "keywords": [
@@ -22,12 +25,19 @@
     "composable",
     "tiny"
   ],
+  "files": [
+    "index.js",
+    "http.js",
+    "html.js",
+    "dist/"
+  ],
   "license": "MIT",
   "dependencies": {
     "barracks": "^8.0.0",
     "document-ready": "~1.0.2",
     "global": "^4.3.0",
     "hash-match": "^1.0.2",
+    "nanoraf": "^2.0.0",
     "sheet-router": "^3.1.0",
     "xhr": "^2.2.0",
     "xtend": "^4.0.1",
@@ -40,12 +50,16 @@
     "browserify-istanbul": "^2.0.0",
     "bundle-collapser": "^1.2.1",
     "dependency-check": "^2.5.1",
+    "disc": "^1.3.2",
+    "envify": "^3.4.1",
     "es2020": "^1.0.1",
     "geval": "~2.1.1",
+    "gzip-size-cli": "^1.0.0",
     "insert-css": "^0.2.0",
     "istanbul": "^0.4.4",
     "karma-sauce-launcher": "^1.0.0",
     "min-document": "~2.18.0",
+    "pretty-bytes-cli": "^1.0.0",
     "proxyquire": "~1.7.10",
     "proxyquire-universal": "~1.0.8",
     "proxyquireify": "~3.2.0",
@@ -56,6 +70,9 @@
     "tape": "^4.5.1",
     "tape-istanbul": "~1.0.2",
     "tape-run": "~2.1.4",
+    "uglifyify": "^3.0.2",
+    "uglifyjs": "^2.4.10",
+    "unassertify": "^2.0.3",
     "yo-yoify": "^3.1.0",
     "zuul": "toddself/zuul"
   }

scripts/build

@@ -0,0 +1,68 @@
+#!/bin/sh
+
+dirname=$(dirname "$(readlink -f "$0")")
+
+browserify="$dirname/../node_modules/.bin/browserify"
+uglify="$dirname/../node_modules/.bin/uglifyjs"
+
+usage () {
+  printf "Usage: build-umd <argument>\n"
+}
+
+# use zopfli for better compression if available
+gzip () {
+  zopfli -h 2>/dev/null
+  if [ $? -eq 0 ]; then
+    zopfli "$1" -i1000 -c
+  else
+    gzip -c "$1"
+  fi
+}
+
+build_dev () {
+  mkdir -p dist/
+  NODE_ENV=development "$browserify" index.js \
+    --standalone=choo \
+    -t envify \
+    -g yo-yoify \
+    -g es2020 \
+    > dist/choo.js
+}
+
+build_min () {
+  mkdir -p dist/
+  NODE_ENV=production "$browserify" index.js \
+    --standalone=choo \
+    -t envify \
+    -g unassertify \
+    -g yo-yoify \
+    -g es2020 \
+    -g uglifyify \
+    -t envify \
+    -p bundle-collapser/plugin \
+    | uglifyjs \
+    | "$uglify" \
+    > dist/choo.min.js
+}
+
+build_gz () {
+  build_min
+  gzip dist/choo.min.js > dist/choo.min.js.gz
+  cp dist/choo.min.js.gz dist/choo.gz
+}
+
+# parse CLI flags
+while true; do
+  case "$1" in
+    -h|--help) usage && exit 1 ;;
+    -- ) shift; break ;;
+    * ) break ;;
+  esac
+done
+
+case "$1" in
+  d|dev) shift; build_dev "$@" ;;
+  m|min) shift; build_min "$@" ;;
+  g|gzip) shift; build_gz "$@" ;;
+  *) shift; build_min "$@" ;;
+esac

scripts/instrument

@@ -1,5 +1,13 @@
 #!/bin/sh
 
+dirname=$(dirname "$(readlink -f "$0")")
+
+browserify="$dirname/../node_modules/.bin/browserify"
+uglify="$dirname/../node_modules/.bin/uglifyjs"
+pretty_bytes="$dirname/../node_modules/.bin/pretty-bytes"
+gzip_size="$dirname/../node_modules/.bin/gzip-size"
+discify="$dirname/../node_modules/.bin/discify"
+
 usage () {
 cat << USAGE
 script/test-size
@@ -10,45 +18,60 @@ script/test-size
 USAGE
 }
 
+# use zopfli for better compression if available
+gzip () {
+  zopfli -h 2>/dev/null
+  if [ $? -eq 0 ]; then
+    zopfli "$1" -i1000 -c | wc -c
+  else
+    "$gzip_size" < "$1"
+  fi
+}
+
 gzip_size () {
-  browserify index.js \
+  mkdir -p tmp/
+  "$browserify" index.js \
     -g unassertify \
     -g yo-yoify \
     -g es2020 \
     -g uglifyify \
     -p bundle-collapser/plugin \
-    | uglifyjs \
+    | "$uglify" \
-    | gzip-size \
+    > tmp/bundle.min.js
-    | pretty-bytes
+
+    gzip tmp/bundle.min.js | "$pretty_bytes"
+    rm -rf tmp/
 }
 
 min_size () {
-  browserify index.js \
+  "$browserify" index.js \
     -g unassertify \
     -g yo-yoify \
     -g es2020 \
     -g uglifyify \
     -p bundle-collapser/plugin \
-    | uglifyjs \
+    | "$uglify" \
     | wc -c \
-    | pretty-bytes
+    | "$pretty_bytes"
 }
 
 run_discify () {
-  browserify index.js --full-paths \
+  "$browserify" index.js --full-paths \
     -g unassertify \
     -g yo-yoify \
     -g es2020 \
     -g uglifyify \
-    | uglifyjs \
+    | "$uglify" \
-    | discify --open
+    | "$discify" --open
 }
 
 # set CLI flags
 getopt -T > /dev/null
 if [ "$?" -eq 4 ]; then
   args="$(getopt --long help discify minified --options hmdg -- "$*")"
-else args="$(getopt h "$*")"; fi
+else
+  args="$(getopt h "$*")";
+fi
 [ ! $? -eq 0 ] && { usage && exit 2; }
 eval set -- "$args"
 

scripts/test

@@ -0,0 +1,85 @@
+#!/bin/sh
+
+# setting exit because we're linting and need to exit on failure
+set -e
+
+dirname=$(dirname "$(readlink -f "$0")")
+
+dependency_check="$dirname/../node_modules/.bin/dependency-check"
+tape_istanbul="$dirname/../node_modules/.bin/tape-istanbul"
+browserify="$dirname/../node_modules/.bin/browserify"
+standard="$dirname/../node_modules/.bin/standard"
+tape_run="$dirname/../node_modules/.bin/tape-run"
+istanbul="$dirname/../node_modules/.bin/istanbul"
+zuul="$dirname/../node_modules/.bin/zuul"
+
+usage () {
+  printf "Usage: test\n"
+}
+
+lint () {
+  "$standard"
+}
+
+test_electron () {
+  check_deps
+  lint
+  "$browserify" tests/**/*.js \
+    -t es2020 \
+    -p proxyquire-universal \
+      | "$tape_run"
+}
+
+test_cov () {
+  check_deps
+  lint
+  "$browserify" tests/**/*.js \
+    -t es2020 \
+    -p proxyquire-universal \
+    -p tape-istanbul/plugin \
+      | "$tape_run" \
+      | "$tape_istanbul" \
+      && "$istanbul" report
+}
+
+test_server () {
+  lint
+  standard
+  check_deps
+  NODE_ENV=test node tests/server/*
+}
+
+test_browser () {
+  NODE_ENV=test "$zuul" tests/browser/*
+}
+
+test_browser_local () {
+  lint
+  check_deps
+  NODE_ENV=test "$zuul" --local 8080 -- tests/browser/*
+}
+
+check_deps () {
+  "$dependency_check" . --entry 'index.js'
+  "$dependency_check" . --entry 'index.js' --extra --no-dev \
+    -i xhr
+}
+
+# set CLI flags
+# parse CLI flags
+while true; do
+  case "$1" in
+    -h|--help) usage && exit 1 ;;
+    -- ) shift; break ;;
+    * ) break ;;
+  esac
+done
+
+case "$1" in
+  e|electron) shift; test_electron "$@" && exit ;;
+  b|browser) shift; test_browser "$@" && exit ;;
+  l|browser-local) shift; test_browser_local "$@" && exit ;;
+  s|server) shift; test_server "$@" && exit ;;
+  c|cov) shift; test_cov "$@" && exit ;;
+  d|deps) shift; check_deps "$@" && exit ;;
+esac

tests/browser/hooks.js

@@ -15,7 +15,7 @@ test('hooks', function (t) {
       t.deepEqual(action, {foo: 'bar'}, 'onAction: action data')
       t.equal(state.clicks, 0, 'onAction: current state: 0 clicks')
       t.equal(name, 'click', 'onAction: action name')
-      t.equal(caller, '/', 'onAction: caller name')
+      t.equal(caller, 'view: /', 'onAction: caller name')
       t.equal(typeof createSend, 'function', 'onAction: createSend fn')
     },
     onStateChange: function (action, state, prev, createSend) {