Added custom fail function.

Added result to onUpdate event.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,13 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- The `ActionResult` for success or failure is now added to the `onUpdate` event in the `result` property.
+- Added a `fail` function, works the same as the SvelteKit fail, but removes files and sets `form.valid` to `false`.
+
 ## [2.10.6] - 2024-03-20
 
 ### Changed

src/lib/client/index.ts

@@ -35,6 +35,7 @@ export {
 	setError,
 	withFiles,
 	removeFiles,
+	fail,
 	type SuperValidated,
 	type TaintedFields,
 	type ValidationErrors

src/lib/client/superForm.ts

@@ -118,6 +118,7 @@ export type FormOptions<
 		formEl: HTMLFormElement;
 		formElement: HTMLFormElement;
 		cancel: () => void;
+		result: Extract<ActionResult, { type: 'success' | 'failure' }>;
 	}) => MaybePromise<unknown | void>;
 	onUpdated: (event: { form: Readonly<SuperValidated<T, M, In>> }) => MaybePromise<unknown | void>;
 	onError:
@@ -1791,13 +1792,17 @@ export function superForm<
 								form: newForm as SuperValidated<T, M, In>,
 								formEl: FormElement,
 								formElement: FormElement,
-								cancel: () => (cancelled = true)
+								cancel: () => (cancelled = true),
+								result: result as Extract<ActionResult, { type: 'success' | 'failure' }>
 							};
 
 							for (const event of formEvents.onUpdate) {
 								await event(data);
 							}
 
+							// In case it was modified in the event
+							result = data.result as ActionResult;
+
 							if (!cancelled) {
 								if (options.customValidity) {
 									setCustomValidityForm(FormElement, data.form.errors);

src/lib/index.ts

@@ -31,6 +31,7 @@ export {
 	setError,
 	withFiles,
 	removeFiles,
+	fail,
 	type SuperValidated,
 	type TaintedFields,
 	type ValidationErrors,

src/lib/superValidate.ts

@@ -1,5 +1,5 @@
 import { traversePath } from './traversal.js';
-import { type ActionFailure, fail, type RequestEvent } from '@sveltejs/kit';
+import { type ActionFailure, fail as kitFail, type RequestEvent } from '@sveltejs/kit';
 import { type ValidationAdapter, type ValidationResult } from './adapters/adapters.js';
 import { parseRequest } from './formData.js';
 import type { ErrorStatus } from './utils.js';
@@ -198,7 +198,7 @@ export function message<
 	const remove = options?.removeFiles !== false;
 	const output = remove ? withFiles({ form }) : { form };
 
-	return form.valid ? output : fail(options?.status ?? 400, output);
+	return form.valid ? output : kitFail(options?.status ?? 400, output);
 }
 
 export const setMessage = message;
@@ -290,7 +290,7 @@ export function setError<
 	form.valid = false;
 
 	const output = options.removeFiles === false ? { form } : withFiles({ form });
-	return fail(options.status ?? 400, output);
+	return kitFail(options.status ?? 400, output);
 }
 
 export function withFiles<T extends object>(obj: T) {
@@ -304,3 +304,29 @@ export function withFiles<T extends object>(obj: T) {
 }
 
 export const removeFiles = withFiles;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function fail<T extends Record<string, unknown> | undefined>(status: number, data?: T) {
+	function checkForm(
+		data: unknown
+	): data is SuperValidated<Record<string, unknown>, unknown, Record<string, unknown>> {
+		return !!data && typeof data === 'object' && 'valid' in data && 'data' in data && 'id' in data;
+	}
+
+	function checkObj<T extends object>(data: T | undefined) {
+		if (data && typeof data === 'object') {
+			for (const key in data) {
+				const v = data[key];
+				if (checkForm(v)) {
+					v.valid = false;
+					removeFiles(v);
+				} else if (v && typeof v === 'object') {
+					checkObj(v);
+				}
+			}
+		}
+		return data;
+	}
+
+	return kitFail<T>(status, checkObj(data) as T);
+}

src/routes/(v2)/v2/Navigation.svelte

@@ -55,7 +55,8 @@
 		'files-proxy',
 		'tainted-array',
 		'spa-clearonsubmit',
-		'app-error'
+		'app-error',
+		'form-result-type'
 	].sort();
 </script>
 

src/routes/(v2)/v2/form-result-type/+page.server.ts

@@ -0,0 +1,34 @@
+import { zod } from '$lib/adapters/zod.js';
+import { superValidate } from '$lib/server/index.js';
+import { fail } from '$lib/superValidate.js';
+import { schema } from './schema.js';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (form.data.dir == 'west') {
+			return { form, code: form.data.dir.toUpperCase() };
+		}
+
+		if (form.data.dir) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const f = form as any;
+			// Testing to add files that should be removed by fail
+			f.message = new File(['123132123'], 'test.txt');
+			f.data.extra = new File(['123132123'], 'test2.txt');
+			return fail(400, { form, code: form.data.dir.toUpperCase() });
+		} else {
+			return { form, fail: true };
+		}
+	}
+};

src/routes/(v2)/v2/form-result-type/+page.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { superForm } from '$lib/client/index.js';
+	import type { ActionData, PageData } from './$types.js';
+
+	export let data: PageData;
+
+	const { form, errors, message, enhance } = superForm(data.form, {
+		taintedMessage: false,
+		resetForm: true,
+		onUpdate(event) {
+			const data = event.result.data as NonNullable<ActionData>;
+			if (data.fail && event.result.data) {
+				event.result.data.form.message = 'FAIL';
+			} else {
+				event.form.message = data.code;
+			}
+		}
+	});
+</script>
+
+{#if $message}<h4 id="message">{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<div>
+		<input type="radio" name="dir" value="north" bind:group={$form.dir} /> North<br />
+		<input type="radio" name="dir" value="south" bind:group={$form.dir} /> South<br />
+		<input type="radio" name="dir" value="east" bind:group={$form.dir} /> East<br />
+		<input type="radio" name="dir" value="west" bind:group={$form.dir} /> West (reset)<br />
+		{#if $errors.dir}<span class="invalid">{$errors.dir}</span>{/if}
+	</div>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/form-result-type/schema.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	dir: z
+		.enum(['', 'north', 'south', 'east', 'west'])
+		.refine((dir) => dir != '', 'No direction specified')
+});

src/tests/superValidate.test.ts

@@ -12,7 +12,7 @@ import {
 	type SuperValidated
 } from '$lib/superValidate.js';
 import { merge } from 'ts-deepmerge';
-import { fail } from '@sveltejs/kit';
+import { fail as kitFail } from '@sveltejs/kit';
 import { defaults as schemaDefaults } from '$lib/defaults.js';
 
 ///// Adapters //////////////////////////////////////////////////////
@@ -793,7 +793,7 @@ describe('File handling with the allowFiles option', () => {
 		});
 
 		it('should remove the files with the removeFiles function', async () => {
-			fail(400, withFiles({ form }));
+			kitFail(400, withFiles({ form }));
 			expect(form.data.avatar).toBeUndefined();
 		});
 	});