form action questions regarding expected behavior of examples

[aaronksaunders]

The example assumes that all files are in the root directory... is there a working example where all files are not in the root directory?

Specifically, if the files are not in the root directory, what does the formaction value look like?

// pages/team/add-player

<template>
  <div style="border: solid grey .1em; margin 16px; padding : 16px">
    <p>ADD PLAYER</p>
    <form method="POST">
      <div style="margin: 8px">
        <label>
          Player Name
          <input type="text" placeholder="player name" name="name" />
        </label>
      </div>
      <button style="margin: 8px" formaction="add-player?default">SAVE</button>
    </form>
    <div style="margin-top: 16px">
      <NuxtLink to="/team">BACK</NuxtLink>
    </div>
  </div>
</template>

• Do I really have to specify the form action like this add-player?default
• I am not sure if I need additional path information because I cannot find an example and the code above never calls my form action

my form action

// server/actions/add-player.ts
export default defineFormActions({
  default: async (event) => {
    console.log("Add Player called !");
    const formData = await readFormData(event);
    const name = formData.get("name") as string;

    return actionResponse(event, { player: { name } }, { redirect : "/team/add-player"});
  },
});

• I want to redirect back to the same page to provide confirmation the player was saved, is there a way to do that automatically or do I need to specify the full route

When I copy the code directly from the documentation and click the register button, I don't get redirected back to my page, I just get the output from the action

When I click the login button, I get this in the log

[h3] Implicit event handler conversion is deprecated. Use `eventHandler()` or `fromNodeMiddleware()` to define event handlers.  
     Handler: (event) => {
    const action = Object.keys(getQuery$1(event))[0];
    const handler = action ? actions[action] : Object.values(actions)[0];
    return handler(event);
  }
Login called !

I am really trying to see how to integrate this into a Nuxt app for potential use in a client project, yet I am struggling with just getting the basics going so hopefully these are just me not understanding the documentation.

[Hebilicious]

Hi @aaronksaunders , do you have a repo or a stackblitz with a reproduction ?
I suspect that in your case, you should put your action into a team directory (it has to mirror your pages)

Regarding the formaction attribute, its behaviour will mirror the native html behaviour. In your example you do not need it as you only have one action.

Regarding the README this is working as intended.

  register: (event) => {
    // ...
    return actionResponse(event, { register: true })
  }

This returns a payload that contains { register: true }

Regarding example, you can find them in playgrounds. The advanced playground should cover all usages of this module.

[aaronksaunders]

https://github.com/aaronksaunders/nuxt-starter-form-actions-module

[aaronksaunders]

I was worried about the playground because when reading through the discussion threads someone indicated that errors were not reproducible in the playground.

Honestly for something new like this, reading code in the playground with minimal documentation isn't for me, I will wait it out for additional documentation... For example, my nested loaders seem to be working without a matching directory so there was no reason for me to believe that I needed on with the formActions.

I am not taking anything away from what you have done here, it is pretty awesome, I am just talking about my time available to read through code to try and make sense of things versus reading through documentation and curated documented examples

[Hebilicious]

Loaders will work anywhere because you are explicitly calling them with their names.
For me it's the opposite, I'd rather have working examples...
That being said, this type of discussion is helpful to improve the docs, so thank you for taking the time!

I will document the following :

• Action name matching
• formaction attribute
• redirects
• useLoader matching behavior

Is there anything else that isn't clear or isn't working for you atm ? Did you encounter any errors?

[aaronksaunders]

I agree with you about working examples are preferred , I think it is just early in the process and things are moving fast and there appears to be a lot of assumptions made about what knowledge people are coming to the table with, just my opinion. It looks like everything is piled in the playground, I never have used playground I am more comfortable with multiple specific examples that build on concepts… everyone learns differently 🙂 I was evaluating it for use in upcoming project and trying to write a blog post / video and post on my YouTube channel. I think I just read the basics and tried to jump to something a bit more complex. I had to stop work on it, I spent about 6 hours on Sunday and 4 hours today. I believe I figured out nested routes and loaders… but form action still are not working for or I don’t understand the concept how it is implemented here. I am coming from the perspective of understanding how they work in Remix and applying that to how I look at the examples and documentation provided

…

On Mon, Aug 28, 2023 at 7:20 PM Heb ***@***.***> wrote: Loaders will work anywhere because you are explicitly calling them with their names. For me it's the opposite, I'd rather have working examples... That being said, this type of discussion is helpful to improve the docs, so thank you for taking the time! Is there anything else that isn't clear or isn't working for you atm ? Did you encounter any errors? — Reply to this email directly, view it on GitHub <#46 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEAFGN6DX2V4EEWFI55K73XXURSBANCNFSM6AAAAAA4BUK7YY> . You are receiving this because you were mentioned.Message ID: ***@***.*** .com>

[Hebilicious]

That's a lot of time spent 🙈
I'm happy to assist you further if you can be more specific.
I'm really trying to improve the library to make it easier to use and understand, so that would be very helpful...

What exactly is not working ?
What complex things did you try ?

About the implementation, you can think of a form action as a route handler on the same route that your page is in.
If you go to /nested/login and submit an HTML form, the browser will send a POST request to /nested/login.
With Nuxt, you can catch it manually by creating a route handler like this : /server/routes/nested/login.ts (which exports an event handler).

