toString: support rehydration

examples/server-rendering/client.js

@@ -4,6 +4,14 @@ const mainView = require('./views/main')
 
 const app = choo()
 
+app.model({
+  namespace: 'message',
+  state: {
+    server: 'rehydration has kicked in, server data was tossed',
+    client: 'hello client!'
+  }
+})
+
 app.router((route) => [
   route('/', mainView)
 ])
@@ -11,6 +19,5 @@ app.router((route) => [
 if (module.parent) {
   module.exports = app
 } else {
-  const tree = app.start()
-  document.body.appendChild(tree)
+  app.start('#app-root')
 }

examples/server-rendering/package.json

@@ -7,7 +7,9 @@
   },
   "dependencies": {
     "bankai": "^2.0.2",
+    "bl": "^1.1.2",
     "browserify": "^13.0.1",
+    "hyperstream": "^1.2.2",
     "server-router": "^2.1.0"
   }
 }

examples/server-rendering/server.js

@@ -1,4 +1,7 @@
 const serverRouter = require('server-router')
+const hyperstream = require('hyperstream')
+const browserify = require('browserify')
+const bankai = require('bankai')
 const http = require('http')
 
 const PORT = 8080
@@ -17,18 +20,26 @@ server.listen(PORT, () => process.stdout.write(`listening on port ${PORT}\n`))
 // 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' ] }))
-  })
+
+  apiRouter.on('/404', (req, res) => res.end('404 not found'))
+  apiRouter.on('/', (req, res) => res.end('nothing to be found here'))
+
+  const js = bankai.js(browserify, require.resolve('./client.js'))
+  apiRouter.on('/bundle.js', (req, res) => js(req, res).pipe(res))
+
   return apiRouter
 }
 
 // render the client to string
 // based on the requested url
 // (obj, obj) -> null
+const createIndex = bankai.html({ favicon: false, css: false })
 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)
+
+  const state = { message: { server: 'hello server!' } }
+  const inner = client.toString(req.url, state)
+  const hs = hyperstream({ 'body': { _appendHtml: inner } })
+
+  createIndex(req, res).pipe(hs).pipe(res)
 }

examples/server-rendering/views/main.js

@@ -1,10 +1,25 @@
+const assert = require('assert')
 const choo = require('../../../')
 
 module.exports = function (params, state, send) {
-  const message = state.message
+  const serverMessage = state.message.server
+  const clientMessage = state.message.client
+
+  assert.equal(typeof serverMessage, 'string', 'server should be a string')
+  assert.equal(typeof clientMessage, 'string', 'server should be a string')
+
   return choo.view`
-    <section>
-      <h1>${message}</h1>
+    <section id="app-root">
+      <h1>server message: ${serverMessage}</h1>
+      <h1>client message: ${clientMessage}</h1>
+      <p>${`
+        The first message is passed in by the server on compile time,
+        the second message was set by the client.
+        The more static the data you pass in, the more cachable your site
+        beocmes (and thus performant). Try and keep the amount of properties
+        you pass in on the server to a minimum for most applications - it'll
+        make life a lot easier in the long run, hah.
+      `}</p>
     </section>
   `
 }