update preprocess to be ephemeral

Author: agillispie

README.md

@@ -222,11 +222,32 @@ Allows you to select if the form should be reset. By default, the form never res
 
 Allows you to preprocess any data you have set when the form is submitted. This will run prior to any parsing on the client. For example if you would need to convert an input of type 'date' to an ISO string on the client before submitting. If this is a promise, it will be awaited before continuing.
 
+> Preprocessed data creates a `$state.snapshot()` of your form data. Thus it is ephemeral, that way if the command fails, your form data is not already processed.
+
 ```html
 <script lang="ts">
 	const cmd = new CommandForm(schema, {
 		preprocess: (data) => {
-			cmd.set({ someDate: new Date(data.someDate).toISOString() });
+			return { ...data, name: data.name.trim() };
+		}
+		// ... other options
+	});
+</script>
+
+<input type="date" bind:value="{cmd.form.someDate}" />
+```
+
+---
+
+#### `options.onSuccess()`
+
+Runs when the form is submitted. \*The data available inside of this function is the result of your preprocess function if you have one. This can also be a promise.
+
+```html
+<script lang="ts">
+	const cmd = new CommandForm(schema, {
+		onSubmit: (data) => {
+			toast.loading('Submitting data...please wait!');
 		}
 		// ... other options
 	});

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

@@ -54,8 +54,11 @@ export class CommandForm<Schema extends StandardSchemaV1, TOut> {
     }
   }
 
-  private async parseForm(): Promise<SchemaData<Schema>> {
-    return standardValidate(this.schema, this.form as StandardSchemaV1.InferInput<Schema>);
+  private async parseForm(
+    data?: StandardSchemaV1.InferInput<Schema>
+  ): Promise<SchemaData<Schema>> {
+    const target = data ?? this.form;
+    return standardValidate(this.schema, target);
   }
 
   // set path to keyof schema or string
@@ -97,14 +100,22 @@ export class CommandForm<Schema extends StandardSchemaV1, TOut> {
     this._result = null;
 
     try {
-      await this.options.preprocess?.(this.form)
-      const parsed = await this.parseForm();
+
+      const workingCopy = $state.snapshot(this.form)
+
+      const preprocessed =
+        (await this.options.preprocess?.(workingCopy)) ?? workingCopy;
+
+      const parsed = await this.parseForm(preprocessed);
+
       await this.options.onSubmit?.(parsed);
 
       const res = await this.options.command(parsed);
+
       this._result = res;
 
       this.issues = null;
+
       await this.options.onSuccess?.(res);
 
       if (this.options.invalidate) {

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

@@ -11,7 +11,7 @@ type CommandFormOptions<TIn, TOut> = {
   invalidate?: string | string[] | 'all';
   command: RemoteCommand<TIn, TOut>;
   reset?: 'onSuccess' | 'always' | 'onError';
-  preprocess?: (data: TIn) => Promise<void> | void;
+  preprocess?: (data: TIn) => Promise<TIn> | TIn;
   onSubmit?: (data: TIn) => Promise<void> | void;
   onSuccess?: (result: Awaited<TOut>) => Promise<void> | void;
   onError?: (err: unknown) => Promise<void> | void;

src/routes/+page.svelte

@@ -14,6 +14,9 @@
 		},
 		onError: async (err) => {
 			console.error('error', err);
+		},
+		preprocess: (data) => {
+			return { ...data, name: 'preprocessed' };
 		}
 	});
 </script>

src/routes/test.remote.ts

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