AstroEco is Releasing…

Patch Changes

• #3306 21fcd94 Thanks @HiDeoo! - Fixes a regression in Starlight version 0.34.5 that caused multilingual sites with a default locale explicitly set to root to report a configuration error.

Patch Changes

• #3298 7bd02e3 Thanks @HiDeoo! - Fixes a potential issue with absolutePathToLang() plugin API not handling paths with spaces correctly.

Patch Changes

• #3293 88f0d34 Thanks @HiDeoo! - Fixes an issue preventing to override the slug of a page with the slug frontmatter property using the / value.

Patch Changes

• #14045 3276b79 Thanks @ghubo! - Fixes a problem where importing animated .avif files returns a NoImageMetadata error.

• #14041 0c4d5f8 Thanks @dixslyf! - Fixes a <ClientRouter /> bug where the fallback view transition animations when exiting a page
  ran too early for browsers that do not support the View Transition API.
  This bug prevented event.viewTransition?.skipTransition() from skipping the page exit animation
  when used in an astro:before-swap event hook.

Patch Changes

• #14063 de5a253 Thanks @RobbieTheWagner! - Allow setting domains to undefined in imagesConfig so that remotePatterns can be better utilized for images from a variety of domains.

Minor Changes

• #13768 faa0eff Thanks @eduardoboucas! - Updates the adapter to use Netlify's Vite plugin in development.

This is an implementation update that does not require any change to your project code, but means that astro dev will run with an environment closer to a production deploy on Netlify. This brings several benefits you'll now notice working in dev mode!

For example, your project running in development mode will now use local versions of the Netlify Image CDN for images, and a local Blobs server for sessions. It will also populate your environment with the variables from your linked Netlify site.

While not required for fully static, prerendered web sites, you may still wish to add this for the additional benefits of now working in a dev environment closer to your Netlify production deploy, as well as to take advantage of Netlify-exclusive features such as the Netlify Image CDN.

Patch Changes

• Updated dependencies []:
  • @astrojs/[email protected]

Patch Changes

• #3282 7680e87 Thanks @alvinometric! - Moves padding of <main> element to a --sl-main-pad CSS custom property to simplify setting custom values

• #3288 131371e Thanks @HiDeoo! - Fixes a potential configuration issue for multilingual sites with a default language including a regional subtag.

Patch Changes

• #13972 db8f8be Thanks @ematipico! - Fixes the internal implementation of the new feature experimentalStaticHeaders, where dynamic routes
  were mapped to use always the same header.

Minor Changes

• #14012 a125a14 Thanks @florian-lefebvre! - Adds a new experimental configuration option experimentalDisableStreaming to allow you to opt out of Astro's default HTML streaming for pages rendered on demand.

  HTML streaming helps with performance and generally provides a better visitor experience. In most cases, disabling streaming is not recommended.

  However, when you need to disable HTML streaming (e.g. your host only supports non-streamed HTML caching at the CDN level), you can now opt out of the default behavior:

  import { defineConfig } from 'astro/config';
  import node from '@astrojs/node';
  
  export default defineConfig({
    adapter: node({
      mode: 'standalone',
  +    experimentalDisableStreaming: true,
    }),
  });

• #13972 db8f8be Thanks @ematipico! - Adds support for the experimental static headers Astro feature.

  When the feature is enabled via the option experimentalStaticHeaders, and experimental Content Security Policy is enabled, the adapter will generate Response headers for static pages, which allows support for CSP directives that are not supported inside a <meta> tag (e.g. frame-ancestors).

  import { defineConfig } from 'astro/config';
  import node from '@astrojs/node';
  
  export default defineConfig({
    adapter: node({
      mode: 'standalone',
      experimentalStaticHeaders: true,
    }),
    experimental: {
      cps: true,
    },
  });

Patch Changes

• #13972 db8f8be Thanks @ematipico! - Fixes the internal implementation of the new feature experimentalStaticHeaders, where dynamic routes
  were mapped to use always the same header.
• Updated dependencies []:
  • @astrojs/[email protected]

Minor Changes

• #13972 db8f8be Thanks @ematipico! - Updates the NodeApp.match() function in the Adapter API to accept a second, optional parameter to allow adapter authors to add headers to static, prerendered pages.

  NodeApp.match(request) currently checks whether there is a route that matches the given Request. If there is a prerendered route, the function returns undefined, because static routes are already rendered and their headers cannot be updated.

  When the new, optional boolean parameter is passed (e.g. NodeApp.match(request, true)), Astro will return the first matched route, even when it's a prerendered route. This allows your adapter to now access static routes and provides the opportunity to set headers for these pages, for example, to implement a Content Security Policy (CSP).

