Skip to content
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

Prefetch CSS only once #4557

Closed
wants to merge 11 commits into from
Closed

Prefetch CSS only once #4557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3c3df2a
test1
Jelenkee Aug 29, 2022
361e02e
fixed test
Jelenkee Aug 30, 2022
97d97ba
removed console.log
Jelenkee Aug 30, 2022
663115a
changeset
Jelenkee Aug 30, 2022
550283c
pnpm-lock
Jelenkee Aug 30, 2022
bae22f5
fixed test again
Jelenkee Aug 30, 2022
9d00b7a
Merge branch 'main' into prefetch-styles
matthewp Aug 31, 2022
3004259
fta
Jelenkee Sep 4, 2022
1256ae4
fta2
Jelenkee Sep 4, 2022
5d019fc
fix: wait for fetch
natemoo-re Sep 7, 2022
c52979f
Merge branch 'main' into prefetch-styles
natemoo-re Sep 7, 2022
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/tender-islands-watch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/prefetch': minor
---

Prefetch CSS files once
10 changes: 9 additions & 1 deletion packages/integrations/prefetch/src/client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import requestIdleCallback from './requestIdleCallback.js';
const events = ['mouseenter', 'touchstart', 'focus'];

const preloaded = new Set<string>();
const loadedStyles = new Set<string>();

function shouldPreload({ href }: { href: string }) {
try {
Expand Down Expand Up @@ -53,7 +54,14 @@ async function preloadHref(link: HTMLAnchorElement) {
const html = parser.parseFromString(contents, 'text/html');
const styles = Array.from(html.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]'));

await Promise.all(styles.map((el) => fetch(el.href)));
await Promise.all(
styles
.filter((el) => !loadedStyles.has(el.href))
.map((el) => {
loadedStyles.add(el.href);
return fetch(el.href);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This promise needed to be returned, which might fix the tests! Watching CI to see.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Jelenkee can you try this?

})
);
} catch {}
}

Expand Down
28 changes: 6 additions & 22 deletions packages/integrations/prefetch/test/basic-prefetch.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,7 @@ test.describe('Basic prefetch', () => {
await devServer.stop();
});

test.describe('prefetches rel="prefetch" links', () => {
test('skips /admin', 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 prefetched'
).toBeTruthy();
await expect(
requests.has(astro.resolveUrl('/contact')),
'/contact was prefetched'
).toBeTruthy();
await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
});
});
testPrefetch();
});

test.describe('build', () => {
Expand All @@ -51,6 +31,10 @@ test.describe('Basic prefetch', () => {
await previewServer.stop();
});

testPrefetch();
});

function testPrefetch() {
test.describe('prefetches rel="prefetch" links', () => {
test('skips /admin', async ({ page, astro }) => {
const requests = new Set();
Expand All @@ -72,5 +56,5 @@ test.describe('Basic prefetch', () => {
await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
});
});
});
}
});
7 changes: 7 additions & 0 deletions packages/integrations/prefetch/test/fixtures/style-prefetch/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

// https://astro.build/config
export default defineConfig({
integrations: [prefetch()],
});
9 changes: 9 additions & 0 deletions packages/integrations/prefetch/test/fixtures/style-prefetch/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"name": "@test/astro-prefetch",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/prefetch": "workspace:*",
"astro": "workspace:*"
}
}
18 changes: 18 additions & 0 deletions packages/integrations/prefetch/test/fixtures/style-prefetch/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
---

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>Home</h1>
<ul>
<li><a href="/style1">1</a></li>
<li><a href="/style2">2</a></li>
</ul>
</body>
</html>
15 changes: 15 additions & 0 deletions packages/integrations/prefetch/test/fixtures/style-prefetch/src/pages/style1.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
---

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style1</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<h1>Style1</h1>
</body>
</html>
15 changes: 15 additions & 0 deletions packages/integrations/prefetch/test/fixtures/style-prefetch/src/pages/style2.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
---

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style2</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<h1>Style2</h1>
</body>
</html>
55 changes: 55 additions & 0 deletions packages/integrations/prefetch/test/style-prefetch.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { expect } from '@playwright/test';
import { testFactory } from './test-utils.js';

const test = testFactory({ root: './fixtures/style-prefetch/' });

test.describe('Style prefetch', () => {
test.describe('dev', () => {
let devServer;

test.beforeEach(async ({ astro }) => {
devServer = await astro.startDevServer();
});

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

testPrefetch();
});

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

testPrefetch();
});

function testPrefetch() {
test.describe('prefetches rel="prefetch" links', () => {
test('style fetching', async ({ page, astro }) => {
const requests = [];

page.on('request', async (request) => requests.push(request.url()));

await page.goto(astro.resolveUrl('/'));

await page.waitForLoadState('networkidle');

await expect(requests.filter(req => req.includes('/style1'))).toBeTruthy();
await expect(requests.filter(req => req.includes('/style2'))).toBeTruthy();
const cssRequestCount = requests.filter(req => req.includes('/main.css')).length;
await expect(cssRequestCount).toBe(1);
});
});
}
});
8 changes: 8 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.