Astro 4.6

Por
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

Después de un breve descanso tras la semana de lanzamiento, ¡Astro 4.6 ya está aquí y volvemos a nuestro horario habitual! Este lanzamiento incluye una nueva estrategia de enrutado manual para internacionalización, soporte experimental para protección CSRF, una nueva característica para la dev toolbar, y más.

Los aspectos destacados completos del lanzamiento incluyen:

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

Estrategia de enrutado manual para internacionalización

Astro 4.6 introduce una estrategia de enrutado manual para internacionalización. Esta nueva estrategia te permite tomar control total sobre el enrutado de tu sitio web internacionalizado de Astro, para casos donde la estrategia de enrutado por defecto no cumple del todo con tus necesidades.

Para habilitar el enrutado manual, establece la opción i18n.routing en tu astro.config.mjs a manual:

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


export default defineConfig({
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "fr",
    routing: "manual",
  },
});

y luego añade un middleware a tu proyecto para manejar el enrutado:

src/middleware.ts
import { defineMiddleware } from "astro:middleware";
import { redirectToDefaultLocale } from "astro:i18n";


// Example middleware that redirects all requests to the default locale apart for the /about page
export const onRequest = defineMiddleware(async (context, next) => {
  if (context.url.startsWith("/about")) {
    return next();
  } else {
    return redirectToDefaultLocale(context, 302);
  }
});

Alternativamente, puedes importar la lógica de middleware del propio Astro usando la nueva función middleware de astro:i18n para construir sobre la estrategia de enrutado por defecto:

src/middleware.js
import { defineMiddleware, sequence } from "astro:middleware";
import { middleware } from "astro:i18n"; // Astro's own i18n routing middleware


export const userMiddleware = defineMiddleware(() => {
  // Your custom middleware logic here
});


export const onRequest = sequence(
  userMiddleware,
  middleware({
    redirectToDefaultLocale: false,
    prefixDefaultLocale: true
  })
)

Consulta la documentación de internacionalización para más información sobre cómo usar el enrutado manual con internacionalización.

Capacidad de mover la dev toolbar

Astro 4.6 introduce la capacidad de mover la dev toolbar a diferentes posiciones en la parte inferior de tu pantalla. Esto puede ser útil si tienes un header sticky que cubre la parte inferior de la pantalla, o si simplemente prefieres que la toolbar esté en otro lugar. ¡La dev toolbar está ahí para ayudarte, no para estorbarte! ¡Gracias a Ming-jun Lu por contribuir esta característica solicitada!

Experimental: Soporte para protección CSRF

Astro 4.6 añade soporte parcial experimental para protección CSRF. Esta característica está actualmente bajo un flag experimental y puede cambiar en futuros lanzamientos.

Para habilitarla, establece la opción experimental.security.csrfProtection en tu astro.config.mjs:

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


export default defineConfig({
  experimental: {
    security: {
      csrfProtection: {
        origin: true,
      },
    },
  },
});

Habilitar esta configuración hace que Astro realice una comprobación de que el header “origin”, pasado automáticamente por todos los navegadores modernos, coincide con la URL enviada por cada Request. Si no coincide, Astro responderá con un código de estado 403 Forbidden.

Ten en cuenta que esta característica solo está disponible para páginas que se renderizan bajo demanda (también conocido como server-side rendering).

Mejoras en cookies

Gracias a Farzard, el helper de Astro para eliminar cookies (Astro.cookies.delete) ahora permite establecer aún más atributos de cookies en lugar de solo los atributos path y domain. Quizás un cambio “pequeño”, ¡pero definitivamente uno en el que puedes hundir los dientes!

Deprecación del soporte para versiones anteriores de Node.js

De acuerdo con nuestra política de soporte y actualización de Node.js, esta versión de Astro deprecia el soporte para:

  • versiones de Node.js 18 inferiores a 18.17.1
  • Node.js 19 (la versión con número impar)
  • versiones de Node.js 20 inferiores a 20.3.0.

Como se describe en nuestra política de soporte, esta decisión se tomó después de considerar cuidadosamente varios factores. Creemos que este cambio resultará en una experiencia de Astro más estable y segura para todos los usuarios.

Puedes continuar usando versiones deprecadas de Node.js hasta la próxima versión major de Astro (v5). Sin embargo, puedes ver advertencias al instalar Astro y ciertas características pueden no funcionar como se espera.

Corrección de Bugs

Como ya sabes, Astro 4.6 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.