SPA action form improved.

Author: ciscoheat

src/lib/client/superForm.ts

@@ -521,13 +521,13 @@ export function superForm<
 		onDestroy(() => {
 			Unsubscriptions_unsubscribe();
 			NextChange_clear();
+			EnhancedForm_destroy();
 
 			for (const events of Object.values(formEvents)) {
 				events.length = 0;
 			}
 
 			formIds.get(_currentPage)?.delete(_initialFormId);
-			ActionForm_remove();
 		});
 
 		// Check for nested objects, throw if datatype isn't json
@@ -770,7 +770,7 @@ export function superForm<
 
 		if (skipValidation || !event || !options.validators || options.validators == 'clear') {
 			if (event?.paths) {
-				const formElement = event?.formElement ?? EnhancedForm;
+				const formElement = event?.formElement ?? EnhancedForm_get();
 				if (formElement) Form__clearCustomValidity(formElement, event.paths);
 			}
 			return;
@@ -820,7 +820,7 @@ export function superForm<
 		const output: Record<string, unknown> = {};
 		let validity = new Map<string, { el: HTMLElement; message: string }>();
 
-		const formElement = event.formElement ?? EnhancedForm;
+		const formElement = event.formElement ?? EnhancedForm_get();
 		if (formElement) validity = Form__clearCustomValidity(formElement, event.paths);
 
 		traversePaths(errors, (error) => {
@@ -1246,28 +1246,34 @@ export function superForm<
 
 	//#endregion
 
-	//#region ActionForm
+	//#region EnhancedForm
 
-	// SPA action mode
-	let ActionForm: HTMLFormElement | undefined = undefined;
+	/**
+	 * Used for SPA action mode and options.customValidity to display errors, even if programmatically set
+	 */
+	let EnhancedForm: HTMLFormElement | undefined;
 
-	function ActionForm_create(action: string) {
-		ActionForm = document.createElement('form');
-		ActionForm.method = 'POST';
-		ActionForm.action = action;
-		superFormEnhance(ActionForm);
-		document.body.appendChild(ActionForm);
+	function EnhancedForm_get() {
+		return EnhancedForm;
 	}
 
-	function ActionForm_setAction(action: string) {
-		if (ActionForm) ActionForm.action = action;
+	function EnhancedForm_createFromSPA(action: string) {
+		EnhancedForm = document.createElement('form');
+		EnhancedForm.method = 'POST';
+		EnhancedForm.action = action;
+		superFormEnhance(EnhancedForm);
+		document.body.appendChild(EnhancedForm);
 	}
 
-	function ActionForm_remove() {
-		if (ActionForm?.parentElement) {
-			ActionForm.remove();
-			ActionForm = undefined;
+	function EnhancedForm_setAction(action: string) {
+		if (EnhancedForm) EnhancedForm.action = action;
+	}
+
+	function EnhancedForm_destroy() {
+		if (EnhancedForm?.parentElement) {
+			EnhancedForm.remove();
 		}
+		EnhancedForm = undefined;
 	}
 
 	//#endregion
@@ -1277,9 +1283,6 @@ export function superForm<
 		($errors: ValidationErrors<T> | undefined) => ($errors ? flattenErrors($errors) : [])
 	);
 
-	// Used for options.customValidity to display errors, even if programmatically set
-	let EnhancedForm: HTMLFormElement | undefined;
-
 	///// End of Roles //////////////////////////////////////////////////////////
 
 	// Need to clear this and set it again when use:enhance has run, to avoid showing the
@@ -1438,7 +1441,7 @@ export function superForm<
 		);
 
 		if (typeof options.SPA === 'string') {
-			ActionForm_create(options.SPA);
+			EnhancedForm_createFromSPA(options.SPA);
 		}
 	}
 
@@ -1449,8 +1452,15 @@ export function superForm<
 	 * @DCI-context
 	 */
 	function superFormEnhance(FormElement: HTMLFormElement, events?: SuperFormEvents<T, M>) {
-		ActionForm_remove();
-		EnhancedForm = FormElement;
+		if (FormElement.method == 'get') FormElement.method = 'post';
+
+		if (typeof options.SPA === 'string') {
+			if (options.SPA.length && FormElement.action == document.location.href) {
+				FormElement.action = options.SPA;
+			}
+		} else {
+			EnhancedForm = FormElement;
+		}
 
 		if (events) {
 			if (events.onError) {
@@ -1523,7 +1533,6 @@ export function superForm<
 		onDestroy(() => {
 			FormElement.removeEventListener('focusout', onBlur);
 			FormElement.removeEventListener('input', onInput);
-			EnhancedForm = undefined;
 		});
 
 		///// SvelteKit enhance function //////////////////////////////////
@@ -1716,7 +1725,7 @@ export function superForm<
 					}
 
 					if (typeof options.SPA === 'string') {
-						ActionForm_setAction(options.SPA);
+						EnhancedForm_setAction(options.SPA);
 					}
 				}
 			}
@@ -2045,14 +2054,15 @@ export function superForm<
 					)
 				: Form_validate({ adapter: opts.schema });
 
-			if (opts.update && EnhancedForm) {
+			const enhancedForm = EnhancedForm_get();
+			if (opts.update && enhancedForm) {
 				// Focus on first error field
 				setTimeout(() => {
-					if (EnhancedForm)
-						scrollToFirstError(EnhancedForm, {
-							...options,
-							scrollToError: opts.focusOnError === false ? 'off' : options.scrollToError
-						});
+					if (!enhancedForm) return;
+					scrollToFirstError(enhancedForm, {
+						...options,
+						scrollToError: opts.focusOnError === false ? 'off' : options.scrollToError
+					});
 				}, 1);
 			}
 
@@ -2072,8 +2082,8 @@ export function superForm<
 		},
 
 		submit(submitter?: HTMLElement | Event | EventTarget | null | undefined) {
-			const form = EnhancedForm
-				? EnhancedForm
+			const form = EnhancedForm_get()
+				? EnhancedForm_get()
 				: submitter && submitter instanceof HTMLElement
 					? submitter.closest<HTMLFormElement>('form')
 					: undefined;

src/routes/(v2)/v2/multistep-client/+page.svelte

@@ -43,7 +43,7 @@
 
 <h3>Step {step}</h3>
 
-<form method="POST" use:enhance>
+<form use:enhance>
 	{#if step == 1}
 		<label>
 			Name<br />

src/routes/(v2)/v2/spa-action-2/+page.server.ts

@@ -0,0 +1,8 @@
+export const load = async () => {
+	const entries = [
+		{ id: 1, name: 'Number one' },
+		{ id: 2, name: 'Number two' },
+		{ id: 3, name: 'Number three' }
+	];
+	return { entries };
+};

src/routes/(v2)/v2/spa-action-2/+page.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+	export let data;
+
+	const { enhance } = superForm(
+		{},
+		{
+			SPA: '/v2/spa-action-2/classify',
+			taintedMessage: false,
+			onUpdate({ form }) {
+				const entry = data.entries.find((e) => e.id == form.message.id);
+				if (entry) entry.name = 'Modified';
+			}
+		}
+	);
+</script>
+
+<SuperDebug data={data.entries} />
+
+<table>
+	<thead>
+		<tr>
+			<th>Id</th>
+			<th>Name</th>
+			<th>Action</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each data.entries as entry}
+			<tr>
+				<td>{entry.id}</td>
+				<td>{entry.name}</td>
+				<td>
+					<form use:enhance>
+						<input type="hidden" name="id" value={entry.id} />
+						<input type="hidden" name="name" value={entry.name} />
+						<button>Change name</button>
+					</form>
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>

src/routes/(v2)/v2/spa-action-2/classify/+page.server.ts

@@ -0,0 +1,19 @@
+import { valibot } from '$lib/adapters/valibot.js';
+import { fail, message, superValidate } from '$lib/index.js';
+import * as v from 'valibot';
+
+export const _classifySchema = v.object({
+	id: v.number([v.minValue(1)]),
+	name: v.string()
+});
+
+export const actions = {
+	default: async ({ request }) => {
+		const form = await superValidate(request, valibot(_classifySchema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, { id: form.data.id });
+	}
+};