Primer vistazo a Astro en 2024

Basado en el artículo publicado en enero 4 de 2024 en el blog de Astro.

Los devs Erika, Emanuele Stoppa, Matthew Phillips, Nate Moore y Bjorn Lu anunciaron la release número 4.1 de Astro, el framework, y uno de mis favoritos.

Pero, ¿qué de nuevo hay en Astro?

Primero, fueron implementadas algunas reglas para auditar accesibilidad en sitios hechos con el framework. Esto es con el fin de hacer la experiencia web apta para todos los usuarios mediante ARIA. En fin, ahora recibirás una advertencia si colocas atributos ARIA no soportados o inexistentes, o si faltan determinados atributos requeridos para los ARIA roles .

Segundo, se añadió un valor adicional para colocar a la directiva client:visible; recordemos que esta directiva funciona para hidratar componentes externos solamente cuando este mismo entra en el viewport del usuario, por algo el visible. La cosa es que a client:visible puedes añadir rootMargin, que sirve para señalar un margen alrededor del viewport, haciendo más específico el cálculo de la visibilidad, en casos donde el sitio tenga un borde o UI adherido a las esquinas de la web. Una ventaja es que se pueden hidratar los componentes cercanos al área visible, no esperas a cuando directamente sean visibles.

<!--Carga el componente cuando está a menos de 200px de entrar al viewport-->
  <Component client:visible = {{ rootMargin: "200px" }} />

Tercero, ahora existen funciones para codificar y decodificar cookies. Puedes pasarte algunas codificaciones mediante la función encodeURIComponent al añadir URL a cookies, por ejemplo. Aquí se ve un caso con encodeCookieValue

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)
});

Y se decodifica con su contraparte, decodeCookieValue

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

Bugfixes

#9513 e44f6acf99195a3f29b8390fd9b2c06410551b74 De @wtto00 - Añade truco con load para hacer prefetch a links cuando carga la página
#9377 fe719e27a84c09e46b515252690678c174a25759 De @bluwy - Añade reglas de auditoría “Missing ARIA roles check” y “Unsupported ARIA roles check” para la dev toolbar
#9573 2a8b9c56b9c6918531c57ec38b89474571331aee De @bluwy! - Permite pasar una cadena a —open y server.open para abrir una URL específica en el arranque
#9544 b8a6fa8917ff7babd35dafb3d3dcd9a58cee836d De @bluwy - Añade un error útil para sitios estáticos cuando se utiliza el comando astro preview si no se ha ejecutado previamente astro build.
#9546 08402ad5846c73b6887e74ed4575fd71a3e3c73d De @bluwy - Añade una opción para que el servicio de imágenes Sharp permita procesar imágenes de gran tamaño. Establece limitInputPixels: false para omitir el límite de tamaño de imagen por defecto:

Parches

#9593 3b4e629ac8c2fdb4b491bf01abc7794e2e100173 De @bluwy - Mejora el informe de errores de astro add cuando las dependencias fallan su instalación
Coautor: Florian Lefebvre 69633530+florian-lefebvre@users.noreply.github.com Coautor: Sarah Rainsberger sarah@rainsberger.ca
#9597 9fd24a546c45d48451da46637c14e7ed54dac76a De @lilnasy - Corrige un problema por el que la configuración de trailingSlash no tenía efecto en las rutas de la API.
#9586 82bad5d6205672ed3f6a49d4de53d3a68367433e De @martrapp - Corrige los títulos de las páginas en el dropdown para la navegación atrás / adelante cuando se utilizan view transitions
#9575 ab6049bd58e4d02f47d500f9db08a865bc7f09b8 De @bluwy - Establece el process.env.NODE_ENV correcto por defecto cuando se utiliza JS API
#9587 da307e4a080483f8763f1919a05fa2194bb14e22 De @jjenzz - Añade una interfaz CSSProperties que permite extender el atributo style
#9513 e44f6acf99195a3f29b8390fd9b2c06410551b74 De @wtto00 - Ignora 3g en la detección de conexión lenta. Sólo 2g y slow-2g ahora se consideran conexiones lentas.