Lanzamiento de Astro 1.5.0

Por
Matthew Phillips

Astro 1.5.0 acaba de salir e incluye:

Puedes actualizar tus proyectos ejecutando npm install astro@latest.

Soporte de adaptadores para astro preview

Estamos implementando soporte para el comando astro preview en adaptadores a través de una nueva opción de integración, comenzando con el adaptador de Node.js @astrojs/node. Si estás usando @astrojs/node, ahora puedes previsualizar tu app SSR ejecutando:

npm run preview

API de Adaptadores

Iremos actualizando los demás adaptadores oficiales de Astro para soportar preview con el tiempo. Los adaptadores pueden optar por esta característica proporcionando el previewEntrypoint vía la función setAdapter en el hook astro:config:done. El código del adaptador de Node.js se ve así:

export default function() {
  return {
    name: '@astrojs/node',
    hooks: {
      'astro:config:done': ({ setAdapter, config }) => {
        setAdapter({
          name: '@astrojs/node',
          serverEntrypoint: '@astrojs/node/server.js',
          previewEntrypoint: '@astrojs/node/preview.js',
          exports: ['handler'],
        });


        // more here
      }
    }
  };
}

Modo standalone en el adaptador de Node.js

Nuevo en @astrojs/node es el soporte para modo standalone. Con el modo standalone, puedes iniciar tu servidor de producción sin necesidad de escribir lógica de servidor JavaScript tú mismo. El servidor se inicia simplemente ejecutando el script así:

node ./dist/server/entry.mjs

Para habilitar el modo standalone, establece la nueva opción mode a 'standalone' en tu configuración de Astro:

import { defineConfig } from "astro/config"
import nodejs from "@astrojs/node"


export default defineConfig({
  output: "server",
  adapter: nodejs({
    mode: "standalone",
  }),
})

Consulta la documentación de @astrojs/node para todas las opciones disponibles en el modo standalone.

Los usuarios existentes de @astrojs/node que usan su propio framework de servidor HTTP como Express pueden actualizar estableciendo la opción mode a 'middleware' para construir en modo middleware, que tiene el mismo comportamiento y API de antes.

import { defineConfig } from "astro/config"
import nodejs from "@astrojs/node"


export default defineConfig({
  output: "server",
  adapter: nodejs({
    mode: "middleware",
  }),
})

HMR para configuración de Tailwind y TypeScript

HMR es vitalmente importante incluso en las etapas iniciales de un proyecto. En un lanzamiento reciente de Astro aseguramos que los cambios en tu archivo astro.config.mjs resultaran en un reinicio automático del servidor. Hoy estamos expandiendo nuestro soporte de HMR con otros archivos de configuración.

Ahora, editar tus ajustes de tsconfig.json (por ejemplo, para añadir un alias) resulta en una actualización HMR.

De manera similar, los cambios en el archivo de configuración de Tailwind ahora también se actualizan. Solo edita tu archivo tailwind.config.(js|cjs|mjs) y los cambios se reflejarán sin necesidad de reiniciar tu servidor de desarrollo.

Estamos continuando enfocándonos en HMR y la experiencia de desarrollo en próximos lanzamientos.

Mejoras en API Endpoints

En las rutas de API, ahora puedes obtener los campos site, generator, url, clientAddress, props, y redirect en el APIContext, que es el primer parámetro pasado a una ruta de API. Esto se hizo para que el APIContext se alinee más estrechamente con el global de Astro en las páginas .astro.

Por ejemplo, así es como podrías usar clientAddress, que es la dirección IP del usuario, para permitir selectivamente a los usuarios.

export function post({ clientAddress, redirect }) {
  if (!allowList.has(clientAddress)) {
    return redirect("/not-allowed")
  }
}

Consulta la documentación para más información sobre los campos recién disponibles.

Código de estado de Astro.redirect

Nuevo en 1.5 es la capacidad de pasar un código de estado a Astro.redirect. Por defecto usa 302, pero ahora puedes pasar otro código como segundo argumento:

/src/pages/old-post.astro

---
// This page was moved, redirect the user to the new permanent page.
return Astro.redirect("/posts/new-post-name", 301)
---

Este lanzamiento también viene con muchas correcciones de bugs. Gracias a todos los que han contribuido a otro lanzamiento destacado. Revisa las notas del lanzamiento para los detalles completos de los cambios.