Astro en Español 5.13 | Astro en Español

🍀 El afortunado Astro 5.13 trae mejoras experimentales al manejo de variables de entorno, soporte para Chrome DevTools workspaces, ¡y más!

La alineación inicial incluye:

import.meta.env estático experimental
Soporte experimental para Chrome DevTools workspace
Múltiples sitemaps
Páginas de error hospedadas experimentales con el adaptador de Node.js
Soporte de enum en tablas de Astro DB
Soporte local para Cloudflare KV

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

`import.meta.env` estático experimental

¡Las variables de entorno pueden ser complicadas! La API astro:env de Astro te permite configurar un schema type-safe para tus variables de entorno, y convierte las variables importadas vía astro:env al tipo esperado. Esta es la forma recomendada de usar variables de entorno en Astro, ya que te permite ver y gestionar fácilmente si tus variables son públicas o secretas, disponibles en el cliente o solo en el servidor en tiempo de compilación, y el tipo de dato de tus valores.

Sin embargo, todavía puedes acceder a tus variables de entorno a través de process.env así como import.meta.env directamente si lo necesitas. Esta era la única forma de usar variables de entorno en Astro antes de que se añadiera astro:env en Astro 5.0, y su manejo de import.meta.env incluye alguna lógica que estaba pensada para versiones anteriores de Astro que ya no es necesaria.

Astro 5.13 incluye un nuevo flag experimental.staticImportMetaEnv que actualiza el comportamiento de import.meta.env para alinearse con el manejo de variables de entorno de Vite y para mayor facilidad de uso con las implementaciones y características actuales de Astro. Este flag reemplaza el anterior rawEnvVariables como una solución más completa para manejar variables de entorno meta privadas. Este se convertirá en el comportamiento por defecto en Astro 6.0, y esta vista previa temprana se introduce como una característica experimental.

Actualmente, las variables de entorno no públicas de import.meta.env se reemplazan por una referencia a process.env. Adicionalmente, Astro también puede convertir el tipo de valor de tus variables de entorno usadas a través de import.meta.env, lo que puede impedir el acceso a algunos valores, como los strings "true" (que se convierte a un valor boolean), y "1" (que se convierte a un number).

El flag experimental.staticImportMetaEnv simplifica el comportamiento por defecto de Astro, haciéndolo más fácil de entender y usar. Astro ya no reemplazará ninguna variable de entorno de import.meta.env con una llamada a process.env, ni coercionará valores. En su lugar, tus variables de entorno meta privadas siempre se incrustarán.

Para habilitar esta característica, añade el flag experimental en tu configuración de Astro y elimina el flag experimental.rawEnvValues si estaba habilitado:

import { defineConfig } from "astro/config";

export default defineConfig({
   experimental: {
     staticImportMetaEnv: true,
     rawEnvValues: true
   }
});

Consulta la documentación experimental de import.meta.env estático para más información sobre cómo optar por esta vista previa temprana de la característica y cómo actualizar el código de tu proyecto en consecuencia.

Puedes saber más sobre el uso de variables de entorno en Astro, incluyendo astro:env, en la documentación de variables de entorno.

Soporte experimental para Chrome DevTools workspace

Las carpetas de workspace de Chrome te permiten guardar los cambios hechos en DevTools de vuelta a tu código de proyecto vía una carpeta de workspace conectada. ¡Esto te permite aplicar ediciones como ajustes de CSS sin salir de tu pestaña del navegador!

Astro 5.13 trae una nueva opción experimental para el dev server de Astro para configurar automáticamente un Chrome DevTools workspace para tu proyecto. Tu carpeta de proyecto aparecerá como una fuente de workspace, sin necesidad de configuración manual, lista para que te conectes. Luego, cualquier cambio que hagas en el panel “Sources” se guarda automáticamente en tus archivos locales de código fuente.

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

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    chromeDevtoolsWorkspace: true
  }
});

Consulta la documentación de la característica experimental de Chrome DevTools workspace para más información.

Múltiples sitemaps

