Deduplicate m.route and m.redraw logic (#2453)
- Remove appropriate route change subcriptions when a root is removed via `m.mount(root, null)`. - Don't pollute `onpopstate` and friends - use standard event listeners instead. - Simplify and streamline subscriptions, in preparation of adding a `remove` parameter to `m.mount`. - Change the redraw internals to redraw immediately, with ability to cancel via returning a sentinel. - Change `"bleeding-edge"` for `m.version` in `next` to instead just be the latest `m.version`. (If you're using `next`, you should know what you're in for.) - Update tests to be aware of these changes. (Some were failing for subtle reasons.) - Drive-by: remove some uses of `string.charAt(n)` and use `string[n]` instead.
This commit is contained in:
Isiah Meadows
GitHub
parent
6c562d2b9b
commit
90bcff0fa7
18 changed files with 397 additions and 192 deletions
158
router/router.js
158
router/router.js
|
|
@ -6,91 +6,107 @@ var compileTemplate = require("../pathname/compileTemplate")
|
|||
var assign = require("../pathname/assign")
|
||||
|
||||
module.exports = function($window) {
|
||||
var supportsPushState = typeof $window.history.pushState === "function"
|
||||
var callAsync = typeof setImmediate === "function" ? setImmediate : setTimeout
|
||||
var supportsPushState = typeof $window.history.pushState === "function"
|
||||
var fireAsync
|
||||
|
||||
var asyncId
|
||||
var router = {prefix: "#!"}
|
||||
router.getPath = function() {
|
||||
// Consider the pathname holistically. The prefix might even be invalid,
|
||||
// but that's not our problem.
|
||||
var prefix = $window.location.hash
|
||||
if (router.prefix[0] !== "#") {
|
||||
prefix = $window.location.search + prefix
|
||||
if (router.prefix[0] !== "?") {
|
||||
prefix = $window.location.pathname + prefix
|
||||
if (prefix[0] !== "/") prefix = "/" + prefix
|
||||
return {
|
||||
prefix: "#!",
|
||||
|
||||
getPath: function() {
|
||||
// Consider the pathname holistically. The prefix might even be invalid,
|
||||
// but that's not our problem.
|
||||
var prefix = $window.location.hash
|
||||
if (this.prefix[0] !== "#") {
|
||||
prefix = $window.location.search + prefix
|
||||
if (this.prefix[0] !== "?") {
|
||||
prefix = $window.location.pathname + prefix
|
||||
if (prefix[0] !== "/") prefix = "/" + prefix
|
||||
}
|
||||
}
|
||||
}
|
||||
// This seemingly useless `.concat()` speeds up the tests quite a bit,
|
||||
// since the representation is consistently a relatively poorly
|
||||
// optimized cons string.
|
||||
return prefix.concat()
|
||||
.replace(/(?:%[a-f89][a-f0-9])+/gim, decodeURIComponent)
|
||||
.slice(router.prefix.length)
|
||||
}
|
||||
// This seemingly useless `.concat()` speeds up the tests quite a bit,
|
||||
// since the representation is consistently a relatively poorly
|
||||
// optimized cons string.
|
||||
return prefix.concat()
|
||||
.replace(/(?:%[a-f89][a-f0-9])+/gim, decodeURIComponent)
|
||||
.slice(this.prefix.length)
|
||||
},
|
||||
|
||||
router.setPath = function(path, data, options) {
|
||||
path = buildPathname(path, data)
|
||||
if (supportsPushState) {
|
||||
var state = options ? options.state : null
|
||||
var title = options ? options.title : null
|
||||
$window.onpopstate()
|
||||
if (options && options.replace) $window.history.replaceState(state, title, router.prefix + path)
|
||||
else $window.history.pushState(state, title, router.prefix + path)
|
||||
}
|
||||
else $window.location.href = router.prefix + path
|
||||
}
|
||||
|
||||
router.defineRoutes = function(routes, resolve, reject, defaultRoute) {
|
||||
var compiled = Object.keys(routes).map(function(route) {
|
||||
if (route.charAt(0) !== "/") throw new SyntaxError("Routes must start with a `/`")
|
||||
if ((/:([^\/\.-]+)(\.{3})?:/).test(route)) {
|
||||
throw new SyntaxError("Route parameter names must be separated with either `/`, `.`, or `-`")
|
||||
setPath: function(path, data, options) {
|
||||
path = buildPathname(path, data)
|
||||
if (fireAsync != null) {
|
||||
fireAsync()
|
||||
var state = options ? options.state : null
|
||||
var title = options ? options.title : null
|
||||
if (options && options.replace) $window.history.replaceState(state, title, this.prefix + path)
|
||||
else $window.history.pushState(state, title, this.prefix + path)
|
||||
}
|
||||
return {
|
||||
route: route,
|
||||
component: routes[route],
|
||||
check: compileTemplate(route),
|
||||
else {
|
||||
$window.location.href = this.prefix + path
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
if (defaultRoute != null) {
|
||||
var defaultData = parsePathname(defaultRoute)
|
||||
defineRoutes: function(routes, resolve, reject, defaultRoute, subscribe) {
|
||||
var self = this
|
||||
var compiled = Object.keys(routes).map(function(route) {
|
||||
if (route[0] !== "/") throw new SyntaxError("Routes must start with a `/`")
|
||||
if ((/:([^\/\.-]+)(\.{3})?:/).test(route)) {
|
||||
throw new SyntaxError("Route parameter names must be separated with either `/`, `.`, or `-`")
|
||||
}
|
||||
return {
|
||||
route: route,
|
||||
component: routes[route],
|
||||
check: compileTemplate(route),
|
||||
}
|
||||
})
|
||||
var unsubscribe, asyncId
|
||||
|
||||
if (!compiled.some(function (i) { return i.check(defaultData) })) {
|
||||
throw new ReferenceError("Default route doesn't match any known routes")
|
||||
}
|
||||
}
|
||||
fireAsync = null
|
||||
|
||||
function resolveRoute() {
|
||||
var path = router.getPath()
|
||||
var data = parsePathname(path)
|
||||
if (defaultRoute != null) {
|
||||
var defaultData = parsePathname(defaultRoute)
|
||||
|
||||
assign(data.params, $window.history.state)
|
||||
|
||||
for (var i = 0; i < compiled.length; i++) {
|
||||
if (compiled[i].check(data)) {
|
||||
resolve(compiled[i].component, data.params, path, compiled[i].route)
|
||||
return
|
||||
if (!compiled.some(function (i) { return i.check(defaultData) })) {
|
||||
throw new ReferenceError("Default route doesn't match any known routes")
|
||||
}
|
||||
}
|
||||
|
||||
reject(path, data.params)
|
||||
}
|
||||
function resolveRoute() {
|
||||
var path = self.getPath()
|
||||
var data = parsePathname(path)
|
||||
|
||||
if (supportsPushState) {
|
||||
$window.onpopstate = function() {
|
||||
if (asyncId) return
|
||||
asyncId = callAsync(function() {
|
||||
asyncId = null
|
||||
resolveRoute()
|
||||
})
|
||||
assign(data.params, $window.history.state)
|
||||
|
||||
for (var i = 0; i < compiled.length; i++) {
|
||||
if (compiled[i].check(data)) {
|
||||
resolve(compiled[i].component, data.params, path, compiled[i].route)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
reject(path, data.params)
|
||||
}
|
||||
}
|
||||
else if (router.prefix.charAt(0) === "#") $window.onhashchange = resolveRoute
|
||||
resolveRoute()
|
||||
}
|
||||
|
||||
return router
|
||||
if (supportsPushState) {
|
||||
unsubscribe = function() {
|
||||
$window.removeEventListener("popstate", fireAsync, false)
|
||||
}
|
||||
$window.addEventListener("popstate", fireAsync = function() {
|
||||
if (asyncId) return
|
||||
asyncId = callAsync(function() {
|
||||
asyncId = null
|
||||
resolveRoute()
|
||||
})
|
||||
}, false)
|
||||
} else if (this.prefix[0] === "#") {
|
||||
unsubscribe = function() {
|
||||
$window.removeEventListener("hashchange", resolveRoute, false)
|
||||
}
|
||||
$window.addEventListener("hashchange", resolveRoute, false)
|
||||
}
|
||||
|
||||
subscribe(unsubscribe)
|
||||
resolveRoute()
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue