Astro v0.21.0 será nuestro mayor lanzamiento hasta la fecha. A grandes rasgos, incluye:
- Un nuevo motor de build, impulsado por Vite
- Un nuevo compilador WASM, escrito en Go
- Características completamente nuevas, como Componentes-en-Markdown
- Un nuevo sistema para actualización en vivo de HTML vía HMR
Puedes probar nuestro último lanzamiento hoy en el navegador o ejecutando npm install astro@next--compiler en un nuevo directorio de proyecto en tu máquina.
Astro se está convirtiendo rápidamente en el framework listo para producción para construir sitios web más rápidos y orientados al contenido. Para celebrar este hito, aquí hay algunos aspectos destacados y detalles sobre lo que puedes esperar en Astro v0.21.0 y más allá.
¡Hola, Vite!
Astro 0.21 está recibiendo una actualización interna del motor de build, reemplazando Snowpack con Vite de aquí en adelante.
Hicimos algunos experimentos tempranos con Vite y quedamos extremadamente impresionados. Vite está bien mantenido, bien documentado, es un poco más rápido, tiene grandes mensajes de error, y ha estado construyendo una clara adopción de la comunidad en múltiples frameworks. El manejo de SSR puede ser un poco inestable, pero el equipo de Vite es consciente de esto y está trabajando activamente en ello.
Así que ahora, cuando Evan You tuitee sobre alguna gran optimización de rendimiento que están haciendo en Vite puedes estar seguro de que la misma velocidad también llegará a Astro.
Lo contrario también es cierto: ahora podemos contribuir con correcciones y mejoras a la comunidad más amplia de Vite. Ahora, cuando corregimos un bug de SSR en Astro (como añadir soporte para paquetes npm solo ESM) también lo estamos corrigiendo para todos los demás usuarios de Vite, incluyendo SvelteKit.
Hay otro gran beneficio de elegir Vite: los plugins de Rollup. A partir de v0.21.0, podrás conectar todo el ecosistema de plugins de Rollup a Astro. Activa nuevas características como optimización de imágenes y carga de iconos con solo unos pocos plugins simples. ¡Magia!
Este cambio de Snowpack a Vite puede sorprender a algunos: tanto Drew como yo somos mantenedores en ambos proyectos. Esta fue una decisión difícil de tomar. Pero en última instancia, después de trabajar con ambas herramientas puedo decir con confianza que Vite será una gran elección para el futuro de Astro.
¡Hola, WASM!
Astro 0.21 incluye otra gran mejora a bajo nivel: el nuevo @astrojs/compiler. El nuevo compilador de Astro está escrito en Go y distribuido como WASM. Puedes ejecutarlo directamente en tu navegador, o en el servidor con Node.js y Deno.
El nuevo @astrojs/compiler desbloquea:
- Flexibilidad: Ejecuta el compilador en cualquier lugar con WASM.
- Velocidad: Construye sitios más rápido con el rendimiento de Go como lenguaje compilado.
- Estabilidad: Escribir nuestro propio compilador nos permitió corregir algunos bugs de larga data.
Puedes probar el nuevo compilador hoy mismo directamente en tu navegador en https://astro.build/play. Este REPL es solo un ejemplo de lo que ahora es posible cuando tienes un compilador rápido que funciona en cualquier lugar.
Un agradecimiento a Nate Moore quien hizo un trabajo increíble con este proyecto.
Componentes en Markdown
Nuestra característica más solicitada con diferencia ha sido la capacidad de usar componentes directamente en Markdown. Después de meses de trabajo, estamos emocionados de anunciar que esta característica finalmente llega a Astro.
A partir de v0.21.0, puedes importar componentes dentro del frontmatter de tu Markdown mediante un script opcional de setup. Una vez importados, tus componentes pueden usarse en cualquier lugar de la página:
---title: "Astro 0.21 Early Preview"setup: | import Logo from '../components/Logo.astro'; import ReactCounter from '../components/Counter.jsx';---
# Astro now supports components in Markdown!
<Logo />
- Back to markdown here.- Supports static Astro components.- Supports dynamic React/Vue/Svelte components!
<ReactCounter start={0} client:load />Este nuevo script de setup fue diseñado para máxima flexibilidad. Seguiremos mejorando esta API en el futuro con soporte planificado para componentes por defecto, layouts por defecto, y sobrescritura de componentes en markdown.
HMR, conoce a HTML
A partir de v0.21.0, Astro soportará HMR completo para componentes y páginas de Astro. Cambia cualquier archivo .astro en tu código base, y observa cómo el servidor de desarrollo actualiza la página sin una recarga completa y sin perder ningún estado del cliente.
Astro siempre ha soportado potentes actualizaciones HMR para componentes de JavaScript del lado del cliente como React, Preact, Svelte, Vue, y Solid.js. Pero añadir esto para Astro fue un desafío divertido porque los componentes de Astro son solo HTML estático. Nuestro enfoque de “Cero JavaScript” significaba que no había ningún “runtime de Astro” al que engancharse para las actualizaciones. Tuvimos que ser creativos.
Ahora, el servidor de desarrollo de Astro envía actualizaciones HTML al navegador y luego ejecuta un pequeño script para comparar esas actualizaciones con la página actual. Esto crea una actualización HMR más granular, a nivel de componente, que no afectará al resto de la página.
Pruébalo hoy
Si has leído hasta aquí, nos encantaría tu ayuda probando el último lanzamiento antes de su publicación. Puedes probar nuestro último lanzamiento hoy en el navegador o ejecutando npm install astro@next--compiler en un nuevo directorio de proyecto. Puedes seguir nuestro progreso y dejar comentarios en el PR next en GitHub: https://github.com/withastro/astro/pull/1406
Deja comentarios, reporta bugs, y involúcrate con el desarrollo de Astro en nuestro servidor de Discord. También puedes seguirnos en Twitter.