Forward use:action to components

[theetrain]

Let's add a way to pass actions to components, especially Form and FluidForm.

Rejected Proposal 1: `use` prop

This is flawed since you cannot specify <form action={something} />

Proposed prop name is use. Example component:

<script>
  export let use
</script>

<div use:use>
  Hello
</div>

Example usage:

<script>
  import Component from './Component2.svelte'
	
  const action = () => console.log('action')
</script>

<Component use={action} />

Example: https://svelte.dev/repl/e24d07853ebe4773b1ab818ad60536a2?version=3.55.0

Proposal 2: formAttributes

Specify a formAttributes prop. If present, will render an outer <form> element.

• Typed as HTMLFormAttributes | { useAction: () => {} }
• If defined, renders a <form> element, wrapping the target component
• If useAction is defined, it will be desconstructed from formAttributes and applied to the form element with use:useAction
• For components with multiple interaction points, a more descriptive name can be used. For example, with Pagination we can have itemsPerPageFormAttributes for the 'items per page' dropdown (though an 'update' button may need to be rendered alongside <select> elements)
• Supplementary documentation should be added explaining why these features exist and how to best use them

<Button formAttributes={{ action: '?/update', useAction: enhance }}>Update</Button>

Demo: https://svelte.dev/repl/a1f1eec629f141a9a3373dafa075dd8a?version=3.55.0

Related #1622

[theetrain]

Added proposal 2 above with a demo based on #1628 (comment)

Check out the demo; feedback is welcome.

[brunnerh]

If defined, renders a <form> element, wrapping the target component

That does not seem right. If you want a form you can just add one; other components should not be concerned with this.
If someone actually needs the feature of single-button forms a lot, that can just be implemented in user land.

If a property for attributes is added, that should in my opinion refer to the element at hand and could just be called attributes.

So if you want a button and a form with a Svelte action:

<Form action="?/kit-action" attributes={ useAction: enhance }>
    <Button type="submit">Submit</Button>
</Form>

[theetrain]

@brunnerh agreed; I reached a similar conclusion (not fully defined, though) in my <Button> proposal in #1622. Single-element components like <Button> can have the user wrap the <form> themselves, or spread attributes such as formaction if they like.

For complex components with multiple buttons, such as the sortable DataTable, the user should be able to provide an href to pass in the same route with searchParams, or formaction and related attributes to each individual sortable button; allowing a user to sort a table without JS or hydration.