Patch Changes

• #14029 42562f9 Thanks @ematipico! - Fixes a bug where server islands wouldn't be correctly rendered when they are rendered inside fragments.

  Now the following examples work as expected:

  ---
  import { Cart } from '../components/Cart.astro';
  ---
  
  <>
    <Cart server:defer />
  </>
  
  <Fragment slot="rest">
    <Cart server:defer>
      <div slot="fallback">Not working</div>
    </Cart>
  </Fragment>

• #14017 8d238bc Thanks @dmgawel! - Fixes a bug where i18n fallback rewrites didn't work in dynamic pages.

Patch Changes

• #14000 3cbedae Thanks @feelixe! - Fix routePattern JSDoc examples to show correct return values

• #13990 de6cfd6 Thanks @isVivek99! - Fixes a case where astro:config/client and astro:config/server virtual modules would not contain config passed to integrations updateConfig() during the build

• #14019 a160d1e Thanks @ascorbic! - Removes the requirement to set type: 'live' when defining experimental live content collections

  Previously, live collections required a type and loader configured. Now, Astro can determine that your collection is a live collection without defining it explicitly.

  This means it is now safe to remove type: 'live' from your collections defined in src/live.config.ts:

  import { defineLiveCollection } from 'astro:content';
  import { storeLoader } from '@mystore/astro-loader';
  
  const products = defineLiveCollection({
  -  type: 'live',
    loader: storeLoader({
      apiKey: process.env.STORE_API_KEY,
      endpoint: 'https://api.mystore.com/v1',
    }),
  });
  
  export const collections = { products };

  This is not a breaking change: your existing live collections will continue to work even if you still include type: 'live'. However, we suggest removing this line at your earliest convenience for future compatibility when the feature becomes stable and this config option may be removed entirely.

• #13966 598da21 Thanks @msamoylov! - Fixes a broken link on the default 404 page in development

Minor Changes

• #13917 e615216 Thanks @ascorbic! - Adds a new priority attribute for Astro's image components.

  This change introduces a new priority option for the <Image /> and <Picture /> components, which automatically sets the loading, decoding, and fetchpriority attributes to their optimal values for above-the-fold images which should be loaded immediately.

  It is a boolean prop, and you can use the shorthand syntax by simply adding priority as a prop to the <Image /> or <Picture /> component. When set, it will apply the following attributes:

  • loading="eager"
  • decoding="sync"
  • fetchpriority="high"

  The individual attributes can still be set manually if you need to customize your images further.

  By default, the Astro <Image /> component generates <img> tags that lazy-load their content by setting loading="lazy" and decoding="async". This improves performance by deferring the loading of images that are not immediately visible in the viewport, and gives the best scores in performance audits like Lighthouse.

  The new priority attribute will override those defaults and automatically add the best settings for your high-priority assets.

  This option was previously available for experimental responsive images, but now it is a standard feature for all images.

  Usage

  <Image src="/path/to/image.jpg" alt="An example image" priority />

  [!Note]
  You should only use the priority option for images that are critical to the initial rendering of the page, and ideally only one image per page. This is often an image identified as the LCP element when running Lighthouse tests. Using it for too many images will lead to performance issues, as it forces the browser to load those images immediately, potentially blocking the rendering of other content.

