Astro en Español 4.9 | Astro en Español

¡Astro 4.9 ya está disponible! Este lanzamiento incluye la tan esperada Container API, características experimentales estabilizadas, y más. ¡Un lanzamiento pequeño pero poderoso!

Los aspectos destacados completos del lanzamiento incluyen:

Experimental: Container API
Soporte para React 19 en Astro Actions
Características experimentales estabilizadas

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

Experimental: Container API

Astro 4.9 introduce una primera vista a la tan esperada Container API. Esta API te permite renderizar componentes de Astro fuera de una aplicación de Astro. Esto es similar a cómo puedes renderizar componentes de React en el servidor usando librerías como react-dom/server, o componentes de Preact usando preact-render-to-string.

Aquí hay un ejemplo de cómo puedes usar la Container API para renderizar un componente de Astro a un string:

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import Component from './components/Component.astro';

const container = await AstroContainer.create();
console.log(await container.renderToString(Component));

Las posibilidades que esta API añade son infinitas, pero este es solo un primer paso. Nuestro principal enfoque en esta etapa es facilitar el renderizado de componentes de Astro dentro de frameworks de testing potenciados por Vite, como Vitest.

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { expect, test } from 'vitest';
import Card from '../src/components/Card.astro';

test('Card with slots', async () => {
  const container = await AstroContainer.create();
  const result = await container.renderToString(Card, {
    slots: {
      default: 'Card content',
    },
  });

  expect(result).toContain('This is a card');
  expect(result).toContain('Card content');
});

Para empezar a probar componentes de Astro con Vitest, hemos creado un nuevo ejemplo que puedes revisar, o crear un nuevo proyecto directamente:

npm create astro@latest -- --template container-with-vitest

Nuestra guía de testing también ha sido actualizada con más información sobre cómo usar la Container API para testing. ¡Prueba todo!

Para saber más sobre la Container API y cómo usarla, consulta la documentación de la Container API. Para dar feedback sobre esta característica experimental y en desarrollo, visita el RFC de la Container API.

Soporte para React 19

El primer release candidate de React 19 ya está disponible, y Astro llegó preparado. Hemos añadido soporte completo para React 19 a la integración de React con algunas ventajas adicionales para Astro Actions.

Para usar React 19 en tu proyecto de Astro, sigue la guía de instalación de React 19 beta. Esto desbloquea la nueva característica de form actions de React, que te permite llamar a Actions desde un <form> y rastrear valores “pending” y “result” en tus componentes.

Este ejemplo usa una Astro Action llamada like() que acepta un postId y devuelve el número de likes. Con React 19, puedes pasar esta action al hook useActionState() para rastrear el resultado. Aplica la función experimental_withState() para aplicar automáticamente información de progressive enhancement:

import { actions } from 'astro:actions';
import { useActionState } from 'react';
import { experimental_withState } from '@astrojs/react/actions';

export function Like({ postId }: { postId: string }) {
  const [state, action, pending] = useActionState(
    experimental_withState(actions.like),
    0, // initial likes
  );

  return (
    <form action={action}>
      <input type="hidden" name="postId" value={postId} />
      <button disabled={pending}>{state} ❤️</button>
    </form>
  );
}

También puedes acceder al estado almacenado por useActionState() desde tu action handler usando experimental_getActionState(). Consulta el CHANGELOG para ejemplos de uso.

Si no necesitas rastrear el estado, también puedes aplicar Astro Actions directamente a la propiedad action en cualquier <form> de React. Esto también aplicará información de progressive enhancement:

import { actions } from 'astro:actions';

export function SignOut() {
  return (
    <form action={actions.signOut}>
      <button>Sign Out</button>
    </form>
  );
}

Para saber más sobre Astro Actions, y para ofrecer feedback sobre esta API experimental, consulta el RFC de Astro Actions.

Características experimentales estabilizadas

Este lanzamiento estabiliza las características de protección CSRF (introducida en Astro 4.6) y soporte de dominios i18n (introducido en Astro 4.3). Ya no es necesario habilitar las opciones experimental.csrfProtection y experimental.i18nDomains en tu configuración de Astro para usar estas características.

La opción experimental.security.csrfProtection ha sido eliminada en favor de una nueva opción security.checkOrigin. Para habilitar la protección contra cross-site request forgery, establece security.checkOrigin a true en tu configuración de Astro y elimina la opción experimental.security.csrfProtection si la tienes habilitada:

import { defineConfig } from "astro/config";

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

En cuanto a los dominios i18n, puedes mantener tu configuración tal cual, simplemente sin la opción experimental.i18nDomains:

import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://example.com",
  output: "server",
  adapter: node({
    mode: 'standalone',
  }),
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "pt-br", "es"],
    prefixDefaultLocale: false,
    domains: {
      fr: "https://fr.example.com",
      es: "https://example.es",
    },
  },
  experimental: {
    i18nDomains: true,
  },
});

Para más información sobre estas características, consulta las secciones de security y dominios i18n de la documentación de Astro respectivamente.

Corrección de Bugs

Como es habitual, ¡Astro 4.9 incluye más correcciones de bugs y mejoras menores que no han podido entrar en este post! Consulta las notas del lanzamiento completas para saber más!