withastro/astro astro@4.8.0 on GitHub

Minor Changes

#10935 ddd8e49 Thanks @bluwy! - Exports astro/jsx/rehype.js with utilities to generate an Astro metadata object
#10625 698c2d9 Thanks @goulvenclech! - Adds the ability for multiple pages to use the same component as an entrypoint when building an Astro integration. This change is purely internal, and aligns the build process with the behaviour in the development server.
#10906 7bbd664 Thanks @Princesseuh! - Adds a new radio checkbox component to the dev toolbar UI library (astro-dev-toolbar-radio-checkbox)
#10963 61f47a6 Thanks @delucis! - Adds support for passing an inline Astro configuration object to getViteConfig()
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 47877a7 Thanks @ematipico! - Adds experimental rewriting in Astro with a new rewrite() function and the middleware next() 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 the rewrite() function. For example, with next("/"), you can call the next middleware function with a new Request.
```
// 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 c0c509b Thanks @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 output property and add the actions flag to the experimental object:

{
  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 the astro:actions module. These accept the handler property to define your server-side request handler. If your action accepts arguments, apply the input property to validate parameters with Zod.

This example defines two actions: like and comment. The like action accepts a JSON object with a postId string, while the comment action accepts FormData with postId, author, and body strings. Each handler updates 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 db

      return likes;
    },
  }),
  comment: defineAction({
    accept: 'form',
    input: z.object({
      postId: z.string(),

      body: z.string(),
    }),
    handler: async ({ postId }, context) => {
      // insert comments in db

      return comment;
    },
  }),
};

Then, call an action from your client components using the actions object from astro:actions. You can pass a type-safe object when using JSON, or a FormData object when using accept: '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 (
    <button
      onClick={async () => {
        const newLikes = await actions.like({ postId });
        setLikes(newLikes);
      }}
    >
      {likes} likes
    </button>
  );
}

export function Comment({ postId }: { postId: string }) {
  return (
    <form
      onSubmit={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 7bbd664 Thanks @Princesseuh! - Adds a new buttonBorderRadius property to the astro-dev-toolbar-button component 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 59571e8 Thanks @BryceRussell! - Improve error message when accessing clientAddress on prerendered routes
#10935 ddd8e49 Thanks @bluwy! - Improves the error message when failed to render MDX components
#10917 3412535 Thanks @jakobhellermann! - Fixes a case where the local server would crash when the host also contained the port, eg. with X-Forwarded-Host: hostname:8080 and X-Forwarded-Port: 8080 headers
#10959 685fc22 Thanks @bluwy! - Refactors internal handling of styles and scripts for content collections to improve build performance
#10889 4d905cc Thanks @matthewp! - Preserve content modules properly in cache
#10955 2978287 Thanks @florian-lefebvre! - Handles AstroUserErrors thrown while syncing content collections and exports BaseSchema and CollectionConfig types