I’m confused about server actions, what if I want to do something on the front end when a form is submitted before it’s passed to the server action (in the context of a server component)? Like frontend validation of the form, then call the server action afterwards on success. It seems like unlike the NextJS approach it just automatically knows that click handlers and form submissions are to be serialized and handled as a RPC on the backend always. So is there a way to trigger that behavior from web components? Would you pass a server action function as a prop to a web component or something and it would be translated into an RPC somehow? If so that’s pretty magical.
Nice stuff, looks very simple and cool in a lot of ways!
This was a great battle for us too. Let me reply slowly.
- Currently web-components support attachInternals which let's you redefine the input validations and any input internal.
- On the web-components you can attach a prop starting with the prefix on* which will be an event prop and can trigger an action outside the web-component, you can also connect a server action here.
- The form onSubmit works as usual, so you could submit the form using onSumbit and handle it however you like.
- We are still looking for new approaches to sending forms using web-components on the easiest posible way :) Brisa does not do any magic on web component form, we are providing the enablers (at least for now, good ideas are welcome).
While dynamic forms are possible to achieve, the easier way of handling a form on Brisa is a native form generated on the server. Join our discord server for more questions (https://discord.com/invite/MsE9RN3FU4).
The fun thing is that the web components' events can also be captured on the server as Server Action. This way, inside the Web Component, is client code that can validate and call onAfterValidateForm, but then when you consume the WC with <web-component onAfterValidateForm={/* */} /> from your page, it is a server action and finish processing. The mental model is simpler, if it's in a server component, it's a server action, if it's inside a web component, it's a normal browser event. No magic.
Nice stuff, looks very simple and cool in a lot of ways!