Nullable fields weren't always detected in JSON Schemas.

Author: ciscoheat

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Nullable fields weren't always detected in JSON Schemas.
 - Constraints weren't added when using default values for an adapter with introspection.
 
 ## [2.3.0] - 2024-02-18

src/lib/jsonSchema/schemaInfo.ts

@@ -26,6 +26,10 @@ export type SchemaInfo = {
 
 const conversionFormatTypes = ['unix-time', 'bigint', 'any', 'symbol', 'set'];
 
+/**
+ * Normalizes the different kind of schema variations (anyOf, union, const null, etc)
+ * to figure out the field type, optional, nullable, etc.
+ */
 export function schemaInfo(
 	schema: JSONSchema7Definition,
 	isOptional: boolean,
@@ -53,7 +57,7 @@ export function schemaInfo(
 				) as { [key: string]: JSONSchema7 })
 			: undefined;
 
-	const union = unionInfo(schema)?.filter((u) => u.type !== 'null');
+	const union = unionInfo(schema)?.filter((u) => u.type !== 'null' && u.const !== null);
 
 	return {
 		types: types.filter((s) => s !== 'null') as SchemaInfo['types'],
@@ -75,7 +79,7 @@ function schemaTypes(
 		throw new SchemaError('Schema cannot be defined as boolean', path);
 	}
 
-	let types: SchemaType[] = [];
+	let types: SchemaType[] = schema.const === null ? ['null'] : [];
 
 	if (schema.type) {
 		types = Array.isArray(schema.type) ? schema.type : [schema.type];

src/routes/(v2)/v2/Navigation.svelte

@@ -29,10 +29,11 @@
 		'trim-fields',
 		'unions',
 		'valibot-dates',
+		'valibot-nullable',
 		'validate',
 		'validate-update',
 		'validators-clear'
-	];
+	].sort();
 </script>
 
 <nav class="flex-list">

src/routes/(v2)/v2/valibot-nullable/+page.server.ts

@@ -0,0 +1,20 @@
+import { superValidate, message } from '$lib/index.js';
+import { valibot } from '$lib/adapters/valibot.js';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema.js';
+
+export const load = async () => {
+	const form = await superValidate(valibot(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const form = await superValidate(request, valibot(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Form posted successfully!');
+	}
+};

src/routes/(v2)/v2/valibot-nullable/+page.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { superForm } from '$lib/index.js';
+	import SuperDebug from '$lib/index.js';
+
+	export let data;
+
+	const { form, errors, message, enhance } = superForm(data.form);
+</script>
+
+<SuperDebug data={$form} />
+
+<h3>Nullable Valibot schema</h3>
+
+{#if $message}
+	<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
+		{$message}
+	</div>
+{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name<br />
+		<input name="name" aria-invalid={$errors.name ? 'true' : undefined} bind:value={$form.name} />
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+
+	<label>
+		Email<br />
+		<input
+			name="email"
+			type="email"
+			aria-invalid={$errors.email ? 'true' : undefined}
+			bind:value={$form.email}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+
+	<button>Submit</button>
+</form>
+
+<hr />
+<p><a target="_blank" href="https://superforms.rocks/api">API Reference</a></p>
+
+<style>
+	.invalid {
+		color: red;
+	}
+
+	.status {
+		color: white;
+		padding: 4px;
+		padding-left: 8px;
+		border-radius: 2px;
+		font-weight: 500;
+	}
+
+	.status.success {
+		background-color: seagreen;
+	}
+
+	.status.error {
+		background-color: #ff2a02;
+	}
+
+	input {
+		background-color: #ddd;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	hr {
+		margin-top: 4rem;
+	}
+
+	form {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+</style>

src/routes/(v2)/v2/valibot-nullable/schema.ts

@@ -0,0 +1,6 @@
+import { object, string, minLength, email, nullable } from 'valibot';
+
+export const schema = object({
+	name: nullable(string([minLength(1)])),
+	email: string([email()])
+});