mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Fix to get Integration Data even when a page is transitioned by ViewTransition (#10079)
* 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:
parent
b92d35f102
commit
80f8996514
6 changed files with 75 additions and 12 deletions
5
.changeset/tidy-laws-think.md
Normal file
5
.changeset/tidy-laws-think.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
"astro": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix integrationData fetch to always be called even if View Transition is enabled.
|
|
@ -53,6 +53,28 @@ test.describe('Dev Toolbar', () => {
|
||||||
await expect(astroWindow).not.toBeVisible();
|
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 }) => {
|
test('xray shows highlights and tooltips', async ({ page, astro }) => {
|
||||||
await page.goto(astro.resolveUrl('/'));
|
await page.goto(astro.resolveUrl('/'));
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -34,27 +34,31 @@ export default {
|
||||||
createCanvas();
|
createCanvas();
|
||||||
|
|
||||||
document.addEventListener('astro:after-swap', createCanvas);
|
document.addEventListener('astro:after-swap', createCanvas);
|
||||||
|
document.addEventListener('astro:after-swap', fetchIntegrationData);
|
||||||
|
|
||||||
eventTarget.addEventListener('app-toggled', async (event) => {
|
eventTarget.addEventListener('app-toggled', async (event) => {
|
||||||
resetDebugButton();
|
resetDebugButton();
|
||||||
if (!(event instanceof CustomEvent)) return;
|
if (!(event instanceof CustomEvent)) return;
|
||||||
|
|
||||||
if (event.detail.state === true) {
|
if (event.detail.state === true) {
|
||||||
if (!integrationData)
|
if (!integrationData) 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 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() {
|
function createCanvas() {
|
||||||
const links: { icon: Icon; name: string; link: string }[] = [
|
const links: { icon: Icon; name: string; link: string }[] = [
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in a new issue