From bd3cdf0d532d67bd3a150835083631dd549feb88 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> Date: Wed, 24 Sep 2025 10:11:42 -0300 Subject: [PATCH 1/5] add SvgComponent type docs (#12406) Co-authored-by: Armand Philippot Co-authored-by: yanthomasdev <61414485+yanthomasdev@users.noreply.github.com> --- src/content/docs/en/guides/images.mdx | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 281a886ffe13f..b1a6ae0b28b4f 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -433,6 +433,33 @@ import Logo from '../assets/logo.svg'; ``` +#### `SvgComponent` Type + + + +You can also enforce type safety for your `.svg` assets using the `SvgComponent` type: + +```astro title="src/components/Logo.astro" +--- +import type { SvgComponent } from "astro/types"; +import HomeIcon from './Home.svg' + +interface Link { + url: string + text: string + icon: SvgComponent +} + +const links: Link[] = [ + { + url: '/', + text: 'Home', + icon: HomeIcon + } +] +--- +``` + ### Creating custom image components You can create a custom, reusable image component by wrapping the `` or `` component in another Astro component. This allows you to set default attributes and styles only once. From 554bc55d62fcef5529a07cb9851e4d8fd9a19240 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robin=20B=C3=BChler?= <1105080+openscript@users.noreply.github.com> Date: Wed, 24 Sep 2025 15:19:14 +0200 Subject: [PATCH 2/5] Add "Accessing route data" section in `getStaticPaths` with `routePattern` (#12316) Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> Co-authored-by: florian-lefebvre <69633530+florian-lefebvre@users.noreply.github.com> Co-authored-by: ArmandPhilippot <59021693+ArmandPhilippot@users.noreply.github.com> --- .../docs/en/reference/routing-reference.mdx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/content/docs/en/reference/routing-reference.mdx b/src/content/docs/en/reference/routing-reference.mdx index 3b304a94ae29c..39882014a6cda 100644 --- a/src/content/docs/en/reference/routing-reference.mdx +++ b/src/content/docs/en/reference/routing-reference.mdx @@ -170,6 +170,41 @@ const { post } = Astro.props;

{id}: {post.name}

``` +### `routePattern` + +

+ +**Type:** `string`
+ +

+ +A property available in [`getStaticPaths()`](#getstaticpaths) options to access the current [`routePattern`](/en/reference/api-reference/#routepattern) as a string. + +This provides data from the [Astro render context](/en/reference/api-reference/) that would not otherwise be available within the scope of `getStaticPaths()` and can be useful to calculate the `params` and `props` for each page route. + +`routePattern` always reflects the original dynamic segment definition in the file path (e.g. `/[...locale]/[files]/[slug]`), unlike `params`, which are explicit values for a page (e.g. `/fr/fichiers/article-1/`). + +The following example shows how to localize your route segments and return an array of static paths by passing `routePattern` to a custom `getLocalizedData()` helper function. The [params](https://github.com/en/reference/routing-reference/#params) object will be set with explicit values for each route segment: `locale`, `files`, and `slug`. Then, these values will be used to generate the routes and can be used in your page template via `Astro.params`. + + +```astro title="src/pages/[...locale]/[files]/[slug].astro" "routePattern" "getLocalizedData" +--- +import { getLocalizedData } from "../../../utils/i18n"; + +export async function getStaticPaths({ routePattern }) { + const response = await fetch('...'); + const data = await response.json(); + + console.log(routePattern); // [...locale]/[files]/[slug] + + // Call your custom helper with `routePattern` to generate the static paths + return data.flatMap((file) => getLocalizedData(file, routePattern)); +} + +const { locale, files, slug } = Astro.params; +--- +``` + ### `paginate()`

From 853ccd73eb4a33ddc97553b382c0dfe06a959e3e Mon Sep 17 00:00:00 2001 From: Florian Lefebvre Date: Wed, 24 Sep 2025 15:27:54 +0200 Subject: [PATCH 3/5] feat: getFontData() (#12345) Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> --- .../en/reference/experimental-flags/fonts.mdx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/src/content/docs/en/reference/experimental-flags/fonts.mdx b/src/content/docs/en/reference/experimental-flags/fonts.mdx index 775a31f645480..f7ea7faef594d 100644 --- a/src/content/docs/en/reference/experimental-flags/fonts.mdx +++ b/src/content/docs/en/reference/experimental-flags/fonts.mdx @@ -325,6 +325,49 @@ import { Font } from 'astro:assets'; ``` +## Accessing font data programmatically + +The `getFontData()` function is intended for retrieving lower-level font family data programmatically, for example, in an [API Route](/en/guides/endpoints/#server-endpoints-api-routes) or to generate your own meta tags. + +### `getFontData()` +

+ +**Type:** `(cssVariable: CssVariable) => FontData[]`
+ +

+ +Returns an array of `FontData` objects for the provided [`cssVariable`](#cssvariable-1), which contains `src`, `weight` and `style`. + +The following example uses `getFontData()` to get the font buffer from the URL when using [satori](https://github.com/vercel/satori) to generate OpenGraph images: + +```tsx title="src/pages/og.png.ts" "getFontData(\"--font-roboto\")" "data[0].src[0].url" +import type{ APIRoute } from "astro" +import { getFontData } from "astro:assets" +import satori from "satori" + +export const GET: APIRoute = (context) => { + const data = getFontData("--font-roboto") + + const svg = await satori( +
hello, world
, + { + width: 600, + height: 400, + fonts: [ + { + name: "Roboto", + data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then(res => res.arrayBuffer()), + weight: 400, + style: "normal", + }, + ], + }, + ) + + // ... +} +``` + ## Font configuration reference All properties of your fonts must be configured in the Astro config. Some properties are common to both remote and local fonts, and other properties are available depending on your chosen font provider. From 627e245e2ea5e78f7d0d29520ed977170fb13f40 Mon Sep 17 00:00:00 2001 From: Yan <61414485+yanthomasdev@users.noreply.github.com> Date: Wed, 24 Sep 2025 10:37:54 -0300 Subject: [PATCH 4/5] Update experimental React Actions helpers to stable (#12402) Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> Co-authored-by: Armand Philippot --- .../en/guides/integrations-guide/react.mdx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/docs/en/guides/integrations-guide/react.mdx b/src/content/docs/en/guides/integrations-guide/react.mdx index bc820c8b6cad7..45b238fbbcd1a 100644 --- a/src/content/docs/en/guides/integrations-guide/react.mdx +++ b/src/content/docs/en/guides/integrations-guide/react.mdx @@ -115,30 +115,30 @@ To use your first React component in Astro, head to our [UI framework documentat * 💧 client-side hydration options, and * 🤝 opportunities to mix and nest frameworks together -## Integrate Actions with `useActionState()` (experimental) +## Integrate Actions with `useActionState()` -The `@astrojs/react` integration provides two experimental functions for use with [Astro Actions][astro-actions]: `experimental_withState()` and `experimental_getActionState()`. +The `@astrojs/react` integration provides two functions for use with [Astro Actions][astro-actions]: `withState()` and `getActionState()`. These are used with [React's useActionState() hook](https://react.dev/reference/react/useActionState) to read and update client-side state when triggering actions during form submission. -### `experimental_withState()` +### `withState()`

**Type:** `(action: FormFn) => (state: T, formData: FormData) => FormFn`
- +

-You can pass `experimental_withState()` and the action you want to trigger to React's `useActionState()` hook as the form action function. The example below passes a `like` action to increase a counter along with an initial state of `0` likes. +You can pass `withState()` and the action you want to trigger to React's `useActionState()` hook as the form action function. The example below passes a `like` action to increase a counter along with an initial state of `0` likes. ```jsx title="Like.tsx" ins={2,7} "useActionState" import { actions } from 'astro:actions'; -import { experimental_withState } from '@astrojs/react/actions'; +import { withState } from '@astrojs/react/actions'; import { useActionState } from "react"; export function Like({ postId }: { postId: string }) { const [state, action, pending] = useActionState( - experimental_withState(actions.like), + withState(actions.like), { data: 0, error: undefined }, // initial likes and errors ); @@ -151,24 +151,24 @@ export function Like({ postId }: { postId: string }) { } ``` -The `experimental_withState()` function will match the action's types with React's expectations and preserve metadata used for progressive enhancement, allowing it to work even when JavaScript is disabled on the user's device. +The `withState()` function will match the action's types with React's expectations and preserve metadata used for progressive enhancement, allowing it to work even when JavaScript is disabled on the user's device. -### `experimental_getActionState()` +### `getActionState()`

**Type:** `(context: ActionAPIContext) => Promise`
- +

-You can access the state stored by `useActionState()` on the server in your action `handler` with `experimental_getActionState()`. It accepts the [Astro API context](/en/reference/api-reference/#the-context-object), and optionally, you can apply a type to the result. +You can access the state stored by `useActionState()` on the server in your action `handler` with `getActionState()`. It accepts the [Astro API context](/en/reference/api-reference/#the-context-object), and optionally, you can apply a type to the result. The example below gets the current value of likes from a counter, typed as a number, in order to create an incrementing `like` action: ```ts title="actions.ts" ins={3,11} import { defineAction, type SafeResult } from 'astro:actions'; import { z } from 'astro:schema'; -import { experimental_getActionState } from '@astrojs/react/actions'; +import { getActionState } from '@astrojs/react/actions'; export const server = { like: defineAction({ @@ -176,7 +176,7 @@ export const server = { postId: z.string(), }), handler: async ({ postId }, ctx) => { - const { data: currentLikes = 0, error } = await experimental_getActionState>(ctx); + const { data: currentLikes = 0, error } = await getActionState>(ctx); // handle errors if (error) throw error; From 3b38832cd994d75373eaa5646257fb841258f029 Mon Sep 17 00:00:00 2001 From: Luiz Ferraz Date: Thu, 25 Sep 2025 08:52:09 -0300 Subject: [PATCH 5/5] new: Document `failOnPrerenderConflict` experimental flag (#12237) Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> --- astro.sidebar.ts | 1 + .../fail-on-prerender-conflict.mdx | 37 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/content/docs/en/reference/experimental-flags/fail-on-prerender-conflict.mdx diff --git a/astro.sidebar.ts b/astro.sidebar.ts index d687faf69ba66..5392673a160ac 100644 --- a/astro.sidebar.ts +++ b/astro.sidebar.ts @@ -151,6 +151,7 @@ export const sidebar = [ 'reference/experimental-flags/heading-id-compat', 'reference/experimental-flags/static-import-meta-env', 'reference/experimental-flags/chrome-devtools-workspace', + 'reference/experimental-flags/fail-on-prerender-conflict', ], }), 'reference/legacy-flags', diff --git a/src/content/docs/en/reference/experimental-flags/fail-on-prerender-conflict.mdx b/src/content/docs/en/reference/experimental-flags/fail-on-prerender-conflict.mdx new file mode 100644 index 0000000000000..d55f79acbf8af --- /dev/null +++ b/src/content/docs/en/reference/experimental-flags/fail-on-prerender-conflict.mdx @@ -0,0 +1,37 @@ +--- +title: Experimental prerender conflict error +sidebar: + label: Prerender conflict error +i18nReady: true +--- + +import Since from '~/components/Since.astro' + +

+ +**Type:** `boolean`
+**Default:** `false`
+ +

+ +Turns prerender conflict warnings into errors during the build process. + +Astro currently warns you during the build about any conflicts between multiple dynamic routes that can result in the same output path. For example `/blog/[slug]` and `/blog/[...all]` both could try to prerender the `/blog/post-1` path. In such cases, Astro renders only the [highest priority route](/en/guides/routing/#route-priority-order) for the conflicting path. This allows your site to build successfully, although you may discover that some pages are rendered by unexpected routes. + +With this experimental flag set, the build will instead fail immediately with an error. This will require you to resolve any routing conflicts immediately, and will ensure that Astro is building your routes as you intend. + +To enable this behavior, add the `experimental.failOnPrerenderConflict` feature flag to your Astro config: + +```js title="astro.config.mjs" ins={4-6} +import { defineConfig } from "astro/config" + +defineConfig({ + experimental: { + failOnPrerenderConflict: true, + }, +}); +``` + +## Usage + +After enabling this flag, you may encounter errors about conflicting prerendered routes when you attempt to build your project. If this happens, you will need to update one or more of your [dynamic routes](/en/guides/routing/#dynamic-routes) to avoid ambiguous routing.