Merge pull request #149 from sotojuan/async-counter

Add async counter example

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 <[email protected]>",
+  "license": "ISC",
+  "dependencies": {
+    "budo": "^8.3.0",
+    "plur": "^2.1.2"
+  }
+}