Astro 4.11

Por
Matthew Phillips

Astro 4.11 ya está disponible con mejoras en la página 500 personalizada y transformadores de Shiki en el componente Code.

Más información sobre cada uno de estos:

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

Mejoras en 500.astro

src/pages/500.astro es un archivo de página especial en Astro que te permite manejar errores 500 de forma elegante. Un error 500 ocurre más comúnmente cuando hay un bug en tu aplicación; como no envolver código delicado en un try/catch. Cuando el código de un componente lanza un error, Astro lo captura y devuelve una respuesta 500. Si tienes src/pages/500.astro, esta página se renderiza en el cuerpo de la respuesta.

Nuevo en 4.11, 500.astro ahora recibe el error como prop. Esto te permite dar más información contextual sobre el error.

---
interface Props {
  error: unknown
}
const { error } = Astro.props
---


<html lang="en">
<head>
  <title>Server error - Custom 500</title>
</head>
<body>
  <h1>Server error</h1>
  <p>{error instanceof Error ? error.message : 'Unknown error'}</p>
</body>
</html>

Transformadores de Shiki en el componente Code

El componente integrado de Astro <Code /> se usa para renderizar bloques de código con resaltado de sintaxis dentro de páginas de Astro. El componente usa Shiki y soporta todos los temas y lenguajes populares. Ahora, también puedes usar transformadores de Shiki en los bloques de código pasando la prop transformers:

---
import { transformerNotationFocus } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code {code} lang="js" transformers={[transformerNotationFocus()]} />
<style is:global>
  pre.has-focused .line:not(.focused) {
    filter: blur(1px);
  }
</style>

Más

Como siempre, Astro 4.11 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 especiales a Sarah, Bjorn, Ema, Florian, braebo y a todos los demás que contribuyeron a este lanzamiento.