diff options
Diffstat (limited to 'packages')
19 files changed, 81 insertions, 68 deletions
diff --git a/packages/astro/client.d.ts b/packages/astro/client.d.ts index ee91b09bb..e828124a1 100644 --- a/packages/astro/client.d.ts +++ b/packages/astro/client.d.ts @@ -116,8 +116,12 @@ declare module 'astro:transitions' { export const fade: TransitionModule['fade']; export const createAnimationScope: TransitionModule['createAnimationScope']; - type ViewTransitionsModule = typeof import('./components/ViewTransitions.astro'); - export const ViewTransitions: ViewTransitionsModule['default']; + type ClientRouterModule = typeof import('./components/ClientRouter.astro'); + /** + * @deprecated The ViewTransitions component has been renamed to ClientRouter + */ + export const ViewTransitions: ClientRouterModule['default']; + export const ClientRouter: ClientRouterModule['default']; } declare module 'astro:transitions/client' { diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ClientRouter.astro index 8bda7b780..8bda7b780 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ClientRouter.astro diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro index 35c96e3e0..780ada07b 100644 --- a/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro +++ b/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro @@ -1,10 +1,10 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- <html lang="en"> <head> <title>View Transition Test</title> - <ViewTransitions /> + <ClientRouter /> <script is:inline> // let playwright know when navigate() is done document.addEventListener('astro:before-swap', (e) => { diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro index 7a3284dd4..0d0e7a4c7 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro @@ -1,5 +1,5 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; import { HTMLAttributes } from 'astro/types'; interface Props extends HTMLAttributes<'html'> {} @@ -7,7 +7,7 @@ interface Props extends HTMLAttributes<'html'> {} <html {...Astro.props}> <head> <title>Testing</title> - <ViewTransitions /> + <ClientRouter /> </head> <body> <main transition:animate="slide"> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro index 8643f273f..e10f01605 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro @@ -1,5 +1,5 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; import DarkMode from './DarkMode.astro'; interface Props { @@ -8,25 +8,27 @@ interface Props { const { link } = Astro.props as Props; --- + <html> <head> <title>Testing</title> - {link ? <link rel="stylesheet" href={link} > : ''} + {link ? <link rel="stylesheet" href={link} /> : ''} <style> main { max-width: 900px; margin: auto; - } + } </style> - <link rel="stylesheet" href="/styles.css"> - <ViewTransitions handleForms /> + <link rel="stylesheet" href="/styles.css" /> + <ClientRouter handleForms /> <DarkMode /> - <meta name="script-executions" content="0"> - <meta charset="utf-8"> + <meta name="script-executions" content="0" /> + <meta charset="utf-8" /> <script is:inline defer> { // Increment a global to see if this is running more than once - globalThis.scriptExecutions = globalThis.scriptExecutions == null ? -1 : globalThis.scriptExecutions; + globalThis.scriptExecutions = + globalThis.scriptExecutions == null ? -1 : globalThis.scriptExecutions; globalThis.scriptExecutions++; const el = document.querySelector('[name="script-executions"]'); el.setAttribute('content', globalThis.scriptExecutions); diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro index 12c8d4469..63148cb61 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro @@ -1,21 +1,21 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- + <html> <head> - <ViewTransitions/> + <ClientRouter /> </head> <body> <p>Local transitions</p> - <slot/> + <slot /> <script> - document.addEventListener("astro:after-swap", () => { - document.documentElement.setAttribute("class", "blue"); - document.documentElement.setAttribute("animations", "" + document.getAnimations().length); + document.addEventListener('astro:after-swap', () => { + document.documentElement.setAttribute('class', 'blue'); + document.documentElement.setAttribute('animations', '' + document.getAnimations().length); }); </script> - </body> - <style> + </body><style> p { transition: color 1s; } diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro index 7bee46f51..3106e75fc 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro @@ -1,29 +1,30 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- + <html> <head> - <ViewTransitions /> + <ClientRouter /> </head> <body> <h1>Abort</h1> </body> </html> <script> - import {navigate } from 'astro:transitions/client'; + import { navigate } from 'astro:transitions/client'; document.addEventListener('astro:before-preparation', (e) => { const originalLoader = e.loader; e.loader = async () => { const result = await originalLoader(); - if (e.to.href.endsWith("/two")) { + if (e.to.href.endsWith('/two')) { // delay loading of /two await new Promise((resolve) => setTimeout(resolve, 1100)); } - } + }; }); // starts later, but is faster and overtakes the slower navigation - setTimeout(()=>navigate("/one"), 400); + setTimeout(() => navigate('/one'), 400); // starts now, but is to slow to keep its lead - navigate("/two"); + navigate('/two'); </script> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro index 4d4f9e934..468b71cb0 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro @@ -1,9 +1,9 @@ --- -import { ViewTransitions, fade } from 'astro:transitions'; +import { ClientRouter, fade } from 'astro:transitions'; --- <html transition:animate="none"> <head> - <ViewTransitions /> + <ClientRouter /> </head> <body> <h1 transition:name="h1" transition:animate={fade({duration:500})}>Abort</h1> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro index 0eaff1165..927071ac5 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro @@ -1,12 +1,13 @@ --- -import { ViewTransitions } from "astro:transitions"; -import ClickToNavigate from "../components/ClickToNavigate.jsx" +import { ClientRouter } from 'astro:transitions'; +import ClickToNavigate from '../components/ClickToNavigate.jsx'; --- + <html> <head> - <ViewTransitions /> + <ClientRouter /> </head> <body> - <ClickToNavigate id="react-client-load-navigate-button" to="/two" client:load/> + <ClickToNavigate id="react-client-load-navigate-button" to="/two" client:load /> </body> </html> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro index 07d4b0f00..5b99d5414 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro @@ -1,16 +1,17 @@ --- -import { ViewTransitions } from "astro:transitions"; +import { ClientRouter } from 'astro:transitions'; --- + <html> <head> - <ViewTransitions /> + <ClientRouter /> </head> <body> - <button id="open" onclick="modal.showModal()">Open Modal</button> - <dialog id="modal"> - <form method="dialog"> - <button id="close">Close</button> - </form> - </dialog> + <button id="open" onclick="modal.showModal()">Open Modal</button> + <dialog id="modal"> + <form method="dialog"> + <button id="close">Close</button> + </form> + </dialog> </body> </html> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro index 7a62fbe47..aa07f8141 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro @@ -1,10 +1,10 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- <html> <head> - <ViewTransitions handleForms/> + <ClientRouter handleForms /> <meta charset="UTF-8" /> </head> <body> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro index bbb9ef105..b557853c7 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro @@ -1,7 +1,7 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; -// For the test fixture, we import the script but we don't use the <ViewTransitions /> component +// For the test fixture, we import the script but we don't use the <ClientRouter /> component // While this seems to be some strange mistake, // it might be realistic, e.g. in a configurable CommonHead component @@ -10,10 +10,11 @@ interface Props { } const { transitions } = Astro.props; --- + <html> <head> <title>Half-Baked</title> - {transitions && <ViewTransitions />} + {transitions && <ClientRouter />} </head> <body> <main> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro index d95e3a11b..1cb3bc96d 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro @@ -1,11 +1,11 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- <html> <head> <title>Testing</title> - <ViewTransitions /> + <ClientRouter /> </head> <body> <p id="one">One</p> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro index e0afede95..f3f4c72af 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro @@ -1,11 +1,11 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- <html> <head> <title>Testing</title> - <ViewTransitions /> + <ClientRouter /> </head> <body> <p id="two">Two</p> diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 181994cfa..878b9c5fe 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -114,7 +114,7 @@ test.describe('View Transitions', () => { expect(loads.length, 'There should only be 1 page load').toEqual(1); }); - test('Moving to a page without ViewTransitions triggers a full page navigation', async ({ + test('Moving to a page without ClientRouter triggers a full page navigation', async ({ page, astro, }) => { @@ -125,7 +125,7 @@ test.describe('View Transitions', () => { let p = page.locator('#one'); await expect(p, 'should have content').toHaveText('Page 1'); - // Go to page 3 which does *not* have ViewTransitions enabled + // Go to page 3 which does *not* have ClientRouter enabled await page.click('#click-three'); p = page.locator('#three'); await expect(p, 'should have content').toHaveText('Page 3'); @@ -136,7 +136,7 @@ test.describe('View Transitions', () => { ).toEqual(2); }); - test('Moving within a page without ViewTransitions does not trigger a full page navigation', async ({ + test('Moving within a page without ClientRouter does not trigger a full page navigation', async ({ page, astro, }) => { @@ -146,7 +146,7 @@ test.describe('View Transitions', () => { let p = page.locator('#one'); await expect(p, 'should have content').toHaveText('Page 1'); - // Go to page 3 which does *not* have ViewTransitions enabled + // Go to page 3 which does *not* have ClientRouter enabled await page.click('#click-three'); p = page.locator('#three'); await expect(p, 'should have content').toHaveText('Page 3'); @@ -167,14 +167,14 @@ test.describe('View Transitions', () => { ).toEqual(2); }); - test('Moving from a page without ViewTransitions w/ back button', async ({ page, astro }) => { + test('Moving from a page without ClientRouter w/ back button', async ({ page, astro }) => { const loads = collectLoads(page); // Go to page 1 await page.goto(astro.resolveUrl('/one')); let p = page.locator('#one'); await expect(p, 'should have content').toHaveText('Page 1'); - // Go to page 3 which does *not* have ViewTransitions enabled + // Go to page 3 which does *not* have ClientRouter enabled await page.click('#click-three'); p = page.locator('#three'); await expect(p, 'should have content').toHaveText('Page 3'); @@ -606,7 +606,7 @@ test.describe('View Transitions', () => { await expect(loads.length, 'There should only be 1 page load').toEqual(1); }); - test('Importing ViewTransitions w/o using the component must not mess with history', async ({ + test('Importing ClientRouter w/o using the component must not mess with history', async ({ page, astro, }) => { @@ -706,7 +706,7 @@ test.describe('View Transitions', () => { expect(loads.length, 'There should be 2 page load').toEqual(2); }); - test('Scroll position is restored on back navigation from page w/o ViewTransitions', async ({ + test('Scroll position is restored on back navigation from page w/o ClientRouter', async ({ page, astro, }) => { @@ -716,7 +716,7 @@ test.describe('View Transitions', () => { let locator = page.locator('#click-external'); await expect(locator).toBeInViewport(); - // Go to a page that has not enabled ViewTransitions + // Go to a page that has not enabled ClientRouter await page.click('#click-external'); locator = page.locator('#three'); await expect(locator).toHaveText('Page 3'); diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts index 3150aa861..bf10f9a8f 100644 --- a/packages/astro/src/transitions/router.ts +++ b/packages/astro/src/transitions/router.ts @@ -428,7 +428,7 @@ async function transition( // see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString preparationEvent.newDocument.querySelectorAll('noscript').forEach((el) => el.remove()); - // If ViewTransitions is not enabled on the incoming page, do a full page load to it. + // If ClientRouter is not enabled on the incoming page, do a full page load to it. // Unless this was a form submission, in which case we do not want to trigger another mutation. if ( !preparationEvent.newDocument.querySelector('[name="astro-view-transitions-enabled"]') && diff --git a/packages/astro/src/transitions/vite-plugin-transitions.ts b/packages/astro/src/transitions/vite-plugin-transitions.ts index e8122cac4..ea0576477 100644 --- a/packages/astro/src/transitions/vite-plugin-transitions.ts +++ b/packages/astro/src/transitions/vite-plugin-transitions.ts @@ -29,7 +29,10 @@ export default function astroTransitions({ settings }: { settings: AstroSettings if (id === resolvedVirtualModuleId) { return ` export * from "astro/virtual-modules/transitions.js"; - export { default as ViewTransitions } from "astro/components/ViewTransitions.astro"; + export { + default as ViewTransitions, + default as ClientRouter + } from "astro/components/ClientRouter.astro"; `; } if (id === resolvedVirtualClientModuleId) { @@ -47,7 +50,7 @@ export default function astroTransitions({ settings }: { settings: AstroSettings } }, transform(code, id) { - if (id.includes('ViewTransitions.astro') && id.endsWith('.ts')) { + if (id.includes('ClientRouter.astro') && id.endsWith('.ts')) { const prefetchDisabled = settings.config.prefetch === false; return code.replace('__PREFETCH_DISABLED__', JSON.stringify(prefetchDisabled)); } diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts index 7a712eb5c..bf373841a 100644 --- a/packages/astro/src/types/public/config.ts +++ b/packages/astro/src/types/public/config.ts @@ -835,7 +835,7 @@ export interface AstroUserConfig { * @type {boolean | object} * @description * Enable prefetching for links on your site to provide faster page transitions. - * (Enabled by default on pages using the `<ViewTransitions />` router. Set `prefetch: false` to opt out of this behaviour.) + * (Enabled by default on pages using the `<ClientRouter />` router. Set `prefetch: false` to opt out of this behaviour.) * * This configuration automatically adds a prefetch script to every page in the project * giving you access to the `data-astro-prefetch` attribute. @@ -857,7 +857,7 @@ export interface AstroUserConfig { * @type {boolean} * @description * Enable prefetching for all links, including those without the `data-astro-prefetch` attribute. - * This value defaults to `true` when using the `<ViewTransitions />` router. Otherwise, the default value is `false`. + * This value defaults to `true` when using the `<ClientRouter />` router. Otherwise, the default value is `false`. * * ```js * prefetch: { diff --git a/packages/db/test/fixtures/ticketing-example/src/layouts/Layout.astro b/packages/db/test/fixtures/ticketing-example/src/layouts/Layout.astro index 114216824..482f10462 100644 --- a/packages/db/test/fixtures/ticketing-example/src/layouts/Layout.astro +++ b/packages/db/test/fixtures/ticketing-example/src/layouts/Layout.astro @@ -1,5 +1,5 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; import 'open-props/normalize'; import 'open-props/style'; @@ -19,7 +19,7 @@ const { title } = Astro.props; <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="generator" content={Astro.generator} /> <title>{title}</title> - <ViewTransitions handleForms /> + <ClientRouter handleForms /> </head> <body> <slot /> |