public-backup/astro
1
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-12-05 18:56:38 -06:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
astro/packages/integrations/react/CHANGELOG.md
Houston (Bot) 7a5f28006e [ci] release (#14702) 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2025-11-06 11:49:39 -05:00

47 KiB
Raw Permalink Blame History

@astrojs/react

4.4.2

Patch Changes

  • #14715 3d55c5d 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.

    See the container-with-vitest demo for a usage example, and the Container API documentation for more information on using framework components with the experimental Container API.

4.4.1

Patch Changes

4.4.0

Minor Changes

  • #14386 f75f446 Thanks @yanthomasdev! - Stabilizes the formerly experimental getActionState() and withState() functions introduced in @astrojs/react v3.4.0 used to integrate Astro Actions with React 19's useActionState() hook.

    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 }) {
  const [state, action, pending] = useActionState(
    withState(actions.like),
    0, // initial likes
  );

  return (
    <form action={action}>
      <input type="hidden" name="postId" value={postId} />
      <button disabled={pending}>{state} ❤️</button>
    </form>
  );
}

    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';

4.3.1

Patch Changes

4.3.0

Minor Changes

  • #13809 3c3b492 Thanks @ascorbic! - Increases minimum Node.js version to 18.20.8

    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.

    ⚠️ 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.

4.2.7

Patch Changes

4.2.6

Patch Changes

4.2.5

Patch Changes

4.2.4

Patch Changes

4.2.3

Patch Changes

4.2.2

Patch Changes

4.2.1

Patch Changes

  • #13323 80926fa Thanks @ematipico! - Updates esbuild and vite to the latest to avoid false positives audits warnings caused by esbuild.

4.2.0

Minor Changes

  • #13036 3c90d8f Thanks @artmsilva! - Adds experimental support for disabling streaming

    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:

    // astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [
    react({
+      experimentalDisableStreaming: true,
    }),
  ],
});

4.1.6

Patch Changes

  • #12996 80c6801 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.

  • #13011 cf30880 Thanks @ascorbic! - Upgrades Vite

4.1.5

Patch Changes

  • #12887 ea603ae 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.

4.1.4

Patch Changes

  • #12923 c7642fb Thanks @bluwy! - Removes react-specific entrypoints in optimizeDeps.include and rely on @vitejs/plugin-react to add

4.1.3

Patch Changes

4.1.2

Patch Changes

4.1.1

Patch Changes

4.1.0

Minor Changes

4.0.0

Major Changes

Minor Changes

  • #12539 827093e Thanks @bluwy! - Drops node 21 support

  • #12510 14feaf3 Thanks @bholmesdev! - Changes the generated URL query param from _astroAction to _action when submitting a form using Actions. This avoids leaking the framework name into the URL bar, which may be considered a security issue.

4.0.0-beta.2

Major Changes

Minor Changes

3.7.0-beta.1

Minor Changes

  • #12510 14feaf3 Thanks @bholmesdev! - Changes the generated URL query param from _astroAction to _action when submitting a form using Actions. This avoids leaking the framework name into the URL bar, which may be considered a security issue.

3.6.3

Patch Changes

  • #12481 8a46e80 Thanks @marbrex! - Resolve vite peer dependency problem for strict package managers like Yarn in PnP mode.

3.6.2

Patch Changes

  • #11624 7adb350 Thanks @bluwy! - Prevents throwing errors when checking if a component is a React component in runtime

3.6.1

Patch Changes

  • #11571 1c3265a Thanks @bholmesdev! - BREAKING CHANGE to the experimental Actions API only. Install the latest @astrojs/react integration as well if you're using React 19 features.

    Make .safe() the default return value for actions. This means { data, error } will be returned when calling an action directly. If you prefer to get the data while allowing errors to throw, chain the .orThrow() modifier.

    import { actions } from 'astro:actions';

// Before
const { data, error } = await actions.like.safe();
// After
const { data, error } = await actions.like();

