SuperForms support - typescript issue with constraints

[Tommertom]

Superforms works nicely. Just if you want to spread the constraints, the typescript will throw a fit...

And you need to use your own change handler to change the value, as bind:value does not work with webcomponents in Svelte.

(below code is Ionic 6 and does not handle the styling for error/helper in ion-input....so incomplete)

<script lang="ts">
	import { z } from 'zod';

	import { superForm } from 'sveltekit-superforms/client';
	import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';

	const schema = z.object({
		id: z.number().int().positive().default(Date.now()),
		name: z.string().min(2).default('Hello world!'),
		email: z.string().email()
	});

	const data = {
		id: Date.now(),
		name: 'x',
		email: 'sss@gmail.com'
	};

	const { form, errors, message, constraints, enhance, delayed } = superForm(data, {
		SPA: true,
		validators: schema,
		onUpdate: ({ form, cancel }) => {
			console.log('onUpdate', form, cancel);
		},
		onError({ result, message }) {
			console.log('onError', result, message);
			message.set(result.error.message);
		}
	});

	function handleChange(ev) {
		console.log('.');
		$form.name = ev.detail.value;

		// $form.name = 'x' + Date.now();
	}
</script>

<ion-card>
	<ion-card-header>
		<ion-card-subtitle>Great success!!</ion-card-subtitle>
		<ion-card-title>Welcome to your app!</ion-card-title>
	</ion-card-header>

	<ion-card-content>
		Thank you for using this starter. Click buttons below to open these guides (will open in new
		window). Don't forget to open DevTools to see this app in mobile mode. Happy coding!!!

		<SuperDebug data={$form} />

		{#if $message}<h3>{$message}</h3>{/if}
		{$errors.name}
	</ion-card-content>
	<form method="POST" use:enhance>
		<input type="hidden" name="id" bind:value={$form.id} />
		<ion-item>
			<ion-label position="stacked"> Name </ion-label>
			<ion-input
				name="name"
				type="text"
				value={$form.name}
				on:ionInput={handleChange}
				data-invalid={$errors.name} />
			<ion-note slot="helper">
				Here you may enter your first name - or something else
				{#if $errors.name}
					<span class="invalid">{$errors.name}</span>
				{/if}
			</ion-note>
			<ion-note slot="error">Please type more characters...</ion-note>
		</ion-item>
		<ion-item>
			<ion-label position="stacked">
				Email
				<ion-text color="danger">*</ion-text>
			</ion-label>
			<ion-input name="name" type="email" value={$form.email} />
			<ion-note slot="helper">Here you may enter your first name - or something else</ion-note>
			<ion-note slot="error">Please type more characters...</ion-note>
		</ion-item>
		<button>Submit</button>
	</form>
</ion-card>