use:enhance shadows data

[Rich-Harris]

Describe the problem

I want to access the data prop in my use:enhance callback, but I also want to reference the FormData object that was passed in. Right now I have to do ({ data: formData }) => {...} or similar:

<script>
  import { enhance } from '$app/forms';

  export let data;
</script>

<h1>total: {data.total}</h1>

<form
  use:enhance={({ data: formData }) => {
    data.total += +formData.get('n');
  }}
  method="POST"
>
  <input name="n" type="number" />
  <button>add {n}</button>
</form>

Describe the proposed solution

It should probably just be formData in the first place. We can do this non-breakingly (but maybe deprecate data for removal in version 2?)

Alternatives considered

formdata? fd? stuff?

Importance

nice to have

Additional Information

No response

[Rich-Harris]

I suppose form also shadows form, though it's less likely that you'd reference the form prop inside the callback. Hmm

[ghostdevv]

+1 on formData

[dummdidumm]

I had to do the same renaming in some other example app before. Which makes me wonder if this is just a good renaming opportunity or if it's a symptom of a bigger problem which is that we want to update data without reloading it, and if there's some opportunity here for enhance to do this somewhat automatically (opt-in).

[gtm-nayan]

@dummdidumm That one, I think you're referring to result.data, whereas Rich is talking about the FormData object that the SubmitFunction receives before the request is sent.

Also, it seems the FormData is passed in again to the callback that runs after the submit, but it doesn't appear in the types. Should that be removed or renamed?

kit/packages/kit/src/runtime/app/forms.js

Line 113 in 6e2efcf

data,

And if it is renamed, would it be a breaking change to only keep formData there since it wasn't documented before?