Adds a prefetch integration for near-instant page navigations (#3725)

* Adds a basic @astrojs/prefetch integration

* adding tests for custom selectors

* missed in last commit

* Adding a few docs, removing the option for `selectors` to be an element array

* adding an option for the concurrency limit

* fixing test for updated integration options

* Update packages/labs/prefetch/src/client.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* nit: removing the NodeJS.Timer type to allow typescript to infer the return

* updating docs for default selector with ~=

* Skip prefetching on 2G connections, or when data saver is enabled

* refactor: moving to packages/integrations, Astro Labs TBD down the road

* README typo fix

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

1 files changed, 72 insertions, 0 deletions

diff --git a/packages/integrations/prefetch/test/custom-selectors.test.js b/packages/integrations/prefetch/test/custom-selectors.test.js
new file mode 100644
index 000000000..2ed5b9753
--- /dev/null
+++ b/packages/integrations/prefetch/test/custom-selectors.test.js
@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+import prefetch from '../dist/index.js';
+
+const test = testFactory({
+	root: './fixtures/basic-prefetch/',
+	integrations: [
+		prefetch({
+			selector: 'a[href="/contact"]'
+		}),
+	]
+});
+
+test.describe('Custom prefetch selectors', () => {
+	test.describe('dev', () => {
+		let devServer;
+
+		test.beforeEach(async ({ astro }) => {
+			devServer = await astro.startDevServer();
+		});
+
+		test.afterEach(async () => {
+			await devServer.stop();
+		});
+
+		test.describe('prefetches links by custom selector', () => {
+			test('only prefetches /contact', async ({ page, astro }) => {
+				const requests = new Set();
+
+				page.on('request', async (request) => requests.add(request.url()));
+
+				await page.goto(astro.resolveUrl('/'));
+
+				await page.waitForLoadState('networkidle');
+
+				await expect(requests.has(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
+				await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
+				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+			});
+		});
+	});
+
+	test.describe('build', () => {
+		let previewServer;
+
+		test.beforeAll(async ({ astro }) => {
+			await astro.build();
+			previewServer = await astro.preview();
+		});
+
+		// important: close preview server (free up port and connection)
+		test.afterAll(async () => {
+			await previewServer.stop();
+		});
+
+		test.describe('prefetches links by custom selector', () => {
+			test('only prefetches /contact', async ({ page, astro }) => {
+				const requests = new Set();
+
+				page.on('request', async (request) => requests.add(request.url()));
+
+				await page.goto(astro.resolveUrl('/'));
+
+				await page.waitForLoadState('networkidle');
+
+				await expect(requests.has(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
+				await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
+				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+			});
+		});
+	});
+});