http: add

examples/http/client.js

@@ -0,0 +1,15 @@
+const choo = require('../../')
+
+const mainView = require('./views/main')
+
+const app = choo()
+
+app.model(require('./models/error'))
+app.model('api', require('./models/api'))
+
+app.router((route) => [
+  route('/', mainView)
+])
+
+const tree = app.start()
+document.body.appendChild(tree)

examples/http/models/api.js

@@ -0,0 +1,45 @@
+const http = require('../../../http')
+
+module.exports = {
+  state: {
+    title: 'Button pushing machine 3000'
+  },
+  reducers: {
+    set: function (action, state) {
+      return { 'api:title': action.payload }
+    }
+  },
+  effects: {
+    good: performGoodRequest,
+    bad: performBadRequest
+  }
+}
+
+function performGoodRequest (action, state, send) {
+  http('/good', { json: true }, function (err, res, body) {
+    if (err) return send('error', { payload: 'HTTP error' })
+    if (res.statusCode !== 200) {
+      return send('error', { payload: body.payload })
+    }
+    if (!body) {
+      return send('error', { payload: 'fatal: no body received' })
+    }
+    send('api:set', { payload: body.message })
+  })
+}
+
+function performBadRequest (action, state, send) {
+  http('/bad', { json: true }, function (err, res, body) {
+    if (err) return send('error', { payload: 'HTTP error' })
+    if (res.statusCode !== 200) {
+      const message = (body && body.message)
+          ? body.message
+          : 'unknown server error'
+      return send('error', { payload: message })
+    }
+    if (!body) {
+      return send('error', { payload: 'fatal: no body received' })
+    }
+    send('api:set', { payload: body.title })
+  })
+}

examples/http/models/error.js

@@ -0,0 +1,42 @@
+// Create a new error. Errors are pushed into an array so they can be
+// queued. We're doing a bit of timestamp trickery here so each error
+// is shown for exactly one second before being dropped. Probably
+// useful for real world scenarios; especially when coupled to
+// fancy CSS animation thingies
+
+// Each error is displayed 1 second
+const ERROR_TIMEOUT = 1000
+
+module.exports = {
+  state: {
+    error: [],
+    errorTimeDone: null,
+    triggerTime: null
+  },
+  reducers: {
+    error: function (action, state) {
+      const now = Date.now()
+      const timeDone = state.errorTimeDone
+      const newTimestamp = (timeDone && timeDone >= now)
+        ? timeDone + ERROR_TIMEOUT
+        : now + ERROR_TIMEOUT
+
+      return {
+        error: state.error.concat(action.payload),
+        errorTimeDone: newTimestamp
+      }
+    },
+    'error:delete': function (action, state) {
+      state.error.shift()
+      return { error: state.error }
+    }
+  },
+  effects: {
+    error: function (action, state, send) {
+      const timeout = state.errorTimeDone - Date.now()
+      setTimeout(function () {
+        send('error:delete')
+      }, timeout)
+    }
+  }
+}

examples/http/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "http",
+  "private": true,
+  "main": "client.js",
+  "scripts": {
+    "start": "NODE_ENV=development node server.js"
+  },
+  "dependencies": {
+    "bankai": "^2.0.2",
+    "browserify": "^13.0.1",
+    "server-router": "^2.1.0"
+  }
+}

examples/http/server.js

@@ -0,0 +1,45 @@
+const serverRouter = require('server-router')
+const browserify = require('browserify')
+const bankai = require('bankai')
+const http = require('http')
+
+const PORT = 8080
+
+const server = http.createServer(createRouter())
+server.listen(PORT, () => console.log(`listening on port ${PORT}`))
+
+var index = 0
+const errors = [
+  'a giant robot invaded robot town!',
+  'something weird crawled out of the swamp',
+  'oh no, the bear people invaded the server!',
+  'the NSA',
+  '12 goats started a band',
+  'we kinda just gave up'
+]
+
+function createRouter () {
+  const router = serverRouter('/404')
+
+  const html = bankai.html({ css: false })
+  router.on('/', (req, res) => html(req, res).pipe(res))
+
+  const js = bankai.js(browserify, require.resolve('./client.js'))
+  router.on('/bundle.js', (req, res) => js(req, res).pipe(res))
+
+  router.on('/good', (req, res) => {
+    res.end('{ "message": "all is well in robo town!" }')
+  })
+
+  router.on('/bad', (req, res) => {
+    res.statusCode = 500
+    res.end(`{ "message": "${errors[index++ % (errors.length)]}" }`)
+  })
+
+  router.on('/404', (req, res) => {
+    res.statusCode = 404
+    res.end('{ "message": "the server is confused" }')
+  })
+
+  return router
+}

examples/http/views/main.js

@@ -0,0 +1,12 @@
+const choo = require('../../../')
+
+module.exports = function (params, state, send) {
+  return choo.view`
+    <section>
+      <h1>${state['api:title']}</h1>
+      <h2>Latest error: ${state.error[0]}</h2>
+      <button onclick=${(e) => send('api:good')}>OK!</button>
+      <button onclick=${(e) => send('api:bad')}>Naughty</button>
+    </section>
+  `
+}