Proper Usage of action and with Method in Solid Router

[sparklog]

When using the action in Solid Router, I encountered some confusion and found solutions regarding the use of the with method.

Problem Description

Function Passing and Invocation:

I believed that I could pass a function as a parameter into action, which would return a new function. According to the documentation, this new function can be directly invoked via the action attribute in the Form tag.
Since it's a function, I attempted to pass multiple parameters to retrieve the return value. The first parameter was a FormData object to pass the submitted form data into the action function. The subsequent parameters were meant for other logic within the function body.

Issue:

When invoking the action function via the action attribute in the Form tag, the action function could not properly accept parameters other than FormData. This is because the action function automatically receives the FormData parameter, making it unable to accept additional parameters. As a result, a compilation error occurs due to an insufficient number of arguments being passed.
Solution

Using the with Method:

After consulting the documentation, I discovered the existence of the action.with() method and mistakenly thought it could be used to pass parameters other than FormData.
In reality, you should first pass the parameters other than FormData via the with method to construct a new action. This new action only includes the FormData parameter, which can then be passed to the action attribute of the Form tag.
Steps:

For an asynchronous function with multiple parameters (like the parameter function mentioned above), first pass it as a parameter into action, obtaining an action function. At this point, the action function has multiple parameters (one of which is a FormData object).
To handle parameters other than FormData, ensure the FormData parameter is the first in the parameter list.
Then, use the .with() method to pass the remaining parameters in order. This will generate a new action function that only includes the FormData parameter, which can then be directly invoked via the action attribute in the Form tag.

Recommendations

In the documentation, it is recommended to clearly describe the following points:

When using the action function in a Form, the FormData object is automatically passed into the action, so when the action only includes FormData, no parameters need to be passed.
If the action includes parameters other than the FormData object, it cannot be directly invoked via the action attribute in the Form. This is because the action has more than one parameter, but the action attribute in the Form only automatically handles the first parameter of the action function.
If you want the action attribute in the Form to invoke an action function that includes parameters other than the FormData object, follow these three steps:
First, ensure the FormData object is the first parameter in the action function.
Second, use the .with() method to pass the other parameters in order. This will generate a new action function that only includes the FormData parameter.
Third, invoke this new action function via the action attribute in the Form tag.