• #13917 e615216 Thanks @ascorbic! - The responsive images feature introduced behind a flag in v5.0.0 is no longer experimental and is available for general use.

  The new responsive images feature in Astro automatically generates optimized images for different screen sizes and resolutions, and applies the correct attributes to ensure that images are displayed correctly on all devices.

  Enable the image.responsiveStyles option in your Astro config. Then, set a layout attribute on any or component, or configure a default image.layout, for instantly responsive images with automatically generated srcset and sizes attributes based on the image's dimensions and the layout type.

  Displaying images correctly on the web can be challenging, and is one of the most common performance issues seen in sites. This new feature simplifies the most challenging part of the process: serving your site visitor an image optimized for their viewing experience, and for your website's performance.

  For full details, see the updated Image guide.

  Migration from Experimental Responsive Images

  The experimental.responsiveImages flag has been removed, and all experimental image configuration options have been renamed to their final names.

  If you were using the experimental responsive images feature, you'll need to update your configuration:

  Remove the experimental flag

  export default defineConfig({
     experimental: {
  -    responsiveImages: true,
     },
  });

  Update image configuration options

  During the experimental phase, default styles were applied automatically to responsive images. Now, you need to explicitly set the responsiveStyles option to true if you want these styles applied.

  export default defineConfig({
    image: {
  +    responsiveStyles: true,
    },
  });

  The experimental image configuration options have been renamed:

  Before:

  export default defineConfig({
    image: {
      experimentalLayout: 'constrained',
      experimentalObjectFit: 'cover',
      experimentalObjectPosition: 'center',
      experimentalBreakpoints: [640, 750, 828, 1080, 1280],
      experimentalDefaultStyles: true,
    },
    experimental: {
      responsiveImages: true,
    },
  });

  After:

  export default defineConfig({
    image: {
      layout: 'constrained',
      objectFit: 'cover',
      objectPosition: 'center',
      breakpoints: [640, 750, 828, 1080, 1280],
      responsiveStyles: true, // This is now *false* by default
    },
  });

  Component usage remains the same

  The layout, fit, and position props on <Image> and <Picture> components work exactly the same as before:

  <Image
    src={myImage}
    alt="A responsive image"
    layout="constrained"
    fit="cover"
    position="center"
  />

  If you weren't using the experimental responsive images feature, no changes are required.

  Please see the Image guide for more information on using responsive images in Astro.

• #13685 3c04c1f Thanks @ascorbic! - Adds experimental support for live content collections

  Live content collections are a new type of content collection that fetch their data at runtime rather than build time. This allows you to access frequently-updated data from CMSs, APIs, databases, or other sources using a unified API, without needing to rebuild your site when the data changes.

  Live collections vs build-time collections

  In Astro 5.0, the content layer API added support for adding diverse content sources to content collections. You can create loaders that fetch data from any source at build time, and then access it inside a page via getEntry() and getCollection(). The data is cached between builds, giving fast access and updates.

  However there is no method for updating the data store between builds, meaning any updates to the data need a full site deploy, even if the pages are rendered on-demand. This means that content collections are not suitable for pages that update frequently. Instead, today these pages tend to access the APIs directly in the frontmatter. This works, but leads to a lot of boilerplate, and means users don't benefit from the simple, unified API that content loaders offer. In most cases users tend to individually create loader libraries that they share between pages.

  Live content collections solve this problem by allowing you to create loaders that fetch data at runtime, rather than build time. This means that the data is always up-to-date, without needing to rebuild the site.

  How to use

  To enable live collections add the experimental.liveContentCollections flag to your astro.config.mjs file:

  {
    experimental: {
      liveContentCollections: true,
    },
  }

  Then create a new src/live.config.ts file (alongside your src/content.config.ts if you have one) to define your live collections with a live loader and optionally a schema using the new defineLiveCollection() function from the astro:content module.

  import { defineLiveCollection } from 'astro:content';
  import { storeLoader } from '@mystore/astro-loader';
  
  const products = defineLiveCollection({
    type: 'live',
    loader: storeLoader({
      apiKey: process.env.STORE_API_KEY,
      endpoint: 'https://api.mystore.com/v1',
    }),
  });
  
  export const collections = { products };

  You can then use the dedicated getLiveCollection() and getLiveEntry() functions to access your live data:

  ---
  import { getLiveCollection, getLiveEntry, render } from 'astro:content';
  
  // Get all products
  const { entries: allProducts, error } = await getLiveCollection('products');
  if (error) {
    // Handle error appropriately
    console.error(error.message);
  }
  
  // Get products with a filter (if supported by your loader)
  const { entries: electronics } = await getLiveCollection('products', { category: 'electronics' });
  
  // Get a single product by ID (string syntax)
  const { entry: product, error: productError } = await getLiveEntry('products', Astro.params.id);
  if (productError) {
    return Astro.redirect('/404');
  }
  
  // Get a single product with a custom query (if supported by your loader) using a filter object
  const { entry: productBySlug } = await getLiveEntry('products', { slug: Astro.params.slug });
  
  const { Content } = await render(product);
  ---
  
  <h1>{product.title}</h1>
  <Content />

  See the docs for the experimental live content collections feature for more details on how to use this feature, including how to create a live loader. Please give feedback on the RFC PR if you have any suggestions or issues.

