@astrojs/react

• 4.1.2

  Dec 20, 2024

  🐞 Patch Changes

  • #12799 739dbfb Thanks @ascorbic! - Upgrades Vite to pin esbuild
• 4.1.1

  Dec 16, 2024

  🐞 Patch Changes

  • #12755 391df0e Thanks @matthewp! - Preoptimize React compiler runtime
• 4.1.0

  Dec 11, 2024

  🍿 Minor Changes

  • #12678 97c9265 Thanks @bskimball! - Add React 19 stable to peer dependencies
• 4.0.0

  Dec 3, 2024

  ✨ Major Changes

  • #12524 9f44019 Thanks @bluwy! - Updates Vite dependency to v6 to match Astro v5

  🍿 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

  Nov 27, 2024

  ✨ Major Changes

  • #12524 9f44019 Thanks @bluwy! - Updates Vite dependency to v6 to match Astro v5

  🍿 Minor Changes

  • #12539 827093e Thanks @bluwy! - Drops node 21 support
• 3.7.0-beta.1

  Nov 26, 2024

  🍿 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

  Nov 21, 2024

  🐞 Patch Changes

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

  Nov 21, 2024

  🐞 Patch Changes

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

  Aug 9, 2024

  🐞 Patch Changes

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

  Jul 30, 2024

  🐞 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();

    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>

    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

  Jun 17, 2024

  🍿 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

  Jun 6, 2024

  🍿 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

  May 23, 2024

  🍿 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

  May 9, 2024

  🐞 Patch Changes

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

  May 9, 2024

  🐞 Patch Changes

  • #10942 d47baa4 Thanks @matthewp! - Updates package to support React 19 beta
• 3.3.2

  May 2, 2024

  🐞 Patch Changes

  • #10893 fd7a9ed Thanks @Angrigo! - Removes using deprecated ReactDOMServer.renderToStaticNodeStream API
• 3.3.1

  Apr 23, 2024

  🐞 Patch Changes

  • #10855 f6bddd3 Thanks @lamATnginx! - Fix Redoc usage in React integration
• 3.3.0

  Apr 11, 2024

  🍿 Minor Changes

  • #10689 683d51a5eecafbbfbfed3910a3f1fbf0b3531b99 Thanks @ematipico! - Deprecate support for versions of Node.js older than v18.17.1 for Node.js 18, older than v20.0.3 for Node.js 20, and the complete Node.js v19 release line.

    This change is in line with Astro’s Node.js support policy.

• 3.2.0

  Apr 9, 2024

  🍿 Minor Changes

  • #10675 14f1d49a10541fecc4c10def8a094322442ccf23 Thanks @fightingcat! - Expose Babel config for @astro/react.
• 3.1.1

  Apr 2, 2024

  🐞 Patch Changes

  • #10654 195f51f82a44df32be73865949aabee0d46ffe61 Thanks @matthewp! - Mark @material-tailwind/react as noExternal