Added test for nested data with $ref

Author: ciscoheat

src/routes/(v2)/v2/nested-traverse/+page.server.ts

@@ -0,0 +1,67 @@
+import { nerveForm } from './schema.js';
+import { z } from 'zod';
+import { superValidate } from 'sveltekit-superforms/server';
+import { zod } from '$lib/adapters/zod.js';
+import type { Actions } from '@sveltejs/kit';
+import { fail } from '@sveltejs/kit';
+import { parse } from 'devalue';
+
+type DeficitTypeKey = keyof z.infer<typeof nerveForm>;
+type NerveFormData = z.infer<typeof nerveForm>;
+
+type Side = 'left' | 'right';
+
+export async function load() {
+	const findings = [
+		{
+			id: '1',
+			key: 'nerve',
+			nerve: 'c5',
+			type: 'motor',
+			grade: 25,
+			side: 'left',
+			comments: 'This is a comment'
+		},
+		{
+			id: '2',
+			key: 'nerve',
+			nerve: 'c5',
+			type: 'sensory',
+			grade: 35,
+			side: 'left',
+			comments: 'This is a comment'
+		}
+	];
+
+	const emptyData = {
+		motor: { left: {}, right: {} },
+		sensory: { left: {}, right: {} },
+		dysesthesia: { left: {}, right: {} }
+	};
+
+	const formData = findings.reduce<NerveFormData>((acc, cur) => {
+		if (cur.grade && cur.type && cur.side) {
+			acc[cur.type as DeficitTypeKey][cur.side as Side].grade = cur.grade;
+			acc[cur.type as DeficitTypeKey][cur.side as Side].comments = cur.comments || '';
+		}
+		return acc;
+	}, emptyData);
+
+	const form = await superValidate(formData, zod(nerveForm));
+	return {
+		form
+	};
+}
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.dir(parse(formData.get('__superform_json')), { depth: 10 });
+		const form = await superValidate(formData, zod(nerveForm));
+		console.dir(form, { depth: 10 }); //debug
+
+		if (!form.valid) console.log('Not valid');
+		if (!form.valid) return fail(400, { form });
+		return { form };
+	}
+};

src/routes/(v2)/v2/nested-traverse/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import SuperDebug from '$lib/index.js';
+	import { superForm } from '$lib/index.js';
+
+	export let data;
+
+	const form = superForm(data.form, { dataType: 'json' });
+	const { form: formData, enhance } = form;
+
+	const sections = ['motor', 'sensory', 'dysesthesia'] as const;
+	const sides = ['left', 'right'] as const;
+</script>
+
+<form method="POST" use:enhance>
+	<main class="flex flex-col gap-y-8">
+		{#each sections as section}
+			<fieldset class="border p-4 rounded-md">
+				<legend class="px-2">{section}</legend>
+				<div class="flex gap-4">
+					{#each sides as side}
+						<div class="flex flex-col space-y-2 basis-1/2">
+							<div>{side} grade</div>
+							<input type="number" bind:value={$formData[section][side].grade} class="w-28" />
+							<textarea bind:value={$formData[section][side].comments}></textarea>
+						</div>
+					{/each}
+				</div>
+			</fieldset>
+		{/each}
+	</main>
+	<footer class="my-8">
+		<button class="border rounded-md px-2 py-1 bg-green-300" type="submit">Save Data</button>
+	</footer>
+</form>
+
+<SuperDebug data={formData} />

src/routes/(v2)/v2/nested-traverse/schema.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+const deficitForm = z.object({
+	grade: z.number().min(0).max(100).nullable().default(null),
+	comments: z.string().optional()
+});
+
+const sideData = z.object({
+	left: deficitForm,
+	right: deficitForm
+});
+
+export const nerveForm = z.object({
+	motor: sideData,
+	sensory: sideData,
+	dysesthesia: sideData
+});