Astro 2.10: Persistent State in View Transitions

By
Matthew Phillips

Astro 2.10 is out with improvements to our experimental View transitions support. Additionally, we’ve released our first early beta of Astro 3.0. Read on to learn more!

If you already have Astro installed, you can upgrade it to 2.10 by running the upgrade command in your project (using your package manager of choice):

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

While you’re at it, upgrade any @astrojs/* integrations and adapters you have installed, too!

Persistent UI in View Transitions

Our first release of the <ViewTransition /> router brought smooth transitions between pages but still caused any stateful islands or elements to be re-rendered.

In 2.10, we’ve added a new transition:persist directive to the API to address this.

With this directive, you can keep the state of DOM elements and islands from the old page when transitioning to the new page. Here’s a demo of it in action.

For example, to keep a video playing across page navigation, add transition:persist to the element:

<video controls="" autoplay="" transition:persist>
  <source
    src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4"
    type="video/mp4"
  />
</video>

This <video> element, with its current state, will be moved over to the next page (if the video also exists on that page).

Likewise, this feature works with any client-side framework component island. In this example, a counter’s state is preserved and moved to the new page:

<Counter count={5} client:load transition:persist />

See our View Transitions Guide to learn more on usage.

First Look at Astro 3.0

We’ve released our first beta of Astro 3.0 as astro@3.0.0-beta.0. If you’re feeling adventurous, try it today! So far this release contains mostly deprecations and removals of very old patterns. However, you may experience some compatibility issues or breaking changes. Be warned, this early preview is changing rapidly, right under your feet!

Some noteworthy changes include:

  • HTML is now compressed by default.
  • API routes now used capitalized method names, for example: export function GET() ...
  • Adapters can inform Astro of which features they support, such as splitting entrypoints per page and Sharp / Squoosh compatibility.

See the changelog for a full list of the changes. We currently do not have documentation for the breaking changes but are working on a guide. As we approach 3.0 there will be more information about the changes.

You can expect a release candidate once all of the breaking changes are complete, and we hope to release the stable 3.0 in late August / early September.

More

Additional bug fixes and integration features are included in this release. Check out the release notes to learn more.