Skip to content

fix(prefetch): Fix "tap" prefetch strategy when view transitions are enabled #14235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Oct 9, 2025
Merged

fix(prefetch): Fix "tap" prefetch strategy when view transitions are enabled #14235

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6ad9d16
add onPageLoad call to tap strategy
toxeeec Aug 16, 2025
14ddd9a
add changeset
toxeeec Aug 16, 2025
7b636b5
Merge branch 'main' into tap-view-transitions
toxeeec Aug 21, 2025
008ccff
add tests
toxeeec Aug 30, 2025
4d63433
format
toxeeec Aug 30, 2025
f593b34
Merge branch 'main' into tap-view-transitions
toxeeec Aug 30, 2025
24f4573
rename test
toxeeec Aug 30, 2025
cbd51ac
Merge branch 'main' into tap-view-transitions
toxeeec Sep 1, 2025
183daf7
fix tests
toxeeec Sep 12, 2025
e1ce619
Merge branch 'main' into tap-view-transitions
toxeeec Sep 12, 2025
4d7560d
remove onPageLoad, add event listener directly on the document
toxeeec Oct 9, 2025
cfa9165
Merge branch 'main' into tap-view-transitions
toxeeec Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/young-hornets-post.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Fixes a bug where the "tap" prefetch strategy worked only on the first clicked link with view transitions enabled
14 changes: 14 additions & 0 deletions packages/astro/e2e/fixtures/prefetch/src/components/ViewTransitionsLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
import { ClientRouter } from 'astro:transitions';
---

<html>
<head>
<title>Testing</title>
<ClientRouter />
</head>
<body>
<slot />
</body>
</html>

10 changes: 10 additions & 0 deletions packages/astro/e2e/fixtures/prefetch/src/pages/view-transitions/1.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
import ViewTransitionsLayout from "../../components/ViewTransitionsLayout.astro";
---

<ViewTransitionsLayout>
<h1>View Transitions 1</h1>
<br>
<br>
<a href="/view-transitions/2">2</a>
</ViewTransitionsLayout>
7 changes: 7 additions & 0 deletions packages/astro/e2e/fixtures/prefetch/src/pages/view-transitions/2.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
import ViewTransitionsLayout from "../../components/ViewTransitionsLayout.astro";
---

<ViewTransitionsLayout>
<h1>View Transitions 2</h1>
</ViewTransitionsLayout>
8 changes: 8 additions & 0 deletions packages/astro/e2e/fixtures/prefetch/src/pages/view-transitions/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
import ViewTransitionsLayout from "../../components/ViewTransitionsLayout.astro";
---

<ViewTransitionsLayout>
<h1>View Transitions index</h1>
<a href="/view-transitions/1">1</a>
</ViewTransitionsLayout>
90 changes: 90 additions & 0 deletions packages/astro/e2e/prefetch.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,24 @@ async function expectUrlNotPrefetched(url, page) {
expect(reqUrls).not.toContainEqual(url);
}

/**
* @param {import('@playwright/test').Page} page
* @param {string} selector
*/
async function mouseDown(page, selector) {
const box = await page.locator(selector).boundingBox();
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
await page.mouse.down();
}

/**
* @param {import('@playwright/test').Page} page
*/
async function waitForPageLoad(page) {
await page.waitForEvent('response');
await new Promise(res => setTimeout(res, 500)); // wait for transition to finish
}

test.describe('Prefetch (default)', () => {
let devServer;

Expand Down Expand Up @@ -393,3 +411,75 @@ test.describe('Prefetch (default), Experimental ({ clientPrerender: true })', ()
expect(await scriptIsInHead(page, 'prefetch-load')).toBeTruthy();
});
});

test.describe('Prefetch View Transitions', () => {
let devServer;

test.afterEach(async () => {
await devServer.stop();
});

test('"load" strategy', async ({ page, astro }) => {
devServer = await astro.startDevServer({
prefetch: {
defaultStrategy: 'load',
},
});
await page.goto(astro.resolveUrl('/view-transitions'));
await expectUrlPrefetched('/view-transitions/1', page);

await Promise.all([waitForPageLoad(page), page.click('a')]);
await expectUrlPrefetched('/view-transitions/2', page);
});

test('"viewport" strategy', async ({ page, astro }) => {
devServer = await astro.startDevServer({
prefetch: {
defaultStrategy: 'viewport',
},
});
await page.goto(astro.resolveUrl('/view-transitions'));
await expectUrlPrefetched('/view-transitions/1', page);

await Promise.all([waitForPageLoad(page), page.click('a')]);
await expectUrlPrefetched('/view-transitions/2', page);
});

test('"tap" strategy', async ({ page, astro }) => {
devServer = await astro.startDevServer({
prefetch: {
defaultStrategy: 'tap',
},
});
await page.goto(astro.resolveUrl('/view-transitions'));

await expectUrlNotPrefetched('/view-transitions/1', page);
await mouseDown(page, 'a');
await expectUrlPrefetched('/view-transitions/1', page);

await Promise.all([waitForPageLoad(page), page.mouse.up()]);

await expectUrlNotPrefetched('/view-transitions/2', page);
await mouseDown(page, 'a')
await expectUrlPrefetched('/view-transitions/2', page);
});

test('"hover" strategy', async ({ page, astro }) => {
devServer = await astro.startDevServer({
prefetch: {
defaultStrategy: 'hover',
},
});
await page.goto(astro.resolveUrl('/view-transitions'));

await expectUrlNotPrefetched('/view-transitions/1', page);
await page.locator('a').hover();
await expectUrlPrefetched('/view-transitions/1', page);

await Promise.all([waitForPageLoad(page), page.click('a')]);

await expectUrlNotPrefetched('/view-transitions/2', page);
await page.locator('a').hover();
await expectUrlPrefetched('/view-transitions/2', page);
});
});
19 changes: 18 additions & 1 deletion packages/astro/src/prefetch/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@ export function init(defaultOpts?: InitOptions) {
* Prefetch links with higher priority when the user taps on them
*/
function initTapStrategy() {
for (const event of ['touchstart', 'mousedown']) {
const events = ['touchstart', 'mousedown'];
for (const event of events) {
document.body.addEventListener(
event,
(e) => {
Expand All @@ -64,6 +65,22 @@ function initTapStrategy() {
{ passive: true },
);
}

onPageLoad(() => {
for (const anchor of document.getElementsByTagName('a')) {
if (listenedAnchors.has(anchor)) continue;
if (elMatchesStrategy(anchor, 'tap')) {
listenedAnchors.add(anchor);
for (const event of events) {
anchor.addEventListener(
event,
(e) => prefetch((e.target as HTMLAnchorElement).href, { ignoreSlowConnection: true }),
{ passive: true },
);
}
}
}
});
}

/**
Expand Down