Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
34 KiB
@astrojs/react
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
- Remove
-
#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 usinggetActionProps().
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 thegetActionProps()
input from your form and pass your action function to the formaction
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 calledaddServerRenderer
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 calledgetContainerRenderer
, 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 functionsexperimental_getActionState()
andexperimental_withState()
to support the React 19useActionState()
hook when using Astro Actions. This introduces progressive enhancement when calling an Action with thewithState()
utility.This example calls a
like
action that accepts apostId
and returns the number of likes. Pass this action to theexperimental_withState()
function to apply progressive enhancement info, and apply touseActionState()
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 actionhandler
. Callexperimental_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 incorrectpeerDependencies
for@types/react
and@types/react-dom
3.3.3
Patch Changes
3.3.2
Patch Changes
- #10893
fd7a9ed
Thanks @Angrigo! - Removes using deprecatedReactDOMServer.renderToStaticNodeStream
API
3.3.1
Patch Changes
- #10855
f6bddd3
Thanks @lamATnginx! - Fix Redoc usage in React integration
3.3.0
Minor Changes
-
#10689
683d51a5eecafbbfbfed3910a3f1fbf0b3531b99
Thanks @ematipico! - Deprecate support for versions of Node.js older thanv18.17.1
for Node.js 18, older thanv20.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
Minor Changes
- #10675
14f1d49a10541fecc4c10def8a094322442ccf23
Thanks @fightingcat! - Expose Babel config for @astro/react.
3.1.1
Patch Changes
- #10654
195f51f82a44df32be73865949aabee0d46ffe61
Thanks @matthewp! - Mark @material-tailwind/react as noExternal
3.1.0
Minor Changes
-
#10136
9cd84bd19b92fb43ae48809f575ee12ebd43ea8f
Thanks @matthewp! - Changes the default behavior oftransition:persist
to update the props of persisted islands upon navigation. Also adds a new view transitions optiontransition: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
- #9849
20ca3154fb37049cbcd51b06d9fa2ef25ac25a36
Thanks @StandardGage! - Fixes an issue where passing void elements (img, etc..) did not work with theexperimentalReactChildren
option enabled
3.0.9
Patch Changes
-
#9482
72b26daf694b213918f02d0fcbf90ab5b7ebc31f
Thanks @natemoo-re! - Improves compatability with the Qwik adapter -
#9479
1baf0b0d3cbd0564954c2366a7278794fad6726e
Thanks @sarah11918! - Updates README
3.0.8
Patch Changes
-
#9403
7eb9fe8a7
Thanks @knpwrs! - Prevents unsupportedforwardRef
components created by Preact from being rendered by React -
#9452
e83b5095f
Thanks @florian-lefebvre! - Upgrades vite to latest
3.0.7
Patch Changes
- #9122
1c48ed286
Thanks @bluwy! - Adds Vite 5 support. There are no breaking changes from Astro. Check the Vite migration guide for details of the breaking changes from Vite instead.
3.0.7-beta.0
Patch Changes
- #9122
1c48ed286
Thanks @bluwy! - Adds Vite 5 support. There are no breaking changes from Astro. Check the Vite migration guide for details of the breaking changes from Vite instead.
3.0.6
Patch Changes
- #9141
af43fb517
Thanks @lilnasy! - Fixes an issue where slotting self-closing elements (img, br, hr) into react components withexperimentalReactChildren
enabled led to an error.
3.0.5
Patch Changes
- #8925
ac5633b8f
Thanks @brandonsdebt! - Usesnode:stream
during server rendering for compatibility with Cloudflare
3.0.4
Patch Changes
- #8898
4dee38711
Thanks @matthewp! - Fixes client hydration in islands when using experimentalReactChildren
3.0.3
Patch Changes
- #8737
6f60da805
Thanks @ematipico! - Add provenance statement when publishing the library from CI
3.0.2
Patch Changes
- #8455
85fe213fe
Thanks @natemoo-re! - UpdateexperimentalReactChildren
behavior to support void tags
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 RefreshThe React integration now fully supports React Refresh and is backed by
@vitejs/plugin-react
.Also included in this change are new
include
andexclude
config options. Use these if you want to use React alongside another JSX framework; include specifies files to be compiled for React andexclude
does the opposite.
Patch Changes
-
#8228
4bd2fac8d
Thanks @bluwy! - Publish missingvnode-children.js
file -
#8264
1f58a7a1b
Thanks @natemoo-re! - Automatically unmount islands whenastro:unmount
is fired -
Updated dependencies [
d0679a666
,2aa6d8ace
,6011d52d3
]:- @astrojs/internal-helpers@0.2.0
3.0.0-rc.6
Patch Changes
- #8264
1f58a7a1b
Thanks @natemoo-re! - Automatically unmount islands whenastro:unmount
is fired
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 RefreshThe React integration now fully supports React Refresh and is backed by
@vitejs/plugin-react
.Also included in this change are new
include
andexclude
config options. Use these if you want to use React alongside another JSX framework; include specifies files to be compiled for React andexclude
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
- #8137
8c0a4ed10
Thanks @natemoo-re! - Fix missing export for newexperimentalReactChildren
option
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 islandsThis 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
-
#6698
fc71c3f18
Thanks @bholmesdev! - Update React README to reference the new React docs -
#6696
239b9a2fb
Thanks @matthewp! - Add use-immer as a noExternal module
2.1.0
Minor Changes
- #6213
afbbc4d5b
Thanks @Princesseuh! - Updated compilation settings to disable downlevelling for Node 14
2.0.2
Patch Changes
2.0.1
Patch Changes
2.0.0
Major Changes
- #5782
1f92d64ea
Thanks @Princesseuh! - Remove support for Node 14. Minimum supported Node version is now >=16.12.0
2.0.0-beta.0
See changes in 2.0.0-beta.0
Major Changes
- #5782
1f92d64ea
Thanks @Princesseuh! - Remove support for Node 14. Minimum supported Node version is now >=16.12.0
1.2.2
Patch Changes
- #5218
0b1241431
Thanks @MoustaphaDev! - remove unnecessaryReactDOM.renderToString
operation
1.2.1
Patch Changes
- #5095
ddfbef5ac
Thanks @Princesseuh! - Add@types/
packages as peerDependencies
1.2.0
Minor Changes
-
#5016
6efeaeb39
Thanks @matthewp! - Add support for muiThis 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
-
#4679
5986517b4
Thanks @matthewp! - Prevent decoder from leaking -
#4667
9290b2414
Thanks @Holben888! - Fix framework components on Vercel Edge
1.1.1
Patch Changes
1.1.0
Minor Changes
-
#4478
243525b15
Thanks @matthewp! - Uses startTransition on React rootsThis 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 rootsThis prevents hydration from blocking the main thread when multiple islands are rendering at the same time.
1.0.0
Major Changes
-
04ad44563
- > Astro v1.0 is out! Read the official announcement post.No breaking changes. This package is now officially stable and compatible with
astro@1.0.0
!
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 supportednode@16
version. Minimum versions are nownode@14.20.0
ornode@16.14.0
.
0.3.1
Patch Changes
0.3.0
Minor Changes
- #3871
1cc5b7890
Thanks @natemoo-re! - Update supportednode
versions. Minimum versions are nownode@14.20.0
ornode@16.16.0
.
0.2.1
Patch Changes
- #3854
b012ee55
Thanks @bholmesdev! - [astro add] Support adapters and third party packages
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 forssr
attribute. Requiresastro@^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
e425f896
Thanks @FredKSchott! - Add support for React v18
0.0.2
Patch Changes
- #2885
6b004363
Thanks @bholmesdev! - Add README across Astro built-in integrations
- #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