Astro 4.14

¡Astro 4.14 ya está disponible! Este lanzamiento incluye la primera versión experimental de la Content Layer API, nuestra nueva solución súper flexible para gestionar contenido en proyectos de Astro, soporte para Intellisense dentro de archivos de contenido, y más.

Este lanzamiento incluye los siguientes aspectos destacados:

• Experimental: Content Layer API
• Experimental: Intellisense dentro de archivos de contenido
• Deprecación del soporte para valores dinámicos de prerender
• Nueva API de integración injectTypes
• Soporte para metastrings en el componente Code

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

Experimental: Content Layer API

En Astro 2.0 introdujimos Content Collections, una forma potente de gestionar contenido local en proyectos de Astro. Aunque esto ha ayudado a cientos de miles de desarrolladores a construir sitios orientados a contenido con Astro, hemos escuchado vuestro feedback de que queréis más flexibilidad y potencia en la gestión de vuestro contenido. Estamos emocionados de anunciar el lanzamiento experimental de la próxima generación de content collections en Astro: la Content Layer API.

La nueva Content Layer API se basa en las content collections, llevándolas más allá de los archivos locales en src/content/ y permitiéndote obtener contenido de cualquier lugar, incluyendo APIs remotas. Estas nuevas colecciones funcionan junto a tus content collections existentes, y puedes migrarlas a la nueva API a tu propio ritmo. Creemos que querrás hacerlo pronto, porque tienen muchas ventajas, pero no hay prisa – las colecciones existentes seguirán funcionando como siempre lo han hecho.

Rendimiento

La Content Layer API es el primer paso para escalar Astro y soportar compilaciones rápidas para sitios con decenas o cientos de miles de páginas. La nueva API está diseñada para ser más eficiente y performante en la forma en que carga el contenido. Cachea el contenido localmente para evitar la necesidad de seguir golpeando APIs y ha mejorado dramáticamente el manejo de archivos locales de Markdown y MDX. Este benchmark muestra el rendimiento al compilar un sitio con 10.000 páginas en un Macbook Air M1:

Planeamos seguir mejorando el rendimiento de la Content Layer API en futuros lanzamientos, incluyendo añadir soporte para un backend SQLite para manejar sitios aún más grandes.

Empezando

Para probar la nueva Content Layer API, habilítala en tu configuración de Astro:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    contentLayer: true
  }
})

Luego puedes crear colecciones en tu src/content/config.ts usando la Content Layer API.

Cargando tu contenido

El núcleo de la nueva Content Layer API es el loader, una función que obtiene contenido de una fuente y lo cachea en un data store local. Astro 4.14 incluye loaders integrados glob() y file() para manejar tus archivos locales de Markdown, MDX, Markdoc, y JSON:

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  // The ID is a slug generated from the path of the file relative to `base`
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishDate: z.coerce.date(),
  })
});

export const collections = { blog };

Luego puedes usar el contenido en tu sitio:

---
import { getEntry, render } from 'astro:content';

const post = await getEntry('blog', Astro.params.slug);

const { Content } = await render(entry);
---

<Content />

Creando un loader

No estás restringido a los loaders integrados – esperamos que pruebes a construir los tuyos propios. Puedes obtener contenido de cualquier lugar y devolver un array de entradas:

const countries = defineCollection({
  loader: async () => {
    const response = await fetch("https://restcountries.com/v3.1/all");
    const data = await response.json();
    // Must return an array of entries with an id property,
    // or an object with IDs as keys and entries as values
    return data.map((country) => ({
      id: country.cca3,
      ...country,
    }));
  },
  // optionally add a schema to validate the data and make it type-safe for users
  // schema: z.object...
});

export const collections = { countries };

Para lógica de carga más avanzada, puedes definir un object loader. Esto permite actualizaciones incrementales y carga condicional mientras también da acceso completo al data store. También permite que un loader defina su propio schema, incluyéndolo generándolo dinámicamente basándose en la API de origen. Consulta el RFC de la Content Layer API para más detalles.

Compartiendo tus loaders

