onChange updates.

Author: ciscoheat

CHANGELOG.md

@@ -9,10 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- `get` and `set` accessor for `onChange`.
 - `submit` method for `superForm`, a convenience instead of using [requestSubmit](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit). Requires `use:enhance` or that a `HTMLElement` inside the form is passed as an argument.
 
 ### Fixed
 
+- Type for `onChange.paths` wasn't strongly typed to `FormPath`.
 - Initial data was dereferenced after calling `superForm`, so it wasn't possible to update it when using `reset`.
 
 ## [2.4.0] - 2024-02-20

src/lib/client/proxies.ts

@@ -7,7 +7,7 @@ import type { FormPathArrays } from '../stringPath.js';
 import type { SuperForm, TaintOption } from './index.js';
 import type { Prettify } from '$lib/utils.js';
 
-type ProxyOptions = {
+export type ProxyOptions = {
 	taint?: TaintOption;
 };
 

src/lib/client/superForm.ts

@@ -37,6 +37,7 @@ import type {
 	ValidationResult
 } from '$lib/adapters/adapters.js';
 import type { InputConstraints } from '$lib/jsonSchema/constraints.js';
+import { fieldProxy, type ProxyOptions } from './proxies.js';
 
 export type SuperFormEvents<T extends Record<string, unknown>, M> = Pick<
 	FormOptions<T, M>,
@@ -126,7 +127,7 @@ export type FormOptions<
 					error: App.Error;
 				};
 		  }) => MaybePromise<unknown | void>);
-	onChange: (event: ChangeEvent) => void;
+	onChange: (event: ChangeEvent<T>) => void;
 
 	dataType: 'form' | 'json';
 	jsonChunkSize: number;
@@ -276,16 +277,28 @@ type ValidationResponse<
 	Invalid extends Record<string, unknown> | undefined = Record<string, any>
 > = { result: ActionResult<Success, Invalid> };
 
-export type ChangeEvent =
+export type ChangeEvent<T extends Record<string, unknown>> =
 	| {
-			path: string;
-			paths: string[];
+			path: FormPath<T>;
+			paths: FormPath<T>[];
 			formElement: HTMLFormElement;
 			target: Element;
+			set: <Path extends FormPath<T>>(
+				path: Path,
+				value: FormPathType<T, Path>,
+				options?: ProxyOptions
+			) => void;
+			get: <Path extends FormPath<T>>(path: Path) => FormPathType<T, Path>;
 	  }
 	| {
 			target: undefined;
-			paths: string[];
+			paths: FormPath<T>[];
+			set: <Path extends FormPath<T>>(
+				path: Path,
+				value: FormPathType<T, Path>,
+				options?: ProxyOptions
+			) => void;
+			get: <Path extends FormPath<T>>(path: Path) => FormPathType<T, Path>;
 	  };
 
 type FullChangeEvent = {
@@ -661,8 +674,8 @@ export function superForm<
 	function Form__changeEvent(event: FullChangeEvent) {
 		if (!options.onChange || !event.paths.length || event.type == 'blur') return;
 
-		let changeEvent: ChangeEvent;
-		const paths = event.paths.map(mergePath);
+		let changeEvent: ChangeEvent<T>;
+		const paths = event.paths.map(mergePath) as FormPath<T>[];
 
 		if (
 			event.type &&
@@ -674,12 +687,26 @@ export function superForm<
 				path: paths[0],
 				paths,
 				formElement: event.formElement,
-				target: event.target
+				target: event.target,
+				set(path, value, options?) {
+					// Casting trick to make it think it's a SuperForm
+					fieldProxy({ form: Form } as SuperForm<T>, path, options).set(value);
+				},
+				get(path) {
+					return get(fieldProxy(Form, path));
+				}
 			};
 		} else {
 			changeEvent = {
 				paths,
-				target: undefined
+				target: undefined,
+				set(path, value, options?) {
+					// Casting trick to make it think it's a SuperForm
+					fieldProxy({ form: Form } as SuperForm<T>, path, options).set(value);
+				},
+				get(path) {
+					return get(fieldProxy(Form, path));
+				}
 			};
 		}
 

src/routes/(v2)/v2/issue-337-checkboxes/+page.svelte

@@ -2,17 +2,23 @@
 	import { superForm } from '$lib/client/index.js';
 	import SuperDebug from '$lib/client/SuperDebug.svelte';
 	import CheckBox from './CheckBox.svelte';
-	//import { zod } from '$lib/adapters/zod.js'
-	//import { schema } from './schema.js';
 
 	export let data;
 
 	const theForm = superForm(data.form, {
 		taintedMessage: false,
-		onChange({ paths }) {
+		onChange({ paths, set, get }) {
+			for (const path of paths) {
+				if (path == 'accept') {
+					set('extra', 12, { taint: false });
+				} else if (path == 'extra') {
+					if (get(path) == 12) {
+						set('extra', 123, { taint: false });
+					}
+				}
+			}
 			console.log(paths);
 		}
-		//dataType: 'json',
 	});
 
 	const { form, errors, tainted, message, enhance } = theForm;
@@ -22,6 +28,10 @@
 
 {#if $message}<h4>{$message}</h4>{/if}
 
+<p>Extra:{$form.extra}</p>
+
+<p>Tainted:{Boolean($tainted?.extra)}</p>
+
 <form method="POST" use:enhance>
 	<div>Accept: <CheckBox form={theForm} field="accept" /></div>
 	<div>

src/routes/(v2)/v2/issue-337-checkboxes/schema.ts

@@ -1,5 +1,6 @@
 import { z } from 'zod';
 
 export const schema = z.object({
-	accept: z.boolean()
+	accept: z.boolean(),
+	extra: z.number().positive().optional().default(0)
 });

src/tests/superValidate.test.ts

@@ -132,7 +132,6 @@ const simpleConstraints = {
 	tags: {
 		required: true
 	}
-	// TODO: extra should be required here too
 };
 
 const nospacePattern = /^\S*$/;