From 293d4e3f1b93fc226f121c9ec040e89f1517a982 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 21 Jul 2022 17:04:11 +0200 Subject: [PATCH 1/4] [fix] Prevent rerender when route state did not change Fixes #3732 --- .changeset/red-rivers-approve.md | 5 +++++ packages/kit/src/runtime/client/client.js | 8 ++++++++ 2 files changed, 13 insertions(+) create mode 100644 .changeset/red-rivers-approve.md diff --git a/.changeset/red-rivers-approve.md b/.changeset/red-rivers-approve.md new file mode 100644 index 000000000000..7b95003c288f --- /dev/null +++ b/.changeset/red-rivers-approve.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +Prevent rerender when route state did not change diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index bd07f012ba6f..85ee7a0e182a 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -650,6 +650,7 @@ export function create_client({ target, session, base, trailing_slash }) { /** @type {Array} */ let branch = []; + let is_previous_branch = true; /** @type {Record} */ let stuff = root_stuff; @@ -686,6 +687,7 @@ export function create_client({ target, session, base, trailing_slash }) { (stuff_changed && previous.uses.stuff); if (changed_since_last_render) { + is_previous_branch = false; /** @type {Record} */ let props = {}; @@ -826,6 +828,12 @@ export function create_client({ target, session, base, trailing_slash }) { } } + if (is_previous_branch) { + // Nothing changed, don't rerender + // We can end up in here when $session is updated but not used in load + return; + } + return await get_navigation_result_from_branch({ url, params, From 13714a64db53226b740e0c8f2866bec9058fc56d Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 22 Jul 2022 10:41:46 +0200 Subject: [PATCH 2/4] adjust code to fix only session case, tests --- packages/kit/src/runtime/client/client.js | 11 +++------ .../change-detection/session/unused.svelte | 23 ++++++++++++++++++ .../load/change-detection/session/used.svelte | 24 +++++++++++++++++++ .../kit/test/apps/basics/test/client.test.js | 12 ++++++++++ 4 files changed, 62 insertions(+), 8 deletions(-) create mode 100644 packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte create mode 100644 packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 85ee7a0e182a..b49bc947824a 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -117,6 +117,9 @@ export function create_client({ target, session, base, trailing_slash }) { if (!ready) return; session_id += 1; + const current_load_uses_session = current.branch.some((node) => node?.uses.session); + if (!current_load_uses_session) return; + update(new URL(location.href), [], true); }); ready = true; @@ -650,7 +653,6 @@ export function create_client({ target, session, base, trailing_slash }) { /** @type {Array} */ let branch = []; - let is_previous_branch = true; /** @type {Record} */ let stuff = root_stuff; @@ -687,7 +689,6 @@ export function create_client({ target, session, base, trailing_slash }) { (stuff_changed && previous.uses.stuff); if (changed_since_last_render) { - is_previous_branch = false; /** @type {Record} */ let props = {}; @@ -828,12 +829,6 @@ export function create_client({ target, session, base, trailing_slash }) { } } - if (is_previous_branch) { - // Nothing changed, don't rerender - // We can end up in here when $session is updated but not used in load - return; - } - return await get_navigation_result_from_branch({ url, params, diff --git a/packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte b/packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte new file mode 100644 index 000000000000..1bb285544d1e --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte @@ -0,0 +1,23 @@ + + + + +

{count}

+ diff --git a/packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte b/packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte new file mode 100644 index 000000000000..b49df9d0b470 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte @@ -0,0 +1,24 @@ + + + + +

{count}

+ diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js index b64954822ca2..101ef73ed690 100644 --- a/packages/kit/test/apps/basics/test/client.test.js +++ b/packages/kit/test/apps/basics/test/client.test.js @@ -358,6 +358,18 @@ test.describe('Load', () => { expect(await page.textContent('h2')).toBe('x: b: 2'); }); + test('load function is only called on session change when used in load', async ({ page }) => { + await page.goto('/load/change-detection/session/used'); + expect(await page.textContent('h2')).toBe('1'); + await page.click('button'); + expect(await page.textContent('h2')).toBe('2'); + + await page.goto('/load/change-detection/session/unused'); + expect(await page.textContent('h2')).toBe('1'); + await page.click('button'); + expect(await page.textContent('h2')).toBe('1'); + }); + test('accessing url.hash from load errors and suggests using page store', async ({ page }) => { await page.goto('/load/url-hash#please-dont-send-me-to-load'); expect(await page.textContent('#message')).toBe( From ddfbe23fc2ade440a80e0866194d33252e43f728 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 22 Jul 2022 10:59:37 +0200 Subject: [PATCH 3/4] format --- .../load/change-detection/session/unused.svelte | 10 +++++----- .../routes/load/change-detection/session/used.svelte | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte b/packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte index 1bb285544d1e..1189bedaff07 100644 --- a/packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte +++ b/packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte @@ -3,7 +3,7 @@ export async function load() { return { props: { - // Needs to be an object, else Svelte will do by-value-comparison and skip rerender + // Needs to be an object, else Svelte will do by-value-comparison and skip rerender obj: {} } }; @@ -11,13 +11,13 @@

{count}

- + diff --git a/packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte b/packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte index b49df9d0b470..a473de611056 100644 --- a/packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte +++ b/packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte @@ -1,10 +1,10 @@

{count}

- + From 9c43a5c510fa3b2a55e23f6adec90aedbd36f4d5 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 22 Jul 2022 11:19:49 +0200 Subject: [PATCH 4/4] fix test expectation --- packages/kit/test/apps/basics/test/test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js index a2fbed968578..cc11de1e810f 100644 --- a/packages/kit/test/apps/basics/test/test.js +++ b/packages/kit/test/apps/basics/test/test.js @@ -1079,11 +1079,11 @@ test.describe('$app/stores', () => { await page.goto('/store'); expect(await page.textContent('h1')).toBe('Test'); - expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 2' : 'Calls: 1'); + expect(await page.textContent('h2')).toBe('Calls: 1'); await clicknav('a[href="/store/result"]'); expect(await page.textContent('h1')).toBe('Result'); - expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 2' : 'Calls: 0'); + expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 1' : 'Calls: 0'); const oops = await page.evaluate(() => window.oops); expect(oops).toBeUndefined();