astro@5.7.2

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.

astro@5.7.1

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

astro@5.7.0

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/node@9.2.0

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/netlify@6.3.0

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/underscore-redirects@0.6.0

@astrojs/markdoc@0.14.0

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/cloudflare@12.5.0

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/underscore-redirects@0.6.0

astro@5.6.2

Patch Changes

• #13606 793ecd9 Thanks @natemoo-re! - Fixes a regression that allowed prerendered code to leak into the server bundle.

• #13576 1c60ec3 Thanks @ascorbic! - Reduces duplicate code in server islands scripts by extracting shared logic into a helper function.

• #13588 57e59be Thanks @natemoo-re! - Fixes a memory leak when using SVG assets.

• #13589 5a0563d Thanks @ematipico! - Deprecates the asset utility function emitESMImage() and adds a new emitImageMetadata() to be used instead

  The function
  emitESMImage() is now deprecated. It will continue to function, but it is no longer recommended nor supported. This function will be completely removed in a next major release of Astro.

  Please replace it with the new functionemitImageMetadata() as soon as you are able to do so:

  - import { emitESMImage } from "astro/assets/utils";
  + import { emitImageMetadata } from "astro/assets/utils";

  The new function returns the same signature as the previous one. However, the new function removes two deprecated arguments that were not meant to be exposed for public use: _watchMode and experimentalSvgEnabled. Since it was possible to access these with the old function, you may need to verify that your code still works as intended with emitImageMetadata().

• #13596 3752519 Thanks @jsparkdev! - update vite to latest version to fix CVE

• #13547 360cb91 Thanks @jsparkdev! - Updates vite to the latest version

• #13548 e588527 Thanks @ryuapp! - Support for Deno to install npm pacakges.

  Deno requires npm prefix to install packages on npm. For example, to install react, we need to run deno add npm:react. But currently the command executed is deno add react, which doesn't work. So, we change the package names to have an npm prefix if you are using Deno.

• #13587 a0774b3 Thanks @robertoms99! - Fixes an issue with the client router where some attributes of the root element were not updated during swap, including the transition scope.

@astrojs/vue@5.0.10

Patch Changes

• #13596 3752519 Thanks @jsparkdev! - update vite to latest version to fix CVE

• #13547 360cb91 Thanks @jsparkdev! - Updates vite to the latest version

@astrojs/svelte@7.0.10

Patch Changes

• #13596 3752519 Thanks @jsparkdev! - update vite to latest version to fix CVE

• #13547 360cb91 Thanks @jsparkdev! - Updates vite to the latest version