Actions: support React 19 `useActionState()` with progressive enhancement #11074

bholmesdev · 2024-05-16T22:27:53Z

Changes

Demo: https://www.loom.com/share/e77b00743de4454697f2c6b6d16492c0?sid=ff1d3574-80f6-416e-9ba9-a63a62821881

Update Astro core and the Reaction integration to support useActionState() with progressive enhancement.

Pass down the action result on a new reactServerActionResult property. This is attached to component metadata to pass to our React renderer.
Update the React renderer to pass reactServerActionResult to the formState property. This is used to progressively enhance useActionState() calls.
Expose new withState() and getActionState() utilities from @astrojs/react/actions.
- withState() - update an action's type signature and preserve progressive enhancement info for useActionState().
- getActionState() retrieve the state value from your action handler.

Testing

Add e2e tests for server and client rendered like buttons with useActionState()

Docs

Changeset will suffice for now. TODO: update RFC to include React 19 usage examples

changeset-bot · 2024-05-16T22:27:57Z

🦋 Changeset detected

Latest commit: 93480e7

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

bholmesdev · 2024-05-16T22:31:06Z

Thoughts on the experimental_ prefix? It is coming from a new module file (@astrojs/react/actions), so we could say it's namespaced well enough to ditch the prefix.

bholmesdev · 2024-05-16T22:43:45Z

(test failures are from my writing bad tests it seems. Will address tomorrow 😓 )

ematipico

I am concerned about having React stuff inside our runtime and types. I am not very fond of the change, I hope there are plans to make this generic, and let the renderer take care of it.

packages/astro/src/runtime/server/astro-island.ts

packages/astro/src/runtime/server/hydration.ts

packages/astro/src/@types/astro.ts

matthewp · 2024-05-20T15:21:42Z

packages/astro/templates/actions.mjs

@@ -22,6 +24,16 @@ function toActionProxy(actionCallback = {}, aggregatedPath = '/_actions/') {
 					data,
 				}
 			};
