[email protected]

Patch Changes

• #13647 ffbe8f2 Thanks @ascorbic! - Fixes a bug that caused a session error to be logged when using actions without sessions

• #13646 6744842 Thanks @florian-lefebvre! - Fixes a case where extra font sources were removed when using the experimental fonts API

• #13635 d75cac4 Thanks @florian-lefebvre! - The experimental fonts API now generates optimized fallbacks for every weight and style

[email protected]

Patch Changes

• #13636 a9fd03f Thanks @sarah11918! - Updates the wording for choosing the "minimal" starter template options

[email protected]

Patch Changes

• #13643 67b7493 Thanks @tanishqmanuja! - Fixes a case where the font face src format would be invalid when using the experimental fonts API

• #13639 23410c6 Thanks @florian-lefebvre! - Fixes a case where some font families would not be downloaded when using the same font provider several times, using the experimental fonts API

[email protected]

Patch Changes

• #13632 cb05cfb Thanks @florian-lefebvre! - Improves the optimized fallback name generated by the experimental Fonts API

• #13630 3e7db4f Thanks @florian-lefebvre! - Fixes a case where fonts using a local provider would not work because of an invalid generated src

• #13634 516de7d Thanks @ematipico! - Fixes a regression where using next('/') didn't correctly return the requested route.

• #13632 cb05cfb Thanks @florian-lefebvre! - Improves the quality of optimized fallbacks generated by the experimental Fonts API

• #13616 d475afc Thanks @lfilho! - Fixes a regression where relative static redirects didn't work as expected.

[email protected]

Patch Changes

• #13594 dc4a015 Thanks @florian-lefebvre! - Reduces the number of font files downloaded

• #13627 7f1a624 Thanks @florian-lefebvre! - Fixes a case where using the <Font /> component would throw a Rollup error during the build

• #13626 3838efe Thanks @florian-lefebvre! - Updates fallback font generation to always read font files returned by font providers

• #13625 f1311d2 Thanks @florian-lefebvre! - Updates the <Font /> component so that preload links are generated before the style tag if preload is passed

• #13622 a70d32a Thanks @ascorbic! - Improve autocomplete for session keys

[email protected]

Minor Changes

• #13527 2fd6a6b Thanks @ascorbic! - The experimental session API introduced in Astro 5.1 is now stable and ready for production use.

  Sessions are used to store user state between requests for on-demand rendered pages. You can use them to store user data, such as authentication tokens, shopping cart contents, or any other data that needs to persist across requests:

  ---
  export const prerender = false; // Not needed with 'server' output
  const cart = await Astro.session.get('cart');
  ---
  
  <a href="/checkout">🛒 {cart?.length ?? 0} items</a>

  Configuring session storage

  Sessions require a storage driver to store the data. The Node, Cloudflare and Netlify adapters automatically configure a default driver for you, but other adapters currently require you to specify a custom storage driver in your configuration.

  If you are using an adapter that doesn't have a default driver, or if you want to choose a different driver, you can configure it using the session configuration option:

  import { defineConfig } from 'astro/config';
  import vercel from '@astrojs/vercel';
  
  export default defineConfig({
    adapter: vercel(),
    session: {
      driver: 'upstash',
    },
  });

  Using sessions

  Sessions are available in on-demand rendered pages, API endpoints, actions and middleware.

  In pages and components, you can access the session using Astro.session:

  ---
  const cart = await Astro.session.get('cart');
  ---
  
  <a href="/checkout">🛒 {cart?.length ?? 0} items</a>

  In endpoints, actions, and middleware, you can access the session using context.session:

  export async function GET(context) {
    const cart = await context.session.get('cart');
    return Response.json({ cart });
  }

  If you attempt to access the session when there is no storage driver configured, or in a prerendered page, the session object will be undefined and an error will be logged in the console:

  ---
  export const prerender = true;
  const cart = await Astro.session?.get('cart'); // Logs an error. Astro.session is undefined
  ---

  Upgrading from Experimental to Stable

  If you were previously using the experimental API, please remove the experimental.session flag from your configuration:

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

  See the sessions guide for more information.

