Support prefetch in core (#8951)

Co-authored-by: Sarah Rainsberger <[email protected]>
withastro · Nov 8, 2023 · 38e21d1 · 38e21d1
1 parent 23c9a30
commit 38e21d1
Show file tree

Hide file tree

Showing 23 changed files with 688 additions and 41 deletions.
diff --git a/.changeset/sixty-laws-argue.md b/.changeset/sixty-laws-argue.md
@@ -0,0 +1,21 @@
+---
+'astro': minor
+---
+
+Prefetching is now supported in core
+
+You can enable prefetching for your site with the `prefetch: true` config. It is enabled by default when using [View Transitions](https://docs.astro.build/en/guides/view-transitions/) and can also be used to configure the `prefetch` behaviour used by View Transitions.
+
+You can enable prefetching by setting `prefetch:true` in your Astro config:
+
+```js 
+// astro.config.js
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  prefetch: true
+})
+```
+
+This replaces the `@astrojs/prefetch` integration, which is now deprecated and will eventually be removed. 
+Visit the [Prefetch guide](https://docs.astro.build/en/guides/prefetch/) for more information.
diff --git a/packages/astro/client.d.ts b/packages/astro/client.d.ts
@@ -121,6 +121,10 @@ declare module 'astro:transitions/client' {
 	export const navigate: TransitionRouterModule['navigate'];
 }
 
+declare module 'astro:prefetch' {
+	export { prefetch, PrefetchOptions } from 'astro/prefetch';
+}
+
 declare module 'astro:middleware' {
 	export * from 'astro/middleware/namespace';
 }

diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
@@ -25,11 +25,9 @@ const { fallback = 'animate' } = Astro.props;
 <meta name="astro-view-transitions-enabled" content="true" />
 <meta name="astro-view-transitions-fallback" content={fallback} />
 <script>
-	import {
-		supportsViewTransitions,
-		transitionEnabledOnThisPage,
-		navigate,
-	} from 'astro:transitions/client';
+	import { supportsViewTransitions, navigate } from 'astro:transitions/client';
+	// NOTE: import from `astro/prefetch` as `astro:prefetch` requires the `prefetch` config to be enabled
+	import { init } from 'astro/prefetch';
 	export type Fallback = 'none' | 'animate' | 'swap';
 
 	function getFallback(): Fallback {
@@ -40,21 +38,6 @@ const { fallback = 'animate' } = Astro.props;
 		return 'animate';
 	}
 
-	// Prefetching
-	function maybePrefetch(pathname: string) {
-		if (document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
-		// @ts-expect-error: connection might exist
-		if (navigator.connection) {
-			// @ts-expect-error: connection does exist
-			let conn = navigator.connection;
-			if (conn.saveData || /(2|3)g/.test(conn.effectiveType || '')) return;
-		}
-		let link = document.createElement('link');
-		link.setAttribute('rel', 'prefetch');
-		link.setAttribute('href', pathname);
-		document.head.append(link);
-	}
-
 	if (supportsViewTransitions || getFallback() !== 'none') {
 		document.addEventListener('click', (ev) => {
 			let link = ev.target;
@@ -89,23 +72,9 @@ const { fallback = 'animate' } = Astro.props;
 			});
 		});
 
-		['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
-			document.addEventListener(
-				evName,
-				(ev) => {
-					if (ev.target instanceof HTMLAnchorElement) {
-						let el = ev.target;
-						if (
-							el.origin === location.origin &&
-							el.pathname !== location.pathname &&
-							transitionEnabledOnThisPage()
-						) {
-							maybePrefetch(el.pathname);
-						}
-					}
-				},
-				{ passive: true, capture: true }
-			);
-		});
+		// @ts-expect-error injected by vite-plugin-transitions for treeshaking
+		if (!__PREFETCH_DISABLED__) {
+			init({ prefetchAll: true });
+		}
 	}
 </script>
diff --git a/packages/astro/e2e/fixtures/prefetch/astro.config.mjs b/packages/astro/e2e/fixtures/prefetch/astro.config.mjs
@@ -0,0 +1,6 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	prefetch: true
+});
diff --git a/packages/astro/e2e/fixtures/prefetch/package.json b/packages/astro/e2e/fixtures/prefetch/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@e2e/prefetch",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/prefetch/src/pages/index.astro b/packages/astro/e2e/fixtures/prefetch/src/pages/index.astro
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <h1>Prefetch</h1>
+    <a id="prefetch-default" href="/prefetch-default">default</a>
+    <br>
+    <a id="prefetch-false" href="/prefetch-false" data-astro-prefetch="false">false</a>
+    <br>
+    <a id="prefetch-tap" href="/prefetch-tap" data-astro-prefetch="tap">tap</a>
+    <br>
+    <a id="prefetch-hover" href="/prefetch-hover" data-astro-prefetch="hover">hover</a>
+    <br>
+    <button id="prefetch-manual">manual</button>
+    <br>
+    <span>Scroll down to trigger viewport prefetch</span>
+    <!-- Large empty space to test viewport -->
+    <div style="height: 1000px;"></div>
+    <a id="prefetch-viewport" href="/prefetch-viewport" data-astro-prefetch="viewport">viewport</a>
+    <script>
+      // @ts-nocheck
+      import { prefetch } from 'astro:prefetch'
+      document.getElementById('prefetch-manual').addEventListener('click', () => {
+        prefetch('/prefetch-manual', { with: 'link' })
+      })
+    </script>
+  </body>
+</html>
diff --git a/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-default.astro b/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-default.astro
@@ -0,0 +1 @@
+<h1>Prefetch default</h1>
diff --git a/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-false.astro b/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-false.astro
@@ -0,0 +1 @@
+<h1>Prefetch false</h1>
diff --git a/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-hover.astro b/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-hover.astro
@@ -0,0 +1 @@
+<h1>Prefetch hover</h1>
diff --git a/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-tap.astro b/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-tap.astro
@@ -0,0 +1 @@
+<h1>Prefetch tap</h1>
diff --git a/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-viewport.astro b/packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-viewport.astro
@@ -0,0 +1 @@
+<h1>Prefetch viewport</h1>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/prefetch.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/prefetch.astro
@@ -0,0 +1,6 @@
+---
+import Layout from '../components/Layout.astro';
+---
+<Layout>
+  <a id="prefetch-one" href="/one">Go to one with prefetch on hover</a>
+</Layout>
diff --git a/packages/astro/e2e/prefetch.test.js b/packages/astro/e2e/prefetch.test.js
@@ -0,0 +1,163 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory({
+	root: './fixtures/prefetch/',
+});
+
+test.describe('Prefetch (default)', () => {
+	let devServer;
+	/** @type {string[]} */
+	const reqUrls = [];
+
+	test.beforeAll(async ({ astro }) => {
+		devServer = await astro.startDevServer();
+	});
+
+	test.beforeEach(async ({ page }) => {
+		page.on('request', (req) => {
+			reqUrls.push(new URL(req.url()).pathname);
+		});
+	});
+
+	test.afterEach(() => {
+		reqUrls.length = 0;
+	});
+
+	test.afterAll(async () => {
+		await devServer.stop();
+	});
+
+	test('Link without data-astro-prefetch should not prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-default');
+	});
+
+	test('data-astro-prefetch="false" should not prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-false');
+	});
+
+	test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-tap');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-tap').click(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-tap');
+	});
+
+	test('data-astro-prefetch="hover" should prefetch on hover', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-hover');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-hover').hover(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-hover');
+	});
+
+	test('data-astro-prefetch="viewport" should prefetch on viewport', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-viewport');
+		// Scroll down to show the element
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-viewport').scrollIntoViewIfNeeded(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-viewport');
+		expect(page.locator('link[rel="prefetch"][href$="/prefetch-viewport"]')).toBeDefined();
+	});
+
+	test('manual prefetch() works once', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-manual');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-manual').click(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-manual');
+		expect(page.locator('link[rel="prefetch"][href$="/prefetch-manual"]')).toBeDefined();
+
+		// prefetch again should have no effect
+		await page.locator('#prefetch-manual').click();
+		expect(reqUrls.filter((u) => u.includes('/prefetch-manual')).length).toEqual(1);
+	});
+});
+
+test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'tap')", () => {
+	let devServer;
+	/** @type {string[]} */
+	const reqUrls = [];
+
+	test.beforeAll(async ({ astro }) => {
+		devServer = await astro.startDevServer({
+			prefetch: {
+				prefetchAll: true,
+				defaultStrategy: 'tap',
+			},
+		});
+	});
+
+	test.beforeEach(async ({ page }) => {
+		page.on('request', (req) => {
+			reqUrls.push(new URL(req.url()).pathname);
+		});
+	});
+
+	test.afterEach(() => {
+		reqUrls.length = 0;
+	});
+
+	test.afterAll(async () => {
+		await devServer.stop();
+	});
+
+	test('Link without data-astro-prefetch should prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-default');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-default').click(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-default');
+	});
+
+	test('data-astro-prefetch="false" should not prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-false');
+	});
+
+	test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-tap');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-tap').click(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-tap');
+	});
+
+	test('data-astro-prefetch="hover" should prefetch on hover', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-hover');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-hover').hover(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-hover');
+	});
+
+	test('data-astro-prefetch="viewport" should prefetch on viewport', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-viewport');
+		// Scroll down to show the element
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-viewport').scrollIntoViewIfNeeded(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-viewport');
+		expect(page.locator('link[rel="prefetch"][href$="/prefetch-viewport"]')).toBeDefined();
+	});
+});
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
@@ -901,4 +901,19 @@ test.describe('View Transitions', () => {
 		let announcer = page.locator('.astro-route-announcer');
 		await expect(announcer, 'should have content').toHaveCSS('width', '1px');
 	});
+
+	test('should prefetch on hover by default', async ({ page, astro }) => {
+		/** @type {string[]} */
+		const reqUrls = [];
+		page.on('request', (req) => {
+			reqUrls.push(new URL(req.url()).pathname);
+		});
+		await page.goto(astro.resolveUrl('/prefetch'));
+		expect(reqUrls).not.toContainEqual('/one');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-one').hover(),
+		]);
+		expect(reqUrls).toContainEqual('/one');
+	});
 });
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -78,7 +78,8 @@
       "default": "./dist/core/middleware/namespace.js"
     },
     "./transitions": "./dist/transitions/index.js",
-    "./transitions/router": "./dist/transitions/router.js"
+    "./transitions/router": "./dist/transitions/router.js",
+    "./prefetch": "./dist/prefetch/index.js"
   },
   "imports": {
     "#astro/*": "./dist/*.js"