Astro 2.9: View Transitions (experimental)

Por
Matthew Phillips

Astro 2.9 ya está disponible e incluye soporte experimental para view transitions, así como configuración de redirecciones y agrupamiento de scripts mejorado.

Si ya tienes Astro instalado, puedes actualizarlo a la versión 2.9 ejecutando el comando upgrade en tu proyecto (usando tu gestor de paquetes preferido):

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

Mientras estás en eso, ¡actualiza también cualquier integración y adaptador @astrojs/* que tengas instalado!

View Transitions (experimental)

Mira a Ben Holmes explicar la nueva característica de View Transitions.

Astro ahora soporta view transitions a través del nuevo componente <ViewTransitions /> y la directiva transition:animate. Disfruta de las transiciones más suaves que antes requerían enrutamiento del lado del cliente, sin sacrificar la simplicidad de un MPA.

Habilita el soporte para view transitions en Astro 2.9 añadiendo la bandera experimental a tu configuración:

import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    viewTransitions: true,
  },
});

<ViewTransitions />

Este es un componente que actúa como el router para las transiciones entre páginas. Añádelo a la sección <head> de cada página individual donde deban ocurrir las transiciones en el cliente mientras navegas a otra página, en lugar de causar una recarga completa del navegador.

Para habilitar el soporte en toda tu app (modo SPA), añade el componente en algún layout o componente común que apunte al <head> de cada página.

CommonHead.astro

---
import { ViewTransitions } from 'astro:transitions';
---


<meta charset="utf-8" />
<title>{Astro.props.title}</title>
<ViewTransitions />

Con solo este cambio, tu app ahora enrutará completamente en el cliente. Luego puedes añadir transiciones a elementos individuales usando la directiva transition:animate.

Animaciones

Añade transition:animate a cualquier elemento para usar las animaciones integradas de Astro.

<header transition:animate="slide"></header>

En el ejemplo anterior, la animación slide de Astro hará que el elemento <header> se deslice desde la izquierda, y luego se deslice hacia la derecha cuando navegues fuera de la página.

También puedes personalizar estas animaciones usando cualquier propiedad de animación CSS, por ejemplo, especificando una duración:

---
import { slide } from 'astro:transition';
---


<header transition:animate={slide({ duration: 200 })}></header>

Continúa aprendiendo

Consulta la documentación de enrutamiento del lado del cliente para saber más.

Redirecciones

¡La opción de configuración redirects ya no es experimental! Si estabas usando redirecciones experimentales anteriormente, elimina la siguiente bandera experimental:

import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    redirects: true,
  }
});

Si has estado esperando la estabilización antes de usar redirecciones, ¡ya no esperes más! Ahora puedes usar redirecciones de forma segura en tu proyecto. Consulta la documentación sobre redirecciones para aprender a usar esta característica integrada.

En tu configuración, añade un mapa de rutas antiguas y nuevas para redirigir desde y hacia:

import { defineConfig } from 'astro/config';


export default defineConfig({
  redirects: {
    '/old-page': '/new-page'
  }
});

Optimización de scripts elevados

¡El análisis estático de Astro para determinar qué etiquetas <script> agrupar juntas ahora es un poco más inteligente!

Astro crea bundles que optimizan el uso de scripts entre páginas y los coloca en el head del documento para que se descarguen lo antes posible. Una limitación del enfoque existente de Astro ha sido que no podías usar dinámicamente scripts elevados. Al usar librerías que re-exportaban componentes, cada página recibía el mismo bundle inclusivo, independientemente de si cada script era necesario en esa página.

Ahora, Astro ha mejorado el análisis estático para tener en cuenta las importaciones reales utilizadas.

Por ejemplo, Astro anteriormente agrupaba los <script>s de ambos componentes <Tab> y <Accordion> para la siguiente librería que re-exporta múltiples componentes:

@matthewp/my-astro-lib

export { default as Tabs } from './Tabs.astro';
export { default as Accordion } from './Accordion.astro';

Ahora, cuando una página de Astro solo usa un único componente, Astro enviará solo el script necesario a la página. Una página que solo importa el componente <Accordion> no recibirá ningún script del componente <Tab>:

---
import { Accordion } from '@matthewp/my-astro-lib';
---

Ahora deberías ver un rendimiento más eficiente con Astro soportando este patrón común de re-exportación de librerías.

Gracias a Ottomated, un colaborador de la comunidad, por trabajar en esta nueva característica.

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.