Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change view arguments #111

Merged
merged 1 commit into from
Jul 2, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/http/views/main.js
Original file line number Diff line number Diff line change
@@ -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`
Expand Down
3 changes: 2 additions & 1 deletion examples/mailbox/elements/email-list.js
Original file line number Diff line number Diff line change
@@ -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`
Expand Down
3 changes: 2 additions & 1 deletion examples/mailbox/elements/email.js
Original file line number Diff line number Diff line change
@@ -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

Expand Down
2 changes: 1 addition & 1 deletion examples/mailbox/elements/empty-mailbox.js
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 2 additions & 1 deletion examples/mailbox/elements/mailbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion examples/mailbox/elements/nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions examples/mailbox/elements/pathname.js
Original file line number Diff line number Diff line change
@@ -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) || '/'}
Expand Down
10 changes: 5 additions & 5 deletions examples/mailbox/views/email.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`
Expand Down
8 changes: 4 additions & 4 deletions examples/mailbox/views/empty.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`
}
8 changes: 4 additions & 4 deletions examples/mailbox/views/mailbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`
Expand Down
2 changes: 1 addition & 1 deletion examples/server-rendering/views/main.js
Original file line number Diff line number Diff line change
@@ -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

Expand Down
2 changes: 1 addition & 1 deletion examples/title/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
74 changes: 53 additions & 21 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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)
})
}
Expand All @@ -75,34 +83,58 @@ 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
// (str?, obj) -> null
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
Expand All @@ -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
Expand All @@ -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)
})
}
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions tests/server/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
})
])
Expand All @@ -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>`
})
])
Expand All @@ -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>
`
Expand All @@ -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!')
})
])
Expand All @@ -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!')
})
])
Expand Down