Fixes #332

Array data being undefined.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,12 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- Array data was set to `undefined` when `dataType: 'json'` was set.
+
 ## [2.0.0] - 2024-02-11
 
 ### Removed

src/lib/client/superForm.ts

@@ -1597,6 +1597,7 @@ export function superForm<
 									return data.set(undefined);
 								} else if (
 									Array.isArray(data.value) &&
+									data.value.length &&
 									data.value.every((v) => v instanceof File)
 								) {
 									const key = '__superform_files_' + mergePath(data.path);

src/routes/(v2)/v2/issue-332-arrays/+page.server.ts

@@ -0,0 +1,36 @@
+import { superValidate } from '$lib/index.js';
+import { zod } from '$lib/adapters/zod.js';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema.js';
+
+import type { Actions, PageServerLoad } from './$types.js';
+
+export const load: PageServerLoad = async () => {
+	const form = await superValidate(zod(schema));
+	console.log(form.data);
+
+	// Always return { form } in load functions
+	return { form };
+};
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		// Use superValidate in form actions too, but with the request
+		const formData = await request.formData();
+		console.log('🚀 ~ default: ~ formData:', formData);
+		const form = await superValidate(formData, zod(schema));
+
+		console.dir(form, { depth: 10 });
+
+		// Convenient validation check:
+		if (!form.valid) {
+			// Always return { form } and things will just work.
+			return fail(400, { form });
+		}
+
+		// TODO: Do something with the validated form.data
+
+		// Yep, return { form } here too
+		return { form };
+	}
+};

src/routes/(v2)/v2/issue-332-arrays/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { superForm } from '$lib/index.js';
+	import SuperDebug from '$lib/index.js';
+	import { schema } from './schema.js';
+	import { zodClient } from '$lib/adapters/zod.js';
+
+	export let data;
+
+	const { form, enhance } = superForm(data.form, {
+		dataType: 'json',
+		validators: zodClient(schema)
+	});
+</script>
+
+<SuperDebug data={$form} />
+
+<form method="POST" use:enhance>
+	<div><button>Submit</button></div>
+</form>
+
+<div style="margin-top:2rem;">
+	<a target="_blank" href="https://superforms.rocks/get-started">Tutorial for this example here</a>
+</div>
+
+<style>
+	.invalid {
+		color: red;
+	}
+</style>

src/routes/(v2)/v2/issue-332-arrays/schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().default('Hello world!'),
+	testArray: z.object({ foo: z.string() }).array(),
+	nested: z.object({
+		arr: z.object({ foo: z.string() }).array()
+	})
+});

src/tests/superValidate.test.ts

@@ -688,3 +688,49 @@ describe('Edge cases', () => {
 		});
 	});
 });
+
+describe('Array validation', () => {
+	describe('should return an empty array as default when dataType is json', () => {
+		const schema = z.object({
+			testArray: z.object({ foo: z.string() }).array(),
+			nested: z.object({
+				arr: z.object({ foo: z.string() }).array()
+			})
+		});
+
+		it('with the default values', async () => {
+			const form = await superValidate(zod(schema));
+			expect(form.errors.testArray?._errors).toBeUndefined();
+			expect(form.data.testArray).toEqual([]);
+			expect(form.errors.nested?.arr?._errors).toBeUndefined();
+			expect(form.data.nested.arr).toEqual([]);
+		});
+
+		it('when passing data directly', async () => {
+			const form = await superValidate({ testArray: undefined }, zod(schema), { errors: true });
+
+			expect(form.errors.testArray?._errors).toEqual(['Required']);
+			expect(form.data.testArray).toEqual([]);
+			expect(form.errors.nested?.arr?._errors).toBeUndefined();
+			expect(form.data.nested.arr).toEqual([]);
+		});
+
+		it('when passing an empty object', async () => {
+			const form = await superValidate({}, zod(schema), { errors: true });
+
+			expect(form.errors.testArray).toBeUndefined();
+			expect(form.data.testArray).toEqual([]);
+			expect(form.errors.nested?.arr?._errors).toBeUndefined();
+			expect(form.data.nested.arr).toEqual([]);
+		});
+
+		it('when passing undefined', async () => {
+			const form = await superValidate(undefined, zod(schema), { errors: true });
+
+			expect(form.errors.testArray).toBeUndefined();
+			expect(form.data.testArray).toEqual([]);
+			expect(form.errors.nested?.arr?._errors).toBeUndefined();
+			expect(form.data.nested.arr).toEqual([]);
+		});
+	});
+});