From 7f4dcd5336598c187685590fb21ebba6099cc67c Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Fri, 21 Feb 2025 15:03:27 +0800 Subject: [PATCH 1/5] fix data-sveltekit-preload tests --- .../data-sveltekit/preload-code/+page.svelte | 2 + .../data-sveltekit/preload-data/+page.svelte | 2 + .../kit/test/apps/basics/test/client.test.js | 64 +++++++++++++------ 3 files changed, 50 insertions(+), 18 deletions(-) diff --git a/packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte b/packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte index dbe1987a91d8..88c894be38cd 100644 --- a/packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte +++ b/packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte @@ -1,3 +1,5 @@ +eager +
three + +tap diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js index 53f16cc2b158..4e9f2d6b42cf 100644 --- a/packages/kit/test/apps/basics/test/client.test.js +++ b/packages/kit/test/apps/basics/test/client.test.js @@ -827,32 +827,51 @@ test.describe('Invalidation', () => { test.describe('data-sveltekit attributes', () => { test('data-sveltekit-preload-code', async ({ page }) => { /** @type {string[]} */ - const requests = []; - page.on('request', (r) => { - requests.push(r.url()); + const responses = []; + + const nodes_location = process.env.DEV + ? '.svelte-kit/generated/client/nodes/' + : '/_app/immutable/nodes/'; + + page.on('response', async (response) => { + const url = response.url(); + if (url.includes(nodes_location)) { + responses.push(url); + } }); // eager await page.goto('/data-sveltekit/preload-code'); - expect(requests.length).toBeGreaterThanOrEqual(1); + // expect 4 nodes on initial load: root layout, root error, current page, and eager preload + expect(responses.length).toEqual(4); // viewport - requests.length = 0; + responses.length = 0; page.locator('#viewport').scrollIntoViewIfNeeded(); - await Promise.all([page.waitForTimeout(100), page.waitForLoadState('networkidle')]); - expect(requests.length).toBeGreaterThanOrEqual(1); + await page.locator('#viewport').hover(); + await Promise.all([ + page.waitForTimeout(100), // wait for preloading to start + page.waitForLoadState('networkidle') // wait for preloading to finish + ]); + expect(responses.length).toEqual(1); // hover - requests.length = 0; - await page.locator('#hover').dispatchEvent('mousemove'); - await Promise.all([page.waitForTimeout(100), page.waitForLoadState('networkidle')]); - expect(requests.length).toBeGreaterThanOrEqual(1); + responses.length = 0; + await page.locator('#hover').hover(); + await Promise.all([ + page.waitForTimeout(100), // wait for preloading to start + page.waitForLoadState('networkidle') // wait for preloading to finish + ]); + expect(responses.length).toEqual(1); // tap - requests.length = 0; - await page.locator('#tap').dispatchEvent('touchstart'); - await Promise.all([page.waitForTimeout(100), page.waitForLoadState('networkidle')]); - expect(requests.length).toBeGreaterThanOrEqual(1); + responses.length = 0; + await page.locator('#tap').hover(); + await Promise.all([ + page.waitForTimeout(100), // wait for preloading to start + page.waitForLoadState('networkidle') // wait for preloading to finish + ]); + expect(responses.length).toEqual(1); }); test('data-sveltekit-preload-data', async ({ page }) => { @@ -875,7 +894,7 @@ test.describe('data-sveltekit attributes', () => { }); await page.goto('/data-sveltekit/preload-data'); - await page.locator('#one').dispatchEvent('mousemove'); + await page.locator('#one').hover(); await Promise.all([ page.waitForTimeout(100), // wait for preloading to start page.waitForLoadState('networkidle') // wait for preloading to finish @@ -884,7 +903,7 @@ test.describe('data-sveltekit attributes', () => { requests.length = 0; await page.goto('/data-sveltekit/preload-data'); - await page.locator('#two').dispatchEvent('mousemove'); + await page.locator('#two').hover(); await Promise.all([ page.waitForTimeout(100), // wait for preloading to start page.waitForLoadState('networkidle') // wait for preloading to finish @@ -893,12 +912,21 @@ test.describe('data-sveltekit attributes', () => { requests.length = 0; await page.goto('/data-sveltekit/preload-data'); - await page.locator('#three').dispatchEvent('mousemove'); + await page.locator('#three').hover(); await Promise.all([ page.waitForTimeout(100), // wait for preloading to start page.waitForLoadState('networkidle') // wait for preloading to finish ]); expect(requests.length).toBe(0); + + requests.length = 0; + await page.goto('/data-sveltekit/preload-data'); + await page.locator('#tap').hover(); + await Promise.all([ + page.waitForTimeout(100), // wait for preloading to start + page.waitForLoadState('networkidle') // wait for preloading to finish + ]); + expect(requests.length).toBe(1); }); test('data-sveltekit-preload-data network failure does not trigger navigation', async ({ From b62ecd2a8afac6b0655749ecf7995665eae8f5e5 Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Fri, 21 Feb 2025 15:05:16 +0800 Subject: [PATCH 2/5] save the anchor only if the preload was triggered --- packages/kit/src/runtime/client/client.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index def673a01d20..16cecc7fe092 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -1677,8 +1677,6 @@ function setup_preload() { const a = find_anchor(element, container); if (!a || a === current_a) return; - current_a = a; - const { url, external, download } = get_link_info(a, base, app.hash); if (external || download) return; @@ -1689,6 +1687,7 @@ function setup_preload() { if (!options.reload && !same_url) { if (priority <= options.preload_data) { + current_a = a; const intent = await get_navigation_intent(url, false); if (intent) { if (DEV) { @@ -1707,6 +1706,7 @@ function setup_preload() { } } } else if (priority <= options.preload_code) { + current_a = a; void _preload_code(/** @type {URL} */ (url)); } } From e53b6c714081120b54f4e38b41932d00e9924d24 Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Fri, 21 Feb 2025 15:06:00 +0800 Subject: [PATCH 3/5] changeset --- .changeset/mighty-kiwis-laugh.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/mighty-kiwis-laugh.md diff --git a/.changeset/mighty-kiwis-laugh.md b/.changeset/mighty-kiwis-laugh.md new file mode 100644 index 000000000000..6b7869bbc2a7 --- /dev/null +++ b/.changeset/mighty-kiwis-laugh.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +fix: correctly preload links on `mousedown`/`touchstart` From acbaa2512791edc7efd4f24ffe2f12b3f9967f32 Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Fri, 21 Feb 2025 15:14:15 +0800 Subject: [PATCH 4/5] format --- .../src/routes/data-sveltekit/preload-code/+page.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte b/packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte index 88c894be38cd..55687b739bfd 100644 --- a/packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte +++ b/packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte @@ -1,4 +1,6 @@ -eager +eager
From db98c344c7602562f1af65b68b87735df050e778 Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Fri, 21 Feb 2025 15:47:57 +0800 Subject: [PATCH 5/5] fix tests --- packages/kit/test/apps/basics/test/client.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js index 4e9f2d6b42cf..df67597356a2 100644 --- a/packages/kit/test/apps/basics/test/client.test.js +++ b/packages/kit/test/apps/basics/test/client.test.js @@ -842,6 +842,8 @@ test.describe('data-sveltekit attributes', () => { // eager await page.goto('/data-sveltekit/preload-code'); + await page.locator('#eager').hover(); + await page.locator('#eager').dispatchEvent('touchstart'); // expect 4 nodes on initial load: root layout, root error, current page, and eager preload expect(responses.length).toEqual(4); @@ -849,6 +851,7 @@ test.describe('data-sveltekit attributes', () => { responses.length = 0; page.locator('#viewport').scrollIntoViewIfNeeded(); await page.locator('#viewport').hover(); + await page.locator('#viewport').dispatchEvent('touchstart'); await Promise.all([ page.waitForTimeout(100), // wait for preloading to start page.waitForLoadState('networkidle') // wait for preloading to finish @@ -858,6 +861,7 @@ test.describe('data-sveltekit attributes', () => { // hover responses.length = 0; await page.locator('#hover').hover(); + await page.locator('#hover').dispatchEvent('touchstart'); await Promise.all([ page.waitForTimeout(100), // wait for preloading to start page.waitForLoadState('networkidle') // wait for preloading to finish @@ -867,6 +871,7 @@ test.describe('data-sveltekit attributes', () => { // tap responses.length = 0; await page.locator('#tap').hover(); + await page.locator('#tap').dispatchEvent('touchstart'); await Promise.all([ page.waitForTimeout(100), // wait for preloading to start page.waitForLoadState('networkidle') // wait for preloading to finish @@ -922,6 +927,7 @@ test.describe('data-sveltekit attributes', () => { requests.length = 0; await page.goto('/data-sveltekit/preload-data'); await page.locator('#tap').hover(); + await page.locator('#tap').dispatchEvent('touchstart'); await Promise.all([ page.waitForTimeout(100), // wait for preloading to start page.waitForLoadState('networkidle') // wait for preloading to finish