examples/server -> examples/server-rendering

examples/server-rendering/client.js

@@ -0,0 +1,16 @@
+const choo = require('../../')
+
+const mainView = require('./views/main')
+
+const app = choo()
+
+app.router((route) => [
+  route('/', mainView)
+])
+
+if (module.parent) {
+  module.exports = app
+} else {
+  const tree = app.start()
+  document.body.appendChild(tree)
+}

examples/server-rendering/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/server-rendering/server.js

@@ -0,0 +1,34 @@
+const serverRouter = require('server-router')
+const http = require('http')
+
+const PORT = 8080
+const client = require('./client')
+
+// If an incoming request accepts "text/html", render the
+// appropriate HTML. Else use the API server
+const apiRouter = createRouter()
+const server = http.createServer(function (req, res) {
+  if (/text\/html/.test(req.headers.accept)) handleHtml(req, res)
+  else apiRouter(req, res)
+})
+server.listen(PORT, () => process.stdout.write(`listening on port ${PORT}\n`))
+
+// create a new router
+// null -> fn
+function createRouter () {
+  const apiRouter = serverRouter('/404')
+  apiRouter.on('/404', (req, res) => res.end('not found'))
+  apiRouter.on('/', (req, res) => {
+    res.end(JSON.stringify({ routes: [ '/', '/404' ] }))
+  })
+  return apiRouter
+}
+
+// render the client to string
+// based on the requested url
+// (obj, obj) -> null
+function handleHtml (req, res) {
+  const html = client.toString(req.url, { message: 'hello server!' })
+  res.setHeader('Content-Type', 'text/html; charset=utf-8')
+  res.end(html)
+}

examples/server-rendering/views/main.js

@@ -0,0 +1,10 @@
+const choo = require('../../../')
+
+module.exports = function (params, state, send) {
+  const message = state.message
+  return choo.view`
+    <section>
+      <h1>${message}</h1>
+    </section>
+  `
+}