Remote Functions: Return form response when calling `submit` in `enhance`

[jjones315]

Describe the problem

When using the form function with submit getting the response from the form submission has to be accessed with formFunction.result within the enhance function.

Describe the proposed solution

Return the response from form when calling submit in enhance

Alternatives considered

Continue using the result property on the function definition.

Importance

nice to have

Additional Information

No response

[dummdidumm]

What's the use case? We did this on purpose to discourage enhancements that work with JS only.

[jjones315]

we have several time where we would prefer to use a toast or similar to show results (ignore the fact this example doesn't use the response it was the first one i converted ).

<Button
    class="uppercase"
    color="secondary"
    fullWidth
    size="lg"
    variant="light"
    {...forgotPassword.buttonProps.enhance(async ({ submit }) => {
        await submit();
        modals.toast.success(
            "If an account is found with the user name provided you will receive an email with reset instructions.",
            {
                duration: 5000,
            }
        );
    })}
>
    Forgot Password?
</Button>

Running without js is just not a use case for this app, Its core features require js.

I respect the push towards graceful degradation, but in my opinion making form more difficult to use its just going to push people to using command by default.

Thanks! Great work on this :)

[cachesdev]

I agree. making the API worse due to graceful degradation (when most webapps are using JS anyways) feels like a strange decision to me.

[craig-jennings]

If JS is a known requirement for your application, why not just use a command?

[jjones315]

Command doesn’t have result and for file uploads I don’t want to overhead/additonal size of converting large files to base64.

If they were 1:1 I would reach for command but there are still use cases for form.

Edit: also redirecting, if I need to redirect after submission I’ll use form.

[cdcarson]

I tend to agree with @jjones315 that result should be returned from submit rather than relying on the imported function's result

What's the use case? We did this on purpose to discourage enhancements that work with JS only

If enhance is always JS (true, no?) then "discouraging enhancements that work with JS only" is a bit of an odd goal.

A use case may look something like this:

• The enhance function adds a flag to the form data to indicate that we are using JS on the client.
• The remote function uses this flag to determine how to respond. Say, if the form is not enhanced, it throws a redirect, otherwise it returns data like {message: "Welcome Jane!", location: "/dashboard"}
• The enhance function displays the message and redirects with goto. Could this be done without JS? Yes, but maybe not as slickly.

Other use cases:

• handling form errors
• many instances of the same form on one page

Especially in the latter case (many instances) relying on myRemoteFunction.result seems troublesome/code-smelly. By contrast result = await submit() is clearly scoped to the instance of the form's enhance function.

[Rich-Harris]

In #15530 we return true if the submission succeeded and false if it was invalid, which would preclude returning data.

Which I think is the right design. But before we commit to it: can someone please explain why returning the result is necessary when .result already exists? It adds a tiny amount of friction, but doesn't prevent you from doing anything, and doesn't signal through API design that ignoring progressive enhancement is encouraged.

[cdcarson]

can someone please explain why returning the result is necessary

Let's say myForm returns something like:

{message: `${name} deleted!`}

Supposing I wanted to display that exact message in a toast, how would I do it without relying on something (e.g. a query) outside the scope of the function I pass to myForm.enhance? In particular, if I had multiple instances of the form on the page?

[Rich-Harris]

Why can't you do this?

<script>
  import { a, b } from './forms.remote';

  const instance = b.for('whatever');
</script>

<form {...a.enhance(async ({ submit }) => {
  if (await submit()) {
    showToast(a.result);
  }
}}>...</form>

<form {...instance.enhance(async ({ submit }) => {
  if (await submit()) {
    showToast(instance.result);
  }
}}>...</form>

[Rich-Harris]

Ah, do you mean you want to be able to do this?

<form {...whatever.enhance(shared)}>...</form>

Perhaps we could pass the instance (bikesheddable) alongside submit. That way you don't just get the submission result, you also get issues etc

[cdcarson]

Why not just return the result of the remote function to the enhance function's submit without the added ceremony of instance? So, something like this:

// within form.for(item.id).enhance...
const result = await submit();
// result is already scoped within the instance created by  form.for(item.id)

[Rich-Harris]

Because #14082 (comment)

[cdcarson]

Because #14082 (comment)

If returning a boolean is necessary then passing instance alongside submit would be fine. Thanks!