diff options
6 files changed, 75 insertions, 12 deletions
diff --git a/.changeset/tidy-laws-think.md b/.changeset/tidy-laws-think.md new file mode 100644 index 000000000..9455bfb15 --- /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 82ae166fa..a4dcc7b20 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 000000000..35c96e3e0 --- /dev/null +++ b/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro @@ -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> 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 000000000..a3c94ddae --- /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' +--- +<Layout> + <div>Test</div> + <a href="/view-transition-b" id="go-to-b">Go to B</a> +</Layout> 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 000000000..33bb801f4 --- /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' +--- +<Layout> + <div>Test</div> + <a href="/view-transition-a" id="go-to-a">Go to A</a> +</Layout> 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 64fcd4577..27a7b2287 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 }[] = [ { |