github withastro/astro astro@6.2.0

latest releases: astro@6.2.1, @astrojs/db@0.21.1, @astrojs/vercel@11.0.0-alpha.0...
5 hours ago

Minor Changes

  • #16187 fe58071 Thanks @gllmt! - Adds a waitUntil option to the RenderOptions so that adapters can forward runtime background-task hooks to Astro.

    When provided by an adapter, runtime cache providers receive context.waitUntil in
    CacheProvider.onRequest(), which allows background cache work such as stale-while-revalidate
    without blocking the response. The Cloudflare adapter now forwards
    ExecutionContext.waitUntil to this API.

  • #16290 a49637a Thanks @ViVaLaDaniel! - Ensures that server.allowedHosts (and vite.preview.allowedHosts) configuration is respected when using astro preview with the @astrojs/cloudflare adapter. This improves security by preventing DNS rebinding attacks when previewing Cloudflare builds locally.

  • #15725 4108ec1 Thanks @meyer! - Adds support for a new 'jsx' value for the compressHTML option. When set, whitespace is stripped using JSX whitespace rules instead of the default HTML compression strategy.

    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    
    export default defineConfig({
      compressHTML: 'jsx',
    });

    In JSX, whitespaces never matter, as such, no amount of indentation, or newlines will not affect the rendered output. For instance, the following code:

    <div>
      <span>foo</span>
      <span>bar</span>
    </div>

    will be rendered as foobar, whereas with HTML whitespace rules, a space would be present between the words due to the newline and indentation between the tags.

  • #16477 28fb3e1 Thanks @ematipico! - Adds experimental support for configurable log handlers.

    This experimental feature provides better control over Astro's logging infrastructure by allowing users to replace the default console output with custom logging implementations (e.g., structured JSON). This is particularly useful for users using on-demand rendering and wishing to connect their log aggregation services, such as Kibana, Logstash, CloudWatch, Grafana, or Loki.

    By default, Astro provides three built-in log handlers (json, node, and console), but you can also create your own.

    JSON logging

    JSON logging can be enabled via the CLI for the build, dev, and sync commands using the experimentalJson flag:

    // astro.config.mjs
    import { defineConfig, logHandlers } from 'astro/config';
    
    export default defineConfig({
      experimental: {
        logger: logHandlers.json({
          pretty: true,
          level: 'warn',
        }),
      },
    });

    Custom logger

    You can also create your own custom logger by implementing the correct interface:

    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    
    export default defineConfig({
      experimental: {
        logger: {
          entrypoint: '@org/custom-logger',
        },
      },
    });
    // @org/custom-logger.js
    import type { AstroLoggerDestination, AstroLoggerMessage } from 'astro';
    import { matchesLevel } from 'astor/logger';
    
    function customLogger(level = 'info'): AstroLoggerDestination {
      return {
        write(message: AstroLoggerMessage) {
          if (matchesLevel(message.level, level)) {
            // write message somewhere
          }
        },
      };
    }
    
    export default customLogger;

    For more information on enabling and using this feature in your project, see the Experimental Logger docs.

    For a complete overview and to give feedback on this experimental API, see the Custom logger RFC.

  • #16333 0f7c3c8 Thanks @florian-lefebvre! - Adds an experimental flag svgOptimizer that enables automatic optimization of your SVG components using the provided optimizer. This supersedes the svgo experimental flag, which is now removed.

    When enabled, your imported SVG files used as components will be optimized for smaller file sizes and better performance while maintaining visual quality. This can significantly reduce the size of your SVG assets by removing unnecessary metadata, comments, and redundant code.

    Astro ships with a SVGO based optimizer, but any can be used.

    To enable this feature, add the experimental flag in your Astro config and remove svgo if it was enabled:

    // astro.config.mjs
    -import { defineConfig } from "astro/config";
    +import { defineConfig, svgoOptimizer } from "astro/config";
    
    export default defineConfig({
    +  experimental: {
    +    svgOptimizer: svgoOptimizer()
    -    svgo: true
    +  }
    });

    For more information on enabling and using this feature in your project, see the experimental SVG optimization docs.

  • #16302 f6f8e80 Thanks @florian-lefebvre! - Adds a new experimental_getFontFileURL() method to resolve font file URLs when using the Fonts API

    The fontData object exported from astro:assets was introduced to provide low-level access to font family data for advanced usage. One of the goals of this API was to be able to resolve buffers using URLs. However, it turned out to be impractical, especially during prerendering.

    Astro now exports a new experimental_getFontFileURL() helper function from astro:assets to resolve font file URLs from fontData. For example, when using satori to generate Open Graph images:

    // src/pages/og.png.ts
    
    import type { APIRoute } from "astro";
    -import { fontData } from "astro:assets";
    +import { fontData, experimental_getFontFileURL } from "astro:assets";
    -import { outDir } from "astro:config/server";
    -import { readFile } from "node:fs/promises";
    import satori from "satori";
    import { html } from "satori-html";
    import sharp from "sharp";
    
    export const GET: APIRoute = async (context) => {
      const fontPath = fontData["--font-roboto"][0]?.src[0]?.url;
    
      if (fontPath === undefined) {
        throw new Error("Cannot find the font path.");
      }
    
    -  const data = import.meta.env.DEV
    -    ? await fetch(new URL(fontPath, context.url.origin)).then(async (res) => res.arrayBuffer())
    -    : await readFile(new URL(`.${fontPath}`, outDir));
    +  const url = experimental_getFontFileURL(fontPath, context.url);
    +  const data = await fetch(url).then((res) => res.arrayBuffer());
    
      const svg = await satori(
        html`<div style="color: black;">hello, world</div>`,
        {
          width: 600,
          height: 400,
          fonts: [
            {
              name: "Roboto",
              data,
              weight: 400,
              style: "normal",
            },
          ],
        },
      );
    
      const pngBuffer = await sharp(Buffer.from(svg))
        .resize(600, 400)
        .png()
        .toBuffer();
    
      return new Response(new Uint8Array(pngBuffer), {
        headers: {
          "Content-Type": "image/png",
        },
      });
    };

    See the Fonts API documentation for more information.

Patch Changes

Don't miss a new astro release

NewReleases is sending notifications on new releases.