Patch Changes

• #13957 304df34 Thanks @ematipico! - Fixes an issue where report-uri wasn't available in experimental.csp.directives, causing a typing error and a runtime validation error.

• #13957 304df34 Thanks @ematipico! - Fixes a type error for the CSP directives upgrade-insecure-requests, sandbox, and trusted-type.

• #13862 fe8f61a Thanks @florian-lefebvre! - Fixes a case where the dev toolbar would crash if it could not retrieve some essential data

• #13976 0a31d99 Thanks @florian-lefebvre! - Fixes a case where Astro Actions types would be broken when using a tsconfig.json with "moduleResolution": "nodenext"

Minor Changes

• #13837 7cef86f Thanks @alexanderniebuhr! - Adds new configuration options to allow you to set a custom workerEntryPoint for Cloudflare Workers. This is useful if you want to use features that require handlers (e.g. Durable Objects, Cloudflare Queues, Scheduled Invocations) not supported by the basic generic entry file.

  This feature is not supported when running the Astro dev server. However, you can run astro build followed by either wrangler deploy (to deploy it) or wrangler dev to preview it.

  The following example configures a custom entry file that registers a Durable Object and a queue handler:

  // astro.config.ts
  import cloudflare from '@astrojs/cloudflare';
  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    adapter: cloudflare({
      workerEntryPoint: {
        path: 'src/worker.ts',
        namedExports: ['MyDurableObject'],
      },
    }),
  });

  // src/worker.ts
  import type { SSRManifest } from 'astro';
  
  import { App } from 'astro/app';
  import { handle } from '@astrojs/cloudflare/handler';
  import { DurableObject } from 'cloudflare:workers';
  
  class MyDurableObject extends DurableObject<Env> {
    constructor(ctx: DurableObjectState, env: Env) {
      super(ctx, env);
    }
  }
  
  export function createExports(manifest: SSRManifest) {
    const app = new App(manifest);
    return {
      default: {
        async fetch(request, env, ctx) {
          await env.MY_QUEUE.send('log');
          return handle(manifest, app, request, env, ctx);
        },
        async queue(batch, _env) {
          let messages = JSON.stringify(batch.messages);
          console.log(`consumed from our queue: ${messages}`);
        },
      } satisfies ExportedHandler<Env>,
      MyDurableObject,
    };
  }

Patch Changes

• #13963 c667c55 Thanks @florian-lefebvre! - Fixes a case where the platform proxy would not be disposed when the dev process ended

• Updated dependencies []:

  • @astrojs/[email protected]

Minor Changes

• #13965 95ece06 Thanks @ematipico! - Adds support for the experimental static headers Astro feature.

  When the feature is enabled via option experimentalStaticHeaders, and experimental Content Security Policy is enabled, the adapter will generate Response headers for static pages, which allows support for CSP directives that are not supported inside a <meta> tag (e.g. frame-ancestors).

  import { defineConfig } from 'astro/config';
  import vercel from '@astrojs/vercel';
  
  export default defineConfig({
    adapter: vercel({
      experimentalStaticHeaders: true,
    }),
    experimental: {
      cps: true,
    },
  });

Patch Changes

