utf-8 handling in router

This commit is contained in:
Leo Horie 2016-05-13 07:02:32 -04:00
parent f4c1d4a998
commit d8a402f4f5
7 changed files with 117 additions and 101 deletions

View file

@ -5,47 +5,56 @@ var parseQueryString = require("../querystring/parse")
module.exports = function($window, prefix) {
var supportsPushState = typeof $window.history.pushState === "function" && $window.location.protocol !== "file:"
function parsePath(path) {
var params = {}
function normalize(fragment) {
var data = $window.location[fragment].replace(/(?:%[a-f89][a-f0-9])+/gim, decodeURIComponent)
if (fragment === "pathname" && data[0] !== "/") data = "/" + data
return data
}
function parsePath(path, queryData, hashData) {
var queryIndex = path.indexOf("?")
var hashIndex = path.indexOf("#")
var pathEnd = queryIndex > -1 ? queryIndex : hashIndex > -1 ? hashIndex : path.length
if (queryIndex > -1) {
var queryEnd = hashIndex > -1 ? hashIndex : path.length
var queryParams = parseQueryString(path.slice(queryIndex + 1, queryEnd))
for (var key in queryParams) params[key] = queryParams[key]
for (var key in queryParams) queryData[key] = queryParams[key]
}
if (hashIndex > -1) {
var hashParams = parseQueryString(path.slice(hashIndex + 1))
for (var key in hashParams) params[key] = hashParams[key]
for (var key in hashParams) hashData[key] = hashParams[key]
}
return {name: path.slice(0, pathEnd), params: params}
return path.slice(0, pathEnd)
}
function getPath() {
var type = prefix.charAt(0)
switch (type) {
case "#": return $window.location.hash.slice(prefix.length)
case "?": return $window.location.search.slice(prefix.length) + $window.location.hash
default: return $window.location.pathname + $window.location.search + $window.location.hash
case "#": return normalize("hash").slice(prefix.length)
case "?": return normalize("search").slice(prefix.length) + normalize("hash")
default: return normalize("pathname") + normalize("search") + normalize("hash")
}
}
function setPath(path, data, options) {
var queryData = {}, hashData = {}
path = parsePath(path, queryData, hashData)
if (data != null) {
for (var key in data) queryData[key] = data[key]
path = path.replace(/:([^\/]+)/g, function(match, token) {
delete queryData[token]
return data[token]
})
}
var query = buildQueryString(queryData)
if (query) path += "?" + query
var hash = buildQueryString(hashData)
if (hash) path += "#" + hash
if (supportsPushState) {
var queryData = {}
if (data != null) {
for (var key in data) queryData[key] = data[key]
path = path.replace(/:([^\/]+)/g, function(match, token) {
delete queryData[token]
return data[token]
})
}
var query = buildQueryString(queryData)
if (query) path = path + "?" + query
if (options && options.replace) $window.history.replaceState(null, null, prefix + path)
else $window.history.pushState(null, null, prefix + path)
$window.onpopstate()
@ -58,27 +67,28 @@ module.exports = function($window, prefix) {
else if (prefix.charAt(0) === "#") $window.onhashchange = resolveRoute
resolveRoute()
function resolveRoute(e) {
function resolveRoute() {
var path = getPath()
var data = parsePath(path)
var params = {}
var pathname = parsePath(path, params, params)
for (var route in routes) {
var matcher = new RegExp("^" + route.replace(/:[^\/]+?\.{3}/g, "(.*?)").replace(/:[^\/]+/g, "([^\\/]+)") + "\/?$")
if (matcher.test(data.name)) {
data.name.replace(matcher, function() {
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++) {
data.params[keys[i].replace(/:|\./g, "")] = decodeURIComponent(values[i])
params[keys[i].replace(/:|\./g, "")] = decodeURIComponent(values[i])
}
resolve(routes[route], data.params, path, route)
resolve(routes[route], params, path, route)
})
return
}
}
reject(path, data.params)
reject(path, params)
}
return resolveRoute
}

View file

@ -13,6 +13,8 @@
<script src="../../querystring/parse.js"></script>
<script src="../../router/router.js"></script>
<script src="test-defineRoutes.js"></script>
<script src="test-getPath.js"></script>
<script src="test-setPath.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>

View file

@ -4,7 +4,7 @@ var o = require("../../ospec/ospec")
var pushStateMock = require("../../test-utils/pushStateMock")
var Router = require("../../router/router")
o.spec("router", function() {
o.spec("Router.defineRoutes", function() {
void ["#", "?", "", "#!", "?!"].forEach(function(prefix) {
o.spec("using prefix `" + prefix + "`", function() {
var $window, router, onRouteChange, onFail
@ -26,6 +26,24 @@ o.spec("router", function() {
o(onFail.callCount).equals(0)
})
o("resolves to route w/ escaped unicode", function() {
$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)
})
o("resolves to route w/ unicode", function() {
$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)
})
o("handles parameterized route", function() {
$window.location.href = prefix + "/test/x"
router.defineRoutes({"/test/:a": {data: 1}}, onRouteChange, onFail)
@ -158,6 +176,13 @@ o.spec("router", function() {
o(onRouteChange.args).deepEquals([{data: 2}, {a: "z/y/x"}, "/z/y/x", "/:a..."])
})
o("handles non-ascii routes", function() {
$window.location.href = prefix + "/ö"
router.defineRoutes({"/ö": "aaa"}, onRouteChange, onFail)
o(onRouteChange.callCount).equals(1)
})
o("replays", function() {
$window.location.href = prefix + "/test"
var replay = router.defineRoutes({"/test": {data: 1}}, onRouteChange, onFail)
@ -168,62 +193,6 @@ o.spec("router", function() {
o(onFail.callCount).equals(0)
})
})
o.spec("getPath", function() {
o("gets route", function() {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}}, onRouteChange, onFail)
o(router.getPath()).equals("/test")
})
o("gets route w/ params", function() {
$window.location.href = prefix + "/other/x/y/z?c=d#e=f"
router.defineRoutes({"/test": {data: 1}, "/other/:a/:b...": {data: 2}}, onRouteChange, onFail)
o(router.getPath()).equals("/other/x/y/z?c=d#e=f")
})
})
o.spec("setPath", function() {
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 via pushState/onpopstate", function() {
$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")
})
o("sets parameterized route", function() {
$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")
})
o("replace:true works", function() {
$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/")
})
o("replace:false works", function() {
$window.location.href = prefix + "/test"
router.defineRoutes({"/test": {data: 1}, "/other": {data: 2}}, onRouteChange, onFail)
router.setPath("/other", null, {replace: false})
$window.history.back()
o($window.location.href).equals("http://localhost/" + (prefix ? prefix + "/" : "") + "test")
})
})
})
})
})