Astro en Español 4.15 | Astro en Español

¡Astro 4.15 ya está disponible! Este lanzamiento estabiliza Astro Actions — nuestra solución para funciones de backend completamente type-safe. También se incluye: soporte para remotes de libSQL en Astro DB, una nueva opción de timeout para client:idle, y más.

Este lanzamiento incluye los siguientes aspectos destacados:

Estable: Astro Actions
Uso de rewrites para fallbacks de i18n
Remotes de libSQL en @astrojs/db
Opción de timeout en client:idle
Helpers de swap disponibles para personalizaciones de ViewTransitions

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

Estable: Astro Actions

Astro Actions ya no es experimental y está lista para ayudar a construir tu próximo backend.

Las Actions manejan la obtención de datos type-safe, el parsing de JSON, y la validación de entrada por ti. Esto reduce dramáticamente la cantidad de boilerplate necesaria en comparación con usar un API endpoint.

// Before
export const POST = ({ request }) => {
  const contentType = request.headers.get('Content-Type');
  if (contentType !== 'application/json') return new Response('Unsupported body', { status: 415 });

  const json = await request.json();
  const input = z.object({ email: z.string().email() }).safeParse(json);
  if (!input.success) return new Response(JSON.stringify(input.error), { status: 400 });
  // ...50 more lines
 }

// After
defineAction({
  input: z.object({ email: z.string().email() }),
  handler: ({ name }) => { /* ... */ },
})

Las Actions pueden llamarse desde componentes del lado del cliente y formularios HTML. Esto te da la flexibilidad para construir apps usando cualquier tecnología, como React, Svelte, etiquetas script, o simplemente componentes de Astro. Este ejemplo llama a una action de newsletter y renderiza el resultado usando un componente de Astro:

---
import { actions } from 'astro:actions';

const result = Astro.getActionResult(actions.newsletter);
---

{result && !result.error && <p>Thanks for signing up!</p>}

<form method="POST" action={actions.newsletter}>
  <input type="email" name="email" />
  <button>Sign up</button>
</form>

Para más información y ejemplos de uso, consulta nuestra nueva guía de Actions.

Rewrites en fallbacks de i18n

Se ha añadido una nueva opción al enrutado de internacionalización (i18n) que permite más control sobre cómo se manejan los fallbacks. Ahora puedes especificar si un fallback resulta en un rewrite (una respuesta 200 del servidor) o una redirección, el valor por defecto actual.

El sistema de fallback en i18n te permite definir qué contenido se usa para un locale cuando ese contenido no está disponible en el locale del usuario. Por ejemplo, tu configuración podría verse así:

import { defineConfig } from "astro/config"
export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["es", "en", "fr"],
    fallback: {
      fr: "es"
    },
    routing: {
      fallbackType: "rewrite"
    }
  }
})

Para más información sobre esta nueva característica, consulta nuestra documentación renovada sobre manejo de fallbacks en i18n.

Remotes de libSQL en Astro DB

Ahora puedes especificar una instancia de servidor libSQL como remote para @astrojs/db. Esto te permite autohospedar tu propio servidor libSQL como alternativa a usar Astro DB con Astro Studio. Esta opción funciona con cualquier protocolo libSQL soportado.

Para usar esta característica, establece las siguientes variables de entorno:

ASTRO_DB_REMOTE_URL: la URL de conexión a tu servidor libSQL.
ASTRO_DB_APP_TOKEN: el token de autenticación a tu servidor libSQL.

Habilitar esta característica te permite conectarte al servidor libSQL en tu entorno de producción y también te permite usar los comandos de despliegue y push (migración) de Astro DB con la instancia libSQL. ¡Gracias a Fryuni por esta increíble contribución!

Para más información sobre el uso de servidores libSQL en Astro DB, visita nuestra guía de Astro DB.

Opción de timeout en `client:idle`

La directiva client:idle se usa para cargar una Astro Island cuando la CPU del usuario está inactiva (cuando no se está ejecutando otro JavaScript). Bajo el capó, esta característica depende de la función requestIdleCallback de los navegadores.

En Astro 4.15, ahora puedes especificar una propiedad timeout que activará la hidratación para asegurar que tu elemento sea interactivo dentro de un período de tiempo especificado. Esto es útil para añadir prioridad a un componente que podría estar compitiendo con otros componentes inactivos.

{/* Component loads after a maximum wait of 500ms */}
<Counter id="client-idle-timeout" {...someProps} client:idle={{ timeout: 500 }}>
  <h1>Hello, client:idle={'{{timeout: 500}}'}!</h1>
</Counter>

Gracias a ph1p por esta contribución.

Helpers de swap para ViewTransitions

El router <ViewTransitions /> de Astro te da la UX de una single-page app (SPA) mientras preserva la DX de una multi-page app (MPA) de Astro. Lo hace obteniendo páginas durante la navegación e intercambiando el contenido para el enrutado del lado del cliente. En algunos casos, podría querer más control sobre cómo funciona el swap, lo cual puede hacerse sobrescribiendo el swap en el evento astro:before-swap.

En Astro 4.15, las funciones de swap integradas ahora se exportan desde astro:transitions/client. Estos helpers te permiten usar partes de lo que Astro hace por defecto, y añadir tu propia lógica personalizada entre medias.

<script>
import { swapFunctions } from 'astro:transitions/client';

document.addEventListener('astro:before-swap', (e) => {
  e.swap = () => swapMainOnly(e.newDocument);
});

function swapMainOnly(doc: Document) {
  swapFunctions.deselectScripts(doc);
  swapFunctions.swapRootAttributes(doc);
  swapFunctions.swapHeadElements(doc);
  const restoreFocusFunction = swapFunctions.saveFocus();
  const newMain = doc.querySelector('main');
  const oldMain = document.querySelector('main');
  if (newMain && oldMain) {
    swapFunctions.swapBodyElement(newMain, oldMain);
  } else {
    swapFunctions.swapBodyElement(doc.body, document.body);
  }
  restoreFocusFunction();
}
<script>

Consulta la documentación para más información sobre cómo construir tu propia función de swap personalizada y ¡asegúrate de compartir con nosotros lo que crees!

Gracias a martrapp por esta contribución.

Correcciones de bugs y agradecimientos especiales

Como es habitual, Astro 4.15 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.

Gracias a Sarah Rainsberger (@sarah11918), Yan (@yanthomasdev), Bjorn Lu (@bluwy), Emanuele Stoppa (@ematipico), Chris Swithinbank (@delucis), y a todos los demás que contribuyeron a este lanzamiento.