Merge pull request #52 from sveltejs/gh-48

cancel navigation if overtaken by a second navigation

runtime/app.js

@@ -35,10 +35,14 @@ function select_route(url) {
 	}
 }
 
-function render(Component, data, scroll) {
+let current_token;
+
+function render(Component, data, scroll, token) {
 	Promise.resolve(
 		Component.preload ? Component.preload(data) : {}
 	).then(preloaded => {
+		if (current_token !== token) return;
+
 		if (component) {
 			component.destroy();
 		} else {
@@ -83,7 +87,7 @@ function navigate(url, id) {
 		}
 
 		selected.route.load().then(mod => {
-			render(mod.default, selected.data, scroll_history[id]);
+			render(mod.default, selected.data, scroll_history[id], current_token = {});
 		});
 
 		cid = id;

test/app/routes/_components/Nav.html

@@ -1,10 +1,8 @@
 <nav>
 	<ul>
-		<li><a class='{{page === "home"  ? "selected" : ""}}' href='/'>home</a></li>
+		<li><a href='/'>home</a></li>
-		<li><a class='{{page === "about"  ? "selected" : ""}}' href='/about'>about</a></li>
+		<li><a href='/about'>about</a></li>
-
+		<li><a href='/slow-preload'>slow preload</a></li>
-		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-		     the blog data when we hover over the link or tap it on a touchscreen -->
 		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
 	</ul>
 </nav>

test/app/routes/slow-preload.html

@@ -0,0 +1,11 @@
+<h1>This page should never render</h1>
+
+<script>
+	export default {
+		preload() {
+			return new Promise(fulfil => {
+				window.fulfil = fulfil;
+			});
+		}
+	};
+</script>

test/common/test.js

@@ -208,6 +208,40 @@ function run(env) {
 
 				assert.ok(scrollY > 0, scrollY);
 			});
+
+			it('cancels navigation if subsequent navigation occurs during preload', async () => {
+				await nightmare
+					.goto(base)
+					.wait(() => window.READY)
+					.click('a[href="/slow-preload"]')
+					.wait(100)
+					.click('a[href="/about"]')
+					.wait(100);
+
+				assert.equal(
+					await nightmare.path(),
+					'/about'
+				);
+
+				assert.equal(
+					await nightmare.evaluate(() => document.querySelector('h1').textContent),
+					'About this site'
+				);
+
+				await nightmare
+					.evaluate(() => window.fulfil({}))
+					.wait(100);
+
+				assert.equal(
+					await nightmare.path(),
+					'/about'
+				);
+
+				assert.equal(
+					await nightmare.evaluate(() => document.querySelector('h1').textContent),
+					'About this site'
+				);
+			});
 		});
 
 		describe('headers', () => {