Minor Changes
-
#7686
ec745d689
Thanks @matthewp! - Redirects configurationThis change moves the
redirects
configuration out of experimental. If you were previously using experimental redirects, remove the following experimental flag:experimental: { redirects: true, }
If you have been waiting for stabilization before using redirects, now you can do so. Check out the docs on redirects to learn how to use this built-in feature.
-
#7707
3a6e42e19
Thanks @ottomated! - Improved hoisted script bundlingAstro's static analysis to determine which
<script>
tags to bundle together just got a little smarter!Astro create bundles that optimize script usage between pages and place them in the head of the document so that they are downloaded as early as possible. One limitation to Astro's existing approach has been that you could not dynamically use hoisted scripts. Each page received the same, all-inclusive bundle whether or not every script was needed on that page.
Now, Astro has improved the static analysis to take into account the actual imports used.
For example, Astro would previously bundle the
<script>
s from both the<Tab>
and<Accordian>
component for the following library that re-exports multiple components:@matthewp/my-astro-lib
export { default as Tabs } from './Tabs.astro'; export { default as Accordion } from './Accordion.astro';
Now, when an Astro page only uses a single component, Astro will send only the necessary script to the page. A page that only imports the
<Accordian>
component will not receive any<Tab>
component's scripts:--- import { Accordion } from '@matthewp/my-astro-lib'; ---
You should now see more efficient performance with Astro now supporting this common library re-export pattern.
-
#7511
6a12fcecb
Thanks @matthewp! - Built-in View Transitions Support (experimental)Astro now supports view transitions through the new
<ViewTransitions />
component and thetransition:animate
(and associated) directives. View transitions are a great fit for content-oriented sites, and we see it as the best path to get the benefits of client-side routing (smoother transitions) without sacrificing the more simple mental model of MPAs.Enable support for view transitions in Astro 2.9 by adding the experimental flag to your config:
import { defineConfig } from 'astro/config'; export default defineConfig({ experimental: { viewTransitions: true, }, });
This enables you to use the new APIs added.
This is a component which acts as the router for transitions between pages. Add it to the
<head>
section of each individual page where transitions should occur in the client as you navigate away to another page, instead of causing a full page browser refresh. To enable support throughout your entire app, add the component in some common layout or component that targets the<head>
of every page.CommonHead.astro
--- import { ViewTransitions } from 'astro:transitions'; --- <meta charset="utf-8" /> <title>{Astro.props.title}</title> <ViewTransitions />
With only this change, your app will now route completely in-client. You can then add transitions to individual elements using the
transition:animate
directive.Animations
Add
transition:animate
to any element to use Astro's built-in animations.<header transition:animate="slide"></header>
In the above, Astro's
slide
animation will cause the<header>
element to slide out to the left, and then slide in from the right when you navigate away from the page.You can also customize these animations using any CSS animation properties, for example, by specifying a duration:
--- import { slide } from 'astro:transition'; --- <header transition:animate={slide({ duration: 200 })}></header>
Continue learning
Check out the client-side routing docs to learn more.
Patch Changes
-
#7701
019b797bf
Thanks @bluwy! - Fix redirects map object-form value validation -
#7704
d78db48ac
Thanks @bluwy! - Fix absolute path handling when passingroot
,srcDir
,publicDir
,outDir
,cacheDir
,build.client
, andbuild.server
configs in Windows -
#7713
d088351f5
Thanks @natemoo-re! - Update warning whengetStaticPaths
is detected but a route is not prerendered.