Add transformValues option to performMutation and formAction

[danielweinmann]

Check out the new "Transform values" example for understanding what the functionality does.

The primary use case is to pass URL input to mutations without having to add a hidden field to the form. Let's say we're at /users/$userId/edit. Before transformValues, we'd have to add the userId field to the form schema, get the value from the params, pass it to the Form's values prop, and mark the userId field as hidden.

Now we can leave the userId out of the form schema altogether, add it only to the mutation schema, and pass transformValues: (values) => ({ ...params, ...values }) to our formAction or performMutation.

[netlify]

✅ Deploy Preview for remix-forms ready!

Name	Link
🔨 Latest commit	fd42209
🔍 Latest deploy log	https://app.netlify.com/sites/remix-forms/deploys/63864769ba7298000812de75
😎 Deploy Preview	https://deploy-preview-110--remix-forms.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[gustavoguichard]

I like it! Then I can use a pattern I'm used to - which I call: "let zod handle the params"

export async function action({ request, params }: ActionArgs) {
  return formAction({
    request,
    mutation,
    schema,
    additionalInput: params,
  })
}

That said I'm not sure about the naming... it feels to me we could come up with some better name but I'm out of ideas right now 😅

[gustavoguichard]

Shouldn't we use ActionArgs here for better type inference?

[danielweinmann]

Only if we want to promote Remix + TS best practices on the docs, which I think might be valid. But we don't need it with Remix Forms, because Remix Forms is the one that calls useActionData and makes sure the typing is correct. We'll almost never call useActionData<typeof action> when using Remix Forms.

For now, I've been preferring the shorter code that arrow functions give us. I already feel there is a lot of code to read in the examples, so I take every opportunity I have to have fewer lines of code :)

But I'm very open to changing this if you really care about promoting better Remix TS practices on the docs.

[gustavoguichard]

Good point, ship it

[danielweinmann]

I like it! Then I can use a pattern I'm used to - which I call: "let zod handle the params"

export async function action({ request, params }: ActionArgs) {
  return formAction({
    request,
    mutation,
    schema,
    additionalInput: params,
  })
}

That said I'm not sure about the naming... it feels to me we could come up with some better name but I'm out of ideas right now 😅

@diogob suggested a broader API with a transformValues function instead. I liked his suggestion and implemented it. What do you think, @gustavoguichard?

[gustavoguichard]

Cool! It reminds me of Zod preprocess, another possible name but I like the idea, opens up for more possibilities

[diogob]

LGTM