add on settled hook

Author: iatrophobic

README.md

@@ -277,6 +277,24 @@ Runs if the form is submitted and returns sucessfully. You will have access to t
 
 ---
 
+#### `options.onSettled()`
+
+Runs after the form submission finishes, whether it succeeds or fails. Receives the returned value from `command` on success, or `null` on failure. NOTE: This runs AFTER any invalidation you may have called.
+
+```html
+<script lang="ts">
+	const cmd = new CommandForm(schema, {
+		onSettled: (result) => {
+			toast.dismiss(); // stop any loading toasts regardless of outcome
+			console.log('Finished submitting', result);
+		}
+		// ... other options
+	});
+</script>
+```
+
+---
+
 #### `options.onError()`
 
 Runs if the command fails and an error is returned.

src/lib/command-form/command-form.svelte.ts

@@ -159,6 +159,7 @@ export class CommandForm<Schema extends StandardSchemaV1, TOut> {
     } finally {
       this._submitting = false;
       if (this.options.reset === 'always') this.reset();
+      this.options.onSettled?.(this._result || null)
     }
   };
 

src/lib/types/command-form.types.ts

@@ -14,6 +14,7 @@ type CommandFormOptions<TIn, TOut> = {
   preprocess?: (data: TIn) => Promise<TIn> | TIn;
   onSubmit?: (data: TIn) => Promise<void> | void;
   onSuccess?: (result: Awaited<TOut>) => Promise<void> | void;
+  onSettled?: (result: Awaited<TOut> | null) => Promise<void> | void;
   onError?: (err: unknown) => Promise<void> | void;
 };
 

src/routes/+page.server.ts

@@ -0,0 +1,10 @@
+export const load = async ({ depends }) => {
+  depends('invalidate:test');
+  let total = 1
+  await new Promise((r) => setTimeout(r, 500));
+  const options = Array.from({ length: Math.floor(Math.random() * 15) + total }, (_, i) => ({ id: i.toString(), value: `Option ${i + 1}` }))
+  total++
+  return {
+    options
+  }
+}

src/routes/+page.svelte

@@ -2,22 +2,31 @@
 	import { CommandForm } from '$lib/command-form/command-form.svelte.js';
 	import { test } from './test.remote.ts';
 	import { schema, TestEnum } from './test.schema.ts';
+	let { data } = $props();
+
+	let options = $derived(data.options);
 
 	const f = new CommandForm(schema, {
 		command: test,
+		initial: () => {
+			return {
+				name: 'Cheese',
+				options: options
+			};
+		},
 		onSubmit: async (data) => {
 			console.log(data);
 		},
 		onSuccess: async (res) => {
 			console.log('success');
-			//	console.log(res.success);
+		},
+		onSettled: async (res) => {
+			f.reset();
 		},
 		onError: async (err) => {
 			console.error('error', err);
 		},
-		preprocess: (data) => {
-			return { ...data, name: 'preprocessed' };
-		}
+		invalidate: 'invalidate:test'
 	});
 </script>
 
@@ -28,3 +37,7 @@
 {#if f.errors.name?.message}
 	<p style="color: red">{f.errors.name.message}</p>
 {/if}
+
+{#each f.form.options as option (option.id)}
+	{option.value}
+{/each}

src/routes/test.remote.ts

@@ -1,9 +1,7 @@
 import { command } from "$app/server";
 import { schema } from "./test.schema.ts";
-import { SchemaValidationError } from "$lib/index.ts";
-
 
 export const test = command(schema, async (data) => {
   console.log(data)
-  throw new SchemaValidationError([{ path: ['name'], message: 'Name is invalid server error!!' }])
+  return { success: true };
 })

src/routes/test.schema.ts

@@ -4,6 +4,10 @@ export enum TestEnum {
 }
 const schema = z.object({
   name: z.string().min(2, "Name is required"),
+  options: z.array(z.object({
+    id: z.string(),
+    value: z.string()
+  })),
   // age: z.number().min(0, "Age must be a positive number"),
   // address: z.object({
   //   street: z.string().min(5, "Street is required"),