¡Hoy hemos lanzado la primera beta de Astro 4! Los que se sientan aventureros pueden instalar la nueva beta, revisar nuestra guía de actualización en progreso, y reportar cualquier bug que encuentren al Discord de Astro.
Qué esperar en Astro 4
Estamos lanzando Astro 4 para mantenernos al día con Vite, nuestra herramienta de compilación interna. Astro 4 incluye la última versión de Vite 5, que fue lanzada el mes pasado.
Como Vite 5 es también un major pequeño, la mayoría de los proyectos podrán actualizar a Astro 4 con cambios mínimos en tu código, si es que hay alguno.
Además, en Astro 4 planeamos sacar algunas de las nuevas características en las que hemos estado trabajando durante los últimos meses del estado experimental y marcarlas como estables. ¡Estad atentos para más!
Probando la beta
Puedes probar la beta en tu app existente ejecutando nuestro nuevo paquete @astrojs/upgrade. Esta herramienta CLI instalará automáticamente la versión correcta de Astro así como cualquier integración oficial de Astro que tengas instalada.
npx @astrojs/upgrade betapnpm dlx @astrojs/upgrade betayarn dlx @astrojs/upgrade betaAlternativamente, puedes instalar manualmente el paquete astro@beta. ¡Asegúrate de actualizar también cualquier integración @astrojs/* que tengas instalada!
npm install astro@betapnpm install astro@betayarn install astro@betaSi estás iniciando un nuevo proyecto también puedes probar la beta ejecutando:
npm create astro@latest -- --ref nextDe nuevo, sustituye con tu gestor de paquetes favorito. Todavía no hemos completado la guía de actualización, pero ya puedes encontrar los cambios más significativos en el pull request de la guía de actualización de Astro 4.0. También puedes seguir su issue relacionado que está rastreando todos los cambios disruptivos.
Astro 3.6
Además, recientemente hemos lanzado Astro 3.6 que viene con nuevos eventos en el router <ViewTransitions /> así como fallback para prefetch en escenarios de datos reducidos.
Eventos de View Transition
Astro 3.6 añade estos tres nuevos eventos como parte del ciclo de vida del router <ViewTransitions />:
astro:before-preparation se ejecuta inmediatamente antes del paso de preparation, donde se carga el contenido de la nueva página. Esto puede usarse para sobrescribir el comportamiento de carga de la nueva página, por ejemplo, para mostrar un spinner de carga.
astro:after-preparation se ejecuta después de que el contenido se haya cargado. Esto puede usarse para detener un spinner de carga si se añadió uno como parte de astro:before-preparation.
astro:before-swap se ejecuta inmediatamente antes del paso de swap, donde los contenidos de la página antigua se intercambian por los contenidos de la nueva página. Este evento incluye la propiedad event.newDocument, un Document que puedes mutar. Un caso de uso para este evento es establecer nombres de clase de modo oscuro si usas localStorage para almacenar preferencias de modo claro/oscuro.
Echa un vistazo a esta demo que muestra lo que es posible usando los nuevos eventos y consulta la documentación para más información sobre los cinco eventos del ciclo de vida.
Fallback de prefetch
Anteriormente, cuando un usuario estaba en una conexión lenta o tenía la preferencia de ahorro de datos habilitada, el prefetching se deshabilitaba por completo. En 3.6 hemos cambiado la estrategia de prefetch para que ocurra al tap: cuando el usuario comienza a hacer clic en un enlace, pero antes de que lo haya soltado. Esto nos da solo un pequeño adelanto en la obtención de la siguiente página, pero solo cuando estamos bastante seguros de que el usuario tiene intención de hacer clic.
Corrección de Bugs
Se incluyen correcciones de bugs adicionales en este lanzamiento. Consulta las notas del lanzamiento para saber más.