From a5966c115bdfe65cfbd14fc6c95c1b47415dec6c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Wed, 27 Mar 2024 11:20:58 -0600
Subject: [PATCH] fix: `dataType: 'json'` nested field errors (#159)

Co-authored-by: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
---
 .changeset/nervous-mayflies-sort.md           |  5 ++
 packages/formsnap/.eslintignore               |  1 +
 packages/formsnap/.eslintrc.cjs               |  6 +++
 .../formsnap/src/lib/components/field.svelte  | 21 +++++----
 packages/formsnap/src/lib/context.ts          |  2 +-
 .../formsnap/src/lib/internal/utils/errors.ts |  1 -
 .../formsnap/src/lib/internal/utils/path.ts   |  5 +-
 .../routes/docs/examples/json/+page.svelte    | 46 +++++++++++++++++++
 8 files changed, 72 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/nervous-mayflies-sort.md
 create mode 100644 sites/docs/src/routes/docs/examples/json/+page.svelte

diff --git a/.changeset/nervous-mayflies-sort.md b/.changeset/nervous-mayflies-sort.md
new file mode 100644
index 0000000..6c14756
--- /dev/null
+++ b/.changeset/nervous-mayflies-sort.md
@@ -0,0 +1,5 @@
+---
+"formsnap": patch
+---
+
+Fixed a bug where `FieldErrors` wouldn't render errors for nested fields with `dataType: 'json'`
diff --git a/packages/formsnap/.eslintignore b/packages/formsnap/.eslintignore
index bdc9d4c..8d45271 100644
--- a/packages/formsnap/.eslintignore
+++ b/packages/formsnap/.eslintignore
@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
+/dist
 .env
 .env.*
 !.env.example
diff --git a/packages/formsnap/.eslintrc.cjs b/packages/formsnap/.eslintrc.cjs
index 600cd08..6d9d727 100644
--- a/packages/formsnap/.eslintrc.cjs
+++ b/packages/formsnap/.eslintrc.cjs
@@ -35,6 +35,12 @@ module.exports = {
 					}
 				]
 			}
+		},
+		{
+			files: ['*.ts', '*.js', '*.svelte'],
+			rules: {
+				'no-console': 'error'
+			}
 		}
 	]
 };
diff --git a/packages/formsnap/src/lib/components/field.svelte b/packages/formsnap/src/lib/components/field.svelte
index 60c75da..8046777 100644
--- a/packages/formsnap/src/lib/components/field.svelte
+++ b/packages/formsnap/src/lib/components/field.svelte
@@ -6,6 +6,8 @@
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import { getValueAtPath } from '$lib/internal/utils/path.js';
+
 	import type { FieldProps } from './types.js';
 
 	import { setFormField, type FieldContext } from '$lib/context.js';
@@ -23,26 +25,25 @@
 		errors: formErrors,
 		constraints: formConstraints,
 		tainted: formTainted,
-		form: formData,
-		isTainted
+		form: formData
 	} = form);
 
 	const field: FieldContext<T, U> = {
-		name: writable<U>(name),
-		errors: writable<string[]>([]),
-		constraints: writable<Record<string, unknown>>({}),
+		name: writable(name),
+		errors: writable([]),
+		constraints: writable({}),
 		tainted: writable(false),
-		fieldErrorsId: writable<string>(),
-		descriptionId: writable<string>(),
+		fieldErrorsId: writable(),
+		descriptionId: writable(),
 		form
 	};
 
 	const { tainted, errors } = field;
 
 	$: field.name.set(name);
-	$: field.errors.set(extractErrorArray($formErrors[name]));
-	$: field.constraints.set($formConstraints[name] ?? {});
-	$: field.tainted.set($formTainted ? isTainted($formTainted[name]) : false);
+	$: field.errors.set(extractErrorArray(getValueAtPath(name, $formErrors)));
+	$: field.constraints.set(getValueAtPath(name, $formConstraints) ?? {});
+	$: field.tainted.set($formTainted ? getValueAtPath(name, $formTainted) === true : false);
 
 	setFormField<T, U>(field);
 </script>
