Astro en Español 5.17 | Astro en Español

Astro 5.17 introduce ubicación configurable de la dev toolbar, parseo async de archivos, cookies particionadas, y nuevas mejoras de optimización de imágenes.

Explora qué hay de nuevo en este lanzamiento:

Configurar la ubicación de la dev toolbar
Parseo async en el loader file()
Soporte para cookies particionadas
Color de fondo para transformaciones de imágenes
Selección de kernel de Sharp para redimensionado de imágenes
Opción retainBody para el loader glob()

Para actualizar un proyecto existente, usa la herramienta CLI automatizada @astrojs/upgrade. Alternativamente, actualiza manualmente ejecutando el comando de actualización para tu gestor de paquetes:

# Recommended:
npx @astrojs/upgrade

# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

La dev toolbar ahora soporta una opción de configuración placement a nivel de proyecto, permitiéndote establecer una posición por defecto que persiste entre los miembros del equipo y entornos.

Anteriormente, la ubicación de la toolbar solo podía controlarse a través de la UI, con las preferencias almacenadas en localStorage. Esto significaba que cada miembro del equipo tenía que ajustar manualmente la ubicación, y los ajustes se perdían al limpiar los datos del navegador. Los sitios con elementos de UI en la parte inferior central como chat widgets o cookie banners no tenían forma de evitar conflictos con la toolbar.

Añade la nueva opción devToolbar.placement a tu configuración de Astro:

export default defineConfig({
  devToolbar: {
    placement: 'bottom-left',
  },
});

La configuración actúa como un valor por defecto del proyecto mientras still respeta las preferencias del usuario. Los desarrolladores individuales pueden sobrescribir el ajuste a través de la UI de la toolbar, si lo desean.

Lee nuestra guía sobre la dev toolbar de Astro para más detalles sobre las opciones de ubicación disponibles y su uso.

¡Gracias a Tony Narlock que contribuyó esta característica!

Parseo async en el loader `file()`

La opción parser() en el loader file() ahora soporta funciones async, habilitando flujos de trabajo de procesamiento de datos más complejos.

Esta mejora te permite realizar operaciones asincrónicas durante la asignación de los datos finales cargados desde un archivo, como obtener datos adicionales o hacer llamadas a la API:

import { defineCollection } from 'astro:content';
import { file } from 'astro/loaders';

const data = defineCollection({
  loader: file('src/data/products.json', {
    parser: async (text) => {
      const products = JSON.parse(text);

      // Fetch additional data asynchronously
      const enrichedProducts = await Promise.all(
        products.map(async (product) => {
          const details = await fetchProductDetails(product.id);
          return { ...product, ...details };
        })
      );

      return enrichedProducts;
    },
  }),
});

Las funciones parser sincrónicas existentes siguen funcionando sin modificación, pero ahora puedes aprovechar las capacidades async para escenarios más avanzados.

¡Gracias a Patrick Arlt que contribuyó esta característica!

Soporte para cookies particionadas

Astro ahora soporta cookies particionadas a través de la nueva opción partitioned en Astro.cookies.set(), habilitando mejores controles de privacidad para contextos embebidos.

Las cookies particionadas son parte de la iniciativa Privacy Sandbox y permiten que las cookies se aíslen por sitio top-level. Esto es particularmente útil cuando tu aplicación de Astro está embebida en un iframe, ya que las cookies particionadas proporcionan una forma de mantener el estado de la sesión mientras se respetan los estándares modernos de privacidad:

---
// Set a partitioned cookie
Astro.cookies.set('session', sessionId, {
  partitioned: true,
  secure: true, // Required for partitioned cookies
  sameSite: 'none', // Typically used with partitioned cookies
});
---

Cuando partitioned se establece a true, la cookie estará vinculada a la partición del sitio top-level, previniendo el rastreo cross-site mientras still permite la funcionalidad necesaria en escenarios embebidos.

Lee nuestra sección sobre cookies en Astro para más información sobre el uso efectivo de cookies.

¡Gracias a John Mortlock que contribuyó esta característica!

Color de fondo para transformaciones de imágenes

La nueva propiedad background en las transformaciones de imágenes te permite controlar el color de fondo al convertir imágenes a formatos que no soportan transparencia.

Anteriormente, las imágenes convertidas a formatos como JPEG usaban un fondo negro. Ahora puedes especificar cualquier color usando la sintaxis estándar de CSS color:

---
import { Image } from 'astro:assets';
import myImage from './my-image.png';
---

<!-- Use a white background when converting to JPEG -->
<Image src={myImage} format="jpeg" background="white" alt="Product" />

<!-- Or use any CSS color syntax -->
<Image src={myImage} format="jpeg" background="rgb(248 250 252)" alt="Hero" />
<Image src={myImage} format="jpeg" background="#f8fafc" alt="Banner" />

La misma propiedad está disponible al usar getImage():

import { getImage } from 'astro:assets';
import heroImage from './hero.png';

const optimizedImage = await getImage({
  src: heroImage,
  format: 'jpeg',
  background: 'white',
});

Si quieres ver todas las demás opciones disponibles para transformaciones de imágenes, consulta la guía de Astro Images en nuestra documentación.

¡Gracias a Julien Cayzac que contribuyó esta característica!

Selección de kernel de Sharp para redimensionado de imágenes

El servicio de imágenes Sharp ahora soporta la configuración del algoritmo kernel de redimensionado a través de una nueva opción de configuración kernel, dándote control fino sobre la calidad de imagen.

Por defecto, Sharp usa el kernel lanczos3 para el redimensionado hacia abajo. Diferentes kernels pueden producir resultados notablemente diferentes dependiendo de las características de tus imágenes fuente: algunos destacan en preservar bordes nítidos, mientras que otros producen resultados más suaves.

Establece tu kernel preferido en la configuración del servicio de imágenes:

export default defineConfig({
  image: {
    service: {
      entrypoint: 'astro/assets/services/sharp',
      config: {
        kernel: 'mks2021'
      }
    }
  }
})

Ten en cuenta que esta configuración se aplica a todas las imágenes de tu sitio y no se puede configurar actualmente a nivel de imagen individual.

Cada kernel ofrece diferentes trade-offs entre nitidez, suavidad, y rendimiento. Consulta la documentación de redimensionado de Sharp para información detallada sobre todas las opciones de kernel disponibles.

¡Gracias a Mark Ignacio que contribuyó esta característica!

Opción `retainBody` para el loader `glob()`

El loader glob() ahora incluye una opción retainBody para ayudar a reducir el tamaño de tu data store, particularmente beneficioso para colecciones de contenido grandes.

Por defecto, Astro almacena el body raw de cada archivo de contenido en entry.body además del HTML renderizado. Para sitios con colecciones muy grandes, esto puede aumentar significativamente el tamaño del data store desplegado.

Para prevenir esto, establece la opción retainBody a false en tu loader glob():

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({
    pattern: '**/*.md',
    base: './src/content/blog',
    retainBody: false
  }),
});

Cuando retainBody se establece a false:

entry.body será undefined en lugar de contener los contenidos raw del archivo
El HTML renderizado permanece disponible en entry.rendered.html para archivos Markdown
La propiedad entry.filePath still apunta al archivo original
Para colecciones MDX, esto puede reducir dramáticamente el tamaño del data store

Esto es particularmente útil para sitios muy grandes que han encontrado límites de tamaño de strings JSON o quieren optimizar su tamaño de despliegue. La opción por defecto es true para mantener compatibilidad con versiones anteriores.