• #13917 e615216 Thanks @ascorbic! - The responsive images feature introduced behind a flag in v5.0.0 is no longer experimental and is available for general use.

  The new responsive images feature in Astro automatically generates optimized images for different screen sizes and resolutions, and applies the correct attributes to ensure that images are displayed correctly on all devices.

  Enable the image.responsiveStyles option in your Astro config. Then, set a layout attribute on any or component, or configure a default image.layout, for instantly responsive images with automatically generated srcset and sizes attributes based on the image's dimensions and the layout type.

  Displaying images correctly on the web can be challenging, and is one of the most common performance issues seen in sites. This new feature simplifies the most challenging part of the process: serving your site visitor an image optimized for their viewing experience, and for your website's performance.

  For full details, see the updated Image guide.

  Migration from Experimental Responsive Images

  The experimental.responsiveImages flag has been removed, and all experimental image configuration options have been renamed to their final names.

  If you were using the experimental responsive images feature, you'll need to update your configuration:

  Remove the experimental flag

  export default defineConfig({
     experimental: {
  -    responsiveImages: true,
     },
  });

  Update image configuration options

  During the experimental phase, default styles were applied automatically to responsive images. Now, you need to explicitly set the responsiveStyles option to true if you want these styles applied.

  export default defineConfig({
    image: {
  +    responsiveStyles: true,
    },
  });

  The experimental image configuration options have been renamed:

  Before:

  export default defineConfig({
    image: {
      experimentalLayout: 'constrained',
      experimentalObjectFit: 'cover',
      experimentalObjectPosition: 'center',
      experimentalBreakpoints: [640, 750, 828, 1080, 1280],
      experimentalDefaultStyles: true,
    },
    experimental: {
      responsiveImages: true,
    },
  });

  After:

  export default defineConfig({
    image: {
      layout: 'constrained',
      objectFit: 'cover',
      objectPosition: 'center',
      breakpoints: [640, 750, 828, 1080, 1280],
      responsiveStyles: true, // This is now *false* by default
    },
  });

  Component usage remains the same

  The layout, fit, and position props on <Image> and <Picture> components work exactly the same as before:

  <Image
    src={myImage}
    alt="A responsive image"
    layout="constrained"
    fit="cover"
    position="center"
  />

  If you weren't using the experimental responsive images feature, no changes are required.

  Please see the Image guide for more information on using responsive images in Astro.

• Updated dependencies []:

  • @astrojs/[email protected]

Minor Changes

• #13952 de82ef2 Thanks @ematipico! - Adds support for the experimental static headers Astro feature.

  When the feature is enabled via option experimentalStaticHeaders, and experimental Content Security Policy is enabled, the adapter will generate Response headers for static pages, which allows support for CSP directives that are not supported inside a <meta> tag (e.g. frame-ancestors).

  import { defineConfig } from 'astro/config';
  import netlify from '@astrojs/netlify';
  
  export default defineConfig({
    adapter: netlify({
      experimentalStaticHeaders: true,
    }),
    experimental: {
      cps: true,
    },
  });

Patch Changes

• Updated dependencies [de82ef2, de82ef2, de82ef2]:
  • @astrojs/[email protected]

Major Changes

• #13952 de82ef2 Thanks @ematipico! - - The type Redirects has been renamed to HostRoutes.

  • RouteDefinition.target is now optional
  • RouteDefinition.weight is now optional
  • Redirects.print has been removed. Now you need to pass Redirects type to the print function

  - redirects.print()
  + import { printAsRedirects } from "@astrojs/underscore-redirects"
  + printAsRedirects(redirects)

Minor Changes

• #13952 de82ef2 Thanks @ematipico! - Adds a new method called createHostedRouteDefinition, which returns a HostRoute type from a IntegrationResolvedRoute.

• #13952 de82ef2 Thanks @ematipico! - Adds a new method called printAsRedirects to print HostRoutes as redirects for the _redirects file.

Patch Changes

• #13930 acb9b30 Thanks @alexanderniebuhr! - Fixes an issue where setting values for Astro.response resulted in a Cloudflare runtime exception.

• Updated dependencies [de82ef2, de82ef2, de82ef2]:

  • @astrojs/[email protected]

Patch Changes

• #3205 95d124a Thanks @sgalcheung! - Fixes an issue preventing to use the <StarlightPage> component when the docs content collection that Starlight uses does not exist.

• #3206 e6ea584 Thanks @HiDeoo! - Fixes a text selection issue for heading with a clickable anchor link when using double click to select text in Chrome and Safari.

• #3233 3064c40 Thanks @torn4dom4n! - Updates Vietnamese UI translations.

• #3248 16c1239 Thanks @HiDeoo! - Prevents icons in the <Card> component from being shrunk in some narrow viewports.

• #3225 21b93b8 Thanks @randomguy-2650! - Updates German UI translations

Patch Changes

• #13817 b7258f1 Thanks @yanthomasdev! - Clarifies and reduces a few logs when starting the dev server with @astrojs/cloudflare.

  Warnings about sharp support will now be suppressed when you have explicitly set an imageService option.

• Updated dependencies []:

  • @astrojs/[email protected]

Patch Changes

• #13679 4a8f193 Thanks @moonclavedev! - Handle SVG images correctly in build image service

Patch Changes

• #13871 8a1e849 Thanks @blimmer! - Uncaught errors in the filter method will now bubble, causing the astro build to fail.

Patch Changes

• #13867 c947c28 Thanks @Adriel-M! - Fixes a missing type attribute when providing a XSLT stylesheet