Support form submissions in the ViewTransitions router by matthewp · Pull Request #8963 · withastro/astro

matthewp · 2023-10-31T16:42:21Z

Changes

Allows the user to enable form submissions to be handled. Currently this is via a form option on the ViewTransitions router: <ViewTransitions form />. Probably there is a better name.
- Presumably this would become the default in 4.0.
- Also allows data-astro-reload like with anchors, to opt-out on a per form basis.
Adds an option to the navigate() API options.init which is a RequestInit. This is needed for forms to provide the body and set the method on the request.
- If this is undesirable as a public API we could maybe make it a private option.

Testing

Tests added in the normal way
Added a test for when errors are thrown.

Docs

Document form support in the ViewTransitions router docs#5299

changeset-bot · 2023-10-31T16:42:26Z

🦋 Changeset detected

Latest commit: a2b67da

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

packages/astro/components/ViewTransitions.astro

martrapp · 2023-10-31T18:48:06Z

packages/astro/components/ViewTransitions.astro


 export interface Props {
 	fallback?: Fallback;
+	form?: boolean;


I like the idea of using these props to select deviant behavior.
Looking at the uses, handleForms seems more intuitive?

Or maybe animateForms or something similar? Astro doesn't handle anything other than catching the submit and passing everything to the endpoint. "Handle" could be misunderstood like validation, error management, etc.

We don't use the word animate as animations are a use-case but not what the feature actually does. You can actually use this router and have no animations at all.

packages/astro/src/transitions/router.ts

martrapp · 2023-10-31T19:00:14Z

In the Navigate API, the Navigate event has a property for form data, but it is not clear from the specification how this property is set. I don't see a problem if Astro's navigate() has more options than the Navigate API's navigate(). But I would question the name and type of the option, see comments in code.

ematipico

Can we add a test case with a failure when doing a submit? I would like to see/understand what's the expected behaviour in that case

matthewp · 2023-11-02T16:55:29Z

@ematipico You mean if the API responds with a 400/500? I can add that.

ematipico · 2023-11-02T17:01:05Z

@ematipico You mean if the API responds with a 400/500? I can add that.

Yeah exactly, just to get a sense of the expected behaviour. Cheers!

github-actions

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

matthewp · 2023-11-06T18:07:06Z

@martrapp I have updated the API per your suggestion to use formData as the navigation option.

@ematipico I've added a test which causes regular transitions for non-200 responses.

sarah11918

Looks great @matthewp ! Made some suggestions to the changeset below! Basically, I'm gonna need a bit more hypeeeee 🥳

.changeset/many-weeks-sort.md

sarah11918 · 2023-11-06T18:55:33Z

.changeset/many-weeks-sort.md

+
+Form support in ViewTransitions router
+
+The `<ViewTransitions />` router can now handle form submissions, allowing you to retain stateful UI. This feature is opt-in for semver reasons and can be enabled by adding the `handleForms` prop to the component like so:


Suggested change

The `<ViewTransitions />` router can now handle form submissions, allowing you to retain stateful UI. This feature is opt-in for semver reasons and can be enabled by adding the `handleForms` prop to the component like so:

The `<ViewTransitions />` router can now handle form submissions, allowing you to trigger in-page transitions from a form submission while keeping page state. This feature is opt-in and can be enabled by adding the `handleForms` prop to the routing component:

I'm gonna need you to sell forms to me harder than this, Matthew. 😅

Can you do better than "retain stateful UI"? Something that more walks through the (exciting!) process itself? People are always asking about forms, can we hype this in a more "give the people what they want" kind of way?

All right, I needed the pep-talk. Pushed with a bit more, trying to emphasize that this addition completes the circle of everything you need to stay in the client if that's what you want.

.changeset/many-weeks-sort.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

martrapp · 2023-11-07T15:35:17Z

I'm happy with the fact that we're adding properties that come later from the Navigation API as additional fields in NavigationNavigateOptions. And the new property in ViewTransitions is now also more descriptive. Everything looks good to me!

The only thing I was wondering is if the popstate handler needs to be customized as well. After all, it always passes an empty options object. But I think it's fine the way it is. An app would prevent users from returning to the form after the "post". And with a multi-page form, you would disable the "forward" after navigating back.

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

.changeset/many-weeks-sort.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

release day

* Support form submissions in the ViewTransitions router * Align with navigate API, add `formData` option * Change API to handleForms * Add a changeset * Add a test for non-200 responses * Update .changeset/many-weeks-sort.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/many-weeks-sort.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Add a little more on why this is exciting! * Update .changeset/many-weeks-sort.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Switch to e.g. --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

Support form submissions in the ViewTransitions router

b858cab

github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Oct 31, 2023

martrapp reviewed Oct 31, 2023

View reviewed changes

ematipico reviewed Nov 2, 2023

View reviewed changes

matthewp added 3 commits November 6, 2023 11:28

Align with navigate API, add formData option

05f0ed8

Change API to handleForms

0a38e67

Add a changeset

a8c3604

github-actions bot added the pr: docs A PR that includes documentation for review label Nov 6, 2023

Merge branch 'main' into vt-form

6e3b739

github-actions bot added the semver: minor Change triggers a `minor` release label Nov 6, 2023

github-actions bot previously requested changes Nov 6, 2023

View reviewed changes

Add a test for non-200 responses

e8b5d08

matthewp mentioned this pull request Nov 6, 2023

Document form support in the ViewTransitions router withastro/docs#5299

Merged

matthewp marked this pull request as ready for review November 6, 2023 18:03

sarah11918 reviewed Nov 6, 2023

View reviewed changes

Update .changeset/many-weeks-sort.md

ac4ac32

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

bluwy approved these changes Nov 7, 2023

View reviewed changes

martrapp approved these changes Nov 7, 2023

View reviewed changes

ematipico approved these changes Nov 7, 2023

View reviewed changes

matthewp and others added 2 commits November 7, 2023 12:51

Update .changeset/many-weeks-sort.md

225f3bd

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

Add a little more on why this is exciting!

2e6b1f1

sarah11918 reviewed Nov 8, 2023

View reviewed changes

.changeset/many-weeks-sort.md Outdated Show resolved Hide resolved

matthewp and others added 2 commits November 8, 2023 09:40

Update .changeset/many-weeks-sort.md

d5054bb

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

Switch to e.g.

fbb636d

Merge branch 'main' into vt-form

a2b67da

sarah11918 approved these changes Nov 8, 2023

View reviewed changes

matthewp merged commit fda3a02 into main Nov 8, 2023

matthewp deleted the vt-form branch November 8, 2023 17:45

astrobot-houston mentioned this pull request Nov 8, 2023

[ci] release #9021

Merged


		Form support in ViewTransitions router

		The `<ViewTransitions />` router can now handle form submissions, allowing you to retain stateful UI. This feature is opt-in for semver reasons and can be enabled by adding the `handleForms` prop to the component like so:

Uh oh!

Conversation

matthewp commented Oct 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Testing

Docs

Uh oh!

changeset-bot bot commented Oct 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

martrapp Oct 31, 2023

Choose a reason for hiding this comment

Uh oh!

ematipico Nov 2, 2023

Choose a reason for hiding this comment

Uh oh!

matthewp Nov 6, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

martrapp commented Oct 31, 2023

Uh oh!

ematipico left a comment

Choose a reason for hiding this comment

Uh oh!

matthewp commented Nov 2, 2023

Uh oh!

ematipico commented Nov 2, 2023

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

matthewp commented Nov 6, 2023

Uh oh!

sarah11918 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sarah11918 Nov 6, 2023

Choose a reason for hiding this comment

Uh oh!

matthewp Nov 7, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

martrapp commented Nov 7, 2023

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

matthewp commented Oct 31, 2023 •

edited

Loading

changeset-bot bot commented Oct 31, 2023 •

edited

Loading