// Before
const newLikes = await actions.like();
// After
const newLikes = await actions.like.orThrow();

    Migration

    To migrate your existing action calls:

    • Remove .safe from existing safe action calls
    • Add .orThrow to existing unsafe action calls

  • #11570 84189b6 Thanks @bholmesdev! - BREAKING CHANGE to the experimental Actions API only. Install the latest @astrojs/react integration as well if you're using React 19 features.

    Updates the Astro Actions fallback to support action={actions.name} instead of using getActionProps(). This will submit a form to the server in zero-JS scenarios using a search parameter:

    ---
import { actions } from 'astro:actions';
---

<form action={actions.logOut}>
  <!--output: action="?_astroAction=logOut"-->
  <button>Log Out</button>
</form>

    You may also construct form action URLs using string concatenation, or by using the URL() constructor, with the an action's .queryString property:

    ---
import { actions } from 'astro:actions';

const confirmationUrl = new URL('/confirmation', Astro.url);
confirmationUrl.search = actions.queryString;
---

<form method="POST" action={confirmationUrl.pathname}>
  <button>Submit</button>
</form>

    Migration

    getActionProps() is now deprecated. To use the new fallback pattern, remove the getActionProps() input from your form and pass your action function to the form action attribute:

    ---
import {
  actions,
- getActionProps,
} from 'astro:actions';
---

+ <form method="POST" action={actions.logOut}>
- <form method="POST">
- <input {...getActionProps(actions.logOut)} />
  <button>Log Out</button>
</form>

3.6.0

Minor Changes

  • #11234 4385bf7 Thanks @ematipico! - Adds a new function called addServerRenderer to the Container API. Use this function to manually store renderers inside the instance of your container.

    This new function should be preferred when using the Container API in environments like on-demand pages:

    import type { APIRoute } from 'astro';
import { experimental_AstroContainer } from 'astro/container';
import reactRenderer from '@astrojs/react/server.js';
import vueRenderer from '@astrojs/vue/server.js';
import ReactComponent from '../components/button.jsx';
import VueComponent from '../components/button.vue';

// MDX runtime is contained inside the Astro core
import mdxRenderer from 'astro/jsx/server.js';

// In case you need to import a custom renderer
import customRenderer from '../renderers/customRenderer.js';

export const GET: APIRoute = async (ctx) => {
  const container = await experimental_AstroContainer.create();
  container.addServerRenderer({ renderer: reactRenderer });
  container.addServerRenderer({ renderer: vueRenderer });
  container.addServerRenderer({ renderer: customRenderer });
  // You can pass a custom name too
  container.addServerRenderer({
    name: 'customRenderer',
    renderer: customRenderer,
  });
  const vueComponent = await container.renderToString(VueComponent);
  return await container.renderToResponse(Component);
};

3.5.0

Minor Changes

  • #11144 803dd80 Thanks @ematipico! - The integration now exposes a function called getContainerRenderer, that can be used inside the Container APIs to load the relative renderer.

    import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import ReactWrapper from '../src/components/ReactWrapper.astro';
import { loadRenderers } from 'astro:container';
import { getContainerRenderer } from '@astrojs/react';

test('ReactWrapper with react renderer', async () => {
  const renderers = await loadRenderers([getContainerRenderer()]);
  const container = await AstroContainer.create({
    renderers,
  });
  const result = await container.renderToString(ReactWrapper);

  expect(result).toContain('Counter');
  expect(result).toContain('Count: <!-- -->5');
});

3.4.0

Minor Changes

  • #11071 8ca7c73 Thanks @bholmesdev! - Adds two new functions experimental_getActionState() and experimental_withState() to support the React 19 useActionState() hook when using Astro Actions. This introduces progressive enhancement when calling an Action with the withState() utility.

    This example calls a like action that accepts a postId and returns the number of likes. Pass this action to the experimental_withState() function to apply progressive enhancement info, and apply to useActionState() to track the result:

    import { actions } from 'astro:actions';
import { experimental_withState } from '@astrojs/react/actions';

export function Like({ postId }: { postId: string }) {
  const [state, action, pending] = useActionState(
    experimental_withState(actions.like),
    0, // initial likes
  );

  return (
    <form action={action}>
      <input type="hidden" name="postId" value={postId} />
      <button disabled={pending}>{state} ❤️</button>
    </form>
  );
}

    You can also access the state stored by useActionState() from your action handler. Call experimental_getActionState() with the API context, and optionally apply a type to the result:

    import { defineAction, z } from 'astro:actions';
