Make the second parameter of the formAction$ optional

[devcaeg]

The formAction$ function forces you to pass the second parameter, even if it is not used. In my case, because of this restriction, I must pass $(() => ({})) as the second parameter.

export const useFormAction = formAction$<LoginForm>(
  async (values) => {
    ...
  },
  $(() => ({})),
);

I think this parameter should be optional.

[fabian-hiller]

I'm not sure we should do this. It could lead to someone accidentally forgetting the argument, which could lead to security problems since it is used to validate the data of the form. This would allow an attacker to send any data to your server.

[devcaeg]

The problem is that if a person does not want to validate it, he is forced to put a "$" function that returns an empty object.

I know it's not a problem per se, it's simply a matter of laziness 😅

[fabian-hiller]

Don't you use a schema to make your form type safe?

[devcaeg]

I use a backend framework (my own) for end-to-end type safety. With that I am covered from errors thanks to TypeScript, and the server itself has its schemas on each request for data purging. For this reason I don't do those validations in the frontend (I know that maybe I should do them to avoid server requests), but this project is not a monorepo and I don't want to repeat the schemas in frontend and backend.

[devcaeg]

I actually have another problem with this haha.

type LoginForm = {
  email: string;
  password: string;
};

export const useFormAction = formAction$<LoginForm>(
  async (values) => {
    const _client = client<typeof loginModule>({
      url: 'http://localhost:3000',
    });

    const request = await _client.fetch('/auth/login', {
      method: 'POST',
      body: values,
    });

    if (!request.success) {
      throw new FormError<LoginForm>(request.response);
    }

    return {
      status: 'success',
      message: 'You are now logged in',
      data: request.response,
    };
  },
  $(() => ({})),
);

As you can see, I am not declaring the type TResponseData, so when in the return I add data: request.response the formAction$ function gives error because it expects data to be of type undefiend.

If TResponseData is not declared, it should infer the types returned in data so avoid errors and not lose type safety.

[fabian-hiller]

Thanks for the feedback. In general, I am very focused on Valibot at the moment. Therefore, I do not plan to implement your feedback right away, but I do plan to rewrite Modular Forms later this year or next year.