Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Fix to get Integration Data even when a page is transitioned by ViewTransition (#10079)

Browse source 
* Fix to get Integration Data even when a page is transitioned by ViewTransition.

* add test case

* add changeset

* fix test

* Fix typo
This commit is contained in:
ktym4a 2024-02-20 20:09:20 +07:00 committed by GitHub
parent b92d35f102
commit 80f8996514
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 75 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tidy-laws-think.md Normal file
View file

@ -0,0 +1,5 @@
---
"astro": patch
---
Fix integrationData fetch to always be called even if View Transition is enabled.

22
packages/astro/e2e/dev-toolbar.test.js
View file

@ -53,6 +53,28 @@ test.describe('Dev Toolbar', () => {
await expect(astroWindow).not.toBeVisible();
});
test('show integration app', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/view-transition-a'));
let toolbar = page.locator('astro-dev-toolbar');
let appButton = toolbar.locator('button[data-app-id="astro"]');
await appButton.click();
let astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro"]');
let astroToolbarCards = await astroAppCanvas.locator('astro-dev-toolbar-card');
await page.waitForSelector('astro-dev-toolbar-card');
await expect(astroToolbarCards.first()).toBeVisible();
let consolePromise = page.waitForEvent('console');
await page.click('#go-to-b');
await consolePromise;
astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro"]');
astroToolbarCards = await astroAppCanvas.locator('astro-dev-toolbar-card');
await page.waitForSelector('astro-dev-toolbar-card');
await expect(astroToolbarCards.first()).toBeVisible();
});
test('xray shows highlights and tooltips', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));

18
packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro Normal file
View file

@ -0,0 +1,18 @@
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
<head>
<title>View Transition Test</title>
<ViewTransitions />
<script is:inline>
// let playwright know when navigate() is done
document.addEventListener('astro:before-swap', (e) => {
e.viewTransition.ready.then(()=>console.log("ready"))
});
</script>
</head>
<body>
<slot />
</body>
</html>

7
packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-a.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Layout from '../layout/Layout.astro'
---
<Layout>
<div>Test</div>
<a href="/view-transition-b" id="go-to-b">Go to B</a>
</Layout>

7
packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-b.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Layout from '../layout/Layout.astro'
---
<Layout>
<div>Test</div>
<a href="/view-transition-a" id="go-to-a">Go to A</a>
</Layout>

28
packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
View file

@ -34,27 +34,31 @@ export default {
createCanvas();
document.addEventListener('astro:after-swap', createCanvas);
document.addEventListener('astro:after-swap', fetchIntegrationData);
eventTarget.addEventListener('app-toggled', async (event) => {
resetDebugButton();
if (!(event instanceof CustomEvent)) return;
if (event.detail.state === true) {
if (!integrationData)
fetch('https://astro.build/api/v1/dev-overlay/', {
cache: 'no-cache',
})
.then((res) => res.json())
.then((data) => {
integrationData = data;
integrationData.data = integrationData.data.map((integration) => {
return integration;
});
refreshIntegrationList();
});
if (!integrationData) fetchIntegrationData();
}
});
function fetchIntegrationData() {
fetch('https://astro.build/api/v1/dev-overlay/', {
cache: 'no-cache',
})
.then((res) => res.json())
.then((data) => {
integrationData = data;
integrationData.data = integrationData.data.map((integration) => {
return integration;
});
refreshIntegrationList();
});
}
function createCanvas() {
const links: { icon: Icon; name: string; link: string }[] = [
{