isTainted now works in generic components.

Fixes #395.

Author: ciscoheat

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - `submit` method now falls back to submit, if no support for requestSubmit in browser.
+- `isTainted` now handles the type of `$tainted` in generic components.
 
 ## [2.12.2] - 2024-03-29
 

src/lib/client/superForm.ts

@@ -239,7 +239,7 @@ export type SuperForm<
 	options: T extends T ? FormOptions<T, M> : never; // Need this to distribute T so it works with unions
 
 	enhance: (el: HTMLFormElement, events?: SuperFormEvents<T, M>) => ReturnType<typeof kitEnhance>;
-	isTainted: (path?: T extends T ? FormPath<T> | TaintedFields<T> | boolean : never) => boolean;
+	isTainted: (path?: FormPath<T> | Record<string, unknown> | boolean | undefined) => boolean;
 	reset: (options?: ResetOptions<T>) => void;
 	submit: (submitter?: HTMLElement | Event | EventTarget | null) => void;
 
@@ -1134,7 +1134,7 @@ export function superForm<
 	}
 
 	function Tainted_isTainted(
-		path?: FormPath<T> | TaintedFields<Record<string, unknown>> | boolean
+		path?: FormPath<T> | Record<string, unknown> | boolean | undefined
 	): boolean {
 		if (typeof path === 'boolean') return path;
 		if (typeof path === 'object') return Tainted__isObjectTainted(path);

src/routes/(v2)/v2/tainted-array/+page.svelte

@@ -7,6 +7,11 @@
 	const { form, enhance, tainted, isTainted } = superForm(data.form, {
 		dataType: 'json'
 	});
+
+	isTainted('details');
+	isTainted($tainted?.details);
+	// @ts-expect-error Invalid path
+	isTainted('nope');
 </script>
 
 <SuperDebug data={{ $form, $tainted }} />

src/routes/(v2)/v2/tainted-component/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod } from '$lib/adapters/zod.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+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.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/tainted-component/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	import Button from './Button.svelte';
+	//import { zod } from '$lib/adapters/zod.js'
+	//import { schema } from './schema.js';
+
+	export let data;
+
+	const superform = superForm(data.form, { taintedMessage: false });
+	const { form, errors, message, enhance } = superform;
+
+	const set = new Map([
+		['test', 123],
+		['hello', 456]
+	]);
+</script>
+
+<SuperDebug data={set} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name: <input
+			name="name"
+			bind:value={$form.name}
+			aria-invalid={$errors.name ? 'true' : undefined}
+		/>
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+	<label>
+		Email: <input
+			name="email"
+			bind:value={$form.email}
+			aria-invalid={$errors.email ? 'true' : undefined}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+	<div>
+		<Button form={superform} />
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/tainted-component/Button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module">
+	type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import type { SuperForm } from '$lib/index.js';
+
+	export let form: SuperForm<T>;
+
+	const { tainted, isTainted } = form;
+</script>
+
+<button disabled={!isTainted($tainted)}>Submit</button>

src/routes/(v2)/v2/tainted-component/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(2),
+	email: z.string().email()
+});