This module allows you to instead create a server/actions/nested/login.ts and provide you with an helper to handle the actions (defineFormAction).
Your form actions can be progressively enhanced with the directive, which will prevent the form submit, and use a fetch request to submit the form and handle whatever you are returning accordingly.

All of these things can be seen in the network tab of your browser devtools, and the nuxt devtools can help you with even more insight.

I'm happy to jump on a call if that can help you for your YouTube video :)
Hopefully with your insight, we can significantly improve the docs.

[Hebilicious]

@aaronksaunders
Regarding your https://github.com/aaronksaunders/nuxt-starter-zbhadu-sendRedirect-issue I'll copy your notes here

NOTES
DOES NOT WORK IN STACK BLITZ
will have to recheck all of the issue below because they happened in stackblitz. When running in stackblitz, none of the formData was getting passed to the server

Install the form-actions module from NPM.
when you click the copy button it copies everything  You can use your package manager to enforce these versions :not clear where to paste, creates error,s and assumes the user knows how to resolve the issue

Add logic for logging-in and registering users.
This section is not very helpful in getting started, you have imports, validation and other stuff mixed in and I haven't even gotten it running yet

Create a login page. The name must be the same as your action.
this should also indicate the path must match the path of the page- you introduce passing the query param for register without any explanation to what is going on along with the action that I cannot even use because of the dependencies
ERROR when trying to run application following provided instructions
[1:51:09 PM] [h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers.       Handler: (event) => {    const action = Object.keys(\_file_home_projects_nuxt_starter_zbhadu_node_modules_h3_dist_index_mjs.getQuery(event))[0];    const handler = action ? actions[action] : Object.values(actions)[0];    return handler(event);  }[nuxt] [request error] [unhandled] [500] handler is not a function   1:51:09 PM  at eval (./.nuxt/dev/index.mjs:957:12)    at eval (./node_modules/h3/dist/index.mjs:1610:47)    at async Object.eval [as handler] (./node_modules/h3/dist/index.mjs:1761:19)    at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1972:7) Vite server hmr 6 files in 839.465ms                              1:51:10 PM[nuxt] [request error] [unhandled] [500] handler is not a function   1:51:36 PM  at eval (./.nuxt/dev/index.mjs:957:12)    at eval (./node_modules/h3/dist/index.mjs:1608:14)    at Object.eval [as handler] (./node_modules/h3/dist/index.mjs:1937:28)    at Object.eval [as handler] (./node_modules/h3/dist/index.mjs:1761:31)    at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1972:7)
WARNING when parameter name matches action name
<button formaction="login?login">Log in</button>
Version Numbers Don't Match
When you install the module, you get different version numbers than what is in the playground
The nuxt version has changed from what you have in the documentation

Stackblitz issue

I haven't tried running this module in stackblitz, but it's worth investigating and opening an issue.
#55

Copy button

Noted, I will be creating a dedicated website for the docs to make it easier to copy and paste commands.
#52

Package manager

I think it might be worth adding a link to each package manager respective documentation for the overrides and resolutions fields.
#47

Add logic for logging-in and registering users.

How can this be made clearer ? This is not meant to be copy pasted, it is meant to help you understand that this is a regular file and you can do whatever you want inside.

Name of the action

formaction attribute: This is standard html behaviour and it will override the url of your form submission.
While there is a code example in the playground, I agree that another explanation paragraph is needed to make the matching behaviour more clear.
#47

Dependencies

What can't you use because of the dependencies ?

Warning

There's the eventHandler conversion warning that unfortunately we can't get rid of easily. #53

Error handler

We could improve the error message here as it's a little cryptic. It means that you are trying to call an action that doesn't have an handler (your 2 registered handlers are default and _register, login isn't registered)
#54

Playground dependencies

That is intended, if you want the same as the playground, you must use the same package.json AND lockfile.

Nuxt version

This is fine, the documentation says that the last version I personally tested the module with was 3.6.5. In most cases, it should be fine to use a more recent version as there shouldn't be any breaking change.

[aaronksaunders]

How can this be made clearer ? This is not meant to be copied and pasted, it is meant to help you understand that this is a regular file and you can do whatever you want inside.

You want people to try this out, but there is no simple working example anywhere? If you are not going to provide a simple way to try the module out why should anyone use it? Finally, you request a sample project to reproduce an issue but don't provide a baseline for people to start from. This is not a negative criticism, it is just an observation and feedback

[Hebilicious]

The working examples are in the playgrounds directory, this is a convention that is widely accepted in Nuxt.

Additionally, I'm going to add a playgrounds/simple and reference them in the docs.

This is my generic issue template for all my projects so that's why there's no template to start from. A starting repo for reproductions is a good idea though #56

[aaronksaunders]

Additionally, I'm going to add a playgrounds/simple and reference them in the docs.
think this will be a good idea

[Hebilicious]

@aaronksaunders Thanks to your feedback it was very helpful. I've made several changes, but the main one is that there's now a dedicated website for the new docs that I rewrote entirely.

• https://form-actions-nuxt.pages.dev/

The playgrounds example are now also available in a separated repo with 1 example/branch, which should make it easier for people to get started with the module

https://github.com/Hebilicious/form-actions-nuxt-examples