Merge pull request #1472 from pygy/rewrite-router-race-two-onmatch

[rewrite: router] Racing two onmatch w/ delayed resolution, the second one should win

api/router.js

@@ -8,14 +8,9 @@ module.exports = function($window, redrawService) {
 	var routeService = coreRouter($window)
 
 	var identity = function(v) {return v}
-	var render, component, attrs, currentPath, updatePending = false
+	var render, component, attrs, currentPath, lastUpdate
 	var route = function(root, defaultRoute, routes) {
 		if (root == null) throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined")
-		var update = function(routeResolver, comp, params, path) {
-			component = comp != null && typeof comp.view === "function" ? comp : "div", attrs = params, currentPath = path, updatePending = false
-			render = (routeResolver.render || identity).bind(routeResolver)
-			run()
-		}
 		var run = function() {
 			if (render != null) redrawService.render(root, render(Vnode(component, attrs.key, attrs)))
 		}
@@ -23,22 +18,27 @@ module.exports = function($window, redrawService) {
 			routeService.setPath(defaultRoute)
 		}
 		routeService.defineRoutes(routes, function(payload, params, path) {
-			if (payload.view) update({}, payload, params, path)
+			var update = lastUpdate = function(routeResolver, comp) {
+				if (update !== lastUpdate) return
+				component = comp != null && typeof comp.view === "function" ? comp : "div", attrs = params, currentPath = path, lastUpdate = null
+				render = (routeResolver.render || identity).bind(routeResolver)
+				run()
+			}
+			if (payload.view) update({}, payload)
 			else {
 				if (payload.onmatch) {
-					updatePending = true
 					Promise.resolve(payload.onmatch(params, path)).then(function(resolved) {
-						if (updatePending) update(payload, resolved, params, path)
+						update(payload, resolved)
 					}, bail)
 				}
-				else update(payload, "div", params, path)
+				else update(payload, "div")
 			}
 		}, bail)
 		redrawService.subscribe(root, run)
 	}
 	route.set = function(path, data, options) {
-		if (updatePending) options = {replace: true}
-		updatePending = false
+		if (lastUpdate != null) options = {replace: true}
+		lastUpdate = null
 		routeService.setPath(path, data, options)
 	}
 	route.get = function() {return currentPath}

api/tests/test-router.js

@@ -932,6 +932,63 @@ o.spec("route", function() {
 					})
 				})
 
+				o("when two async routes are racing, the last one set cancels the finalization of the first", function(done) {
+					var renderA = o.spy()
+					var renderB = o.spy()
+					var onmatchA = o.spy(function(){
+						return new Promise(function(fulfill) {
+							setTimeout(function(){
+								fulfill()
+							}, 10)
+						})
+					})
+
+					$window.location.href = prefix + "/a"
+					route(root, "/a", {
+						"/a": {
+							onmatch: onmatchA,
+							render: renderA
+						},
+						"/b": {
+							onmatch: function(){
+								var p = new Promise(function(fulfill) {
+									o(onmatchA.callCount).equals(1)
+									o(renderA.callCount).equals(0)
+									o(renderB.callCount).equals(0)
+
+									setTimeout(function(){
+										o(onmatchA.callCount).equals(1)
+										o(renderA.callCount).equals(0)
+										o(renderB.callCount).equals(0)
+
+										fulfill()
+
+										p.then(function(){
+											o(onmatchA.callCount).equals(1)
+											o(renderA.callCount).equals(0)
+											o(renderB.callCount).equals(1)
+
+											done()											
+										})
+									}, 20)
+								})
+								return p
+							},
+							render: renderB
+						}
+					})
+
+					callAsync(function() {
+						o(onmatchA.callCount).equals(1)
+						o(renderA.callCount).equals(0)
+						o(renderB.callCount).equals(0)
+						route.set("/b")
+						o(onmatchA.callCount).equals(1)
+						o(renderA.callCount).equals(0)
+						o(renderB.callCount).equals(0)
+					})
+				})
+
 				o("m.route.set(m.route.get()) re-runs the resolution logic (#1180)", function(done){
 					var onmatch = o.spy()
 					var render = o.spy(function() {return m("div")})