Astro 4.3

Por
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

¡Astro 4.3 ya está disponible! Este lanzamiento incluye una nueva característica experimental de i18n para probar, y mejoras para trabajar con la salida de tu compilación, tipos de props de componentes, imágenes en Markdown, y más.

Los aspectos destacados incluyen:

Cómo actualizar

Para aprovechar las últimas características, asegúrate de estar ejecutando la última versión de Astro. Puedes actualizar a Astro 4.3 ejecutando el comando @astrojs/upgrade:

npx @astrojs/upgrade

o ejecutando el comando de actualización para tu gestor de paquetes:

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Experimental: Añadido soporte de dominios para i18n

Astro 4.3 añade una configuración i18n experimental de domains. Esto te permite especificar diferentes dominios o subdominios para diferentes locales soportados.

Por ejemplo, ahora podrías usar example.com para tu sitio en inglés, fr.example.com para tu sitio en francés, y example.es para tu sitio en español. Habilita el flag experimental i18nDomains y mapea cualquiera o todos tus locales a dominios usando i18n.domains en tu archivo astro.config.mjs:

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


export default defineConfig({
    site: "https://example.com",
    output: "server", // required, with no prerendered pages
    adapter: node({
      mode: 'standalone',
    }),
    i18n: {
        defaultLocaLe: 'en',
        locales: ['en', 'es', 'pt_BR', 'pt', 'fr'],
        domains: {
            fr: "https://fr.example.com",
            es: "https://example.es"
        },
        routing: {
          prefixDefaultLocale: true,
        }
    },
    experimental: {
        i18nDomains: true
    },
})

Ten en cuenta que esta característica requiere un sitio completamente renderizado en el servidor sin páginas prerenderizadas. Actualmente, los adaptadores @astrojs/node y @astrojs/vercel son soportados, ¡con más compatibilidad de adaptadores por venir!

Consulta más en nuestra documentación de internacionalización para más detalles y limitaciones sobre esta característica experimental de enrutado.

Más control sobre la salida de tus archivos HTML

Este lanzamiento añade una nueva opción build.format llamada preserve para darte más control sobre los archivos HTML resultantes en tu compilación de producción.

Las opciones de configuración actuales (file y directory) compilan todas tus páginas HTML como archivos que coinciden con el nombre de la ruta (ej. /about.html) o compilan todos tus archivos como index.html dentro de una estructura de directorios anidada (ej. /about/index.html), respectivamente. No es posible crear páginas index individuales (ej. /about/index.html) cuando se usa la opción de configuración file.

En lugar de introducir un cambio disruptivo en file, añadimos el nuevo formato preserve que preservará cómo está estructurado el filesystem y se asegurará de que se refleje en producción:

  • about.astro becomes about.html
  • about/index.astro becomes about/index.html

¡Lo que ves es lo que obtienes! Esta característica desbloquea mejor compatibilidad con ciertos servidores web que tienen requisitos estrictos sobre cómo se estructuran los archivos.

Consulta la referencia de opciones de configuración de build.format para más detalles.

Añadida utilidad de tipo ComponentProps

Astro ahora incluye una nueva exportación de tipo ComponentProps desde astro/types para obtener el tipo de props de un componente de Astro. Esto es similar a React.ComponentProps o ComponentProps de Svelte.

Esta exportación de tipo te permite referenciar los Props aceptados por otro componente, incluso si ese componente no exporta ese tipo Props directamente.

---
import type { ComponentProps } from 'astro/types';
import Button from "./Button.astro";


type MyButtonProps = ComponentProps<typeof Button>;
---

Corrección del uso de imágenes en Markdown sin un especificador relativo

Anteriormente, usar imágenes en Markdown sin usar un especificador relativo (como ./ o ../) causaba que Astro lanzara un error.

Ahora, puedes usar la sintaxis estándar ![](img.png) en archivos Markdown para imágenes colocadas en la misma carpeta: ¡no se requiere especificador relativo!

No hay necesidad de actualizar tu proyecto; tus imágenes existentes seguirán funcionando. Sin embargo, puedes eliminar con seguridad cualquier especificador relativo de estas imágenes en Markdown ya que ya no son necesarias… ¡como la especificación de Markdown pretendía!

 ![A cute dog](./dog.jpg)
 ![A cute dog](dog.jpg)
<!-- This dog lives in the same folder as my article! -->

¡Gracias a Oliver Speir por contribuir esta corrección!

Corrección de Bugs

Como siempre, se incluyen correcciones de bugs adicionales en este lanzamiento. Consulta las notas del lanzamiento para saber más.