+			action.safe.$$FORM_ACTION = function () {


This part is very small and probably can't be moved out. So I don't see any issue with having this part.

packages/astro/src/core/render-context.ts

github-actions

This PR is blocked because it contains a minor changeset. A reviewer will merge this at the next release if approved.

matthewp · 2024-05-21T13:28:58Z

packages/astro/src/core/render-context.ts

@@ -314,8 +317,10 @@ export class RenderContext {
 			renderers,
 			resolve,
 			response,
+			request: this.request.clone(),


Can this be done conditionally only when necessary? Cloning every request would be expensive.

I have a feeling this is slowing the test suite too. The clone() was a precaution but it shouldn't be necessary? I'll try just removing the clone(). I wouldn't know a conditional to check 🤷

If that doesn't work, an alternative would be to just pass requestFormData when a form data content type is present. This would scope down to the info we actually need to access from the React integration.

Confirmed that clone was the slowdown. Good to know the impact that has

Merging into base branch, not main. Safe to merge

* deps: react 19 * feat: react progressive enhancement with useActionState * refactor: revert old action state implementation * feat(test): react 19 action with useFormStatus * fix: remove unused context arg * fix: wrote actions to wrong test fixture! * deps: revert react 19 beta to 18 for actions-blog fixture * chore: remove unused overrides * chore: remove unused actions export * chore: spaces vs tabs ugh * chore: fix conflicting fixture names * chore: changeset * chore: bump changeset to minor * Actions: support React 19 `useActionState()` with progressive enhancement (#11074) * feat(ex): Like with useActionState * feat: useActionState progressive enhancement! * feat: getActionState utility * chore: revert actions-blog fixture experimentation * fix: add back actions.ts export * feat(test): Like with use action state test * fix: stub form state client-side to avoid hydration error * fix: bad .safe chaining * fix: update actionState for client call * fix: correctly resume form state client side * refactor: unify and document reactServerActionResult * feat(test): useActionState assertions * feat(docs): explain my mess * refactor: add experimental_ prefix * refactor: move all react internals to integration * chore: remove unused getIslandProps * chore: remove unused imports * chore: undo format changes * refactor: get actionResult from middleware directly * refactor: remove bad result type * fix: like button disabled timeout * chore: changeset * refactor: remove request cloning * Update .changeset/gentle-windows-enjoy.md Co-authored-by: Sarah Rainsberger <[email protected]> * changeset grammar tense --------- Co-authored-by: Emanuele Stoppa <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>

bholmesdev added 13 commits May 16, 2024 12:47

feat(ex): Like with useActionState

0f45b56

feat: useActionState progressive enhancement!

4493b37

feat: getActionState utility

3787410

chore: revert actions-blog fixture experimentation

7dc8276

fix: add back actions.ts export

502b164

feat(test): Like with use action state test

19939db

fix: stub form state client-side to avoid hydration error

c4c5918

fix: bad .safe chaining

1c0a3fa

fix: update actionState for client call

b3488ed

fix: correctly resume form state client side

cbb3f47

refactor: unify and document reactServerActionResult

e56655c

feat(test): useActionState assertions

24c76d1

feat(docs): explain my mess

9ac35f4

github-actions bot added pkg: react Related to React (scope) pkg: integration Related to any renderer integration (scope) pkg: astro Related to the core `astro` package (scope) pr: docs A PR that includes documentation for review labels May 16, 2024

refactor: add experimental_ prefix

9063732

ematipico reviewed May 20, 2024

View reviewed changes

packages/astro/src/runtime/server/astro-island.ts Outdated Show resolved Hide resolved

packages/astro/src/runtime/server/hydration.ts Outdated Show resolved Hide resolved

packages/astro/src/@types/astro.ts Outdated Show resolved Hide resolved

matthewp reviewed May 20, 2024

View reviewed changes

packages/astro/src/core/render-context.ts Outdated Show resolved Hide resolved

bholmesdev added 6 commits May 20, 2024 16:46

refactor: move all react internals to integration

1ed6e54

chore: remove unused getIslandProps

abe868d

chore: remove unused imports

8ceea58

chore: undo format changes

35eb988

refactor: get actionResult from middleware directly

18c7669

refactor: remove bad result type

f8fab7d

bholmesdev added 2 commits May 20, 2024 17:10

fix: like button disabled timeout

eaeec9a

chore: changeset

0bfff69

github-actions bot added the semver: minor Change triggers a `minor` release label May 20, 2024

github-actions bot previously requested changes May 20, 2024

View reviewed changes

bholmesdev requested a review from matthewp May 20, 2024 21:32

matthewp reviewed May 21, 2024

View reviewed changes

refactor: remove request cloning

93480e7

ematipico approved these changes May 21, 2024

View reviewed changes

bholmesdev merged commit 170722c into feat/react-19-basic-actions May 21, 2024
14 checks passed

bholmesdev deleted the feat/react-19-action-state branch May 21, 2024 14:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Actions: support React 19 `useActionState()` with progressive enhancement #11074

Actions: support React 19 `useActionState()` with progressive enhancement #11074

bholmesdev commented May 16, 2024 •

edited

Loading

changeset-bot bot commented May 16, 2024 •

edited

Loading

bholmesdev commented May 16, 2024 •

edited

Loading

bholmesdev commented May 16, 2024

ematipico left a comment

matthewp May 20, 2024

github-actions bot left a comment

matthewp May 21, 2024

bholmesdev May 21, 2024

bholmesdev May 21, 2024

bholmesdev May 21, 2024

Actions: support React 19 useActionState() with progressive enhancement #11074

Actions: support React 19 useActionState() with progressive enhancement #11074

Conversation

bholmesdev commented May 16, 2024 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented May 16, 2024 • edited Loading

🦋 Changeset detected

bholmesdev commented May 16, 2024 • edited Loading

bholmesdev commented May 16, 2024

ematipico left a comment

Choose a reason for hiding this comment

matthewp May 20, 2024

Choose a reason for hiding this comment

github-actions bot left a comment

Choose a reason for hiding this comment

matthewp May 21, 2024

Choose a reason for hiding this comment

bholmesdev May 21, 2024

Choose a reason for hiding this comment

bholmesdev May 21, 2024

Choose a reason for hiding this comment

bholmesdev May 21, 2024

Choose a reason for hiding this comment

Actions: support React 19 `useActionState()` with progressive enhancement #11074

Actions: support React 19 `useActionState()` with progressive enhancement #11074

bholmesdev commented May 16, 2024 •

edited

Loading

changeset-bot bot commented May 16, 2024 •

edited

Loading

bholmesdev commented May 16, 2024 •

edited

Loading