Astro en Español 5.2 | Astro en Español

¡Astro 5.2 ya está disponible! El primer lanzamiento minor de 2025 incluye soporte para Tailwind 4, una nueva forma de acceder a los valores de configuración en tus páginas, mejor manejo de trailing slash, y soporte para redirecciones externas.

Todavía es enero, así que haz tu resolución probar estas nuevas características:

Soporte para Tailwind 4
Redirecciones de trailing slash
Redirecciones externas
Frontmatter TOML en Markdown
Experimental: astro:config
Experimental: deshabilitar React streaming

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

Soporte para Tailwind 4

Con su lanzamiento de v4, Tailwind CSS ahora ofrece un plugin @tailwindcss/vite que puede añadirse directamente a tu proyecto de Astro. Esto simplifica la experiencia de Tailwind en Astro y ahora es la forma recomendada de usar Tailwind 4 en Astro.

Astro 5.2 añade soporte nativo para este plugin de Vite, y el comando astro add tailwind ahora añadirá el plugin a tu configuración de Astro y creará un archivo CSS por defecto que importa los estilos de Tailwind.

Como resultado, la integración @astrojs/tailwind ahora está deprecated pero seguirá funcionando para versiones anteriores de Tailwind. Para actualizar a Tailwind 4, por favor desinstala la integración y either usa el comando actualizado astro add tailwind o sigue la documentación de Tailwind para instalación manual.

Gracias a Eveeifyeve que hizo el primer trabajo para soportar Tailwind 4 mientras estaba en alpha, aunque esto terminó usando una implementación diferente.

Redirecciones de trailing slash

Si una ruta debe o no tener un trailing slash es un debate común en el desarrollo web. Sin embargo, todo el mundo coincide en que debe ser consistente. El contenido duplicado es malo para SEO y confuso para los usuarios.

Astro desde hace tiempo te permite configurar si las rutas deben coincidir con o sin trailing slash, pero anteriormente esto significaba devolver una página "not found" para la ruta incorrecta o dejar que el host manejara los conflictos. Astro 5.2 redirigirá automáticamente tus rutas renderizadas bajo demanda a la ruta correcta según la opción trailingSlash en tu astro.config.mjs.

Ahora, no importa si tu visitante navega a /about/, /about, o incluso /about///. En producción, siempre terminarán en la página correcta. Para peticiones GET, la redirección será una redirección 301 (permanente), y para todos los demás métodos de petición, será una redirección 308 (permanente, y preserva el método de petición).

Durante el desarrollo, Astro mostrará una página de error en lugar de redirigir para ayudarte a detectar cualquier mala configuración y enlaces rotos.

Para habilitar las redirecciones de trailing slash, establece la opción trailingSlash en tu astro.config.mjs:

export default defineConfig({
  adapter: node({ mode: 'standalone' }),
  trailingSlash: 'never', // or 'always'
});

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

Redirecciones externas

Astro ahora soporta definir redirecciones externas a destinos http o https directamente desde la configuración.

Al igual que con las redirecciones internas disponibles desde Astro 2.9, con un adaptador también puedes proporcionar un objeto como valor. Esto te permite especificar un código de status además de la nueva destination.

import {defineConfig} from "astro/config"

export default defineConfig({
    redirects: {
        "/about": "https://example.com/about",
        "/news": {
            status: 302,
            destination: "https://example.com/news"
        }
    }
})

Consulta la documentación actualizada de configuración de redirects para más detalles.

Frontmatter TOML en Markdown

El excelente soporte de Astro para Markdown y MDX siempre ha incluido el frontmatter YAML, ya sea en exports de archivos o en content collections. Con este lanzamiento, Astro ahora también soporta frontmatter TOML en ambos. Esto es útil para añadir archivos de contenido existentes con frontmatter TOML a tu proyecto desde otro framework como Hugo, ¡o simplemente puedes preferir TOML sobre YAML!

No se requiere configuración para usar frontmatter TOML en tus archivos de contenido: simplemente usa +++ para delimitar el frontmatter y Astro lo parseará como TOML.

+++
date = 2025-01-30
title = 'Use TOML frontmatter in Astro!'
[params]
  author = 'Houston'
+++

# Support for TOML frontmatter is here!

Gracias a Colin Bate que contribuyó esta característica.

Experimental: `astro:config`

Astro proporciona varias formas de acceder a los ajustes de configuración desde tus archivos de proyecto: variables de entorno, el objeto global Astro en archivos .astro, y la variable context en middleware y endpoints. Pero, puede ser difícil recordar dónde está disponible la información: ¿era import.meta.env.BASE o Astro.base?

Con astro:config, queremos proporcionar una única forma de leer las opciones de configuración más útiles desde cualquier lugar dentro de tu proyecto. ¡Y, porque es Astro, lo hacemos con type-safety en mente!

Este módulo virtual expone dos submódulos (/client y /server) para acceder a diferentes subconjuntos de tus valores de configuración. Esto protege tu información haciendo solo algunos datos disponibles para el cliente.

Para usar este nuevo módulo virtual, necesitas habilitarlo vía un flag experimental:

import {defineConfig} from "astro/config"

export default defineConfig({
    trailingSlash: "always",
    experimental: {
        serializeConfig: true
    }
})

Luego, desde cualquier archivo dentro del proyecto de Astro, puedes usar el módulo virtual:

import {trailingSlash} from "astro:config/client"

export function appendForwardPath(path) {
    if (trailingSlash === "always") {
        return path.endsWith("/") ? path : path + "/"
    }
    return path
}

Consulta la documentación de Serialized Configuration para más información sobre esta nueva característica experimental.

Queremos eventualmente deprecar las otras formas de leer estas propiedades, y hacer de astro:config el estándar de facto para acceder a tus valores de configuración en tu proyecto de Astro. ¡Únete a la discusión activa para dejar tu feedback en el RFC de Serialized Config y ayuda a dar forma al futuro de esta característica!

Experimental: deshabilitar React streaming

La integración @astrojs/react ahora te permite deshabilitar React streaming. Esto puede ser útil si estás usando una librería que no es compatible con streaming, como muchas librerías CSS-in-JS. Para deshabilitar React streaming, actualiza la integración @astrojs/react:

# Recommended:
npx @astrojs/upgrade

# Manual:
npm install @astrojs/react@latest
pnpm upgrade @astrojs/react --latest
yarn upgrade @astrojs/react --latest

Luego establece la opción experimentalDisableStreaming de la integración a true en tu astro.config.mjs:

export default defineConfig({
  integrations: [
    react({
      experimentalDisableStreaming: true,
    }),
  ],
});

Consulta la documentación de @astrojs/react para más información.

Gracias a Arturo Silva del Washington Post que contribuyó esta característica.

Correcciones de bugs

Hemos tenido montones de correcciones de bugs desde el lanzamiento 5.1. Consulta el changelog para todos los detalles.

Gracias

Gracias a todos los que contribuyeron a este lanzamiento, incluyendo Arturo Silva, Colin Bate, Sarah Rainsberger, Matthew Phillips, HiDeoo, Bjorn Lu, Armand Philippot, Yan Thomas, y muchos más.

¡Estamos emocionados de ver qué construís con Astro 5.2!