#1526411efb05 Thanks @florian-lefebvre! - Lower the Node version requirement to allow running on Stackblitz until it supports v22
#157004e7f3e8 Thanks @ocavue! - Improves how React components are identified when setting the include and/or exclude options in projects where multiple JSX frameworks are used together
#157004e7f3e8 Thanks @ocavue! - Improves how React components are identified when setting the include and/or exclude options in projects where multiple JSX frameworks are used together
#147153d55c5d Thanks @ascorbic! - Adds support for client hydration in getContainerRenderer()
The getContainerRenderer() function is exported by Astro framework integrations to simplify the process of rendering framework components when using the experimental Container API inside a Vite or Vitest environment. This update adds the client hydration entrypoint to the returned object, enabling client-side interactivity for components rendered using this function. Previously this required users to manually call container.addClientRenderer() with the appropriate client renderer entrypoint.
This example calls a like action that accepts a postId and returns the number of likes. Pass this action to the withState() function to apply progressive enhancement info, and apply to useActionState() to track the result:
import { actions } from 'astro:actions';
import { withState } from '@astrojs/react/actions';
import { useActionState } from 'react';
export function Like({ postId }: { postId: string }) {
You can also access the state stored by useActionState() from your action handler. Call getActionState() with the API context, and optionally apply a type to the result:
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { getActionState } from '@astrojs/react/actions';
export const server = {
like: defineAction({
input: z.object({
postId: z.string(),
}),
handler: async ({ postId }, ctx) => {
const currentLikes = getActionState<number>(ctx);
// write to database
return currentLikes + 1;
},
}),
};
If you were previously using this experimental feature, you will need to update your code to use the new stable exports:
src/components/Form.jsx
import { actions } from 'astro:actions';
import { experimental_withState } from '@astrojs/react/actions';
import { withState } from '@astrojs/react/actions';
import { useActionState } from "react";
src/actions/index.ts
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';
Node.js 18 has now reached end-of-life and should not be used. For now, Astro will continue to support Node.js 18.20.8, which is the final LTS release of Node.js 18, as well as Node.js 20 and Node.js 22 or later. We will drop support for Node.js 18 in a future release, so we recommend upgrading to Node.js 22 as soon as possible. See Astro’s Node.js support policy for more details.
:warning: Important note for users of Cloudflare Pages: The current build image for Cloudflare Pages uses Node.js 18.17.1 by default, which is no longer supported by Astro. If you are using Cloudflare Pages you should override the default Node.js version to Node.js 22. This does not affect users of Cloudflare Workers, which uses Node.js 22 by default.
This is useful to support libraries that are not compatible with streaming such as some CSS-in-JS libraries. To disable streaming for all React components in your project, set experimentalDisableStreaming: true as a configuration option for @astrojs/react:
#1299680c6801 Thanks @bluwy! - Removes hardcoded ssr.external: ['react-dom/server', 'react-dom/client'] config that causes issues with adapters that bundle all dependencies (e.g. Cloudflare). These externals should already be inferred by default by Vite when deploying to a server environment.
#12887ea603ae Thanks @louisescher! - Adds a warning message when multiple JSX-based UI frameworks are being used without either the include or exclude property being set on the integration.