
🍿 Minor Changes
-
#10935
ddd8e49Thanks @bluwy! - Exportsastro/jsx/rehype.jswith utilities to generate an Astro metadata object -
#10625
698c2d9Thanks @goulvenclech! - Adds the ability for multiple pages to use the same component as anentrypointwhen building an Astro integration. This change is purely internal, and aligns the build process with the behaviour in the development server. -
#10906
7bbd664Thanks @Princesseuh! - Adds a new radio checkbox component to the dev toolbar UI library (astro-dev-toolbar-radio-checkbox) -
#10963
61f47a6Thanks @delucis! - Adds support for passing an inline Astro configuration object togetViteConfig()If you are using
getViteConfig()to configure the Vitest test runner, you can now pass a second argument to control how Astro is configured. This makes it possible to configure unit tests with different Astro options when using Vitest’s workspaces feature.vitest.config.ts import { getViteConfig } from 'astro/config';export default getViteConfig(/* Vite configuration */{ test: {} },/* Astro configuration */{site: 'https://example.com',trailingSlash: 'never',}); -
#10867
47877a7Thanks @ematipico! - Adds experimental rewriting in Astro with a newrewrite()function and the middlewarenext()function.The feature is available via an experimental flag in
astro.config.mjs:export default defineConfig({experimental: {rewriting: true,},});When enabled, you can use
rewrite()to render another page without changing the URL of the browser in Astro pages and endpoints.src/pages/dashboard.astro ---if (!Astro.props.allowed) {return Astro.rewrite('/');}---src/pages/api.js export function GET(ctx) {if (!ctx.locals.allowed) {return ctx.rewrite('/');}}The middleware
next()function now accepts a parameter with the same type as therewrite()function. For example, withnext("/"), you can call the next middleware function with a newRequest.src/middleware.js export function onRequest(ctx, next) {if (!ctx.cookies.get('allowed')) {return next('/'); // new signature}return next();}NOTE: please read the RFC to understand the current expectations of the new APIs.
-
#10858
c0c509bThanks @bholmesdev! - Adds experimental support for the Actions API. Actions let you define type-safe endpoints you can query from client components with progressive enhancement built in.Actions help you write type-safe backend functions you can call from anywhere. Enable server rendering using the
outputproperty and add theactionsflag to theexperimentalobject:{output: 'hybrid', // or 'server'experimental: {actions: true,},}Declare all your actions in
src/actions/index.ts. This file is the global actions handler.Define an action using the
defineAction()utility from theastro:actionsmodule. These accept thehandlerproperty to define your server-side request handler. If your action accepts arguments, apply theinputproperty to validate parameters with Zod.This example defines two actions:
likeandcomment. Thelikeaction accepts a JSON object with apostIdstring, while thecommentaction accepts FormData withpostId,author, andbodystrings. Eachhandlerupdates your database and return a type-safe response.src/actions/index.ts import { defineAction, z } from 'astro:actions';export const server = {like: defineAction({input: z.object({ postId: z.string() }),handler: async ({ postId }, context) => {// update likes in dbreturn likes;},}),comment: defineAction({accept: 'form',input: z.object({postId: z.string(),body: z.string(),}),handler: async ({ postId }, context) => {// insert comments in dbreturn comment;},}),};Then, call an action from your client components using the
actionsobject fromastro:actions. You can pass a type-safe object when using JSON, or a FormData object when usingaccept: 'form'in your action definition:src/components/blog.tsx import { actions } from 'astro:actions';import { useState } from 'preact/hooks';export function Like({ postId }: { postId: string }) {const [likes, setLikes] = useState(0);return (<buttononClick={async () => {const newLikes = await actions.like({ postId });setLikes(newLikes);}}>{likes} likes</button>);}export function Comment({ postId }: { postId: string }) {return (<formonSubmit={async (e) => {e.preventDefault();const formData = new FormData(e.target);const result = await actions.blog.comment(formData);// handle result}}><input type="hidden" name="postId" value={postId} /><label for="author">Author</label><input id="author" type="text" name="author" /><textarea rows={10} name="body"></textarea><button type="submit">Post</button></form>);}For a complete overview, and to give feedback on this experimental API, see the Actions RFC.
-
#10906
7bbd664Thanks @Princesseuh! - Adds a newbuttonBorderRadiusproperty to theastro-dev-toolbar-buttoncomponent for the dev toolbar component library. This property can be useful to make a fully rounded button with an icon in the center.
🐞 Patch Changes
-
#10977
59571e8Thanks @BryceRussell! - Improve error message when accessingclientAddresson prerendered routes -
#10935
ddd8e49Thanks @bluwy! - Improves the error message when failed to render MDX components -
#10917
3412535Thanks @jakobhellermann! - Fixes a case where the local server would crash when the host also contained the port, eg. withX-Forwarded-Host: hostname:8080andX-Forwarded-Port: 8080headers -
#10959
685fc22Thanks @bluwy! - Refactors internal handling of styles and scripts for content collections to improve build performance -
#10889
4d905ccThanks @matthewp! - Preserve content modules properly in cache -
#10955
2978287Thanks @florian-lefebvre! - HandlesAstroUserErrors thrown while syncing content collections and exportsBaseSchemaandCollectionConfigtypes