fix: correctly preload links on mousedown/touchstart (#13486)

fixes #13466

This PR changes the link preload behaviour so that it only ignores a link which has already triggered a preload. Previously, it would start ignoring a link the moment it was hovered on. This caused a link that only preloads on mousedown to always be ignored since a user's mouse would hover on the link first, causing it to be ignored on the subsequent mousedown event. This PR also fixes the data-sveltekit-preload tests that did not manage to catch this regression by changing the tests to use playwright mouse hover simulation instead of programmatically dispatching the mouseover event which didn't complete before firing the other events.

Author: teemingc

.changeset/mighty-kiwis-laugh.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: correctly preload links on `mousedown`/`touchstart`

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));
 			}
 		}

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte

@@ -1,3 +1,7 @@
+<a id="eager" href="/data-sveltekit/preload-code/target/eager" data-sveltekit-preload-code="eager"
+	>eager</a
+>
+
 <div style="height: 200vh"></div>
 
 <a

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-data/+page.svelte

@@ -6,3 +6,5 @@
 		>three</a
 	>
 </div>
+
+<a id="tap" href="/data-sveltekit/preload-data/target" data-sveltekit-preload-data="tap">tap</a>

packages/kit/test/apps/basics/test/client.test.js

@@ -827,32 +827,56 @@ 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);
+		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);
 
 		// 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 page.locator('#viewport').dispatchEvent('touchstart');
+		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 page.locator('#hover').dispatchEvent('touchstart');
+		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;
+		responses.length = 0;
+		await page.locator('#tap').hover();
 		await page.locator('#tap').dispatchEvent('touchstart');
-		await Promise.all([page.waitForTimeout(100), page.waitForLoadState('networkidle')]);
-		expect(requests.length).toBeGreaterThanOrEqual(1);
+		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 +899,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 +908,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 +917,22 @@ 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 page.locator('#tap').dispatchEvent('touchstart');
+		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 ({