Add noscroll option to goto, document sapper-noscroll on links

runtime/src/app/goto/index.ts

@@ -1,11 +1,11 @@
 import { history, select_target, navigate, cid } from '../app';
 
-export default function goto(href: string, opts = { replaceState: false }) {
+export default function goto(href: string, opts = { noscroll: false, replaceState: false }) {
 	const target = select_target(new URL(href, document.baseURI));
 
 	if (target) {
 		history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
-		return navigate(target, null).then(() => {});
+		return navigate(target, null, opts.noscroll).then(() => {});
 	}
 
 	location.href = href;

test/apps/scroll/src/routes/search-form.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { goto } from "@sapper/app";
+
+  function preserveScroll() {
+    goto("/a-third-tall-page", { noscroll: true });
+  }
+
+  function scroll() {
+    goto("/a-third-tall-page");
+  }
+</script>
+
+<h1>A search form</h1>
+
+<div style="height: 9999px" />
+
+<div id="search">
+  <button id="scroll" on:click={scroll}>Don't preserve scroll</button>
+  <button id="preserve" on:click={preserveScroll}>Preserve scroll</button>
+</div>
+

test/apps/scroll/test.ts

@@ -1,107 +1,133 @@
 import * as assert from 'assert';
-import { build } from '../../../api';
-import { AppRunner } from '../AppRunner';
+import {build} from '../../../api';
+import {AppRunner} from '../AppRunner';
 
-describe('scroll', function() {
-	this.timeout(10000);
-
-	let r: AppRunner;
-
-	// hooks
-	before('build app', () => build({ cwd: __dirname }));
-	before('start runner', async () => {
-		r = await new AppRunner().start(__dirname);
-	});
-
-	after(() => r && r.end());
-
-	// tests
-	it('scrolls to active deeplink', async () => {
-		await r.load('/tall-page#foo');
-		await r.sapper.start();
-
-		const scrollY = await r.page.evaluate(() => window.scrollY);
-		assert.ok(scrollY > 0, String(scrollY));
-	});
-
-	it('scrolls to any deeplink if it was already active', async () => {
-		await r.load('/tall-page#foo');
-		await r.sapper.start();
-
-		let scrollY = await r.page.evaluate(() => window.scrollY);
-		assert.ok(scrollY > 0, String(scrollY));
-
-		scrollY = await r.page.evaluate(() => {
-			window.scrollTo(0, 0)
-			return window.scrollY
-		});
-		assert.ok(scrollY === 0, String(scrollY));
-
-		await r.page.click('[href="tall-page#foo"]');
-		scrollY = await r.page.evaluate(() => window.scrollY);
-		assert.ok(scrollY > 0, String(scrollY));
-	});
-
-	it('resets scroll when a link is clicked', async () => {
-		await r.load('/tall-page#foo');
-		await r.sapper.start();
-		await r.sapper.prefetchRoutes();
-
-		await r.page.click('[href="another-tall-page"]');
-		await r.wait();
-
-		assert.equal(
-			await r.page.evaluate(() => window.scrollY),
-			0
-		);
-	});
-
-	it('preserves scroll when a link with sapper-noscroll is clicked', async () => {
-		await r.load('/tall-page#foo');
-		await r.sapper.start();
-		await r.sapper.prefetchRoutes();
-
-		await r.page.click('[href="another-tall-page"][sapper-noscroll]');
-		await r.wait();
-
-		const scrollY = await r.page.evaluate(() => window.scrollY);
-
-		assert.ok(scrollY > 0);
-	});
-
-	it('scrolls into a deeplink on a new page', async () => {
-		await r.load('/tall-page#foo');
-		await r.sapper.start();
-		await r.sapper.prefetchRoutes();
-
-		await r.page.click('[href="another-tall-page#bar"]');
-		await r.wait();
-		assert.equal(await r.text('h1'), 'Another tall page');
-		const scrollY = await r.page.evaluate(() => window.scrollY);
-		assert.ok(scrollY > 0);
-	});
-
-	it('scrolls to a deeplink on a new page no matter the previous scroll position', async () => {
-		await r.load('/a-third-tall-page#top');
-		await r.sapper.start();
-		await r.sapper.prefetchRoutes();
-
-		await r.page.click('a#top');
-		await r.wait();
-		const firstScrollY = await r.page.evaluate(() => window.scrollY);
-
-		await r.load('/a-third-tall-page#bottom');
-		await r.sapper.start();
-		await r.sapper.prefetchRoutes();
-
-		await r.page.click('a#bottom');
-		await r.wait();
-		const secondScrollY = await r.page.evaluate(() => window.scrollY);
-
-		assert.equal(firstScrollY, secondScrollY);
-	});
-
-	it('survives the tests with no server errors', () => {
-		assert.deepEqual(r.errors, []);
-	});
+describe('scroll', function () {
+  this.timeout(10000);
+
+  let r: AppRunner;
+
+  // hooks
+  before('build app', () => build({cwd: __dirname}));
+  before('start runner', async () => {
+    r = await new AppRunner().start(__dirname);
+  });
+
+  after(() => r && r.end());
+
+  // tests
+  it('scrolls to active deeplink', async () => {
+    await r.load('/tall-page#foo');
+    await r.sapper.start();
+
+    const scrollY = await r.page.evaluate(() => window.scrollY);
+    assert.ok(scrollY > 0, String(scrollY));
+  });
+
+  it('scrolls to any deeplink if it was already active', async () => {
+    await r.load('/tall-page#foo');
+    await r.sapper.start();
+
+    let scrollY = await r.page.evaluate(() => window.scrollY);
+    assert.ok(scrollY > 0, String(scrollY));
+
+    scrollY = await r.page.evaluate(() => {
+      window.scrollTo(0, 0)
+      return window.scrollY
+    });
+    assert.ok(scrollY === 0, String(scrollY));
+
+    await r.page.click('[href="tall-page#foo"]');
+    scrollY = await r.page.evaluate(() => window.scrollY);
+    assert.ok(scrollY > 0, String(scrollY));
+  });
+
+  it('resets scroll when a link is clicked', async () => {
+    await r.load('/tall-page#foo');
+    await r.sapper.start();
+    await r.sapper.prefetchRoutes();
+
+    await r.page.click('[href="another-tall-page"]');
+    await r.wait();
+
+    assert.equal(
+      await r.page.evaluate(() => window.scrollY),
+      0
+    );
+  });
+
+  it('preserves scroll when a link with sapper-noscroll is clicked', async () => {
+    await r.load('/tall-page#foo');
+    await r.sapper.start();
+    await r.sapper.prefetchRoutes();
+
+    await r.page.click('[href="another-tall-page"][sapper-noscroll]');
+    await r.wait();
+
+    const scrollY = await r.page.evaluate(() => window.scrollY);
+
+    assert.ok(scrollY > 0);
+  });
+
+  it('scrolls into a deeplink on a new page', async () => {
+    await r.load('/tall-page#foo');
+    await r.sapper.start();
+    await r.sapper.prefetchRoutes();
+
+    await r.page.click('[href="another-tall-page#bar"]');
+    await r.wait();
+    assert.equal(await r.text('h1'), 'Another tall page');
+    const scrollY = await r.page.evaluate(() => window.scrollY);
+    assert.ok(scrollY > 0);
+  });
+
+  it('scrolls to a deeplink on a new page no matter the previous scroll position', async () => {
+    await r.load('/a-third-tall-page#top');
+    await r.sapper.start();
+    await r.sapper.prefetchRoutes();
+
+    await r.page.click('a#top');
+    await r.wait();
+    const firstScrollY = await r.page.evaluate(() => window.scrollY);
+
+    await r.load('/a-third-tall-page#bottom');
+    await r.sapper.start();
+    await r.sapper.prefetchRoutes();
+
+    await r.page.click('a#bottom');
+    await r.wait();
+    const secondScrollY = await r.page.evaluate(() => window.scrollY);
+
+    assert.equal(firstScrollY, secondScrollY);
+  });
+
+  it('scrolls to the top when navigating with goto', async () => {
+    await r.load(`/search-form#search`);
+    await r.sapper.start();
+
+    let initialScrollY = await r.page.evaluate(() => window.scrollY);
+    assert.ok(initialScrollY > 0, String(initialScrollY));
+
+    await r.page.click("button#scroll");
+
+    let scrollY = await r.page.evaluate(() => window.scrollY);
+    assert.ok(scrollY === 0, String(scrollY));
+  });
+
+  it('preserves scroll when noscroll: true is passed to goto', async () => {
+    await r.load(`/search-form#search`);
+    await r.sapper.start();
+
+    let initialScrollY = await r.page.evaluate(() => window.scrollY);
+    assert.ok(initialScrollY > 0, String(initialScrollY));
+
+    await r.page.click("button#preserve");
+
+    let scrollY = await r.page.evaluate(() => window.scrollY);
+    assert.ok(scrollY === initialScrollY, String(scrollY));
+  });
+
+  it('survives the tests with no server errors', () => {
+    assert.deepEqual(r.errors, []);
+  });
 });