Astro 6.2

Por
Emanuele Stoppa
Matthew Phillips

¡Astro 6.2 está aquí! Este lanzamiento trae un logger personalizado experimental con salida JSON integrada, perfecto para logging estructurado y coding agents. También incluye una nueva API de optimización SVG, un helper de URL de archivos de fuentes, y más.

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

Optimizador SVG

La optimización SVG experimental de Astro ha sido rediseñada con una nueva opción svgOptimizer que reemplaza el flag anterior svgo. En lugar de estar vinculada directamente a SVGO, la nueva API introduce una interfaz SvgOptimizer que cualquier librería de optimización puede implementar. Astro incluye un svgoOptimizer() integrado basado en SVGO, pero ahora puedes intercambiarlo por alternativas como OxVG.

astro.config.mjs
import { defineConfig, svgoOptimizer } from "astro/config";


export default defineConfig({
  experimental: {
    svgOptimizer: svgoOptimizer()
  }
});

Cuando se habilita, todos los archivos SVG importados usados como componentes se optimizan en build time para tamaños de archivo más pequeños y mejor rendimiento. Puedes pasar un objeto de configuración SVGO para personalizar la optimización:

astro.config.mjs
import { defineConfig, svgoOptimizer } from "astro/config";


export default defineConfig({
  experimental: {
    svgOptimizer: svgoOptimizer({
      plugins: ["preset-default", { name: "removeViewBox" }]
    })
  }
});

Si estabas usando previamente experimental.svgo, actualiza tu configuración para usar la nueva opción svgOptimizer en su lugar.

Para más información, consulta la documentación de optimización SVG experimental.

Logger Experimental

Ahora es posible controlar el logger de Astro con loggers personalizados. Como parte de la característica experimental, Astro incluye loggers integrados, como un logger JSON. Si usas coding agents para trabajar con Astro, los logs estructurados definitivamente ayudarán a tu workflow.

JSON logger

Puedes habilitar el logging JSON vía configuración usando experimental.logger, o vía CLI usando el flag --experimentalJson:

astro.config.mjs
import { defineConfig, logHandlers } from "astro/config";


export default defineConfig({
  experimental: {
    logger: logHandlers.json()
  }
})
astro dev --experimentalJson
astro sync --experimentalJson
astro build --experimentalJson

Custom logger

También puedes crear tu propio custom logger implementando la interfaz correcta:

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


export default defineConfig({
  experimental: {
    logger: {
      entrypoint: "@org/custom-logger"
    }
  }
})
@org/custom-logger.ts
import type { AstroLoggerDestination, AstroLoggerMessage } from "astro";
import { matchesLevel } from "astro/logger";


function customLogger(level = 'info'): AstroLoggerDestination {
  return {
    write(message: AstroLoggerMessage) {
      if (matchesLevel(message.level, level)) {
        // write message somewhere
      }
    }
  }
}


export default customLogger;

Para más información sobre cómo habilitar y usar esta característica en tu proyecto, consulta la documentación del Experimental Logger.

Para una visión completa y para dar feedback sobre esta API experimental, consulta el Custom logger RFC.

Experimental: getFontFileURL()

Ahora puedes cargar datos de archivos de fuentes durante el prerendering usando el nuevo helper experimental_getFontFileURL() exportado desde astro:assets. Esto hace posible usar fuentes gestionadas por Astro con herramientas como Satori para generar imágenes Open Graph en build time, algo que previamente requería workarounds con rutas internas no documentadas.

src/pages/og.png.ts
import type { APIRoute } from "astro";
import { fontData, experimental_getFontFileURL } from "astro:assets";
import satori from "satori";
import { html } from "satori-html";
import sharp from "sharp";


