Merge pull request #111 from yoshuawuyts/change-view-arguments

Change view arguments

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`

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`

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
 

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>

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

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>

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) || '/'}

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>
   `

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>
   `
 }

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>
   `

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
 

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>

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)
       })
     }
   }

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",

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!')
       })
     ])