diff --git a/packages/formsnap/src/lib/context.ts b/packages/formsnap/src/lib/context.ts
index b6f30f2..6a071f3 100644
--- a/packages/formsnap/src/lib/context.ts
+++ b/packages/formsnap/src/lib/context.ts
@@ -111,7 +111,7 @@ export function getFormControl(): FormControlContext {
 }
 
 function ctxError(ctx: string) {
-	console.error(
+	throw new Error(
 		`Unable to find \`${ctx}\` context. Did you forget to wrap the component in a \`${ctx}\`?`
 	);
 }
diff --git a/packages/formsnap/src/lib/internal/utils/errors.ts b/packages/formsnap/src/lib/internal/utils/errors.ts
index 5b9f377..9790229 100644
--- a/packages/formsnap/src/lib/internal/utils/errors.ts
+++ b/packages/formsnap/src/lib/internal/utils/errors.ts
@@ -7,7 +7,6 @@ export function extractErrorArray<T extends Record<string, unknown>>(
 	errors: ValidationErrors<T> | undefined
 ): string[] {
 	if (Array.isArray(errors)) return errors;
-
 	if (typeof errors === 'object' && '_errors' in errors) {
 		if (errors._errors !== undefined) return errors._errors;
 	}
diff --git a/packages/formsnap/src/lib/internal/utils/path.ts b/packages/formsnap/src/lib/internal/utils/path.ts
index 56d5b45..38e14fa 100644
--- a/packages/formsnap/src/lib/internal/utils/path.ts
+++ b/packages/formsnap/src/lib/internal/utils/path.ts
@@ -4,11 +4,10 @@ export function getValueAtPath(path: string, obj: Record<string, unknown>) {
 	let value = obj as any;
 
 	for (const key of keys) {
-		if (typeof value !== 'object') {
+		if (typeof value !== 'object' || value === null) {
 			return undefined; // Handle cases where the path doesn't exist in the object
 		}
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		value = value[key] as any;
+		value = value[key];
 	}
 
 	return value;
diff --git a/sites/docs/src/routes/docs/examples/json/+page.svelte b/sites/docs/src/routes/docs/examples/json/+page.svelte
new file mode 100644
index 0000000..85af629
--- /dev/null
+++ b/sites/docs/src/routes/docs/examples/json/+page.svelte
@@ -0,0 +1,46 @@
+<script lang="ts" context="module">
+	import { z } from "zod";
+
+	export const formSchema = z.object({
+		name: z.string(),
+		address: z.object({
+			country: z.string(),
+			state: z.string(),
+			city: z.string(),
+			streetName: z.string(),
+			streetNumber: z.string(),
+			building: z.string(),
+			apartment: z.string(),
+			postcode: z.string().min(4).max(10),
+		}),
+	});
+
+	export type FormSchema = typeof formSchema;
+</script>
+
+<script lang="ts">
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms";
+	import { zod } from "sveltekit-superforms/adapters";
+	import { Field, FieldErrors, Control, Label } from "formsnap";
+
+	const form = superForm(defaults(zod(formSchema)), {
+		SPA: true,
+		resetForm: false,
+		validators: zod(formSchema),
+		dataType: "json",
+	});
+	const { form: formData, enhance, errors } = form;
+</script>
+
+<SuperDebug data={$errors} />
+<form method="POST" use:enhance class="flex flex-col gap-2">
+	<Field {form} name="address.postcode">
+		<Control let:attrs>
+			<Label>Postcode</Label>
+			<input {...attrs} bind:value={$formData.address.postcode} />
+		</Control>
+		<FieldErrors class="text-red-500" />
+	</Field>
+
+	<button class="mt-6">Submit</button>
+</form>