Skip to content

astro@2.9.0
Compare
Choose a tag to compare
@astrobot-houston astrobot-houston released this 20 Jul 16:12
· 2081 commits to main since this release
astro@2.9.0
92382ea
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Minor Changes

  • #7686 ec745d689 Thanks @matthewp! - Redirects configuration

    This 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 bundling

    Astro'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 the transition: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 passing root, srcDir, publicDir, outDir, cacheDir, build.client, and build.server configs in Windows

  • #7713 d088351f5 Thanks @natemoo-re! - Update warning when getStaticPaths is detected but a route is not prerendered.

Assets 2