import { experimental_getActionState } from '@astrojs/react/actions';

export const server = {
  like: defineAction({
    input: z.object({
      postId: z.string(),
    }),
    handler: async ({ postId }, ctx) => {
      const currentLikes = experimental_getActionState<number>(ctx);
      // write to database
      return currentLikes + 1;
    },
  }),
};

3.3.4

Patch Changes

  • #10986 4d16381 Thanks @emish89! - Fixes incorrect peerDependencies for @types/react and @types/react-dom

3.3.3

Patch Changes

3.3.2

Patch Changes

3.3.1

Patch Changes

3.3.0

Minor Changes

3.2.0

Minor Changes

3.1.1

Patch Changes

3.1.0

Minor Changes

  • #10136 9cd84bd19b92fb43ae48809f575ee12ebd43ea8f Thanks @matthewp! - Changes the default behavior of transition:persist to update the props of persisted islands upon navigation. Also adds a new view transitions option transition:persist-props (default: false) to prevent props from updating as needed.

    Islands which have the transition:persist property to keep their state when using the <ViewTransitions /> router will now have their props updated upon navigation. This is useful in cases where the component relies on page-specific props, such as the current page title, which should update upon navigation.

    For example, the component below is set to persist across navigation. This component receives a products props and might have some internal state, such as which filters are applied:

    <ProductListing transition:persist products={products} />

    Upon navigation, this component persists, but the desired products might change, for example if you are visiting a category of products, or you are performing a search.

    Previously the props would not change on navigation, and your island would have to handle updating them externally, such as with API calls.

    With this change the props are now updated, while still preserving state.

    You can override this new default behavior on a per-component basis using transition:persist-props=true to persist both props and state during navigation:

    <ProductListing transition:persist-props="true" products={products} />

3.0.10

Patch Changes

3.0.9

Patch Changes

3.0.8

Patch Changes

3.0.7

Patch Changes

3.0.7-beta.0

Patch Changes

3.0.6

Patch Changes

  • #9141 af43fb517 Thanks @lilnasy! - Fixes an issue where slotting self-closing elements (img, br, hr) into react components with experimentalReactChildren enabled led to an error.

3.0.5

Patch Changes

3.0.4

Patch Changes

3.0.3

Patch Changes

3.0.2

Patch Changes

3.0.1

Patch Changes

3.0.0

Major Changes

  • #8188 d0679a666 Thanks @ematipico! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.

  • #8179 6011d52d3 Thanks @matthewp! - Astro 3.0 Release Candidate

  • #7924 519a1c4e8 Thanks @matthewp! - Support for React Refresh

    The React integration now fully supports React Refresh and is backed by @vitejs/plugin-react.

    Also included in this change are new include and exclude config options. Use these if you want to use React alongside another JSX framework; include specifies files to be compiled for React and exclude does the opposite.

Patch Changes

3.0.0-rc.6

Patch Changes

3.0.0-rc.5

Patch Changes

3.0.0-rc.4

Major Changes

Patch Changes

  • Updated dependencies [6011d52d3]:
    • @astrojs/internal-helpers@0.2.0-rc.2

3.0.0-beta.3

Minor Changes

  • #8082 16a3fdf93 Thanks @matthewp! - Optionally parse React slots as React children.

    This adds a new configuration option for the React integration experimentalReactChildren:

    export default {
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
  ],
};

    With this enabled, children passed to React from Astro components via the default slot are parsed as React components.

    This enables better compatibility with certain React components which manipulate their children.

3.0.0-beta.2

Patch Changes

  • Updated dependencies [2aa6d8ace]:
    • @astrojs/internal-helpers@0.2.0-beta.1

3.0.0-beta.1

Major Changes

  • #7924 519a1c4e8 Thanks @matthewp! - Support for React Refresh

    The React integration now fully supports React Refresh and is backed by @vitejs/plugin-react.

    Also included in this change are new include and exclude config options. Use these if you want to use React alongside another JSX framework; include specifies files to be compiled for React and exclude does the opposite.

3.0.0-beta.0

Major Changes

  • 1eae2e3f7 Thanks @Princesseuh! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.

2.3.2

