Astro 4.5

Por
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

¡Astro 4.5 ya está disponible! Este lanzamiento mejora la experiencia del desarrollador con una nueva Dev Audit UI, única en su clase. Identifica automáticamente problemas de rendimiento y accesibilidad del sitio durante el desarrollo–sin salir de tu navegador.

Los aspectos destacados completos del lanzamiento incluyen:

¡Visita astro.new para iniciar un nuevo proyecto con Astro 4.5 hoy!

Para actualizar un proyecto existente, usa la herramienta CLI automatizada @astrojs/upgrade. También puedes actualizar todas tus dependencias de Astro manualmente con npm install.

# Recommended:
npx @astrojs/upgrade


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

Dev Audit UI

Algunos problemas de rendimiento web y accesibilidad solo pueden detectarse en el navegador. Probar estos problemas puede ser engorroso y lento, y muchos desarrolladores acabán saltándoselo – u olvidándolo – por completo.

Astro está cerrando la brecha entre potencia y conveniencia con la totalmente nueva Dev Audit UI. Visualiza y navega por las auditorías en un nuevo panel UI cuidadosamente organizado. Explora problemas por categoría y haz clic para ver más detalles, todo desde dentro de tu navegador de desarrollo y visible en línea con los elementos UI reales de tu página.

El nuevo panel de auditoría en Astro 4.5. Muestra el título del problema, un mensaje corto explicando el problema, y una descripción más larga de por qué esto es un problema.

Esto es especialmente útil cuando intentas entender por qué algo en tu página se marca como un problema. Haz clic en cualquier problema, y serás desplazado instantáneamente a ese elemento en la página. Además, cada elemento viene con una explicación y guía detallada.

La nueva Dev Audit UI se previsualizó por primera vez en Astro 4.4. ¡Gracias a todos los que probaron y proporcionaron feedback antes de este lanzamiento!

View Transitions: Re-renderizar islas

Cuando se usan View Transitions, las Astro islands persistidas usando la propiedad transition:persist ahora pueden actualizarse con nuevas props cuando la página cambia.

Esto puede ser útil por ejemplo para una lista de productos, donde podrías querer que los filtros establecidos por el usuario se mantengan entre cambios de página, pero que la lista de productos se actualice basándose en la página actual. Anteriormente, tenías que construir tu componente para actualizar la lista de productos manualmente. Después de esta actualización, el componente ahora se re-renderizará automáticamente con las nuevas props cuando la página cambie, mientras mantiene el mismo estado.

Esta característica no requiere ninguna configuración y está habilitada por defecto. Si es necesario, la propiedad transition:persist-props puede usarse para optar por no participar de este comportamiento.

View Transitions: Re-ejecutar scripts

Una sorpresa común al usar View Transitions es que los scripts inline no se vuelven a ejecutar automáticamente cuando la página cambia. Esto nos causaba enlazar a nuestra documentación sobre el comportamiento de los scripts durante la navegación de páginas múltiples veces al día.

Para facilitarlo a nuestros usuarios, Astro 4.5 ahora incluye un atributo data-astro-rerun que puede añadirse a las etiquetas de script inline para volver a ejecutar automáticamente el script cuando la página cambia:

<script data-astro-rerun is:inline>
  console.log('This script will rerun when the page changes!');
</script>

Shiki 1.0

En un lanzamiento anterior, migramos el resaltado de sintaxis de Astro para usar un fork de Shiki llamado Shikiji. Shikiji fue recientemente fusionado de nuevo en Shiki. ¡Como tal, ¡también volvemos a Shiki!

Este cambio debería ser completamente transparente para los usuarios, y no debería requerir ningún cambio en tu código. Sin embargo, Astro 4.5 viene con varios otros beneficios para el resaltado de sintaxis, incluyendo:

  • La opción markdown.shikiConfig.experimentalThemes también se ha estabilizado como markdown.shikiConfig.themes, permitiendo un soporte más fácil de temas duales.
  • El componente <Code /> ahora acepta nombres de atributos arbitrarios que serán pasados al elemento pre o code interno. Esto permite un estilizado y flexibilidad más fáciles al renderizar un bloque de código. Gracias a StandardGage por contribuir esta característica.

Prefijo de assets Multi-CDN

Astro 4.5 introduce la capacidad de especificar diferentes prefijos CDN para diferentes extensiones de archivo. Esto puede ser útil cuando quieres servir diferentes tipos de assets desde diferentes CDNs, por ejemplo, servir imágenes desde un CDN separado con una estrategia de caché optimizada.

Para usar esta característica, añade la opción build.assetsPrefix a tu astro.config.mjs, con las extensiones de archivo como claves y el prefijo CDN como valores:

astro.config.mjs
import { defineConfig } from "astro/config"


export default defineConfig({
    build: {
        assetsPrefix: {
            'js': "https://js.cdn.example.com",
            'png': "https://images.cdn.example.com",
            'fallback': "https://generic.cdn.example.com"
        }
    }
})

Gracias a Zhang Zhipeng por contribuir esta característica. Para más información sobre build.assetsPrefix, consulta nuestra referencia de configuración.

Experimental: JSON Schemas para Data Collections

Astro 4.5 introduce soporte experimental para generar automáticamente JSON schemas para data collections. Los JSON schemas son una forma potente de describir la estructura de tus datos y pueden usarse para proporcionar validación, autocompletado, y documentación para tus data collections directamente en tu editor. Para habilitar esta característica, añade lo siguiente a tu astro.config.mjs:

import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    contentCollectionJsonSchema: true
  }
});

Por ahora, estos schemas necesitan enlazarse manualmente a las entradas de tu data collection, pero esperamos hacer este proceso automático en futuros lanzamientos. Consulta la documentación de este flag experimental para más detalles sobre cómo usar esta característica.

Experimental: Nuevo algoritmo de detección de scripts

En Astro 2.10.4, se añadió una opción experimental llamada optimizeHoistedScript para ayudar a corregir un problema antiguo donde los scripts podían incluirse en páginas a pesar de no usarse. En Astro 4.5, estamos reemplazando optimizeHoistedScript con una nueva opción experimental llamada directRenderScript que ahora debería cubrir todos los casos y ser más fiable.

Para probar esta nueva característica, elimina la opción optimizeHoistedScript si la tienes y añade la opción directRenderScript a tu astro.config.mjs:

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    optimizeHoistedScript: true,
    directRenderScript: true
  }
});

Esperamos hacer esta característica el valor por defecto en un futuro lanzamiento major. Para más información sobre esta característica, consulta nuestra referencia de configuración.

Corrección de Bugs

Como siempre, Astro 4.5 incluye más correcciones de bugs y mejoras menores que no han podido entrar en este post del lanzamiento. Consulta las notas del lanzamiento completas para saber más.