diff --git a/templates/src/client/app.ts b/templates/src/client/app.ts index a409203..c188502 100644 --- a/templates/src/client/app.ts +++ b/templates/src/client/app.ts @@ -1,4 +1,4 @@ -import { nextTick } from 'svelte'; +import { tick } from 'svelte'; import RootComponent, * as RootComponentStatic from '__ROOT__'; import ErrorComponent from '__ERROR__'; import { @@ -147,7 +147,7 @@ export function navigate(target: Target, id: number, noscroll?: boolean, hash?: }); } -function render(props: any, nullable_depth: number, scroll: ScrollPosition, noscroll: boolean, hash: string, token: {}) { +async function render(props: any, nullable_depth: number, scroll: ScrollPosition, noscroll: boolean, hash: string, token: {}) { if (current_token !== token) return; if (root_component) { @@ -162,12 +162,16 @@ function render(props: any, nullable_depth: number, scroll: ScrollPosition, nosc level.component = null; root_component.$set({ child: props.child }); - nextTick(() => { - // then render new stuff - // TODO do we need to call `flush` before doing this? - level.component = component; - root_component.$set(props); - }); + await tick(); + + // then render new stuff + // TODO do we need to call `flush` before doing this? + level.component = component; + root_component.$set(props); + + // if we need to scroll to a deep link, we need to + // wait for the current update to happen first + if (!noscroll && hash) await tick(); } else { // first load — remove SSR'd contents const start = document.querySelector('#sapper-head-start'); @@ -193,6 +197,7 @@ function render(props: any, nullable_depth: number, scroll: ScrollPosition, nosc if (hash) { // scroll is an element id (from a hash), we need to compute y. const deep_linked = document.querySelector(hash); + if (deep_linked) { scroll = { x: 0, diff --git a/test/apps/basics/test.ts b/test/apps/basics/test.ts index f7e1ac9..c27b519 100644 --- a/test/apps/basics/test.ts +++ b/test/apps/basics/test.ts @@ -20,19 +20,18 @@ describe('basics', function() { let prefetchRoutes: () => Promise; let prefetch: (href: string) => Promise; let goto: (href: string) => Promise; + let title: () => Promise; // hooks before(async () => { await build({ cwd: __dirname }); runner = new AppRunner(__dirname, '__sapper__/build/server/server.js'); - ({ base, page, start, prefetchRoutes, prefetch, goto } = await runner.start()); + ({ base, page, start, prefetchRoutes, prefetch, goto, title } = await runner.start()); }); after(() => runner.end()); - const title = () => page.$eval('h1', node => node.textContent); - it('serves /', async () => { await page.goto(base); diff --git a/test/apps/preloading/test.ts b/test/apps/preloading/test.ts index dccd667..8445c86 100644 --- a/test/apps/preloading/test.ts +++ b/test/apps/preloading/test.ts @@ -1,4 +1,3 @@ -import * as path from 'path'; import * as assert from 'assert'; import * as puppeteer from 'puppeteer'; import { build } from '../../../api'; @@ -17,19 +16,18 @@ describe('preloading', function() { // helpers let start: () => Promise; let prefetchRoutes: () => Promise; + let title: () => Promise; // hooks before(async () => { await build({ cwd: __dirname }); runner = new AppRunner(__dirname, '__sapper__/build/server/server.js'); - ({ base, page, start, prefetchRoutes } = await runner.start()); + ({ base, page, start, prefetchRoutes, title } = await runner.start()); }); after(() => runner.end()); - const title = () => page.$eval('h1', node => node.textContent); - it('serializes Set objects returned from preload', async () => { await page.goto(`${base}/preload-values/set`); diff --git a/test/apps/scroll/src/routes/another-tall-page.html b/test/apps/scroll/src/routes/another-tall-page.html index d66879b..a67395a 100644 --- a/test/apps/scroll/src/routes/another-tall-page.html +++ b/test/apps/scroll/src/routes/another-tall-page.html @@ -1,2 +1,4 @@ +

Another tall page

+

element

\ No newline at end of file diff --git a/test/apps/scroll/src/routes/tall-page.html b/test/apps/scroll/src/routes/tall-page.html index 8c79fb7..2fdbd9d 100644 --- a/test/apps/scroll/src/routes/tall-page.html +++ b/test/apps/scroll/src/routes/tall-page.html @@ -8,6 +8,8 @@ }); +

A tall page

+ scroll to foo
diff --git a/test/apps/scroll/test.ts b/test/apps/scroll/test.ts index cd9209e..6bae656 100644 --- a/test/apps/scroll/test.ts +++ b/test/apps/scroll/test.ts @@ -14,13 +14,14 @@ describe('scroll', function() { // helpers let start: () => Promise; let prefetchRoutes: () => Promise; + let title: () => Promise; // hooks before(async () => { await build({ cwd: __dirname }); runner = new AppRunner(__dirname, '__sapper__/build/server/server.js'); - ({ base, page, start, prefetchRoutes } = await runner.start()); + ({ base, page, start, prefetchRoutes, title } = await runner.start()); }); after(() => runner.end()); @@ -85,6 +86,7 @@ describe('scroll', function() { await page.click('[href="another-tall-page#bar"]'); await wait(50); + assert.equal(await title(), 'Another tall page'); const scrollY = await page.evaluate(() => window.scrollY); assert.ok(scrollY > 0); }); diff --git a/test/apps/store/test.ts b/test/apps/store/test.ts index a8eab1c..b2e8cfa 100644 --- a/test/apps/store/test.ts +++ b/test/apps/store/test.ts @@ -12,19 +12,18 @@ describe('store', function() { // helpers let start: () => Promise; + let title: () => Promise; // hooks before(async () => { await build({ cwd: __dirname }); runner = new AppRunner(__dirname, '__sapper__/build/server/server.js'); - ({ base, page, start } = await runner.start()); + ({ base, page, start, title } = await runner.start()); }); after(() => runner.end()); - const title = () => page.$eval('h1', node => node.textContent); - it('renders store props', async () => { await page.goto(`${base}/store`);