resolve hook in router
This commit is contained in:
Leo Horie
parent
b3d784d841
commit
a6c56ff6b9
10 changed files with 599 additions and 319 deletions
|
|
@ -1,14 +1,27 @@
|
|||
"use strict"
|
||||
|
||||
var coreRenderer = require("../render/render")
|
||||
var Node = require("../render/node")
|
||||
var coreRouter = require("../router/router")
|
||||
var autoredraw = require("../api/autoredraw")
|
||||
|
||||
module.exports = function($window, renderer, pubsub) {
|
||||
var router = coreRouter($window)
|
||||
var route = function(root, defaultRoute, routes) {
|
||||
var replay = router.defineRoutes(routes, function(component, args) {
|
||||
renderer.render(root, {tag: component, attrs: args})
|
||||
var current = {route: null, component: null}
|
||||
var replay = router.defineRoutes(routes, function(payload, args, path, route) {
|
||||
if (typeof payload.view !== "function") {
|
||||
if (typeof payload.render !== "function") payload.render = function(vnode) {return vnode}
|
||||
var render = function(component) {
|
||||
current.route = route, current.component = component
|
||||
renderer.render(root, payload.render(Node(component, null, args, undefined, undefined, undefined)))
|
||||
}
|
||||
if (typeof payload.resolve !== "function") payload.resolve = function() {render(current.component)}
|
||||
if (route !== current.route) payload.resolve(render, args, path, route)
|
||||
else render(current.component)
|
||||
}
|
||||
else {
|
||||
renderer.render(root, Node(payload, null, args, undefined, undefined, undefined))
|
||||
}
|
||||
}, function() {
|
||||
router.setPath(defaultRoute)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,175 +11,287 @@ var apiPubSub = require("../../api/pubsub")
|
|||
var apiRouter = require("../../api/router")
|
||||
|
||||
o.spec("route", function() {
|
||||
var FRAME_BUDGET = Math.floor(1000 / 60)
|
||||
var $window, root, redraw, route
|
||||
void ["#", "?", "", "#!", "?!", "/foo"].forEach(function(prefix) {
|
||||
o.spec("using prefix `" + prefix + "`", function() {
|
||||
var FRAME_BUDGET = Math.floor(1000 / 60)
|
||||
var $window, root, redraw, route
|
||||
|
||||
o.beforeEach(function() {
|
||||
$window = {}
|
||||
o.beforeEach(function() {
|
||||
$window = {}
|
||||
|
||||
var dom = domMock()
|
||||
for (var key in dom) $window[key] = dom[key]
|
||||
var dom = domMock()
|
||||
for (var key in dom) $window[key] = dom[key]
|
||||
|
||||
var loc = pushStateMock()
|
||||
for (var key in loc) $window[key] = loc[key]
|
||||
var loc = pushStateMock()
|
||||
for (var key in loc) $window[key] = loc[key]
|
||||
|
||||
root = $window.document.body
|
||||
root = $window.document.body
|
||||
|
||||
redraw = apiPubSub()
|
||||
route = apiRouter($window, coreRenderer($window), redraw)
|
||||
})
|
||||
redraw = apiPubSub()
|
||||
route = apiRouter($window, coreRenderer($window), redraw)
|
||||
route.prefix(prefix)
|
||||
})
|
||||
|
||||
o("renders into `root`", function(done) {
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
})
|
||||
o("renders into `root`", function(done) {
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
callAsync(function() {
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
o("redraws when render function is executed", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
redraw.publish()
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(1)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
|
||||
o("redraws on events", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
var onclick = o.spy()
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate,
|
||||
onclick: onclick,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
o(onclick.callCount).equals(1)
|
||||
o(onclick.this).equals(root.firstChild)
|
||||
o(onclick.args[0].type).equals("click")
|
||||
o(onclick.args[0].target).equals(root.firstChild)
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(1)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
|
||||
o("event handlers can skip redraw", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
var onclick = o.spy()
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate,
|
||||
onclick: function(e) {
|
||||
e.redraw = false
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
// Wrapped to ensure no redraw fired
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
|
||||
o("changes location on route.link", function(done) {
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("a", {
|
||||
href: "/test",
|
||||
oncreate: route.link
|
||||
})
|
||||
}
|
||||
},
|
||||
"/test" : {
|
||||
view : function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
var slash = prefix[0] === "/" ? "" : "/"
|
||||
|
||||
o($window.location.href).equals("http://localhost" + slash + (prefix ? prefix + "/" : ""))
|
||||
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o($window.location.href).equals("http://localhost" + slash + (prefix ? prefix + "/" : "") + "test")
|
||||
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
o("redraws when render function is executed", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate
|
||||
})
|
||||
o("accepts object as payload", function(done) {
|
||||
var Component = {
|
||||
view: function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
redraw.publish()
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(1)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
|
||||
o("redraws on events", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
var onclick = o.spy()
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate,
|
||||
onclick: onclick,
|
||||
})
|
||||
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
resolve: function(resolve) {resolve(Component)},
|
||||
render: function(vnode) {return vnode},
|
||||
},
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
o("accepts object without `render` method as payload", function(done) {
|
||||
var Component = {
|
||||
view: function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
resolve: function(resolve) {resolve(Component)},
|
||||
},
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
o("accepts object without `resolve` method as payload", function(done) {
|
||||
var Component = {
|
||||
view: function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
render: function() {return m(Component)},
|
||||
},
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
o(onclick.callCount).equals(1)
|
||||
o(onclick.this).equals(root.firstChild)
|
||||
o(onclick.args[0].type).equals("click")
|
||||
o(onclick.args[0].target).equals(root.firstChild)
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(1)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
|
||||
o("event handlers can skip redraw", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
var onclick = o.spy()
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate,
|
||||
onclick: function(e) {
|
||||
e.redraw = false
|
||||
o("calls resolve and render correct number of times", function(done) {
|
||||
var resolveCount = 0
|
||||
var renderCount = 0
|
||||
var Component = {
|
||||
view: function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
|
||||
$window.location.href = prefix + "/"
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
resolve: function(resolve) {
|
||||
resolveCount++
|
||||
resolve(Component)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
render: function(vnode) {
|
||||
renderCount++
|
||||
return vnode
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
root.firstChild.dispatchEvent(e)
|
||||
callAsync(function() {
|
||||
o(resolveCount).equals(1)
|
||||
o(renderCount).equals(1)
|
||||
|
||||
redraw.publish()
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
// Wrapped to ensure no redraw fired
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
|
||||
o("changes location on route.link", function(done) {
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
route.prefix("?")
|
||||
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("a", {
|
||||
href: "/test",
|
||||
oncreate: route.link
|
||||
})
|
||||
}
|
||||
},
|
||||
"/test" : {
|
||||
view : function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
callAsync(function() {
|
||||
o($window.location.href).equals("http://localhost/?/")
|
||||
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o($window.location.href).equals("http://localhost/?/test")
|
||||
|
||||
done()
|
||||
setTimeout(function() {
|
||||
o(resolveCount).equals(1)
|
||||
o(renderCount).equals(2)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue