diff --git a/.changeset/tidy-laws-think.md b/.changeset/tidy-laws-think.md
new file mode 100644
index 0000000000..9455bfb153
--- /dev/null
+++ b/.changeset/tidy-laws-think.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fix integrationData fetch to always be called even if View Transition is enabled.
diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js
index 82ae166fa1..a4dcc7b20f 100644
--- a/packages/astro/e2e/dev-toolbar.test.js
+++ b/packages/astro/e2e/dev-toolbar.test.js
@@ -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('/'));
diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro
new file mode 100644
index 0000000000..35c96e3e02
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro
@@ -0,0 +1,18 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+---
+
+
+ View Transition Test
+
+
+
+
+
+
+
diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-a.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-a.astro
new file mode 100644
index 0000000000..a3c94ddae9
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-a.astro
@@ -0,0 +1,7 @@
+---
+import Layout from '../layout/Layout.astro'
+---
+
+ Test
+ Go to B
+
diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-b.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-b.astro
new file mode 100644
index 0000000000..33bb801f4f
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-b.astro
@@ -0,0 +1,7 @@
+---
+import Layout from '../layout/Layout.astro'
+---
+
+ Test
+ Go to A
+
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
index 64fcd45776..27a7b22873 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
@@ -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 }[] = [
{