diff --git a/.changeset/hip-wombats-exercise.md b/.changeset/hip-wombats-exercise.md new file mode 100644 index 000000000000..d30d37cbb6bc --- /dev/null +++ b/.changeset/hip-wombats-exercise.md @@ -0,0 +1,11 @@ +--- +'astro': minor +--- + +ViewTransitions component renamed to ClientRouter + +The `` component has been renamed to ``. There are no other changes than the name. The old name will continue to work in Astro 5.x, but will be removed in 6.0. + +This change was done to clarify the role of the component within Astro's View Transitions support. Astro supports View Transitions APIs in a few different ways, and renaming the component makes it more clear that the features you get from the ClientRouter component are slightly different from what you get using the native CSS-based MPA router. + +We still intend to maintain the ClientRouter as before, and it's still important for use-cases that the native support doesn't cover, such as persisting state between pages. diff --git a/examples/starlog/src/components/BaseHead.astro b/examples/starlog/src/components/BaseHead.astro index bb2c64ee8b81..34aff98fbf78 100644 --- a/examples/starlog/src/components/BaseHead.astro +++ b/examples/starlog/src/components/BaseHead.astro @@ -1,5 +1,5 @@ --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; import SEO, { type Props as SEOProps } from './SEO.astro'; import { SiteTitle, SiteDescription } from '../consts'; @@ -17,4 +17,4 @@ const { title = SiteTitle, name = SiteTitle, description = SiteDescription, ...s rel="stylesheet" /> - + diff --git a/examples/view-transitions/src/layouts/Layout.astro b/examples/view-transitions/src/layouts/Layout.astro index 39a73bca0981..fee2c9ef1e1e 100644 --- a/examples/view-transitions/src/layouts/Layout.astro +++ b/examples/view-transitions/src/layouts/Layout.astro @@ -1,6 +1,6 @@ --- import '../styles/styles.css'; -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; import Footer from '../components/Footer.astro'; import Nav from '../components/Nav.astro'; @@ -20,7 +20,7 @@ const { title } = Astro.props as Props; {title} - +
diff --git a/packages/astro/client.d.ts b/packages/astro/client.d.ts index ee91b09bb71c..e828124a1062 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 similarity index 100% rename from packages/astro/components/ViewTransitions.astro rename to 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 35c96e3e0281..780ada07b747 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'; --- View Transition Test - + - -