¡Los loaders son mejores cuando se comparten! Puedes crear un módulo que exporte un loader y publicarlo en npm, y luego cualquiera puede usarlo en su sitio. Etiqueta tus paquetes con la palabra clave astro-loader para que puedan encontrarse. ¡Estamos emocionados de ver qué se le ocurre a la comunidad! Para empezar, echa un vistazo a algunos ejemplos. Así es como cargar contenido usando un loader de feed RSS/Atom:

import { defineCollection } from "astro:content";
import { feedLoader } from "@ascorbic/feed-loader";

const podcasts = defineCollection({
  loader: feedLoader({
    url: "https://feeds.99percentinvisible.org/99percentinvisible",
  }),
});

export const collections = { podcasts };

Más información

Para saber más sobre el uso de la Content Layer API, consulta el RFC de la Content Layer y comparte tu feedback.

Experimental: Intellisense dentro de archivos de contenido

Astro 4.14 introduce soporte experimental para Intellisense dentro del frontmatter de tu contenido. Esta característica te ayuda a escribir archivos de contenido más eficientemente proporcionando autocompletado, validación, información al pasar el ratón por encima, y más para las claves y valores del frontmatter. Estas herramientas se basan en tus content schemas, y están disponibles directamente en tu editor.

Esta característica está disponible en VS Code y otros editores que soportan el Language Server Protocol para archivos Markdown, MDX, y Markdoc.

Para habilitar intellisense en archivos de contenido, añade lo siguiente a tu configuración de Astro:

import { defineConfig } from 'astro';

export default defineConfig({
  experimental: {
    contentIntellisense: true
  }
})

y en VS Code, habilita la opción astro.content-intellisense. Para otros editores, pasa contentIntellisense: true a los parámetros de inicialización del Astro language server.

{
  "astro.content-intellisense": true
}

Esta característica actualmente solo funciona en el editor y se habilitará en astro check en un futuro lanzamiento.

Deprecación del soporte para valores dinámicos de prerender

Para mejorar nuestras capacidades de bundling y tree-shaking, Astro 4.14 deprecia el soporte para usar valores dinámicos en la opción prerender de tus páginas de Astro.

Esta característica ahora puede reemplazarse con el nuevo hook astro:route:setup en las integraciones de Astro, que te permite controlar dinámicamente el prerendering de páginas específicas.

---
 export const prerender = import.meta.env.PROD;
---

import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [setPrerender()],
});

function setPrerender() {
  return {
    name: 'set-prerender',
    hooks: {
      'astro:route:setup': ({ route }) => {
        if (route.component.endsWith('/blog/[slug].astro')) {
          route.prerender = true;
        }
      },
    },
  };
}

Nueva API de integración injectTypes

La generación de tipos se ha puesto muy de moda en los últimos años, ¡y Astro no es una excepción! Usamos la generación de tipos bastante extensivamente para características como Astro DB y Content Collections (o la nueva Content Layer API).

¡Gracias a @florian-lefebvre, las integraciones de Astro ahora pueden unirse a la diversión con la nueva API de integración injectTypes! Esta API permite a las integraciones inyectar tipos en el proyecto del usuario, facilitando proporcionar definiciones de tipos para las características de tu integración.

export default {
  name: 'my-integration',
  'astro:config:done': ({ injectTypes }) => {
    injectTypes({
      filename: "types.d.ts",
      content: "declare module 'virtual:my-integration' {}"
    })
  }
};

Para más información sobre esta característica, consulta la documentación de la API de integración de Astro.

Soporte para metastrings en el componente Code

Astro 4.14 añade soporte para el atributo meta en el componente Code. Este atributo simula el uso de propiedades en bloques de código en Markdown, por ejemplo ```js astro=cool, que luego pueden ser usadas por Shiki transformers para aplicar transformaciones personalizadas al bloque de código.

---
import { Code } from "astro:components";
import { transformerMetaHighlight } from '@shikijs/transformers';
---
<Code
  code={code}
  lang="js"
  transformers={[transformerMetaHighlight()]}
  meta="{1,3}" />

¡Gracias a @jcayzac por esta contribución!

Correcciones de bugs y agradecimientos especiales

Como es habitual, Astro 4.14 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 a Sarah Rainsberger (@sarah11918), Yan (@yanthomasdev), Bjorn Lu (@bluwy) y a todos los demás que contribuyeron a este lanzamiento.