Astro 4.1

Por
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

Después de un pequeño descanso por las vacaciones, ¡volvemos con un nuevo lanzamiento de Astro! Astro 4.1 incluye varias correcciones de bugs y mejoras. Como todos estamos volviendo a la rutina, este lanzamiento es un poco más pequeño de lo habitual, pero todos estamos emocionados de volver al trabajo en Astro y tenemos algunas cosas emocionantes planeadas para 2024!

Los aspectos destacados incluyen:

Para aprovechar las últimas características, asegúrate de estar ejecutando la última versión de Astro. Puedes actualizar a Astro 4.1 ejecutando el comando @astrojs/upgrade:

npx @astrojs/upgrade

o ejecutando el comando de actualización para tu gestor de paquetes:

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

Nuevas reglas de auditoría de accesibilidad

Hemos añadido dos nuevas reglas de auditoría para la dev toolbar. Ahora se te advertirá sobre:

  • Atributos ARIA no soportados
  • Atributos faltantes requeridos para el rol ARIA

Ambas reglas ayudan a asegurar que los elementos de tu página tengan roles ARIA correctos y válidos.

Directiva client:visible extendida

La directiva client:visible ahora acepta una opción rootMargin, que te permite especificar un margen alrededor del viewport para calcular la visibilidad. Esto permite que un componente se hidrate cuando está cerca del viewport en lugar de esperar a que se vuelva visible.

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

La codificación/decodificación de cookies ahora puede personalizarse a través de nuevas funciones encode y decode al establecer y obtener cookies.

Por ejemplo, puedes omitir la codificación por defecto vía encodeURIComponent al añadir una URL como parte de una 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),
});
---

Luego, puedes decodificar la URL de la misma manera:

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

Corrección de Bugs

Se incluyen correcciones de bugs adicionales en este lanzamiento. Consulta las notas del lanzamiento para saber más.