Astro 5.12

Por
Matt Kane

⚽ Astro 5.12 la mete en el fondo de la red, con una experiencia de desarrollo de Netlify mejorada, soporte TOML en content loaders, ¡y más!

La alineación inicial incluye:

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

Soporte TOML para content loaders

Astro 5.12 trae soporte nativo para archivos TOML en colecciones de contenido. Los file() y glob() content loaders de Astro ya te cubrían para archivos Markdown, JSON y YAML, y ahora también puedes usar archivos TOML.

No se necesita ninguna configuración para habilitar el soporte TOML: simplemente añade archivos .toml a una colección usando un loader integrado. Por ejemplo, si tienes un directorio de archivos TOML como este:

src/content/spacecraft/apollo.toml
name = "Apollo"
launch_date = "1969-07-16"
crew = ["Neil Armstrong", "Buzz Aldrin", "Michael Collins"]

Luego puedes crear una content collection que incluya los archivos TOML:

src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';


const spacecraft = defineCollection({
  loader: glob({ pattern: '*.toml', base: './src/content/spacecraft' }),
  schema: z.object({
    name: z.string(),
    launch_date: z.coerce().date(),
    crew: z.array(z.string()),
  }),
});
export const collections = { spacecraft };

Luego puedes acceder al contenido TOML en tus componentes de Astro:

src/pages/spacecraft.astro
---
import { getCollection } from 'astro:content';


const spacecraft = await getCollection('spacecraft');
---


<ul>
  {
    spacecraft.map((item) => (
      <li>
        <h2>{item.name}</h2>
        <p>Launch Date: {item.launch_date.toLocaleDateString()}</p>
        <p>Crew: {item.crew.join(', ')}</p>
      </li>
    ))
  }
</ul>

Nueva experiencia de desarrollo en Netlify

El adaptador de Netlify ahora está potenciado por el propio Vite plugin de Netlify durante el desarrollo, ¡trayendo toda la plataforma y primitivas de Netlify a tu entorno de desarrollo local!

El poder de Netlify en localhost

Hasta ahora, usar primitivas de Netlify con Astro durante el desarrollo local requería ejecutar tu proyecto a través del Netlify CLI. El nuevo adaptador integra estas capacidades directamente en el dev server de Astro.

Después de actualizar a la última versión del adaptador, ejecutar astro dev proporcionará:

Configurando las características de desarrollo

Junto con estas características viene una forma de configurarlas. El adaptador de Netlify ahora acepta una opción devFeatures en su configuración para personalizar qué características se habilitan durante el desarrollo. Actualmente, las características que puedes configurar son:

  • images: Habilita el Netlify Image CDN local para imágenes de Astro durante el desarrollo. Por defecto es true.
  • environmentVariables: Puebla automáticamente tu servidor de desarrollo con variables de entorno desde tu sitio de Netlify enlazado. Por defecto es false.

Pasas esto como una opción al adaptador de Netlify en tu archivo de configuración de Astro:

astro.config.mjs
import { defineConfig } from 'astro/config'
import netlify from '@astrojs/netlify'


export default defineConfig({
  adapter: netlify({
    devFeatures: {
      environmentVariables: true,
      images: false,
    },
  })
})

¡Ahora puedes disfrutar del rico sabor de Netlify en tu propia casa!

Thanks to Eduardo Bouças and chee rabbits from Netlify who contributed this feature. Extra thanks to chee who contributed to this post too.

Valores de entorno raw experimentales

Una nueva opción de configuración experimental te permite optar por no participar en la coerción automática de tipos de Astro para los valores de variables de entorno en import.meta.env. Por defecto, Astro convierte valores string como "true", "false", "1", y "0" a sus tipos respectivos, pero esto puede ser inesperado ya que las variables de entorno generalmente se espera que sean strings.

Esto alinea el comportamiento de Astro con el manejo de variables de entorno de Vite, y es probable que se convierta en el valor por defecto en un futuro lanzamiento major.

Para habilitar esta característica, añade el flag rawEnvValues a tu configuración de Astro:

astro.config.mjs
export default defineConfig({
  experimental: {
    rawEnvValues: true,
  },
});

Esta opción experimental solo afecta al objeto import.meta.env y no impacta el módulo astro:env que potencia las variables de entorno type-safe de Astro.

Gracias a Adam Langbert que contribuyó esta característica.

Correcciones de bugs

Como siempre, hemos estado trabajando duro en corregir problemas desde el lanzamiento 5.11. Consulta el changelog para todos los detalles.

Comunidad

El core team de Astro es:

Alexander Niebuhr , Ben Holmes , Caleb Jasik , Chris Swithinbank , Emanuele Stoppa , Erika , Florian Lefebvre , Fred Schott , Fuzzy , HiDeoo , Luiz Ferraz , Matt Kane , Matthew Phillips , Nate Moore , Reuben Tier , Sarah Rainsberger , and Yan Thomas

Gracias a todos los demás contribuidores que ayudaron a hacer posible Astro 5.12 con adiciones y mejoras de código y documentación, incluyendo:

Adam Langbert, Adam Matthiesen, Adit Sachde, Anmoti, Armand Philippot, chee, coderfee, Dixon Sean Low Yan Feng, Eduardo Bouças, Farhad, Junseong Park, Kenichi Nakamura, knj, liruifengv, Martin Trapp, Matthew Justice, Nin3, Paul Valladares, Philippe Serhal, Reuben Tier, Rezix, Robbie Wagner, ryu, Surya Kencana Putra, Thomas Bonnet, and Toby Nguyen