La integración @astrojs/sitemap siempre ha soportado la opción de incluir páginas generadas externamente en el archivo sitemap-index.xml generado por Astro. Esto te permite incluir páginas en tu sitemap que son parte de tu sitio desplegado, pero no creadas por Astro.

El último lanzamiento de la integración añade una nueva opción de configuración customSitemaps para incluir sitemaps generados externamente en el archivo sitemap-index.xml junto con las entradas de sitemap generadas por Astro.

Esto es útil para configuraciones multi-framework en el mismo dominio que tu sitio de Astro (example.com), como un blog en example.com/blog cuyo sitemap es generado por otro framework.

Puedes especificar cualquier sitemap adicional en tu configuración de sitemap:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      customSitemaps: [
       'https://example.com/blog/sitemap.xml',
       'https://example.com/helpcenter/sitemap.xml'
      ]
    })
  ]
});

Aprende más en la documentación de configuración de @astrojs/sitemap.

Gracias a Gourav Khunger que contribuyó esta característica.

Páginas de error hospedadas experimentales

El último lanzamiento del adaptador de Node.js incluye soporte experimental para cargar páginas de error personalizadas prerenderizadas desde cualquier host especificado.

Astro necesita poder cargar tu página 404 para poder devolverla en una respuesta. Por defecto, Astro cargará las páginas de error personalizadas prerenderizadas desde el mismo host al que se hace la petición. Por ejemplo, si se hace una petición a https://example.com/nonexistent-page, Astro intentará cargar la página de error prerenderizada desde https://example.com/404.html.

@astrojs/node@9.4.0 ahora maneja situaciones donde tu página de error personalizada debe cargarse desde un host diferente, como cuando el servidor se ejecuta detrás de un reverse proxy o en un contenedor que puede no tener acceso a la URL del host externo. También puedes usar esta opción cuando es más eficiente cargar la página de error prerenderizada desde localhost en lugar de vía el internet público.

Para usar esta característica, establece la opción del adaptador experimentalErrorPageHost en tu configuración de Astro a la URL del host deseada. Por ejemplo, si tu servidor se ejecuta en localhost y se sirve vía un proxy, puedes asegurar que las páginas de error prerenderizadas se obtengan vía la URL de localhost:

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  adapter: node({
    // If your server is running on localhost and served via a proxy,
    // set the host like this to ensure prerendered error pages are fetched via the localhost URL
    experimentalErrorPageHost: 'http://localhost:4321'
  })
});

Para más información sobre cómo habilitar y usar esta característica experimental, consulta la documentación del adaptador @astrojs/node.

Soporte de enum en tablas de Astro DB

¡Estamos seguros de que estarás ({ enum: ['happy', 'thrilled', 'over the moon'] }) con esta actualización de Astro DB!

El último lanzamiento de @astrojs/db trae el tan esperado soporte de enum para columnas de texto en tablas de Astro DB. Este comportamiento se alinea mejor con las expectativas de los usuarios y con la implementación subyacente de Drizzle.

Ten en cuenta que esto se usa exclusivamente para generar tipos, y no se realizará ninguna validación en tiempo de ejecución. Eliminar, añadir, y cambiar valores debe manejarse en tu propio código de proyecto.

import { column, defineTable } from 'astro:db';

// Table definition
const UserTable = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    name: column.text(),
        rank: column.text({ enum: ['user', 'mod', 'admin'] })
  }
});

// Resulting type definition
type UserTableInferInsert = {
    id?: string;
    name: string;
    rank: "user" | "mod" | "admin";
}

Soporte local para Cloudflare KV

El lanzamiento más reciente del adaptador de Cloudflare incluye soporte local para Cloudflare Workers KV al ejecutar astro dev. Este refactor interno es un reemplazo directo para potenciar las sessions de Astro y no requiere ningún cambio en tu código de proyecto existente.

Sin embargo, ahora puedes elegir conectarte al Cloudflare KV Namespace remoto si lo deseas y usar datos de producción durante el desarrollo local.