Astro en Español 2.1 | Astro en Español

Acabamos de lanzar Astro 2.1, que incluye:

Soporte de Imágenes Integrado: (experimental) La optimización automática de imágenes está llegando al core de Astro.
Integración de Markdoc: (experimental) Un nuevo formato de contenido de Stripe, optimizado para proyectos grandes.
astro check --watch: Usa este flag para comprobar los tipos de tus archivos .astro durante el desarrollo.
Tipos inferidos para rutas dinámicas: Obtén los params y props sin definir los tipos dos veces.

Astro 2.1 está disponible en npm hoy. Ejecuta npm i astro@latest para actualizar un proyecto existente o ejecuta npm create astro en la terminal para empezar algo nuevo.

Soporte de Imágenes Integrado

Astro 2.1 trae soporte experimental para optimización de imágenes integrada en Astro. Para habilitarla en tu proyecto, ejecuta Astro con el flag --experimental-assets o establece el flag booleano experimental.assets en tu archivo de configuración de Astro.

Si ya estás familiarizado con nuestra integración original @astrojs/image, el nuevo componente integrado <Image> de Astro debería resultarte familiar pero con algunas mejoras notables. Ahora puedes ajustar el tamaño de la imagen usando las props width y height sin cambiar su relación de aspecto y controlar el nivel de optimización de imagen usando la nueva prop quality.

---
import { Image } from "astro:assets"
import penguin from "~/assets/penguin.png"
---

<Image src={penguin} quality="high" alt="a high-quality penguin" />

La imagen resultante será automáticamente optimizada para ti en un formato web moderno, para máximo rendimiento con mínimo Cumulative Layout Shift (CLS).

Adicionalmente, el soporte de imágenes integrado puede intercambiarse por otro proveedor, permitiéndote conectar esto a un CDN de imágenes de producción como Cloudinary o un host como Vercel para aprovechar sus servicios de optimización de imágenes en su lugar.

Astro 2.1 también responde a una de nuestras características más solicitadas tras el lanzamiento original de 2.0: manejo de imágenes dentro de content collections. Un nuevo helper de schema image() ya está disponible desde la API de Content Collections que te permite definir imágenes en tu schema de frontmatter.

import { image, defineCollection, z } from "astro:content"

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    cover: image(),
  }),
})

export const collections = {
  blog: blogCollection,
}

Si la imagen que referencias en tu frontmatter no existe, Astro te lo hará saber. Puedes refinar el schema aún más para comprobar cosas como

cover: image().refine((img) => img.width === 800 && img.height === 600, {
  message: "Cover needs to be 800x600 pixels!",
})

Para probarlo tú mismo, revisa las instrucciones de migración en nuestra nueva Guía de Assets. Continuaremos revisando y mejorando el soporte para imágenes hasta que la característica sea estable y el flag se elimine en un futuro lanzamiento mayor. Puedes contribuir con tu feedback comentando en el Image RFC.

Integración de Markdoc

Una nueva integración experimental de Markdoc también ha sido publicada junto con Astro 2.1. Puedes añadir @astrojs/markdoc a tu proyecto hoy ejecutando npx astro add markdoc en el directorio de tu proyecto.

Markdoc es un prometedor nuevo formato de contenido desarrollado por Stripe cuando necesitaban algo que pudiera igualar su escala. Aunque todavía amamos MDX para Astro, no es raro que nuestros usuarios vean una ralentización notable al procesar un gran número de archivos MDX.

Como parte de nuestra propia investigación, construimos un benchmark de rendimiento para comparar el rendimiento de build de Markdoc dentro de Astro contra nuestros formatos de contenido existentes: Markdown y MDX. Estas pruebas muestran mejoras emocionantes, con builds hasta 3x más rápidos sobre MDX renderizando contenido estático e islas de interactividad.

Una vez que la integración @astrojs/markdoc se ha añadido a tu proyecto, Markdoc está disponible exclusivamente dentro de Content Collections usando la extensión de archivo .mdoc. Puedes mezclar archivos Markdoc junto con tus archivos Markdown y MDX existentes para un proceso de migración suave y gradual.

El soporte para MDX no va a desaparecer. Estamos experimentando con ambos formatos mientras exploramos cómo se ve el futuro del contenido en Astro. Nos encantaría tu feedback mientras intentamos encontrar el equilibrio adecuado entre sintaxis flexible y escalado a sitios más grandes. Especialmente si es tu primera vez probando Markdoc, danos tus pensamientos en el Markdoc RFC en curso.

astro check –watch

astro check es un comando CLI integrado de Astro que ejecuta comprobación de tipos TypeScript en los archivos .astro de tu proyecto. Se usa a menudo para detectar bugs y errores de tipo en CI antes de fusionar cambios o desplegar tu sitio.

Escuchamos de algunos usuarios que querían esta misma característica para desarrollo, similar a tsc --watch en TypeScript. Para algunos, obtener errores en el editor es fácil de pasar por alto, y puede ser fácil olvidar ejecutar astro check manualmente antes de push un cambio.

En Astro 2.1, se ha añadido un nuevo flag --watch al comando astro check. Esto generará un proceso de larga duración que escucha los cambios de archivos y vuelve a ejecutar diagnósticos en los archivos modificados. Puedes ejecutar esto en paralelo con tu servidor de desarrollo añadiendo un script a tu package.json:

{
  "scripts": {
    "dev": "astro check --watch & astro dev"
  }
}

Tipos inferidos para rutas dinámicas

El export getStaticPaths() en tus páginas de Astro se usa para definir qué páginas deben construirse para una ruta dinámica en modo SSG. Para cada página retornas una propiedad params y props.

En Astro 2.1, hemos añadido dos nuevos helpers para inferir estos tipos y proporcionar comprobación de tipos al usar estos valores en tu plantilla.

Dada la siguiente función getStaticPaths():

---
export async function getStaticPaths() {
  const posts = await getCollection("blog")
  return posts.map((post) => {
    return {
      params: { slug: post.slug },
      props: { draft: post.data.draft, title: post.data.title },
    }
  })
}
---

Ahora puedes usar los nuevos helper types InferGetStaticParamsType y InferGetStaticPropsType para obtener definiciones de tipos para tus valores params y props sin necesidad de definirlos manualmente:

import { InferGetStaticParamsType, InferGetStaticPropsType } from "astro"
export async function getStaticPaths() {
  /* ... */
}

type Params = InferGetStaticParamsType<typeof getStaticPaths>
type Props = InferGetStaticPropsType<typeof getStaticPaths>
const { slug } = Astro.params as Params
//                     ^? { slug: string; }
const { title } = Astro.props
//                      ^? { draft: boolean; title: string; }

Prueba Astro 2.1

Gracias a todos los que contribuyeron a este destacado lanzamiento. Además de estas nuevas características, también hubo un montón de correcciones de bugs en los paquetes principales e integraciones. Revisa las notas del lanzamiento completas para aprender más.