Merge branch 'master' into stopwatch

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