Notas del Lanzamiento de Astro 0.23

Por
Fred Schott

Astro v0.23.0 acaba de ser lanzado con algunas nuevas características y destacados:

Rutas de Archivo Dinámicas

Ahora puedes construir archivos dinámicos no HTML en tu proyecto usando las nuevas rutas de archivo de Astro. Usa rutas de archivo para generar archivos dinámicamente durante tu build para cosas como JSON, XML, o incluso assets no textuales como imágenes. ¡Esta característica ha sido una de las más solicitadas desde los primeros días de Astro!

Para crear una ruta de archivo dentro de tu proyecto de Astro, crea un nuevo archivo JavaScript o TypeScript dentro de tu directorio src/pages. Las rutas de archivo aprovechan el enrutador basado en archivos existente de Astro, así que asegúrate de incluir la extensión final del archivo construido en el nombre del archivo.

src/pages/builtwith.json.ts
// Outputs: /builtwith.json


// File routes export a get() function, which gets called to generate the file.
// Return an object with `body` to save the file contents in your final build.
export async function get() {
  return {
    body: JSON.stringify({
      name: "Astro",
      url: "https://astro.build/",
    }),
  }
}

Esta característica solo está disponible con el flag --experimental-static-build. Para aprender más, consulta la documentación.

Protección XSS Automática

Astro v0.23 comienza nuestra migración hacia el escape automático de HTML dentro de las expresiones de plantilla de Astro. Esta nueva característica te protegerá de inyectar accidentalmente HTML no confiable en tu página. Sin ella, te expones a ataques de Cross Site Scripting (XSS) donde usuarios maliciosos pueden secuestrar tu sitio para ejecutar código no confiable o inesperado en la página.

<!-- Examples of untrusted HTML injection -->
<div>{`<span>Hello, dangerous HTML</span>`}</div>
<div>{`<script>alert('oh no');</script>`}</div>
<div>{untrustedHtml}</div>

Gracias a React y otras bibliotecas de UI basadas en componentes, las vulnerabilidades XSS están quedando en el pasado. Astro está emocionado de alcanzar este mismo estándar de protección XSS automática, integrada y sin esfuerzo.

Para ayudar a nuestros usuarios a migrar, Astro v0.23 registrará una advertencia en la consola cuando se encuentre HTML sin escape dentro de una expresión de plantilla. En la próxima versión, las expresiones de plantilla siempre escaparán su contenido.

Nuevas directivas set:html y set:text

Se introducen dos nuevas directivas para soportar mejor inyección de HTML cuando lo necesites. Como cubrimos en la sección anterior, establecer HTML directamente es riesgoso. Sin embargo, en algunos casos especiales puede ser necesario. Astro creó la nueva directiva set:html para esos casos. Puedes pensar en ella como el dangerouslySetInnerHTML de React.

<!-- Examples of explicit HTML setting -->
<div set:html={`<span>Hello, trusted or already escaped HTML</span>`} />
<div set:html={`<script>alert('oh yes');</script>`} />
<div set:html={trustedOrAlreadyEscapedHtml} />

Si no quieres un contenedor <div>, también puedes usar set:html en el componente Fragment para HTML sin envoltorio:

- {`<span>Hello, dangerous HTML</span>`}
+ <Fragment set:html={`<span>Hello, trusted or already escaped HTML</span>`} />

set:text también está disponible para establecer el texto del elemento directamente, similar a establecer la propiedad .text en un elemento del navegador. Juntas, estas dos directivas te dan un poco más de control sobre la salida de Astro cuando lo necesitas.

Acceso seguro a variables de entorno sensibles

Por seguridad, Vite solo carga las variables de entorno que están explícitamente opt-in para ser expuestas con un prefijo PUBLIC_. Esta restricción tiene sentido en el navegador, y te protege de filtrar accidentalmente tokens y valores secretos. Sin embargo, también significaba que las variables de entorno privadas no estaban disponibles para ti en absoluto, ni siquiera localmente dentro de componentes de Astro renderizados en el servidor.

En Astro v0.23, import.meta.env ahora te permite acceder a tus variables de entorno privadas dentro de Astro y cada vez que el código se renderiza localmente o en el servidor. Astro continuará protegiéndote en el cliente, y solo expondrá las variables PUBLIC_ al frontend que se envía a tus usuarios.

// DB_PASSWORD is only available when building your site.
// If any code tried to run this in the browser, it will be empty.
const data = await db(import.meta.env.DB_PASSWORD)


// PUBLIC_POKEAPI is available anywhere, thanks to the PUBLIC_ prefix!
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`)

Consulta nuestra documentación de Variables de Entorno para aprender más.

Mejores builds con Vite v2.8

Astro v0.23 viene con una actualización interna de Vite que trae nuevas características y enormes mejoras de estabilidad. El manejo de paquetes npm de Vite también recibió un impulso, de modo que más paquetes deberían funcionar en más proyectos. Revisa su changelog para aprender más.

Mejor estabilidad con @astro/compiler v0.11

Astro v0.23 también recibió una actualización del compilador que debería resultar en mejoras notables de rendimiento y estabilidad en todos los proyectos. Revisa el changelog para aprender más.

Mejor rendimiento de build

Puede que hayas notado la referencia a --experimental-static-build arriba, y el hecho de que algunas características nuevas solo están disponibles detrás de este flag. Este flag no es nuevo en v0.23, pero sigue mejorando a medida que nos acercamos a un lanzamiento oficial de la característica. Esta nueva estrategia de “static build” pronto se convertirá en el comportamiento de build por defecto en Astro.

Si aún no has probado el flag --experimental-static-build en tu build, por favor dale una oportunidad y déjanos tus comentarios en Discord. Revisa nuestro blog post Scaling Astro to 10,000+ Pages para aprender más sobre esta futura estrategia de build para Astro.

👋

¡Gracias por leer! Síguenos en Twitter para mantenerte al día sobre los lanzamientos y noticias de Astro.

Si has leído hasta aquí, definitivamente deberías unirte a nosotros en Discord. ;)