export const GET: APIRoute = async (context) => {
  const fontPath = fontData["--font-roboto"][0]?.src[0]?.url;


  if (fontPath === undefined) {
    throw new Error("Cannot find the font path.");
  }


  const url = experimental_getFontFileURL(fontPath, context.url);
  const data = await fetch(url).then((res) => res.arrayBuffer());


  const svg = await satori(
    html`<div style="color: black;">hello, world</div>`,
    {
      width: 600,
      height: 400,
      fonts: [
        {
          name: "Roboto",
          data,
          weight: 400,
          style: "normal",
        },
      ],
    },
  );


  const pngBuffer = await sharp(Buffer.from(svg))
    .resize(600, 400)
    .png()
    .toBuffer();


  return new Response(new Uint8Array(pngBuffer), {
    headers: { "Content-Type": "image/png" },
  });
};

Para más información, consulta la documentación de la Fonts API.

Astro v7 alpha

El trabajo en la próxima versión major de Astro ha comenzado. El primer alpha de Astro 7 incluye dos grandes cambios:

Soporte de Vite 8

Astro 7 actualiza a Vite 8, la última versión major de la build tool que potencia Astro. Esto es un breaking change para integraciones y plugins de Astro que dependen de internals de Vite, pero la mayoría de usuarios de Astro deberían poder actualizar sin cambios en el código de su proyecto.

Rust compiler estable

El compiler de Astro basado en Rust, previamente disponible como flag experimental (experimental.rustCompiler), ahora es el compiler por defecto y único en Astro 7. El compiler de Rust ofrece tiempos de build significativamente más rápidos comparado con el compiler anterior basado en Go. El flag experimental.rustCompiler ya no es necesario y puede eliminarse de tu configuración.

Pruébalo

El alpha de Astro 7 está disponible para testing temprano:

npm install astro@alpha

¡Nos encantaría escuchar tu feedback! Por favor reporta cualquier problema que encuentres en GitHub.

Otras mejoras

  • allowedHosts para preview servers: La opción server.allowedHosts de Astro ahora se pasa a los preview servers de los adaptadores, permitiéndote controlar qué hostnames se aceptan al ejecutar astro preview detrás de un reverse proxy o con dominios locales personalizados. Si eres autor de un adaptador, allowedHosts ahora está disponible en el objeto options pasado a tu preview entrypoint. Consulta la referencia de adaptadores para más detalles.
  • Opción "jsx" para compressHTML: La opción compressHTML ahora acepta un valor "jsx" que elimina los espacios en blanco usando reglas JSX, así los espacios en blanco se comportan igual en archivos .astro y .tsx. El texto indentado multi-línea se colapsa en una sola línea con espacios entre palabras, mientras que los espacios en blanco dentro de etiquetas <pre> se preservan.

Para una lista completa de correcciones de bugs y mejoras menores, consulta el changelog completo.

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 6.2 con adiciones y mejoras de código y documentación, incluyendo:

AitorMT, Alejandro Romano, Alex Dombroski, Amar Reddy, Andreas Deininger, Aral Roca Gomez, BitToby, Bobo Chen (陳柏宏), ChrisLaRocque, Ciaran Moran, Daniel Zamyatin, Daniil Sivak, dataCenter430, Desel72, Ed Melly, Eveeifyeve, Felix Schneider, Felmon, fkatsuhiro, hank00111, Invictus Navarchus, James Murty, James Opstad, John L. Armstrong IV, Johnny Noble, junetpoint, Junseong Park, kimulaco, ld-web, Leif Marcus, Louis Escher, Martin DONADIEU, Martin Trapp, Mathieu Mafille, Matthias, Max Malkin, Maxim Slobodchikov, meyer, Milo, Misrilal, moktamd, ocavue, Peter Philipp, Pierre G., Rafael Yasuhide Sudo, randomguy-2650, Rayan Salhab, Roman, Ronan Berder, saif-at-scalekit, Sakku 🦉, Sebastian Beltran, Sebastien Barre, Shinya Fujino, Thomas Bonnet, tmimmanuel, Tobias Breit, travisBREAKS, ubutatu, vrabe, Will (liruifengv), and もっちー