resolve hook in router

This commit is contained in:
Leo Horie 2016-07-11 09:50:00 -04:00
parent b3d784d841
commit a6c56ff6b9
10 changed files with 599 additions and 319 deletions

View file

@ -61,7 +61,7 @@ module.exports = function($window) {
if (supportsPushState) {
if (options && options.replace) $window.history.replaceState(null, null, prefix + path)
else $window.history.pushState(null, null, prefix + path)
callAsync($window.onpopstate)
$window.onpopstate()
}
else $window.location.href = prefix + path
}
@ -70,29 +70,31 @@ module.exports = function($window) {
if (supportsPushState) $window.onpopstate = resolveRoute
else if (prefix.charAt(0) === "#") $window.onhashchange = resolveRoute
resolveRoute()
function resolveRoute() {
var path = getPath()
var params = {}
var pathname = parsePath(path, params, params)
for (var route in routes) {
var matcher = new RegExp("^" + route.replace(/:[^\/]+?\.{3}/g, "(.*?)").replace(/:[^\/]+/g, "([^\\/]+)") + "\/?$")
callAsync(function() {
for (var route in routes) {
var matcher = new RegExp("^" + route.replace(/:[^\/]+?\.{3}/g, "(.*?)").replace(/:[^\/]+/g, "([^\\/]+)") + "\/?$")
if (matcher.test(pathname)) {
pathname.replace(matcher, function() {
var keys = route.match(/:[^\/]+/g) || []
var values = [].slice.call(arguments, 1, -2)
for (var i = 0; i < keys.length; i++) {
params[keys[i].replace(/:|\./g, "")] = decodeURIComponent(values[i])
}
resolve(routes[route], params, path, route)
})
return
if (matcher.test(pathname)) {
pathname.replace(matcher, function() {
var keys = route.match(/:[^\/]+/g) || []
var values = [].slice.call(arguments, 1, -2)
for (var i = 0; i < keys.length; i++) {
params[keys[i].replace(/:|\./g, "")] = decodeURIComponent(values[i])
}
resolve(routes[route], params, path, route)
})
return
}
}
}
reject(path, params)
reject(path, params)
})
}
return resolveRoute
}
@ -101,6 +103,7 @@ module.exports = function($window) {
vnode.dom.setAttribute("href", prefix + vnode.attrs.href)
vnode.dom.onclick = function(e) {
e.preventDefault()
e.redraw = false
setPath(vnode.attrs.href, undefined, undefined)
}
}

View file

@ -1,6 +1,7 @@
"use strict"
var o = require("../../ospec/ospec")
var callAsync = require("../../test-utils/callAsync")
var pushStateMock = require("../../test-utils/pushStateMock")
var Router = require("../../router/router")
@ -17,41 +18,57 @@ o.spec("Router.defineRoutes", function() {
onFail = o.spy()
})
o("calls onRouteChange on init", function() {
o("calls onRouteChange on init", function(done) {
$window.location.href = prefix + "/a"
router.defineRoutes({"/a": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
done()
})
})
o("resolves to route", function() {
o("resolves to route", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/test", "/test"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/test", "/test"])
o(onFail.callCount).equals(0)
done()
})
})
o("resolves to route w/ escaped unicode", function() {
o("resolves to route w/ escaped unicode", function(done) {
$window.location.href = prefix + "/%C3%B6?%C3%B6=%C3%B6#%C3%B6=%C3%B6"
router.defineRoutes({"/ö": {data: 2}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {"ö": "ö"}, "/ö?ö=ö#ö=ö", "/ö"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {"ö": "ö"}, "/ö?ö=ö#ö=ö", "/ö"])
o(onFail.callCount).equals(0)
done()
})
})
o("resolves to route w/ unicode", function() {
o("resolves to route w/ unicode", function(done) {
$window.location.href = prefix + "/ö?ö=ö#ö=ö"
router.defineRoutes({"/ö": {data: 2}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {"ö": "ö"}, "/ö?ö=ö#ö=ö", "/ö"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {"ö": "ö"}, "/ö?ö=ö#ö=ö", "/ö"])
o(onFail.callCount).equals(0)
done()
})
})
o("resolves to route on fallback mode", function() {
o("resolves to route on fallback mode", function(done) {
$window.location.href = "file://" + prefix + "/test"
router = new Router($window)
@ -59,98 +76,142 @@ o.spec("Router.defineRoutes", function() {
router.defineRoutes({"/test": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/test", "/test"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/test", "/test"])
o(onFail.callCount).equals(0)
done()
})
})
o("handles parameterized route", function() {
o("handles parameterized route", function(done) {
$window.location.href = prefix + "/test/x"
router.defineRoutes({"/test/:a": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "x"}, "/test/x", "/test/:a"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "x"}, "/test/x", "/test/:a"])
o(onFail.callCount).equals(0)
done()
})
})
o("handles multi-parameterized route", function() {
o("handles multi-parameterized route", function(done) {
$window.location.href = prefix + "/test/x/y"
router.defineRoutes({"/test/:a/:b": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "x", b: "y"}, "/test/x/y", "/test/:a/:b"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "x", b: "y"}, "/test/x/y", "/test/:a/:b"])
o(onFail.callCount).equals(0)
done()
})
})
o("handles rest parameterized route", function() {
o("handles rest parameterized route", function(done) {
$window.location.href = prefix + "/test/x/y"
router.defineRoutes({"/test/:a...": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "x/y"}, "/test/x/y", "/test/:a..."])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "x/y"}, "/test/x/y", "/test/:a..."])
o(onFail.callCount).equals(0)
done()
})
})
o("handles route with search", function() {
o("handles route with search", function(done) {
$window.location.href = prefix + "/test?a=b&c=d"
router.defineRoutes({"/test": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "b", c: "d"}, "/test?a=b&c=d", "/test"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "b", c: "d"}, "/test?a=b&c=d", "/test"])
o(onFail.callCount).equals(0)
done()
})
})
o("handles route with hash", function() {
o("handles route with hash", function(done) {
$window.location.href = prefix + "/test#a=b&c=d"
router.defineRoutes({"/test": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "b", c: "d"}, "/test#a=b&c=d", "/test"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "b", c: "d"}, "/test#a=b&c=d", "/test"])
o(onFail.callCount).equals(0)
done()
})
})
o("handles route with search and hash", function() {
o("handles route with search and hash", function(done) {
$window.location.href = prefix + "/test?a=b#c=d"
router.defineRoutes({"/test": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "b", c: "d"}, "/test?a=b#c=d", "/test"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {a: "b", c: "d"}, "/test?a=b#c=d", "/test"])
o(onFail.callCount).equals(0)
done()
})
})
o("calls reject", function() {
o("calls reject", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/other": {data: 1}}, onRouteChange, onFail)
o(onFail.callCount).equals(1)
o(onFail.args).deepEquals(["/test", {}])
callAsync(function() {
o(onFail.callCount).equals(1)
o(onFail.args).deepEquals(["/test", {}])
done()
})
})
o("calls reject w/ search and hash", function() {
o("calls reject w/ search and hash", function(done) {
$window.location.href = prefix + "/test?a=b#c=d"
router.defineRoutes({"/other": {data: 1}}, onRouteChange, onFail)
o(onFail.callCount).equals(1)
o(onFail.args).deepEquals(["/test?a=b#c=d", {a: "b", c: "d"}])
callAsync(function() {
o(onFail.callCount).equals(1)
o(onFail.args).deepEquals(["/test?a=b#c=d", {a: "b", c: "d"}])
done()
})
})
o("handles out of order routes", function() {
o("handles out of order routes", function(done) {
$window.location.href = prefix + "/z/y/x"
router.defineRoutes({"/z/y/x": {data: 1}, "/:a...": {data: 2}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/z/y/x", "/z/y/x"])
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/z/y/x", "/z/y/x"])
done()
})
})
o("handles reverse out of order routes", function() {
o("handles reverse out of order routes", function(done) {
$window.location.href = prefix + "/z/y/x"
router.defineRoutes({"/:a...": {data: 2}, "/z/y/x": {data: 1}}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {a: "z/y/x"}, "/z/y/x", "/:a..."])
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {a: "z/y/x"}, "/z/y/x", "/:a..."])
done()
})
})
o("handles dynamically added out of order routes", function() {
o("handles dynamically added out of order routes", function(done) {
var routes = {}
routes["/z/y/x"] = {data: 1}
routes["/:a..."] = {data: 2}
@ -158,11 +219,15 @@ o.spec("Router.defineRoutes", function() {
$window.location.href = prefix + "/z/y/x"
router.defineRoutes(routes, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/z/y/x", "/z/y/x"])
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/z/y/x", "/z/y/x"])
done()
})
})
o("handles reversed dynamically added out of order routes", function() {
o("handles reversed dynamically added out of order routes", function(done) {
var routes = {}
routes["/:a..."] = {data: 2}
routes["/z/y/x"] = {data: 1}
@ -170,47 +235,67 @@ o.spec("Router.defineRoutes", function() {
$window.location.href = prefix + "/z/y/x"
router.defineRoutes(routes, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {a: "z/y/x"}, "/z/y/x", "/:a..."])
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {a: "z/y/x"}, "/z/y/x", "/:a..."])
done()
})
})
o("handles mixed out of order routes", function() {
o("handles mixed out of order routes", function(done) {
var routes = {"/z/y/x": {data: 1}}
routes["/:a..."] = {data: 2}
$window.location.href = prefix + "/z/y/x"
router.defineRoutes(routes, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/z/y/x", "/z/y/x"])
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/z/y/x", "/z/y/x"])
done()
})
})
o("handles reverse mixed out of order routes", function() {
o("handles reverse mixed out of order routes", function(done) {
var routes = {"/:a...": {data: 2}}
routes["/z/y/x"] = {data: 12}
$window.location.href = prefix + "/z/y/x"
router.defineRoutes(routes, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {a: "z/y/x"}, "/z/y/x", "/:a..."])
callAsync(function() {
o(onRouteChange.callCount).equals(1)
o(onRouteChange.args).deepEquals([{data: 2}, {a: "z/y/x"}, "/z/y/x", "/:a..."])
done()
})
})
o("handles non-ascii routes", function() {
o("handles non-ascii routes", function(done) {
$window.location.href = prefix + "/ö"
router.defineRoutes({"/ö": "aaa"}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
callAsync(function() {
o(onRouteChange.callCount).equals(1)
done()
})
})
o("replays", function() {
o("replays", function(done) {
$window.location.href = prefix + "/test"
var replay = router.defineRoutes({"/test": {data: 1}}, onRouteChange, onFail)
replay()
o(onRouteChange.callCount).equals(2)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/test", "/test"])
o(onFail.callCount).equals(0)
callAsync(function() {
o(onRouteChange.callCount).equals(2)
o(onRouteChange.args).deepEquals([{data: 1}, {}, "/test", "/test"])
o(onFail.callCount).equals(0)
done()
})
})
})
})

View file

@ -21,90 +21,136 @@ o.spec("Router.setPath", function() {
o("setPath calls onRouteChange asynchronously", function(done) {
$window.location.href = prefix + "/a"
router.defineRoutes({"/a": {data: 1}, "/b": {data: 2}}, onRouteChange, onFail)
router.setPath("/b")
o(onRouteChange.callCount).equals(1)
callAsync(function() {
o(onRouteChange.callCount).equals(2)
done()
router.setPath("/b")
o(onRouteChange.callCount).equals(1)
callAsync(function() {
o(onRouteChange.callCount).equals(2)
done()
})
})
})
o("setPath calls onFail asynchronously", function(done) {
$window.location.href = prefix + "/a"
router.defineRoutes({"/a": {data: 1}, "/b": {data: 2}}, onRouteChange, onFail)
router.setPath("/c")
o(onFail.callCount).equals(0)
callAsync(function() {
o(onFail.callCount).equals(1)
router.setPath("/c")
o(onFail.callCount).equals(0)
callAsync(function() {
o(onFail.callCount).equals(1)
done()
})
})
})
o("sets route via API", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/other/:a/:b...": {data: 2}}, onRouteChange, onFail)
callAsync(function() {
router.setPath("/other/x/y/z?c=d#e=f")
o(router.getPath()).equals("/other/x/y/z?c=d#e=f")
done()
})
})
o("sets route via API", function() {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/other/:a/:b...": {data: 2}}, onRouteChange, onFail)
router.setPath("/other/x/y/z?c=d#e=f")
o(router.getPath()).equals("/other/x/y/z?c=d#e=f")
})
o("sets route w/ escaped unicode", function() {
o("sets route w/ escaped unicode", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/ö/:a/:b...": {data: 2}}, onRouteChange, onFail)
router.setPath("/%C3%B6?%C3%B6=%C3%B6#%C3%B6=%C3%B6")
o(router.getPath()).equals("/ö?ö=ö#ö=ö")
callAsync(function() {
router.setPath("/%C3%B6?%C3%B6=%C3%B6#%C3%B6=%C3%B6")
o(router.getPath()).equals("/ö?ö=ö#ö=ö")
done()
})
})
o("sets route w/ unicode", function() {
o("sets route w/ unicode", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/ö/:a/:b...": {data: 2}}, onRouteChange, onFail)
router.setPath("/ö?ö=ö#ö=ö")
o(router.getPath()).equals("/ö?ö=ö#ö=ö")
callAsync(function() {
router.setPath("/ö?ö=ö#ö=ö")
o(router.getPath()).equals("/ö?ö=ö#ö=ö")
done()
})
})
o("sets route on fallback mode", function() {
o("sets route on fallback mode", function(done) {
$window.location.href = "file://" + prefix + "/test"
router = new Router($window)
router.setPrefix(prefix)
router.defineRoutes({"/test": {data: 1}, "/other/:a/:b...": {data: 2}}, onRouteChange, onFail)
router.setPath("/other/x/y/z?c=d#e=f")
o(router.getPath()).equals("/other/x/y/z?c=d#e=f")
callAsync(function() {
router.setPath("/other/x/y/z?c=d#e=f")
o(router.getPath()).equals("/other/x/y/z?c=d#e=f")
done()
})
})
o("sets route via pushState/onpopstate", function() {
o("sets route via pushState/onpopstate", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/other/:a/:b...": {data: 2}}, onRouteChange, onFail)
$window.history.pushState(null, null, prefix + "/other/x/y/z?c=d#e=f")
$window.onpopstate()
o(router.getPath()).equals("/other/x/y/z?c=d#e=f")
callAsync(function() {
$window.history.pushState(null, null, prefix + "/other/x/y/z?c=d#e=f")
$window.onpopstate()
o(router.getPath()).equals("/other/x/y/z?c=d#e=f")
done()
})
})
o("sets parameterized route", function() {
o("sets parameterized route", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/other/:a/:b...": {data: 2}}, onRouteChange, onFail)
router.setPath("/other/:a/:b", {a: "x", b: "y/z", c: "d", e: "f"})
o(router.getPath()).equals("/other/x/y/z?c=d&e=f")
callAsync(function() {
router.setPath("/other/:a/:b", {a: "x", b: "y/z", c: "d", e: "f"})
o(router.getPath()).equals("/other/x/y/z?c=d&e=f")
done()
})
})
o("replace:true works", function() {
o("replace:true works", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/other": {data: 2}}, onRouteChange, onFail)
router.setPath("/other", null, {replace: true})
$window.history.back()
o($window.location.href).equals("http://localhost/")
callAsync(function() {
router.setPath("/other", null, {replace: true})
$window.history.back()
o($window.location.href).equals("http://localhost/")
done()
})
})
o("replace:false works", function() {
o("replace:false works", function(done) {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/other": {data: 2}}, onRouteChange, onFail)
router.setPath("/other", null, {replace: false})
$window.history.back()
var slash = prefix[0] === "/" ? "" : "/"
callAsync(function() {
router.setPath("/other", null, {replace: false})
$window.history.back()
o($window.location.href).equals("http://localhost" + slash + (prefix ? prefix + "/" : "") + "test")
var slash = prefix[0] === "/" ? "" : "/"
o($window.location.href).equals("http://localhost" + slash + (prefix ? prefix + "/" : "") + "test")
done()
})
})
})
})