Skip to content

Latest commit

 

History

History
85 lines (63 loc) · 2.99 KB

astro-410.mdx

File metadata and controls

85 lines (63 loc) · 2.99 KB
Raw
title description publishDate authors coverImage socialImage lang
Astro 4.1
Astro 4.1, our first release of the new year, is here! This release includes new accessibility audit rules, an extended `client:visible` directive, and more.
January 4, 2024
erika
ema
matthew
nate
bjorn
/src/content/blog/_images/astro-410/post-header-4.1.webp
/src/content/blog/_images/astro-410/og-image-4.1.webp
en

After a small break for the holidays, we're back with a new release of Astro! Astro 4.1 includes a number of bug fixes and improvements. As we're all getting back into the swing of things, this release is a bit smaller than usual, but we're all excited to get back to work on Astro and have some exciting things planned for 2024!

Highlights include:

To take advantage of the latest features, make sure you're running the latest version of Astro. You can upgrade to Astro 4.1 by running the @astrojs/upgrade command:

npx @astrojs/upgrade

or by running the upgrade command for your package manager:

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

New accessibility audit rules

We've added two new audit rules for the dev toolbar. You will now be warned about:

  • Unsupported ARIA attributes
  • Missing attributes required for ARIA role

Both these rules help ensure that the elements on your page have correct and valid ARIA roles.

Extended client:visible directive

The client:visible directive now accepts a rootMargin option, which allows you to specify a margin around the viewport to calculate visibility. This allows a component to be hydrated when it is close to the viewport instead of waiting for it to become visible.

<!-- Load component when it's within 200px away from entering the viewport -->
<Component client:visible={{rootMargin: "200px"}} />

Custom cookie encoding and decoding

Cookie encoding/decoding can now be customized through new encode and decode functions when setting and getting cookies.

For example, you can bypass the default encoding via encodeURIComponent when adding a URL as part of a cookie:

---
import { encodeCookieValue } from './cookies';
Astro.cookies.set('url', Astro.url.toString(), {
  // Override the default encoding so that URI components are not encoded
  encode: (value) => encodeCookieValue(value),
});
---

Later, you can decode the URL in the same way:

---
import { decodeCookieValue } from './cookies';
const url = Astro.cookies.get('url', {
  decode: (value) => decodeCookieValue(value),
});
---

Bug Fixes

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