Verify Code in Build Forms recipe about docs HOT 3 CLOSED

Hello! I tested the code in the React, Svelte, and Vue code examples. I used the node SSR adapter, and ran using pnpm astro dev and pnpm astro build + node dist/server/entry.mjs.

Comment 1: Tested by removing the e.preventDefault() and testing behaviour in presence or absence.

• React code reached e.preventDefault()
• Same with Svelte
• Same with Vue
  As far as I can see, this is working as is intended. A possible reason for misinterpretation is that a client directive was not used. This would make the form act like a normal form anyways, as though the default was not prevented!

Comment 2: Same as above, but with a client:load directive.

• All of the components definitely need a client directive to function as is intended in the recipe!

I have not tested Solid or Preact. I can, in the future, if no one else has!

Hope this helps!

P.S. I will add that it is slightly confusing to have the code give a snippet, then ask you to modify it later like:

return A

then:

Do B
return A

Just a personal problem I had, I am not sure if others experience the same thing!

from docs.

@VoxelMC Would you be interested in seeing if you can improve this, maybe by reordering the sequence of the steps, and maybe adding showing the components being used with client directives?

from docs.

@VoxelMC Would you be interested in seeing if you can improve this, maybe by reordering the sequence of the steps, and maybe adding showing the components being used with client directives?

Yes, definitely! I'll get on that :)

from docs.