Astro 3.2: Mejoras en View Transitions

Por
Matthew Phillips
Martin Trapp
Chris Swithinbank

Astro 3.2 ya está disponible con varias mejoras nuevas que hacen que las view transitions y las integraciones sean aún más fáciles de usar:

Para aprovechar las últimas características de view transitions, asegúrate de estar ejecutando la última versión de Astro. Puedes actualizar a Astro 3.2 ejecutando el comando de actualización para tu gestor de paquetes preferido:

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

Ahora puedes configurar enlaces individuales para evitar que se añada una nueva entrada al historial de navegación del navegador. Añade el atributo data-astro-history="replace" a cualquier etiqueta <a> y Astro usará en su lugar la API subyacente history.replaceState. Usa esto para menos clics del botón de retroceso, o para evitar enviar a los lectores de vuelta a páginas como confirmaciones de envío de formularios.

<a href="/toggle" data-astro-history="replace">Toggle me</a>

API de Navegación con JavaScript

Ahora puedes disparar navegaciones desde tu JavaScript del lado del cliente a través de la nueva API navigate(). Anteriormente las transiciones solo ocurrían cuando el usuario hacía clic en enlaces ancla. Con la nueva API de navegación tienes control completo sobre cuándo ocurre la navegación.

import { navigate } from 'astro:transitions/client';


// Navigate to the selected option automatically.
document.querySelector('select').onchange = (ev) => {
  let href = ev.target.value;
  navigate(href);
};

Además, tienes control sobre la pila del historial con este método a través de la opción history, que funciona igual que el atributo data-astro-history:

import { navigate } from 'astro:transitions/client';


navigate(href, {
  history: 'replace'
});

Anunciante de Rutas

El router de View Transitions ahora hace anuncios de rutas. Al transicionar entre páginas con un enfoque MPA tradicional, las tecnologías asistivas anunciarán el título de la página cuando esta termine de cargar. Esto no ocurre automáticamente durante el enrutamiento del lado del cliente, por lo que los visitantes que dependen de estas tecnologías para anunciar rutas no se enteran cuando una página ha cambiado.

El anunciante de rutas de view transitions se ejecuta después del evento astro:page-load, buscando el <title> de la página para anunciar. Si no se encuentra ninguno, el anunciante recurre al primer <h1> que encuentra o de lo contrario anuncia la ruta. Te recomendamos incluir siempre un <title> en cada página para accesibilidad.

Consulta la documentación de View Transitions para más información sobre cómo se maneja la accesibilidad.

Integraciones Añadidas Dinámicamente

Las integraciones mismas ahora pueden añadir y configurar dinámicamente integraciones adicionales durante la configuración. Esto hace posible que los autores de integraciones agrupen integraciones de manera más inteligente para sus usuarios.

En el siguiente ejemplo, una integración personalizada verifica si @astrojs/sitemap ya está configurado. Si no es así, la integración añade la integración de sitemap de Astro, pasando cualquier opción de configuración deseada:

import sitemap from '@astrojs/sitemap';
import type { AstroIntegration } from 'astro';


const MyIntegration = (): AstroIntegration => {
  return {
    name: 'my-integration',


    'astro:config:setup': ({ config, updateConfig }) => {
      // Look for sitemap in user-configured integrations.
      const userSitemap = config.integrations.find(
        ({ name }) => name === '@astrojs/sitemap'
      );


      if (!userSitemap) {
        // If sitemap wasn’t found, add it.
        updateConfig({
          integrations: [sitemap({ /* opts */ }],
        });
      }
    },
  };
};

Más

Correcciones de bugs adicionales y características de integración están incluidas en este lanzamiento. Revisa las notas del lanzamiento para aprender más.