From 6407188ee9a3297cb25d998a5b3d6adc2f1e9cba Mon Sep 17 00:00:00 2001
From: Yoshua Wuyts <i@yoshuawuyts.com>
Date: Sat, 2 Jul 2016 00:13:13 +0200
Subject: [PATCH] router: change order of arguments

fixup! freeze state & rename app ns to location
---
 examples/http/views/main.js                |  2 +-
 examples/mailbox/elements/email-list.js    |  3 +-
 examples/mailbox/elements/email.js         |  3 +-
 examples/mailbox/elements/empty-mailbox.js |  2 +-
 examples/mailbox/elements/mailbox.js       |  3 +-
 examples/mailbox/elements/nav.js           |  2 +-
 examples/mailbox/elements/pathname.js      |  4 +-
 examples/mailbox/views/email.js            | 10 +--
 examples/mailbox/views/empty.js            |  8 +--
 examples/mailbox/views/mailbox.js          |  8 +--
 examples/server-rendering/views/main.js    |  2 +-
 examples/title/client.js                   |  2 +-
 index.js                                   | 74 ++++++++++++++++------
 package.json                               |  2 +-
 tests/server/index.js                      | 10 +--
 15 files changed, 85 insertions(+), 50 deletions(-)

diff --git a/examples/http/views/main.js b/examples/http/views/main.js
index 0811c694..989af233 100644
--- a/examples/http/views/main.js
+++ b/examples/http/views/main.js
@@ -1,6 +1,6 @@
 const html = require('../../../html')
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
   const error = state.app.errors[0]
   const title = state.api.title
   return html`
diff --git a/examples/mailbox/elements/email-list.js b/examples/mailbox/elements/email-list.js
index e964108f..be25b8bc 100644
--- a/examples/mailbox/elements/email-list.js
+++ b/examples/mailbox/elements/email-list.js
@@ -1,7 +1,8 @@
 const dateformat = require('dateformat')
 const html = require('../../../html')
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
+  const params = state.params
   const mailbox = params.mailbox
   const messages = state[mailbox].messages
   return html`
diff --git a/examples/mailbox/elements/email.js b/examples/mailbox/elements/email.js
index ec2624b4..3f7efb75 100644
--- a/examples/mailbox/elements/email.js
+++ b/examples/mailbox/elements/email.js
@@ -1,6 +1,7 @@
 const html = require('../../../html')
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
+  const params = state.params
   const mailbox = params.mailbox
   const message = params.message
 
diff --git a/examples/mailbox/elements/empty-mailbox.js b/examples/mailbox/elements/empty-mailbox.js
index 395685d1..a6d6d31b 100644
--- a/examples/mailbox/elements/empty-mailbox.js
+++ b/examples/mailbox/elements/empty-mailbox.js
@@ -1,6 +1,6 @@
 const html = require('../../../html')
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
   return html`
     <section>
       <p>Select a mailbox</p>
diff --git a/examples/mailbox/elements/mailbox.js b/examples/mailbox/elements/mailbox.js
index 8accf8db..434d3bf0 100644
--- a/examples/mailbox/elements/mailbox.js
+++ b/examples/mailbox/elements/mailbox.js
@@ -2,7 +2,8 @@ const dateformat = require('dateformat')
 const html = require('../../../html')
 
 module.exports = function () {
-  return function (params, state, send) {
+  return function (state, prev, send) {
+    const params = state.params
     const mailbox = params.mailbox
     const message = params.message
     const messages = state[mailbox].messages
diff --git a/examples/mailbox/elements/nav.js b/examples/mailbox/elements/nav.js
index a85b3d3a..5a056f06 100644
--- a/examples/mailbox/elements/nav.js
+++ b/examples/mailbox/elements/nav.js
@@ -2,7 +2,7 @@ const html = require('../../../html')
 
 const mailboxes = [ 'inbox', 'spam', 'sent' ]
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
   return html`
     <aside class="fl mt4 w-20 db">
       <ul>
diff --git a/examples/mailbox/elements/pathname.js b/examples/mailbox/elements/pathname.js
index 4d7220a0..2c654929 100644
--- a/examples/mailbox/elements/pathname.js
+++ b/examples/mailbox/elements/pathname.js
@@ -1,8 +1,8 @@
 const pathname = require('pathname-match')
 const html = require('../../../html')
 
