New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Actions #912
base: main
Are you sure you want to change the base?
Actions #912
Conversation
This reverts commit 62fd2bb.
Does this require View Transitions to be enabled like for form data processing? |
I want every bit of this for StudioCMS.... |
@rishi-raj-jain Not at all! We are targeting client components to show how JS state management could work. But forms are callable from an |
@bholmesdev Will this be available for SSG at all, or is it just Hybrid/SSR? |
@jdtjenkins Ah, good thing to note. Since actions allow you define backend handlers, you'll need a server adapter with |
My turn to bikeshed you. |
@ascorbic That's fair! I agree that's a better name, happy to use it. |
@ascorbic Thinking it over, went with |
Hey @bholmesdev, it's me back again to make sweeping criticisms about one of your big proposals again 😁 (I'm the one who got you to vendor Zod back when you were working on content collections). Also, sorry for being so late to submit on this - I only just found out about this proposal from the 4.8 release! Reading through the proposal, I noticed almost every example uses the Here's the single example of how to implement actions without JS: import { actions, getActionProps } from 'astro:actions';
export function Comment({ postId }: { postId: string }) {
return (
<form method="POST" onSubmit={...}>
<input {...getActionProps(actions.comment)} />
{/* result:
<input
type="hidden"
name="_astroAction"
value="/_actions/comment" />
*/}
</form>
)
} It seems like a bit of an afterthought, to be honest, which doesn't really fit with Astro's whole 'Ship less JS' thing, and I hope we can all agree that My understanding is that under the hood, Astro sees the E.g. import { actions, getActionURL } from 'astro:actions';
export function Comment({ postId }: { postId: string }) {
return (
<form method="POST" action={getActionURL(actions.comment)} onSubmit={...}>
{/* Regular form goes here */}
</form>
)
} Some people wanted something similar to this that involved directly importing actions with import attributes, but it seems like that wasn't viable. This seems like a nice middle ground, where you still (kinda) pass the handler to the Also, the rest of the proposal looks great. I can't wait to have a play with some Actions! |
@zadeviggers Form support was not an afterthought, it was the biggest part of the design and why the feature didn't ship sooner. An API like the one you're suggesting was considered but it's incomplete. What happens on the server-side after an action is executed? How do you redirect to a different page? How do you handle validation errors? @bholmesdev went through a few different designs to try and make all of those things possible but it came at the cost of making the action code much more complex. The That said, this RFC is still open so we can talk about other approaches. |
Thanks for the overview @matthewp. Actually, I would not consider the This isn't perfect though. The main reason for a hidden input over this was challenges with React 19. When using actions in React, they own the <form action={actions.like}> But now, how can we add a fallback? React stubs |
@bholmesdev I'm not sure I understand. If the |
@matthewp Well I should clarify: the action would NOT be a URL. It would be a query param to re-request the current page. <form action={actions.like.url}>
<!--output: ?_actionName=like--> This does the same work as passing a hidden |
Oh ok, I understand now. I still like So I think this trades away flexibility for a subjective aesthetic gain only. |
@matthewp To address your flexibility concern, we can add an optional parameter to the function to specify a different path for it to submit to. I don't think this will come up super often, though, since people will probably just do all their handling in the action, and then rewrite to the page they want to render. @bholmesdev I really like the |
I think I agree with both Zade and Matthew here. I also like the The big advantage I can see over an extra hidden |
Summary
Astro actions make it easy to define and call backend functions with type-safety.
Links