• #12775 b1fe521 Thanks @florian-lefebvre! - Adds a new, experimental Fonts API to provide first-party support for fonts in Astro.

  This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.

  To enable this feature, configure an experimental.fonts object with one or more fonts:

  import { defineConfig, fontProviders } from "astro/config"
  
  export default defineConfig({
      experimental: {
          fonts: [{
              provider: fontProviders.google(),
        `      name: "Roboto",
              cssVariable: "--font-roboto",
          }]
      }
  })

  Then, add a <Font /> component and site-wide styling in your <head>:

  ---
  import { Font } from 'astro:assets';
  ---
  
  <Font cssVariable="--font-roboto" preload />
  <style>
    body {
      font-family: var(--font-roboto);
    }
  </style>

  Visit the experimental Fonts documentation for the full API, how to get started, and even how to build your own custom AstroFontProvider if we don't yet support your preferred font service.

  For a complete overview, and to give feedback on this experimental API, see the Fonts RFC and help shape its future.

• #13560 df3fd54 Thanks @ematipico! - The virtual module astro:config introduced behind a flag in v5.2.0 is no longer experimental and is available for general use.

  This virtual module exposes two sub-paths for type-safe, controlled access to your configuration:

  • astro:config/client: exposes config information that is safe to expose to the client.
  • astro:config/server: exposes additional information that is safe to expose to the server, such as file and directory paths.

  Access these in any file inside your project to import and use select values from your Astro config:

  // src/utils.js
  import { trailingSlash } from 'astro:config/client';
  
  function addForwardSlash(path) {
    if (trailingSlash === 'always') {
      return path.endsWith('/') ? path : path + '/';
    } else {
      return path;
    }
  }

  If you were previously using this feature, please remove the experimental flag from your Astro config:

  // astro.config.mjs
  export default defineConfig({
  -  experimental: {
  -    serializeConfig: true
  -  }
  })

  If you have been waiting for feature stabilization before using configuration imports, you can now do so.

  Please see the astro:config reference for more about this feature.

• #13578 406501a Thanks @stramel! - The SVG import feature introduced behind a flag in v5.0.0 is no longer experimental and is available for general use.

  This feature allows you to import SVG files directly into your Astro project as components and inline them into your HTML.

  To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component.

  ---
  import Logo from './path/to/svg/file.svg';
  ---
  
  <Logo width={64} height={64} fill="currentColor" />

  If you have been waiting for stabilization before using the SVG Components feature, you can now do so.

  If you were previously using this feature, please remove the experimental flag from your Astro config:

  import { defineConfig } from 'astro'
  
  export default defineConfig({
  -  experimental: {
  -    svg: true,
  -  }
  })

  Additionally, a few features that were available during the experimental stage were removed in a previous release. Please see the v5.6.0 changelog for details if you have not yet already updated your project code for the experimental feature accordingly.

  Please see the SVG Components guide in docs for more about this feature.

Patch Changes

• #13602 3213450 Thanks @natemoo-re! - Updates the Audit dev toolbar app to automatically strip data-astro-source-file and data-astro-source-loc attributes in dev mode.

• #13598 f5de51e Thanks @dreyfus92! - Fix routing with base paths when trailingSlash is set to 'never'. This ensures requests to '/base' are correctly matched when the base path is set to '/base', without requiring a trailing slash.

• #13603 d038030 Thanks @sarah11918! - Adds the minimal starter template to the list of create astro options

  Good news if you're taking the introductory tutorial in docs, making a minimal reproduction, or just want to start a project with as little to rip out as possible. Astro's minimal (empty) template is now back as one of the options when running create astro@latest and starting a new project!

@astrojs/[email protected]

Minor Changes

• #13527 2fd6a6b Thanks @ascorbic! - The experimental session API introduced in Astro 5.1 is now stable and ready for production use.

  Sessions are used to store user state between requests for on-demand rendered pages. You can use them to store user data, such as authentication tokens, shopping cart contents, or any other data that needs to persist across requests:

  ---
  export const prerender = false; // Not needed with 'server' output
  const cart = await Astro.session.get('cart');
  ---
  
  <a href="/checkout">🛒 {cart?.length ?? 0} items</a>

  Configuring session storage

  Sessions require a storage driver to store the data. The Node, Cloudflare and Netlify adapters automatically configure a default driver for you, but other adapters currently require you to specify a custom storage driver in your configuration.

  If you are using an adapter that doesn't have a default driver, or if you want to choose a different driver, you can configure it using the session configuration option:

  import { defineConfig } from 'astro/config';
  import vercel from '@astrojs/vercel';
  
  export default defineConfig({
    adapter: vercel(),
    session: {
      driver: 'upstash',
    },
  });

  Using sessions

  Sessions are available in on-demand rendered pages, API endpoints, actions and middleware.

  In pages and components, you can access the session using Astro.session:

  ---
  const cart = await Astro.session.get('cart');
  ---
  
  <a href="/checkout">🛒 {cart?.length ?? 0} items</a>

  In endpoints, actions, and middleware, you can access the session using context.session:

  export async function GET(context) {
    const cart = await context.session.get('cart');
    return Response.json({ cart });
  }

  If you attempt to access the session when there is no storage driver configured, or in a prerendered page, the session object will be undefined and an error will be logged in the console:

  ---
  export const prerender = true;
  const cart = await Astro.session?.get('cart'); // Logs an error. Astro.session is undefined
  ---

  Upgrading from Experimental to Stable

  If you were previously using the experimental API, please remove the experimental.session flag from your configuration:

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

  See the sessions guide for more information.

@astrojs/[email protected]

Minor Changes

• #13527 2fd6a6b Thanks @ascorbic! - The experimental session API introduced in Astro 5.1 is now stable and ready for production use.

  Sessions are used to store user state between requests for on-demand rendered pages. You can use them to store user data, such as authentication tokens, shopping cart contents, or any other data that needs to persist across requests:

  ---
  export const prerender = false; // Not needed with 'server' output
  const cart = await Astro.session.get('cart');
  ---
  
  <a href="/checkout">🛒 {cart?.length ?? 0} items</a>

  Configuring session storage

  Sessions require a storage driver to store the data. The Node, Cloudflare and Netlify adapters automatically configure a default driver for you, but other adapters currently require you to specify a custom storage driver in your configuration.

  If you are using an adapter that doesn't have a default driver, or if you want to choose a different driver, you can configure it using the session configuration option:

  import { defineConfig } from 'astro/config';
  import vercel from '@astrojs/vercel';
  
  export default defineConfig({
    adapter: vercel(),
    session: {
      driver: 'upstash',
    },
  });

  Using sessions

  Sessions are available in on-demand rendered pages, API endpoints, actions and middleware.

  In pages and components, you can access the session using Astro.session:

  ---
  const cart = await Astro.session.get('cart');
  ---
  
  <a href="/checkout">🛒 {cart?.length ?? 0} items</a>

  In endpoints, actions, and middleware, you can access the session using context.session:

  export async function GET(context) {
    const cart = await context.session.get('cart');
    return Response.json({ cart });
  }

  If you attempt to access the session when there is no storage driver configured, or in a prerendered page, the session object will be undefined and an error will be logged in the console:

  ---
  export const prerender = true;
  const cart = await Astro.session?.get('cart'); // Logs an error. Astro.session is undefined
  ---

  Upgrading from Experimental to Stable

  If you were previously using the experimental API, please remove the experimental.session flag from your configuration:

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

  See the sessions guide for more information.

Patch Changes

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

@astrojs/[email protected]

Minor Changes

• #13578 406501a Thanks @stramel! - The SVG import feature introduced behind a flag in v5.0.0 is no longer experimental and is available for general use.

  This feature allows you to import SVG files directly into your Astro project as components and inline them into your HTML.

  To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component.

  ---
  import Logo from './path/to/svg/file.svg';
  ---
  
  <Logo <Logo width={64} height={64} fill="currentColor" />

  If you have been waiting for stabilization before using the SVG Components feature, you can now do so.

  If you were previously using this feature, please remove the experimental flag from your Astro config:

  import { defineConfig } from 'astro'
  
  export default defineConfig({
  -  experimental: {
  -    svg: true,
  -  }
  })

  Additionally, a few features that were available during the experimental stage were removed in a previous release. Please see the v5.6.0 changelog for details if you have not yet already updated your project code for the experimental feature accordingly.

  Please see the SVG Components guide in docs for more about this feature.

@astrojs/[email protected]

Minor Changes

• #13527 2fd6a6b Thanks @ascorbic! - The experimental session API introduced in Astro 5.1 is now stable and ready for production use.

  Sessions are used to store user state between requests for on-demand rendered pages. You can use them to store user data, such as authentication tokens, shopping cart contents, or any other data that needs to persist across requests:

  ---
  export const prerender = false; // Not needed with 'server' output
  const cart = await Astro.session.get('cart');
  ---
  
  <a href="/checkout">🛒 {cart?.length ?? 0} items</a>

  Configuring session storage

  Sessions require a storage driver to store the data. The Node, Cloudflare and Netlify adapters automatically configure a default driver for you, but other adapters currently require you to specify a custom storage driver in your configuration.

  If you are using an adapter that doesn't have a default driver, or if you want to choose a different driver, you can configure it using the session configuration option:

  import { defineConfig } from 'astro/config';
  import vercel from '@astrojs/vercel';
  
  export default defineConfig({
    adapter: vercel(),
    session: {
      driver: 'upstash',
    },
  });

  Using sessions

  Sessions are available in on-demand rendered pages, API endpoints, actions and middleware.

  In pages and components, you can access the session using Astro.session:

  ---
  const cart = await Astro.session.get('cart');
  ---
  
  <a href="/checkout">🛒 {cart?.length ?? 0} items</a>

  In endpoints, actions, and middleware, you can access the session using context.session:

  export async function GET(context) {
    const cart = await context.session.get('cart');
    return Response.json({ cart });
  }

  If you attempt to access the session when there is no storage driver configured, or in a prerendered page, the session object will be undefined and an error will be logged in the console:

  ---
  export const prerender = true;
  const cart = await Astro.session?.get('cart'); // Logs an error. Astro.session is undefined
  ---

  Upgrading from Experimental to Stable

  If you were previously using the experimental API, please remove the experimental.session flag from your configuration:

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

  See the sessions guide for more information.

Patch Changes

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