Zod 4 fixes

Author: ciscoheat

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- [Zod 4](https://zod.dev/) adapter added! Adapter name is `zod4`. As Zod is now using its own JSON Schema representation, and there are some breaking changes like how enums are handled, check migrations carefully and please report any bugs [on github](https://github.com/ciscoheat/sveltekit-superforms/issues).
+- [Zod 4](https://zod.dev/) adapter added! Adapter names are `zod4` and `zod4Client`, works with both the full version and Zod Mini. As Zod is now using its own JSON Schema representation, and there are some breaking changes like how enums are handled, check migrations carefully and please [report any bugs](https://github.com/ciscoheat/sveltekit-superforms/issues).
 - [taintedMessage](https://superforms.rocks/concepts/tainted) now passes `BeforeNavigate` in its function signature.
 
 ### Changed

src/lib/adapters/index.ts

@@ -15,6 +15,7 @@ export {
 	type ZodObjectTypes,
 	type ZodObjectType
 } from './zod.js';
+export { zod as zod4, zodClient as zod4Client } from './zod4.js';
 export { vine, vineClient } from './vine.js';
 export { schemasafe, schemasafeClient } from './schemasafe.js';
 export { superstruct, superstructClient } from './superstruct.js';

src/lib/adapters/zod4.ts

@@ -13,8 +13,6 @@ import { memoize } from '$lib/memoize.js';
 
 type Options = NonNullable<Parameters<typeof toJSONSchema>[1]>;
 
-type ZodObject = $ZodObject;
-
 const defaultJSONSchemaOptions = {
 	unrepresentable: 'any',
 	override: (ctx) => {
@@ -27,11 +25,11 @@ const defaultJSONSchemaOptions = {
 } satisfies Options;
 
 /* @__NO_SIDE_EFFECTS__ */
-export const zodToJSONSchema = <S extends ZodObject>(schema: S, options?: Options) => {
+export const zodToJSONSchema = <S extends $ZodObject>(schema: S, options?: Options) => {
 	return toJSONSchema(schema, { ...defaultJSONSchemaOptions, ...options }) as JSONSchema7;
 };
 
-async function validate<T extends ZodObject>(
+async function validate<T extends $ZodObject>(
 	schema: T,
 	data: unknown,
 	error: $ZodErrorMap | undefined
@@ -50,7 +48,7 @@ async function validate<T extends ZodObject>(
 	};
 }
 
-function _zod4<T extends ZodObject>(
+function _zod4<T extends $ZodObject>(
 	schema: T,
 	options?: AdapterOptions<Infer<T, 'zod4'>> & { error?: $ZodErrorMap; config?: Options }
 ): ValidationAdapter<Infer<T, 'zod4'>, InferIn<T, 'zod4'>> {
@@ -64,7 +62,7 @@ function _zod4<T extends ZodObject>(
 	});
 }
 
-function _zod4Client<T extends ZodObject>(
+function _zod4Client<T extends $ZodObject>(
 	schema: T,
 	options?: { error?: $ZodErrorMap }
 ): ClientValidationAdapter<Infer<T, 'zod4'>, InferIn<T, 'zod4'>> {
@@ -74,5 +72,5 @@ function _zod4Client<T extends ZodObject>(
 	};
 }
 
-export const zod4 = /* @__PURE__ */ memoize(_zod4);
-export const zod4Client = /* @__PURE__ */ memoize(_zod4Client);
+export const zod = /* @__PURE__ */ memoize(_zod4);
+export const zodClient = /* @__PURE__ */ memoize(_zod4Client);

src/routes/(v2)/v2/zod4/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod } from '$lib/adapters/zod4.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/zod4/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	import { zod } from '$lib/adapters/zod4.js';
+	import { schema } from './schema.js';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance } = superForm(data.form, {
+		taintedMessage: false,
+		validators: zod(schema)
+		//dataType: 'json',
+	});
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name: <input
+			name="name"
+			bind:value={$form.name}
+			aria-invalid={$errors.name ? 'true' : undefined}
+		/>
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+	<label>
+		Email: <input
+			name="email"
+			bind:value={$form.email}
+			aria-invalid={$errors.email ? 'true' : undefined}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/zod4/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod/v4';
+
+export const schema = z.object({
+	name: z.string().min(2),
+	email: z.string().email()
+});

src/routes/(v2)/v2/zodmini/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod } from '$lib/adapters/zod4.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/zodmini/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	import { zod } from '$lib/adapters/zod4.js';
+	import { schema } from './schema.js';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance } = superForm(data.form, {
+		taintedMessage: false,
+		//dataType: 'json',
+		validators: zod(schema)
+	});
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name: <input
+			name="name"
+			bind:value={$form.name}
+			aria-invalid={$errors.name ? 'true' : undefined}
+		/>
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+	<label>
+		Email: <input
+			name="email"
+			bind:value={$form.email}
+			aria-invalid={$errors.email ? 'true' : undefined}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/zodmini/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod/v4-mini';
+
+export const schema = z.object({
+	name: z.string().check(z.minLength(2, 'Name is too short')),
+	email: z.email('Invalid email')
+});

src/tests/superValidate.test.ts

@@ -20,7 +20,7 @@ import { defaults as schemaDefaults } from '$lib/defaults.js';
 import { zod, zodToJSONSchema } from '$lib/adapters/zod.js';
 import { z, type ZodErrorMap } from 'zod';
 
-import { zod4, zodToJSONSchema as zod4ToJSONSchema } from '$lib/adapters/zod4.js';
+import { zod as zod4, zodToJSONSchema as zod4ToJSONSchema } from '$lib/adapters/zod4.js';
 import { z as z4 } from 'zod/v4';
 
 import { valibot } from '$lib/adapters/valibot.js';