Added future test for Record

Author: ciscoheat

src/routes/(v2)/v2/schema-record/+page.server.ts

@@ -4,7 +4,7 @@ import { schema } from './schema.js';
 import { fail } from '@sveltejs/kit';
 
 export const load = async () => {
-	const form = await superValidate(zod(schema));
+	const form = await superValidate({ message: { en: 'Hi', sv: 'Hej' } }, zod(schema));
 	return { form };
 };
 

src/routes/(v2)/v2/schema-record/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { superForm } from '$lib/client/index.js';
 	import SuperDebug from '$lib/client/SuperDebug.svelte';
-	import RecordField from './RecordField.svelte';
+	import Record from './Record.svelte';
+	//import RecordField from './RecordField.svelte';
 
 	export let data;
 
@@ -17,8 +18,9 @@
 {#if $message}<h4>{$message}</h4>{/if}
 
 <form method="POST" use:enhance>
-	<RecordField field="message.name" form={superform} />
-	<RecordField field="message.id" form={superform} />
+	<Record form={superform} field="message" />
+	<!-- <RecordField field="message" form={superform} />
+	<RecordField field="message" form={superform} /> -->
 	<div>
 		<button>Submit</button>
 	</div>

src/routes/(v2)/v2/schema-record/Record.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" context="module">
+	type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	import { type SuperForm, type FormPath, fieldProxy } from '$lib/index.js';
+	import type { string } from 'joi';
+	import { get, type Readable } from 'svelte/store';
+
+	export let form: SuperForm<T>;
+	export let field: FormPath<T>;
+
+	const value = fieldProxy(form, field);
+	const errors = fieldProxy(form.errors, field as any) as unknown as Readable<
+		Record<string, string[] | unknown>
+	>;
+	//$: ({ value, errors } = formFieldProxy(form, field));
+</script>
+
+<SuperDebug data={{ errors: $errors, message: get(form.form).message }} />
+
+{#each Object.entries($value as Record<string, string>) as [key, data]}
+	<label>
+		{field}:
+		<input name={field} bind:value={$value[key]} aria-invalid={$errors ? 'true' : undefined} />
+		{#if $errors?.[key]}<span class="invalid">{$errors[key]}</span>{/if}
+	</label>
+{/each}
+
+<style>
+	input {
+		background-color: #dedede;
+	}
+
+	.invalid {
+		color: crimson;
+	}
+</style>