Merge branch 'master' into stopwatch

README.md

@@ -100,8 +100,8 @@
 ## Demos
 - :truck: [Input example](http://requirebin.com/?gist=e589473373b3100a6ace29f7bbee3186)
   ([repo](examples/title/))
-- :water_buffalo: [HTTP effects example](https://hyperdev.com/#!/project/fork-fang)
+- :water_buffalo: [HTTP effects example](https://fork-fang.hyperdev.space/)
-  ([repo](https://fork-fang.hyperdev.space/))
+  ([repo](https://hyperdev.com/#!/project/fork-fang))
 - :mailbox: [Mailbox routing](examples/mailbox/)
 - :ok_hand: [TodoMVC](http://shuheikagawa.com/todomvc-choo/)
   ([repo](https://github.com/shuhei/todomvc-choo))
@@ -283,6 +283,27 @@ Examples of effects include: performing
 (server requests), calling multiple `reducers`, persisting state to
 [localstorage][localstorage].
 
+```js
+const http = require('choo/http')
+const choo = require('choo')
+const app = choo()
+app.model({
+  namespace: 'todos',
+  state: { items: [] },
+  effects: {
+    addAndSave: (data, state, send, done) => {
+      http.post('/todo', {body: data.payload, json: true}, (err, res, body) => {
+        data.payload.id = body.id
+        send('todos:add', data, done)
+      })
+    }
+  },
+  reducers: {
+    add: (data, state) => ({ items: state.items.concat(data.payload) })
+  }
+})
+```
+
 When an `effect` is done executing, it should call the `done(err, res)`
 callback. This callback used to communicate when an `effect` is done, handle
 possible errors and send values back to the caller. You'll probably notice when

examples/async-counter/client.js

@@ -0,0 +1,44 @@
+const choo = require('../../')
+const html = require('../../html')
+const plur = require('plur')
+
+const app = choo()
+app.model({
+  state: {
+    counter: 0
+  },
+  reducers: {
+    increment: (data, state) => ({ counter: state.counter + 1 }),
+    decrement: (data, state) => ({ counter: state.counter - 1 })
+  },
+  effects: {
+    incrementAsync: function (data, state, send, done) {
+      setTimeout(() => send('increment', done), 1000)
+    },
+    decrementAsync: function (data, state, send, done) {
+      setTimeout(() => send('decrement', done), 1000)
+    }
+  }
+})
+
+const mainView = (state, prev, send) => {
+  const count = state.counter;
+
+  return html`
+    <main class="app">
+      <h1>Async counter</h1>
+      <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>
+      <button onclick=${() => send('decrementAsync')}>Decrement async</button>
+    </main>
+  `
+}
+
+app.router((route) => [
+  route('/', mainView)
+])
+
+const tree = app.start()
+document.body.appendChild(tree)

examples/async-counter/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "cancellable-counter",
+  "version": "1.0.0",
+  "description": "",
+  "main": "client.js",
+  "scripts": {
+    "start": "budo client.js -p 8080"
+  },
+  "keywords": [],
+  "author": "Juan Soto <juan@juansoto.me>",
+  "license": "ISC",
+  "dependencies": {
+    "budo": "^8.3.0",
+    "plur": "^2.1.2"
+  }
+}

examples/vanilla/index.html

@@ -13,13 +13,13 @@
                   count: 0
               },
               reducers: {
-                increment: (action, state) => ({count: state.count + 1}),
+                increment: (data, state) => ({count: state.count + 1}),
-                decrement: (action, state) => ({count: state.count - 1})
+                decrement: (data, state) => ({count: state.count - 1})
               }
             })
 
-            const mainView = (params, state, send) => {
+            const mainView = (state, prev, send) => {
-              return choo.view`
+              return html`
                 <main class="app">
                   <h1>Counter example</h1>
                   <div>

index.js

@@ -47,7 +47,7 @@ function choo (opts) {
 
     function createSend () {
       return function send () {
-        assert.fail('choo: send() cannot be called from Node')
+        assert.ok(false, 'choo: send() cannot be called from Node')
       }
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choo",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "A 5kb framework for creating sturdy frontend applications",
   "main": "index.js",
   "scripts": {
@@ -14,7 +14,10 @@
     "test": "npm run test:electron",
     "build:dev": "./scripts/build dev",
     "build:min": "./scripts/build min",
-    "prepublish": "npm run build:dev && npm run build:min"
+    "prepublish": "npm run build:dev && npm run build:min",
+    "instrument:discify": "./scripts/instrument discify",
+    "instrument:minified": "./scripts/instrument minified",
+    "instrument:gzip": "./scripts/instrument gzip"
   },
   "repository": "yoshuawuyts/choo",
   "keywords": [
@@ -37,7 +40,7 @@
     "document-ready": "~1.0.2",
     "global": "^4.3.0",
     "hash-match": "^1.0.2",
-    "nanoraf": "^2.0.0",
+    "nanoraf": "^2.1.1",
     "sheet-router": "^3.1.0",
     "xhr": "^2.2.0",
     "xtend": "^4.0.1",
@@ -57,7 +60,6 @@
     "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",

scripts/build

@@ -1,10 +1,5 @@
 #!/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"
 }
@@ -21,7 +16,7 @@ gzip () {
 
 build_dev () {
   mkdir -p dist/
-  NODE_ENV=development "$browserify" index.js \
+  NODE_ENV=development browserify index.js \
     --standalone=choo \
     -t envify \
     -g yo-yoify \
@@ -31,7 +26,7 @@ build_dev () {
 
 build_min () {
   mkdir -p dist/
-  NODE_ENV=production "$browserify" index.js \
+  NODE_ENV=production browserify index.js \
     --standalone=choo \
     -t envify \
     -g unassertify \
@@ -41,7 +36,6 @@ build_min () {
     -t envify \
     -p bundle-collapser/plugin \
     | uglifyjs \
-    | "$uglify" \
     > dist/choo.min.js
 }
 

scripts/instrument

@@ -1,13 +1,5 @@
 #!/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
@@ -24,45 +16,45 @@ gzip () {
   if [ $? -eq 0 ]; then
     zopfli "$1" -i1000 -c | wc -c
   else
-    "$gzip_size" < "$1"
+    gzip-size < "$1"
   fi
 }
 
 gzip_size () {
   mkdir -p tmp/
-  "$browserify" index.js \
+  browserify index.js \
     -g unassertify \
     -g yo-yoify \
     -g es2020 \
     -g uglifyify \
     -p bundle-collapser/plugin \
-    | "$uglify" \
+    | uglifyjs \
     > tmp/bundle.min.js
 
-    gzip 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 \
-    | "$uglify" \
+    | uglifyjs \
     | 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 \
-    | "$uglify" \
+    | uglifyjs \
-    | "$discify" --open
+    | discify --open
 }
 
 # set CLI flags

scripts/test

@@ -3,43 +3,33 @@
 # 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"
+  standard
 }
 
 test_electron () {
   check_deps
   lint
-  "$browserify" tests/**/*.js \
+  browserify tests/**/*.js \
     -t es2020 \
     -p proxyquire-universal \
-      | "$tape_run"
+      | tape-run
 }
 
 test_cov () {
   check_deps
   lint
-  "$browserify" tests/**/*.js \
+  browserify tests/**/*.js \
     -t es2020 \
     -p proxyquire-universal \
     -p tape-istanbul/plugin \
-      | "$tape_run" \
+      | tape-run \
-      | "$tape_istanbul" \
+      | tape-istanbul \
-      && "$istanbul" report
+      && istanbul report
 }
 
 test_server () {
@@ -50,18 +40,18 @@ test_server () {
 }
 
 test_browser () {
-  NODE_ENV=test "$zuul" tests/browser/*
+  NODE_ENV=test zuul tests/browser/*
 }
 
 test_browser_local () {
   lint
   check_deps
-  NODE_ENV=test "$zuul" --local 8080 -- tests/browser/*
+  NODE_ENV=test zuul --local 8080 -- tests/browser/*
 }
 
 check_deps () {
-  "$dependency_check" . --entry 'index.js'
+  dependency-check . --entry 'index.js'
-  "$dependency_check" . --entry 'index.js' --extra --no-dev \
+  dependency-check . --entry 'index.js' --extra --no-dev \
     -i xhr
 }