Astro 3.3: Componente Picture

Astro 3.3 ya está disponible con un nuevo componente experimental <Picture />, compatibilidad mejorada para resaltado de sintaxis, procedencia de paquetes, y un puñado de otras mejoras de calidad de vida.

• Nuevo componente <Picture />
• Mejoras en el resaltado de sintaxis
• Procedencia de Paquetes
• Mejoras de Calidad de Vida

Para aprovechar las últimas características, asegúrate de estar ejecutando la última versión de Astro. Puedes actualizar a Astro 3.3 ejecutando el comando de actualización para tu gestor de paquetes preferido:

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

Componente Picture

Cuando anunciamos Mejores Imágenes en Astro con nuestra característica integrada de optimización de imágenes, nos enorgulleció compartir nuestra nueva visión para trabajar con imágenes. En 3.0 eliminamos nuestra antigua integración de imágenes, y junto con ella algunas características existentes que sabemos que estabas usando. Decidimos reconstruir mejor, con una historia de imágenes más fuerte que apenas estaba comenzando.

Después de un RFC exhaustivo y el PR más votado en la historia de Astro, ¡estamos increíblemente emocionados de introducir un componente integrado <Picture />!

El nuevo componente experimental <Picture /> puede usarse para generar un elemento <picture> con múltiples elementos <source>.

El ejemplo de abajo usa la propiedad formats para generar un <source> en cada uno de los formatos de imagen especificados:

---
import { Picture } from 'astro:assets';
import myImage from './my-image.jpg';
---

<Picture src={myImage} formats={['avif', 'webp']} alt="My super image in multiple formats!" />

El código anterior generará el siguiente HTML, y permitirá al navegador determinar la mejor imagen para mostrar:

<picture>
  <source srcset="..." type="image/avif" />
  <source srcset="..." type="image/webp" />
  <img src="..." alt="My super image in multiple formats!" />
</picture>

El componente Picture toma todas las mismas props que el componente Image, incluyendo las nuevas propiedades densities y widths.

Soporte de srcset

Además del elemento <Picture />, se han añadido dos nuevas propiedades a Image y getImage(): densities y widths.

Estas propiedades pueden usarse para generar un atributo srcset, ya sea basado en anchos absolutos en píxeles (ej. [300, 600, 900]) o descriptores de densidad de píxeles (ej. ["2x"] o [1.5, 2]).

---
import { Image } from 'astro';
import myImage from './my-image.jpg';
---

<Image src={myImage} width={myImage.width / 2} densities={[1.5, 2]} alt="My cool image" />

<img
  src="/_astro/my_image.hash.webp"
  srcset="/_astro/my_image.hash.webp 1.5x, /_astro/my_image.hash.webp 2x"
  alt="My cool image"
/>

Resaltado de Sintaxis

Migramos la librería interna de resaltado de sintaxis de Astro de shiki a shikiji, una alternativa enfocada en ESM que simplifica el bundling y el mantenimiento.

No hay nuevas opciones ni cambios en cómo escribes bloques de código y resaltado de sintaxis.

Aunque esta refactorización debería ser transparente para la mayoría de los proyectos, shikiji viene con un posible cambio disruptivo. Como shikiji intenta producir un marcado HTML más pequeño, los estilos de color se añaden a los elementos pre o code en lugar de directamente al span del token. Por ejemplo:

Antes:

<code class="astro-code" style="background-color: #24292e">
  <pre>
    <span class="line" style="color: #e1e4e8">my code</span>
  </pre>
</code>

Después:

<code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
  <pre>
    <span class="line">my code<span>
  </pre>
</code>

Esto no afecta los colores ya que el span heredará el color del padre, pero si dependes de un marcado HTML específico, por favor revisa tu sitio cuidadosamente después de actualizar para verificar los estilos.

Procedencia de Paquetes

NPM, el registro que aloja los paquetes de Astro, ha introducido atestaciones de procedencia opcionales para mejorar la seguridad y transparencia de la cadena de suministro. Estas atestaciones permiten a los desarrolladores verificar dónde y cómo se construyen los paquetes.

Con el lanzamiento de Astro 3.3, el paquete astro y todas las integraciones de @astrojs/ se publican con una declaración de procedencia. Si mantienes una integración de Astro, te animamos a habilitar las atestaciones de procedencia al publicar tu integración.

Mejoras de Calidad de Vida

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