-module.exports = function (params, state, send) {
-  const location = state.app.location
+module.exports = function (state, prev, send) {
+  const location = state.location.pathname
   return html`
     <span class="fl mt4 w-100 f4 b">
       URL: ${pathname(location) || '/'}
diff --git a/examples/mailbox/views/email.js b/examples/mailbox/views/email.js
index 0c009dc5..36aa99d3 100644
--- a/examples/mailbox/views/email.js
+++ b/examples/mailbox/views/email.js
@@ -5,14 +5,14 @@ const pathname = require('../elements/pathname')
 const email = require('../elements/email')
 const nav = require('../elements/nav')
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
   return html`
     <main class="mw5 mw7-ns center cf">
-      ${pathname(params, state, send)}
-      ${nav(params, state, send)}
+      ${pathname(state, prev, send)}
+      ${nav(state, prev, send)}
       <section class="fl mt4 w-80 db">
-        ${emailList(params, state, send)}
-        ${email(params, state, send)}
+        ${emailList(state, prev, send)}
+        ${email(state, prev, send)}
       </section>
     </main>
   `
diff --git a/examples/mailbox/views/empty.js b/examples/mailbox/views/empty.js
index d0190751..d008507a 100644
--- a/examples/mailbox/views/empty.js
+++ b/examples/mailbox/views/empty.js
@@ -4,12 +4,12 @@ const empty = require('../elements/empty-mailbox')
 const pathname = require('../elements/pathname')
 const nav = require('../elements/nav')
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
   return html`
     <main class="mw5 mw7-ns center cf">
-      ${pathname(params, state, send)}
-      ${nav(params, state, send)}
-      ${empty(params, state, send)}
+      ${pathname(state, prev, send)}
+      ${nav(state, prev, send)}
+      ${empty(state, prev, send)}
     </main>
   `
 }
diff --git a/examples/mailbox/views/mailbox.js b/examples/mailbox/views/mailbox.js
index 5e84d964..1fb173ea 100644
--- a/examples/mailbox/views/mailbox.js
+++ b/examples/mailbox/views/mailbox.js
@@ -4,13 +4,13 @@ const emailList = require('../elements/email-list')
 const pathname = require('../elements/pathname')
 const nav = require('../elements/nav')
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
   return html`
     <main class="mw5 mw7-ns center cf">
-      ${pathname(params, state, send)}
-      ${nav(params, state, send)}
+      ${pathname(state, prev, send)}
+      ${nav(state, prev, send)}
       <section class="fl mt4 w-80 db">
-        ${emailList(params, state, send)}
+        ${emailList(state, prev, send)}
       </section>
     </main>
   `
diff --git a/examples/server-rendering/views/main.js b/examples/server-rendering/views/main.js
index 2dc8b225..f59e9abc 100644
--- a/examples/server-rendering/views/main.js
+++ b/examples/server-rendering/views/main.js
@@ -1,7 +1,7 @@
 const assert = require('assert')
 const html = require('../../../html')
 
-module.exports = function (params, state, send) {
+module.exports = function (state, prev, send) {
   const serverMessage = state.message.server
   const clientMessage = state.message.client
 
diff --git a/examples/title/client.js b/examples/title/client.js
index af806e27..3ea603dc 100644
--- a/examples/title/client.js
+++ b/examples/title/client.js
@@ -15,7 +15,7 @@ app.model({
   }
 })
 
-const mainView = (params, state, send) => {
+const mainView = (state, prev, send) => {
   return html`
     <main class="app">
       <h1>${state.input.title}</h1>
diff --git a/index.js b/index.js
index 1e3848ff..7826ff5e 100644
--- a/index.js
+++ b/index.js
@@ -16,9 +16,11 @@ module.exports = choo
 function choo (opts) {
   opts = opts || {}
 
-  const _store = barracks(xtend(opts, { onState: render }))
+  const _store = start._store = barracks(xtend(opts, { onState: render }))
+  var _router = start._router = null
+  var _defaultRoute = null
   var _rootNode = null
-  var _router = null
+  var _routes = null
 
   start.toString = toString
   start.router = router
@@ -34,11 +36,17 @@ function choo (opts) {
     assert.equal(typeof route, 'string', 'choo.app.toString: route must be a string')
     assert.equal(typeof serverState, 'object', 'choo.app.toString: serverState must be an object')
     _store.start({ noSubscriptions: true, noReducers: true, noEffects: true })
+
     const state = _store.state({ state: serverState })
-    const tree = _router(route, state, function () {
-      assert.fail('choo: send() cannot be called from Node')
-    })
+    const router = createRouter(_defaultRoute, _routes, createSend)
+    const tree = router(route, state)
     return tree.toString()
+
+    function createSend () {
+      return function send () {
+        assert.fail('choo: send() cannot be called from Node')
+      }
+    }
   }
 
   // start the application
@@ -52,18 +60,18 @@ function choo (opts) {
 
     _store.model(appInit(startOpts))
     const createSend = _store.start(startOpts)
-    const send = createSend('view', true)
+    _router = start._router = createRouter(_defaultRoute, _routes, createSend)
     const state = _store.state()
 
     if (!selector) {
-      const tree = _router(state.app.location, state, send)
+      const tree = _router(state.location.pathname, state)
       _rootNode = tree
       return tree
     } else {
       document.addEventListener('DOMContentLoaded', function (event) {
         const oldTree = document.querySelector(selector)
         assert.ok(oldTree, 'could not query selector: ' + selector)
-        const newTree = _router(state.app.location, state, send)
+        const newTree = _router(state.location.pathname, state)
         _rootNode = yo.update(oldTree, newTree)
       })
     }
@@ -75,17 +83,15 @@ function choo (opts) {
     if (opts.onState) opts.onState(action, state, prev, name, createSend)
     if (state === prev) return
 
-    // note(yw): only here till sheet-router supports custom constructors
-    const send = createSend('view', true)
-    const newTree = _router(state.app.location, state, send, prev)
+    const newTree = _router(state.location.pathname, state, prev)
     _rootNode = yo.update(_rootNode, newTree)
   }
 
   // register all routes on the router
   // (str?, [fn|[fn]]) -> obj
-  function router (defaultRoute, cb) {
-    _router = sheetRouter(defaultRoute, cb)
-    return _router
+  function router (defaultRoute, routes) {
+    _defaultRoute = defaultRoute
+    _routes = routes
   }
 
   // create a new model
@@ -93,16 +99,42 @@ function choo (opts) {
   function model (model) {
     _store.model(model)
   }
+
+  // create a new router with a custom `createRoute()` function
+  // (str?, obj, fn?) -> null
+  function createRouter (defaultRoute, routes, createSend) {
+    var prev = {}
+    return sheetRouter(defaultRoute, routes, createRoute)
+
+    function createRoute (routeFn) {
+      return function (route, inline, child) {
+        if (typeof inline === 'function') {
+          inline = wrap(inline, route)
+        }
+        return routeFn(route, inline, child)
+      }
+
+      function wrap (child, route) {
+        const send = createSend(route, true)
+        return function chooWrap (params, state) {
+          const nwPrev = prev
+          const nwState = prev = xtend(state, { params: params })
+          if (!opts.noFreeze) Object.freeze(nwState)
+          return child(nwState, nwPrev, send)
+        }
+      }
+    }
+  }
 }
 
 // initial application state model
 // obj -> obj
 function appInit (opts) {
   const loc = document.location
-  const state = { location: (opts.hash) ? hashMatch(loc.hash) : loc.href }
+  const state = { pathname: (opts.hash) ? hashMatch(loc.hash) : loc.href }
   const reducers = {
-    location: function setLocation (action, state) {
-      return { location: action.location.replace(/#.*/, '') }
+    setLocation: function setLocation (action, state) {
+      return { pathname: action.location.replace(/#.*/, '') }
     }
   }
   // if hash routing explicitly enabled, subscribe to it
@@ -114,12 +146,12 @@ function appInit (opts) {
       })
     }, 'handleHash', subs)
   } else {
-    if (opts.history !== false) pushLocationSub(history, 'setLocation', subs)
+    if (opts.history !== false) pushLocationSub(history, 'handleHistory', subs)
     if (opts.href !== false) pushLocationSub(href, 'handleHref', subs)
   }
 
   return {
-    namespace: 'app',
+    namespace: 'location',
     subscriptions: subs,
     reducers: reducers,
     state: state
@@ -130,8 +162,8 @@ function appInit (opts) {
   // (fn, obj) -> null
   function pushLocationSub (cb, key, model) {
     model[key] = function (send, done) {
-      cb(function navigate (href) {
-        send('app:location', { location: href }, done)
+      cb(function navigate (pathname) {
+        send('location:setLocation', { location: pathname }, done)
       })
     }
   }
diff --git a/package.json b/package.json
index dbea8fab..d57e6207 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "sheet-router": "^3.1.0",
     "xhr": "^2.2.0",
     "xtend": "^4.0.1",
-    "yo-yo": "^1.2.0"
+    "yo-yo": "^1.2.2"
   },
   "devDependencies": {
     "bankai": "^2.0.2",
diff --git a/tests/server/index.js b/tests/server/index.js
index ac5417b6..c4e4a675 100644
--- a/tests/server/index.js
+++ b/tests/server/index.js
@@ -21,7 +21,7 @@ tape('should render on the server', function (t) {
 
     const app = choo()
     app.router((route) => [
-      route('/', function (params, state) {
+      route('/', function (state, prev, send) {
         return view`<h1>meow meow ${state.message}</h1>`
       })
     ])
@@ -37,7 +37,7 @@ tape('should render on the server', function (t) {
     const app = choo()
     app.model({ state: { bin: 'baz', beep: 'boop' } })
     app.router((route) => [
-      route('/', function (params, state) {
+      route('/', function (state, prev, send) {
         return view`<h1>${state.foo} ${state.bin} ${state.beep}</h1>`
       })
     ])
@@ -57,7 +57,7 @@ tape('should render on the server', function (t) {
       state: { bin: 'baz', beep: 'boop' }
     })
     app.router((route) => [
-      route('/', function (params, state) {
+      route('/', function (state, prev, send) {
         return view`
           <h1>${state.hello.foo} ${state.hello.bin} ${state.hello.beep}</h1>
         `
@@ -80,7 +80,7 @@ tape('should render on the server', function (t) {
 
     const app = choo()
     app.router((route) => [
-      route('/', function (params, state, send) {
+      route('/', function (state, prev, send) {
         send('hey!')
       })
     ])
@@ -93,7 +93,7 @@ tape('should render on the server', function (t) {
 
     const app = choo()
     app.router((route) => [
-      route('/', function (params, state, send) {
+      route('/', function (state, prev, send) {
         send('hey!')
       })
     ])