Astro 5.16

Por
Matthew Phillips

Astro 5.16 trae optimización experimental de SVG, mejoras interactivas del CLI, y una colección de mejoras de DX.

Explora qué hay de nuevo en este lanzamiento:

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

Optimización de SVG con SVGO

Astro 5.16 añade soporte experimental para optimización automática de SVG usando SVGO, una herramienta potente que reduce el tamaño de archivos SVG sin comprometer la calidad.

Los archivos SVG a menudo pueden optimizarse significativamente—eliminando metadatos innecesarios, simplificando paths, y eliminando atributos redundantes. Al integrar SVGO en el asset pipeline de Astro, tus SVGs ahora se optimizan automáticamente durante el proceso de compilación, reduciendo el ancho de banda y mejorando los tiempos de carga de página.

Habilita el flag experimental de optimización de SVG en tu configuración de Astro:

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


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

Por defecto, SVGO se ejecuta con sus ajustes recomendados. Puedes personalizar el comportamiento de optimización pasando opciones de configuración de SVGO:

astro.config.mjs
export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeViewBox',
          active: false
        }
      ]
    }
  }
})

Consulta la documentación de optimización de SVG para más detalles sobre opciones de configuración y plugins de SVGO.

Atajos interactivos para astro preview

El comando astro preview ahora soporta atajos de teclado, haciendo más fácil controlar el servidor de vista previa. Similar a astro dev, ahora puedes usar los siguientes hotkeys en la terminal donde el servidor se está ejecutando:

> Local:     http://localhost:4321/
- press o + enter to open in browser
- press q + enter to quit

Estas mejoras de DX eliminan la necesidad de navegar manualmente a tu sitio en un navegador o terminar el proceso con Ctrl+C, haciendo la experiencia de vista previa más intuitiva y consistente con el flujo de trabajo del servidor de desarrollo.

Mejor soporte para agentes con astro add --yes

A medida que los agentes de codificación y herramientas de IA se vuelven más prevalentes en los flujos de trabajo de desarrollo, Astro está facilitando trabajar con ellos. El comando astro add ahora muestra un hint útil sobre cómo saltar los prompts para humanos con el flag --yes, dejando claro cómo los agentes pueden automatizar integraciones de Astro sin quedarse atascados en prompts interactivos.

Con esta actualización, los agentes de IA y herramientas de automatización pueden ejecutar sin problemas:

astro add react --yes

Cuando ejecutas astro add interactivamente, verás un hint útil en el primer prompt interactivo:

astro add react
# Output:
#   To run this command without prompts, pass the --yes flag

Esto capacita a los agentes para configurar proyectos de Astro autónomamente, ya sea que estés usando Claude Code, Cursor, Copilot, o cualquier otra herramienta de desarrollo asistida por IA. No más quedarse atascado esperando confirmaciones interactivas—los agentes ahora pueden automatizar completamente tu configuración de Astro.

Utility type ActionInputSchema para actions type-safe

Astro Actions ahora incluye el utility type ActionInputSchema, haciendo más fácil extraer y trabajar con el input schema de tus definiciones de action. Esto es particularmente útil al construir abstracciones o crear action handlers reutilizables.

Con ActionInputSchema, puedes obtener el tipo exacto del input schema de tu action:

import { type ActionInputSchema, defineAction } from 'astro:actions';
import { z } from 'astro/zod';


const contactAction = defineAction({
  accept: 'form',
  input: z.object({
    email: z.string().email(),
    message: z.string(),
  }),
  handler: ({ email, message }) => {
    // Handle the contact form
    return { success: true };
  },
});


// Extract the schema type
type ContactSchema = ActionInputSchema<typeof contactAction>;


// Get the actual input type
type ContactInput = z.input<ContactSchema>;
// Result: { email: string; message: string }

Esto es especialmente valioso cuando estás:

  • Creando funciones wrapper alrededor de actions.
  • Construyendo abstracciones de envío de formularios.
  • Compartiendo tipos de action a través de tu codebase.

ActionInputSchema hace posible que los desarrolladores menos fluidos en patrones avanzados de TypeScript sigan obteniendo inferencia de tipos adecuada sin duplicar manualmente tus definiciones de schema.

Otras mejoras

  • Reducción de 82 MB de dependencias para el adaptador de Netlify – Actualizado @netlify/functions a v5, eliminando 310 dependencias transitivas y recortando 82 MB del árbol de dependencias del adaptador de Netlify. Esto reduce significativamente el bundle size para los usuarios que despliegan con Netlify. (#14716)

Correcciones de bugs

Como siempre, hemos estado trabajando duro en corregir problemas desde el lanzamiento 5.15. Consulta el changelog para todos los detalles.

Comunidad

El core team de Astro es:

Alexander Niebuhr , Armand Philippot , Chris Swithinbank , Emanuele Stoppa , Erika , Florian Lefebvre , Fred Schott , HiDeoo , Luiz Ferraz , Matt Kane , Matthew Phillips , Reuben Tier , Sarah Rainsberger , and Yan Thomas .

Gracias a todos los demás contribuidores que ayudaron a hacer posible Astro 5.16 con adiciones y mejoras de código y documentación, incluyendo:

Alejandro Romano, Andreas Deininger, Arman, Azat S., BuckyBuck135, David Dal Busco, DevVali, Elvis Mao, Eryk Baran, Felix Schneider, Franco Victorio, Fredrik Norlin, Gökhan Kurt, Jacob Lamb, John L. Armstrong IV, Junseong Park, knj, ktym4a, ld-web, Louis Escher, Lumynous, MareStare, Marta Karaś, Mateusz Malinkiewicz, Maurici Abad Gutierrez, Mehdi El Fadil, Michael Stramel, Michał Paśko, Ming-jun Lu, nemu, Néstor, Olusegun Durojaye, paul valladares, Philippe Serhal, pioupia, randomguy-2650, Roman, Roman Hauksson, Sarah Krasnik Bedell, Sebastian Beltran, Sergio, Thomas Bonnet, and vrabe