From 61f0274fd220954ec049f82056da91aa4ddaefcd Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 16 May 2022 12:54:22 -0400 Subject: [PATCH 1/4] allow disableScrollHandling to be called in afterNavigate - fixes #3220 --- .changeset/polite-files-explain.md | 5 +++++ packages/kit/src/runtime/client/client.js | 20 +++++++++---------- .../anchor-afternavigate.svelte | 17 ++++++++++++++++ .../{anchor.svelte => anchor-onmount.svelte} | 0 packages/kit/test/apps/basics/test/test.js | 14 ++++++++++++- packages/kit/types/ambient.d.ts | 2 +- 6 files changed, 46 insertions(+), 12 deletions(-) create mode 100644 .changeset/polite-files-explain.md create mode 100644 packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate.svelte rename packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/{anchor.svelte => anchor-onmount.svelte} (100%) diff --git a/.changeset/polite-files-explain.md b/.changeset/polite-files-explain.md new file mode 100644 index 000000000000..7934d76e786a --- /dev/null +++ b/.changeset/polite-files-explain.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +allow disableScrollHandling to be called in afterNavigate diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 8ee1be9e0bc4..2106b3549b83 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -205,8 +205,9 @@ export function create_client({ target, session, base, trailing_slash }) { * @param {string[]} redirect_chain * @param {boolean} no_cache * @param {{hash?: string, scroll: { x: number, y: number } | null, keepfocus: boolean, details: { replaceState: boolean, state: any } | null}} [opts] + * @param {() => void} [callback] */ - async function update(url, redirect_chain, no_cache, opts) { + async function update(url, redirect_chain, no_cache, opts, callback) { const intent = get_navigation_intent(url); const current_token = (token = {}); @@ -333,7 +334,6 @@ export function create_client({ target, session, base, trailing_slash }) { load_cache.promise = null; load_cache.id = null; autoscroll = true; - updating = false; if (navigation_result.props.page) { page = navigation_result.props.page; @@ -342,7 +342,9 @@ export function create_client({ target, session, base, trailing_slash }) { const leaf_node = navigation_result.state.branch[navigation_result.state.branch.length - 1]; router_enabled = leaf_node?.module.router !== false; - return true; + if (callback) callback(); + + updating = false; } /** @param {import('./types').NavigationResult} result */ @@ -360,12 +362,12 @@ export function create_client({ target, session, base, trailing_slash }) { hydrate: true }); - started = true; - if (router_enabled) { const navigation = { from: null, to: new URL(location.href) }; callbacks.after_navigate.forEach((fn) => fn(navigation)); } + + started = true; } /** @@ -896,18 +898,16 @@ export function create_client({ target, session, base, trailing_slash }) { }); } - const completed = await update(normalized, redirect_chain, false, { + await update(normalized, redirect_chain, false, { scroll, keepfocus, details - }); - - if (completed) { + }, () => { const navigation = { from, to: normalized }; callbacks.after_navigate.forEach((fn) => fn(navigation)); stores.navigating.set(null); - } + }); } /** diff --git a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate.svelte b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate.svelte new file mode 100644 index 000000000000..8ef1440bd4a0 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate.svelte @@ -0,0 +1,17 @@ + + +
They (don't) see me...
+
+

The browser scrolls to me

+
+

I take precedence

+
+ +reload me \ No newline at end of file diff --git a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor.svelte b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-onmount.svelte similarity index 100% rename from packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor.svelte rename to packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-onmount.svelte diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js index 3e56c2de803c..7f7d569425ee 100644 --- a/packages/kit/test/apps/basics/test/test.js +++ b/packages/kit/test/apps/basics/test/test.js @@ -259,7 +259,19 @@ test.describe('Scrolling', () => { page, in_view }) => { - await page.goto('/anchor-with-manual-scroll/anchor#go-to-element'); + await page.goto('/anchor-with-manual-scroll/anchor-onmount#go-to-element'); + expect(await in_view('#abcde')).toBe(true); + }); + + test('url-supplied anchor is ignored with afterNavigate() scrolling on direct page load', async ({ + page, + in_view, + clicknav + }) => { + await page.goto('/anchor-with-manual-scroll/anchor-afternavigate#go-to-element'); + expect(await in_view('#abcde')).toBe(true); + + await clicknav('[href="/anchor-with-manual-scroll/anchor-afternavigate?x=y#go-to-element"]'); expect(await in_view('#abcde')).toBe(true); }); diff --git a/packages/kit/types/ambient.d.ts b/packages/kit/types/ambient.d.ts index 99d31d0ffd8d..2e28fb7a29c9 100644 --- a/packages/kit/types/ambient.d.ts +++ b/packages/kit/types/ambient.d.ts @@ -84,7 +84,7 @@ declare module '$app/env' { */ declare module '$app/navigation' { /** - * If called when the page is being updated following a navigation (in `onMount` or an action, for example), this disables SvelteKit's built-in scroll handling. + * If called when the page is being updated following a navigation (in `onMount` or `afterNavigate` or an action, for example), this disables SvelteKit's built-in scroll handling. * This is generally discouraged, since it breaks user expectations. */ export function disableScrollHandling(): void; From 96586191cd4486c86523bd9449df915fbf06ea4e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 23 May 2022 12:12:34 -0400 Subject: [PATCH 2/4] fix tests --- .../basics/src/routes/anchor-with-manual-scroll/index.svelte | 2 +- packages/kit/test/apps/basics/test/test.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/index.svelte b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/index.svelte index 9a292a21b748..7608357a88c0 100644 --- a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/index.svelte +++ b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/index.svelte @@ -1,5 +1,5 @@

Welcome to a test project

-Anchor demo +Anchor demo