Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add useMutation API #24

Merged
merged 10 commits into from
Nov 4, 2024
Merged

Add useMutation API #24

merged 10 commits into from
Nov 4, 2024

Conversation

x0k
Copy link
Owner

@x0k x0k commented Nov 2, 2024

Example

<script lang="ts">
  import { useForm, FormContent } from '@sjsf/form'
  import { Status, useAction, abortPrevious } from '@sjsf/form/use-action.svelte'

  const action = useAction({
    do: (signal, data) => fetch('/url', { signal, method: 'POST', body: JSON.stringify(data) }).then(r => r.json()),
    combinator: abortPrevious,
    onSuccess: console.log,
    onFailure(failure) {
      if (failure.reason === 'error') {
        console.error(failure.error)
      } else {
        console.warn(failure.reason)
      }
    },
  })

  const form = useForm({
    ...,
    onSubmit: action.run
  })
</script>

<form use:form.enhance>
	<FormContent bind:value={form.formValue} />
	<button type="submit"> Submit </button>
	{#if action.isProcessed}
		<button type="button" onclick={action.abort}> Cancel </button>
	{/if}
	{#if action.isDelayed}
		Processed...
	{/if}
	{#if action.state.status === Status.Failed}
		<div>
			<!-- "error" | "abort" | "timeout" -->
			{action.state.reason}
			{#if action.state.reason === 'error'}
				: {action.state.error}
			{/if}
		</div>
	{/if}
</form>

Questionable points

  • Svelte and SvelteKit already have the notion of action. Should we use the more familiar useMutation?
  • Should the result of a successful execution be saved to the action state? Normally useMutation does this, but we don't.

Copy link

changeset-bot bot commented Nov 2, 2024

🦋 Changeset detected

Latest commit: 52ca9bf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
docs Minor
@sjsf/form Minor
@sjsf/ajv8-validator Minor
@sjsf/daisyui-theme Minor
@sjsf/flowbite-icons Minor
@sjsf/flowbite-theme Minor
@sjsf/lucide-icons Minor
@sjsf/radix-icons Minor
@sjsf/shadcn-theme Minor
@sjsf/skeleton-theme Minor
testing Patch
playground Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@x0k x0k force-pushed the async-action branch 2 times, most recently from 791045c to a89423a Compare November 2, 2024 17:31
@x0k x0k marked this pull request as ready for review November 4, 2024 00:00
@x0k x0k changed the title Add useAction API Add useMutation API Nov 4, 2024
@x0k
Copy link
Owner Author

x0k commented Nov 4, 2024

  • Renamed to useMutation
  • I don't see the need to save the result of a successful execution to the mutation state

@x0k x0k merged commit ec499b7 into main Nov 4, 2024
@x0k x0k deleted the async-action branch November 4, 2024 09:10
@github-actions github-actions bot mentioned this pull request Nov 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant