Astro 4.2

Por
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

¡Astro 4.2 ya está disponible! Este lanzamiento incluye nuevas características experimentales para probar, mejoras en las reglas de accesibilidad, la capacidad de los remark plugins para personalizar la optimización de imágenes en Markdown, y muchas más mejoras y correcciones de bugs.

Los aspectos destacados incluyen:

Esto marca el primer lanzamiento de Astro con casi todas las características construidas por la comunidad, con solo un aspecto destacado traído por un maintainer del core de Astro. Este es un gran hito para nosotros, ya que significa que Astro es ahora lo suficientemente grande para tener una comunidad próspera de contribuidores capaces de liderar lanzamientos. ¡Gracias a todos los que contribuyeron a este lanzamiento!

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.2 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) Prerenderización de páginas usando la Speculation Rules API

Gracias a Ross Robino, la característica de prefetch de Astro ahora tiene soporte experimental para prerenderizar páginas usando la Speculation Rules API, actualmente exclusiva de Chromium. Esta API te permite prerenderizar páginas en el cliente, e incluso ejecutar JavaScript del lado del cliente en páginas que el usuario probablemente visitará a continuación, permitiendo una experiencia de navegación más rápida.

Para habilitar esta característica, añade lo siguiente a tu archivo astro.config.mjs:

import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({
  prefetch: true,
  experimental: {
    clientPrerender: true,
  },
});

Esto respetará tus opciones de configuración de prefetch existentes, pero ahora prerenderizará todos los enlaces con el atributo data-astro-prefetch en el cliente, en su lugar. Se proporciona un fallback integrado para los navegadores que aún no soportan la Speculation Rules API.

Adicionalmente, puedes usar la propiedad document.prerendering en etiquetas <script> para comprobar si la página se está prerenderizando:

<script>
  if (document.prerendering) {
    // prerendering is enabled
  }
</script>

Para más información sobre esta característica experimental, consulta la documentación de experimental.clientPrerender.

(Experimental) Prioridad de enrutado reworked para rutas inyectadas

Anteriormente, las rutas inyectadas usando la API injectRoute() recibían la máxima prioridad, lo que significaba que se matching antes que cualquier otra ruta. Aunque esto parecía una buena idea en su momento, desafortunadamente causó muchos problemas difíciles de depurar donde las rutas no se matching como se esperaba.

Históricamente, hemos sido reacios a cambiar este comportamiento debido a la cantidad de problemas no intencionados que los cambios en el sistema de enrutado pueden causar. Sin embargo, gracias a Luiz Ferraz por implementar cuidadosamente una solución, ¡Astro 4.2 trae un flag experimental que sienta las bases para un nuevo y mejorado sistema de enrutado por defecto en Astro!

Con este flag habilitado, las rutas inyectadas usando la API injectRoute(), así como las redirecciones, ahora seguirán el mismo orden de prioridad que las rutas del filesystem. Esto debería proporcionar reglas de ordenación de prioridad más estables y consistentes para todas las rutas de tu proyecto.

Prueba el futuro de Astro hoy añadiendo la nueva opción experimental.globalRoutePriority al archivo astro.config.mjs para optar al nuevo comportamiento:

import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({
  experimental: {
    globalRoutePriority: true,
  },
});

También se ha añadido logging adicional para informarte de cualquier colisión de rutas donde dos rutas están intentando compilar la misma URL.

Consulta la documentación de experimental.globalRoutePriority para más detalles.

Nueva opción de configuración redirectToDefaultLocale

Una petición común desde la introducción del soporte de internacionalización en Astro 4.0 ha sido la capacidad de deshabilitar las redirecciones automáticas de la URL raíz (/) al locale por defecto cuando se establece prefixDefaultLocale: true.

Esto ahora es posible con la nueva opción redirectToDefaultLocale:

import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({
  i18n:{
    defaultLocale: "en",
    locales: ["en", "fr"],
    routing: {
      prefixDefaultLocale: true,
     redirectToDefaultLocale: false
    }
  }
});

¡Redirecciona, o no! Ahora depende de ti. Esta opción está habilitada por defecto.

Reglas de accesibilidad mejoradas

Las reglas de accesibilidad añadidas al Astro Dev Toolbar en 4.0 han sido mejoradas para ser más precisas. ¡Gracias a Oliver Speir por leer meticulosamente las directrices WCAG y mejorar estas reglas! Los problemas de accesibilidad reportados erróneamente como falsos positivos por el Dev Toolbar en lanzamientos anteriores están corregidos en esta actualización, y más mejoras están en desarrollo activo.

Optimización de imágenes personalizable en Markdown

También de Oliver, los remark plugins ahora pueden personalizar cómo se optimizan las imágenes en archivos Markdown. Anteriormente, cada imagen incluida en archivos Markdown usando la sintaxis nativa (![alt](src)) usaba la configuración por defecto de Astro para la optimización de imágenes. Con esta actualización, los remark plugins ahora pueden añadir propiedades a los nodos image para personalizar cómo se optimizan.

Por ejemplo, el siguiente remark plugin establecerá las propiedades width y height de cada imagen a 100:

import { visit } from "unist-util-visit";


export default function remarkPlugin() {
  return (tree) => {
    visit(tree, 'image', (node) => {
      node.data.hProperties = node.data.hProperties || {};
      node.data.hProperties.width = "100";
      node.data.hProperties.height = "100";
    });
  };
}

Esto es actualmente exclusivo de archivos Markdown, pero esperamos añadir soporte para MDX también en un futuro lanzamiento.

Corrección de Bugs

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