updated server handling and added steps for how to throw server errors

Author: iatrophobic

README.md

@@ -22,7 +22,7 @@ pnpm add @akcodeworks/svelte-command-form
 npm install @akcodeworks/svelte-command-form
 ```
 
-## Quick start
+## How to Use
 
 ```html
 <script lang="ts">
@@ -418,11 +418,36 @@ When validation fails, `CommandForm`:
 2. Converts issues into `errors` (per field) via `transformIssues`.
 3. Stores the raw issue array in `issues` for programmatic access.
 
-If the command throws an `HttpError` from SvelteKit, the helper looks for `err.body.issues` and merges them into the same structures. Any other error is forwarded to `onError` after clearing submission state. You can handle validation errors to populate this in your `hooks.server.ts`
+If you need to manually set an error follow these steps.
+
+1. Setup your hooks.server.ts file and add an error handler.
+
+```typescript
+export const handleError: HandleServerError = async ({ error }) => {
+	// Note: If you don't want bad actors seeing your validation issues, you can do an auth check here before returning
+	if (error instanceof SchemaValidationError) return error as SchemaValidationError;
+};
+```
+
+2. Throw a new `SchemaValidationError` inside of the command.
+
+```typescript
+export const test = command(schema, async (data) => {
+	const user = await db.user.findFirst({ where: { email: data.email } });
+	if (!user)
+		throw new SchemaValidationError([
+			{ path: ['email'], message: 'Name is invalid server error!!' }
+		]);
+});
+```
+
+In the above example this will populate the `form.errors.email.message` field so you can display the error to the user on the client.
+
+> If you do not add the custom error handler in step 1, you will not get any issues back. This is a SvelteKit design principle when dealing with Remote Functions!
 
 ## Manual Errors
 
-You can add errors manually by using the `addErrors` method on the client or by throwing a `new SchemaValidationError` inside of the remote function.
+You can add errors manually by using the `addErrors` method (client only) or by throwing a `new SchemaValidationError`.
 
 ```typescript
 // server add error
@@ -447,6 +472,8 @@ const someFunc = command(schema, async (data) => {
 <button onclick="{addError}">Add an Error</button>
 ```
 
+> addError() does NOT throw an error, you will have to do that once you call it. If you want to throw an error, throw a new `SchemaValidationError`
+
 ## Contributing
 
 Feel free to contribute by opening a PR with a detailed description of why you are wanting to change what you are changing. If it can be tested with Vitest, that is preferred.

src/hooks.server.ts

@@ -0,0 +1,14 @@
+// import { ServerValidationError } from "$lib/helpers/server-validation-error.ts";
+// import type { SchemaValidationError } from "$lib/index.ts";
+// import type { HandleServerError, HandleValidationError, RequestEvent } from "@sveltejs/kit";
+// import { sequence } from "@sveltejs/kit/hooks";
+
+
+import { SchemaValidationError } from "$lib/index.ts";
+import type { HandleServerError } from "@sveltejs/kit";
+
+
+
+export const handleError: HandleServerError = async ({ error }) => {
+  if (error instanceof SchemaValidationError) return error as SchemaValidationError
+};

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

@@ -103,6 +103,7 @@ export class CommandForm<Schema extends StandardSchemaV1, TOut> {
 
       const res = await this.options.command(parsed);
       this._result = res;
+
       this.issues = null;
       await this.options.onSuccess?.(res);
 
@@ -127,10 +128,15 @@ export class CommandForm<Schema extends StandardSchemaV1, TOut> {
         return null;
       }
 
+
+
       if (isHttpError(err)) {
-        const httpError = err as HttpError & {
-          body: { issues?: Record<string, { message: string }> };
-        };
+        const httpError = err as HttpError & { body: any };
+        if (Array.isArray(httpError.body?.issues) && httpError.body.issues.every((i: any) => 'path' in i && 'message' in i)) {
+          this.setErrorsFromIssues(httpError.body.issues);
+          await this.options.onError?.(err);
+          return null;
+        }
         const transformed = httpError.body.issues;
         if (transformed) {
           this.setErrorsFromRecord(transformed);

src/lib/helpers/standard-validate.ts

@@ -12,8 +12,6 @@ export class SchemaValidationError extends Error {
   }
 }
 
-
-
 export async function standardValidate<T extends StandardSchemaV1>(
   schema: T,
   input: StandardSchemaV1.InferInput<T>

src/routes/+page.svelte

@@ -1,27 +1,21 @@
 <script lang="ts">
-	import { CommandForm } from '$lib/command-form/command-form.svelte.ts';
+	import { CommandForm } from '$lib/command-form/command-form.svelte.js';
 	import { test } from './test.remote.ts';
 	import { schema, TestEnum } from './test.schema.ts';
 
 	const f = new CommandForm(schema, {
 		command: test,
-		initial: {
-			hobbies: ['coding'],
-			status: TestEnum.ONE
-		},
 		onSubmit: async (data) => {
 			console.log(data);
 		},
 		onSuccess: async (res) => {
 			console.log('success');
-			console.log(res.success);
+			//	console.log(res.success);
 		},
 		onError: async (err) => {
-			console.log('error', err);
+			console.error('error', err);
 		}
 	});
-
-	$inspect(f.errors);
 </script>
 
 <input type="text" placeholder="Name" bind:value={f.form.name} />

src/routes/test.remote.ts

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

src/routes/test.schema.ts

@@ -4,14 +4,14 @@ export enum TestEnum {
 }
 const schema = z.object({
   name: z.string().min(2, "Name is required"),
-  age: z.number().min(0, "Age must be a positive number"),
-  address: z.object({
-    street: z.string().min(5, "Street is required"),
-    city: z.string().min(2, "City is required"),
-    zip: z.string().min(5, "ZIP code is required")
-  }),
-  hobbies: z.array(z.string()).min(1, "At least one hobby is required"),
-  status: z.enum(TestEnum)
+  // age: z.number().min(0, "Age must be a positive number"),
+  // address: z.object({
+  //   street: z.string().min(5, "Street is required"),
+  //   city: z.string().min(2, "City is required"),
+  //   zip: z.string().min(5, "ZIP code is required")
+  // }),
+  // hobbies: z.array(z.string()).min(1, "At least one hobby is required"),
+  // status: z.enum(TestEnum)
 })
 
 export { schema }