withastro/astro astro@5.0.0-beta.9

on GitHub

Minor Changes

• #12067 c48916c Thanks @stramel! - Adds experimental support for built-in SVG components.

  This feature allows you to import SVG files directly into your Astro project as components. By default, Astro will inline the SVG content into your HTML output.

  To enable this feature, set experimental.svg to true in your Astro config:

  {
    experimental: {
      svg: true,
    },
  }

  To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component. Astro also provides a size attribute to set equal height and width properties:

  ---
  import Logo from './path/to/svg/file.svg';
  ---
  
  <Logo size={24} />

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

• #12329 8309c61 Thanks @florian-lefebvre! - Adds a new astro:routes:resolved hook to the Integration API. Also update the astro:build:done hook by deprecating routes and adding a new assets map.

  When building an integration, you can now get access to routes inside the astro:routes:resolved hook:

  const integration = () => {
    return {
      name: 'my-integration',
      hooks: {
        'astro:routes:resolved': ({ routes }) => {
          console.log(routes);
        },
      },
    };
  };

  This hook runs before astro:config:done, and whenever a route changes in development.

  The routes array from astro:build:done is now deprecated, and exposed properties are now available on astro:routes:resolved, except for distURL. For this, you can use the newly exposed assets map:

  const integration = () => {
  +    let routes
      return {
          name: 'my-integration',
          hooks: {
  +            'astro:routes:resolved': (params) => {
  +                routes = params.routes
  +            },
              'astro:build:done': ({
  -                routes
  +                assets
              }) => {
  +                for (const route of routes) {
  +                    const distURL = assets.get(route.pattern)
  +                    if (distURL) {
  +                        Object.assign(route, { distURL })
  +                    }
  +                }
                  console.log(routes)
              }
          }
      }
  }

• #12377 af867f3 Thanks @ascorbic! - Adds experimental support for automatic responsive images

  This feature is experimental and may change in future versions. To enable it, set experimental.responsiveImages to true in your astro.config.mjs file.

  {
     experimental: {
        responsiveImages: true,
     },
  }

  When this flag is enabled, you can pass a layout prop to any <Image /> or <Picture /> component to create a responsive image. When a layout is set, images have automatically generated srcset and sizes attributes based on the image's dimensions and the layout type. Images with responsive and full-width layouts will have styles applied to ensure they resize according to their container.

  ---
  import { Image, Picture } from 'astro:assets';
  import myImage from '../assets/my_image.png';
  ---
  
  <Image
    src={myImage}
    alt="A description of my image."
    layout="responsive"
    width={800}
    height={600}
  />
  <Picture
    src={myImage}
    alt="A description of my image."
    layout="full-width"
    formats={['avif', 'webp', 'jpeg']}
  />

  This <Image /> component will generate the following HTML output:

  <img
    src="/_astro/my_image.hash3.webp"
    srcset="
      /_astro/my_image.hash1.webp  640w,
      /_astro/my_image.hash2.webp  750w,
      /_astro/my_image.hash3.webp  800w,
      /_astro/my_image.hash4.webp  828w,
      /_astro/my_image.hash5.webp 1080w,
      /_astro/my_image.hash6.webp 1280w,
      /_astro/my_image.hash7.webp 1600w
    "
    alt="A description of my image"
    sizes="(min-width: 800px) 800px, 100vw"
    loading="lazy"
    decoding="async"
    fetchpriority="auto"
    width="800"
    height="600"
    style="--w: 800; --h: 600; --fit: cover; --pos: center;"
    data-astro-image="responsive"
  />

  Responsive image properties

  These are additional properties available to the <Image /> and <Picture /> components when responsive images are enabled:

  • layout: The layout type for the image. Can be responsive, fixed, full-width or none. Defaults to value of image.experimentalLayout.
  • fit: Defines how the image should be cropped if the aspect ratio is changed. Values match those of CSS object-fit. Defaults to cover, or the value of image.experimentalObjectFit if set.
  • position: Defines the position of the image crop if the aspect ratio is changed. Values match those of CSS object-position. Defaults to center, or the value of image.experimentalObjectPosition if set.
  • priority: If set, eagerly loads the image. Otherwise images will be lazy-loaded. Use this for your largest above-the-fold image. Defaults to false.

  Default responsive image settings

  You can enable responsive images for all <Image /> and <Picture /> components by setting image.experimentalLayout with a default value. This can be overridden by the layout prop on each component.

  Example:

  {
      image: {
        // Used for all `<Image />` and `<Picture />` components unless overridden
        experimentalLayout: 'responsive',
      },
      experimental: {
        responsiveImages: true,
      },
  }

  ---
  import { Image } from 'astro:assets';
  import myImage from '../assets/my_image.png';
  ---
  
  <Image src={myImage} alt="This will use responsive layout" width={800} height={600} />
  
  <Image src={myImage} alt="This will use full-width layout" layout="full-width" />
  
  <Image src={myImage} alt="This will disable responsive images" layout="none" />

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

• #12475 3f02d5f Thanks @ascorbic! - Changes the default content config location from src/content/config.* to src/content.config.*.

  The previous location is still supported, and is required if the legacy.collections flag is enabled.

Patch Changes

• #12424 4364bff Thanks @ematipico! - Fixes an issue where an incorrect usage of Astro actions was lost when porting the fix from v4 to v5

• #12438 c8f877c Thanks @ascorbic! - Fixes a bug where legacy content types were generated for content layer collections if they were in the content directory