Patch Changes

2.3.1

Patch Changes

2.3.0

Minor Changes

  • #8082 16a3fdf93 Thanks @matthewp! - Optionally parse React slots as React children.

    This adds a new configuration option for the React integration experimentalReactChildren:

    export default {
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
  ],
};

    With this enabled, children passed to React from Astro components via the default slot are parsed as React components.

    This enables better compatibility with certain React components which manipulate their children.

2.2.2

Patch Changes

  • #8075 da517d405 Thanks @SudoCat! - fix a bug where react identifierPrefix was set to null for client:only components causing React.useId to generate ids prefixed with null

2.2.1

Patch Changes

2.2.0

Minor Changes

  • #7093 3d525efc9 Thanks @matthewp! - Prevent removal of nested slots within islands

    This change introduces a new flag that renderers can add called supportsAstroStaticSlot. What this does is let Astro know that the render is sending <astro-static-slot> as placeholder values for static (non-hydrated) slots which Astro will then remove.

    This change is completely backwards compatible, but fixes bugs caused by combining ssr-only and client-side framework components like so:

    <Component>
  <div>
    <Component client:load>
      <span>Nested</span>
    </Component>
  </div>
</Component>

Patch Changes

2.1.3

Patch Changes

2.1.2

Patch Changes

2.1.1

Patch Changes

2.1.0

Minor Changes

2.0.2

Patch Changes

2.0.1

Patch Changes

2.0.0

Major Changes

2.0.0-beta.0

See changes in 2.0.0-beta.0

Major Changes

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

  • #5016 6efeaeb39 Thanks @matthewp! - Add support for mui

    This adds support for mui through configuration. Users will now not need to configure this library to get it to work.

1.1.4

Patch Changes

1.1.3

Patch Changes

1.1.2

Patch Changes

1.1.1

Patch Changes

1.1.0

Minor Changes

  • #4478 243525b15 Thanks @matthewp! - Uses startTransition on React roots

    This prevents hydration from blocking the main thread when multiple islands are rendering at the same time.

1.1.0-next.0

Minor Changes

  • #4478 243525b15 Thanks @matthewp! - Uses startTransition on React roots

    This prevents hydration from blocking the main thread when multiple islands are rendering at the same time.

1.0.0

Major Changes

0.4.3

Patch Changes

0.4.2

Patch Changes

0.4.1

Patch Changes

0.4.0

Minor Changes

  • #3914 b48767985 Thanks @ran-dall! - Rollback supported node@16 version. Minimum versions are now node@14.20.0 or node@16.14.0.

0.3.1

Patch Changes

0.3.0

Minor Changes

  • #3871 1cc5b7890 Thanks @natemoo-re! - Update supported node versions. Minimum versions are now node@14.20.0 or node@16.16.0.

0.2.1

Patch Changes

0.2.0

Minor Changes

  • #3652 7373d61c Thanks @natemoo-re! - Add support for passing named slots from .astro => framework components.

    Each slot is be passed as a top-level prop. For example:

    // From .astro
<Component>
  <h2 slot="title">Hello world!</h2>
  <h2 slot="slot-with-dash">Dash</h2>
  <div>Default</div>
</Component>;

// For .jsx
export default function Component({ title, slotWithDash, children }) {
  return (
    <>
      <div id="title">{title}</div>
      <div id="slot-with-dash">{slotWithDash}</div>
      <div id="main">{children}</div>
    </>
  );
}

0.1.3

Patch Changes

  • #3455 e9a77d86 Thanks @natemoo-re! - Update client hydration to check for ssr attribute. Requires astro@^1.0.0-beta.36.

0.1.2

Patch Changes

  • #3337 678c2b75 Thanks @bholmesdev! - Fix: remove hydration failures on React v18 by exposing the "client" directive from Astro core.

0.1.1

Patch Changes

0.1.0

Minor Changes

0.0.2

Patch Changes

  • #2847 3b621f7a Thanks @tony-sull! - Adds keywords to the official integrations to support discoverability on Astro's Integrations site

0.0.2-next.0

Patch Changes

  • #2847 3b621f7a Thanks @tony-sull! - Adds keywords to the official integrations to support discoverability on Astro's Integrations site